@cdx-ui/styles 0.0.1-beta.7 → 0.0.1-beta.71

package/README.md

@@ -1,6 +1,6 @@
 # @cdx-ui/styles
 
-Design tokens and theme infrastructure for the Candescent Design System. Tokens flow from Figma Variables through a Style Dictionary pipeline into CSS custom properties, Tailwind v4 theme variables, and runtime theming artifacts — supporting three presets (Poise, Prestige, Pulse), light/dark modes, cross-platform fonts, and FI white-label overrides.
+Design tokens and theme infrastructure for the Forge Design System. Tokens flow from Figma Variables through a Style Dictionary pipeline into CSS custom properties, Tailwind v4 theme variables, and runtime theming artifacts — supporting three presets (Poise, Prestige, Pulse), light/dark modes, cross-platform fonts, and FI white-label overrides.
 
 ## Installation
 
@@ -22,7 +22,7 @@ Import `theme.css` and `utilities.css` in your global stylesheet, after Tailwind
 @import '@cdx-ui/styles/utilities.css';
 ```
 
-`theme.css` declares all token variables — primitives in `@theme static`, mode-dependent semantics in `@variant light/dark`, and platform fonts in `@variant ios/android/web`. `utilities.css` provides composite typography utilities (`heading-xl` through `body-xs`).
+`theme.css` declares all token variables — primitives in `@theme static`, mode-dependent semantics in `@variant light/dark`, and platform fonts in `@variant ios/android/web`. `utilities.css` provides composite typography utilities (`heading-xl` through `body-xs`, plus `label-sm` and `label-xs`).
 
 Components then use standard Tailwind utilities backed by theme variables:
 
@@ -51,9 +51,9 @@ import prestige from '@cdx-ui/styles/presets/prestige.json';
 import pulse from '@cdx-ui/styles/presets/pulse.json';
 ```
 
-### TypeScript types
+### TypeScript exports
 
-The package exports DTCG-compatible type definitions for theme objects, overrides, and related structures:
+The package exports DTCG-compatible type definitions, runtime constants, palette generation utilities, theming functions, and the `useForgeFonts` hook:
 
 ```typescript
 import type {
@@ -63,13 +63,97 @@ import type {
   ThemeOverrideMetadata,
   TokenGroup,
   TokenValue,
+  Preset,
   Mode,
   Platform,
+  CssVariableMaps,
+  RuntimeMap,
+  PaletteCategory,
+  PaletteScale,
+  PaletteStep,
+  PaletteTokenMap,
+  ApplyThemeOverrideOptions,
+  ApplyThemeOverrideResult,
 } from '@cdx-ui/styles';
+
+import {
+  useForgeFonts,
+  OVERRIDE_SCHEMA_VERSION,
+  SUPPORTED_OVERRIDE_SCHEMA_VERSIONS,
+  INPUT_TOKEN_MAP,
+  presetFonts,
+  DEFAULT_PRESET,
+  generateColorScale,
+  generatePalettesFromInputs,
+  deriveBaseColorKey,
+  applyThemeOverride,
+  isSchemaVersionSupported,
+  presetPatchToUniwindMaps,
+  themeOverrideToUniwindMaps,
+} from '@cdx-ui/styles';
+```
+
+**Types:**
+
+- `ThemeObject` — Complete Forge UI theme object (DTCG-compatible), including `modes`, `platform`, and `$extensions`.
+- `ThemeOverride` — Hybrid FI override structure with `inputs` (brand values for palette generation) and optional per-mode `overrides`.
+- `ThemeMetadata` / `ThemeOverrideMetadata` — Metadata stored under `$extensions.com.forge.ui.theme` and `$extensions.com.forge.ui.themeOverride`.
+- `Preset` — Union type: `'poise' | 'prestige' | 'pulse'`.
+- `TokenValue` / `TokenGroup` — DTCG leaf node and recursive group types.
+- `Mode` / `Platform` — `'light' | 'dark'` and `'web' | 'ios' | 'android'`.
+- `CssVariableMaps` — Per-mode CSS variable maps ready for `Uniwind.updateCSSVariables`.
+- `RuntimeMap` — Token dot-paths → CSS custom property names.
+- `PaletteCategory` / `PaletteScale` / `PaletteStep` / `PaletteTokenMap` — Palette generation types.
+- `ApplyThemeOverrideOptions` / `ApplyThemeOverrideResult` — Options and result types for `applyThemeOverride`.
+
+**Constants:**
+
+- `OVERRIDE_SCHEMA_VERSION` — Current override contract version (`'1.0.0'`). Consuming apps gate FI override compatibility on this value.
+- `SUPPORTED_OVERRIDE_SCHEMA_VERSIONS` — Array of schema versions accepted by this package version (includes current and optionally one prior version during transition windows).
+- `INPUT_TOKEN_MAP` — Maps known input keys (`brandPrimary`, `accentPrimary`, `basePrimary`, `displayFont`) to the token path pattern each affects. Used by override application to route inputs to the correct palette namespace.
+- `presetFonts` — Allowed display font families per preset, used by the Theme Editor for font selection and by consuming apps for validation.
+- `DEFAULT_PRESET` — The default preset (`'poise'`).
+
+**Palette generation:**
+
+- `generateColorScale(hex, category)` — Generates an 11-step Leonardo contrast scale (50–950) plus an `input` step from a single hex color. Categories: `'brand' | 'accent' | 'base'`. Returns a `PaletteTokenMap` keyed by token dot-paths (e.g. `color.brand.50` through `color.brand.input`).
+- `generatePalettesFromInputs(inputs)` — Iterates `brandPrimary`, `accentPrimary`, `basePrimary` from an override's `inputs` object; calls `generateColorScale` for each present value. Returns a merged `PaletteTokenMap`.
+- `deriveBaseColorKey(brandHex)` — Derives a neutral base color key from a brand hex (brand hue/lightness at 5% saturation). Used by the Theme Editor to automatically compute `basePrimary` from `brandPrimary`.
+
+**Theming utilities:**
+
+- `applyThemeOverride(override, options?)` — High-level orchestrator: validates schema version → applies preset patch (if non-default base) → generates palettes from inputs → merges FI overrides → calls `Uniwind.updateCSSVariables` per mode. Returns a discriminated union: `{ applied: true, light, dark }` or `{ applied: false, reason }`. Options: `runtimeMap`, `runtimePlatform`. Bundles the default runtime map internally. Requires `uniwind` as a peer dependency.
+- `isSchemaVersionSupported(override)` — Schema version gate; returns `true` if the override's `schemaVersion` is in `SUPPORTED_OVERRIDE_SCHEMA_VERSIONS`.
+- `presetPatchToUniwindMaps(patch, runtimeMap, runtimePlatform)` — Walks a nested DTCG preset patch; buckets leaves by mode/platform into per-mode CSS variable maps.
+- `themeOverrideToUniwindMaps(override, runtimeMap)` — Processes a hybrid FI override: palette generation from `inputs`, font mapping, per-mode `overrides` merge, and token-reference alias resolution.
+
+A tree-shakeable subpath is also available:
+
+```typescript
+import {
+  applyThemeOverride,
+  presetPatchToUniwindMaps,
+  themeOverrideToUniwindMaps,
+} from '@cdx-ui/styles/theming';
 ```
 
