@cdx-ui/styles 0.0.1-beta.4 → 0.0.1-beta.41

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 +20 -14
  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 +1 -1
  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
 
@@ -53,7 +53,7 @@ import pulse from '@cdx-ui/styles/presets/pulse.json';
53
53
 
54
54
  ### TypeScript types
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 for theme objects, overrides, and related structures, plus the `useForgeFonts` hook:
57
57
 
58
58
  ```typescript
59
59
  import type {
@@ -66,10 +66,13 @@ import type {
66
66
  Mode,
67
67
  Platform,
68
68
  } from '@cdx-ui/styles';
69
+
70
+ import { useForgeFonts } from '@cdx-ui/styles';
69
71
  ```
70
72
 
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).
73
+ - `useForgeFonts` — Hook that 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.
74
+ - `ThemeMetadata` — metadata stored under `$extensions.com.forge.ui.theme` (name, preset, schema version).
75
+ - `ThemeOverrideMetadata` — metadata for FI overrides under `$extensions.com.forge.ui.themeOverride` (base preset, schema version). See [Override Structure](../../docs/internal/token-architecture/16-override-structure.md) for the recommended payload format.
73
76
 
74
77
  ## Token pipeline
75
78
 
@@ -90,8 +93,11 @@ tokens/presets/
90
93
  poise.json # Default build preset
91
94
  prestige.json
92
95
  pulse.json
96
+ .manifest.json # SHA-256 checksums (written by fetch)
93
97
  ```
94
98
 
99
+ `.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.
100
+
95
101
  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
102
 
97
103
  #### Figma MCP alternative
@@ -116,21 +122,20 @@ pnpm tokens:build
116
122
 
117
123
  **Generated artifacts** (from the same build pass):
118
124
 
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 |
125
+ | Artifact | Ships to | Purpose |
126
+ | -------------- | -------------- | ------------------------------------------------------------------ |
127
+ | Runtime map | Package (JSON) | Theme object path → CSS custom property name for sparse flattening |
128
+ | Preset patches | Package (JSON) | Sparse diff from build default → each non-default preset |
124
129
 
125
130
  ### Validating font tokens
126
131
 
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:
132
+ 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
133
 
129
134
  ```bash
130
135
  pnpm fonts:validate
131
136
  ```
132
137
 
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.
138
+ 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
139
 
135
140
  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
141
 
@@ -146,7 +151,7 @@ Light/dark mode switching is handled by Uniwind `@variant light/dark` blocks in
146
151
 
147
152
  ### FI overrides
148
153
 
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.
154
+ 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
155
 
151
156
  ## Package structure
152
157
 
@@ -159,12 +164,13 @@ styles/
159
164
  ├── scripts/
160
165
  │ ├── figma-fetch-variables.mjs # Figma Variables REST API fetch
161
166
  │ ├── build-tokens.mjs # Style Dictionary build + artifact generation
162
- │ └── validate-font-tokens.mjs # CI check: --font-* values match useCdxFonts keys
167
+ │ └── validate-font-tokens.mjs # CI check: --font-* values match useForgeFonts keys
163
168
  ├── src/
164
169
  │ ├── index.ts # TypeScript type exports (ThemeObject, ThemeOverride, etc.)
165
- │ └── useCdxFonts.ts # Font loader hook (expo-font) — loads all preset display fonts
170
+ │ └── useForgeFonts.ts # Font loader hook (expo-font) — loads all preset display fonts
166
171
  ├── tokens/
167
172
  │ └── presets/
173
+ │ ├── .manifest.json # SHA-256 checksums (written by fetch)
168
174
  │ ├── poise.json # Poise theme object (build default)
169
175
  │ ├── prestige.json # Prestige theme object
170
176
  │ └── 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);
package/css/vanilla.css CHANGED
@@ -376,77 +376,93 @@
376
376
  --color-chart-simple-secondary: var(--color-brand-950);
377
377
  --color-content-action: var(--color-brand-700);
378
378
  --color-content-action-on-strong: var(--color-white);
379
- --color-content-action-on-subtle: var(--color-brand-950);
379
+ --color-content-action-on-subtle: var(--color-brand-900);
380
380
  --color-content-brand: var(--color-brand-700);
