EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases Wiki Activity

fix(tui): restore selected action styling, fix subagent list (#37371)

Browse Source
This commit is contained in:
James Long
2026-07-16 16:20:16 -04:00
committed by GitHub
parent 5ee4c1082a
commit ac1b802820
9 changed files with 187 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/tui/src/routes/session/composer/shell-tab.tsx
+3 -8
View File
@@ -13,7 +13,6 @@ export function ShellTab(props: { sessionID: string }) {
const location = useLocation() const location = useLocation()
const client = useClient() const client = useClient()
const { themeV2 } = useTheme() const { themeV2 } = useTheme()
const fg = themeV2.text.action.primary("focused")
const composer = useComposerTab() const composer = useComposerTab()
const shortcuts = Keymap.useShortcuts() const shortcuts = Keymap.useShortcuts()
@@ -96,11 +95,7 @@ export function ShellTab(props: { sessionID: string }) {
return ( return (
<Show when={composer.active("shell")}> <Show when={composer.active("shell")}>
<scrollbox <scrollbox scrollbarOptions={{ visible: false }} maxHeight={5} ref={(r: ScrollBoxRenderable) => (scroll = r)}>
scrollbarOptions={{ visible: false }}
maxHeight={5}
ref={(r: ScrollBoxRenderable) => (scroll = r)}
>
<Show when={entries().length > 0} fallback={<text fg={themeV2.text.subdued()}> No shell commands</text>}> <Show when={entries().length > 0} fallback={<text fg={themeV2.text.subdued()}> No shell commands</text>}>
<For each={entries()}> <For each={entries()}>
{(shell, index) => { {(shell, index) => {
@@ -110,11 +105,11 @@ export function ShellTab(props: { sessionID: string }) {
flexDirection="row" flexDirection="row"
paddingLeft={1} paddingLeft={1}
paddingRight={1} paddingRight={1}
backgroundColor={active() ? themeV2.background.action.primary() : RGBA.fromInts(0, 0, 0, 0)} backgroundColor={active() ? themeV2.background.action.primary("selected") : RGBA.fromInts(0, 0, 0, 0)}
onMouseOver={() => setStore("selected", index())} onMouseOver={() => setStore("selected", index())}
> >
<text <text
fg={active() ? fg : themeV2.text()} fg={themeV2.text.action.primary(active() ? "focused" : "default")}
attributes={active() ? TextAttributes.BOLD : undefined} attributes={active() ? TextAttributes.BOLD : undefined}
wrapMode="none" wrapMode="none"
> >
packages/tui/src/routes/session/composer/subagents-tab.tsx
+16 -11
View File
@@ -22,7 +22,6 @@ export function SubagentsTab(props: { sessionID: string }) {
const data = useData() const data = useData()
const client = useClient() const client = useClient()
const { themeV2 } = useTheme() const { themeV2 } = useTheme()
const fg = themeV2.text.action.primary("focused")
const navigate = useRoute().navigate const navigate = useRoute().navigate
const composer = useComposerTab() const composer = useComposerTab()
const shortcuts = Keymap.useShortcuts() const shortcuts = Keymap.useShortcuts()
@@ -39,7 +38,11 @@ export function SubagentsTab(props: { sessionID: string }) {
const siblings = data.session.list().filter((s) => s.parentID === current.parentID) const siblings = data.session.list().filter((s) => s.parentID === current.parentID)
for (const sibling of siblings) { for (const sibling of siblings) {
const agentMatch = sibling.title.match(/@(\w+) subagent/) const agentMatch = sibling.title.match(/@(\w+) subagent/)
const agent = sibling.agent ? Locale.titlecase(sibling.agent) : agentMatch ? Locale.titlecase(agentMatch[1]) : "Subagent" const agent = sibling.agent
? Locale.titlecase(sibling.agent)
: agentMatch
? Locale.titlecase(agentMatch[1])
: "Subagent"
const name = agentMatch ? sibling.title.replace(agentMatch[0], "").trim() || sibling.title : sibling.title const name = agentMatch ? sibling.title.replace(agentMatch[0], "").trim() || sibling.title : sibling.title
result.push({ result.push({
sessionID: sibling.id, sessionID: sibling.id,
@@ -53,7 +56,11 @@ export function SubagentsTab(props: { sessionID: string }) {
const children = data.session.list().filter((s) => s.parentID === props.sessionID) const children = data.session.list().filter((s) => s.parentID === props.sessionID)
for (const child of children) { for (const child of children) {
const agentMatch = child.title.match(/@(\w+) subagent/) const agentMatch = child.title.match(/@(\w+) subagent/)
const agent = child.agent ? Locale.titlecase(child.agent) : agentMatch ? Locale.titlecase(agentMatch[1]) : "Subagent" const agent = child.agent
? Locale.titlecase(child.agent)
: agentMatch
? Locale.titlecase(agentMatch[1])
: "Subagent"
const name = agentMatch ? child.title.replace(agentMatch[0], "").trim() || child.title : child.title const name = agentMatch ? child.title.replace(agentMatch[0], "").trim() || child.title : child.title
result.push({ result.push({
sessionID: child.id, sessionID: child.id,
@@ -195,11 +202,7 @@ export function SubagentsTab(props: { sessionID: string }) {
return ( return (
<Show when={composer.active("subagents")}> <Show when={composer.active("subagents")}>
<scrollbox <scrollbox scrollbarOptions={{ visible: false }} maxHeight={5} ref={(r: ScrollBoxRenderable) => (scroll = r)}>
scrollbarOptions={{ visible: false }}
maxHeight={5}
ref={(r: ScrollBoxRenderable) => (scroll = r)}
>
<Show when={entries().length > 0} fallback={<text fg={themeV2.text.subdued()}> No subagents</text>}> <Show when={entries().length > 0} fallback={<text fg={themeV2.text.subdued()}> No subagents</text>}>
<For each={entries()}> <For each={entries()}>
{(entry, index) => { {(entry, index) => {
@@ -213,7 +216,7 @@ export function SubagentsTab(props: { sessionID: string }) {
flexDirection="row" flexDirection="row"
paddingLeft={1} paddingLeft={1}
paddingRight={1} paddingRight={1}
backgroundColor={active() ? themeV2.background.action.primary() : RGBA.fromInts(0, 0, 0, 0)} backgroundColor={themeV2.background.action.primary(active() ? "focused" : "default")}
onMouseOver={() => setStore("selected", index())} onMouseOver={() => setStore("selected", index())}
onMouseUp={() => { onMouseUp={() => {
setStore("selected", index()) setStore("selected", index())
@@ -222,7 +225,9 @@ export function SubagentsTab(props: { sessionID: string }) {
> >
<box flexGrow={1} minWidth={0} flexDirection="row"> <box flexGrow={1} minWidth={0} flexDirection="row">
<text <text
fg={active() ? fg : entry.current ? themeV2.background.action.primary() : themeV2.text()} fg={themeV2.text.action.primary(
active() ? "focused" : entry.current ? "selected" : "default",
)}
attributes={active() ? TextAttributes.BOLD : undefined} attributes={active() ? TextAttributes.BOLD : undefined}
wrapMode="none" wrapMode="none"
> >
@@ -230,7 +235,7 @@ export function SubagentsTab(props: { sessionID: string }) {
</text> </text>
</box> </box>
<Show when={status()}> <Show when={status()}>
<text fg={active() ? fg : themeV2.text.subdued()} wrapMode="none"> <text fg={active() ? themeV2.text.action.primary() : themeV2.text.subdued()} wrapMode="none">
{status()} {status()}
</text> </text>
</Show> </Show>
packages/tui/src/theme/v2/defaults.ts
+150 -128
View File
@@ -97,76 +97,87 @@ export const DEFAULT_THEME = {
neutral: "$hue.gray", neutral: "$hue.gray",
}, },
text: { text: {
default: "$hue.neutral.900",
subdued: "$hue.neutral.600",
action: {
primary: { default: "$hue.neutral.100", $disabled: "$hue.neutral.500" },
secondary: { default: "$hue.neutral.900", $disabled: "$hue.neutral.500" },
destructive: { default: "$hue.red.100", $disabled: "$hue.neutral.500" },
},
formfield: {
default: "$hue.neutral.900", default: "$hue.neutral.900",
subdued: "$hue.neutral.600", $focused: "$text.action.primary.default",
action: { $pressed: "$hue.neutral.100",
primary: { default: "$hue.neutral.100", $disabled: "$hue.neutral.500" }, $disabled: "$hue.neutral.500",
secondary: { default: "$hue.neutral.900", $disabled: "$hue.neutral.500" }, $selected: "$hue.interactive.600",
destructive: { default: "$hue.red.100", $disabled: "$hue.neutral.500" },
},
formfield: {
default: "$hue.neutral.900",
$focused: "$text.action.primary.default",
$pressed: "$hue.neutral.100",
$disabled: "$hue.neutral.500",
$selected: "$hue.interactive.600",
},
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: { feedback: {
default: "$hue.neutral.100", error: { default: "$hue.red.700", subdued: "$hue.red.600" },
surface: { warning: { default: "$hue.yellow.800", subdued: "$hue.yellow.700" },
offset: "$hue.neutral.200", success: { default: "$hue.green.700", subdued: "$hue.green.600" },
overlay: "$hue.neutral.300", info: { default: "$hue.cyan.700", subdued: "$hue.cyan.600" },
}, },
action: { },
primary: { background: {
default: "$hue.interactive.600", $focused: "$hue.interactive.700", $pressed: "$hue.interactive.800", default: "$hue.neutral.100",
$disabled: "$hue.neutral.300", surface: {
}, offset: "$hue.neutral.200",
secondary: { overlay: "$hue.neutral.300",
default: "$hue.neutral.200", $focused: "$hue.neutral.300", $pressed: "$hue.neutral.400", },
$disabled: "$hue.neutral.200", action: {
}, primary: {
destructive: { default: "$hue.interactive.600",
default: "$hue.red.600", $focused: "$hue.red.700", $pressed: "$hue.red.800", $focused: "$hue.interactive.700",
$disabled: "$hue.neutral.300",
},
},
formfield: {
default: "$background.default",
$focused: "$background.action.primary.default",
$pressed: "$hue.interactive.800", $pressed: "$hue.interactive.800",
$disabled: "$background.default", $selected: "$hue.interactive.700",
$selected: "$background.formfield.default", $disabled: "$hue.neutral.300",
}, },
feedback: { secondary: {
error: { default: "$background.default" }, default: "$hue.neutral.200",
warning: { default: "$background.default" }, $focused: "$hue.neutral.300",
success: { default: "$background.default" }, $pressed: "$hue.neutral.400",
info: { default: "$background.default" }, $selected: "$hue.neutral.300",
$disabled: "$hue.neutral.200",
},
destructive: {
default: "$hue.red.600",
$focused: "$hue.red.700",
$pressed: "$hue.red.800",
$selected: "$hue.red.700",
$disabled: "$hue.neutral.300",
}, },
}, },
border: { default: "$hue.neutral.300" }, formfield: {
scrollbar: { default: "$hue.neutral.400" }, default: "$background.default",
diff: { $focused: "$background.action.primary.default",
text: { $pressed: "$hue.interactive.800",
added: "$hue.green.700", removed: "$hue.red.700", context: "$hue.neutral.900", $disabled: "$background.default",
hunkHeader: "$hue.purple.600", $selected: "$background.formfield.default",
},
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: { 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", comment: "$hue.neutral.600",
keyword: "$hue.purple.600", keyword: "$hue.purple.600",
function: "$hue.accent.600", function: "$hue.accent.600",
@@ -177,7 +188,7 @@ export const DEFAULT_THEME = {
operator: "$hue.cyan.600", operator: "$hue.cyan.600",
punctuation: "$hue.neutral.900", punctuation: "$hue.neutral.900",
}, },
markdown: { markdown: {
text: "$hue.neutral.900", text: "$hue.neutral.900",
heading: "$hue.purple.600", heading: "$hue.purple.600",
link: "$hue.accent.600", link: "$hue.accent.600",
@@ -303,76 +314,87 @@ export const DEFAULT_THEME = {
neutral: "$hue.gray", neutral: "$hue.gray",
}, },
text: { text: {
default: "$hue.neutral.100",
subdued: "$hue.neutral.400",
action: {
primary: { default: "$hue.neutral.100", $disabled: "$hue.neutral.500" },
secondary: { default: "$hue.neutral.100", $disabled: "$hue.neutral.500" },
destructive: { default: "$hue.red.100", $disabled: "$hue.neutral.500" },
},
formfield: {
default: "$hue.neutral.100", default: "$hue.neutral.100",
subdued: "$hue.neutral.400", $focused: "$text.action.primary.default",
action: { $pressed: "$hue.neutral.100",
primary: { default: "$hue.neutral.100", $disabled: "$hue.neutral.500" }, $disabled: "$hue.neutral.500",
secondary: { default: "$hue.neutral.100", $disabled: "$hue.neutral.500" }, $selected: "$hue.interactive.500",
destructive: { default: "$hue.red.100", $disabled: "$hue.neutral.500" },
},
formfield: {
default: "$hue.neutral.100",
$focused: "$text.action.primary.default",
$pressed: "$hue.neutral.100",
$disabled: "$hue.neutral.500",
$selected: "$hue.interactive.500",
},
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: { feedback: {
default: "$hue.neutral.900", error: { default: "$hue.red.300", subdued: "$hue.red.400" },
surface: { warning: { default: "$hue.yellow.200", subdued: "$hue.yellow.300" },
offset: "$hue.neutral.800", success: { default: "$hue.green.300", subdued: "$hue.green.400" },
overlay: "$hue.neutral.700", info: { default: "$hue.cyan.300", subdued: "$hue.cyan.400" },
}, },
action: { },
primary: { background: {
default: "$hue.interactive.500", $focused: "$hue.interactive.600", $pressed: "$hue.interactive.800", default: "$hue.neutral.900",
$disabled: "$hue.neutral.800", surface: {
}, offset: "$hue.neutral.800",
secondary: { overlay: "$hue.neutral.700",
default: "$hue.neutral.800", $focused: "$hue.neutral.700", $pressed: "$hue.neutral.900", },
$disabled: "$hue.neutral.900", action: {
}, primary: {
destructive: { default: "$hue.interactive.500",
default: "$hue.red.600", $focused: "$hue.red.700", $pressed: "$hue.red.800", $focused: "$hue.interactive.600",
$disabled: "$hue.neutral.800",
},
},
formfield: {
default: "$background.default",
$focused: "$background.action.primary.default",
$pressed: "$hue.interactive.800", $pressed: "$hue.interactive.800",
$disabled: "$background.default", $selected: "$hue.interactive.600",
$selected: "$background.formfield.default", $disabled: "$hue.neutral.800",
}, },
feedback: { secondary: {
error: { default: "$background.default" }, default: "$hue.neutral.800",
warning: { default: "$background.default" }, $focused: "$hue.neutral.700",
success: { default: "$background.default" }, $pressed: "$hue.neutral.900",
info: { default: "$background.default" }, $selected: "$hue.neutral.700",
$disabled: "$hue.neutral.900",
},
destructive: {
default: "$hue.red.600",
$focused: "$hue.red.700",
$pressed: "$hue.red.800",
$selected: "$hue.red.700",
$disabled: "$hue.neutral.800",
}, },
}, },
border: { default: "$hue.neutral.700" }, formfield: {
scrollbar: { default: "$hue.neutral.600" }, default: "$background.default",
diff: { $focused: "$background.action.primary.default",
text: { $pressed: "$hue.interactive.800",
added: "$hue.green.300", removed: "$hue.red.300", context: "$hue.neutral.100", $disabled: "$background.default",
hunkHeader: "$hue.purple.400", $selected: "$background.formfield.default",
},
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: { 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", comment: "$hue.neutral.400",
keyword: "$hue.purple.400", keyword: "$hue.purple.400",
function: "$hue.accent.400", function: "$hue.accent.400",
@@ -383,7 +405,7 @@ export const DEFAULT_THEME = {
operator: "$hue.cyan.400", operator: "$hue.cyan.400",
punctuation: "$hue.neutral.100", punctuation: "$hue.neutral.100",
}, },
markdown: { markdown: {
text: "$hue.neutral.100", text: "$hue.neutral.100",
heading: "$hue.purple.400", heading: "$hue.purple.400",
link: "$hue.accent.400", link: "$hue.accent.400",
packages/tui/src/theme/v2/schema.ts
+2 -1
View File
@@ -12,7 +12,7 @@ export type HueAlias = Schema.Schema.Type<typeof HueAlias>
export const ActionVariant = Schema.Literals(["primary", "secondary", "destructive"]) export const ActionVariant = Schema.Literals(["primary", "secondary", "destructive"])
export type ActionVariant = Schema.Schema.Type<typeof ActionVariant> export type ActionVariant = Schema.Schema.Type<typeof ActionVariant>
export const ActionState = Schema.Literals(["focused", "pressed", "disabled"]) export const ActionState = Schema.Literals(["focused", "pressed", "selected", "disabled"])
export type ActionState = Schema.Schema.Type<typeof ActionState> export type ActionState = Schema.Schema.Type<typeof ActionState>
export type ActionStateKey = `$${ActionState}` export type ActionStateKey = `$${ActionState}`
@@ -77,6 +77,7 @@ const StatefulColorDefinition = Schema.Struct({
default: Schema.optional(ColorValue), default: Schema.optional(ColorValue),
$focused: Schema.optional(ColorValue), $focused: Schema.optional(ColorValue),
$pressed: Schema.optional(ColorValue), $pressed: Schema.optional(ColorValue),
$selected: Schema.optional(ColorValue),
$disabled: Schema.optional(ColorValue), $disabled: Schema.optional(ColorValue),
}) })
export type StatefulColorDefinition = Schema.Schema.Type<typeof StatefulColorDefinition> export type StatefulColorDefinition = Schema.Schema.Type<typeof StatefulColorDefinition>
packages/tui/src/theme/v2/v1-migrate.ts
+3 -6
View File
@@ -54,6 +54,7 @@ function migrateMode(theme: Theme, mode: "light" | "dark"): ThemeFile["light"] {
default: "$text.default", default: "$text.default",
$disabled: textMuted, $disabled: textMuted,
$focused: selected, $focused: selected,
$selected: primary,
}, },
secondary: { secondary: {
default: "$text.default", default: "$text.default",
@@ -82,7 +83,7 @@ function migrateMode(theme: Theme, mode: "light" | "dark"): ThemeFile["light"] {
overlay: backgroundMenu, overlay: backgroundMenu,
}, },
action: { action: {
primary: { default: "transparent", $focused: primary }, primary: { default: "transparent", $focused: primary, $selected: primary },
secondary: { secondary: {
default: "$background.default", default: "$background.default",
$focused: color("backgroundElement"), $focused: color("backgroundElement"),
@@ -150,11 +151,7 @@ function migrateMode(theme: Theme, mode: "light" | "dark"): ThemeFile["light"] {
imageText: color("markdownImageText"), imageText: color("markdownImageText"),
codeBlock: color("markdownCodeBlock"), codeBlock: color("markdownCodeBlock"),
}, },
"@context:elevated": { "@context:elevated": { background: { default: "$background.surface.offset" } },
background: {
default: "$background.surface.offset",
},
},
"@context:overlay": { background: { default: "$background.surface.overlay" } }, "@context:overlay": { background: { default: "$background.surface.overlay" } },
} }
} }
packages/tui/test/theme/v2/component.test.ts
+2
View File
@@ -21,6 +21,8 @@ test("provides reactive property, variant, state, and context accessors", () =>
expect(theme.text.subdued()).toBe(resolved().text.subdued) expect(theme.text.subdued()).toBe(resolved().text.subdued)
expect(theme.text.action()).toBe(resolved().text.action.primary.default) expect(theme.text.action()).toBe(resolved().text.action.primary.default)
expect(theme.text.action.primary("pressed")).toBe(resolved().text.action.primary.pressed) expect(theme.text.action.primary("pressed")).toBe(resolved().text.action.primary.pressed)
expect(theme.text.action.primary("selected")).toBe(resolved().text.action.primary.selected)
expect(theme.background.action.primary("selected")).toBe(resolved().background.action.primary.selected)
expect(theme.background.action.secondary("disabled")).toBe( expect(theme.background.action.secondary("disabled")).toBe(
resolved().background.action.secondary.disabled, resolved().background.action.secondary.disabled,
) )
packages/tui/test/theme/v2/resolve.test.ts
+2
View File
@@ -139,7 +139,9 @@ test("resolves matched action variants and states", () => {
const theme = resolveTheme(light) const theme = resolveTheme(light)
expect(theme.text.action.primary.pressed).toBeInstanceOf(RGBA) expect(theme.text.action.primary.pressed).toBeInstanceOf(RGBA)
expect(theme.text.action.primary.selected).toBeInstanceOf(RGBA)
expect(theme.background.action.primary.pressed).toBeInstanceOf(RGBA) expect(theme.background.action.primary.pressed).toBeInstanceOf(RGBA)
expect(theme.background.action.primary.selected).toBeInstanceOf(RGBA)
expect(theme.text.action.secondary.default).toBeInstanceOf(RGBA) expect(theme.text.action.secondary.default).toBeInstanceOf(RGBA)
expect(theme.background.action.destructive.disabled).toBeInstanceOf(RGBA) expect(theme.background.action.destructive.disabled).toBeInstanceOf(RGBA)
}) })
packages/tui/test/theme/v2/types.test.ts
+6 -1
View File
@@ -19,7 +19,11 @@ const background = {
default: "$hue.neutral.100", default: "$hue.neutral.100",
surface: { offset: "$hue.neutral.200", overlay: "$hue.neutral.300" }, surface: { offset: "$hue.neutral.200", overlay: "$hue.neutral.300" },
action: { action: {
primary: { default: "$hue.interactive.600", $pressed: "$hue.interactive.800" }, primary: {
default: "$hue.interactive.600",
$pressed: "$hue.interactive.800",
$selected: "$hue.interactive.700",
},
secondary: { default: "$hue.neutral.200" }, secondary: { default: "$hue.neutral.200" },
destructive: { default: "$hue.red.600" }, destructive: { default: "$hue.red.600" },
}, },
@@ -45,6 +49,7 @@ test("supports property-first definitions, variants, states, and contexts", () =
expect(text.action.primary.$pressed).toBe("$hue.neutral.200") expect(text.action.primary.$pressed).toBe("$hue.neutral.200")
expect(text.formfield.$selected).toBe("$hue.neutral.100") expect(text.formfield.$selected).toBe("$hue.neutral.100")
expect(background.action.destructive.default).toBe("$hue.red.600") expect(background.action.destructive.default).toBe("$hue.red.600")
expect(background.action.primary.$selected).toBe("$hue.interactive.700")
expect(background.surface.offset).toBe("$hue.neutral.200") expect(background.surface.offset).toBe("$hue.neutral.200")
expect(definition["@context:elevated"].text?.default).toBe("$hue.neutral.800") expect(definition["@context:elevated"].text?.default).toBe("$hue.neutral.800")
expect(definition["@context:overlay"].background?.default).toBe("$hue.neutral.300") expect(definition["@context:overlay"].background?.default).toBe("$hue.neutral.300")
packages/tui/test/theme/v2/v1-migrate.test.ts
+3
View File
@@ -26,6 +26,7 @@ test("migrates resolved V1 modes into literal V2 tokens", () => {
expect(migrated.dark.background?.surface?.offset).toBe("$hue.neutral.800") expect(migrated.dark.background?.surface?.offset).toBe("$hue.neutral.800")
expect(migrated.dark.background?.surface?.overlay).toBe("$hue.neutral.700") expect(migrated.dark.background?.surface?.overlay).toBe("$hue.neutral.700")
expect(migrated.light.text?.action?.primary?.default).toBe("$text.default") expect(migrated.light.text?.action?.primary?.default).toBe("$text.default")
expect(migrated.light.background?.action?.primary?.$selected).toBe("$hue.interactive.900")
expect(migrated.light.scrollbar?.default).toBe(hex(legacy.borderActive)) expect(migrated.light.scrollbar?.default).toBe(hex(legacy.borderActive))
expect(migrated.light.diff?.lineNumber?.background?.removed).toBe(hex(legacy.diffRemovedLineNumberBg)) expect(migrated.light.diff?.lineNumber?.background?.removed).toBe(hex(legacy.diffRemovedLineNumberBg))
expect(migrated.light.markdown?.emphasis).toBe(hex(legacy.markdownEmph)) expect(migrated.light.markdown?.emphasis).toBe(hex(legacy.markdownEmph))
@@ -39,6 +40,8 @@ test("migrates resolved V1 modes into literal V2 tokens", () => {
expect(resolved.text.formfield.focused.toInts()).toEqual(legacy.primary.toInts()) expect(resolved.text.formfield.focused.toInts()).toEqual(legacy.primary.toInts())
expect(resolved.hue.accent[900].toInts()).toEqual(legacy.accent.toInts()) expect(resolved.hue.accent[900].toInts()).toEqual(legacy.accent.toInts())
expect(resolved.hue.interactive[900].toInts()).toEqual(legacy.primary.toInts()) expect(resolved.hue.interactive[900].toInts()).toEqual(legacy.primary.toInts())
expect(resolved.background.action.primary.selected.toInts()).toEqual(legacy.primary.toInts())
expect(resolved.text.action.primary.selected.toInts()).toEqual(legacy.primary.toInts())
expect(resolved.background.feedback.error.default.toInts()).toEqual(legacy.background.toInts()) expect(resolved.background.feedback.error.default.toInts()).toEqual(legacy.background.toInts())
expect(resolved.contexts["@context:elevated"]?.background.default.toInts()).toEqual( expect(resolved.contexts["@context:elevated"]?.background.default.toInts()).toEqual(
legacy.backgroundPanel.toInts(), legacy.backgroundPanel.toInts(),