@cdx-ui/styles 0.0.1-beta.3 → 0.0.1-beta.31

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 (11) hide show
  1. package/README.md +15 -9
  2. package/css/theme.css +90 -45
  3. package/css/vanilla.css +59 -29
  4. package/lib/commonjs/index.js.map +1 -1
  5. package/lib/module/index.js.map +1 -1
  6. package/lib/typescript/index.d.ts +0 -2
  7. package/lib/typescript/index.d.ts.map +1 -1
  8. package/package.json +2 -2
  9. package/src/index.ts +0 -2
  10. package/tokens/presets/.manifest.json +1 -1
  11. package/tokens/presets/poise.json +149 -29
package/README.md CHANGED
@@ -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 `useCdxFonts` 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 { useCdxFonts } from '@cdx-ui/styles';
69
71
  ```
70
72
 
73
+ - `useCdxFonts` — 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.
71
74
  - `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).
75
+ - `ThemeOverrideMetadata` — metadata for FI overrides under `$extensions.com.candescent.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
 
@@ -80,7 +83,7 @@ The pipeline has two stages — **fetch** and **build** — both run from packag
80
83
  Tokens are pulled from Figma Variables via the [REST API](https://www.figma.com/developers/api) (`GET /v1/files/:file_key/variables/local`). This requires an Enterprise plan and a personal access token with `file_variables:read` scope.
81
84
 
82
85
  ```bash
