@opencode/theme 2.0.7 → 2.0.9

package/dist/tui/schema.js

@@ -4,6 +4,7 @@ export const BaseHue = Schema.Literals(["gray", "red", "orange", "yellow", "gree
 export const HueAlias = Schema.Literals(["accent", "interactive", "neutral"]);
 export const ActionVariant = Schema.Literals(["primary", "secondary", "destructive"]);
 export const ActionState = Schema.Literals(["disabled", "pressed", "focused", "selected", "hovered"]);
+export const SurfaceName = Schema.Literal("dialog");
 export const FormfieldState = ActionState;
 export const FeedbackKind = Schema.Literals(["error", "warning", "success", "info"]);
 const Mode = Schema.Literals(["light", "dark"]);
@@ -16,7 +17,6 @@ const ColorValue = Schema.Union([
 export const HueName = Schema.Union([BaseHue, HueAlias]);
 export const CategoricalDefinition = Schema.Array(HueName).check(Schema.isMinLength(1));
 const HueColorValue = Schema.Union([HexColor, Schema.TemplateLiteral(["$hue.", HueName, ".", HueStep])]);
-const ContextKey = Schema.Literals(["@context:elevated", "@context:overlay"]);
 const HueScaleDefinition = Schema.Record(HueStep, HexColor);
 const HueValueDefinition = Schema.Union([Schema.TemplateLiteral(["$hue.", HueName]), HueScaleDefinition]);
 const HueDefinition = Schema.Struct({
@@ -32,21 +32,8 @@ const HueDefinition = Schema.Struct({
     interactive: HueValueDefinition,
     neutral: HueValueDefinition,
 });
-const HueOverrideDefinition = Schema.Struct({
-    gray: Schema.optional(HueValueDefinition),
-    red: Schema.optional(HueValueDefinition),
-    orange: Schema.optional(HueValueDefinition),
-    yellow: Schema.optional(HueValueDefinition),
-    green: Schema.optional(HueValueDefinition),
-    cyan: Schema.optional(HueValueDefinition),
-    blue: Schema.optional(HueValueDefinition),
-    purple: Schema.optional(HueValueDefinition),
-    accent: Schema.optional(HueValueDefinition),
-    interactive: Schema.optional(HueValueDefinition),
-    neutral: Schema.optional(HueValueDefinition),
-});
 const StatefulColorDefinition = Schema.Struct({
-    default: Schema.optional(ColorValue),
+    base: Schema.optional(ColorValue),
     $hovered: Schema.optional(ColorValue),
     $focused: Schema.optional(ColorValue),
     $pressed: Schema.optional(ColorValue),
@@ -59,23 +46,17 @@ const ActionColorDefinition = Schema.Struct({
     destructive: Schema.optional(StatefulColorDefinition),
 });
 const TextFeedbackDefinition = Schema.Struct({
-    default: Schema.optional(ColorValue),
-    subdued: Schema.optional(ColorValue),
+    base: Schema.optional(ColorValue),
+    muted: Schema.optional(ColorValue),
 });
 const BackgroundFeedbackDefinition = Schema.Struct({
-    default: Schema.optional(ColorValue),
+    base: Schema.optional(ColorValue),
 });
 const TextDefinition = Schema.Struct({
-    default: Schema.optional(ColorValue),
-    subdued: Schema.optional(ColorValue),
+    base: Schema.optional(ColorValue),
+    muted: Schema.optional(ColorValue),
     action: Schema.optional(ActionColorDefinition),
     formfield: Schema.optional(StatefulColorDefinition),
-    status: Schema.optional(Schema.Struct({
-        running: Schema.optional(ColorValue),
-        question: Schema.optional(ColorValue),
-        permission: Schema.optional(ColorValue),
-        unread: Schema.optional(ColorValue),
-    })),
     feedback: Schema.optional(Schema.Struct({
         error: Schema.optional(TextFeedbackDefinition),
         warning: Schema.optional(TextFeedbackDefinition),
@@ -84,10 +65,11 @@ const TextDefinition = Schema.Struct({
     })),
 });
 const BackgroundDefinition = Schema.Struct({
-    default: Schema.optional(ColorValue),
-    surface: Schema.optional(Schema.Struct({
-        offset: Schema.optional(ColorValue),
-        overlay: Schema.optional(ColorValue),
+    base: Schema.optional(ColorValue),
+    raised: Schema.optional(Schema.Struct({
+        base: Schema.optional(ColorValue),
+        high: Schema.optional(ColorValue),
+        max: Schema.optional(ColorValue),
     })),
     action: Schema.optional(ActionColorDefinition),
     formfield: Schema.optional(StatefulColorDefinition),
@@ -148,42 +130,98 @@ const DiffDefinition = Schema.Struct({
 const ThemeTokensDefinition = Schema.Struct({
     text: Schema.optional(TextDefinition),
     background: Schema.optional(BackgroundDefinition),
-    border: Schema.optional(Schema.Struct({ default: Schema.optional(ColorValue) })),
-    scrollbar: Schema.optional(Schema.Struct({ default: Schema.optional(ColorValue) })),
+    border: Schema.optional(Schema.Struct({ base: Schema.optional(ColorValue) })),
+    scrollbar: Schema.optional(Schema.Struct({ base: Schema.optional(ColorValue) })),
     diff: Schema.optional(DiffDefinition),
     syntax: Schema.optional(SyntaxDefinition),
     markdown: Schema.optional(MarkdownDefinition),
 });
+const CompleteStatefulColorDefinition = Schema.Struct({
+    base: ColorValue,
+    $hovered: Schema.optional(ColorValue),
+    $focused: Schema.optional(ColorValue),
+    $pressed: Schema.optional(ColorValue),
+    $selected: Schema.optional(ColorValue),
+    $disabled: Schema.optional(ColorValue),
+});
+const CompleteActionColorDefinition = Schema.Struct({
+    primary: CompleteStatefulColorDefinition,
+    secondary: CompleteStatefulColorDefinition,
+    destructive: CompleteStatefulColorDefinition,
+});
+const CompleteTextFeedbackDefinition = Schema.Struct({ base: ColorValue, muted: Schema.optional(ColorValue) });
+const CompleteBackgroundFeedbackDefinition = Schema.Struct({ base: ColorValue });
+const CompleteThemeTokensDefinition = Schema.Struct({
+    text: Schema.Struct({
+        base: ColorValue,
+        muted: ColorValue,
+        action: CompleteActionColorDefinition,
+        formfield: CompleteStatefulColorDefinition,
+        feedback: Schema.Struct({
+            error: CompleteTextFeedbackDefinition,
+            warning: CompleteTextFeedbackDefinition,
+            success: CompleteTextFeedbackDefinition,
+            info: CompleteTextFeedbackDefinition,
+        }),
+    }),
+    background: Schema.Struct({
+        base: ColorValue,
+        raised: Schema.Struct({ base: ColorValue, high: ColorValue, max: ColorValue }),
+        action: CompleteActionColorDefinition,
+        formfield: CompleteStatefulColorDefinition,
+        feedback: Schema.Struct({
+            error: CompleteBackgroundFeedbackDefinition,
+            warning: CompleteBackgroundFeedbackDefinition,
+            success: CompleteBackgroundFeedbackDefinition,
+            info: CompleteBackgroundFeedbackDefinition,
+        }),
+    }),
+    border: Schema.Struct({ base: ColorValue }),
+    scrollbar: Schema.Struct({ base: ColorValue }),
+    diff: Schema.Struct({
+        text: Schema.Struct({ added: ColorValue, removed: ColorValue, context: ColorValue, hunkHeader: ColorValue }),
+        background: Schema.Struct({ added: ColorValue, removed: ColorValue, context: ColorValue }),
+        highlight: Schema.Struct({ added: ColorValue, removed: ColorValue }),
+        lineNumber: Schema.Struct({
+            text: ColorValue,
+            background: Schema.Struct({ added: ColorValue, removed: ColorValue }),
+        }),
+    }),
+    syntax: Schema.Record(SyntaxToken, HueColorValue),
+    markdown: Schema.Record(MarkdownToken, HueColorValue),
+});
 const ThemeDefinitionFields = Schema.Struct({
     hue: HueDefinition,
-    categorical: Schema.optional(CategoricalDefinition),
-    ...ThemeTokensDefinition.fields,
-    "@context:elevated": Schema.optional(ThemeTokensDefinition),
-    "@context:overlay": Schema.optional(ThemeTokensDefinition),
+    categorical: CategoricalDefinition,
+    ...CompleteThemeTokensDefinition.fields,
+    "@dialog": Schema.optional(ThemeTokensDefinition),
 });
 export const ThemeDefinition = ThemeDefinitionFields;
-const FileThemeDefinition = Schema.Struct({
-    hue: Schema.optional(HueOverrideDefinition),
-    categorical: Schema.optional(CategoricalDefinition),
-    ...ThemeTokensDefinition.fields,
-    "@context:elevated": Schema.optional(ThemeTokensDefinition),
-    "@context:overlay": Schema.optional(ThemeTokensDefinition),
+export const BaseThemeDefinition = Schema.Struct({
+    categorical: CategoricalDefinition,
+    ...CompleteThemeTokensDefinition.fields,
+    "@dialog": Schema.optional(ThemeTokensDefinition),
 });
-const MergeModeDefinition = Schema.Struct({
-    mergeMode: Schema.Literal(true),
-    hue: Schema.optional(HueOverrideDefinition),
+export const ModeDefinition = Schema.Struct({
+    hue: HueDefinition,
     categorical: Schema.optional(CategoricalDefinition),
     ...ThemeTokensDefinition.fields,
-    "@context:elevated": Schema.optional(ThemeTokensDefinition),
-    "@context:overlay": Schema.optional(ThemeTokensDefinition),
+    "@dialog": Schema.optional(ThemeTokensDefinition),
 });
-export const ModeDefinition = Schema.Union([MergeModeDefinition, FileThemeDefinition]);
 const FileMetadata = {
     $schema: Schema.optional(Schema.String),
-    version: Schema.Literal(2),
-    standalone: Schema.optional(Schema.Boolean),
 };
 export const ThemeDocument = Schema.Union([
-    Schema.Struct({ ...FileMetadata, light: ModeDefinition, dark: Schema.optional(ModeDefinition) }),
-    Schema.Struct({ ...FileMetadata, light: Schema.optional(ModeDefinition), dark: ModeDefinition }),
+    Schema.Struct({
+        ...FileMetadata,
+        base: BaseThemeDefinition,
+        light: ModeDefinition,
+        dark: Schema.optional(ModeDefinition),
+    }),
+    Schema.Struct({
+        ...FileMetadata,
+        base: BaseThemeDefinition,
+        light: Schema.optional(ModeDefinition),
+        dark: ModeDefinition,
+    }),
 ]);

package/dist/tui/select.d.ts

@@ -1,13 +1,8 @@
-import type { FileThemeDefinition, Mode, ThemeDefinition, ThemeDocument } from "./index.js";
-export declare function selectTheme(document: ThemeDocument & {
-    light: ThemeDefinition;
-    dark: ThemeDefinition;
-}, mode?: Mode): ThemeDefinition;
-export declare function selectTheme(document: ThemeDocument, mode?: Mode): FileThemeDefinition;
+import type { Mode, ThemeDefinition, ThemeDocument } from "./index.js";
+export declare function selectTheme(document: ThemeDocument, mode?: Mode): ThemeDefinition;
 export declare function selectThemeMode(document: ThemeDocument, mode?: Mode): {
-    theme: FileThemeDefinition;
+    theme: ThemeDefinition;
     mode: Mode;
-    expanded: boolean;
 };
 export declare function themeModes(document: ThemeDocument): readonly Mode[];
 export declare function supportsThemeMode(document: ThemeDocument, mode: Mode): boolean;

package/dist/tui/select.js

@@ -1,4 +1,4 @@
-import { expandTheme, mergeTheme } from "./expand.js";
+import { mergeTheme } from "./expand.js";
 export function selectTheme(document, mode) {
     return selectThemeMode(document, mode).theme;
 }
@@ -8,29 +8,11 @@ export function selectThemeMode(document, mode = "light") {
     const selected = document[selectedMode];
     if (!selected)
         throw new Error("Theme must provide at least one mode");
-    if (merges(document.light) && merges(document.dark))
-        throw new Error("Light and dark themes cannot both merge modes");
-    if (!merges(selected))
-        return { theme: selected, mode: selectedMode, expanded: false };
-    const otherMode = selectedMode === "light" ? "dark" : "light";
-    const other = document[otherMode];
-    if (!other)
-        throw new Error(`The ${selectedMode} theme cannot merge without a ${otherMode} theme`);
-    const merged = mergeTheme(expandTheme(other), expandTheme(selected));
-    if (!merged["hue"])
-        throw new Error(`The ${otherMode} theme must provide hues when ${selectedMode} merges modes`);
-    return { theme: merged, mode: selectedMode, expanded: true };
+    return { theme: mergeTheme(document.base, selected), mode: selectedMode };
 }
 export function themeModes(document) {
-    if (merges(document.light) && !document.dark)
-        throw new Error("The light theme cannot merge without a dark theme");
-    if (merges(document.dark) && !document.light)
-        throw new Error("The dark theme cannot merge without a light theme");
     return ["light", "dark"].filter((mode) => document[mode] !== undefined);
 }
 export function supportsThemeMode(document, mode) {
     return themeModes(document).includes(mode);
 }
-function merges(definition) {
-    return definition !== undefined && "mergeMode" in definition && definition.mergeMode === true;
-}

package/dist/tui/syntax.d.ts

@@ -1,3 +1,3 @@
 import { SyntaxStyle } from "@opentui/core";
-import type { Mode, ResolvedThemeTokens } from "./index.js";
-export declare function generateSyntax(theme: ResolvedThemeTokens, mode: Mode): SyntaxStyle;
+import type { ResolvedThemeTokens } from "./index.js";
+export declare function generateSyntax(theme: ResolvedThemeTokens): SyntaxStyle;

package/dist/tui/syntax.js

@@ -1,18 +1,18 @@
 import { SyntaxStyle } from "@opentui/core";
-export function generateSyntax(theme, mode) {
-    const step = mode === "light" ? 800 : 200;
+export function generateSyntax(theme) {
+    const step = 200;
     const syntax = theme.syntax;
     const markdown = theme.markdown;
     const feedback = theme.text.feedback;
     return SyntaxStyle.fromTheme([
-        rule(["default"], theme.text.default),
+        rule(["default"], theme.text.base),
         rule(["prompt"], theme.hue.accent[step]),
-        rule(["extmark.file"], feedback.warning.default, { bold: true }),
+        rule(["extmark.file"], feedback.warning.base, { bold: true }),
         rule(["extmark.agent"], theme.categorical[0][step], { bold: true }),
         rule(["extmark.skill"], (theme.categorical[1] ?? theme.categorical[0])[step], { bold: true }),
         // V1 migration preserves its selected/inverse foreground in this action state.
         rule(["extmark.paste"], theme.text.action.primary.focused, {
-            background: feedback.warning.default,
+            background: feedback.warning.base,
             bold: true,
         }),
         rule(["comment", "comment.documentation"], syntax.comment, { italic: true }),
@@ -31,7 +31,7 @@ export function generateSyntax(theme, mode) {
         rule(["type", "module", "class", "namespace"], syntax.type),
         rule(["type.definition"], syntax.type, { bold: true }),
         rule(["punctuation", "punctuation.bracket"], syntax.punctuation),
-        rule(["variable.builtin", "type.builtin", "function.builtin", "module.builtin", "constant.builtin", "variable.super"], feedback.error.default),
+        rule(["variable.builtin", "type.builtin", "function.builtin", "module.builtin", "constant.builtin", "variable.super"], feedback.error.base),
         rule(["keyword.directive", "keyword.modifier", "keyword.exception"], syntax.keyword, { italic: true }),
         rule(["punctuation.special", "tag.delimiter"], syntax.operator),
         rule([
@@ -48,27 +48,27 @@ export function generateSyntax(theme, mode) {
         rule(["markup.list"], markdown.listItem),
         rule(["markup.quote"], markdown.blockQuote, { italic: true }),
         rule(["markup.raw", "markup.raw.block"], markdown.code),
-        rule(["markup.raw.inline"], markdown.code, { background: theme.background.default }),
+        rule(["markup.raw.inline"], markdown.code, { background: theme.background.base }),
         rule(["markup.link", "markup.link.url", "string.special", "string.special.url"], markdown.link, {
             underline: true,
         }),
         rule(["markup.link.label"], markdown.linkText, { underline: true }),
         rule(["label"], markdown.linkText),
-        rule(["spell", "nospell"], theme.text.default),
-        rule(["markup.underline"], theme.text.default, { underline: true }),
-        rule(["comment.error"], feedback.error.default, { italic: true, bold: true }),
-        rule(["comment.warning"], feedback.warning.default, { italic: true, bold: true }),
-        rule(["comment.todo", "comment.note"], feedback.info.default, { italic: true, bold: true }),
-        rule(["attribute", "annotation"], feedback.warning.default),
-        rule(["tag"], feedback.error.default),
-        rule(["markup.strikethrough", "markup.list.unchecked", "debug"], theme.text.subdued),
-        rule(["markup.list.checked"], feedback.success.default),
+        rule(["spell", "nospell"], theme.text.base),
+        rule(["markup.underline"], theme.text.base, { underline: true }),
+        rule(["comment.error"], feedback.error.base, { italic: true, bold: true }),
+        rule(["comment.warning"], feedback.warning.base, { italic: true, bold: true }),
+        rule(["comment.todo", "comment.note"], feedback.info.base, { italic: true, bold: true }),
+        rule(["attribute", "annotation"], feedback.warning.base),
+        rule(["tag"], feedback.error.base),
+        rule(["markup.strikethrough", "markup.list.unchecked", "debug"], theme.text.muted),
+        rule(["markup.list.checked"], feedback.success.base),
         rule(["diff.plus"], theme.diff.text.added, { background: theme.diff.background.added }),
         rule(["diff.minus"], theme.diff.text.removed, { background: theme.diff.background.removed }),
         rule(["diff.delta"], theme.diff.text.context, { background: theme.diff.background.context }),
-        rule(["error"], feedback.error.default, { bold: true }),
-        rule(["warning"], feedback.warning.default, { bold: true }),
-        rule(["info"], feedback.info.default),
+        rule(["error"], feedback.error.base, { bold: true }),
+        rule(["warning"], feedback.warning.base, { bold: true }),
+        rule(["info"], feedback.info.base),
     ]);
 }
 function rule(scope, foreground, style = {}) {

package/dist/tui/types.d.ts

@@ -1,6 +1,6 @@
 import type { RGBA } from "@opentui/core";
-import type { ActionState, ActionVariant, BaseHue, FeedbackKind, HueAlias, HueStep, MarkdownToken, SyntaxToken } from "./schema.js";
-export type ResolvedActionState = "default" | ActionState;
+import type { ActionState, ActionVariant, BaseHue, FeedbackKind, HueAlias, HueStep, MarkdownToken, SurfaceName, SyntaxToken } from "./schema.js";
+export type ResolvedActionState = "base" | ActionState;
 export type ResolvedFormfieldState = ResolvedActionState;
 export type HueScale = Readonly<Record<HueStep, RGBA>>;
 export type Hue = Readonly<Record<BaseHue | HueAlias, HueScale>>;
@@ -9,7 +9,10 @@ export type HueSource = Readonly<{
     step: HueStep;
 }>;
 export type Categorical = readonly HueScale[];
-export type StatefulColor = Readonly<Record<ResolvedActionState, RGBA>>;
+export type ActionStates = Readonly<Partial<Record<ActionState, boolean>>>;
+export type StatefulColor = Readonly<Record<ResolvedActionState, RGBA>> & {
+    readonly state: (states: ActionStates) => RGBA;
+};
 export type FormfieldColor = StatefulColor;
 export type ResolvedThemeTokens = {
     readonly hue: Hue;
@@ -18,38 +21,33 @@ export type ResolvedThemeTokens = {
     readonly increase: (color: RGBA, amount?: number) => RGBA;
     readonly decrease: (color: RGBA, amount?: number) => RGBA;
     readonly text: {
-        readonly default: RGBA;
-        readonly subdued: RGBA;
+        readonly base: RGBA;
+        readonly muted: RGBA;
         readonly action: Readonly<Record<ActionVariant, StatefulColor>>;
         readonly formfield: FormfieldColor;
-        readonly status: {
-            readonly running: RGBA;
-            readonly question: RGBA;
-            readonly permission: RGBA;
-            readonly unread: RGBA;
-        };
         readonly feedback: Readonly<Record<FeedbackKind, {
-            readonly default: RGBA;
-            readonly subdued: RGBA;
+            readonly base: RGBA;
+            readonly muted: RGBA;
         }>>;
     };
     readonly background: {
-        readonly default: RGBA;
-        readonly surface: {
-            readonly offset: RGBA;
-            readonly overlay: RGBA;
+        readonly base: RGBA;
+        readonly raised: {
+            readonly base: RGBA;
+            readonly high: RGBA;
+            readonly max: RGBA;
         };
         readonly action: Readonly<Record<ActionVariant, StatefulColor>>;
         readonly formfield: FormfieldColor;
         readonly feedback: Readonly<Record<FeedbackKind, {
-            readonly default: RGBA;
+            readonly base: RGBA;
         }>>;
     };
     readonly border: {
-        readonly default: RGBA;
+        readonly base: RGBA;
     };
     readonly scrollbar: {
-        readonly default: RGBA;
+        readonly base: RGBA;
     };
     readonly diff: {
         readonly text: {
@@ -78,7 +76,7 @@ export type ResolvedThemeTokens = {
     readonly syntax: Readonly<Record<SyntaxToken, RGBA>>;
     readonly markdown: Readonly<Record<MarkdownToken, RGBA>>;
 };
-export type ContextName = "elevated" | "overlay";
 export type ResolvedTheme = ResolvedThemeTokens & {
-    readonly contextual: Readonly<Record<ContextName, ResolvedThemeTokens>>;
+    /** The same theme re-resolved on a raised surface. Absolute: every view's surfaces are the base theme's. */
+    readonly surface: (name: SurfaceName) => ResolvedTheme;
 };