381
381
  --color-content-danger: var(--color-red-700);
382
382
  --color-content-danger-on-strong: var(--color-white);
383
383
  --color-content-danger-on-subtle: var(--color-red-900);
384
- --color-content-info: var(--color-sky-500);
384
+ --color-content-info: var(--color-sky-700);
385
385
  --color-content-info-on-strong: var(--color-white);
386
386
  --color-content-info-on-subtle: var(--color-sky-900);
387
387
  --color-content-link: var(--color-blue-600);
388
388
  --color-content-link-visited: var(--color-purple-800);
389
+ --color-content-neutral-on-strong: var(--color-white);
390
+ --color-content-neutral-on-subtle: var(--color-base-900);
389
391
  --color-content-primary: var(--color-base-950);
390
392
  --color-content-secondary: var(--color-base-800);
391
393
  --color-content-selected: var(--color-brand-700);
392
- --color-content-success: var(--color-green-600);
394
+ --color-content-success: var(--color-green-700);
393
395
  --color-content-success-on-strong: var(--color-white);
394
396
  --color-content-success-on-subtle: var(--color-green-900);
395
397
  --color-content-tertiary: var(--color-base-600);
396
- --color-content-warning: var(--color-amber-600);
398
+ --color-content-warning: var(--color-amber-700);
397
399
  --color-content-warning-on-strong: var(--color-black);
398
400
  --color-content-warning-on-subtle: var(--color-amber-900);
399
401
  --color-stroke-action: var(--color-brand-700);
400
402
  --color-stroke-danger: var(--color-red-700);
401
403
  --color-stroke-focus: var(--color-brand-700);
402
404
  --color-stroke-hover: var(--color-base-950);
403
- --color-stroke-info: var(--color-sky-500);
405
+ --color-stroke-info: var(--color-sky-700);
404
406
  --color-stroke-primary: var(--color-base-500);
405
407
  --color-stroke-ring: var(--color-base-950);
406
408
  --color-stroke-secondary: var(--color-base-100);
407
- --color-stroke-success: var(--color-green-500);
408
- --color-stroke-warning: var(--color-amber-600);
409
+ --color-stroke-success: var(--color-green-700);
410
+ --color-stroke-warning: var(--color-amber-700);
409
411
  --color-surface-accent-core: var(--color-accent-input);
410
412
  --color-surface-accent-strong: var(--color-accent-700);
413
+ --color-surface-accent-subtle: var(--color-accent-200);
414
+ --color-surface-accent-tint: var(--color-accent-100);
411
415
  --color-surface-action-strong: var(--color-brand-700);
412
- --color-surface-action-strong-active: var(--color-brand-800);
416
+ --color-surface-action-strong-active: var(--color-brand-900);
413
417
  --color-surface-action-strong-hover: var(--color-brand-800);
414
- --color-surface-action-subtle: var(--color-brand-300);
418
+ --color-surface-action-subtle: var(--color-brand-200);
415
419
  --color-surface-action-subtle-active: var(--color-brand-400);
416
- --color-surface-action-subtle-hover: var(--color-brand-400);
420
+ --color-surface-action-subtle-hover: var(--color-brand-300);
417
421
  --color-surface-action-tint: var(--color-brand-100);
418
- --color-surface-action-tint-active: var(--color-brand-200);
422
+ --color-surface-action-tint-active: var(--color-brand-300);
419
423
  --color-surface-action-tint-hover: var(--color-brand-200);
424
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
420
425
  --color-surface-background: var(--color-base-100);
421
426
  --color-surface-brand-core: var(--color-brand-input);
422
427
  --color-surface-brand-strong: var(--color-brand-700);
428
+ --color-surface-brand-subtle: var(--color-brand-200);
429
+ --color-surface-brand-tint: var(--color-brand-100);
423
430
  --color-surface-danger-strong: var(--color-red-700);
424
- --color-surface-danger-strong-active: var(--color-red-800);
431
+ --color-surface-danger-strong-active: var(--color-red-900);
425
432
  --color-surface-danger-strong-hover: var(--color-red-800);
