@opencode/ui 0.0.0-reserved → 2.0.1

package/src/theme/themes/vercel.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Vercel",
+  "id": "vercel",
+  "light": {
+    "palette": {
+      "neutral": "#FFFFFF",
+      "ink": "#171717",
+      "primary": "#0070F3",
+      "accent": "#8E4EC6",
+      "success": "#388E3C",
+      "warning": "#FF9500",
+      "error": "#DC3545",
+      "info": "#0070F3",
+      "diffAdd": "#46A758",
+      "diffDelete": "#E5484D"
+    },
+    "overrides": {
+      "text-weak": "#666666",
+      "syntax-comment": "#888888",
+      "syntax-keyword": "#E93D82",
+      "syntax-string": "#46A758",
+      "syntax-primitive": "#8E4EC6",
+      "syntax-variable": "#0070F3",
+      "syntax-property": "#12A594",
+      "syntax-type": "#12A594",
+      "syntax-constant": "#FFB224",
+      "syntax-operator": "#E93D82",
+      "syntax-punctuation": "#171717",
+      "syntax-object": "#0070F3",
+      "markdown-heading": "#8E4EC6",
+      "markdown-text": "#171717",
+      "markdown-link": "#0070F3",
+      "markdown-link-text": "#12A594",
+      "markdown-code": "#46A758",
+      "markdown-block-quote": "#666666",
+      "markdown-emph": "#FFB224",
+      "markdown-strong": "#E93D82",
+      "markdown-horizontal-rule": "#999999",
+      "markdown-list-item": "#171717",
+      "markdown-list-enumeration": "#0070F3",
+      "markdown-image": "#12A594",
+      "markdown-image-text": "#12A594",
+      "markdown-code-block": "#171717"
+    }
+  },
+  "dark": {
+    "palette": {
+      "neutral": "#000000",
+      "ink": "#EDEDED",
+      "primary": "#0070F3",
+      "accent": "#8E4EC6",
+      "success": "#46A758",
+      "warning": "#FFB224",
+      "error": "#E5484D",
+      "info": "#52A8FF",
+      "interactive": "#52A8FF",
+      "diffAdd": "#63C46D",
+      "diffDelete": "#FF6166"
+    },
+    "overrides": {
+      "text-weak": "#878787",
+      "syntax-comment": "#878787",
+      "syntax-keyword": "#F75590",
+      "syntax-string": "#63C46D",
+      "syntax-primitive": "#BF7AF0",
+      "syntax-variable": "#52A8FF",
+      "syntax-property": "#0AC7AC",
+      "syntax-type": "#0AC7AC",
+      "syntax-constant": "#F2A700",
+      "syntax-operator": "#F75590",
+      "syntax-punctuation": "#EDEDED",
+      "syntax-object": "#52A8FF",
+      "markdown-heading": "#BF7AF0",
+      "markdown-text": "#EDEDED",
+      "markdown-link": "#52A8FF",
+      "markdown-link-text": "#0AC7AC",
+      "markdown-code": "#63C46D",
+      "markdown-block-quote": "#878787",
+      "markdown-emph": "#F2A700",
+      "markdown-strong": "#F75590",
+      "markdown-horizontal-rule": "#454545",
+      "markdown-list-item": "#EDEDED",
+      "markdown-list-enumeration": "#52A8FF",
+      "markdown-image": "#0AC7AC",
+      "markdown-image-text": "#50E3C2",
+      "markdown-code-block": "#EDEDED"
+    }
+  }
+}

