refactor(tui): remove secondary action styles (#37378)
This commit is contained in:
parent
b4a4ef0b3c
commit
309860558d
16 changed files with 81 additions and 112 deletions
|
|
@ -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"),
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue