@cdx-ui/styles 0.0.1-beta.6 → 0.0.1-beta.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/README.md +50 -19
  2. package/css/theme.css +188 -81
  3. package/css/vanilla.css +116 -52
  4. package/lib/commonjs/applyThemeOverride.js +154 -0
  5. package/lib/commonjs/applyThemeOverride.js.map +1 -0
  6. package/lib/commonjs/index.js +82 -0
  7. package/lib/commonjs/index.js.map +1 -1
  8. package/lib/commonjs/palette.js +262 -0
  9. package/lib/commonjs/palette.js.map +1 -0
  10. package/lib/commonjs/theming.js +255 -0
  11. package/lib/commonjs/theming.js.map +1 -0
  12. package/lib/commonjs/types.js +75 -0
  13. package/lib/commonjs/types.js.map +1 -0
  14. package/lib/commonjs/useCdxFonts.js +7 -231
  15. package/lib/commonjs/useCdxFonts.js.map +1 -1
  16. package/lib/commonjs/useForgeFonts.js +237 -0
  17. package/lib/commonjs/useForgeFonts.js.map +1 -0
  18. package/lib/module/applyThemeOverride.js +149 -0
  19. package/lib/module/applyThemeOverride.js.map +1 -0
  20. package/lib/module/index.js +11 -20
  21. package/lib/module/index.js.map +1 -1
  22. package/lib/module/palette.js +257 -0
  23. package/lib/module/palette.js.map +1 -0
  24. package/lib/module/theming.js +239 -0
  25. package/lib/module/theming.js.map +1 -0
  26. package/lib/module/types.js +71 -0
  27. package/lib/module/types.js.map +1 -0
  28. package/lib/module/useCdxFonts.js +2 -220
  29. package/lib/module/useCdxFonts.js.map +1 -1
  30. package/lib/module/useForgeFonts.js +223 -0
  31. package/lib/module/useForgeFonts.js.map +1 -0
  32. package/lib/runtime/prestige-vs-default.json +1 -0
  33. package/lib/runtime/pulse-vs-default.json +1 -0
  34. package/lib/runtime/token-to-css-var.json +666 -0
  35. package/lib/typescript/applyThemeOverride.d.ts +26 -0
  36. package/lib/typescript/applyThemeOverride.d.ts.map +1 -0
  37. package/lib/typescript/index.d.ts +8 -57
  38. package/lib/typescript/index.d.ts.map +1 -1
  39. package/lib/typescript/palette.d.ts +60 -0
  40. package/lib/typescript/palette.d.ts.map +1 -0
  41. package/lib/typescript/theming.d.ts +40 -0
  42. package/lib/typescript/theming.d.ts.map +1 -0
  43. package/lib/typescript/types.d.ts +90 -0
  44. package/lib/typescript/types.d.ts.map +1 -0
  45. package/lib/typescript/useCdxFonts.d.ts +2 -11
  46. package/lib/typescript/useCdxFonts.d.ts.map +1 -1
  47. package/lib/typescript/useForgeFonts.d.ts +12 -0
  48. package/lib/typescript/useForgeFonts.d.ts.map +1 -0
  49. package/package.json +27 -8
  50. package/runtime/prestige-vs-default.json +1 -0
  51. package/runtime/pulse-vs-default.json +1 -0
  52. package/runtime/token-to-css-var.json +666 -0
  53. package/src/__tests__/applyThemeOverride.test.ts +552 -0
  54. package/src/__tests__/generateColorScale.test.ts +296 -0
  55. package/src/__tests__/theming.test.ts +647 -0
  56. package/src/applyThemeOverride.ts +139 -0
  57. package/src/index.ts +36 -60
  58. package/src/palette.ts +307 -0
  59. package/src/theming.ts +268 -0
  60. package/src/types.ts +112 -0
  61. package/src/useCdxFonts.ts +2 -230
  62. package/src/useForgeFonts.ts +230 -0
  63. package/tokens/presets/.manifest.json +3 -3
  64. package/tokens/presets/poise.json +293 -37
  65. package/tokens/presets/prestige.json +1 -1
  66. package/tokens/presets/pulse.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @cdx-ui/styles
2
2
 
3
- 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.
3
+ 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.
4
4
 
5
5
  ## Installation
6
6
 
@@ -22,7 +22,7 @@ Import `theme.css` and `utilities.css` in your global stylesheet, after Tailwind
22
22
  @import '@cdx-ui/styles/utilities.css';
23
23
  ```
24
24
 
25
- `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`).
25
+ `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`).
26
26
 
27
27
  Components then use standard Tailwind utilities backed by theme variables:
28
28
 
@@ -51,9 +51,9 @@ import prestige from '@cdx-ui/styles/presets/prestige.json';
51
51
  import pulse from '@cdx-ui/styles/presets/pulse.json';
52
52
  ```
