npm - @opencode/theme - Versions diffs - 0.0.0-beta-19275 - Mend

@opencode/theme 0.0.0-beta-19275

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/tui/defaults.js ADDED Viewed

@@ -0,0 +1,453 @@
+export const DEFAULT_CATEGORICAL = [
+    "blue",
+    "purple",
+    "green",
+    "orange",
+    "red",
+    "cyan",
+];
+export const DEFAULT_THEME = {
+    version: 2,
+    light: {
+        hue: {
+            gray: {
+                100: "#f3f4f6",
+                200: "#e5e7eb",
+                300: "#d1d5db",
+                400: "#9ca3af",
+                500: "#6b7280",
+                600: "#4b5563",
+                700: "#374151",
+                800: "#1f2937",
+                900: "#111827",
+            },
+            red: {
+                100: "#fee2e2",
+                200: "#fecaca",
+                300: "#fca5a5",
+                400: "#f87171",
+                500: "#ef4444",
+                600: "#dc2626",
+                700: "#b91c1c",
+                800: "#991b1b",
+                900: "#7f1d1d",
+            },
+            orange: {
+                100: "#ffedd5",
+                200: "#fed7aa",
+                300: "#fdba74",
+                400: "#fb923c",
+                500: "#f97316",
+                600: "#ea580c",
+                700: "#c2410c",
+                800: "#9a3412",
+                900: "#7c2d12",
+            },
+            yellow: {
+                100: "#fef9c3",
+                200: "#fef08a",
+                300: "#fde047",
+                400: "#facc15",
+                500: "#eab308",
+                600: "#ca8a04",
+                700: "#a16207",
+                800: "#854d0e",
+                900: "#713f12",
+            },
+            green: {
+                100: "#dcfce7",
+                200: "#bbf7d0",
+                300: "#86efac",
+                400: "#4ade80",
+                500: "#22c55e",
+                600: "#16a34a",
+                700: "#15803d",
+                800: "#166534",
+                900: "#14532d",
+            },
+            cyan: {
+                100: "#cffafe",
+                200: "#a5f3fc",
+                300: "#67e8f9",
+                400: "#22d3ee",
+                500: "#06b6d4",
+                600: "#0891b2",
+                700: "#0e7490",
+                800: "#155e75",
+                900: "#164e63",
+            },
+            blue: {
+                100: "#dbeafe",
+                200: "#bfdbfe",
+                300: "#93c5fd",
+                400: "#60a5fa",
+                500: "#3b82f6",
+                600: "#2563eb",
+                700: "#1d4ed8",
+                800: "#1e40af",
+                900: "#1e3a8a",
+            },
+            purple: {
+                100: "#f3e8ff",
+                200: "#e9d5ff",
+                300: "#d8b4fe",
+                400: "#c084fc",
+                500: "#a855f7",
+                600: "#9333ea",
+                700: "#7e22ce",
+                800: "#6b21a8",
+                900: "#581c87",
+            },
+            accent: "$hue.blue",
+            interactive: "$hue.blue",
+            neutral: "$hue.gray",
+        },
+        categorical: DEFAULT_CATEGORICAL,
+        text: {
+            default: "$hue.neutral.800",
+            subdued: "$hue.neutral.600",
+            action: {
+                primary: { default: "$hue.neutral.200", $disabled: "$hue.neutral.500" },
+                secondary: { default: "$text.subdued", $hovered: "$text.default" },
+                destructive: { default: "$hue.red.200", $disabled: "$hue.neutral.500" },
+            },
+            formfield: {
+                default: "$hue.neutral.800",
+                $focused: "$text.action.primary.default",
+                $pressed: "$hue.neutral.200",
+                $disabled: "$hue.neutral.500",
+                $selected: "$hue.interactive.700",
+            },
+            status: {
+                running: "$hue.interactive.800",
+                question: "$text.status.unread",
+                permission: "$text.status.unread",
+                unread: "$hue.accent.800",
+            },
+            feedback: {
+                error: { default: "$hue.red.700", subdued: "$hue.red.600" },
+                warning: { default: "$hue.yellow.800", subdued: "$hue.yellow.700" },
+                success: { default: "$hue.green.700", subdued: "$hue.green.600" },
+                info: { default: "$hue.cyan.700", subdued: "$hue.cyan.600" },
+            },
+        },
+        background: {
+            default: "$hue.neutral.200",
+            surface: {
+                offset: "$hue.neutral.300",
+                overlay: "$hue.neutral.400",
+            },
+            action: {
+                primary: {
+                    default: "$hue.interactive.600",
+                    $hovered: "$hue.interactive.700",
+                    $focused: "$hue.interactive.700",
+                    $pressed: "$hue.interactive.800",
+                    $selected: "$hue.interactive.700",
+                    $disabled: "$hue.neutral.300",
+                },
+                secondary: { default: "transparent" },
+                destructive: {
+                    default: "$hue.red.600",
+                    $hovered: "$hue.red.700",
+                    $focused: "$hue.red.700",
+                    $pressed: "$hue.red.800",
+                    $selected: "$hue.red.700",
+                    $disabled: "$hue.neutral.300",
+                },
+            },
+            formfield: {
+                default: "$background.default",
+                $hovered: "$background.surface.offset",
+                $focused: "$background.action.primary.default",
+                $pressed: "$hue.interactive.800",
+                $disabled: "$background.default",
+                $selected: "$background.formfield.default",
+            },
+            feedback: {
+                error: { default: "$background.default" },
+                warning: { default: "$background.default" },
+                success: { default: "$background.default" },
+                info: { default: "$background.default" },
+            },
+        },
+        border: { default: "$hue.neutral.300" },
+        scrollbar: { default: "$hue.neutral.400" },
+        diff: {
+            text: {
+                added: "$hue.green.700",
+                removed: "$hue.red.700",
+                context: "$hue.neutral.900",
+                hunkHeader: "$hue.purple.600",
+            },
+            background: { added: "$hue.green.100", removed: "$hue.red.100", context: "$hue.neutral.100" },
+            highlight: { added: "$hue.green.600", removed: "$hue.red.600" },
+            lineNumber: {
+                text: "$hue.neutral.600",
+                background: { added: "$hue.green.200", removed: "$hue.red.200" },
+            },
+        },
+        syntax: {
+            comment: "$hue.neutral.600",
+            keyword: "$hue.purple.600",
+            function: "$hue.accent.600",
+            variable: "$hue.neutral.900",
+            string: "$hue.green.700",
+            number: "$hue.yellow.800",
+            type: "$hue.yellow.500",
+            operator: "$hue.cyan.600",
+            punctuation: "$hue.neutral.900",
+        },
+        markdown: {
+            text: "$hue.neutral.900",
+            heading: "$hue.purple.600",
+            link: "$hue.accent.600",
+            linkText: "$hue.cyan.600",
+            code: "$hue.green.700",
+            blockQuote: "$hue.neutral.600",
+            emphasis: "$hue.yellow.500",
+            strong: "$hue.neutral.900",
+            horizontalRule: "$hue.neutral.300",
+            listItem: "$hue.accent.600",
+            listEnumeration: "$hue.cyan.600",
+            image: "$hue.accent.600",
+            imageText: "$hue.cyan.600",
+            codeBlock: "$hue.neutral.900",
+        },
+        "@context:elevated": {
+            text: { action: { primary: { default: "$hue.neutral.100" } } },
+            background: {
+                default: "$background.surface.offset",
+                action: { primary: { default: "$hue.interactive.500", $hovered: "$background.surface.overlay" } },
+            },
+        },
+        "@context:overlay": {
+            text: { action: { primary: { default: "$hue.neutral.100" } } },
+            background: {
+                default: "$background.surface.overlay",
+                action: { primary: { default: "$hue.interactive.500" } },
+            },
+        },
+    },
+    dark: {
+        hue: {
+            gray: {
+                100: "#f3f4f6",
+                200: "#e5e7eb",
+                300: "#d1d5db",
+                400: "#9ca3af",
+                500: "#6b7280",
+                600: "#4b5563",
+                700: "#374151",
+                800: "#1f2937",
+                900: "#111827",
+            },
+            red: {
+                100: "#fee2e2",
+                200: "#fecaca",
+                300: "#fca5a5",
+                400: "#f87171",
+                500: "#ef4444",
+                600: "#dc2626",
+                700: "#b91c1c",
+                800: "#991b1b",
+                900: "#7f1d1d",
+            },
+            orange: {
+                100: "#ffedd5",
+                200: "#fed7aa",
+                300: "#fdba74",
+                400: "#fb923c",
+                500: "#f97316",
+                600: "#ea580c",
+                700: "#c2410c",
+                800: "#9a3412",
+                900: "#7c2d12",
+            },
+            yellow: {
+                100: "#fef9c3",
+                200: "#fef08a",
+                300: "#fde047",
+                400: "#facc15",
+                500: "#eab308",
+                600: "#ca8a04",
+                700: "#a16207",
+                800: "#854d0e",
+                900: "#713f12",
+            },
+            green: {
+                100: "#dcfce7",
+                200: "#bbf7d0",
+                300: "#86efac",
+                400: "#4ade80",
+                500: "#22c55e",
+                600: "#16a34a",
+                700: "#15803d",
+                800: "#166534",
+                900: "#14532d",
+            },
+            cyan: {
+                100: "#cffafe",
+                200: "#a5f3fc",
+                300: "#67e8f9",
+                400: "#22d3ee",
+                500: "#06b6d4",
+                600: "#0891b2",
+                700: "#0e7490",
+                800: "#155e75",
+                900: "#164e63",
+            },
+            blue: {
+                100: "#dbeafe",
+                200: "#bfdbfe",
+                300: "#93c5fd",
+                400: "#60a5fa",
+                500: "#3b82f6",
+                600: "#2563eb",
+                700: "#1d4ed8",
+                800: "#1e40af",
+                900: "#1e3a8a",
+            },
+            purple: {
+                100: "#f3e8ff",
+                200: "#e9d5ff",
+                300: "#d8b4fe",
+                400: "#c084fc",
+                500: "#a855f7",
+                600: "#9333ea",
+                700: "#7e22ce",
+                800: "#6b21a8",
+                900: "#581c87",
+            },
+            accent: "$hue.blue",
+            interactive: "$hue.blue",
+            neutral: "$hue.gray",
+        },
+        categorical: DEFAULT_CATEGORICAL,
+        text: {
+            default: "$hue.neutral.200",
+            subdued: "$hue.neutral.400",
+            action: {
+                primary: { default: "$hue.neutral.200", $disabled: "$hue.neutral.500" },
+                secondary: { default: "$text.subdued", $hovered: "$text.default" },
+                destructive: { default: "$hue.red.200", $disabled: "$hue.neutral.500" },
+            },
+            formfield: {
+                default: "$hue.neutral.200",
+                $focused: "$text.action.primary.default",
+                $pressed: "$hue.neutral.200",
+                $disabled: "$hue.neutral.500",
+                $selected: "$hue.interactive.500",
+            },
+            status: {
+                running: "$hue.interactive.200",
+                question: "$text.status.unread",
+                permission: "$text.status.unread",
+                unread: "$hue.accent.200",
+            },
+            feedback: {
+                error: { default: "$hue.red.300", subdued: "$hue.red.400" },
+                warning: { default: "$hue.yellow.200", subdued: "$hue.yellow.300" },
+                success: { default: "$hue.green.300", subdued: "$hue.green.400" },
+                info: { default: "$hue.cyan.300", subdued: "$hue.cyan.400" },
+            },
+        },
+        background: {
+            default: "$hue.neutral.800",
+            surface: {
+                offset: "$hue.neutral.700",
+                overlay: "$hue.neutral.600",
+            },
+            action: {
+                primary: {
+                    default: "$hue.interactive.500",
+                    $hovered: "$hue.interactive.600",
+                    $focused: "$hue.interactive.600",
+                    $pressed: "$hue.interactive.800",
+                    $selected: "$hue.interactive.600",
+                    $disabled: "$hue.neutral.800",
+                },
+                secondary: { default: "transparent" },
+                destructive: {
+                    default: "$hue.red.600",
+                    $hovered: "$hue.red.700",
+                    $focused: "$hue.red.700",
+                    $pressed: "$hue.red.800",
+                    $selected: "$hue.red.700",
+                    $disabled: "$hue.neutral.800",
+                },
+            },
+            formfield: {
+                default: "$background.default",
+                $hovered: "$background.surface.offset",
+                $focused: "$background.action.primary.default",
+                $pressed: "$hue.interactive.800",
+                $disabled: "$background.default",
+                $selected: "$background.formfield.default",
+            },
+            feedback: {
+                error: { default: "$background.default" },
+                warning: { default: "$background.default" },
+                success: { default: "$background.default" },
+                info: { default: "$background.default" },
+            },
+        },
+        border: { default: "$hue.neutral.700" },
+        scrollbar: { default: "$hue.neutral.600" },
+        diff: {
+            text: {
+                added: "$hue.green.300",
+                removed: "$hue.red.300",
+                context: "$hue.neutral.100",
+                hunkHeader: "$hue.purple.400",
+            },
+            background: { added: "$hue.green.900", removed: "$hue.red.900", context: "$hue.neutral.900" },
+            highlight: { added: "$hue.green.400", removed: "$hue.red.400" },
+            lineNumber: {
+                text: "$hue.neutral.400",
+                background: { added: "$hue.green.800", removed: "$hue.red.800" },
+            },
+        },
+        syntax: {
+            comment: "$hue.neutral.400",
+            keyword: "$hue.purple.400",
+            function: "$hue.accent.400",
+            variable: "$hue.neutral.100",
+            string: "$hue.green.300",
+            number: "$hue.yellow.200",
+            type: "$hue.yellow.500",
+            operator: "$hue.cyan.400",
+            punctuation: "$hue.neutral.100",
+        },
+        markdown: {
+            text: "$hue.neutral.100",
+            heading: "$hue.purple.400",
+            link: "$hue.accent.400",
+            linkText: "$hue.cyan.400",
+            code: "$hue.green.300",
+            blockQuote: "$hue.neutral.400",
+            emphasis: "$hue.yellow.500",
+            strong: "$hue.neutral.100",
+            horizontalRule: "$hue.neutral.700",
+            listItem: "$hue.accent.400",
+            listEnumeration: "$hue.cyan.400",
+            image: "$hue.accent.400",
+            imageText: "$hue.cyan.400",
+            codeBlock: "$hue.neutral.100",
+        },
+        "@context:elevated": {
+            text: { action: { primary: { default: "$hue.neutral.200" } } },
+            background: {
+                default: "$background.surface.offset",
+                action: { primary: { default: "$hue.interactive.400", $hovered: "$background.surface.overlay" } },
+            },
+        },
+        "@context:overlay": {
+            text: { action: { primary: { default: "$hue.neutral.200" } } },
+            background: {
+                default: "$background.surface.overlay",
+                action: { primary: { default: "$hue.interactive.400" } },
+            },
+        },
+    },
+};