-- `ThemeMetadata` — metadata stored under `$extensions.com.candescent.theme` (name, preset, schema version).
-- `ThemeOverrideMetadata` — metadata for FI overrides under `$extensions.com.candescent.themeOverride` (base preset, FI id/name, schema version).
+**Hooks:**
+
+- `useForgeFonts` — Loads all preset display fonts (nine families, three per preset) plus platform web fonts (Inter, IBM Plex Mono) via `expo-font`. Returns `{ loaded: boolean; error: Error | null }`. Call in your root layout and gate rendering on the returned `loaded` boolean. See [Getting Started](../../docs/getting-started.md) for usage.
+- `useCdxFonts` — **Deprecated** alias for `useForgeFonts`. Retained for backward compatibility during the CDX → Forge rename transition. See [Getting Started](../../docs/getting-started.md) for the migration path.
+
+### Runtime artifacts
+
+The build produces runtime JSON artifacts importable from the package:
+
+```typescript
+import runtimeMap from '@cdx-ui/styles/runtime/token-to-css-var.json';
+import prestigePatch from '@cdx-ui/styles/runtime/prestige-vs-default.json';
+import pulsePatch from '@cdx-ui/styles/runtime/pulse-vs-default.json';
+```
+
+- **`runtime/token-to-css-var.json`** — Flat map of ~667 token dot-paths to CSS custom property names (e.g. `"color.brand.500": "--color-brand-500"`). Used internally by `applyThemeOverride`; importable for custom apply logic.
+- **`runtime/prestige-vs-default.json`** / **`runtime/pulse-vs-default.json`** — Sparse preset patches (diff from build default to target preset). Used internally by `applyThemeOverride` when `basePreset` differs from the build default.
 
 ## Token pipeline
 
@@ -90,8 +174,11 @@ tokens/presets/
   poise.json        # Default build preset
   prestige.json
   pulse.json
+  .manifest.json    # SHA-256 checksums (written by fetch)
 ```
 
+`.manifest.json` records the SHA-256 hash of each preset JSON after fetch. It is used by CI and downstream tooling to detect whether preset files changed between fetches — if the checksums match, the build step can be skipped.
+
 Each file is assembled from four Figma collections: **Primitives** (shared), **FI Primitives** (Candescent mode — brand/accent/base colors), **Semantics ({Preset})** (Light + Dark modes), and **Platform** (Web/iOS/Android fonts). Alias references are preserved as DTCG `"{path.to.token}"` syntax.
 
 #### Figma MCP alternative
@@ -111,26 +198,25 @@ pnpm tokens:build
 | File            | Contents                                                                                            |
 | --------------- | --------------------------------------------------------------------------------------------------- |
 | `theme.css`     | `@theme static` (primitives + semantic defaults), `@variant light/dark`, `@variant ios/android/web` |
-| `utilities.css` | `@utility` blocks for composite typography (headings, body, labels)                                 |
+| `utilities.css` | `@utility` blocks for composite typography (headings, body-xl through body-xs, label-sm, label-xs)  |
 | `vanilla.css`   | Non-Tailwind fallback — `:root` variables + `@media (prefers-color-scheme: dark)` + classes         |
 
-**Generated artifacts** (from the same build pass):
+**Runtime artifacts** (generated by `tokens:build`):
 
-| Artifact            | Ships to          | Purpose                                                            |
-| ------------------- | ----------------- | ------------------------------------------------------------------ |
-| Runtime map         | Package (JSON)    | Theme object path → CSS custom property name for sparse flattening |
-| Preset patches      | Package (JSON)    | Sparse diff from build default → each non-default preset           |
-| Validation manifest | API deploy bundle | Allow-listed paths and types for server-side override validation   |
+| Artifact           | File                               | Purpose                                                            |
+| ------------------ | ---------------------------------- | ------------------------------------------------------------------ |
+| **Runtime map**    | `runtime/token-to-css-var.json`    | Theme object path → CSS custom property name for sparse flattening |
+| **Preset patches** | `runtime/{preset}-vs-default.json` | Sparse diff from build default → each non-default preset           |
 
 ### Validating font tokens
 
-Font registration names in `useCdxFonts` must exactly match the `--font-*` values emitted into `theme.css` — a mismatch causes silent fallback to platform default fonts with no error. The validation script catches this drift as a build/CI failure:
+Font registration names in `useForgeFonts` must exactly match the `--font-*` values emitted into `theme.css` — a mismatch causes silent fallback to platform default fonts with no error. The validation script catches this drift as a build/CI failure:
 
 ```bash
 pnpm fonts:validate
 ```
 
-It parses every `--font-*` declaration from `css/theme.css` (across `@theme static`, `@variant light/dark`, and `@variant ios/android/web`), reads the font map keys from `src/useCdxFonts.ts` source, and verifies a matching key exists for every non-system value. System fonts (`SF Pro`, `SF Mono`, `Roboto`, `Roboto Mono`) are read from `figma.config.json` and excluded — they are platform built-ins resolved natively by React Native. `var()` aliases are skipped because they resolve to other variables that are themselves validated.
+It parses every `--font-*` declaration from `css/theme.css` (across `@theme static`, `@variant light/dark`, and `@variant ios/android/web`), reads the font map keys from `src/useForgeFonts.ts` source, and verifies a matching key exists for every non-system value. System fonts (`SF Pro`, `SF Mono`, `Roboto`, `Roboto Mono`) are read from `figma.config.json` and excluded — they are platform built-ins resolved natively by React Native. `var()` aliases are skipped because they resolve to other variables that are themselves validated.
 
 On success the script prints `Font validation: N CSS values checked, N matched, 0 mismatches.` and exits 0. On failure it lists each mismatch with its variable name, value, and CSS section, then exits non-zero. The script is wired into `.github/workflows/ci.yml` as a pre-build step so font-token drift fast-fails before the heavier build/lint/test stages.
 
@@ -146,7 +232,7 @@ Light/dark mode switching is handled by Uniwind `@variant light/dark` blocks in
 
 ### FI overrides
 
-Financial institution white-labelling uses sparse JSON overrides — only the token paths that differ from the base preset. Overrides are validated server-side against a generated validation manifest and applied at runtime via the runtime map + `Uniwind.updateCSSVariables`. See [Theme Definition](../../docs/internal/token-architecture/02-theme-definition.md) for the full override flow.
+Financial institution white-labelling uses the hybrid override format — brand inputs (a single hex color expanded into a full palette at runtime) plus optional per-mode semantic token overrides. The Theme API is a pass-through store; validation is performed by the Theme Editor before save. Consuming apps apply overrides at runtime via `applyThemeOverride` (which handles palette generation, runtime map lookup, and `Uniwind.updateCSSVariables` calls internally). See [Override Structure](../../docs/internal/token-architecture/16-override-structure.md) for the payload format and responsibility contract, and [Theme Definition](../../docs/internal/token-architecture/02-theme-definition.md) for the full theme object schema.
 
 ## Package structure
 
@@ -156,15 +242,25 @@ styles/
 │   ├── theme.css              # Auto-generated — all token variable declarations
 │   ├── utilities.css          # Auto-generated — composite typography @utility blocks
 │   └── vanilla.css            # Auto-generated — non-Tailwind fallback
+├── runtime/
+│   ├── token-to-css-var.json       # Build-generated — token path → CSS variable name map
+│   ├── prestige-vs-default.json    # Build-generated — sparse preset patch (Poise → Prestige)
+│   └── pulse-vs-default.json       # Build-generated — sparse preset patch (Poise → Pulse)
 ├── scripts/
 │   ├── figma-fetch-variables.mjs   # Figma Variables REST API fetch
 │   ├── build-tokens.mjs            # Style Dictionary build + artifact generation
-│   └── validate-font-tokens.mjs    # CI check: --font-* values match useCdxFonts keys
+│   └── validate-font-tokens.mjs    # CI check: --font-* values match useForgeFonts keys
 ├── src/
-│   ├── index.ts               # TypeScript type exports (ThemeObject, ThemeOverride, etc.)
-│   └── useCdxFonts.ts         # Font loader hook (expo-font) — loads all preset display fonts
+│   ├── index.ts               # Public barrel: types, constants, palette, theming, hooks
+│   ├── palette.ts             # Color scale generation (Leonardo contrast algorithm)
+│   ├── theming.ts             # Sparse flatten helpers (presetPatchToUniwindMaps, themeOverrideToUniwindMaps)
+│   ├── applyThemeOverride.ts  # High-level orchestrator (schema gate → patch → palette → apply)
+│   ├── types.ts               # DTCG types, override contract, constants
+│   ├── useForgeFonts.ts       # Font loader hook (expo-font) — loads all preset display fonts
+│   └── useCdxFonts.ts         # Deprecated alias for useForgeFonts
 ├── tokens/
 │   └── presets/
+│       ├── .manifest.json     # SHA-256 checksums (written by fetch)
 │       ├── poise.json         # Poise theme object (build default)
 │       ├── prestige.json      # Prestige theme object
 │       └── pulse.json         # Pulse theme object
@@ -175,7 +271,7 @@ styles/
 └── tsconfig.build.json
 ```
 
-`css/` files are auto-generated — do not edit directly.
+`css/` and `runtime/` files are auto-generated — do not edit directly.
 
 ## Building
 

package/css/theme.css

@@ -343,6 +343,13 @@
   --container-sm: 24rem;
   --container-xl: 36rem;
   --container-xs: 20rem;
+  --border-width-default: 0.0625rem;
+  --border-width-focused: 0.125rem;
+  --border-width-selected: 0.125rem;
+  --border-radius-button: var(--radius-lg);
+  --border-radius-default: var(--radius-lg);
+  --border-radius-none: var(--radius-none);
+  --border-radius-round: var(--radius-full);
   --color-chart-categorical-1: var(--color-blue-600);
   --color-chart-categorical-2: var(--color-orange-600);
   --color-chart-categorical-3: var(--color-teal-600);
@@ -353,77 +360,109 @@
   --color-chart-simple-secondary: var(--color-brand-950);
   --color-content-action: var(--color-brand-700);
   --color-content-action-on-strong: var(--color-white);
-  --color-content-action-on-subtle: var(--color-brand-950);
+  --color-content-action-on-subtle: var(--color-brand-900);
   --color-content-brand: var(--color-brand-700);
   --color-content-danger: var(--color-red-700);
   --color-content-danger-on-strong: var(--color-white);
   --color-content-danger-on-subtle: var(--color-red-900);
-  --color-content-info: var(--color-sky-500);
+  --color-content-info: var(--color-sky-700);
   --color-content-info-on-strong: var(--color-white);
   --color-content-info-on-subtle: var(--color-sky-900);
   --color-content-link: var(--color-blue-600);
   --color-content-link-visited: var(--color-purple-800);
+  --color-content-neutral-on-strong: var(--color-white);
+  --color-content-neutral-on-subtle: var(--color-base-900);
   --color-content-primary: var(--color-base-950);
   --color-content-secondary: var(--color-base-800);
   --color-content-selected: var(--color-brand-700);
-  --color-content-success: var(--color-green-600);
+  --color-content-success: var(--color-green-700);
   --color-content-success-on-strong: var(--color-white);
   --color-content-success-on-subtle: var(--color-green-900);
   --color-content-tertiary: var(--color-base-600);
-  --color-content-warning: var(--color-amber-600);
+  --color-content-warning: var(--color-amber-700);
   --color-content-warning-on-strong: var(--color-black);
   --color-content-warning-on-subtle: var(--color-amber-900);
   --color-stroke-action: var(--color-brand-700);
   --color-stroke-danger: var(--color-red-700);
   --color-stroke-focus: var(--color-brand-700);
   --color-stroke-hover: var(--color-base-950);
-  --color-stroke-info: var(--color-sky-500);
+  --color-stroke-info: var(--color-sky-700);
   --color-stroke-primary: var(--color-base-500);
   --color-stroke-ring: var(--color-base-950);
   --color-stroke-secondary: var(--color-base-100);
-  --color-stroke-success: var(--color-green-500);
-  --color-stroke-warning: var(--color-amber-600);
+  --color-stroke-success: var(--color-green-700);
+  --color-stroke-warning: var(--color-amber-700);
   --color-surface-accent-core: var(--color-accent-input);
   --color-surface-accent-strong: var(--color-accent-700);
+  --color-surface-accent-subtle: var(--color-accent-200);
+  --color-surface-accent-tint: var(--color-accent-100);
   --color-surface-action-strong: var(--color-brand-700);
-  --color-surface-action-strong-active: var(--color-brand-800);
+  --color-surface-action-strong-active: var(--color-brand-900);
   --color-surface-action-strong-hover: var(--color-brand-800);
-  --color-surface-action-subtle: var(--color-brand-300);
-  --color-surface-action-subtle-active: var(--color-brand-400);
-  --color-surface-action-subtle-hover: var(--color-brand-400);
-  --color-surface-action-tint: var(--color-brand-100);
+  --color-surface-action-subtle: var(--color-brand-100);
+  --color-surface-action-subtle-active: var(--color-brand-300);
+  --color-surface-action-subtle-hover: var(--color-brand-200);
+  --color-surface-action-tint: var(--color-brand-50);
   --color-surface-action-tint-active: var(--color-brand-200);
