@cdx-ui/styles 0.0.1-beta.5 → 0.0.1-beta.51

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 (29) hide show
  1. package/README.md +50 -19
  2. package/css/theme.css +104 -45
  3. package/css/vanilla.css +61 -29
  4. package/lib/commonjs/index.js +80 -0
  5. package/lib/commonjs/index.js.map +1 -1
  6. package/lib/commonjs/useCdxFonts.js +7 -231
  7. package/lib/commonjs/useCdxFonts.js.map +1 -1
  8. package/lib/commonjs/useForgeFonts.js +237 -0
  9. package/lib/commonjs/useForgeFonts.js.map +1 -0
  10. package/lib/module/index.js +50 -5
  11. package/lib/module/index.js.map +1 -1
  12. package/lib/module/useCdxFonts.js +2 -220
  13. package/lib/module/useCdxFonts.js.map +1 -1
  14. package/lib/module/useForgeFonts.js +223 -0
  15. package/lib/module/useForgeFonts.js.map +1 -0
  16. package/lib/typescript/index.d.ts +47 -14
  17. package/lib/typescript/index.d.ts.map +1 -1
  18. package/lib/typescript/useCdxFonts.d.ts +2 -11
  19. package/lib/typescript/useCdxFonts.d.ts.map +1 -1
  20. package/lib/typescript/useForgeFonts.d.ts +12 -0
  21. package/lib/typescript/useForgeFonts.d.ts.map +1 -0
  22. package/package.json +2 -2
  23. package/src/index.ts +60 -14
  24. package/src/useCdxFonts.ts +2 -230
  25. package/src/useForgeFonts.ts +230 -0
  26. package/tokens/presets/.manifest.json +3 -3
  27. package/tokens/presets/poise.json +158 -30
  28. package/tokens/presets/prestige.json +1 -1
  29. 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,93 @@
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);
402
+ --color-surface-action-subtle: var(--color-brand-200);
392
403
  --color-surface-action-subtle-active: var(--color-brand-400);
393
- --color-surface-action-subtle-hover: var(--color-brand-400);
404
+ --color-surface-action-subtle-hover: var(--color-brand-300);
394
405
  --color-surface-action-tint: var(--color-brand-100);
395
- --color-surface-action-tint-active: var(--color-brand-200);
406
+ --color-surface-action-tint-active: var(--color-brand-300);
396
407
  --color-surface-action-tint-hover: var(--color-brand-200);
408
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
397
409
  --color-surface-background: var(--color-base-100);
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
417
  --color-surface-danger-subtle: var(--color-red-200);
404
- --color-surface-danger-subtle-active: var(--color-red-300);
418
+ --color-surface-danger-subtle-active: var(--color-red-400);
405
419
  --color-surface-danger-subtle-hover: var(--color-red-300);
406
420
  --color-surface-danger-tint: var(--color-red-100);
407
- --color-surface-danger-tint-active: var(--color-red-200);
421
+ --color-surface-danger-tint-active: var(--color-red-300);
408
422
  --color-surface-danger-tint-hover: var(--color-red-200);
409
423
  --color-surface-info-strong: var(--color-sky-500);
410
424
  --color-surface-info-subtle: var(--color-sky-200);
411
425
  --color-surface-info-tint: var(--color-sky-100);
426
+ --color-surface-info-tint-active: var(--color-sky-300);
427
+ --color-surface-info-tint-hover: var(--color-sky-200);
428
+ --color-surface-neutral-strong: var(--color-base-700);
412
429
  --color-surface-neutral-subtle: var(--color-base-200);
413
430
  --color-surface-neutral-tint: var(--color-base-100);
431
+ --color-surface-neutral-tint-active: var(--color-base-300);
432
+ --color-surface-neutral-tint-hover: var(--color-base-200);
414
433
  --color-surface-primary: var(--color-white);
415
- --color-surface-primary-active: var(--color-base-100);
434
+ --color-surface-primary-active: var(--color-base-200);
416
435
  --color-surface-primary-hover: var(--color-base-100);
417
436
  --color-surface-secondary: var(--color-base-100);
418
- --color-surface-secondary-active: var(--color-base-200);
437
+ --color-surface-secondary-active: var(--color-base-300);
419
438
  --color-surface-secondary-hover: var(--color-base-200);
420
439
  --color-surface-success-strong: var(--color-green-600);
421
440
  --color-surface-success-subtle: var(--color-green-200);
422
441
  --color-surface-success-tint: var(--color-green-100);