package/src/theme/themes/vesper.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Vesper",
+  "id": "vesper",
+  "light": {
+    "palette": {
+      "neutral": "#F0F0F0",
+      "ink": "#101010",
+      "primary": "#FFC799",
+      "accent": "#B30000",
+      "success": "#99FFE4",
+      "warning": "#FFC799",
+      "error": "#FF8080",
+      "info": "#FFC799",
+      "diffAdd": "#99FFE4",
+      "diffDelete": "#FF8080"
+    },
+    "overrides": {
+      "syntax-comment": "#7a7a7a",
+      "syntax-keyword": "#6e6e6e",
+      "syntax-string": "#117e69",
+      "syntax-primitive": "#8d541c",
+      "syntax-property": "#101010",
+      "syntax-type": "#8d541c",
+      "syntax-constant": "#8d541c"
+    }
+  },
+  "dark": {
+    "palette": {
+      "neutral": "#101010",
+      "ink": "#FFF",
+      "primary": "#FFC799",
+      "accent": "#FF8080",
+      "success": "#99FFE4",
+      "warning": "#FFC799",
+      "error": "#FF8080",
+      "info": "#FFC799",
+      "diffAdd": "#99FFE4",
+      "diffDelete": "#FF8080"
+    },
+    "overrides": {
+      "syntax-comment": "#8b8b8b",
+      "syntax-keyword": "#a0a0a0",
+      "syntax-string": "#99ffe4",
+      "syntax-primitive": "#ffc799",
+      "syntax-property": "#ffffff",
+      "syntax-type": "#ffc799",
+      "syntax-constant": "#ffc799"
+    }
+  }
+}

package/src/theme/themes/zenburn.json

@@ -0,0 +1,87 @@
+{
+  "$schema": "https://opencode.ai/desktop-theme.json",
+  "name": "Zenburn",
+  "id": "zenburn",
+  "light": {
+    "palette": {
+      "neutral": "#ffffef",
+      "ink": "#3f3f3f",
+      "primary": "#5f7f8f",
+      "accent": "#5f8f8f",
+      "success": "#5f8f5f",
+      "warning": "#8f8f5f",
+      "error": "#8f5f5f",
+      "info": "#8f7f5f"
+    },
+    "overrides": {
+      "text-weak": "#6f6f6f",
+      "syntax-comment": "#5f7f5f",
+      "syntax-keyword": "#8f8f5f",
+      "syntax-string": "#8f5f5f",
+      "syntax-primitive": "#5f7f8f",
+      "syntax-variable": "#3f3f3f",
+      "syntax-property": "#5f8f8f",
+      "syntax-type": "#5f8f8f",
+      "syntax-constant": "#5f8f5f",
+      "syntax-operator": "#8f8f5f",
+      "syntax-punctuation": "#3f3f3f",
+      "syntax-object": "#3f3f3f",
+      "markdown-heading": "#8f8f5f",
+      "markdown-text": "#3f3f3f",
+      "markdown-link": "#5f7f8f",
+      "markdown-link-text": "#5f8f8f",
+      "markdown-code": "#5f8f5f",
+      "markdown-block-quote": "#6f6f6f",
+      "markdown-emph": "#8f8f5f",
+      "markdown-strong": "#8f7f5f",
+      "markdown-horizontal-rule": "#6f6f6f",
+      "markdown-list-item": "#5f7f8f",
+      "markdown-list-enumeration": "#5f8f8f",
+      "markdown-image": "#5f7f8f",
+      "markdown-image-text": "#5f8f8f",
+      "markdown-code-block": "#3f3f3f"
+    }
+  },
+  "dark": {
+    "palette": {
+      "neutral": "#3f3f3f",
+      "ink": "#dcdccc",
+      "primary": "#8cd0d3",
+      "accent": "#93e0e3",
+      "success": "#7f9f7f",
+      "warning": "#f0dfaf",
+      "error": "#cc9393",
+      "info": "#dfaf8f",
+      "diffAdd": "#8fb28f",
+      "diffDelete": "#dca3a3"
+    },
+    "overrides": {
+      "text-weak": "#9f9f9f",
+      "syntax-comment": "#7f9f7f",
+      "syntax-keyword": "#f0dfaf",
+      "syntax-string": "#cc9393",
+      "syntax-primitive": "#8cd0d3",
+      "syntax-variable": "#dcdccc",
+      "syntax-property": "#93e0e3",
+      "syntax-type": "#93e0e3",
+      "syntax-constant": "#8fb28f",
+      "syntax-operator": "#f0dfaf",
+      "syntax-punctuation": "#dcdccc",
+      "syntax-object": "#dcdccc",
+      "markdown-heading": "#f0dfaf",
+      "markdown-text": "#dcdccc",
+      "markdown-link": "#8cd0d3",
+      "markdown-link-text": "#93e0e3",
+      "markdown-code": "#7f9f7f",
+      "markdown-block-quote": "#9f9f9f",
+      "markdown-emph": "#e0cf9f",
+      "markdown-strong": "#dfaf8f",
+      "markdown-horizontal-rule": "#9f9f9f",
+      "markdown-list-item": "#8cd0d3",
+      "markdown-list-enumeration": "#93e0e3",
+      "markdown-image": "#8cd0d3",
+      "markdown-image-text": "#93e0e3",
+      "markdown-code-block": "#dcdccc"
+    }
+  }
+}

