refactor(tui): remove secondary action styles (#37378)

This commit is contained in:
James Long 2026-07-16 17:44:11 -04:00 committed by GitHub
commit 309860558d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 81 additions and 112 deletions

View file

@ -6,9 +6,8 @@ import type {
ResolvedActionState,
ResolvedFormfieldState,
ResolvedThemeView,
HueStep,
} from "./index"
import { ActionState } from "./schema"
import { ActionState, HueStep } from "./schema"
export type ActionStates = Partial<Record<ActionState, boolean>>
@ -79,6 +78,8 @@ export function createComponentTheme(current: Accessor<ResolvedThemeView>) {
return {
hue,
increase: (color: RGBA, amount = 1) => shiftHue(current(), color, amount),
decrease: (color: RGBA, amount = 1) => shiftHue(current(), color, -amount),
text,
background,
border: () => current().border.default,
@ -122,6 +123,17 @@ export function createComponentTheme(current: Accessor<ResolvedThemeView>) {
}
}
function shiftHue(theme: ResolvedThemeView, color: RGBA, amount: number) {
const colors = Object.values(theme.hue).flatMap((scale) =>
HueStep.literals.map((step, index) => ({ color: scale[step], index, scale })),
)
const match = colors.find((entry) => entry.color === color) ?? colors.find((entry) => entry.color.equals(color))
if (!match) return color
const offset = Number.isFinite(amount) ? Math.trunc(amount) : 0
const index = Math.max(0, Math.min(HueStep.literals.length - 1, match.index + offset))
return match.scale[HueStep.literals[index]]
}
function actions(get: (variant: ActionVariant, state: ResolvedActionState) => RGBA) {
const action = (variant: ActionVariant) => (states: ActionState | "default" | ActionStates = "default") => {
if (typeof states === "string") return get(variant, states)
@ -129,8 +141,6 @@ function actions(get: (variant: ActionVariant, state: ResolvedActionState) => RG
}
const primary = action("primary")
return Object.assign(primary, {
primary,
secondary: action("secondary"),
destructive: action("destructive"),
})
}

View file

@ -101,7 +101,6 @@ export const DEFAULT_THEME = {
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: {
@ -132,13 +131,6 @@ export const DEFAULT_THEME = {
$selected: "$hue.interactive.700",
$disabled: "$hue.neutral.300",
},
secondary: {
default: "$hue.neutral.200",
$focused: "$hue.neutral.300",
$pressed: "$hue.neutral.400",
$selected: "$hue.neutral.300",
$disabled: "$hue.neutral.200",
},
destructive: {
default: "$hue.red.600",
$focused: "$hue.red.700",
@ -318,7 +310,6 @@ export const DEFAULT_THEME = {
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: {
@ -349,13 +340,6 @@ export const DEFAULT_THEME = {
$selected: "$hue.interactive.600",
$disabled: "$hue.neutral.800",
},
secondary: {
default: "$hue.neutral.800",
$focused: "$hue.neutral.700",
$pressed: "$hue.neutral.900",
$selected: "$hue.neutral.700",
$disabled: "$hue.neutral.900",
},
destructive: {
default: "$hue.red.600",
$focused: "$hue.red.700",

View file

@ -9,7 +9,7 @@ export type BaseHue = Schema.Schema.Type<typeof BaseHue>
export const HueAlias = Schema.Literals(["accent", "interactive", "neutral"])
export type HueAlias = Schema.Schema.Type<typeof HueAlias>
export const ActionVariant = Schema.Literals(["primary", "secondary", "destructive"])
export const ActionVariant = Schema.Literals(["primary", "destructive"])
export type ActionVariant = Schema.Schema.Type<typeof ActionVariant>
export const ActionState = Schema.Literals(["disabled", "pressed", "focused", "selected"])
@ -93,7 +93,6 @@ export type FormfieldColorDefinition = Schema.Schema.Type<typeof FormfieldColorD
const ActionColorDefinition = Schema.Struct({
primary: Schema.optional(StatefulColorDefinition),
secondary: Schema.optional(StatefulColorDefinition),
destructive: Schema.optional(StatefulColorDefinition),
})

View file

@ -56,10 +56,6 @@ function migrateMode(theme: Theme, mode: "light" | "dark"): ThemeFile["light"] {
$focused: selected,
$selected: primary,
},
secondary: {
default: "$text.default",
$disabled: textMuted,
},
destructive: { default: destructive, $disabled: textMuted },
},
formfield: {
@ -84,11 +80,6 @@ function migrateMode(theme: Theme, mode: "light" | "dark"): ThemeFile["light"] {
},
action: {
primary: { default: "transparent", $focused: primary, $selected: primary },
secondary: {
default: "$background.default",
$focused: color("backgroundElement"),
$pressed: color("backgroundElement"),
},
destructive: { default: color("error") },
},
formfield: {