144 lines
16 KiB
TypeScript
144 lines
16 KiB
TypeScript
import { runtimeThemeDefaults } from "./default-values.generated"
|
|
|
|
/** Public Runtime Theme contract v1. Component mappings and derived CSS are private. */
|
|
export const runtimeThemeContract = {
|
|
"color.bg.content": { property: "--hm-sem-bg-content", defaultValue: runtimeThemeDefaults["--hm-sem-bg-content"], type: "color" },
|
|
"color.bg.surface": { property: "--hm-sem-bg-surface", defaultValue: runtimeThemeDefaults["--hm-sem-bg-surface"], type: "color" },
|
|
"color.fg.primary": { property: "--hm-sem-fg-primary", defaultValue: runtimeThemeDefaults["--hm-sem-fg-primary"], type: "color" },
|
|
"color.fg.secondary": { property: "--hm-sem-fg-secondary", defaultValue: runtimeThemeDefaults["--hm-sem-fg-secondary"], type: "color" },
|
|
"color.fg.placeholder": { property: "--hm-sem-fg-placeholder", defaultValue: runtimeThemeDefaults["--hm-sem-fg-placeholder"], type: "color" },
|
|
"color.action.primary": { property: "--hm-sem-action-primary", defaultValue: runtimeThemeDefaults["--hm-sem-action-primary"], type: "color" },
|
|
"color.action.cancel": { property: "--hm-sem-action-cancel", defaultValue: runtimeThemeDefaults["--hm-sem-action-cancel"], type: "color" },
|
|
"color.action.destructive": { property: "--hm-sem-action-destructive", defaultValue: runtimeThemeDefaults["--hm-sem-action-destructive"], type: "color" },
|
|
// Provisional generic status role; existing component error/destructive mappings stay unchanged.
|
|
"color.status.error": { property: "--hm-sem-status-error", defaultValue: runtimeThemeDefaults["--hm-sem-status-error"], type: "color" },
|
|
"color.stroke.default": { property: "--hm-sem-stroke-default", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-default"], type: "color" },
|
|
"color.stroke.input.default": { property: "--hm-sem-stroke-input-default", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-input-default"], type: "color" },
|
|
"color.stroke.input.focus": { property: "--hm-sem-stroke-input-focus", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-input-focus"], type: "color" },
|
|
"color.bg.brand.stop.0": { property: "--hm-sem-brand-bg-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-0"], type: "color" },
|
|
"color.bg.brand.stop.12": { property: "--hm-sem-brand-bg-stop-12", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-12"], type: "color" },
|
|
"color.bg.brand.stop.42": { property: "--hm-sem-brand-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-42"], type: "color" },
|
|
"color.bg.brand.stop.78": { property: "--hm-sem-brand-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-78"], type: "color" },
|
|
"color.bg.brand.stop.100": { property: "--hm-sem-brand-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-100"], type: "color" },
|
|
"color.bg.brown.stop.0": { property: "--hm-sem-brown-bg-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-0"], type: "color" },
|
|
"color.bg.brown.stop.12": { property: "--hm-sem-brown-bg-stop-12", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-12"], type: "color" },
|
|
"color.bg.brown.stop.42": { property: "--hm-sem-brown-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-42"], type: "color" },
|
|
"color.bg.brown.stop.78": { property: "--hm-sem-brown-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-78"], type: "color" },
|
|
"color.bg.brown.stop.100": { property: "--hm-sem-brown-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-brown-bg-stop-100"], type: "color" },
|
|
"color.bg.orange.stop.0": { property: "--hm-sem-orange-bg-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-0"], type: "color" },
|
|
"color.bg.orange.stop.12": { property: "--hm-sem-orange-bg-stop-12", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-12"], type: "color" },
|
|
"color.bg.orange.stop.42": { property: "--hm-sem-orange-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-42"], type: "color" },
|
|
"color.bg.orange.stop.78": { property: "--hm-sem-orange-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-78"], type: "color" },
|
|
"color.bg.orange.stop.100": { property: "--hm-sem-orange-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-orange-bg-stop-100"], type: "color" },
|
|
"surface.action.primary.stop.0": { property: "--hm-sem-action-surface-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-0"], type: "color" },
|
|
"surface.action.primary.stop.30": { property: "--hm-sem-action-surface-stop-30", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-30"], type: "color" },
|
|
"surface.action.primary.stop.65": { property: "--hm-sem-action-surface-stop-65", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-65"], type: "color" },
|
|
"surface.action.primary.stop.100": { property: "--hm-sem-action-surface-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-100"], type: "color" },
|
|
"surface.action.primary.border.stop.0": { property: "--hm-sem-action-border-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-action-border-stop-0"], type: "color" },
|
|
"surface.action.primary.border.stop.50": { property: "--hm-sem-action-border-stop-50", defaultValue: runtimeThemeDefaults["--hm-sem-action-border-stop-50"], type: "color" },
|
|
"surface.action.primary.border.stop.100": { property: "--hm-sem-action-border-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-action-border-stop-100"], type: "color" },
|
|
"radius.input.default": { property: "--hm-radius-input", defaultValue: runtimeThemeDefaults["--hm-radius-input"], type: "radius" },
|
|
"radius.container.default": { property: "--hm-radius-container", defaultValue: runtimeThemeDefaults["--hm-radius-container"], type: "radius" },
|
|
"color.state.active": { property: "--hm-sem-state-active", defaultValue: runtimeThemeDefaults["--hm-sem-state-active"], type: "color" },
|
|
"color.on.state.active": { property: "--hm-sem-on-state-active", defaultValue: runtimeThemeDefaults["--hm-sem-on-state-active"], type: "color" },
|
|
"color.fg.inverse": { property: "--hm-sem-on-action-primary", defaultValue: runtimeThemeDefaults["--hm-sem-on-action-primary"], type: "color" },
|
|
"color.bg.subtle": { property: "--hm-sem-bg-subtle", defaultValue: runtimeThemeDefaults["--hm-sem-bg-subtle"], type: "color" },
|
|
"color.accent": { property: "--hm-sem-accent", defaultValue: runtimeThemeDefaults["--hm-sem-accent"], type: "color" },
|
|
"color.on.accent": { property: "--hm-sem-on-accent", defaultValue: runtimeThemeDefaults["--hm-sem-on-accent"], type: "color" },
|
|
"color.palette.green-light-4": { property: "--hm-sem-palette-green-light-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-4"], type: "color" },
|
|
"color.palette.green-light-3": { property: "--hm-sem-palette-green-light-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-3"], type: "color" },
|
|
"color.palette.green-light-2": { property: "--hm-sem-palette-green-light-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-2"], type: "color" },
|
|
"color.palette.green-light-1": { property: "--hm-sem-palette-green-light-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-1"], type: "color" },
|
|
"color.palette.green-default": { property: "--hm-sem-palette-green-default", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-default"], type: "color" },
|
|
"color.palette.green-dark-1": { property: "--hm-sem-palette-green-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-dark-1"], type: "color" },
|
|
"color.palette.green-dark-2": { property: "--hm-sem-palette-green-dark-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-dark-2"], type: "color" },
|
|
"color.palette.brown-light-2": { property: "--hm-sem-palette-brown-light-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-2"], type: "color" },
|
|
"color.palette.brown-light-1": { property: "--hm-sem-palette-brown-light-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-1"], type: "color" },
|
|
"color.palette.brown-default": { property: "--hm-sem-palette-brown-default", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-default"], type: "color" },
|
|
"color.palette.brown-dark-1": { property: "--hm-sem-palette-brown-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-dark-1"], type: "color" },
|
|
"color.palette.brown-light-4": { property: "--hm-sem-palette-brown-light-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-4"], type: "color" },
|
|
"color.palette.orange-light-4": { property: "--hm-sem-palette-orange-light-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-4"], type: "color" },
|
|
"color.palette.orange-default": { property: "--hm-sem-palette-orange-default", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-default"], type: "color" },
|
|
"color.palette.warm-neutral-light": { property: "--hm-sem-palette-warm-neutral-light", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-light"], type: "color" },
|
|
"color.palette.warm-neutral-mid": { property: "--hm-sem-palette-warm-neutral-mid", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-mid"], type: "color" },
|
|
"color.palette.warm-neutral-dark": { property: "--hm-sem-palette-warm-neutral-dark", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-dark"], type: "color" },
|
|
"color.palette.beige-light": { property: "--hm-sem-palette-beige-light", defaultValue: runtimeThemeDefaults["--hm-sem-palette-beige-light"], type: "color" },
|
|
"color.palette.red-danger": { property: "--hm-sem-palette-red-danger", defaultValue: runtimeThemeDefaults["--hm-sem-palette-red-danger"], type: "color" },
|
|
"color.palette.white": { property: "--hm-sem-palette-white", defaultValue: runtimeThemeDefaults["--hm-sem-palette-white"], type: "color" },
|
|
"color.palette.black": { property: "--hm-sem-palette-black", defaultValue: runtimeThemeDefaults["--hm-sem-palette-black"], type: "color" },
|
|
"color.palette.neutral-gray-500": { property: "--hm-sem-palette-neutral-gray-500", defaultValue: runtimeThemeDefaults["--hm-sem-palette-neutral-gray-500"], type: "color" },
|
|
"color.palette.green-tone-1": { property: "--hm-sem-palette-green-tone-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-1"], type: "color" },
|
|
"color.palette.green-tone-2": { property: "--hm-sem-palette-green-tone-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-2"], type: "color" },
|
|
"color.palette.green-tone-3": { property: "--hm-sem-palette-green-tone-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-3"], type: "color" },
|
|
"color.palette.green-tone-4": { property: "--hm-sem-palette-green-tone-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-4"], type: "color" },
|
|
"color.palette.warm-neutral-pale": { property: "--hm-sem-palette-warm-neutral-pale", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-pale"], type: "color" },
|
|
"color.palette.warm-neutral-secondary": { property: "--hm-sem-palette-warm-neutral-secondary", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-secondary"], type: "color" },
|
|
"color.palette.warm-neutral-muted": { property: "--hm-sem-palette-warm-neutral-muted", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-muted"], type: "color" },
|
|
"color.palette.green-tint": { property: "--hm-sem-palette-green-tint", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tint"], type: "color" },
|
|
"color.palette.yellow-accent": { property: "--hm-sem-palette-yellow-accent", defaultValue: runtimeThemeDefaults["--hm-sem-palette-yellow-accent"], type: "color" },
|
|
"color.palette.brown-deep": { property: "--hm-sem-palette-brown-deep", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-deep"], type: "color" },
|
|
"color.palette.brown-highlight": { property: "--hm-sem-palette-brown-highlight", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-highlight"], type: "color" },
|
|
"color.palette.orange-light": { property: "--hm-sem-palette-orange-light", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light"], type: "color" },
|
|
"color.palette.orange-mid": { property: "--hm-sem-palette-orange-mid", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-mid"], type: "color" },
|
|
"color.palette.orange-dark": { property: "--hm-sem-palette-orange-dark", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark"], type: "color" },
|
|
"color.palette.orange-deep": { property: "--hm-sem-palette-orange-deep", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-deep"], type: "color" },
|
|
"color.palette.orange-border": { property: "--hm-sem-palette-orange-border", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-border"], type: "color" },
|
|
"color.palette.orange-border-deep": { property: "--hm-sem-palette-orange-border-deep", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-border-deep"], type: "color" },
|
|
"color.palette.gray": { property: "--hm-sem-palette-gray", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray"], type: "color" },
|
|
"color.palette.gray-dark": { property: "--hm-sem-palette-gray-dark", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-dark"], type: "color" },
|
|
"color.palette.indicator": { property: "--hm-sem-palette-indicator", defaultValue: runtimeThemeDefaults["--hm-sem-palette-indicator"], type: "color" },
|
|
// Confirmed ui_viz brand stages; legacy keys and component mappings remain unchanged.
|
|
"color.palette.green-dark-3": { property: "--hm-sem-palette-green-dark-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-dark-3"], type: "color" },
|
|
"color.palette.brown-light-3": { property: "--hm-sem-palette-brown-light-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-3"], type: "color" },
|
|
"color.palette.brown-dark-2": { property: "--hm-sem-palette-brown-dark-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-dark-2"], type: "color" },
|
|
"color.palette.brown-dark-3": { property: "--hm-sem-palette-brown-dark-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-dark-3"], type: "color" },
|
|
"color.palette.orange-light-3": { property: "--hm-sem-palette-orange-light-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-3"], type: "color" },
|
|
"color.palette.orange-light-2": { property: "--hm-sem-palette-orange-light-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-2"], type: "color" },
|
|
"color.palette.orange-light-1": { property: "--hm-sem-palette-orange-light-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-1"], type: "color" },
|
|
"color.palette.orange-dark-1": { property: "--hm-sem-palette-orange-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-1"], type: "color" },
|
|
"color.palette.orange-dark-2": { property: "--hm-sem-palette-orange-dark-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-2"], type: "color" },
|
|
"color.palette.orange-dark-3": { property: "--hm-sem-palette-orange-dark-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-3"], type: "color" },
|
|
} as const
|
|
|
|
export type RuntimeThemeToken = keyof typeof runtimeThemeContract
|
|
export type RuntimeTheme = { schemaVersion: 1; tokens: Partial<Record<RuntimeThemeToken, string>> }
|
|
export const defaultRuntimeTheme: RuntimeTheme = {
|
|
schemaVersion: 1,
|
|
tokens: Object.fromEntries(Object.entries(runtimeThemeContract).map(([key, value]) => [key, value.defaultValue])),
|
|
}
|
|
|
|
export const runtimeGradientGroups = [
|
|
[
|
|
"color.bg.brand.stop.0",
|
|
"color.bg.brand.stop.12",
|
|
"color.bg.brand.stop.42",
|
|
"color.bg.brand.stop.78",
|
|
"color.bg.brand.stop.100"
|
|
],
|
|
[
|
|
"surface.action.primary.stop.0",
|
|
"surface.action.primary.stop.30",
|
|
"surface.action.primary.stop.65",
|
|
"surface.action.primary.stop.100"
|
|
],
|
|
[
|
|
"surface.action.primary.border.stop.0",
|
|
"surface.action.primary.border.stop.50",
|
|
"surface.action.primary.border.stop.100"
|
|
],
|
|
[
|
|
"color.bg.brown.stop.0",
|
|
"color.bg.brown.stop.12",
|
|
"color.bg.brown.stop.42",
|
|
"color.bg.brown.stop.78",
|
|
"color.bg.brown.stop.100"
|
|
],
|
|
[
|
|
"color.bg.orange.stop.0",
|
|
"color.bg.orange.stop.12",
|
|
"color.bg.orange.stop.42",
|
|
"color.bg.orange.stop.78",
|
|
"color.bg.orange.stop.100"
|
|
]
|
|
] as const
|