package/src/theme/types.ts

@@ -0,0 +1,75 @@
+export type HexColor = `#${string}`
+
+export interface OklchColor {
+  l: number // Lightness 0-1
+  c: number // Chroma 0-0.4+
+  h: number // Hue 0-360
+}
+
+export interface ThemeSeedColors {
+  neutral: HexColor
+  primary: HexColor
+  success: HexColor
+  warning: HexColor
+  error: HexColor
+  info: HexColor
+  interactive: HexColor
+  diffAdd: HexColor
+  diffDelete: HexColor
+}
+
+export interface ThemePaletteColors {
+  neutral: HexColor
+  ink: HexColor
+  primary: HexColor
+  success: HexColor
+  warning: HexColor
+  error: HexColor
+  info: HexColor
+  accent?: HexColor
+  interactive?: HexColor
+  diffAdd?: HexColor
+  diffDelete?: HexColor
+}
+
+type ThemeVariantBase = {
+  overrides?: Record<string, ColorValue>
+  v2Overrides?: Record<string, V2ColorValue>
+}
+
+export type ThemeVariant =
+  | ({ seeds: ThemeSeedColors; palette?: never } & ThemeVariantBase)
+  | ({ palette: ThemePaletteColors; seeds?: never } & ThemeVariantBase)
+
+export interface DesktopTheme {
+  $schema?: string
+  name: string
+  id: string
+  light: ThemeVariant
+  dark: ThemeVariant
+}
+
+export type TokenCategory =
+  | "background"
+  | "surface"
+  | "text"
+  | "border"
+  | "icon"
+  | "input"
+  | "button"
+  | "syntax"
+  | "markdown"
+  | "diff"
+  | "avatar"
+
+export type ThemeToken = string
+
+export type CssVarRef = `var(--${string})`
+
+export type ColorValue = HexColor | CssVarRef
+
+export type V2ColorValue = HexColor | CssVarRef | string
+
+export type ResolvedTheme = Record<ThemeToken, ColorValue>
+
+export type ResolvedV2Theme = Record<string, V2ColorValue>

package/src/theme/v2/avatar.ts

