@opencode/ui 2.0.23 → 2.0.25

package/src/theme/default-themes.ts

@@ -37,40 +37,75 @@ import vesperThemeJson from "./themes/vesper.json"
 import zenburnThemeJson from "./themes/zenburn.json"
 
 export const oc2Theme = oc2ThemeJson as DesktopTheme
+
 export const amoledTheme = amoledThemeJson as DesktopTheme
+
 export const auraTheme = auraThemeJson as DesktopTheme
+
 export const ayuTheme = ayuThemeJson as DesktopTheme
+
 export const carbonfoxTheme = carbonfoxThemeJson as DesktopTheme
+
 export const catppuccinTheme = catppuccinThemeJson as DesktopTheme
+
 export const catppuccinFrappeTheme = catppuccinFrappeThemeJson as DesktopTheme
+
 export const catppuccinMacchiatoTheme = catppuccinMacchiatoThemeJson as DesktopTheme
+
 export const cobalt2Theme = cobalt2ThemeJson as DesktopTheme
+
 export const cursorTheme = cursorThemeJson as DesktopTheme
+
 export const draculaTheme = draculaThemeJson as DesktopTheme
+
 export const everforestTheme = everforestThemeJson as DesktopTheme
+
 export const flexokiTheme = flexokiThemeJson as DesktopTheme
+
 export const githubTheme = githubThemeJson as DesktopTheme
+
 export const gruvboxTheme = gruvboxThemeJson as DesktopTheme
+
 export const kanagawaTheme = kanagawaThemeJson as DesktopTheme
+
 export const lucentOrngTheme = lucentOrngThemeJson as DesktopTheme
+
 export const materialTheme = materialThemeJson as DesktopTheme
+
 export const matrixTheme = matrixThemeJson as DesktopTheme
+
 export const mercuryTheme = mercuryThemeJson as DesktopTheme
+
 export const monokaiTheme = monokaiThemeJson as DesktopTheme
+
 export const nightowlTheme = nightowlThemeJson as DesktopTheme
+
 export const nordTheme = nordThemeJson as DesktopTheme
+
 export const oneDarkTheme = oneDarkThemeJson as DesktopTheme
+
 export const oneDarkProTheme = oneDarkProThemeJson as DesktopTheme
+
 export const orngTheme = orngThemeJson as DesktopTheme
+
 export const osakaJadeTheme = osakaJadeThemeJson as DesktopTheme
+
 export const palenightTheme = palenightThemeJson as DesktopTheme
+
 export const rosepineTheme = rosepineThemeJson as DesktopTheme
+
 export const shadesOfPurpleTheme = shadesOfPurpleThemeJson as DesktopTheme
+
 export const solarizedTheme = solarizedThemeJson as DesktopTheme
+
 export const synthwave84Theme = synthwave84ThemeJson as DesktopTheme
+
 export const tokyonightTheme = tokyonightThemeJson as DesktopTheme
+
 export const vercelTheme = vercelThemeJson as DesktopTheme
+
 export const vesperTheme = vesperThemeJson as DesktopTheme
+
 export const zenburnTheme = zenburnThemeJson as DesktopTheme
 
 export const DEFAULT_THEMES: Record<string, DesktopTheme> = {

package/src/theme/index.ts

@@ -32,8 +32,11 @@ export {
 } from "./color"
 
 export { resolveThemeVariant, resolveTheme, themeToCss } from "./resolve"
+
 export { resolveThemeVariantV2, resolveThemeV2, themeV2ToCss, generateV2Primitives } from "./v2/resolve"
+
 export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorScheme } from "./loader"