426
433
  --color-surface-danger-subtle: var(--color-red-200);
427
- --color-surface-danger-subtle-active: var(--color-red-300);
434
+ --color-surface-danger-subtle-active: var(--color-red-400);
428
435
  --color-surface-danger-subtle-hover: var(--color-red-300);
429
436
  --color-surface-danger-tint: var(--color-red-100);
430
- --color-surface-danger-tint-active: var(--color-red-200);
437
+ --color-surface-danger-tint-active: var(--color-red-300);
431
438
  --color-surface-danger-tint-hover: var(--color-red-200);
432
439
  --color-surface-info-strong: var(--color-sky-500);
433
440
  --color-surface-info-subtle: var(--color-sky-200);
434
441
  --color-surface-info-tint: var(--color-sky-100);
442
+ --color-surface-info-tint-active: var(--color-sky-300);
443
+ --color-surface-info-tint-hover: var(--color-sky-200);
444
+ --color-surface-neutral-strong: var(--color-base-700);
435
445
  --color-surface-neutral-subtle: var(--color-base-200);
436
446
  --color-surface-neutral-tint: var(--color-base-100);
447
+ --color-surface-neutral-tint-active: var(--color-base-300);
448
+ --color-surface-neutral-tint-hover: var(--color-base-200);
437
449
  --color-surface-primary: var(--color-white);
438
- --color-surface-primary-active: var(--color-base-100);
450
+ --color-surface-primary-active: var(--color-base-200);
439
451
  --color-surface-primary-hover: var(--color-base-100);
440
452
  --color-surface-secondary: var(--color-base-100);
441
- --color-surface-secondary-active: var(--color-base-200);
453
+ --color-surface-secondary-active: var(--color-base-300);
442
454
  --color-surface-secondary-hover: var(--color-base-200);
443
455
  --color-surface-success-strong: var(--color-green-600);
444
456
  --color-surface-success-subtle: var(--color-green-200);
445
457
  --color-surface-success-tint: var(--color-green-100);
458
+ --color-surface-success-tint-active: var(--color-green-300);
459
+ --color-surface-success-tint-hover: var(--color-green-200);
446
460
  --color-surface-tertiary: var(--color-brand-100);
447
461
  --color-surface-warning-strong: var(--color-amber-400);
448
462
  --color-surface-warning-subtle: var(--color-amber-200);
449
463
  --color-surface-warning-tint: var(--color-amber-100);
464
+ --color-surface-warning-tint-active: var(--color-amber-300);
465
+ --color-surface-warning-tint-hover: var(--color-amber-200);
450
466
  --font-body: var(--font-sans);
451
467
  --font-body-bold: var(--font-sans-bold);
452
468
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -498,6 +514,8 @@
498
514
  --color-content-info-on-subtle: var(--color-sky-900);
499
515
  --color-content-link: var(--color-white);
500
516
  --color-content-link-visited: var(--color-purple-200);
517
+ --color-content-neutral-on-strong: var(--color-base-900);
518
+ --color-content-neutral-on-subtle: var(--color-base-100);
501
519
  --color-content-primary: var(--color-white);
502
520
  --color-content-secondary: var(--color-base-100);
503
521
  --color-content-selected: var(--color-brand-100);
@@ -519,46 +537,60 @@
519
537
  --color-stroke-success: var(--color-green-200);
520
538
  --color-stroke-warning: var(--color-amber-300);
521
539
  --color-surface-accent-core: var(--color-accent-input);
522
- --color-surface-accent-strong: var(--color-accent-400);
540
+ --color-surface-accent-strong: var(--color-accent-300);
541
+ --color-surface-accent-subtle: var(--color-accent-700);
542
+ --color-surface-accent-tint: var(--color-accent-900);
523
543
  --color-surface-action-strong: var(--color-brand-300);
524
- --color-surface-action-strong-active: var(--color-brand-200);
544
+ --color-surface-action-strong-active: var(--color-brand-100);
525
545
  --color-surface-action-strong-hover: var(--color-brand-200);