53
53
 
54
- ### TypeScript types
54
+ ### TypeScript exports
55
55
 
56
- The package exports DTCG-compatible type definitions for theme objects, overrides, and related structures:
56
+ The package exports DTCG-compatible type definitions, runtime constants for the override contract, and the `useForgeFonts` hook:
57
57
 
58
58
  ```typescript
59
59
  import type {
@@ -63,13 +63,40 @@ import type {
63
63
  ThemeOverrideMetadata,
64
64
  TokenGroup,
65
65
  TokenValue,
66
+ Preset,
66
67
  Mode,
67
68
  Platform,
68
69
  } from '@cdx-ui/styles';
70
+
71
+ import {
72
+ useForgeFonts,
73
+ OVERRIDE_SCHEMA_VERSION,
74
+ SUPPORTED_OVERRIDE_SCHEMA_VERSIONS,
75
+ INPUT_TOKEN_MAP,
76
+ presetFonts,
77
+ } from '@cdx-ui/styles';
69
78
  ```
70
79
 
71
- - `ThemeMetadata` — metadata stored under `$extensions.com.candescent.theme` (name, preset, schema version).
72
- - `ThemeOverrideMetadata` — metadata for FI overrides under `$extensions.com.candescent.themeOverride` (base preset, FI id/name, schema version).
80
+ **Types:**
81
+
82
+ - `ThemeObject` — Complete Forge UI theme object (DTCG-compatible), including `modes`, `platform`, and `$extensions`.
83
+ - `ThemeOverride` — Hybrid FI override structure with `inputs` (brand values for palette generation) and optional per-mode `overrides`.
84
+ - `ThemeMetadata` / `ThemeOverrideMetadata` — Metadata stored under `$extensions.com.forge.ui.theme` and `$extensions.com.forge.ui.themeOverride`.
85
+ - `Preset` — Union type: `'poise' | 'prestige' | 'pulse'`.
86
+ - `TokenValue` / `TokenGroup` — DTCG leaf node and recursive group types.
87
+ - `Mode` / `Platform` — `'light' | 'dark'` and `'web' | 'ios' | 'android'`.
88
+
89
+ **Constants:**
90
+
91
+ - `OVERRIDE_SCHEMA_VERSION` — Current override contract version (`'1.0.0'`). Consuming apps gate FI override compatibility on this value.
92
+ - `SUPPORTED_OVERRIDE_SCHEMA_VERSIONS` — Array of schema versions accepted by this package version (includes current and optionally one prior version during transition windows).
93
+ - `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.
94
+ - `presetFonts` — Allowed display font families per preset, used by the Theme Editor for font selection and by consuming apps for validation.
95
+
96
+ **Hooks:**
97
+
98
+ - `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.
99
+ - `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.
73
100
 
74
101
  ## Token pipeline
75
102
 
@@ -90,8 +117,11 @@ tokens/presets/
90
117
  poise.json # Default build preset
91
118
  prestige.json
92
119
  pulse.json
120
+ .manifest.json # SHA-256 checksums (written by fetch)
93
121
  ```
94
122
 
123
+ `.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.
124
+
95
125
  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.
96
126
 
97
127
  #### Figma MCP alternative
@@ -111,26 +141,25 @@ pnpm tokens:build
111
141
  | File | Contents |
112
142
  | --------------- | --------------------------------------------------------------------------------------------------- |
113
143
  | `theme.css` | `@theme static` (primitives + semantic defaults), `@variant light/dark`, `@variant ios/android/web` |
114
- | `utilities.css` | `@utility` blocks for composite typography (headings, body, labels) |
144
+ | `utilities.css` | `@utility` blocks for composite typography (headings, body-xl through body-xs, label-sm, label-xs) |
115
145
  | `vanilla.css` | Non-Tailwind fallback — `:root` variables + `@media (prefers-color-scheme: dark)` + classes |
116
146
 
117
- **Generated artifacts** (from the same build pass):
147
+ **Planned artifacts** (not yet implemented — tracked for future runtime theming):
118
148
 
119
- | Artifact | Ships to | Purpose |
120
- | ------------------- | ----------------- | ------------------------------------------------------------------ |
121
- | Runtime map | Package (JSON) | Theme object path → CSS custom property name for sparse flattening |
122
- | Preset patches | Package (JSON) | Sparse diff from build default → each non-default preset |
123
- | Validation manifest | API deploy bundle | Allow-listed paths and types for server-side override validation |
149
+ | Artifact | Purpose | Status |
150
+ | -------------- | ------------------------------------------------------------------ | ------- |
151
+ | Runtime map | Theme object path → CSS custom property name for sparse flattening | Planned |
152
+ | Preset patches | Sparse diff from build default → each non-default preset | Planned |
124
153
 
125
154
  ### Validating font tokens
126
155
 
127
- 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:
156
+ 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:
128
157
 
129
158
  ```bash