+
 export { ThemeProvider, useTheme, type ColorScheme } from "./context"
 
 export {

package/src/theme/loader.ts

@@ -3,16 +3,20 @@ import { resolveThemeVariant, themeToCss } from "./resolve"
 import { resolveThemeVariantV2, themeV2ToCss } from "./v2/resolve"
 
 let activeTheme: DesktopTheme | null = null
+
 const THEME_STYLE_ID = "opencode-theme"
 
 function ensureLoaderStyleElement(): HTMLStyleElement {
   const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+
   if (existing) {
     return existing
   }
+
   const element = document.createElement("style")
   element.id = THEME_STYLE_ID
   document.head.appendChild(element)
+
   return element
 }
 
@@ -77,29 +81,36 @@ html[data-theme="${themeId}"] {
 
 export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
   const response = await fetch(url)
+
   if (!response.ok) {
     throw new Error(`Failed to load theme from ${url}: ${response.statusText}`)
   }
+
   return response.json()
 }
 
 export function getActiveTheme(): DesktopTheme | null {
   const activeId = document.documentElement.getAttribute("data-theme")
+
   if (!activeId) {
     return null
   }
+
   if (activeTheme?.id === activeId) {
     return activeTheme
   }
+
   return null
 }
 
 export function removeTheme(): void {
   activeTheme = null
   const existingElement = document.getElementById(THEME_STYLE_ID)
+
   if (existingElement) {
     existingElement.remove()
   }
+
   document.documentElement.removeAttribute("data-theme")
 }
 

package/src/theme/resolve.ts

@@ -13,48 +13,62 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   const error = generateScale(colors.error, isDark)
   const info = generateScale(colors.info, isDark)
   const interactive = generateScale(colors.interactive, isDark)
+
   const amber = generateScale(
     shift(colors.warning, isDark ? { h: -16, l: -0.058, c: 1.14 } : { h: -22, l: -0.082, c: 0.94 }),
     isDark,
   )
+
   const blue = generateScale(shift(colors.interactive, { h: -12, l: 0.128, c: 1.12 }), isDark)
+
   const diffAdd = generateScale(
     colors.diffAdd ?? shift(colors.success, { c: isDark ? 0.7 : 0.55, l: isDark ? -0.18 : 0.14 }),
     isDark,
   )
+
   const diffDelete = generateScale(
     colors.diffDelete ?? shift(colors.error, { c: isDark ? 0.82 : 0.7, l: isDark ? -0.08 : 0.08 }),
     isDark,
   )
+
   const ink = colors.ink ?? colors.neutral
   const tint = colors.compact ? hexToOklch(ink) : undefined
+
   const body = tint
     ? 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,
       })
     : undefined
+
   const backgroundOverride = overrides["background-base"]
   const backgroundHex = getHex(backgroundOverride)
   const overlay = Boolean(backgroundOverride) && !backgroundHex
+
   const content = (seed: HexColor, scale: HexColor[]) => {
     const base = hexToOklch(seed)
     const value = isDark ? (base.l > 0.84 ? shift(seed, { c: 1.18 }) : scale[10]) : scale[10]
+
     return shift(value, { l: isDark ? 0.034 : -0.024, c: isDark ? 1.3 : 1.18 })
   }
+
   const modified = () => {
     if (!colors.compact) return isDark ? "#ffba92" : "#FF8C00"
     const warningHue = hexToOklch(colors.warning).h
     const deleteHue = hexToOklch(colors.diffDelete ?? colors.error).h
     const delta = Math.abs(((((deleteHue - warningHue) % 360) + 540) % 360) - 180)
+
     if (delta < 48) return isDark ? "#ffba92" : "#FF8C00"
+
     return content(colors.warning, warning)
   }
+
   const surface = (
     seed: HexColor,
     alpha: { base: number; weak: number; weaker: number; strong: number; stronger: number },
   ) => {
     const base = alphaTone(seed, alpha.base)
+
     return {
       base,
       weak: alphaTone(seed, alpha.weak),
@@ -63,11 +77,15 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
       stronger: alphaTone(seed, alpha.stronger),
     }
   }
+
   const background = backgroundHex ?? neutral[0]
+
   const alphaTone = (color: HexColor, alpha: number) =>
     overlay ? (withAlpha(color, alpha) as ColorValue) : blend(color, background, alpha)
+
   const borderTone = (light: number, dark: number) =>
     alphaTone(ink, isDark ? Math.min(1, dark + 0.024 + (colors.compact ? 0.08 : 0)) : Math.min(1, light + 0.024))
+
   const diffHiddenSurface = surface(
     isDark ? shift(colors.interactive, { c: 0.55, l: 0 }) : shift(colors.interactive, { c: 0.45, l: 0.08 }),
     isDark
@@ -93,21 +111,27 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
   const infob = info[isDark ? 6 : 4]
   const infow = info[isDark ? 5 : 3]
   const infos = info[10]
+
   const lum = (hex: HexColor) => {
     const rgb = hexToRgb(hex)
     const lift = (v: number) => (v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4))
+
     return 0.2126 * lift(rgb.r) + 0.7152 * lift(rgb.g) + 0.0722 * lift(rgb.b)
   }
+
   const hit = (a: HexColor, b: HexColor) => {
     const x = lum(a)
     const y = lum(b)
     const light = Math.max(x, y)
     const dark = Math.min(x, y)
+
     return (light + 0.05) / (dark + 0.05)
   }
+
   const on = (fill: HexColor) => {
     const light = "#ffffff" as HexColor
     const dark = "#000000" as HexColor
+
     return hit(light, fill) > hit(dark, fill) ? light : dark
   }
 