442
+ --color-surface-success-tint-active: var(--color-green-300);
443
+ --color-surface-success-tint-hover: var(--color-green-200);
423
444
  --color-surface-tertiary: var(--color-brand-100);
424
445
  --color-surface-warning-strong: var(--color-amber-400);
425
446
  --color-surface-warning-subtle: var(--color-amber-200);
426
447
  --color-surface-warning-tint: var(--color-amber-100);
448
+ --color-surface-warning-tint-active: var(--color-amber-300);
449
+ --color-surface-warning-tint-hover: var(--color-amber-200);
427
450
  --font-body: var(--font-sans);
428
451
  --font-body-bold: var(--font-sans-bold);
429
452
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -440,6 +463,10 @@
440
463
  --font-display-medium-italic: 'Crimson Pro Medium Italic';
441
464
  --font-display-semibold: 'Crimson Pro SemiBold';
442
465
  --font-display-semibold-italic: 'Crimson Pro SemiBold Italic';
466
+ --opacity-disabled: 0.5;
467
+ --opacity-hover: 0.08;
468
+ --opacity-hover-overlay: 0.2;
469
+ --opacity-selected: 0.12;
443
470
  }
444
471
 
445
472
  @layer theme {
@@ -462,77 +489,93 @@
462
489
  --color-chart-simple-secondary: var(--color-brand-950);
463
490
  --color-content-action: var(--color-brand-700);
464
491
  --color-content-action-on-strong: var(--color-white);
465
- --color-content-action-on-subtle: var(--color-brand-950);
492
+ --color-content-action-on-subtle: var(--color-brand-900);
466
493
  --color-content-brand: var(--color-brand-700);
467
494
  --color-content-danger: var(--color-red-700);
468
495
  --color-content-danger-on-strong: var(--color-white);
469
496
  --color-content-danger-on-subtle: var(--color-red-900);
470
- --color-content-info: var(--color-sky-500);
497
+ --color-content-info: var(--color-sky-700);
471
498
  --color-content-info-on-strong: var(--color-white);
472
499
  --color-content-info-on-subtle: var(--color-sky-900);
473
500
  --color-content-link: var(--color-blue-600);
474
501
  --color-content-link-visited: var(--color-purple-800);
502
+ --color-content-neutral-on-strong: var(--color-white);
503
+ --color-content-neutral-on-subtle: var(--color-base-900);
475
504
  --color-content-primary: var(--color-base-950);
476
505
  --color-content-secondary: var(--color-base-800);
477
506
  --color-content-selected: var(--color-brand-700);
478
- --color-content-success: var(--color-green-600);
507
+ --color-content-success: var(--color-green-700);
479
508
  --color-content-success-on-strong: var(--color-white);
480
509
  --color-content-success-on-subtle: var(--color-green-900);
481
510
  --color-content-tertiary: var(--color-base-600);
482
- --color-content-warning: var(--color-amber-600);
511
+ --color-content-warning: var(--color-amber-700);
483
512
  --color-content-warning-on-strong: var(--color-black);
484
513
  --color-content-warning-on-subtle: var(--color-amber-900);
485
514
  --color-stroke-action: var(--color-brand-700);
486
515
  --color-stroke-danger: var(--color-red-700);
487
516
  --color-stroke-focus: var(--color-brand-700);
488
517
  --color-stroke-hover: var(--color-base-950);
489
- --color-stroke-info: var(--color-sky-500);
518
+ --color-stroke-info: var(--color-sky-700);
490
519
  --color-stroke-primary: var(--color-base-500);
491
520
  --color-stroke-ring: var(--color-base-950);
492
521
  --color-stroke-secondary: var(--color-base-100);
493
- --color-stroke-success: var(--color-green-500);
494
- --color-stroke-warning: var(--color-amber-600);
522
+ --color-stroke-success: var(--color-green-700);
523
+ --color-stroke-warning: var(--color-amber-700);
495
524
  --color-surface-accent-core: var(--color-accent-input);
496
525
  --color-surface-accent-strong: var(--color-accent-700);
526
+ --color-surface-accent-subtle: var(--color-accent-200);
527
+ --color-surface-accent-tint: var(--color-accent-100);
497
528
  --color-surface-action-strong: var(--color-brand-700);
498
- --color-surface-action-strong-active: var(--color-brand-800);
529
+ --color-surface-action-strong-active: var(--color-brand-900);
499
530
  --color-surface-action-strong-hover: var(--color-brand-800);
500
- --color-surface-action-subtle: var(--color-brand-300);
531
+ --color-surface-action-subtle: var(--color-brand-200);
501
532
  --color-surface-action-subtle-active: var(--color-brand-400);
502
- --color-surface-action-subtle-hover: var(--color-brand-400);
533
+ --color-surface-action-subtle-hover: var(--color-brand-300);
503
534
  --color-surface-action-tint: var(--color-brand-100);
504
- --color-surface-action-tint-active: var(--color-brand-200);
535
+ --color-surface-action-tint-active: var(--color-brand-300);
505
536
  --color-surface-action-tint-hover: var(--color-brand-200);
537
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
506
538
  --color-surface-background: var(--color-base-100);
507
539
  --color-surface-brand-core: var(--color-brand-input);
508
540
  --color-surface-brand-strong: var(--color-brand-700);
541
+ --color-surface-brand-subtle: var(--color-brand-200);
542
+ --color-surface-brand-tint: var(--color-brand-100);
509
543
  --color-surface-danger-strong: var(--color-red-700);
510
- --color-surface-danger-strong-active: var(--color-red-800);
544
+ --color-surface-danger-strong-active: var(--color-red-900);
511
545
  --color-surface-danger-strong-hover: var(--color-red-800);
512
546
  --color-surface-danger-subtle: var(--color-red-200);
513
- --color-surface-danger-subtle-active: var(--color-red-300);
547
+ --color-surface-danger-subtle-active: var(--color-red-400);
514
548
  --color-surface-danger-subtle-hover: var(--color-red-300);
515
549
  --color-surface-danger-tint: var(--color-red-100);
516
- --color-surface-danger-tint-active: var(--color-red-200);
550
+ --color-surface-danger-tint-active: var(--color-red-300);
517
551
  --color-surface-danger-tint-hover: var(--color-red-200);
518
552
  --color-surface-info-strong: var(--color-sky-500);
519
553
  --color-surface-info-subtle: var(--color-sky-200);
520
554
  --color-surface-info-tint: var(--color-sky-100);
555
+ --color-surface-info-tint-active: var(--color-sky-300);
556
+ --color-surface-info-tint-hover: var(--color-sky-200);
557
+ --color-surface-neutral-strong: var(--color-base-700);
521
558
  --color-surface-neutral-subtle: var(--color-base-200);
522
559
  --color-surface-neutral-tint: var(--color-base-100);
560
+ --color-surface-neutral-tint-active: var(--color-base-300);
561
+ --color-surface-neutral-tint-hover: var(--color-base-200);
523
562
  --color-surface-primary: var(--color-white);
524
- --color-surface-primary-active: var(--color-base-100);
563
+ --color-surface-primary-active: var(--color-base-200);
525
564
  --color-surface-primary-hover: var(--color-base-100);
526
565
  --color-surface-secondary: var(--color-base-100);
527
- --color-surface-secondary-active: var(--color-base-200);
566
+ --color-surface-secondary-active: var(--color-base-300);
528
567
  --color-surface-secondary-hover: var(--color-base-200);
529
568
  --color-surface-success-strong: var(--color-green-600);
530
569
  --color-surface-success-subtle: var(--color-green-200);
531
570
  --color-surface-success-tint: var(--color-green-100);
571
+ --color-surface-success-tint-active: var(--color-green-300);
572
+ --color-surface-success-tint-hover: var(--color-green-200);
532
573
  --color-surface-tertiary: var(--color-brand-100);
533
574
  --color-surface-warning-strong: var(--color-amber-400);
534
575
  --color-surface-warning-subtle: var(--color-amber-200);
535
576
  --color-surface-warning-tint: var(--color-amber-100);
577
+ --color-surface-warning-tint-active: var(--color-amber-300);
578
+ --color-surface-warning-tint-hover: var(--color-amber-200);
536
579
  --font-body: var(--font-sans);
537
580
  --font-body-bold: var(--font-sans-bold);
538
581
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -582,6 +625,8 @@
582
625
  --color-content-info-on-subtle: var(--color-sky-900);
583
626
  --color-content-link: var(--color-white);
584
627
  --color-content-link-visited: var(--color-purple-200);
628
+ --color-content-neutral-on-strong: var(--color-base-900);
629
+ --color-content-neutral-on-subtle: var(--color-base-100);
585
630
  --color-content-primary: var(--color-white);
586
631
  --color-content-secondary: var(--color-base-100);
587
632
  --color-content-selected: var(--color-brand-100);
@@ -603,46 +648,60 @@
603
648
  --color-stroke-success: var(--color-green-200);
604
649
  --color-stroke-warning: var(--color-amber-300);
605
650
  --color-surface-accent-core: var(--color-accent-input);
606
- --color-surface-accent-strong: var(--color-accent-400);
651
+ --color-surface-accent-strong: var(--color-accent-300);
652
+ --color-surface-accent-subtle: var(--color-accent-700);
653
+ --color-surface-accent-tint: var(--color-accent-900);
607
654
  --color-surface-action-strong: var(--color-brand-300);
608
- --color-surface-action-strong-active: var(--color-brand-200);
655
+ --color-surface-action-strong-active: var(--color-brand-100);
609
656
  --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);
