ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(tui): add hovered theme state (#37404)

Browse source
This commit is contained in:
James Long 2026-07-17 10:19:42 -04:00 • committed by GitHub
commit b26d948b76
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 97 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/tui/test/theme/v2/component.test.ts
View file

@ -29,17 +29,24 @@ test("provides reactive property, variant, state, and context accessors", () =>
expect(theme.increase(unmatched, 1)).toBe(unmatched)
expect(theme.text.subdued()).toBe(resolved().text.subdued)
expect(theme.text.action()).toBe(resolved().text.action.primary.default)
expect(theme.text.action("hovered")).toBe(resolved().text.action.primary.hovered)
expect(theme.text.action("pressed")).toBe(resolved().text.action.primary.pressed)
expect(theme.text.action("selected")).toBe(resolved().text.action.primary.selected)
expect(theme.background.action("selected")).toBe(resolved().background.action.primary.selected)
expect(theme.background.action("hovered")).toBe(resolved().background.action.primary.hovered)
expect(theme.background.action({ selected: true })).toBe(resolved().background.action.primary.selected)
expect(theme.background.action({ selected: true, hovered: true })).toBe(
resolved().background.action.primary.selected,
)
expect(theme.background.action({ focused: true, selected: true })).toBe(
resolved().background.action.primary.focused,
)
expect(theme.background.action({ pressed: true, focused: true, selected: true })).toBe(
resolved().background.action.primary.pressed,
)
expect(theme.background.action({ disabled: true, pressed: true, focused: true, selected: true })).toBe(
expect(
theme.background.action({ disabled: true, pressed: true, focused: true, selected: true, hovered: true }),
).toBe(
resolved().background.action.primary.disabled,
)
expect(theme.background.action({ disabled: false, selected: false })).toBe(
@ -48,6 +55,16 @@ test("provides reactive property, variant, state, and context accessors", () =>
expect(theme.background.action.destructive("disabled")).toBe(
resolved().background.action.destructive.disabled,
)
expect(theme.background.formfield("hovered")).toBe(resolved().background.formfield.hovered)
expect(theme.background.formfield({ selected: true, hovered: true })).toBe(
resolved().background.formfield.selected,
)
expect(theme.background.formfield({ focused: true, selected: true, hovered: true })).toBe(
resolved().background.formfield.focused,
)
expect(
theme.background.formfield({ disabled: true, pressed: true, focused: true, selected: true, hovered: true }),
).toBe(resolved().background.formfield.disabled)
expect(theme.background.surface.offset()).toBe(resolved().background.surface.offset)
expect(theme.background.surface.overlay()).toBe(resolved().background.surface.overlay)
expect(theme.scrollbar()).toBe(resolved().scrollbar.default)
@ -58,6 +75,7 @@ test("provides reactive property, variant, state, and context accessors", () =>
expect(theme.background.action("focused")).toBe(
resolved().contexts["@context:elevated"]!.background.action.primary.focused,
)
expect(theme.background.action("hovered")).toBe(resolved().background.surface.overlay)
expect(theme.background.formfield("selected")).toBe(
resolved().contexts["@context:elevated"]!.background.formfield.selected,
)

19
packages/tui/test/theme/v2/resolve.test.ts
View file

@ -144,10 +144,29 @@ test("resolves matched action variants and states", () => {
const theme = resolveTheme(light)
expect(theme.text.action.primary.pressed).toBeInstanceOf(RGBA)
expect(theme.text.action.primary.hovered).toBeInstanceOf(RGBA)
expect(theme.text.action.primary.selected).toBeInstanceOf(RGBA)
expect(theme.background.action.primary.pressed).toBeInstanceOf(RGBA)
expect(theme.background.action.primary.hovered).toBeInstanceOf(RGBA)
expect(theme.background.action.primary.selected).toBeInstanceOf(RGBA)
expect(theme.background.action.destructive.disabled).toBeInstanceOf(RGBA)
expect(theme.background.formfield.hovered).toBeInstanceOf(RGBA)
})
test("resolves elevated hover surfaces from direct colors", () => {
const theme = resolveThemeFile(
{
version: 2,
light: { background: { surface: { offset: "#123456", overlay: "#234567" } } },
dark: {},
},
"light",
)
expect(theme.contexts["@context:elevated"]?.background.default.toInts()).toEqual([18, 52, 86, 255])
expect(theme.contexts["@context:elevated"]?.background.action.primary.hovered.toInts()).toEqual([
35, 69, 103, 255,
])
})
test("resolves transparent colors", () => {

17
packages/tui/test/theme/v2/types.test.ts
View file

@ -5,7 +5,11 @@ const text = {
default: "$hue.neutral.900",
subdued: "$hue.neutral.600",
action: {
primary: { default: "$hue.neutral.100", $pressed: "$hue.neutral.200" },
primary: {
default: "$hue.neutral.100",
$hovered: "$hue.neutral.200",
$pressed: "$hue.neutral.300",
},
destructive: { default: "$hue.red.100", $disabled: "$hue.neutral.500" },
},
formfield: { default: "$hue.neutral.600", $selected: "$hue.neutral.100" },
@ -20,12 +24,17 @@ const background = {
action: {
primary: {
default: "$hue.interactive.600",
$hovered: "$hue.interactive.700",
$pressed: "$hue.interactive.800",
$selected: "$hue.interactive.700",
},
destructive: { default: "$hue.red.600" },
},
formfield: { default: "$hue.neutral.100", $selected: "$hue.interactive.600" },
formfield: {
default: "$hue.neutral.100",
$hovered: "$hue.neutral.200",
$selected: "$hue.interactive.600",
},
feedback: { error: { default: "$hue.red.100" } },
} satisfies BackgroundDefinition
@ -44,10 +53,12 @@ const definition = {
const file = { version: 2, light: definition, dark: definition } satisfies ThemeFile
test("supports property-first definitions, variants, states, and contexts", () => {
expect(text.action.primary.$pressed).toBe("$hue.neutral.200")
expect(text.action.primary.$hovered).toBe("$hue.neutral.200")
expect(text.action.primary.$pressed).toBe("$hue.neutral.300")
expect(text.formfield.$selected).toBe("$hue.neutral.100")
expect(background.action.destructive.default).toBe("$hue.red.600")
expect(background.action.primary.$selected).toBe("$hue.interactive.700")
expect(background.formfield.$hovered).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:overlay"].background?.default).toBe("$hue.neutral.300")