@opencode/theme 2.0.7 → 2.0.9

package/dist/tui/v1-migrate.js

@@ -1,11 +1,36 @@
 import { RGBA } from "@opentui/core";
 import { oklchToHex, rgbToOklch } from "./color.js";
-import { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js";
+import { DEFAULT_CATEGORICAL } from "./categorical.js";
 import { HueStep } from "./schema.js";
 const chromaticHues = ["red", "orange", "yellow", "green", "cyan", "blue", "purple"];
 const categoricalTokens = ["secondary", "accent", "success", "warning", "primary", "error"];
 const minimumChroma = 0.03;
 const lightThreshold = 0.6;
+// Canonical swatches copied from the original default-theme classifier keep V1 migration self-contained.
+const hueReferences = {
+    light: {
+        red: "#fca5a5",
+        orange: "#fdba74",
+        yellow: "#fde047",
+        green: "#86efac",
+        cyan: "#67e8f9",
+        blue: "#93c5fd",
+        purple: "#d8b4fe",
+    },
+    dark: {
+        red: "#b91c1c",
+        orange: "#c2410c",
+        yellow: "#a16207",
+        green: "#15803d",
+        cyan: "#0e7490",
+        blue: "#1d4ed8",
+        purple: "#7e22ce",
+    },
+};
+const hueAngles = Object.fromEntries(Object.entries(hueReferences).map(([level, colors]) => [
+    level,
+    Object.fromEntries(Object.entries(colors).map(([name, color]) => [name, toOklch(RGBA.fromHex(color)).h])),
+]));
 export function migrateV1(theme) {
     const light = resolveV1(theme, "light");
     const dark = resolveV1(theme, "dark");
@@ -13,18 +38,24 @@ export function migrateV1(theme) {
         const lightMode = detectMode(light);
         const darkMode = detectMode(dark);
         if (lightMode === darkMode) {
+            const definition = migrateMode(lightMode === "light" ? light : dark, lightMode);
             if (lightMode === "light")
-                return { version: 2, standalone: true, light: migrateMode(light, "light") };
-            return { version: 2, standalone: true, dark: migrateMode(dark, "dark") };
+                return { base: base(definition), light: { hue: definition.hue } };
+            return { base: base(definition), dark: { hue: definition.hue } };
         }
     }
+    const lightDefinition = migrateMode(light, "light");
+    const darkDefinition = migrateMode(dark, "dark");
     return {
-        version: 2,
-        standalone: true,
-        light: migrateMode(light, "light"),
-        dark: migrateMode(dark, "dark"),
+        base: base(lightDefinition),
+        light: { hue: lightDefinition.hue },
+        dark: darkDefinition,
     };
 }
+function base(definition) {
+    const { hue: _, ...base } = definition;
+    return base;
+}
 function detectMode(theme) {
     return luminance(theme.text) > luminance(theme.background) ? "dark" : "light";
 }
@@ -35,21 +66,22 @@ function migrateMode(theme, mode) {
     const color = (key) => hex(theme[key]);
     const selected = hex(selectedForeground(theme, theme.primary));
     const destructive = hex(selectedForeground(theme, theme.error));
-    const hues = inferHues(theme, mode);
+    const hues = inferHues(theme);
     const categorical = categoricalTokens.flatMap((token) => {
         const hue = hues.byToken[token];
         return hue ? [hue] : [];
     });
     const uniqueCategorical = categorical.filter((hue, index) => categorical.indexOf(hue) === index);
-    const text = mode === "light" ? "$hue.neutral.800" : "$hue.neutral.200";
-    const textMuted = mode === "light" ? "$hue.neutral.600" : "$hue.neutral.400";
-    const primary = mode === "light" ? "$hue.interactive.800" : "$hue.interactive.200";
-    const background = mode === "light" ? "$hue.neutral.200" : "$hue.neutral.800";
-    const backgroundPanel = mode === "light" ? "$hue.neutral.300" : "$hue.neutral.700";
-    const backgroundMenu = mode === "light" ? "$hue.neutral.400" : "$hue.neutral.600";
+    const text = "$hue.neutral.200";
+    const textMuted = "$hue.neutral.400";
+    const primary = "$hue.interactive.200";
+    const background = "$hue.neutral.800";
+    const backgroundPanel = "$hue.neutral.700";
+    const backgroundMenu = "$hue.neutral.600";
+    const backgroundRaisedMax = "$hue.neutral.500";
     return referenceHues({
         hue: {
-            gray: neutralScale(theme, mode),
+            gray: neutralScale(theme),
             ...Object.fromEntries(chromaticHues.map((name) => {
                 const match = hues.byHue[name];
                 return [name, match ? hueScale(match.color, mode) : "$hue.gray"];
@@ -60,20 +92,20 @@ function migrateMode(theme, mode) {
         },
         categorical: uniqueCategorical.length ? uniqueCategorical : DEFAULT_CATEGORICAL,
         text: {
-            default: text,
-            subdued: textMuted,
+            base: text,
+            muted: textMuted,
             action: {
                 primary: {
-                    default: "$text.default",
+                    base: "$text.base",
                     $disabled: textMuted,
                     $focused: selected,
                     $selected: primary,
                 },
-                secondary: { default: "$text.subdued", $hovered: "$text.default" },
-                destructive: { default: destructive, $disabled: textMuted },
+                secondary: { base: "$text.muted", $hovered: "$text.base" },
+                destructive: { base: destructive, $disabled: textMuted },
             },
             formfield: {
-                default: text,
+                base: text,
                 $hovered: primary,
                 $focused: primary,
                 $pressed: primary,
@@ -81,35 +113,36 @@ function migrateMode(theme, mode) {
                 $selected: primary,
             },
             feedback: {
-                error: { default: color("error") },
-                warning: { default: color("warning") },
-                success: { default: color("success") },
-                info: { default: color("info") },
+                error: { base: color("error") },
+                warning: { base: color("warning") },
+                success: { base: color("success") },
+                info: { base: color("info") },
             },
         },
         background: {
-            default: background,
-            surface: {
-                offset: backgroundPanel,
-                overlay: backgroundMenu,
+            base: background,
+            raised: {
+                base: backgroundPanel,
+                high: backgroundMenu,
+                max: backgroundRaisedMax,
             },
             action: {
-                primary: { default: "transparent", $hovered: backgroundPanel, $focused: primary, $selected: "transparent" },
-                secondary: { default: "transparent" },
-                destructive: { default: color("error") },
+                primary: { base: "transparent", $hovered: backgroundPanel, $focused: primary, $selected: "transparent" },
+                secondary: { base: "transparent" },
+                destructive: { base: color("error") },
             },
             formfield: {
-                default: "$background.default",
+                base: "$background.base",
             },
             feedback: {
-                error: { default: "$background.default" },
-                warning: { default: "$background.default" },
-                success: { default: "$background.default" },
-                info: { default: "$background.default" },
+                error: { base: "$background.base" },
+                warning: { base: "$background.base" },
+                success: { base: "$background.base" },
+                info: { base: "$background.base" },
             },
         },
-        border: { default: color("border") },
-        scrollbar: { default: color("borderActive") },
+        border: { base: color("border") },
+        scrollbar: { base: color("borderActive") },
         diff: {
             text: {
                 added: color("diffAdded"),
@@ -158,13 +191,12 @@ function migrateMode(theme, mode) {
             imageText: color("markdownImageText"),
             codeBlock: color("markdownCodeBlock"),
         },
-        "@context:elevated": {
+        "@dialog": {
             background: {
-                default: "$background.surface.offset",
-                action: { primary: { $hovered: "$background.surface.overlay" } },
+                base: "$background.raised.base",
+                action: { primary: { $hovered: "$background.raised.high" } },
             },
         },
-        "@context:overlay": { background: { default: "$background.surface.overlay" } },
     });
 }
 function referenceHues(theme) {
@@ -219,7 +251,7 @@ function referenceHues(theme) {
     }
     return Object.fromEntries(Object.entries(theme).map(([key, value]) => [key, key === "hue" || key === "categorical" ? value : replace(value)]));
 }
-function inferHues(theme, mode) {
+function inferHues(theme) {
     const colors = [
         ["accent", theme.accent],
         ["success", theme.success],
@@ -230,7 +262,7 @@ function inferHues(theme, mode) {
         ["secondary", theme.secondary],
     ];
     const inferred = colors.reduce((result, [token, color]) => {
-        const nearest = inferHue(color, mode);
+        const nearest = inferHue(color);
         if (!nearest)
             return result;
         const current = result.byHue[nearest.name];
@@ -245,7 +277,7 @@ function inferHues(theme, mode) {
         ["accent", theme.accent],
         ["primary", theme.primary],
     ].reduce((result, [token, color]) => {
-        const nearest = inferHue(color, mode);
+        const nearest = inferHue(color);
         if (!nearest)
             return result;
         return {
@@ -254,21 +286,18 @@ function inferHues(theme, mode) {
         };
     }, inferred);
 }
-function inferHue(color, mode) {
+function inferHue(color) {
     const value = toOklch(color);
     if (ambiguous(color, value.c))
         return;
-    const anchor = inferenceAnchor(value.l);
+    const reference = value.l >= lightThreshold ? hueAngles.light : hueAngles.dark;
     return chromaticHues
         .map((name) => ({
         name,
-        distance: hueDistance(value.h, toOklch(RGBA.fromHex(DEFAULT_THEME[mode].hue[name][anchor])).h),
+        distance: hueDistance(value.h, reference[name]),
     }))
         .sort((first, second) => first.distance - second.distance)[0];
 }
-function inferenceAnchor(lightness) {
-    return lightness >= lightThreshold ? 300 : 700;
-}
 function hueDistance(first, second) {
     const difference = Math.abs(first - second);
     return Math.min(difference, 360 - difference);
@@ -326,13 +355,13 @@ function selectedForeground(theme, background) {
 }
 function hueScale(color, mode) {
     const value = toOklch(color);
-    const anchor = mode === "light" ? 800 : 200;
+    const anchor = 200;
     const endpoint = mode === "light" ? Math.max(0.97, value.l) : Math.min(0.18, value.l);
     const alpha = color.toInts()[3];
     return Object.fromEntries(HueStep.literals.map((step) => {
         if (step === anchor)
             return [step, hex(color)];
-        const progress = mode === "light" ? (anchor - step) / (anchor - 100) : (step - anchor) / (900 - anchor);
+        const progress = (step - anchor) / (900 - anchor);
         const generated = oklchToHex({
             l: value.l + (endpoint - value.l) * progress,
             c: value.c * (1 - progress * 0.5),
@@ -341,8 +370,8 @@ function hueScale(color, mode) {
         return [step, alpha === 255 ? generated : `${generated}${byte(alpha)}`];
     }));
 }
-function neutralScale(theme, mode) {
-    const anchors = neutralAnchors(theme, mode);
+function neutralScale(theme) {
+    const anchors = neutralAnchors(theme);
     return Object.fromEntries(HueStep.literals.map((step) => {
         const exact = anchors.find((anchor) => anchor.step === step);
         if (exact)
@@ -357,7 +386,7 @@ function neutralScale(theme, mode) {
         return [step, interpolate(lower.color, upper.color, (step - lower.step) / (upper.step - lower.step))];
     }));
 }
-function neutralAnchors(theme, mode) {
+function neutralAnchors(theme) {
     const light = [
         { step: 200, color: theme.background },
         { step: 300, color: theme.backgroundPanel },
@@ -365,8 +394,6 @@ function neutralAnchors(theme, mode) {
         { step: 600, color: theme.textMuted },
         { step: 800, color: theme.text },
     ];
-    if (mode === "light")
-        return light;
     return light.toReversed().map((source) => ({ ...source, step: (1000 - source.step) }));
 }
 function interpolate(first, second, amount) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode/theme",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "type": "module",
   "license": "MIT",
   "repository": {