612
- --color-surface-action-subtle-hover: var(--color-brand-800);
657
+ --color-surface-action-subtle: var(--color-brand-800);
658
+ --color-surface-action-subtle-active: var(--color-brand-600);
659
+ --color-surface-action-subtle-hover: var(--color-brand-700);
613
660
  --color-surface-action-tint: var(--color-brand-900);
614
- --color-surface-action-tint-active: var(--color-brand-800);
661
+ --color-surface-action-tint-active: var(--color-brand-700);
615
662
  --color-surface-action-tint-hover: var(--color-brand-800);
663
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
616
664
  --color-surface-background: var(--color-base-900);
617
665
  --color-surface-brand-core: var(--color-brand-input);
618
- --color-surface-brand-strong: var(--color-brand-400);
666
+ --color-surface-brand-strong: var(--color-brand-300);
667
+ --color-surface-brand-subtle: var(--color-brand-700);
668
+ --color-surface-brand-tint: var(--color-brand-900);
619
669
  --color-surface-danger-strong: var(--color-red-200);
620
- --color-surface-danger-strong-active: var(--color-red-100);
670
+ --color-surface-danger-strong-active: var(--color-red-50);
621
671
  --color-surface-danger-strong-hover: var(--color-red-100);
622
672
  --color-surface-danger-subtle: var(--color-red-700);