83
- FIGMA_ACCESS_TOKEN=your_token pnpm tokens:fetch
86
+ FIGMA_VARIABLES_TOKEN=your_token pnpm tokens:fetch
84
87
  ```
85
88
 
86
89
  The script reads `figma.config.json` for the file key, preset list, and default FI mode, then assembles one [DTCG-compatible](https://www.designtokens.org/TR/2025.10/format/) theme object JSON per preset:
@@ -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,11 +122,10 @@ 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
 
@@ -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
 
@@ -165,6 +170,7 @@ styles/
165
170
  │ └── useCdxFonts.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
@@ -353,77 +353,92 @@
353
353
  --color-chart-simple-secondary: var(--color-brand-950);
354
354
  --color-content-action: var(--color-brand-700);
355
355
  --color-content-action-on-strong: var(--color-white);
356
- --color-content-action-on-subtle: var(--color-brand-950);
356
+ --color-content-action-on-subtle: var(--color-brand-900);
357
357
  --color-content-brand: var(--color-brand-700);
358
358
  --color-content-danger: var(--color-red-700);
359
359
  --color-content-danger-on-strong: var(--color-white);
360
360
  --color-content-danger-on-subtle: var(--color-red-900);
361
- --color-content-info: var(--color-sky-500);
361
+ --color-content-info: var(--color-sky-700);
362
362
  --color-content-info-on-strong: var(--color-white);
363
363
  --color-content-info-on-subtle: var(--color-sky-900);
364
364
  --color-content-link: var(--color-blue-600);
365
365
  --color-content-link-visited: var(--color-purple-800);
366
+ --color-content-neutral-on-strong: var(--color-white);
367
+ --color-content-neutral-on-subtle: var(--color-base-900);
366
368
  --color-content-primary: var(--color-base-950);
367
369
  --color-content-secondary: var(--color-base-800);
368
370
  --color-content-selected: var(--color-brand-700);
369
- --color-content-success: var(--color-green-600);
371
+ --color-content-success: var(--color-green-700);
370
372
  --color-content-success-on-strong: var(--color-white);
371
373
  --color-content-success-on-subtle: var(--color-green-900);
372
374
  --color-content-tertiary: var(--color-base-600);
373
- --color-content-warning: var(--color-amber-600);
375
+ --color-content-warning: var(--color-amber-700);
374
376
  --color-content-warning-on-strong: var(--color-black);
375
377
  --color-content-warning-on-subtle: var(--color-amber-900);
376
378
  --color-stroke-action: var(--color-brand-700);
377
379
  --color-stroke-danger: var(--color-red-700);
378
380
  --color-stroke-focus: var(--color-brand-700);
379
381
  --color-stroke-hover: var(--color-base-950);
380
- --color-stroke-info: var(--color-sky-500);
382
+ --color-stroke-info: var(--color-sky-700);
381
383
  --color-stroke-primary: var(--color-base-500);
382
384
  --color-stroke-ring: var(--color-base-950);
383
385
  --color-stroke-secondary: var(--color-base-100);
384
- --color-stroke-success: var(--color-green-500);
385
- --color-stroke-warning: var(--color-amber-600);
386
+ --color-stroke-success: var(--color-green-700);
387
+ --color-stroke-warning: var(--color-amber-700);
386
388
  --color-surface-accent-core: var(--color-accent-input);
387
389
  --color-surface-accent-strong: var(--color-accent-700);
390
+ --color-surface-accent-subtle: var(--color-accent-200);
391
+ --color-surface-accent-tint: var(--color-accent-100);
388
392
  --color-surface-action-strong: var(--color-brand-700);
389
- --color-surface-action-strong-active: var(--color-brand-800);
393
+ --color-surface-action-strong-active: var(--color-brand-900);
390
394
  --color-surface-action-strong-hover: var(--color-brand-800);
391
- --color-surface-action-subtle: var(--color-brand-300);
395
+ --color-surface-action-subtle: var(--color-brand-200);
392
396
  --color-surface-action-subtle-active: var(--color-brand-400);
393
- --color-surface-action-subtle-hover: var(--color-brand-400);
397
+ --color-surface-action-subtle-hover: var(--color-brand-300);
394
398
  --color-surface-action-tint: var(--color-brand-100);
395
- --color-surface-action-tint-active: var(--color-brand-200);
399
+ --color-surface-action-tint-active: var(--color-brand-300);
396
400
  --color-surface-action-tint-hover: var(--color-brand-200);
397
401
  --color-surface-background: var(--color-base-100);
398
402
  --color-surface-brand-core: var(--color-brand-input);
399
403
  --color-surface-brand-strong: var(--color-brand-700);
404
+ --color-surface-brand-subtle: var(--color-brand-200);
405
+ --color-surface-brand-tint: var(--color-brand-100);
400
406
  --color-surface-danger-strong: var(--color-red-700);
401
- --color-surface-danger-strong-active: var(--color-red-800);
407
+ --color-surface-danger-strong-active: var(--color-red-900);
402
408
  --color-surface-danger-strong-hover: var(--color-red-800);
403
409
  --color-surface-danger-subtle: var(--color-red-200);
404
- --color-surface-danger-subtle-active: var(--color-red-300);
410
+ --color-surface-danger-subtle-active: var(--color-red-400);
405
411
  --color-surface-danger-subtle-hover: var(--color-red-300);
406
412
  --color-surface-danger-tint: var(--color-red-100);
407
- --color-surface-danger-tint-active: var(--color-red-200);
413
+ --color-surface-danger-tint-active: var(--color-red-300);
408
414
  --color-surface-danger-tint-hover: var(--color-red-200);
409
415
  --color-surface-info-strong: var(--color-sky-500);
410
416
  --color-surface-info-subtle: var(--color-sky-200);
411
417
  --color-surface-info-tint: var(--color-sky-100);
418
+ --color-surface-info-tint-active: var(--color-sky-300);
419
+ --color-surface-info-tint-hover: var(--color-sky-200);
420
+ --color-surface-neutral-strong: var(--color-base-700);
412
421
  --color-surface-neutral-subtle: var(--color-base-200);
413
422
  --color-surface-neutral-tint: var(--color-base-100);
423
+ --color-surface-neutral-tint-active: var(--color-base-300);
424
+ --color-surface-neutral-tint-hover: var(--color-base-200);
414
425
  --color-surface-primary: var(--color-white);
415
- --color-surface-primary-active: var(--color-base-100);
426
+ --color-surface-primary-active: var(--color-base-200);
416
427
  --color-surface-primary-hover: var(--color-base-100);
417
428
  --color-surface-secondary: var(--color-base-100);
418
- --color-surface-secondary-active: var(--color-base-200);
429
+ --color-surface-secondary-active: var(--color-base-300);
419
430
  --color-surface-secondary-hover: var(--color-base-200);
420
431
  --color-surface-success-strong: var(--color-green-600);
421
432
  --color-surface-success-subtle: var(--color-green-200);
422
433
  --color-surface-success-tint: var(--color-green-100);
434
+ --color-surface-success-tint-active: var(--color-green-300);
435
+ --color-surface-success-tint-hover: var(--color-green-200);
423
436
  --color-surface-tertiary: var(--color-brand-100);
424
437
  --color-surface-warning-strong: var(--color-amber-400);
425
438
  --color-surface-warning-subtle: var(--color-amber-200);
426
439
  --color-surface-warning-tint: var(--color-amber-100);
440
+ --color-surface-warning-tint-active: var(--color-amber-300);
441
+ --color-surface-warning-tint-hover: var(--color-amber-200);
427
442
  --font-body: var(--font-sans);
428
443
  --font-body-bold: var(--font-sans-bold);
429
444
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -462,77 +477,92 @@
462
477
  --color-chart-simple-secondary: var(--color-brand-950);
463
478
  --color-content-action: var(--color-brand-700);
464
479
  --color-content-action-on-strong: var(--color-white);
465
- --color-content-action-on-subtle: var(--color-brand-950);
480
+ --color-content-action-on-subtle: var(--color-brand-900);
466
481
  --color-content-brand: var(--color-brand-700);
467
482
  --color-content-danger: var(--color-red-700);
468
483
  --color-content-danger-on-strong: var(--color-white);
469
484
  --color-content-danger-on-subtle: var(--color-red-900);
470
- --color-content-info: var(--color-sky-500);
485
+ --color-content-info: var(--color-sky-700);
471
486
  --color-content-info-on-strong: var(--color-white);
472
487
  --color-content-info-on-subtle: var(--color-sky-900);
473
488
  --color-content-link: var(--color-blue-600);
474
489
  --color-content-link-visited: var(--color-purple-800);
490
+ --color-content-neutral-on-strong: var(--color-white);
491
+ --color-content-neutral-on-subtle: var(--color-base-900);
475
492
  --color-content-primary: var(--color-base-950);
476
493
  --color-content-secondary: var(--color-base-800);
477
494
  --color-content-selected: var(--color-brand-700);
478
- --color-content-success: var(--color-green-600);
495
+ --color-content-success: var(--color-green-700);
479
496
  --color-content-success-on-strong: var(--color-white);
480
497
  --color-content-success-on-subtle: var(--color-green-900);
481
498
  --color-content-tertiary: var(--color-base-600);
482
- --color-content-warning: var(--color-amber-600);
499
+ --color-content-warning: var(--color-amber-700);
483
500
  --color-content-warning-on-strong: var(--color-black);
484
501
  --color-content-warning-on-subtle: var(--color-amber-900);
485
502
  --color-stroke-action: var(--color-brand-700);
486
503
  --color-stroke-danger: var(--color-red-700);
487
504
  --color-stroke-focus: var(--color-brand-700);
488
505
  --color-stroke-hover: var(--color-base-950);
489
- --color-stroke-info: var(--color-sky-500);
506
+ --color-stroke-info: var(--color-sky-700);
490
507
  --color-stroke-primary: var(--color-base-500);
491
508
  --color-stroke-ring: var(--color-base-950);
492
509
  --color-stroke-secondary: var(--color-base-100);
493
- --color-stroke-success: var(--color-green-500);
494
- --color-stroke-warning: var(--color-amber-600);
510
+ --color-stroke-success: var(--color-green-700);
511
+ --color-stroke-warning: var(--color-amber-700);
495
512
  --color-surface-accent-core: var(--color-accent-input);
496
513
  --color-surface-accent-strong: var(--color-accent-700);
514
+ --color-surface-accent-subtle: var(--color-accent-200);
515
+ --color-surface-accent-tint: var(--color-accent-100);
497
516
  --color-surface-action-strong: var(--color-brand-700);
498
- --color-surface-action-strong-active: var(--color-brand-800);
517
+ --color-surface-action-strong-active: var(--color-brand-900);
499
518
  --color-surface-action-strong-hover: var(--color-brand-800);
500
- --color-surface-action-subtle: var(--color-brand-300);
519
+ --color-surface-action-subtle: var(--color-brand-200);
501
520
  --color-surface-action-subtle-active: var(--color-brand-400);
502
- --color-surface-action-subtle-hover: var(--color-brand-400);
521
+ --color-surface-action-subtle-hover: var(--color-brand-300);
503
522
  --color-surface-action-tint: var(--color-brand-100);
504
- --color-surface-action-tint-active: var(--color-brand-200);
523
+ --color-surface-action-tint-active: var(--color-brand-300);
505
524
  --color-surface-action-tint-hover: var(--color-brand-200);
506
525
  --color-surface-background: var(--color-base-100);
507
526
  --color-surface-brand-core: var(--color-brand-input);
508
527
  --color-surface-brand-strong: var(--color-brand-700);
528
+ --color-surface-brand-subtle: var(--color-brand-200);
529
+ --color-surface-brand-tint: var(--color-brand-100);
509
530
  --color-surface-danger-strong: var(--color-red-700);
510
- --color-surface-danger-strong-active: var(--color-red-800);
531
+ --color-surface-danger-strong-active: var(--color-red-900);
511
532
  --color-surface-danger-strong-hover: var(--color-red-800);
512
533
  --color-surface-danger-subtle: var(--color-red-200);
513
- --color-surface-danger-subtle-active: var(--color-red-300);
534
+ --color-surface-danger-subtle-active: var(--color-red-400);
514
535
  --color-surface-danger-subtle-hover: var(--color-red-300);
515
536
  --color-surface-danger-tint: var(--color-red-100);
516
- --color-surface-danger-tint-active: var(--color-red-200);
537
+ --color-surface-danger-tint-active: var(--color-red-300);
517
538
  --color-surface-danger-tint-hover: var(--color-red-200);
518
539
  --color-surface-info-strong: var(--color-sky-500);
519
540
  --color-surface-info-subtle: var(--color-sky-200);
520
541
  --color-surface-info-tint: var(--color-sky-100);
542
+ --color-surface-info-tint-active: var(--color-sky-300);
543
+ --color-surface-info-tint-hover: var(--color-sky-200);
544
+ --color-surface-neutral-strong: var(--color-base-700);
521
545
  --color-surface-neutral-subtle: var(--color-base-200);
522
546
  --color-surface-neutral-tint: var(--color-base-100);
547
+ --color-surface-neutral-tint-active: var(--color-base-300);
548
+ --color-surface-neutral-tint-hover: var(--color-base-200);
523
549
  --color-surface-primary: var(--color-white);
524
- --color-surface-primary-active: var(--color-base-100);
550
+ --color-surface-primary-active: var(--color-base-200);
525
551
  --color-surface-primary-hover: var(--color-base-100);
526
552
  --color-surface-secondary: var(--color-base-100);
527
- --color-surface-secondary-active: var(--color-base-200);
553
+ --color-surface-secondary-active: var(--color-base-300);
528
554
  --color-surface-secondary-hover: var(--color-base-200);
529
555
  --color-surface-success-strong: var(--color-green-600);
530
556
  --color-surface-success-subtle: var(--color-green-200);
531
557
  --color-surface-success-tint: var(--color-green-100);
558
+ --color-surface-success-tint-active: var(--color-green-300);
559
+ --color-surface-success-tint-hover: var(--color-green-200);
532
560
  --color-surface-tertiary: var(--color-brand-100);
533
561
  --color-surface-warning-strong: var(--color-amber-400);
534
562
  --color-surface-warning-subtle: var(--color-amber-200);
535
563
  --color-surface-warning-tint: var(--color-amber-100);
564
+ --color-surface-warning-tint-active: var(--color-amber-300);
565
+ --color-surface-warning-tint-hover: var(--color-amber-200);
536
566
  --font-body: var(--font-sans);
537
567
  --font-body-bold: var(--font-sans-bold);
538
568
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -582,6 +612,8 @@
582
612
  --color-content-info-on-subtle: var(--color-sky-900);
583
613
  --color-content-link: var(--color-white);
584
614
  --color-content-link-visited: var(--color-purple-200);
615
+ --color-content-neutral-on-strong: var(--color-base-900);
616
+ --color-content-neutral-on-subtle: var(--color-base-100);
585
617
  --color-content-primary: var(--color-white);
586
618
  --color-content-secondary: var(--color-base-100);
587
619
  --color-content-selected: var(--color-brand-100);
@@ -603,46 +635,59 @@
603
635
  --color-stroke-success: var(--color-green-200);
604
636
  --color-stroke-warning: var(--color-amber-300);
605
637
  --color-surface-accent-core: var(--color-accent-input);
606
- --color-surface-accent-strong: var(--color-accent-400);
638
+ --color-surface-accent-strong: var(--color-accent-300);
639
+ --color-surface-accent-subtle: var(--color-accent-700);
640
+ --color-surface-accent-tint: var(--color-accent-900);
607
641
  --color-surface-action-strong: var(--color-brand-300);
608
- --color-surface-action-strong-active: var(--color-brand-200);
642
+ --color-surface-action-strong-active: var(--color-brand-100);
609
643
  --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);
644
+ --color-surface-action-subtle: var(--color-brand-800);
645
+ --color-surface-action-subtle-active: var(--color-brand-600);
646
+ --color-surface-action-subtle-hover: var(--color-brand-700);
613
647
  --color-surface-action-tint: var(--color-brand-900);
614
- --color-surface-action-tint-active: var(--color-brand-800);
648
+ --color-surface-action-tint-active: var(--color-brand-700);
615
649
  --color-surface-action-tint-hover: var(--color-brand-800);
616
650
  --color-surface-background: var(--color-base-900);
617
651
  --color-surface-brand-core: var(--color-brand-input);
618
- --color-surface-brand-strong: var(--color-brand-400);
652
+ --color-surface-brand-strong: var(--color-brand-300);
653
+ --color-surface-brand-subtle: var(--color-brand-700);
654
+ --color-surface-brand-tint: var(--color-brand-900);
619
655
  --color-surface-danger-strong: var(--color-red-200);
620
- --color-surface-danger-strong-active: var(--color-red-100);
656
+ --color-surface-danger-strong-active: var(--color-red-50);
621
657
  --color-surface-danger-strong-hover: var(--color-red-100);
622
658
  --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);
659
+ --color-surface-danger-subtle-active: var(--color-red-500);
660
+ --color-surface-danger-subtle-hover: var(--color-red-600);
625
661
  --color-surface-danger-tint: var(--color-red-900);
626
- --color-surface-danger-tint-active: var(--color-red-800);
662
+ --color-surface-danger-tint-active: var(--color-red-700);
627
663
  --color-surface-danger-tint-hover: var(--color-red-800);
628
664
  --color-surface-info-strong: var(--color-sky-300);
629
665
  --color-surface-info-subtle: var(--color-sky-700);
630
666
  --color-surface-info-tint: var(--color-sky-900);
667
+ --color-surface-info-tint-active: var(--color-sky-700);
668
+ --color-surface-info-tint-hover: var(--color-sky-800);
669
+ --color-surface-neutral-strong: var(--color-base-200);
631
670
  --color-surface-neutral-subtle: var(--color-base-800);
632
671
  --color-surface-neutral-tint: var(--color-base-900);
672
+ --color-surface-neutral-tint-active: var(--color-base-700);
673
+ --color-surface-neutral-tint-hover: var(--color-base-800);
633
674
  --color-surface-primary: var(--color-base-950);
634
- --color-surface-primary-active: var(--color-base-900);
675
+ --color-surface-primary-active: var(--color-base-800);
635
676
  --color-surface-primary-hover: var(--color-base-900);
636
677
  --color-surface-secondary: var(--color-base-900);
637
- --color-surface-secondary-active: var(--color-base-800);
678
+ --color-surface-secondary-active: var(--color-base-700);
638
679
  --color-surface-secondary-hover: var(--color-base-800);
639
680
  --color-surface-success-strong: var(--color-green-300);
640
681
  --color-surface-success-subtle: var(--color-green-700);
641
682
  --color-surface-success-tint: var(--color-green-900);
683
+ --color-surface-success-tint-active: var(--color-green-700);
684
+ --color-surface-success-tint-hover: var(--color-green-800);
642
685
  --color-surface-tertiary: var(--color-brand-900);
643
686
  --color-surface-warning-strong: var(--color-amber-300);
644
687
  --color-surface-warning-subtle: var(--color-amber-700);
645
688
  --color-surface-warning-tint: var(--color-amber-900);
689
+ --color-surface-warning-tint-active: var(--color-amber-700);
690
+ --color-surface-warning-tint-hover: var(--color-amber-800);
646
691
  --font-body: var(--font-sans);
647
692
  --font-body-bold: var(--font-sans-bold);
648
693
  --font-body-bold-italic: var(--font-sans-bold-italic);
package/css/vanilla.css CHANGED
@@ -376,77 +376,92 @@
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);
420
424
  --color-surface-background: var(--color-base-100);
421
425
  --color-surface-brand-core: var(--color-brand-input);
422
426
  --color-surface-brand-strong: var(--color-brand-700);
427
+ --color-surface-brand-subtle: var(--color-brand-200);
428
+ --color-surface-brand-tint: var(--color-brand-100);
423
429
  --color-surface-danger-strong: var(--color-red-700);
424
- --color-surface-danger-strong-active: var(--color-red-800);
430
+ --color-surface-danger-strong-active: var(--color-red-900);
425
431
  --color-surface-danger-strong-hover: var(--color-red-800);
426
432
  --color-surface-danger-subtle: var(--color-red-200);
427
- --color-surface-danger-subtle-active: var(--color-red-300);
433
+ --color-surface-danger-subtle-active: var(--color-red-400);
428
434
  --color-surface-danger-subtle-hover: var(--color-red-300);
429
435
  --color-surface-danger-tint: var(--color-red-100);
430
- --color-surface-danger-tint-active: var(--color-red-200);
436
+ --color-surface-danger-tint-active: var(--color-red-300);
431
437
  --color-surface-danger-tint-hover: var(--color-red-200);
432
438
  --color-surface-info-strong: var(--color-sky-500);
433
439
  --color-surface-info-subtle: var(--color-sky-200);
434
440
  --color-surface-info-tint: var(--color-sky-100);
441
+ --color-surface-info-tint-active: var(--color-sky-300);
442
+ --color-surface-info-tint-hover: var(--color-sky-200);
443
+ --color-surface-neutral-strong: var(--color-base-700);
435
444
  --color-surface-neutral-subtle: var(--color-base-200);
436
445
  --color-surface-neutral-tint: var(--color-base-100);
446
+ --color-surface-neutral-tint-active: var(--color-base-300);
447
+ --color-surface-neutral-tint-hover: var(--color-base-200);
437
448
  --color-surface-primary: var(--color-white);
438
- --color-surface-primary-active: var(--color-base-100);
449
+ --color-surface-primary-active: var(--color-base-200);
439
450
  --color-surface-primary-hover: var(--color-base-100);
440
451
  --color-surface-secondary: var(--color-base-100);
441
- --color-surface-secondary-active: var(--color-base-200);
452
+ --color-surface-secondary-active: var(--color-base-300);
442
453
  --color-surface-secondary-hover: var(--color-base-200);
443
454
  --color-surface-success-strong: var(--color-green-600);
444
455
  --color-surface-success-subtle: var(--color-green-200);
445
456
  --color-surface-success-tint: var(--color-green-100);
457
+ --color-surface-success-tint-active: var(--color-green-300);
458
+ --color-surface-success-tint-hover: var(--color-green-200);
446
459
  --color-surface-tertiary: var(--color-brand-100);
447
460
  --color-surface-warning-strong: var(--color-amber-400);
448
461
  --color-surface-warning-subtle: var(--color-amber-200);
449
462
  --color-surface-warning-tint: var(--color-amber-100);
463
+ --color-surface-warning-tint-active: var(--color-amber-300);
464
+ --color-surface-warning-tint-hover: var(--color-amber-200);
450
465
  --font-body: var(--font-sans);
451
466
  --font-body-bold: var(--font-sans-bold);
452
467
  --font-body-bold-italic: var(--font-sans-bold-italic);
@@ -498,6 +513,8 @@
498
513
  --color-content-info-on-subtle: var(--color-sky-900);
499
514
  --color-content-link: var(--color-white);
500
515
  --color-content-link-visited: var(--color-purple-200);
516
+ --color-content-neutral-on-strong: var(--color-base-900);
517
+ --color-content-neutral-on-subtle: var(--color-base-100);
501
518
  --color-content-primary: var(--color-white);
502
519
  --color-content-secondary: var(--color-base-100);
503
520
  --color-content-selected: var(--color-brand-100);
@@ -519,46 +536,59 @@
519
536
  --color-stroke-success: var(--color-green-200);
520
537
  --color-stroke-warning: var(--color-amber-300);
521
538
  --color-surface-accent-core: var(--color-accent-input);
522
- --color-surface-accent-strong: var(--color-accent-400);
539
+ --color-surface-accent-strong: var(--color-accent-300);
540
+ --color-surface-accent-subtle: var(--color-accent-700);
541
+ --color-surface-accent-tint: var(--color-accent-900);
523
542
  --color-surface-action-strong: var(--color-brand-300);
524
- --color-surface-action-strong-active: var(--color-brand-200);
543
+ --color-surface-action-strong-active: var(--color-brand-100);
525
544
  --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);
545
+ --color-surface-action-subtle: var(--color-brand-800);
546
+ --color-surface-action-subtle-active: var(--color-brand-600);
547
+ --color-surface-action-subtle-hover: var(--color-brand-700);
529
548
  --color-surface-action-tint: var(--color-brand-900);
530
- --color-surface-action-tint-active: var(--color-brand-800);
549
+ --color-surface-action-tint-active: var(--color-brand-700);
531
550
  --color-surface-action-tint-hover: var(--color-brand-800);
532
551
  --color-surface-background: var(--color-base-900);
533
552
  --color-surface-brand-core: var(--color-brand-input);
534
- --color-surface-brand-strong: var(--color-brand-400);
553
+ --color-surface-brand-strong: var(--color-brand-300);
554
+ --color-surface-brand-subtle: var(--color-brand-700);
555
+ --color-surface-brand-tint: var(--color-brand-900);
535
556
  --color-surface-danger-strong: var(--color-red-200);
536
- --color-surface-danger-strong-active: var(--color-red-100);
557
+ --color-surface-danger-strong-active: var(--color-red-50);
537
558
  --color-surface-danger-strong-hover: var(--color-red-100);
538
559
  --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);
560
+ --color-surface-danger-subtle-active: var(--color-red-500);
561
+ --color-surface-danger-subtle-hover: var(--color-red-600);
541
562
  --color-surface-danger-tint: var(--color-red-900);
542
- --color-surface-danger-tint-active: var(--color-red-800);
563
+ --color-surface-danger-tint-active: var(--color-red-700);
543
564
  --color-surface-danger-tint-hover: var(--color-red-800);
544
565
  --color-surface-info-strong: var(--color-sky-300);
545
566
  --color-surface-info-subtle: var(--color-sky-700);
546
567
  --color-surface-info-tint: var(--color-sky-900);
568
+ --color-surface-info-tint-active: var(--color-sky-700);
569
+ --color-surface-info-tint-hover: var(--color-sky-800);
570
+ --color-surface-neutral-strong: var(--color-base-200);
547
571
  --color-surface-neutral-subtle: var(--color-base-800);
548
572
  --color-surface-neutral-tint: var(--color-base-900);
573
+ --color-surface-neutral-tint-active: var(--color-base-700);
574
+ --color-surface-neutral-tint-hover: var(--color-base-800);
549
575
  --color-surface-primary: var(--color-base-950);
550
- --color-surface-primary-active: var(--color-base-900);
576
+ --color-surface-primary-active: var(--color-base-800);
551
577
  --color-surface-primary-hover: var(--color-base-900);
552
578
  --color-surface-secondary: var(--color-base-900);
553
- --color-surface-secondary-active: var(--color-base-800);
579
+ --color-surface-secondary-active: var(--color-base-700);
554
580
  --color-surface-secondary-hover: var(--color-base-800);
555
581
  --color-surface-success-strong: var(--color-green-300);
556
582
  --color-surface-success-subtle: var(--color-green-700);
557
583
  --color-surface-success-tint: var(--color-green-900);
584
+ --color-surface-success-tint-active: var(--color-green-700);
585
+ --color-surface-success-tint-hover: var(--color-green-800);
558
586
  --color-surface-tertiary: var(--color-brand-900);
559
587
  --color-surface-warning-strong: var(--color-amber-300);
560
588
  --color-surface-warning-subtle: var(--color-amber-700);
561
589
  --color-surface-warning-tint: var(--color-amber-900);
590
+ --color-surface-warning-tint-active: var(--color-amber-700);
591
+ --color-surface-warning-tint-hover: var(--color-amber-800);
562
592
  --font-body: var(--font-sans);
563
593
  --font-body-bold: var(--font-sans-bold);
564
594
  --font-body-bold-italic: var(--font-sans-bold-italic);
package/lib/commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["_useCdxFonts","require"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;AAwEA,IAAAA,YAAA,GAAAC,OAAA","ignoreList":[]}
1
+ {"version":3,"names":["_useCdxFonts","require"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;AAsEA,IAAAA,YAAA,GAAAC,OAAA","ignoreList":[]}
package/lib/module/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA;;AAOA;;AAKA;;AAOA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiBA;AACA;AACA;AACA;;AAWA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,eAAe","ignoreList":[]}
1
+ {"version":3,"names":["useCdxFonts"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;;AAEA;;AAOA;;AAKA;;AAOA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;;AAiBA;AACA;AACA;AACA;;AAWA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,eAAe","ignoreList":[]}
package/lib/typescript/index.d.ts CHANGED
@@ -17,8 +17,6 @@ export interface ThemeMetadata {
17
17
  /** Override metadata stored under `$extensions.com.candescent.themeOverride`. */
18
18
  export interface ThemeOverrideMetadata {
19
19
  basePreset: string;
20
- fiId: string;
21
- fiName: string;
22
20
  schemaVersion: string;
23
21
  }
24
22
  /**
package/lib/typescript/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,8BAA8B;AAC9B,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC;AAED,qEAAqE;AACrE,MAAM,WAAW,UAAU;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CACxC;AAED,sEAAsE;AACtE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,WAAW,EAAE;QACX,sBAAsB,EAAE,aAAa,CAAC;QACtC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAC;QAClB,IAAI,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,QAAQ,EAAE;QACR,GAAG,EAAE,UAAU,CAAC;QAChB,GAAG,EAAE,UAAU,CAAC;QAChB,OAAO,EAAE,UAAU,CAAC;KACrB,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IACvC,WAAW,CAAC,EAAE;QACZ,8BAA8B,CAAC,EAAE,qBAAqB,CAAC;QACvD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;AACpC,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;AAMjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,8BAA8B;AAC9B,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACvC;AAED,qEAAqE;AACrE,MAAM,WAAW,UAAU;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;CACxC;AAED,sEAAsE;AACtE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,WAAW,EAAE;QACX,sBAAsB,EAAE,aAAa,CAAC;QACtC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,KAAK,EAAE;QACL,KAAK,EAAE,UAAU,CAAC;QAClB,IAAI,EAAE,UAAU,CAAC;KAClB,CAAC;IACF,QAAQ,EAAE;QACR,GAAG,EAAE,UAAU,CAAC;QAChB,GAAG,EAAE,UAAU,CAAC;QAChB,OAAO,EAAE,UAAU,CAAC;KACrB,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IACvC,WAAW,CAAC,EAAE;QACZ,8BAA8B,CAAC,EAAE,qBAAqB,CAAC;QACvD,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;AACpC,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;AAMjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cdx-ui/styles",
3
- "version": "0.0.1-beta.3",
3
+ "version": "0.0.1-beta.31",
4
4
  "main": "lib/commonjs/index.js",
5
5
  "module": "lib/module/index.js",
6
6
  "react-native": "src/index.ts",
@@ -53,7 +53,7 @@
53
53
  "@expo-google-fonts/manrope": "0.4.2",
54
54
  "@expo-google-fonts/outfit": "0.4.3",
55
55
  "@expo-google-fonts/public-sans": "0.4.2",
56
- "@cdx-ui/utils": "0.0.1-beta.3"
56
+ "@cdx-ui/utils": "0.0.1-beta.31"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "react": "^18.2.0 || ^19.0.0",
package/src/index.ts CHANGED
@@ -24,8 +24,6 @@ export interface ThemeMetadata {
24
24
  /** Override metadata stored under `$extensions.com.candescent.themeOverride`. */
25
25
  export interface ThemeOverrideMetadata {
26
26
  basePreset: string;
27
- fiId: string;
28
- fiName: string;
29
27
  schemaVersion: string;
30
28
  }
31
29
 
package/tokens/presets/.manifest.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "poise.json": "8de6657e555788e1d9e10ae9c6868a2a886bdcb6bfdf01bdd2e3f628f6704586",
2
+ "poise.json": "99bc7ec5b0c376840338cacdb6ccc98f63973e2e5518c09b636247f2eb5fb53e",
3
3
  "prestige.json": "7828f391d212be0726839297dfa6638b575187faa6fc9eecd7d64219eaadf403",
4
4
  "pulse.json": "1cbc3480aae055ae03360b243664e9a95e2eca96be3126334ea062d0d38d6033"
5
5
  }
package/tokens/presets/poise.json CHANGED
@@ -2344,7 +2344,7 @@
2344
2344
  },
2345
2345
  "action-on-subtle": {
2346
2346
  "$type": "color",
2347
- "$value": "{color.brand.950}"
2347
+ "$value": "{color.brand.900}"
2348
2348
  },
2349
2349
  "brand": {
2350
2350
  "$type": "color",
@@ -2364,7 +2364,7 @@
2364
2364
  },
2365
2365
  "info": {
2366
2366
  "$type": "color",
2367
- "$value": "{color.sky.500}"
2367
+ "$value": "{color.sky.700}"
2368
2368
  },
2369
2369
  "info-on-strong": {
2370
2370
  "$type": "color",
@@ -2382,6 +2382,14 @@
2382
2382
  "$type": "color",
2383
2383
  "$value": "{color.purple.800}"
2384
2384
  },
2385
+ "neutral-on-strong": {
2386
+ "$type": "color",
2387
+ "$value": "{color.white}"
2388
+ },
2389
+ "neutral-on-subtle": {
2390
+ "$type": "color",
2391
+ "$value": "{color.base.900}"
2392
+ },
2385
2393
  "primary": {
2386
2394
  "$type": "color",
2387
2395
  "$value": "{color.base.950}"
@@ -2396,7 +2404,7 @@
2396
2404
  },
2397
2405
  "success": {
2398
2406
  "$type": "color",
2399
- "$value": "{color.green.600}"
2407
+ "$value": "{color.green.700}"
2400
2408
  },
2401
2409
  "success-on-strong": {
2402
2410
  "$type": "color",
@@ -2412,7 +2420,7 @@
2412
2420
  },
2413
2421
  "warning": {
2414
2422
  "$type": "color",
2415
- "$value": "{color.amber.600}"
2423
+ "$value": "{color.amber.700}"
2416
2424
  },
2417
2425
  "warning-on-strong": {
2418
2426
  "$type": "color",
@@ -2442,7 +2450,7 @@
2442
2450
  },
2443
2451
  "info": {
2444
2452
  "$type": "color",
2445
- "$value": "{color.sky.500}"
2453
+ "$value": "{color.sky.700}"
2446
2454
  },
2447
2455
  "primary": {
2448
2456
  "$type": "color",
@@ -2458,11 +2466,11 @@
2458
2466
  },
2459
2467
  "success": {
2460
2468
  "$type": "color",
2461
- "$value": "{color.green.500}"
2469
+ "$value": "{color.green.700}"
2462
2470
  },
2463
2471
  "warning": {
2464
2472
  "$type": "color",
2465
- "$value": "{color.amber.600}"
2473
+ "$value": "{color.amber.700}"
2466
2474
  }
2467
2475
  },
2468
2476
  "surface": {
@@ -2474,6 +2482,14 @@
2474
2482
  "strong": {
2475
2483
  "$type": "color",
2476
2484
  "$value": "{color.accent.700}"
2485
+ },
2486
+ "subtle": {
2487
+ "$type": "color",
2488
+ "$value": "{color.accent.200}"
2489
+ },
2490
+ "tint": {
2491
+ "$type": "color",
2492
+ "$value": "{color.accent.100}"
2477
2493
  }
2478
2494
  },
2479
2495
  "action": {
@@ -2483,7 +2499,7 @@
2483
2499
  },
2484
2500
  "strong-active": {
2485
2501
  "$type": "color",
2486
- "$value": "{color.brand.800}"
2502
+ "$value": "{color.brand.900}"
2487
2503
  },
2488
2504
  "strong-hover": {
2489
2505
  "$type": "color",
@@ -2491,7 +2507,7 @@
2491
2507
  },
2492
2508
  "subtle": {
2493
2509
  "$type": "color",
2494
- "$value": "{color.brand.300}"
2510
+ "$value": "{color.brand.200}"
2495
2511
  },
2496
2512
  "subtle-active": {
2497
2513
  "$type": "color",
@@ -2499,7 +2515,7 @@
2499
2515
  },
2500
2516
  "subtle-hover": {
2501
2517
  "$type": "color",
2502
- "$value": "{color.brand.400}"
2518
+ "$value": "{color.brand.300}"
2503
2519
  },
2504
2520
  "tint": {
2505
2521
  "$type": "color",
@@ -2507,7 +2523,7 @@
2507
2523
  },
2508
2524
  "tint-active": {
2509
2525
  "$type": "color",
2510
- "$value": "{color.brand.200}"
2526
+ "$value": "{color.brand.300}"
2511
2527
  },
2512
2528
  "tint-hover": {
2513
2529
  "$type": "color",
@@ -2526,6 +2542,14 @@
2526
2542
  "strong": {
2527
2543
  "$type": "color",
2528
2544
  "$value": "{color.brand.700}"
2545
+ },
2546
+ "subtle": {
2547
+ "$type": "color",
2548
+ "$value": "{color.brand.200}"
2549
+ },
2550
+ "tint": {
2551
+ "$type": "color",
2552
+ "$value": "{color.brand.100}"
2529
2553
  }
2530
2554
  },
2531
2555
  "danger": {
@@ -2535,7 +2559,7 @@
2535
2559
  },
2536
2560
  "strong-active": {
2537
2561
  "$type": "color",
2538
- "$value": "{color.red.800}"
2562
+ "$value": "{color.red.900}"
2539
2563
  },
2540
2564
  "strong-hover": {
2541
2565
  "$type": "color",
@@ -2547,7 +2571,7 @@
2547
2571
  },
2548
2572
  "subtle-active": {
2549
2573
  "$type": "color",
2550
- "$value": "{color.red.300}"
2574
+ "$value": "{color.red.400}"
2551
2575
  },
2552
2576
  "subtle-hover": {
2553
2577
  "$type": "color",
@@ -2559,7 +2583,7 @@
2559
2583
  },
2560
2584
  "tint-active": {
2561
2585
  "$type": "color",
2562
- "$value": "{color.red.200}"
2586
+ "$value": "{color.red.300}"
2563
2587
  },
2564
2588
  "tint-hover": {
2565
2589
  "$type": "color",
@@ -2578,9 +2602,21 @@
2578
2602
  "tint": {
2579
2603
  "$type": "color",
2580
2604
  "$value": "{color.sky.100}"
2605
+ },
2606
+ "tint-active": {
2607
+ "$type": "color",
2608
+ "$value": "{color.sky.300}"
2609
+ },
2610
+ "tint-hover": {
2611
+ "$type": "color",
2612
+ "$value": "{color.sky.200}"
2581
2613
  }
2582
2614
  },
2583
2615
  "neutral": {
2616
+ "strong": {
2617
+ "$type": "color",
2618
+ "$value": "{color.base.700}"
2619
+ },
2584
2620
  "subtle": {
2585
2621
  "$type": "color",
2586
2622
  "$value": "{color.base.200}"
@@ -2588,6 +2624,14 @@
2588
2624
  "tint": {
2589
2625
  "$type": "color",
2590
2626
  "$value": "{color.base.100}"
2627
+ },
2628
+ "tint-active": {
2629
+ "$type": "color",
2630
+ "$value": "{color.base.300}"
2631
+ },
2632
+ "tint-hover": {
2633
+ "$type": "color",
2634
+ "$value": "{color.base.200}"
2591
2635
  }
2592
2636
  },
2593
2637
  "primary": {
@@ -2596,7 +2640,7 @@
2596
2640
  },
2597
2641
  "primary-active": {
2598
2642
  "$type": "color",
2599
- "$value": "{color.base.100}"
2643
+ "$value": "{color.base.200}"
2600
2644
  },
2601
2645
  "primary-hover": {
2602
2646
  "$type": "color",
@@ -2608,7 +2652,7 @@
2608
2652
  },
2609
2653
  "secondary-active": {
2610
2654
  "$type": "color",
2611
- "$value": "{color.base.200}"
2655
+ "$value": "{color.base.300}"
2612
2656
  },
2613
2657
  "secondary-hover": {
2614
2658
  "$type": "color",
@@ -2626,6 +2670,14 @@
2626
2670
  "tint": {
2627
2671
  "$type": "color",
2628
2672
  "$value": "{color.green.100}"
2673
+ },
2674
+ "tint-active": {
2675
+ "$type": "color",
2676
+ "$value": "{color.green.300}"
2677
+ },
2678
+ "tint-hover": {
2679
+ "$type": "color",
2680
+ "$value": "{color.green.200}"
2629
2681
  }
2630
2682
  },
2631
2683
  "tertiary": {
@@ -2644,6 +2696,14 @@
2644
2696
  "tint": {
2645
2697
  "$type": "color",
2646
2698
  "$value": "{color.amber.100}"
2699
+ },
2700
+ "tint-active": {
2701
+ "$type": "color",
2702
+ "$value": "{color.amber.300}"
2703
+ },
2704
+ "tint-hover": {
2705
+ "$type": "color",
2706
+ "$value": "{color.amber.200}"
2647
2707
  }
2648
2708
  }
2649
2709
  }
@@ -2856,6 +2916,14 @@
2856
2916
  "$type": "color",
2857
2917
  "$value": "{color.purple.200}"
2858
2918
  },
2919
+ "neutral-on-strong": {
2920
+ "$type": "color",
2921
+ "$value": "{color.base.900}"
2922
+ },
2923
+ "neutral-on-subtle": {
2924
+ "$type": "color",
2925
+ "$value": "{color.base.100}"
2926
+ },
2859
2927
  "primary": {
2860
2928
  "$type": "color",
2861
2929
  "$value": "{color.white}"
@@ -2947,7 +3015,15 @@
2947
3015
  },
2948
3016
  "strong": {
2949
3017
  "$type": "color",
2950
- "$value": "{color.accent.400}"
3018
+ "$value": "{color.accent.300}"
3019
+ },
3020
+ "subtle": {
3021
+ "$type": "color",
3022
+ "$value": "{color.accent.700}"
3023
+ },
3024
+ "tint": {
3025
+ "$type": "color",
3026
+ "$value": "{color.accent.900}"
2951
3027
  }
2952
3028
  },
2953
3029
  "action": {
@@ -2957,7 +3033,7 @@
2957
3033
  },
2958
3034
  "strong-active": {
2959
3035
  "$type": "color",
2960
- "$value": "{color.brand.200}"
3036
+ "$value": "{color.brand.100}"
2961
3037
  },
2962
3038
  "strong-hover": {
2963
3039
  "$type": "color",
@@ -2965,15 +3041,15 @@
2965
3041
  },
2966
3042
  "subtle": {
2967
3043
  "$type": "color",
2968
- "$value": "{color.brand.700}"
3044
+ "$value": "{color.brand.800}"
2969
3045
  },
2970
3046
  "subtle-active": {
2971
3047
  "$type": "color",
2972
- "$value": "{color.brand.800}"
3048
+ "$value": "{color.brand.600}"
2973
3049
  },
2974
3050
  "subtle-hover": {
2975
3051
  "$type": "color",
2976
- "$value": "{color.brand.800}"
3052
+ "$value": "{color.brand.700}"
2977
3053
  },
2978
3054
  "tint": {
2979
3055
  "$type": "color",
@@ -2981,7 +3057,7 @@
2981
3057
  },
2982
3058
  "tint-active": {
2983
3059
  "$type": "color",
2984
- "$value": "{color.brand.800}"
3060
+ "$value": "{color.brand.700}"
2985
3061
  },
2986
3062
  "tint-hover": {
2987
3063
  "$type": "color",
@@ -2999,7 +3075,15 @@
2999
3075
  },
3000
3076
  "strong": {
3001
3077
  "$type": "color",
3002
- "$value": "{color.brand.400}"
3078
+ "$value": "{color.brand.300}"
3079
+ },
3080
+ "subtle": {
3081
+ "$type": "color",
3082
+ "$value": "{color.brand.700}"
3083
+ },
3084
+ "tint": {
3085
+ "$type": "color",
3086
+ "$value": "{color.brand.900}"
3003
3087
  }
3004
3088
  },
3005
3089
  "danger": {
@@ -3009,7 +3093,7 @@
3009
3093
  },
3010
3094
  "strong-active": {
3011
3095
  "$type": "color",
3012
- "$value": "{color.red.100}"
3096
+ "$value": "{color.red.50}"
3013
3097
  },
3014
3098
  "strong-hover": {
3015
3099
  "$type": "color",
@@ -3021,11 +3105,11 @@
3021
3105
  },
3022
3106
  "subtle-active": {
3023
3107
  "$type": "color",
3024
- "$value": "{color.red.800}"
3108
+ "$value": "{color.red.500}"
3025
3109
  },
3026
3110
  "subtle-hover": {
3027
3111
  "$type": "color",
3028
- "$value": "{color.red.800}"
3112
+ "$value": "{color.red.600}"
3029
3113
  },
3030
3114
  "tint": {
3031
3115
  "$type": "color",
@@ -3033,7 +3117,7 @@
3033
3117
  },
3034
3118
  "tint-active": {
3035
3119
  "$type": "color",
3036
- "$value": "{color.red.800}"
3120
+ "$value": "{color.red.700}"
3037
3121
  },
3038
3122
  "tint-hover": {
3039
3123
  "$type": "color",
@@ -3052,9 +3136,21 @@
3052
3136
  "tint": {
3053
3137
  "$type": "color",
3054
3138
  "$value": "{color.sky.900}"
3139
+ },
3140
+ "tint-active": {
3141
+ "$type": "color",
3142
+ "$value": "{color.sky.700}"
3143
+ },
3144
+ "tint-hover": {
3145
+ "$type": "color",
3146
+ "$value": "{color.sky.800}"
3055
3147
  }
3056
3148
  },
3057
3149
  "neutral": {
3150
+ "strong": {
3151
+ "$type": "color",
3152
+ "$value": "{color.base.200}"
3153
+ },
3058
3154
  "subtle": {
3059
3155
  "$type": "color",
3060
3156
  "$value": "{color.base.800}"
@@ -3062,6 +3158,14 @@
3062
3158
  "tint": {
3063
3159
  "$type": "color",
3064
3160
  "$value": "{color.base.900}"
3161
+ },
3162
+ "tint-active": {
3163
+ "$type": "color",
3164
+ "$value": "{color.base.700}"
3165
+ },
3166
+ "tint-hover": {
3167
+ "$type": "color",
3168
+ "$value": "{color.base.800}"
3065
3169
  }
3066
3170
  },
3067
3171
  "primary": {
@@ -3070,7 +3174,7 @@
3070
3174
  },
3071
3175
  "primary-active": {
3072
3176
  "$type": "color",
3073
- "$value": "{color.base.900}"
3177
+ "$value": "{color.base.800}"
3074
3178
  },
3075
3179
  "primary-hover": {
3076
3180
  "$type": "color",
@@ -3082,7 +3186,7 @@
3082
3186
  },
3083
3187
  "secondary-active": {
3084
3188
  "$type": "color",
3085
- "$value": "{color.base.800}"
3189
+ "$value": "{color.base.700}"
3086
3190
  },
3087
3191
  "secondary-hover": {
3088
3192
  "$type": "color",
@@ -3100,6 +3204,14 @@
3100
3204
  "tint": {
3101
3205
  "$type": "color",
3102
3206
  "$value": "{color.green.900}"
3207
+ },
3208
+ "tint-active": {
3209
+ "$type": "color",
3210
+ "$value": "{color.green.700}"
3211
+ },
3212
+ "tint-hover": {
3213
+ "$type": "color",
3214
+ "$value": "{color.green.800}"
3103
3215
  }
3104
3216
  },
3105
3217
  "tertiary": {
@@ -3118,6 +3230,14 @@
3118
3230
  "tint": {
3119
3231
  "$type": "color",
3120
3232
  "$value": "{color.amber.900}"
3233
+ },
3234
+ "tint-active": {
3235
+ "$type": "color",
3236
+ "$value": "{color.amber.700}"
3237
+ },
3238
+ "tint-hover": {
3239
+ "$type": "color",
3240
+ "$value": "{color.amber.800}"
3121
3241
  }
3122
3242
  }
3123
3243
  }