@@ -432,6 +456,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
 
   if (colors.compact && "text-weak" in overrides && !("text-weaker" in overrides)) {
     const weak = tokens["text-weak"]
+
     if (weak.startsWith("#")) {
       tokens["text-weaker"] = shift(weak as HexColor, { l: isDark ? -0.12 : 0.12, c: 0.75 })
     } else {
@@ -443,6 +468,7 @@ export function resolveThemeVariant(variant: ThemeVariant, isDark: boolean): Res
     if (!("markdown-text" in overrides)) {
       tokens["markdown-text"] = tokens["text-base"]
     }
+
     if (!("markdown-code-block" in overrides)) {
       tokens["markdown-code-block"] = tokens["text-base"]
     }
@@ -472,6 +498,7 @@ interface ThemeColors {
 
 function getColors(variant: ThemeVariant): ThemeColors {
   const input = variant as { palette?: unknown; seeds?: unknown }
+
   if (input.palette && input.seeds) {
     throw new Error("Theme variant cannot define both `palette` and `seeds`")
   }
@@ -523,6 +550,7 @@ function generateNeutralAlphaScale(neutralScale: HexColor[], isDark: boolean): H
 
 function getHex(value: ColorValue | undefined): HexColor | undefined {
   if (!value?.startsWith("#")) return
+
   return value as HexColor
 }
 

package/src/theme/v2/foreground.ts

@@ -8,23 +8,30 @@ 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))
 }
 
@@ -35,6 +42,7 @@ export function mapV2Foreground(
   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,

package/src/theme/v2/resolve.ts

@@ -30,6 +30,7 @@ function clamp(v: number, min: number, max: number) {
 function generateV2HueScale(seed: HexColor, isDark: boolean): HexColor[] {
   const base = hexToOklch(seed)
   const chromaBoost = isDark ? 1 : 1.05
+
   const lightSteps = [
     0.99,
     0.965,
@@ -44,6 +45,7 @@ function generateV2HueScale(seed: HexColor, isDark: boolean): HexColor[] {
     clamp(base.l - 0.34, 0.12, 0.3),
     clamp(base.l - 0.4, 0.08, 0.22),
   ]
+
   const chromaMultipliers = [0.28, 0.48, 0.68, 0.86, 1.02, 1.28, 1.34, 1.28, 1.18, 1.08, 0.98, 0.88]
 
   return lightSteps.map((l, i) =>
@@ -58,20 +60,24 @@ function generateV2HueScale(seed: HexColor, isDark: boolean): HexColor[] {
 /** Grey ramp: 100 = lightest, 1200 = darkest. Derived from palette neutral → ink like v1. */
 function generateV2NeutralScale(neutral: HexColor, ink: HexColor, isDark: boolean): HexColor[] {
   const scale = generateNeutralScale(neutral, isDark, ink)
+
   return isDark ? scale.toReversed() : scale
 }
 
 function assignHueRamp(prefix: string, scale: HexColor[]): Record<string, V2ColorValue> {
   const tokens: Record<string, V2ColorValue> = {}
+
   for (let i = 0; i < V2_STEPS.length; i++) {
     tokens[`v2-${prefix}-${V2_STEPS[i]}`] = scale[i]!
   }
+
   return tokens
 }
 
 function readPalette(variant: ThemeVariant): PaletteInput {
   if ("palette" in variant && variant.palette) {
     const palette = variant.palette
+
     return {
       neutral: palette.neutral,
       ink: palette.ink,
@@ -86,8 +92,10 @@ function readPalette(variant: ThemeVariant): PaletteInput {
       diffDelete: palette.diffDelete ?? palette.error,
     }
   }
+
   if ("seeds" in variant && variant.seeds) {
     const seeds = variant.seeds
+
     return {
       neutral: seeds.neutral,
       ink: seeds.neutral,
@@ -102,6 +110,7 @@ function readPalette(variant: ThemeVariant): PaletteInput {
       diffDelete: seeds.diffDelete,
     }
   }
+
   throw new Error("Theme variant requires `palette` or `seeds`")
 }
 
@@ -136,6 +145,7 @@ export function resolveThemeVariantV2(variant: ThemeVariant, isDark: boolean): R
   const primitives = generateV2Primitives(variant, isDark)
   const semantics = mapV2Semantics(isDark)
   const foreground = mapV2Foreground(readPalette(variant).ink, isDark, primitives, variant.overrides)
+
   return mergeV2Tokens(primitives, semantics, foreground, variant.v2Overrides ?? {})
 }
 

package/src/typography/text-shimmer/text-shimmer.tsx

@@ -24,6 +24,7 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
 
     if (active()) {
       setRun(true)
+
       return
     }