-  --color-surface-action-tint-hover: var(--color-brand-200);
-  --color-surface-background: var(--color-base-100);
+  --color-surface-action-tint-hover: var(--color-brand-100);
+  --color-surface-backdrop: rgba(0, 0, 0, 0.5);
+  --color-surface-background: var(--color-base-50);
   --color-surface-brand-core: var(--color-brand-input);
   --color-surface-brand-strong: var(--color-brand-700);
+  --color-surface-brand-subtle: var(--color-brand-200);
+  --color-surface-brand-tint: var(--color-brand-100);
   --color-surface-danger-strong: var(--color-red-700);
-  --color-surface-danger-strong-active: var(--color-red-800);
+  --color-surface-danger-strong-active: var(--color-red-900);
   --color-surface-danger-strong-hover: var(--color-red-800);
-  --color-surface-danger-subtle: var(--color-red-200);
+  --color-surface-danger-subtle: var(--color-red-100);
   --color-surface-danger-subtle-active: var(--color-red-300);
-  --color-surface-danger-subtle-hover: var(--color-red-300);
-  --color-surface-danger-tint: var(--color-red-100);
+  --color-surface-danger-subtle-hover: var(--color-red-200);
+  --color-surface-danger-tint: var(--color-red-50);
   --color-surface-danger-tint-active: var(--color-red-200);
-  --color-surface-danger-tint-hover: var(--color-red-200);
-  --color-surface-info-strong: var(--color-sky-500);
-  --color-surface-info-subtle: var(--color-sky-200);
-  --color-surface-info-tint: var(--color-sky-100);
-  --color-surface-neutral-subtle: var(--color-base-200);
-  --color-surface-neutral-tint: var(--color-base-100);
+  --color-surface-danger-tint-hover: var(--color-red-100);
+  --color-surface-info-strong: var(--color-sky-700);
+  --color-surface-info-strong-active: var(--color-sky-900);
+  --color-surface-info-strong-hover: var(--color-sky-800);
+  --color-surface-info-subtle: var(--color-sky-100);
+  --color-surface-info-subtle-active: var(--color-sky-300);
+  --color-surface-info-subtle-hover: var(--color-sky-200);
+  --color-surface-info-tint: var(--color-sky-50);
+  --color-surface-info-tint-active: var(--color-sky-200);
+  --color-surface-info-tint-hover: var(--color-sky-100);
+  --color-surface-neutral-strong: var(--color-base-700);
+  --color-surface-neutral-strong-active: var(--color-base-900);
+  --color-surface-neutral-strong-hover: var(--color-base-800);
+  --color-surface-neutral-subtle: var(--color-base-100);
+  --color-surface-neutral-subtle-active: var(--color-base-300);
+  --color-surface-neutral-subtle-hover: var(--color-base-200);
+  --color-surface-neutral-tint: var(--color-base-50);
+  --color-surface-neutral-tint-active: var(--color-base-200);
+  --color-surface-neutral-tint-hover: var(--color-base-100);
   --color-surface-primary: var(--color-white);
-  --color-surface-primary-active: var(--color-base-100);
+  --color-surface-primary-active: var(--color-base-200);
   --color-surface-primary-hover: var(--color-base-100);
   --color-surface-secondary: var(--color-base-100);
-  --color-surface-secondary-active: var(--color-base-200);
+  --color-surface-secondary-active: var(--color-base-300);
   --color-surface-secondary-hover: var(--color-base-200);
   --color-surface-success-strong: var(--color-green-600);
-  --color-surface-success-subtle: var(--color-green-200);
-  --color-surface-success-tint: var(--color-green-100);
+  --color-surface-success-strong-active: var(--color-green-800);
+  --color-surface-success-strong-hover: var(--color-green-700);
+  --color-surface-success-subtle: var(--color-green-100);
+  --color-surface-success-subtle-active: var(--color-green-300);
+  --color-surface-success-subtle-hover: var(--color-green-200);
+  --color-surface-success-tint: var(--color-green-50);
+  --color-surface-success-tint-active: var(--color-green-200);
+  --color-surface-success-tint-hover: var(--color-green-100);
   --color-surface-tertiary: var(--color-brand-100);
   --color-surface-warning-strong: var(--color-amber-400);
-  --color-surface-warning-subtle: var(--color-amber-200);
-  --color-surface-warning-tint: var(--color-amber-100);
+  --color-surface-warning-strong-active: var(--color-amber-600);
+  --color-surface-warning-strong-hover: var(--color-amber-500);
+  --color-surface-warning-subtle: var(--color-amber-100);
+  --color-surface-warning-subtle-active: var(--color-amber-300);
+  --color-surface-warning-subtle-hover: var(--color-amber-200);
+  --color-surface-warning-tint: var(--color-amber-50);
+  --color-surface-warning-tint-active: var(--color-amber-200);
+  --color-surface-warning-tint-hover: var(--color-amber-100);
   --font-body: var(--font-sans);
   --font-body-bold: var(--font-sans-bold);
   --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -440,6 +479,10 @@
   --font-display-medium-italic: 'Crimson Pro Medium Italic';
   --font-display-semibold: 'Crimson Pro SemiBold';
   --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