@@ -0,0 +1,48 @@
+import type { V2ColorValue } from "../types"
+
+/** Fixed project avatar colors (OC-2); theme-independent like v1 `avatar-background-*`. */
+export const V2_AVATAR_FG = "#ffffffff"
+
+export const V2_AVATAR_LIGHT: Record<string, V2ColorValue> = {
+  "v2-avatar-fg": V2_AVATAR_FG,
+  "v2-avatar-bg-orange": "#ee7330ff",
+  "v2-avatar-border-orange": "#d16427ff",
+  "v2-avatar-bg-yellow": "#e7af36ff",
+  "v2-avatar-border-yellow": "#cb9f34ff",
+  "v2-avatar-bg-cyan": "#0096b8ff",
+  "v2-avatar-border-cyan": "#007d9bff",
+  "v2-avatar-bg-green": "#2eaf5aff",
+  "v2-avatar-border-green": "#198b43ff",
+  "v2-avatar-bg-red": "#d92e3cff",
+  "v2-avatar-border-red": "#b82d35ff",
+  "v2-avatar-bg-pink": "#e4429eff",
+  "v2-avatar-border-pink": "#c83d8bff",
+  "v2-avatar-bg-blue": "#3250dfff",
+  "v2-avatar-border-blue": "#2c47c8ff",
+  "v2-avatar-bg-purple": "#623be2ff",
+  "v2-avatar-border-purple": "#5230c2ff",
+  "v2-avatar-bg-gray": "#5c5c5cff",
+  "v2-avatar-border-gray": "#3a3a3aff",
+}
+
+export const V2_AVATAR_DARK: Record<string, V2ColorValue> = {
+  "v2-avatar-fg": V2_AVATAR_FG,
+  "v2-avatar-bg-orange": "#723d22ff",
+  "v2-avatar-border-orange": "#ff8648ff",
+  "v2-avatar-bg-yellow": "#68552bff",
+  "v2-avatar-border-yellow": "#e7af36ff",
+  "v2-avatar-bg-cyan": "#005a6eff",
+  "v2-avatar-border-cyan": "#0096b8ff",
+  "v2-avatar-bg-green": "#196130ff",
+  "v2-avatar-border-green": "#49c970ff",
+  "v2-avatar-bg-red": "#7a1f23ff",
+  "v2-avatar-border-red": "#d92e3cff",
+  "v2-avatar-bg-pink": "#8c2d61ff",
+  "v2-avatar-border-pink": "#e4429eff",
+  "v2-avatar-bg-blue": "#263fa9ff",
+  "v2-avatar-border-blue": "#7698fdff",
+  "v2-avatar-bg-purple": "#361f83ff",
+  "v2-avatar-border-purple": "#7152f4ff",
+  "v2-avatar-bg-gray": "#5c5c5cff",
+  "v2-avatar-border-gray": "#aeaeaeff",
+}

package/src/theme/v2/default-primitives.ts

