From 040939fb720f8666eaee3d3b1866fe84e40151ca Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Sun, 28 Dec 2025 10:21:32 -0600
Subject: chore: cleanup theme stuff

---
 packages/ui/src/theme/loader.ts | 110 ----------------------------------------
 1 file changed, 110 deletions(-)

(limited to 'packages/ui/src/theme/loader.ts')

diff --git a/packages/ui/src/theme/loader.ts b/packages/ui/src/theme/loader.ts
index b25c833dd..0f61076a0 100644
--- a/packages/ui/src/theme/loader.ts
+++ b/packages/ui/src/theme/loader.ts
@@ -1,13 +1,7 @@
-/**
- * Theme loader - loads theme JSON files and applies them to the DOM.
- */
-
 import type { DesktopTheme, ResolvedTheme } from "./types"
 import { resolveThemeVariant, themeToCss } from "./resolve"
 
-/** Currently active theme */
 let activeTheme: DesktopTheme | null = null
-
 const THEME_STYLE_ID = "opencode-theme"
 
 function ensureLoaderStyleElement(): HTMLStyleElement {
@@ -21,115 +15,25 @@ function ensureLoaderStyleElement(): HTMLStyleElement {
   return element
 }
 
-/**
- * Load and apply a theme to the document.
- * Creates or updates a <style> element with the theme's CSS custom properties.
- *
- * @param theme - The desktop theme to apply
- * @param themeId - Optional theme ID for the data-theme attribute
- */
 export function applyTheme(theme: DesktopTheme, themeId?: string): void {
   activeTheme = theme
-
-  // Resolve both variants
   const lightTokens = resolveThemeVariant(theme.light, false)
   const darkTokens = resolveThemeVariant(theme.dark, true)
-
   const targetThemeId = themeId ?? theme.id
-
-  // Build the CSS
   const css = buildThemeCss(lightTokens, darkTokens, targetThemeId)
-
   const themeStyleElement = ensureLoaderStyleElement()
   themeStyleElement.textContent = css
-
   document.documentElement.setAttribute("data-theme", targetThemeId)
 }
 
-/**
- * Build CSS string from resolved theme tokens
- */
 function buildThemeCss(light: ResolvedTheme, dark: ResolvedTheme, themeId: string): string {
   const isDefaultTheme = themeId === "oc-1"
-
-  // Static tokens that don't change between themes
-  const staticTokens = `
-  --font-family-sans: "Inter", "Inter Fallback";
-  --font-family-sans--font-feature-settings: "ss03" 1;
-  --font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
-  --font-family-mono--font-feature-settings: "ss01" 1;
-
-  --font-size-small: 13px;
-  --font-size-base: 14px;
-  --font-size-large: 16px;
-  --font-size-x-large: 20px;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --line-height-large: 150%;
-  --line-height-x-large: 180%;
-  --line-height-2x-large: 200%;
-  --letter-spacing-normal: 0;
-  --letter-spacing-tight: -0.1599999964237213;
-  --letter-spacing-tightest: -0.3199999928474426;
-  --paragraph-spacing-base: 0;
-
-  --spacing: 0.25rem;
-
-  --breakpoint-sm: 40rem;
-  --breakpoint-md: 48rem;
-  --breakpoint-lg: 64rem;
-  --breakpoint-xl: 80rem;
-  --breakpoint-2xl: 96rem;
-
-  --container-3xs: 16rem;
-  --container-2xs: 18rem;
-  --container-xs: 20rem;
-  --container-sm: 24rem;
-  --container-md: 28rem;
-  --container-lg: 32rem;
-  --container-xl: 36rem;
-  --container-2xl: 42rem;
-  --container-3xl: 48rem;
-  --container-4xl: 56rem;
-  --container-5xl: 64rem;
-  --container-6xl: 72rem;
-  --container-7xl: 80rem;
-
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.625rem;
-
-  --shadow-xs:
-    0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-md:
-    0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
-  --shadow-xs-border:
-    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
-    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-base:
-    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
-    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-select:
-    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
-    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
-    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
-  --shadow-xs-border-focus:
-    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
-    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
-    0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));`
-
   const lightCss = themeToCss(light)
   const darkCss = themeToCss(dark)
 
-  // For the default theme, we use :root directly
-  // For named themes, we use the [data-theme] selector
   if (isDefaultTheme) {
     return `
 :root {
-  ${staticTokens}
-
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
@@ -147,8 +51,6 @@ function buildThemeCss(light: ResolvedTheme, dark: ResolvedTheme, themeId: strin
 
   return `
 html[data-theme="${themeId}"] {
-  ${staticTokens}
-
   color-scheme: light;
   --text-mix-blend-mode: multiply;
 
@@ -164,9 +66,6 @@ html[data-theme="${themeId}"] {
 `
 }
 
-/**
- * Load a theme from a JSON file URL
- */
 export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
   const response = await fetch(url)
   if (!response.ok) {
@@ -175,9 +74,6 @@ export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
   return response.json()
 }
 
-/**
- * Get the currently active theme
- */
 export function getActiveTheme(): DesktopTheme | null {
   const activeId = document.documentElement.getAttribute("data-theme")
   if (!activeId) {
@@ -189,9 +85,6 @@ export function getActiveTheme(): DesktopTheme | null {
   return null
 }
 
-/**
- * Remove the current theme and clean up
- */
 export function removeTheme(): void {
   activeTheme = null
   const existingElement = document.getElementById(THEME_STYLE_ID)
@@ -201,9 +94,6 @@ export function removeTheme(): void {
   document.documentElement.removeAttribute("data-theme")
 }
 
-/**
- * Force a specific color scheme (light/dark) regardless of system preference
- */
 export function setColorScheme(scheme: "light" | "dark" | "auto"): void {
   if (scheme === "auto") {
     document.documentElement.style.removeProperty("color-scheme")
-- 
cgit v1.2.3