623
- --color-surface-danger-subtle-active: var(--color-red-800);
624
- --color-surface-danger-subtle-hover: var(--color-red-800);
673
+ --color-surface-danger-subtle-active: var(--color-red-500);
674
+ --color-surface-danger-subtle-hover: var(--color-red-600);
625
675
  --color-surface-danger-tint: var(--color-red-900);
626
- --color-surface-danger-tint-active: var(--color-red-800);
676
+ --color-surface-danger-tint-active: var(--color-red-700);
627
677
  --color-surface-danger-tint-hover: var(--color-red-800);
628
678
  --color-surface-info-strong: var(--color-sky-300);
629
679
  --color-surface-info-subtle: var(--color-sky-700);
630
680
  --color-surface-info-tint: var(--color-sky-900);
681
+ --color-surface-info-tint-active: var(--color-sky-700);
682
+ --color-surface-info-tint-hover: var(--color-sky-800);
683
+ --color-surface-neutral-strong: var(--color-base-200);
631
684
  --color-surface-neutral-subtle: var(--color-base-800);
632
685
  --color-surface-neutral-tint: var(--color-base-900);
686
+ --color-surface-neutral-tint-active: var(--color-base-700);
687
+ --color-surface-neutral-tint-hover: var(--color-base-800);
633
688
  --color-surface-primary: var(--color-base-950);
634
- --color-surface-primary-active: var(--color-base-900);
689
+ --color-surface-primary-active: var(--color-base-800);
635
690
  --color-surface-primary-hover: var(--color-base-900);
636
691
  --color-surface-secondary: var(--color-base-900);
637
- --color-surface-secondary-active: var(--color-base-800);
692
+ --color-surface-secondary-active: var(--color-base-700);
638
693
  --color-surface-secondary-hover: var(--color-base-800);
639
694
  --color-surface-success-strong: var(--color-green-300);
640
695
  --color-surface-success-subtle: var(--color-green-700);
641
696
  --color-surface-success-tint: var(--color-green-900);
697
+ --color-surface-success-tint-active: var(--color-green-700);
698
+ --color-surface-success-tint-hover: var(--color-green-800);
642
699
  --color-surface-tertiary: var(--color-brand-900);
643
700
  --color-surface-warning-strong: var(--color-amber-300);
644
701
  --color-surface-warning-subtle: var(--color-amber-700);
645
702
  --color-surface-warning-tint: var(--color-amber-900);
703
+ --color-surface-warning-tint-active: var(--color-amber-700);
704
+ --color-surface-warning-tint-hover: var(--color-amber-800);
646
705
  --font-body: var(--font-sans);
647
706
  --font-body-bold: var(--font-sans-bold);
648
707
  --font-body-bold-italic: var(--font-sans-bold-italic);