@@ -0,0 +1,114 @@
+import type { V2ColorValue } from "../types"
+
+/** Default v2 hue ramps from `v2/styles/colors.css` (OC-2). Alpha ramps live in CSS only. */
+export const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue> = {
+  "v2-grey-50": "#ffffffff",
+  "v2-grey-100": "#fafafaff",
+  "v2-grey-200": "#f2f2f2ff",
+  "v2-grey-300": "#eeeeeeff",
+  "v2-grey-400": "#dbdbdbff",
+  "v2-grey-500": "#aeaeaeff",
+  "v2-grey-600": "#808080ff",
+  "v2-grey-700": "#5c5c5cff",
+  "v2-grey-800": "#3a3a3aff",
+  "v2-grey-900": "#2e2e2eff",
+  "v2-grey-1000": "#242424ff",
+  "v2-grey-1100": "#161616ff",
+  "v2-grey-1200": "#080808ff",
+  "v2-red-100": "#fcecebff",
+  "v2-red-200": "#f6d5d3ff",
+  "v2-red-300": "#f2bbb7ff",
+  "v2-red-400": "#f29b96ff",
+  "v2-red-500": "#f17471ff",
+  "v2-red-600": "#f1484fff",
+  "v2-red-700": "#d92e3cff",
+  "v2-red-800": "#b82d35ff",
+  "v2-red-900": "#97252bff",
+  "v2-red-1000": "#7a1f23ff",
+  "v2-red-1100": "#5f1a1cff",
+  "v2-red-1200": "#461516ff",
+  "v2-orange-100": "#fdf2edff",
+  "v2-orange-200": "#ffe7dcff",
+  "v2-orange-300": "#ffd8c6ff",
+  "v2-orange-400": "#ffc1a4ff",
+  "v2-orange-500": "#ffa478ff",
+  "v2-orange-600": "#ff8648ff",
+  "v2-orange-700": "#ee7330ff",
+  "v2-orange-800": "#d16427ff",
+  "v2-orange-900": "#b35624ff",
+  "v2-orange-1000": "#954c27ff",
+  "v2-orange-1100": "#723d22ff",
+  "v2-orange-1200": "#5a2c14ff",
+  "v2-yellow-100": "#fefaecff",
+  "v2-yellow-200": "#fcefd0ff",
+  "v2-yellow-300": "#f7e5b5ff",
+  "v2-yellow-400": "#f3da9bff",
+  "v2-yellow-500": "#f2cf76ff",
+  "v2-yellow-600": "#f6c251ff",
+  "v2-yellow-700": "#e7af36ff",
+  "v2-yellow-800": "#cb9f34ff",
+  "v2-yellow-900": "#ac8833ff",
+  "v2-yellow-1000": "#8e7231ff",
+  "v2-yellow-1100": "#68552bff",
+  "v2-yellow-1200": "#4b4025ff",
+  "v2-green-100": "#e7f9eaff",
+  "v2-green-200": "#d0f0d5ff",
+  "v2-green-300": "#b8e9c1ff",
+  "v2-green-400": "#96e3a6ff",
+  "v2-green-500": "#6bd586ff",
+  "v2-green-600": "#49c970ff",
+  "v2-green-700": "#2eaf5aff",
+  "v2-green-800": "#198b43ff",
+  "v2-green-900": "#1d783cff",
+  "v2-green-1000": "#196130ff",
+  "v2-green-1100": "#164c26ff",
+  "v2-green-1200": "#14361dff",
+  "v2-cyan-100": "#e2f7fbff",
+  "v2-cyan-200": "#c4edf4ff",
+  "v2-cyan-300": "#a3e4efff",
+  "v2-cyan-400": "#65d9ebff",
+  "v2-cyan-500": "#00c5dfff",
+  "v2-cyan-600": "#00abcfff",
+  "v2-cyan-700": "#0096b8ff",
+  "v2-cyan-800": "#007d9bff",
+  "v2-cyan-900": "#006c85ff",
+  "v2-cyan-1000": "#005a6eff",
+  "v2-cyan-1100": "#004756ff",
+  "v2-cyan-1200": "#00353fff",
+  "v2-blue-100": "#f5f8ffff",
+  "v2-blue-200": "#ecf1feff",
+  "v2-blue-300": "#c3d4fdff",
+  "v2-blue-400": "#a2bcffff",
+  "v2-blue-500": "#7698fdff",
+  "v2-blue-600": "#3b5cf6ff",
+  "v2-blue-700": "#0b34f4ff",
+  "v2-blue-800": "#3250dfff",
+  "v2-blue-900": "#2c47c8ff",
+  "v2-blue-1000": "#263fa9ff",
+  "v2-blue-1100": "#22388fff",
+  "v2-blue-1200": "#021945ff",
+  "v2-purple-100": "#ebecfeff",
+  "v2-purple-200": "#d5d5fcff",
+  "v2-purple-300": "#b9b8f5ff",
+  "v2-purple-400": "#9e99f7ff",
+  "v2-purple-500": "#8271f8ff",
+  "v2-purple-600": "#7152f4ff",
+  "v2-purple-700": "#623be2ff",
+  "v2-purple-800": "#5230c2ff",
+  "v2-purple-900": "#442aa1ff",
+  "v2-purple-1000": "#361f83ff",
+  "v2-purple-1100": "#2b1b6aff",
+  "v2-purple-1200": "#221358ff",
+  "v2-pink-100": "#fdecf3ff",
+  "v2-pink-200": "#f7d5e4ff",
+  "v2-pink-300": "#fabcd8ff",
+  "v2-pink-400": "#f799c6ff",
+  "v2-pink-500": "#f26cb2ff",
+  "v2-pink-600": "#f64aabff",
+  "v2-pink-700": "#e4429eff",
+  "v2-pink-800": "#c83d8bff",
+  "v2-pink-900": "#aa3576ff",
+  "v2-pink-1000": "#8c2d61ff",
+  "v2-pink-1100": "#6f284fff",
+  "v2-pink-1200": "#5c1d3fff",
+}