130
159
  pnpm fonts:validate
131
160
  ```
132
161
 
133
- 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.
162
+ 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.
134
163
 
135
164
  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.
136
165
 
@@ -146,7 +175,7 @@ Light/dark mode switching is handled by Uniwind `@variant light/dark` blocks in
146
175
 
147
176
  ### FI overrides
148
177
 
149
- 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.
178
+ 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 palette generation + the runtime map + `Uniwind.updateCSSVariables`. 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.
150
179
 
151
180
  ## Package structure
152
181
 
@@ -159,12 +188,14 @@ styles/
159
188
  ├── scripts/
160
189
  │ ├── figma-fetch-variables.mjs # Figma Variables REST API fetch
161
190
  │ ├── build-tokens.mjs # Style Dictionary build + artifact generation
162
- │ └── validate-font-tokens.mjs # CI check: --font-* values match useCdxFonts keys
191
+ │ └── validate-font-tokens.mjs # CI check: --font-* values match useForgeFonts keys
163
192
  ├── src/
164
- │ ├── index.ts # TypeScript type exports (ThemeObject, ThemeOverride, etc.)
165
- │ └── useCdxFonts.ts # Font loader hook (expo-font) — loads all preset display fonts
193
+ │ ├── index.ts # Types, override constants, hook re-exports
194
+ │ ├── useForgeFonts.ts # Font loader hook (expo-font) — loads all preset display fonts
195
+ │ └── useCdxFonts.ts # Deprecated alias for useForgeFonts
166
196
  ├── tokens/
167
197
  │ └── presets/
198
+ │ ├── .manifest.json # SHA-256 checksums (written by fetch)
168
199
  │ ├── poise.json # Poise theme object (build default)
169
200
  │ ├── prestige.json # Prestige theme object
170
201
  │ └── pulse.json # Pulse theme object
package/css/theme.css CHANGED
@@ -343,6 +343,13 @@
343
343
  --container-sm: 24rem;
344
344
  --container-xl: 36rem;
345
345
  --container-xs: 20rem;
346
+ --border-width-default: 0.0625rem;
347
+ --border-width-focused: 0.125rem;
348
+ --border-width-selected: 0.125rem;
349
+ --border-radius-button: var(--radius-lg);
350
+ --border-radius-default: var(--radius-lg);
351
+ --border-radius-none: var(--radius-none);
352
+ --border-radius-round: var(--radius-full);
346
353
  --color-chart-categorical-1: var(--color-blue-600);
347
354
  --color-chart-categorical-2: var(--color-orange-600);
348
355
  --color-chart-categorical-3: var(--color-teal-600);
@@ -353,77 +360,109 @@
353
360
  --color-chart-simple-secondary: var(--color-brand-950);
354
361
  --color-content-action: var(--color-brand-700);
355
362
  --color-content-action-on-strong: var(--color-white);
356
- --color-content-action-on-subtle: var(--color-brand-950);
363
+ --color-content-action-on-subtle: var(--color-brand-900);
357
364
  --color-content-brand: var(--color-brand-700);
358
365
  --color-content-danger: var(--color-red-700);
359
366
  --color-content-danger-on-strong: var(--color-white);
360
367
  --color-content-danger-on-subtle: var(--color-red-900);
361
- --color-content-info: var(--color-sky-500);
368
+ --color-content-info: var(--color-sky-700);
362
369
  --color-content-info-on-strong: var(--color-white);
363
370
  --color-content-info-on-subtle: var(--color-sky-900);
364
371
  --color-content-link: var(--color-blue-600);
365
372
  --color-content-link-visited: var(--color-purple-800);
373
+ --color-content-neutral-on-strong: var(--color-white);
374
+ --color-content-neutral-on-subtle: var(--color-base-900);
366
375
  --color-content-primary: var(--color-base-950);
367
376
  --color-content-secondary: var(--color-base-800);
368
377
  --color-content-selected: var(--color-brand-700);
369
- --color-content-success: var(--color-green-600);
378
+ --color-content-success: var(--color-green-700);
370
379
  --color-content-success-on-strong: var(--color-white);
371
380
  --color-content-success-on-subtle: var(--color-green-900);
372
381
  --color-content-tertiary: var(--color-base-600);
373
- --color-content-warning: var(--color-amber-600);
382
+ --color-content-warning: var(--color-amber-700);
374
383
  --color-content-warning-on-strong: var(--color-black);
375
384
  --color-content-warning-on-subtle: var(--color-amber-900);
376
385
  --color-stroke-action: var(--color-brand-700);
377
386
  --color-stroke-danger: var(--color-red-700);
378
387
  --color-stroke-focus: var(--color-brand-700);
379
388
  --color-stroke-hover: var(--color-base-950);
380
- --color-stroke-info: var(--color-sky-500);
389
+ --color-stroke-info: var(--color-sky-700);
381
390
  --color-stroke-primary: var(--color-base-500);
382
391
  --color-stroke-ring: var(--color-base-950);
383
392
  --color-stroke-secondary: var(--color-base-100);
384
- --color-stroke-success: var(--color-green-500);
385
- --color-stroke-warning: var(--color-amber-600);
393
+ --color-stroke-success: var(--color-green-700);
394
+ --color-stroke-warning: var(--color-amber-700);
386
395
  --color-surface-accent-core: var(--color-accent-input);
387
396
  --color-surface-accent-strong: var(--color-accent-700);
397
+ --color-surface-accent-subtle: var(--color-accent-200);
398
+ --color-surface-accent-tint: var(--color-accent-100);
388
399
  --color-surface-action-strong: var(--color-brand-700);
389
- --color-surface-action-strong-active: var(--color-brand-800);
400
+ --color-surface-action-strong-active: var(--color-brand-900);
390
401
  --color-surface-action-strong-hover: var(--color-brand-800);
391
- --color-surface-action-subtle: var(--color-brand-300);
392
- --color-surface-action-subtle-active: var(--color-brand-400);
393
- --color-surface-action-subtle-hover: var(--color-brand-400);
394
- --color-surface-action-tint: var(--color-brand-100);
402
+ --color-surface-action-subtle: var(--color-brand-100);
403
+ --color-surface-action-subtle-active: var(--color-brand-300);
404
+ --color-surface-action-subtle-hover: var(--color-brand-200);
405
+ --color-surface-action-tint: var(--color-brand-50);
395
406
  --color-surface-action-tint-active: var(--color-brand-200);
396
- --color-surface-action-tint-hover: var(--color-brand-200);
397
- --color-surface-background: var(--color-base-100);
407
+ --color-surface-action-tint-hover: var(--color-brand-100);
408
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
409
+ --color-surface-background: var(--color-base-50);
398
410
  --color-surface-brand-core: var(--color-brand-input);
399
411
  --color-surface-brand-strong: var(--color-brand-700);
412
+ --color-surface-brand-subtle: var(--color-brand-200);
413
+ --color-surface-brand-tint: var(--color-brand-100);
400
414
  --color-surface-danger-strong: var(--color-red-700);
401
- --color-surface-danger-strong-active: var(--color-red-800);
415
+ --color-surface-danger-strong-active: var(--color-red-900);
402
416
  --color-surface-danger-strong-hover: var(--color-red-800);
403
- --color-surface-danger-subtle: var(--color-red-200);
417
+ --color-surface-danger-subtle: var(--color-red-100);
404
418
  --color-surface-danger-subtle-active: var(--color-red-300);
405
- --color-surface-danger-subtle-hover: var(--color-red-300);
406
- --color-surface-danger-tint: var(--color-red-100);
419
+ --color-surface-danger-subtle-hover: var(--color-red-200);
420
+ --color-surface-danger-tint: var(--color-red-50);
407
421
  --color-surface-danger-tint-active: var(--color-red-200);
408
- --color-surface-danger-tint-hover: var(--color-red-200);
422
+ --color-surface-danger-tint-hover: var(--color-red-100);
409
423
  --color-surface-info-strong: var(--color-sky-500);
410
- --color-surface-info-subtle: var(--color-sky-200);
411
- --color-surface-info-tint: var(--color-sky-100);
412
- --color-surface-neutral-subtle: var(--color-base-200);
413
- --color-surface-neutral-tint: var(--color-base-100);
424
+ --color-surface-info-strong-active: var(--color-sky-700);
425
+ --color-surface-info-strong-hover: var(--color-sky-600);
426
+ --color-surface-info-subtle: var(--color-sky-100);
427
+ --color-surface-info-subtle-active: var(--color-sky-300);
428
+ --color-surface-info-subtle-hover: var(--color-sky-200);
429
+ --color-surface-info-tint: var(--color-sky-50);
430
+ --color-surface-info-tint-active: var(--color-sky-200);
431
+ --color-surface-info-tint-hover: var(--color-sky-100);
432
+ --color-surface-neutral-strong: var(--color-base-700);
433
+ --color-surface-neutral-strong-active: var(--color-base-800);
434
+ --color-surface-neutral-strong-hover: var(--color-base-800);
435
+ --color-surface-neutral-subtle: var(--color-base-100);
436
+ --color-surface-neutral-subtle-active: var(--color-base-300);
437
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
438
+ --color-surface-neutral-tint: var(--color-base-50);
439
+ --color-surface-neutral-tint-active: var(--color-base-200);
440
+ --color-surface-neutral-tint-hover: var(--color-base-100);
414
441
  --color-surface-primary: var(--color-white);
415
- --color-surface-primary-active: var(--color-base-100);
442
+ --color-surface-primary-active: var(--color-base-200);
416
443
  --color-surface-primary-hover: var(--color-base-100);
417
444
  --color-surface-secondary: var(--color-base-100);
418
- --color-surface-secondary-active: var(--color-base-200);
445
+ --color-surface-secondary-active: var(--color-base-300);
419
446
  --color-surface-secondary-hover: var(--color-base-200);
420
447
  --color-surface-success-strong: var(--color-green-600);
421
- --color-surface-success-subtle: var(--color-green-200);
422
- --color-surface-success-tint: var(--color-green-100);
448
+ --color-surface-success-strong-active: var(--color-green-800);
449
+ --color-surface-success-strong-hover: var(--color-green-700);
450
+ --color-surface-success-subtle: var(--color-green-100);
451
+ --color-surface-success-subtle-active: var(--color-green-300);
452
+ --color-surface-success-subtle-hover: var(--color-green-200);
453
+ --color-surface-success-tint: var(--color-green-50);
454
+ --color-surface-success-tint-active: var(--color-green-200);
455
+ --color-surface-success-tint-hover: var(--color-green-100);
423
456
  --color-surface-tertiary: var(--color-brand-100);
424
457
  --color-surface-warning-strong: var(--color-amber-400);
425
- --color-surface-warning-subtle: var(--color-amber-200);
426
- --color-surface-warning-tint: var(--color-amber-100);
458
+ --color-surface-warning-strong-active: var(--color-amber-600);
459
+ --color-surface-warning-strong-hover: var(--color-amber-500);
460
+ --color-surface-warning-subtle: var(--color-amber-100);
461
+ --color-surface-warning-subtle-active: var(--color-amber-300);
462
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
463
+ --color-surface-warning-tint: var(--color-amber-50);
464
+ --color-surface-warning-tint-active: var(--color-amber-200);
465
+ --color-surface-warning-tint-hover: var(--color-amber-100);
427
466
  --font-body: var(--font-sans);
428
467
  --font-body-bold: var(--font-sans-bold);
429
468
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -440,6 +479,10 @@
440
479
  --font-display-medium-italic: 'Crimson Pro Medium Italic';
441
480
  --font-display-semibold: 'Crimson Pro SemiBold';
442
481
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
482
+ --opacity-disabled: 0.5;
483
+ --opacity-hover: 0.08;
484
+ --opacity-hover-overlay: 0.2;
485
+ --opacity-selected: 0.12;
443
486
  }
444
487
 
445
488
  @layer theme {
@@ -462,77 +505,109 @@
462
505
  --color-chart-simple-secondary: var(--color-brand-950);
463
506
  --color-content-action: var(--color-brand-700);
464
507
  --color-content-action-on-strong: var(--color-white);
465
- --color-content-action-on-subtle: var(--color-brand-950);
508
+ --color-content-action-on-subtle: var(--color-brand-900);
466
509
  --color-content-brand: var(--color-brand-700);
467
510
  --color-content-danger: var(--color-red-700);
468
511
  --color-content-danger-on-strong: var(--color-white);
469
512
  --color-content-danger-on-subtle: var(--color-red-900);
470
- --color-content-info: var(--color-sky-500);
513
+ --color-content-info: var(--color-sky-700);
471
514
  --color-content-info-on-strong: var(--color-white);
472
515
  --color-content-info-on-subtle: var(--color-sky-900);
473
516
  --color-content-link: var(--color-blue-600);
474
517
  --color-content-link-visited: var(--color-purple-800);
518
+ --color-content-neutral-on-strong: var(--color-white);
519
+ --color-content-neutral-on-subtle: var(--color-base-900);
475
520
  --color-content-primary: var(--color-base-950);
476
521
  --color-content-secondary: var(--color-base-800);
477
522
  --color-content-selected: var(--color-brand-700);
478
- --color-content-success: var(--color-green-600);
523
+ --color-content-success: var(--color-green-700);
479
524
  --color-content-success-on-strong: var(--color-white);
480
525
  --color-content-success-on-subtle: var(--color-green-900);
481
526
  --color-content-tertiary: var(--color-base-600);
482
- --color-content-warning: var(--color-amber-600);
527
+ --color-content-warning: var(--color-amber-700);
483
528
  --color-content-warning-on-strong: var(--color-black);
484
529
  --color-content-warning-on-subtle: var(--color-amber-900);
485
530
  --color-stroke-action: var(--color-brand-700);
486
531
  --color-stroke-danger: var(--color-red-700);
487
532
  --color-stroke-focus: var(--color-brand-700);
488
533
  --color-stroke-hover: var(--color-base-950);
489
- --color-stroke-info: var(--color-sky-500);
534
+ --color-stroke-info: var(--color-sky-700);
490
535
  --color-stroke-primary: var(--color-base-500);
491
536
  --color-stroke-ring: var(--color-base-950);
492
537
  --color-stroke-secondary: var(--color-base-100);
493
- --color-stroke-success: var(--color-green-500);
494
- --color-stroke-warning: var(--color-amber-600);
538
+ --color-stroke-success: var(--color-green-700);
539
+ --color-stroke-warning: var(--color-amber-700);
495
540
  --color-surface-accent-core: var(--color-accent-input);
496
541
  --color-surface-accent-strong: var(--color-accent-700);
542
+ --color-surface-accent-subtle: var(--color-accent-200);
543
+ --color-surface-accent-tint: var(--color-accent-100);
497
544
  --color-surface-action-strong: var(--color-brand-700);
498
- --color-surface-action-strong-active: var(--color-brand-800);
545
+ --color-surface-action-strong-active: var(--color-brand-900);
499
546
  --color-surface-action-strong-hover: var(--color-brand-800);
500
- --color-surface-action-subtle: var(--color-brand-300);
501
- --color-surface-action-subtle-active: var(--color-brand-400);
502
- --color-surface-action-subtle-hover: var(--color-brand-400);
503
- --color-surface-action-tint: var(--color-brand-100);
547
+ --color-surface-action-subtle: var(--color-brand-100);
548
+ --color-surface-action-subtle-active: var(--color-brand-300);
549
+ --color-surface-action-subtle-hover: var(--color-brand-200);
550
+ --color-surface-action-tint: var(--color-brand-50);
504
551
  --color-surface-action-tint-active: var(--color-brand-200);
505
- --color-surface-action-tint-hover: var(--color-brand-200);
506
- --color-surface-background: var(--color-base-100);
552
+ --color-surface-action-tint-hover: var(--color-brand-100);
553
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
554
+ --color-surface-background: var(--color-base-50);
507
555
  --color-surface-brand-core: var(--color-brand-input);
508
556
  --color-surface-brand-strong: var(--color-brand-700);
557
+ --color-surface-brand-subtle: var(--color-brand-200);
558
+ --color-surface-brand-tint: var(--color-brand-100);
509
559
  --color-surface-danger-strong: var(--color-red-700);
510
- --color-surface-danger-strong-active: var(--color-red-800);
560
+ --color-surface-danger-strong-active: var(--color-red-900);
511
561
  --color-surface-danger-strong-hover: var(--color-red-800);
512
- --color-surface-danger-subtle: var(--color-red-200);
562
+ --color-surface-danger-subtle: var(--color-red-100);
513
563
  --color-surface-danger-subtle-active: var(--color-red-300);
514
- --color-surface-danger-subtle-hover: var(--color-red-300);
515
- --color-surface-danger-tint: var(--color-red-100);
564
+ --color-surface-danger-subtle-hover: var(--color-red-200);
565
+ --color-surface-danger-tint: var(--color-red-50);
516
566
  --color-surface-danger-tint-active: var(--color-red-200);
517
- --color-surface-danger-tint-hover: var(--color-red-200);
567
+ --color-surface-danger-tint-hover: var(--color-red-100);
518
568
  --color-surface-info-strong: var(--color-sky-500);
519
- --color-surface-info-subtle: var(--color-sky-200);
520
- --color-surface-info-tint: var(--color-sky-100);
521
- --color-surface-neutral-subtle: var(--color-base-200);
522
- --color-surface-neutral-tint: var(--color-base-100);
569
+ --color-surface-info-strong-active: var(--color-sky-700);
570
+ --color-surface-info-strong-hover: var(--color-sky-600);
571
+ --color-surface-info-subtle: var(--color-sky-100);
572
+ --color-surface-info-subtle-active: var(--color-sky-300);
573
+ --color-surface-info-subtle-hover: var(--color-sky-200);
574
+ --color-surface-info-tint: var(--color-sky-50);
575
+ --color-surface-info-tint-active: var(--color-sky-200);
576
+ --color-surface-info-tint-hover: var(--color-sky-100);
577
+ --color-surface-neutral-strong: var(--color-base-700);
578
+ --color-surface-neutral-strong-active: var(--color-base-800);
579
+ --color-surface-neutral-strong-hover: var(--color-base-800);
580
+ --color-surface-neutral-subtle: var(--color-base-100);
581
+ --color-surface-neutral-subtle-active: var(--color-base-300);
582
+ --color-surface-neutral-subtle-hover: var(--color-base-200);
583
+ --color-surface-neutral-tint: var(--color-base-50);
584
+ --color-surface-neutral-tint-active: var(--color-base-200);
585
+ --color-surface-neutral-tint-hover: var(--color-base-100);
523
586
  --color-surface-primary: var(--color-white);
524
- --color-surface-primary-active: var(--color-base-100);
587
+ --color-surface-primary-active: var(--color-base-200);
525
588
  --color-surface-primary-hover: var(--color-base-100);
526
589
  --color-surface-secondary: var(--color-base-100);
527
- --color-surface-secondary-active: var(--color-base-200);
590
+ --color-surface-secondary-active: var(--color-base-300);
528
591
  --color-surface-secondary-hover: var(--color-base-200);
529
592
  --color-surface-success-strong: var(--color-green-600);
530
- --color-surface-success-subtle: var(--color-green-200);
531
- --color-surface-success-tint: var(--color-green-100);
593
+ --color-surface-success-strong-active: var(--color-green-800);
594
+ --color-surface-success-strong-hover: var(--color-green-700);
595
+ --color-surface-success-subtle: var(--color-green-100);
596
+ --color-surface-success-subtle-active: var(--color-green-300);
597
+ --color-surface-success-subtle-hover: var(--color-green-200);
598
+ --color-surface-success-tint: var(--color-green-50);
599
+ --color-surface-success-tint-active: var(--color-green-200);
600
+ --color-surface-success-tint-hover: var(--color-green-100);
532
601
  --color-surface-tertiary: var(--color-brand-100);
533
602
  --color-surface-warning-strong: var(--color-amber-400);
534
- --color-surface-warning-subtle: var(--color-amber-200);
535
- --color-surface-warning-tint: var(--color-amber-100);
603
+ --color-surface-warning-strong-active: var(--color-amber-600);
604
+ --color-surface-warning-strong-hover: var(--color-amber-500);
605
+ --color-surface-warning-subtle: var(--color-amber-100);
606
+ --color-surface-warning-subtle-active: var(--color-amber-300);
607
+ --color-surface-warning-subtle-hover: var(--color-amber-200);
608
+ --color-surface-warning-tint: var(--color-amber-50);
609
+ --color-surface-warning-tint-active: var(--color-amber-200);
610
+ --color-surface-warning-tint-hover: var(--color-amber-100);
536
611
  --font-body: var(--font-sans);
537
612
  --font-body-bold: var(--font-sans-bold);
538
613
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -582,6 +657,8 @@
582
657
  --color-content-info-on-subtle: var(--color-sky-900);
583
658
  --color-content-link: var(--color-white);
584
659
  --color-content-link-visited: var(--color-purple-200);
660
+ --color-content-neutral-on-strong: var(--color-base-900);
661
+ --color-content-neutral-on-subtle: var(--color-base-100);
585
662
  --color-content-primary: var(--color-white);
586
663
  --color-content-secondary: var(--color-base-100);
587
664
  --color-content-selected: var(--color-brand-100);
@@ -603,46 +680,76 @@
603
680
  --color-stroke-success: var(--color-green-200);
604
681
  --color-stroke-warning: var(--color-amber-300);
605
682
  --color-surface-accent-core: var(--color-accent-input);
606
- --color-surface-accent-strong: var(--color-accent-400);
683
+ --color-surface-accent-strong: var(--color-accent-300);
684
+ --color-surface-accent-subtle: var(--color-accent-900);
685
+ --color-surface-accent-tint: var(--color-accent-950);
607
686
  --color-surface-action-strong: var(--color-brand-300);
608
- --color-surface-action-strong-active: var(--color-brand-200);
687
+ --color-surface-action-strong-active: var(--color-brand-100);
609
688
  --color-surface-action-strong-hover: var(--color-brand-200);
610
- --color-surface-action-subtle: var(--color-brand-700);
611
- --color-surface-action-subtle-active: var(--color-brand-800);
689
+ --color-surface-action-subtle: var(--color-brand-900);
690
+ --color-surface-action-subtle-active: var(--color-brand-700);
612
691
  --color-surface-action-subtle-hover: var(--color-brand-800);
613
- --color-surface-action-tint: var(--color-brand-900);
692
+ --color-surface-action-tint: var(--color-brand-950);
614
693
  --color-surface-action-tint-active: var(--color-brand-800);
615
- --color-surface-action-tint-hover: var(--color-brand-800);
616
- --color-surface-background: var(--color-base-900);
694
+ --color-surface-action-tint-hover: var(--color-brand-900);
695
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
696
+ --color-surface-background: var(--color-base-950);
617
697
  --color-surface-brand-core: var(--color-brand-input);
618
- --color-surface-brand-strong: var(--color-brand-400);
698
+ --color-surface-brand-strong: var(--color-brand-300);
699
+ --color-surface-brand-subtle: var(--color-brand-900);
700
+ --color-surface-brand-tint: var(--color-brand-950);
619
701
  --color-surface-danger-strong: var(--color-red-200);
620
- --color-surface-danger-strong-active: var(--color-red-100);
702
+ --color-surface-danger-strong-active: var(--color-red-50);
621
703
  --color-surface-danger-strong-hover: var(--color-red-100);
622
- --color-surface-danger-subtle: var(--color-red-700);
623
- --color-surface-danger-subtle-active: var(--color-red-800);
704
+ --color-surface-danger-subtle: var(--color-red-900);
705
+ --color-surface-danger-subtle-active: var(--color-red-700);
624
706
  --color-surface-danger-subtle-hover: var(--color-red-800);
625
- --color-surface-danger-tint: var(--color-red-900);
707
+ --color-surface-danger-tint: var(--color-red-950);
626
708
  --color-surface-danger-tint-active: var(--color-red-800);
627
- --color-surface-danger-tint-hover: var(--color-red-800);
709
+ --color-surface-danger-tint-hover: var(--color-red-900);
628
710
  --color-surface-info-strong: var(--color-sky-300);
629
- --color-surface-info-subtle: var(--color-sky-700);
630
- --color-surface-info-tint: var(--color-sky-900);
631
- --color-surface-neutral-subtle: var(--color-base-800);
632
- --color-surface-neutral-tint: var(--color-base-900);
711
+ --color-surface-info-strong-active: var(--color-sky-100);
712
+ --color-surface-info-strong-hover: var(--color-sky-200);
713
+ --color-surface-info-subtle: var(--color-sky-900);
714
+ --color-surface-info-subtle-active: var(--color-sky-700);
715
+ --color-surface-info-subtle-hover: var(--color-sky-800);
716
+ --color-surface-info-tint: var(--color-sky-950);
717
+ --color-surface-info-tint-active: var(--color-sky-800);
718
+ --color-surface-info-tint-hover: var(--color-sky-900);
719
+ --color-surface-neutral-strong: var(--color-base-300);
720
+ --color-surface-neutral-strong-active: var(--color-base-100);
721
+ --color-surface-neutral-strong-hover: var(--color-base-200);
722
+ --color-surface-neutral-subtle: var(--color-base-900);
723
+ --color-surface-neutral-subtle-active: var(--color-base-700);
724
+ --color-surface-neutral-subtle-hover: var(--color-base-800);
725
+ --color-surface-neutral-tint: var(--color-base-950);
726
+ --color-surface-neutral-tint-active: var(--color-base-800);
727
+ --color-surface-neutral-tint-hover: var(--color-base-900);
633
728
  --color-surface-primary: var(--color-base-950);
634
- --color-surface-primary-active: var(--color-base-900);
729
+ --color-surface-primary-active: var(--color-base-800);
635
730
  --color-surface-primary-hover: var(--color-base-900);
636
731
  --color-surface-secondary: var(--color-base-900);
637
- --color-surface-secondary-active: var(--color-base-800);
732
+ --color-surface-secondary-active: var(--color-base-700);
638
733
  --color-surface-secondary-hover: var(--color-base-800);
639
734
  --color-surface-success-strong: var(--color-green-300);
640
- --color-surface-success-subtle: var(--color-green-700);
641
- --color-surface-success-tint: var(--color-green-900);
735
+ --color-surface-success-strong-active: var(--color-green-100);
736
+ --color-surface-success-strong-hover: var(--color-green-200);
737
+ --color-surface-success-subtle: var(--color-green-900);
738
+ --color-surface-success-subtle-active: var(--color-green-700);
739
+ --color-surface-success-subtle-hover: var(--color-green-800);
740
+ --color-surface-success-tint: var(--color-green-950);
741
+ --color-surface-success-tint-active: var(--color-green-800);
742
+ --color-surface-success-tint-hover: var(--color-green-900);
642
743
  --color-surface-tertiary: var(--color-brand-900);
643
744
  --color-surface-warning-strong: var(--color-amber-300);
644
- --color-surface-warning-subtle: var(--color-amber-700);
645
- --color-surface-warning-tint: var(--color-amber-900);
745
+ --color-surface-warning-strong-active: var(--color-amber-100);
746
+ --color-surface-warning-strong-hover: var(--color-amber-200);
747
+ --color-surface-warning-subtle: var(--color-amber-900);
748
+ --color-surface-warning-subtle-active: var(--color-amber-700);
749
+ --color-surface-warning-subtle-hover: var(--color-amber-800);
750
+ --color-surface-warning-tint: var(--color-amber-950);
751
+ --color-surface-warning-tint-active: var(--color-amber-800);
752
+ --color-surface-warning-tint-hover: var(--color-amber-900);
646
753
  --font-body: var(--font-sans);
647
754
  --font-body-bold: var(--font-sans-bold);
648
755
  --font-body-bold-italic: var(--font-sans-bold-italic);