package/dist/tui/expand.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { ModeDefinition, ThemeTokensDefinition } from "./index.js";
+export declare function expandTheme<Definition extends ModeDefinition>(definition: Definition): Definition;
+export declare function expandTokens(definition: ThemeTokensDefinition): ThemeTokensDefinition;
+export declare function mergeTheme(...values: unknown[]): Record<string, unknown>;

package/dist/tui/expand.js ADDED Viewed

@@ -0,0 +1,87 @@
+import { ActionState } from "./schema.js";
+export function expandTheme(definition) {
+    return {
+        ...definition,
+        ...expandTokens(definition),
+        ...Object.fromEntries(Object.entries(definition)
+            .filter(([key]) => key.startsWith("@context:"))
+            .map(([key, value]) => [key, expandTokens(value)])),
+    };
+}
+export function expandTokens(definition) {
+    return {
+        ...definition,
+        text: expandText(definition.text),
+        background: expandBackground(definition.background),
+    };
+}
+export function mergeTheme(...values) {
+    return values.reduce((result, value) => {
+        if (!isRecord(value))
+            return result;
+        return Object.entries(value).reduce((next, [key, item]) => {
+            if (item === undefined || key === "mergeMode")
+                return next;
+            return {
+                ...next,
+                [key]: isRecord(item) ? mergeTheme(next[key], item) : item,
+            };
+        }, result);
+    }, {});
+}
+function expandText(definition) {
+    if (!definition)
+        return;
+    return {
+        ...definition,
+        subdued: definition.subdued ?? (definition.default ? "$text.default" : undefined),
+        action: expandActions(definition.action, "text.action"),
+        formfield: expandFormfield(definition.formfield, "text.formfield"),
+        feedback: definition.feedback
+            ? Object.fromEntries(Object.entries(definition.feedback).map(([kind, feedback]) => {
+                return [
+                    kind,
+                    {
+                        ...feedback,
+                        subdued: feedback.subdued ?? (feedback.default ? `$text.feedback.${kind}.default` : undefined),
+                    },
+                ];
+            }))
+            : undefined,
+    };
+}
+function expandBackground(definition) {
+    if (!definition)
+        return;
+    return {
+        ...definition,
+        action: expandActions(definition.action, "background.action"),
+        formfield: expandFormfield(definition.formfield, "background.formfield"),
+    };
+}
+function expandFormfield(definition, path) {
+    if (!definition?.default)
+        return definition;
+    return {
+        ...definition,
+        ...Object.fromEntries(ActionState.literals.map((state) => [`$${state}`, definition[`$${state}`] ?? `$${path}.default`])),
+    };
+}
+function expandActions(definition, path) {
+    if (!definition)
+        return;
+    return Object.fromEntries(Object.entries(definition).map(([variant, value]) => {
+        if (!value?.default)
+            return [variant, value];
+        return [
+            variant,
+            {
+                ...value,
+                ...Object.fromEntries(ActionState.literals.map((state) => [`$${state}`, value[`$${state}`] ?? `$${path}.${variant}.default`])),
+            },
+        ];
+    }));
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/dist/tui/fallback.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { Mode, ThemeTokensDefinition } from "./index.js";
2	+ export declare function fallback(mode: Mode): ThemeTokensDefinition;

package/dist/tui/fallback.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { DEFAULT_THEME } from "./defaults.js";
+import { ActionVariant, FeedbackKind } from "./schema.js";
+export function fallback(mode) {
+    const red = "#ff0000";
+    return {
+        text: {
+            default: red,
+            action: Object.fromEntries(ActionVariant.literals.map((variant) => [variant, { default: red }])),
+            formfield: { default: red },
+            status: DEFAULT_THEME[mode].text.status,
+            feedback: Object.fromEntries(FeedbackKind.literals.map((kind) => [kind, { default: red }])),
+        },
+        background: {
+            default: red,
+            surface: { offset: red, overlay: red },
+            action: Object.fromEntries(ActionVariant.literals.map((variant) => [variant, { default: red }])),
+            formfield: { default: red },
+            feedback: Object.fromEntries(FeedbackKind.literals.map((kind) => [kind, { default: red }])),
+        },
+        border: { default: red },
+        scrollbar: { default: red },
+        diff: {
+            text: { added: red, removed: red, context: red, hunkHeader: red },
+            background: { added: red, removed: red, context: red },
+            highlight: { added: red, removed: red },
+            lineNumber: { text: red, background: { added: red, removed: red } },
+        },
+        syntax: {
+            comment: red,
+            keyword: red,
+            function: red,
+            variable: red,
+            string: red,
+            number: red,
+            type: red,
+            operator: red,
+            punctuation: red,
+        },
+        markdown: {
+            text: red,
+            heading: red,
+            link: red,
+            linkText: red,
+            code: red,
+            blockQuote: red,
+            emphasis: red,
+            strong: red,
+            horizontalRule: red,
+            listItem: red,
+            listEnumeration: red,
+            image: red,
+            imageText: red,
+            codeBlock: red,
+        },
+    };
+}

package/dist/tui/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export { ActionState, type ActionStateKey, ActionVariant, BaseHue, CategoricalDefinition, FeedbackKind, FormfieldState, type FormfieldStateKey, HueAlias, HueName, HueStep, MarkdownDefinition, MarkdownToken, ModeDefinition, SyntaxDefinition, SyntaxToken, ThemeDefinition, ThemeDocument, type BackgroundDefinition, type DiffDefinition, type FileThemeDefinition, type FormfieldColorDefinition, type HueDefinition, type HueOverrideDefinition, type MergeModeDefinition, type Mode, type StatefulColorDefinition, type ContextKey, type TextDefinition, type ThemeTokensDefinition, } from "./schema.js";
+export type { Categorical, ContextName, FormfieldColor, Hue, HueSource, HueScale, ResolvedActionState, ResolvedFormfieldState, ResolvedTheme, ResolvedThemeTokens, StatefulColor, } from "./types.js";
+export { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js";
+export { expandTheme } from "./expand.js";
+export { migrateV1 } from "./v1-migrate.js";
+export { resolveTheme, resolveThemeDocument, themeDecodeError } from "./resolve.js";
+export { selectTheme, selectThemeMode, supportsThemeMode, themeModes } from "./select.js";
+export { generateSyntax } from "./syntax.js";

package/dist/tui/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+export { ActionState, ActionVariant, BaseHue, CategoricalDefinition, FeedbackKind, FormfieldState, HueAlias, HueName, HueStep, MarkdownDefinition, MarkdownToken, ModeDefinition, SyntaxDefinition, SyntaxToken, ThemeDefinition, ThemeDocument, } from "./schema.js";
+export { DEFAULT_CATEGORICAL, DEFAULT_THEME } from "./defaults.js";
+export { expandTheme } from "./expand.js";
+export { migrateV1 } from "./v1-migrate.js";
+export { resolveTheme, resolveThemeDocument, themeDecodeError } from "./resolve.js";
+export { selectTheme, selectThemeMode, supportsThemeMode, themeModes } from "./select.js";
+export { generateSyntax } from "./syntax.js";

package/dist/tui/resolve.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { ThemeDefinition, ThemeDocument } from "./schema.js";
+import type { ResolvedTheme } from "./index.js";
+export declare function themeDecodeError(error: unknown, name: string): Error;
+export declare function resolveThemeDocument(document: ThemeDocument, mode?: "light" | "dark"): ResolvedTheme;
+export declare function resolveTheme(definition: ThemeDefinition): ResolvedTheme;