package/src/theme/v2/foreground.ts

@@ -0,0 +1,61 @@
+import { blend, contrastRatio, hexToOklch, shift } from "../color"
+import { mapV2Semantics } from "./mapping"
+import type { ColorValue, HexColor, V2ColorValue } from "../types"
+
+const GREY_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] as const
+
+const greyRef = (step: number): V2ColorValue => `var(--v2-grey-${step})`
+
+function greyHex(primitives: Record<string, V2ColorValue>, step: number) {
+  const hex = primitives[`v2-grey-${step}`]
+  if (typeof hex === "string" && hex.startsWith("#")) return hex as HexColor
+}
+
+function resolveGreyRef(value: V2ColorValue, primitives: Record<string, V2ColorValue>) {
+  const step = value.match(/^var\(--v2-grey-(\d+)\)$/)?.[1]
+  if (!step) throw new Error(`Expected grey primitive ref, got ${value}`)
+  const hex = greyHex(primitives, Number(step))
+  if (!hex) throw new Error(`Missing grey primitive v2-grey-${step}`)
+  return hex
+}
+
+function pickGrey(primitives: Record<string, V2ColorValue>, background: HexColor, minContrast: number, target: number) {
+  const matches = GREY_STEPS.filter((step) => {
+    const hex = greyHex(primitives, step)
+    return hex && contrastRatio(hex, background) >= minContrast
+  })
+  if (matches.length === 0) return target
+  return matches.reduce((best, step) => (Math.abs(step - target) < Math.abs(best - target) ? step : best))
+}
+
+export function mapV2Foreground(
+  ink: HexColor,
+  isDark: boolean,
+  primitives: Record<string, V2ColorValue>,
+  overrides: Record<string, ColorValue> = {},
+): Record<string, V2ColorValue> {
+  const tint = hexToOklch(ink)
+  const body = shift(ink, {
+    l: isDark ? Math.max(0, 0.88 - tint.l) * 0.4 : -Math.max(0, tint.l - 0.18) * 0.24,
+    c: isDark ? 1.04 : 1.02,
+  })
+
+  const semantics = mapV2Semantics(isDark)
+  const bgBase = resolveGreyRef(semantics["v2-background-bg-base"], primitives)
+  const bgContrast = resolveGreyRef(semantics["v2-background-bg-contrast"], primitives)
+  const bgInverse = resolveGreyRef(semantics["v2-background-bg-inverse"], primitives)
+  const inverseTarget = hexToOklch(bgInverse).l > 0.55 ? 1100 : greyHex(primitives, 50) ? 50 : 100
+
+  return {
+    "v2-text-text-base": isDark ? blend("#ffffff", body, 0.9) : shift(body, { l: -0.07, c: 1.04 }),
+    "v2-text-text-muted": overrides["text-weak"] ?? shift(body, { l: isDark ? -0.11 : 0.11, c: 0.9 }),
+    "v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
+    "v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
+    "v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
+    "v2-icon-icon-faint": greyRef(pickGrey(primitives, bgBase, 1.5, 500)),
+    "v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
+    "v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
+    "v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",
+    "v2-icon-icon-accent-hover": isDark ? "var(--v2-blue-300)" : "var(--v2-blue-700)",
+  }
+}