+  --opacity-disabled: 0.5;
+  --opacity-hover: 0.08;
+  --opacity-hover-overlay: 0.2;
+  --opacity-selected: 0.12;
 }
 
 @layer theme {
@@ -462,77 +505,109 @@
       --color-chart-simple-secondary: var(--color-brand-950);
       --color-content-action: var(--color-brand-700);
       --color-content-action-on-strong: var(--color-white);
-      --color-content-action-on-subtle: var(--color-brand-950);
+      --color-content-action-on-subtle: var(--color-brand-900);
       --color-content-brand: var(--color-brand-700);
       --color-content-danger: var(--color-red-700);
       --color-content-danger-on-strong: var(--color-white);
       --color-content-danger-on-subtle: var(--color-red-900);
-      --color-content-info: var(--color-sky-500);
+      --color-content-info: var(--color-sky-700);
       --color-content-info-on-strong: var(--color-white);
       --color-content-info-on-subtle: var(--color-sky-900);
       --color-content-link: var(--color-blue-600);
       --color-content-link-visited: var(--color-purple-800);
+      --color-content-neutral-on-strong: var(--color-white);
+      --color-content-neutral-on-subtle: var(--color-base-900);
       --color-content-primary: var(--color-base-950);
       --color-content-secondary: var(--color-base-800);
       --color-content-selected: var(--color-brand-700);
-      --color-content-success: var(--color-green-600);
+      --color-content-success: var(--color-green-700);
       --color-content-success-on-strong: var(--color-white);
       --color-content-success-on-subtle: var(--color-green-900);
       --color-content-tertiary: var(--color-base-600);
-      --color-content-warning: var(--color-amber-600);
+      --color-content-warning: var(--color-amber-700);
       --color-content-warning-on-strong: var(--color-black);
       --color-content-warning-on-subtle: var(--color-amber-900);
       --color-stroke-action: var(--color-brand-700);
       --color-stroke-danger: var(--color-red-700);
       --color-stroke-focus: var(--color-brand-700);
       --color-stroke-hover: var(--color-base-950);
-      --color-stroke-info: var(--color-sky-500);
+      --color-stroke-info: var(--color-sky-700);
       --color-stroke-primary: var(--color-base-500);
       --color-stroke-ring: var(--color-base-950);
       --color-stroke-secondary: var(--color-base-100);
-      --color-stroke-success: var(--color-green-500);
-      --color-stroke-warning: var(--color-amber-600);
+      --color-stroke-success: var(--color-green-700);
+      --color-stroke-warning: var(--color-amber-700);
       --color-surface-accent-core: var(--color-accent-input);
       --color-surface-accent-strong: var(--color-accent-700);
+      --color-surface-accent-subtle: var(--color-accent-200);
+      --color-surface-accent-tint: var(--color-accent-100);
       --color-surface-action-strong: var(--color-brand-700);
-      --color-surface-action-strong-active: var(--color-brand-800);
+      --color-surface-action-strong-active: var(--color-brand-900);
       --color-surface-action-strong-hover: var(--color-brand-800);
-      --color-surface-action-subtle: var(--color-brand-300);
-      --color-surface-action-subtle-active: var(--color-brand-400);
-      --color-surface-action-subtle-hover: var(--color-brand-400);
-      --color-surface-action-tint: var(--color-brand-100);
+      --color-surface-action-subtle: var(--color-brand-100);
+      --color-surface-action-subtle-active: var(--color-brand-300);
+      --color-surface-action-subtle-hover: var(--color-brand-200);
+      --color-surface-action-tint: var(--color-brand-50);
       --color-surface-action-tint-active: var(--color-brand-200);
-      --color-surface-action-tint-hover: var(--color-brand-200);
-      --color-surface-background: var(--color-base-100);
+      --color-surface-action-tint-hover: var(--color-brand-100);
+      --color-surface-backdrop: rgba(0, 0, 0, 0.5);
+      --color-surface-background: var(--color-base-50);
       --color-surface-brand-core: var(--color-brand-input);
       --color-surface-brand-strong: var(--color-brand-700);
+      --color-surface-brand-subtle: var(--color-brand-200);
+      --color-surface-brand-tint: var(--color-brand-100);
       --color-surface-danger-strong: var(--color-red-700);
-      --color-surface-danger-strong-active: var(--color-red-800);
+      --color-surface-danger-strong-active: var(--color-red-900);
       --color-surface-danger-strong-hover: var(--color-red-800);
-      --color-surface-danger-subtle: var(--color-red-200);
+      --color-surface-danger-subtle: var(--color-red-100);
       --color-surface-danger-subtle-active: var(--color-red-300);
-      --color-surface-danger-subtle-hover: var(--color-red-300);
-      --color-surface-danger-tint: var(--color-red-100);
+      --color-surface-danger-subtle-hover: var(--color-red-200);
+      --color-surface-danger-tint: var(--color-red-50);
       --color-surface-danger-tint-active: var(--color-red-200);
-      --color-surface-danger-tint-hover: var(--color-red-200);
-      --color-surface-info-strong: var(--color-sky-500);
-      --color-surface-info-subtle: var(--color-sky-200);
-      --color-surface-info-tint: var(--color-sky-100);
-      --color-surface-neutral-subtle: var(--color-base-200);
-      --color-surface-neutral-tint: var(--color-base-100);
+      --color-surface-danger-tint-hover: var(--color-red-100);
+      --color-surface-info-strong: var(--color-sky-700);
+      --color-surface-info-strong-active: var(--color-sky-900);
+      --color-surface-info-strong-hover: var(--color-sky-800);
+      --color-surface-info-subtle: var(--color-sky-100);
+      --color-surface-info-subtle-active: var(--color-sky-300);
+      --color-surface-info-subtle-hover: var(--color-sky-200);
+      --color-surface-info-tint: var(--color-sky-50);
+      --color-surface-info-tint-active: var(--color-sky-200);
+      --color-surface-info-tint-hover: var(--color-sky-100);
+      --color-surface-neutral-strong: var(--color-base-700);
+      --color-surface-neutral-strong-active: var(--color-base-900);
+      --color-surface-neutral-strong-hover: var(--color-base-800);
+      --color-surface-neutral-subtle: var(--color-base-100);
+      --color-surface-neutral-subtle-active: var(--color-base-300);
+      --color-surface-neutral-subtle-hover: var(--color-base-200);
+      --color-surface-neutral-tint: var(--color-base-50);
+      --color-surface-neutral-tint-active: var(--color-base-200);
+      --color-surface-neutral-tint-hover: var(--color-base-100);
       --color-surface-primary: var(--color-white);
-      --color-surface-primary-active: var(--color-base-100);
+      --color-surface-primary-active: var(--color-base-200);
       --color-surface-primary-hover: var(--color-base-100);
       --color-surface-secondary: var(--color-base-100);
-      --color-surface-secondary-active: var(--color-base-200);
+      --color-surface-secondary-active: var(--color-base-300);
       --color-surface-secondary-hover: var(--color-base-200);
       --color-surface-success-strong: var(--color-green-600);
-      --color-surface-success-subtle: var(--color-green-200);
-      --color-surface-success-tint: var(--color-green-100);
+      --color-surface-success-strong-active: var(--color-green-800);
+      --color-surface-success-strong-hover: var(--color-green-700);
+      --color-surface-success-subtle: var(--color-green-100);
+      --color-surface-success-subtle-active: var(--color-green-300);
+      --color-surface-success-subtle-hover: var(--color-green-200);
+      --color-surface-success-tint: var(--color-green-50);
+      --color-surface-success-tint-active: var(--color-green-200);
+      --color-surface-success-tint-hover: var(--color-green-100);
       --color-surface-tertiary: var(--color-brand-100);
       --color-surface-warning-strong: var(--color-amber-400);
-      --color-surface-warning-subtle: var(--color-amber-200);
-      --color-surface-warning-tint: var(--color-amber-100);
+      --color-surface-warning-strong-active: var(--color-amber-600);
+      --color-surface-warning-strong-hover: var(--color-amber-500);
+      --color-surface-warning-subtle: var(--color-amber-100);
+      --color-surface-warning-subtle-active: var(--color-amber-300);
+      --color-surface-warning-subtle-hover: var(--color-amber-200);
+      --color-surface-warning-tint: var(--color-amber-50);
+      --color-surface-warning-tint-active: var(--color-amber-200);
+      --color-surface-warning-tint-hover: var(--color-amber-100);
       --font-body: var(--font-sans);
       --font-body-bold: var(--font-sans-bold);
       --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -582,6 +657,8 @@
       --color-content-info-on-subtle: var(--color-sky-900);
       --color-content-link: var(--color-white);
       --color-content-link-visited: var(--color-purple-200);
+      --color-content-neutral-on-strong: var(--color-base-900);
+      --color-content-neutral-on-subtle: var(--color-base-100);
       --color-content-primary: var(--color-white);
       --color-content-secondary: var(--color-base-100);
       --color-content-selected: var(--color-brand-100);
@@ -603,46 +680,76 @@
       --color-stroke-success: var(--color-green-200);
       --color-stroke-warning: var(--color-amber-300);
       --color-surface-accent-core: var(--color-accent-input);
-      --color-surface-accent-strong: var(--color-accent-400);
+      --color-surface-accent-strong: var(--color-accent-300);
+      --color-surface-accent-subtle: var(--color-accent-900);
+      --color-surface-accent-tint: var(--color-accent-950);
       --color-surface-action-strong: var(--color-brand-300);
-      --color-surface-action-strong-active: var(--color-brand-200);
+      --color-surface-action-strong-active: var(--color-brand-100);
       --color-surface-action-strong-hover: var(--color-brand-200);
-      --color-surface-action-subtle: var(--color-brand-700);
-      --color-surface-action-subtle-active: var(--color-brand-800);
+      --color-surface-action-subtle: var(--color-brand-900);
+      --color-surface-action-subtle-active: var(--color-brand-700);
       --color-surface-action-subtle-hover: var(--color-brand-800);
-      --color-surface-action-tint: var(--color-brand-900);
+      --color-surface-action-tint: var(--color-brand-950);
       --color-surface-action-tint-active: var(--color-brand-800);
-      --color-surface-action-tint-hover: var(--color-brand-800);
-      --color-surface-background: var(--color-base-900);
+      --color-surface-action-tint-hover: var(--color-brand-900);
+      --color-surface-backdrop: rgba(0, 0, 0, 0.5);
+      --color-surface-background: var(--color-base-950);
       --color-surface-brand-core: var(--color-brand-input);
-      --color-surface-brand-strong: var(--color-brand-400);
+      --color-surface-brand-strong: var(--color-brand-300);
+      --color-surface-brand-subtle: var(--color-brand-900);
+      --color-surface-brand-tint: var(--color-brand-950);
       --color-surface-danger-strong: var(--color-red-200);
-      --color-surface-danger-strong-active: var(--color-red-100);
+      --color-surface-danger-strong-active: var(--color-red-50);
       --color-surface-danger-strong-hover: var(--color-red-100);
-      --color-surface-danger-subtle: var(--color-red-700);
-      --color-surface-danger-subtle-active: var(--color-red-800);
+      --color-surface-danger-subtle: var(--color-red-900);
+      --color-surface-danger-subtle-active: var(--color-red-700);
       --color-surface-danger-subtle-hover: var(--color-red-800);
-      --color-surface-danger-tint: var(--color-red-900);
+      --color-surface-danger-tint: var(--color-red-950);
       --color-surface-danger-tint-active: var(--color-red-800);
-      --color-surface-danger-tint-hover: var(--color-red-800);
+      --color-surface-danger-tint-hover: var(--color-red-900);
       --color-surface-info-strong: var(--color-sky-300);
-      --color-surface-info-subtle: var(--color-sky-700);
-      --color-surface-info-tint: var(--color-sky-900);
-      --color-surface-neutral-subtle: var(--color-base-800);
-      --color-surface-neutral-tint: var(--color-base-900);
+      --color-surface-info-strong-active: var(--color-sky-100);
+      --color-surface-info-strong-hover: var(--color-sky-200);
+      --color-surface-info-subtle: var(--color-sky-900);
+      --color-surface-info-subtle-active: var(--color-sky-700);
+      --color-surface-info-subtle-hover: var(--color-sky-800);
+      --color-surface-info-tint: var(--color-sky-950);
+      --color-surface-info-tint-active: var(--color-sky-800);
+      --color-surface-info-tint-hover: var(--color-sky-900);
+      --color-surface-neutral-strong: var(--color-base-300);
+      --color-surface-neutral-strong-active: var(--color-base-100);
+      --color-surface-neutral-strong-hover: var(--color-base-200);
+      --color-surface-neutral-subtle: var(--color-base-900);
+      --color-surface-neutral-subtle-active: var(--color-base-700);
+      --color-surface-neutral-subtle-hover: var(--color-base-800);
+      --color-surface-neutral-tint: var(--color-base-950);
+      --color-surface-neutral-tint-active: var(--color-base-800);
+      --color-surface-neutral-tint-hover: var(--color-base-900);
       --color-surface-primary: var(--color-base-950);
-      --color-surface-primary-active: var(--color-base-900);
+      --color-surface-primary-active: var(--color-base-800);
       --color-surface-primary-hover: var(--color-base-900);
       --color-surface-secondary: var(--color-base-900);
-      --color-surface-secondary-active: var(--color-base-800);
+      --color-surface-secondary-active: var(--color-base-700);
       --color-surface-secondary-hover: var(--color-base-800);
       --color-surface-success-strong: var(--color-green-300);
-      --color-surface-success-subtle: var(--color-green-700);
-      --color-surface-success-tint: var(--color-green-900);
+      --color-surface-success-strong-active: var(--color-green-100);
+      --color-surface-success-strong-hover: var(--color-green-200);
+      --color-surface-success-subtle: var(--color-green-900);
+      --color-surface-success-subtle-active: var(--color-green-700);
+      --color-surface-success-subtle-hover: var(--color-green-800);
+      --color-surface-success-tint: var(--color-green-950);
+      --color-surface-success-tint-active: var(--color-green-800);
+      --color-surface-success-tint-hover: var(--color-green-900);
       --color-surface-tertiary: var(--color-brand-900);
       --color-surface-warning-strong: var(--color-amber-300);
-      --color-surface-warning-subtle: var(--color-amber-700);
-      --color-surface-warning-tint: var(--color-amber-900);
+      --color-surface-warning-strong-active: var(--color-amber-100);
+      --color-surface-warning-strong-hover: var(--color-amber-200);
+      --color-surface-warning-subtle: var(--color-amber-900);
+      --color-surface-warning-subtle-active: var(--color-amber-700);
+      --color-surface-warning-subtle-hover: var(--color-amber-800);
+      --color-surface-warning-tint: var(--color-amber-950);
+      --color-surface-warning-tint-active: var(--color-amber-800);
+      --color-surface-warning-tint-hover: var(--color-amber-900);
       --font-body: var(--font-sans);
       --font-body-bold: var(--font-sans-bold);
       --font-body-bold-italic: var(--font-sans-bold-italic);