526
- --color-surface-action-subtle: var(--color-brand-700);
527
- --color-surface-action-subtle-active: var(--color-brand-800);
528
- --color-surface-action-subtle-hover: var(--color-brand-800);
546
+ --color-surface-action-subtle: var(--color-brand-800);
547
+ --color-surface-action-subtle-active: var(--color-brand-600);
548
+ --color-surface-action-subtle-hover: var(--color-brand-700);
529
549
  --color-surface-action-tint: var(--color-brand-900);
530
- --color-surface-action-tint-active: var(--color-brand-800);
550
+ --color-surface-action-tint-active: var(--color-brand-700);
531
551
  --color-surface-action-tint-hover: var(--color-brand-800);
552
+ --color-surface-backdrop: rgba(0, 0, 0, 0.5);
532
553
  --color-surface-background: var(--color-base-900);
533
554
  --color-surface-brand-core: var(--color-brand-input);
534
- --color-surface-brand-strong: var(--color-brand-400);
555
+ --color-surface-brand-strong: var(--color-brand-300);
556
+ --color-surface-brand-subtle: var(--color-brand-700);
557
+ --color-surface-brand-tint: var(--color-brand-900);
535
558
  --color-surface-danger-strong: var(--color-red-200);
536
- --color-surface-danger-strong-active: var(--color-red-100);
559
+ --color-surface-danger-strong-active: var(--color-red-50);
537
560
  --color-surface-danger-strong-hover: var(--color-red-100);
538
561
  --color-surface-danger-subtle: var(--color-red-700);
539
- --color-surface-danger-subtle-active: var(--color-red-800);
540
- --color-surface-danger-subtle-hover: var(--color-red-800);
562
+ --color-surface-danger-subtle-active: var(--color-red-500);
563
+ --color-surface-danger-subtle-hover: var(--color-red-600);
541
564
  --color-surface-danger-tint: var(--color-red-900);
542
- --color-surface-danger-tint-active: var(--color-red-800);
565
+ --color-surface-danger-tint-active: var(--color-red-700);
543
566
  --color-surface-danger-tint-hover: var(--color-red-800);
544
567
  --color-surface-info-strong: var(--color-sky-300);
545
568
  --color-surface-info-subtle: var(--color-sky-700);
546
569
  --color-surface-info-tint: var(--color-sky-900);
570
+ --color-surface-info-tint-active: var(--color-sky-700);
571
+ --color-surface-info-tint-hover: var(--color-sky-800);
572
+ --color-surface-neutral-strong: var(--color-base-200);
547
573
  --color-surface-neutral-subtle: var(--color-base-800);
548
574
  --color-surface-neutral-tint: var(--color-base-900);
575
+ --color-surface-neutral-tint-active: var(--color-base-700);
576
+ --color-surface-neutral-tint-hover: var(--color-base-800);
549
577
  --color-surface-primary: var(--color-base-950);
550
- --color-surface-primary-active: var(--color-base-900);
578
+ --color-surface-primary-active: var(--color-base-800);
551
579
  --color-surface-primary-hover: var(--color-base-900);
552
580
  --color-surface-secondary: var(--color-base-900);
553
- --color-surface-secondary-active: var(--color-base-800);
581
+ --color-surface-secondary-active: var(--color-base-700);
554
582
  --color-surface-secondary-hover: var(--color-base-800);
555
583
  --color-surface-success-strong: var(--color-green-300);
556
584
  --color-surface-success-subtle: var(--color-green-700);
557
585
  --color-surface-success-tint: var(--color-green-900);
586
+ --color-surface-success-tint-active: var(--color-green-700);
587
+ --color-surface-success-tint-hover: var(--color-green-800);
558
588
  --color-surface-tertiary: var(--color-brand-900);
559
589
  --color-surface-warning-strong: var(--color-amber-300);
560
590
  --color-surface-warning-subtle: var(--color-amber-700);
561
591
  --color-surface-warning-tint: var(--color-amber-900);
592
+ --color-surface-warning-tint-active: var(--color-amber-700);
593
+ --color-surface-warning-tint-hover: var(--color-amber-800);
562
594
  --font-body: var(--font-sans);
563
595
  --font-body-bold: var(--font-sans-bold);
564
596
  --font-body-bold-italic: var(--font-sans-bold-italic);