@cdx-ui/styles 0.0.1-alpha.39 → 0.0.1-alpha.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.
- package/README.md +7 -1
- package/css/theme.css +56 -56
- package/css/vanilla.css +50 -50
- package/package.json +2 -2
- package/tokens/presets/.manifest.json +3 -3
- package/tokens/presets/poise.json +50 -50
package/README.md
CHANGED
|
@@ -59,6 +59,8 @@ The package exports DTCG-compatible type definitions for theme objects, override
|
|
|
59
59
|
import type {
|
|
60
60
|
ThemeObject,
|
|
61
61
|
ThemeOverride,
|
|
62
|
+
ThemeMetadata,
|
|
63
|
+
ThemeOverrideMetadata,
|
|
62
64
|
TokenGroup,
|
|
63
65
|
TokenValue,
|
|
64
66
|
Mode,
|
|
@@ -66,6 +68,9 @@ import type {
|
|
|
66
68
|
} from '@cdx-ui/styles';
|
|
67
69
|
```
|
|
68
70
|
|
|
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
|
+
|
|
69
74
|
## Token pipeline
|
|
70
75
|
|
|
71
76
|
The pipeline has two stages — **fetch** and **build** — both run from package scripts.
|
|
@@ -156,7 +161,8 @@ styles/
|
|
|
156
161
|
│ ├── build-tokens.mjs # Style Dictionary build + artifact generation
|
|
157
162
|
│ └── validate-font-tokens.mjs # CI check: --font-* values match useCdxFonts keys
|
|
158
163
|
├── src/
|
|
159
|
-
│
|
|
164
|
+
│ ├── index.ts # TypeScript type exports (ThemeObject, ThemeOverride, etc.)
|
|
165
|
+
│ └── useCdxFonts.ts # Font loader hook (expo-font) — loads all preset display fonts
|
|
160
166
|
├── tokens/
|
|
161
167
|
│ └── presets/
|
|
162
168
|
│ ├── poise.json # Poise theme object (build default)
|
package/css/theme.css
CHANGED
|
@@ -374,7 +374,7 @@
|
|
|
374
374
|
--color-content-warning-on-strong: var(--color-black);
|
|
375
375
|
--color-content-warning-on-subtle: var(--color-amber-900);
|
|
376
376
|
--color-stroke-action: var(--color-brand-700);
|
|
377
|
-
--color-stroke-danger: var(--color-red-
|
|
377
|
+
--color-stroke-danger: var(--color-red-700);
|
|
378
378
|
--color-stroke-focus: var(--color-brand-700);
|
|
379
379
|
--color-stroke-hover: var(--color-base-950);
|
|
380
380
|
--color-stroke-info: var(--color-sky-500);
|
|
@@ -384,17 +384,17 @@
|
|
|
384
384
|
--color-stroke-success: var(--color-green-500);
|
|
385
385
|
--color-stroke-warning: var(--color-amber-600);
|
|
386
386
|
--color-surface-accent-core: var(--color-accent-input);
|
|
387
|
-
--color-surface-accent-strong: var(--color-accent-
|
|
387
|
+
--color-surface-accent-strong: var(--color-accent-700);
|
|
388
388
|
--color-surface-action-strong: var(--color-brand-700);
|
|
389
389
|
--color-surface-action-strong-active: var(--color-brand-800);
|
|
390
390
|
--color-surface-action-strong-hover: var(--color-brand-800);
|
|
391
391
|
--color-surface-action-subtle: var(--color-brand-300);
|
|
392
392
|
--color-surface-action-subtle-active: var(--color-brand-400);
|
|
393
393
|
--color-surface-action-subtle-hover: var(--color-brand-400);
|
|
394
|
-
--color-surface-action-tint: var(--color-brand-
|
|
395
|
-
--color-surface-action-tint-active: var(--color-brand-
|
|
396
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
397
|
-
--color-surface-background: var(--color-
|
|
394
|
+
--color-surface-action-tint: var(--color-brand-100);
|
|
395
|
+
--color-surface-action-tint-active: var(--color-brand-200);
|
|
396
|
+
--color-surface-action-tint-hover: var(--color-brand-200);
|
|
397
|
+
--color-surface-background: var(--color-base-100);
|
|
398
398
|
--color-surface-brand-core: var(--color-brand-input);
|
|
399
399
|
--color-surface-brand-strong: var(--color-brand-700);
|
|
400
400
|
--color-surface-danger-strong: var(--color-red-700);
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
--color-content-warning-on-strong: var(--color-black);
|
|
484
484
|
--color-content-warning-on-subtle: var(--color-amber-900);
|
|
485
485
|
--color-stroke-action: var(--color-brand-700);
|
|
486
|
-
--color-stroke-danger: var(--color-red-
|
|
486
|
+
--color-stroke-danger: var(--color-red-700);
|
|
487
487
|
--color-stroke-focus: var(--color-brand-700);
|
|
488
488
|
--color-stroke-hover: var(--color-base-950);
|
|
489
489
|
--color-stroke-info: var(--color-sky-500);
|
|
@@ -493,17 +493,17 @@
|
|
|
493
493
|
--color-stroke-success: var(--color-green-500);
|
|
494
494
|
--color-stroke-warning: var(--color-amber-600);
|
|
495
495
|
--color-surface-accent-core: var(--color-accent-input);
|
|
496
|
-
--color-surface-accent-strong: var(--color-accent-
|
|
496
|
+
--color-surface-accent-strong: var(--color-accent-700);
|
|
497
497
|
--color-surface-action-strong: var(--color-brand-700);
|
|
498
498
|
--color-surface-action-strong-active: var(--color-brand-800);
|
|
499
499
|
--color-surface-action-strong-hover: var(--color-brand-800);
|
|
500
500
|
--color-surface-action-subtle: var(--color-brand-300);
|
|
501
501
|
--color-surface-action-subtle-active: var(--color-brand-400);
|
|
502
502
|
--color-surface-action-subtle-hover: var(--color-brand-400);
|
|
503
|
-
--color-surface-action-tint: var(--color-brand-
|
|
504
|
-
--color-surface-action-tint-active: var(--color-brand-
|
|
505
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
506
|
-
--color-surface-background: var(--color-
|
|
503
|
+
--color-surface-action-tint: var(--color-brand-100);
|
|
504
|
+
--color-surface-action-tint-active: var(--color-brand-200);
|
|
505
|
+
--color-surface-action-tint-hover: var(--color-brand-200);
|
|
506
|
+
--color-surface-background: var(--color-base-100);
|
|
507
507
|
--color-surface-brand-core: var(--color-brand-input);
|
|
508
508
|
--color-surface-brand-strong: var(--color-brand-700);
|
|
509
509
|
--color-surface-danger-strong: var(--color-red-700);
|
|
@@ -571,12 +571,12 @@
|
|
|
571
571
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
572
572
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
573
573
|
--color-content-action: var(--color-brand-100);
|
|
574
|
-
--color-content-action-on-strong: var(--color-
|
|
575
|
-
--color-content-action-on-subtle: var(--color-brand-
|
|
574
|
+
--color-content-action-on-strong: var(--color-brand-950);
|
|
575
|
+
--color-content-action-on-subtle: var(--color-brand-100);
|
|
576
576
|
--color-content-brand: var(--color-brand-700);
|
|
577
577
|
--color-content-danger: var(--color-red-300);
|
|
578
|
-
--color-content-danger-on-strong: var(--color-
|
|
579
|
-
--color-content-danger-on-subtle: var(--color-red-
|
|
578
|
+
--color-content-danger-on-strong: var(--color-red-900);
|
|
579
|
+
--color-content-danger-on-subtle: var(--color-red-100);
|
|
580
580
|
--color-content-info: var(--color-sky-500);
|
|
581
581
|
--color-content-info-on-strong: var(--color-white);
|
|
582
582
|
--color-content-info-on-subtle: var(--color-sky-900);
|
|
@@ -584,7 +584,7 @@
|
|
|
584
584
|
--color-content-link-visited: var(--color-purple-200);
|
|
585
585
|
--color-content-primary: var(--color-white);
|
|
586
586
|
--color-content-secondary: var(--color-base-100);
|
|
587
|
-
--color-content-selected: var(--color-brand-
|
|
587
|
+
--color-content-selected: var(--color-brand-100);
|
|
588
588
|
--color-content-success: var(--color-green-600);
|
|
589
589
|
--color-content-success-on-strong: var(--color-white);
|
|
590
590
|
--color-content-success-on-subtle: var(--color-green-900);
|
|
@@ -603,46 +603,46 @@
|
|
|
603
603
|
--color-stroke-success: var(--color-green-200);
|
|
604
604
|
--color-stroke-warning: var(--color-amber-300);
|
|
605
605
|
--color-surface-accent-core: var(--color-accent-input);
|
|
606
|
-
--color-surface-accent-strong: var(--color-accent-
|
|
607
|
-
--color-surface-action-strong: var(--color-brand-
|
|
608
|
-
--color-surface-action-strong-active: var(--color-brand-
|
|
609
|
-
--color-surface-action-strong-hover: var(--color-brand-
|
|
610
|
-
--color-surface-action-subtle: var(--color-brand-
|
|
611
|
-
--color-surface-action-subtle-active: var(--color-brand-
|
|
612
|
-
--color-surface-action-subtle-hover: var(--color-brand-
|
|
613
|
-
--color-surface-action-tint: var(--color-brand-
|
|
614
|
-
--color-surface-action-tint-active: var(--color-brand-
|
|
615
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
616
|
-
--color-surface-background: var(--color-
|
|
606
|
+
--color-surface-accent-strong: var(--color-accent-400);
|
|
607
|
+
--color-surface-action-strong: var(--color-brand-300);
|
|
608
|
+
--color-surface-action-strong-active: var(--color-brand-200);
|
|
609
|
+
--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);
|
|
613
|
+
--color-surface-action-tint: var(--color-brand-900);
|
|
614
|
+
--color-surface-action-tint-active: var(--color-brand-800);
|
|
615
|
+
--color-surface-action-tint-hover: var(--color-brand-800);
|
|
616
|
+
--color-surface-background: var(--color-base-900);
|
|
617
617
|
--color-surface-brand-core: var(--color-brand-input);
|
|
618
|
-
--color-surface-brand-strong: var(--color-brand-
|
|
619
|
-
--color-surface-danger-strong: var(--color-red-
|
|
620
|
-
--color-surface-danger-strong-active: var(--color-red-
|
|
621
|
-
--color-surface-danger-strong-hover: var(--color-red-
|
|
622
|
-
--color-surface-danger-subtle: var(--color-red-
|
|
623
|
-
--color-surface-danger-subtle-active: var(--color-red-
|
|
624
|
-
--color-surface-danger-subtle-hover: var(--color-red-
|
|
625
|
-
--color-surface-danger-tint: var(--color-red-
|
|
626
|
-
--color-surface-danger-tint-active: var(--color-red-
|
|
627
|
-
--color-surface-danger-tint-hover: var(--color-red-
|
|
628
|
-
--color-surface-info-strong: var(--color-sky-
|
|
629
|
-
--color-surface-info-subtle: var(--color-sky-
|
|
630
|
-
--color-surface-info-tint: var(--color-sky-
|
|
631
|
-
--color-surface-neutral-subtle: var(--color-base-
|
|
632
|
-
--color-surface-neutral-tint: var(--color-base-
|
|
633
|
-
--color-surface-primary: var(--color-
|
|
634
|
-
--color-surface-primary-active: var(--color-base-
|
|
635
|
-
--color-surface-primary-hover: var(--color-base-
|
|
636
|
-
--color-surface-secondary: var(--color-base-
|
|
637
|
-
--color-surface-secondary-active: var(--color-base-
|
|
638
|
-
--color-surface-secondary-hover: var(--color-base-
|
|
639
|
-
--color-surface-success-strong: var(--color-green-
|
|
640
|
-
--color-surface-success-subtle: var(--color-green-
|
|
641
|
-
--color-surface-success-tint: var(--color-green-
|
|
642
|
-
--color-surface-tertiary: var(--color-brand-
|
|
643
|
-
--color-surface-warning-strong: var(--color-amber-
|
|
644
|
-
--color-surface-warning-subtle: var(--color-amber-
|
|
645
|
-
--color-surface-warning-tint: var(--color-amber-
|
|
618
|
+
--color-surface-brand-strong: var(--color-brand-400);
|
|
619
|
+
--color-surface-danger-strong: var(--color-red-200);
|
|
620
|
+
--color-surface-danger-strong-active: var(--color-red-100);
|
|
621
|
+
--color-surface-danger-strong-hover: var(--color-red-100);
|
|
622
|
+
--color-surface-danger-subtle: var(--color-red-700);
|
|
623
|
+
--color-surface-danger-subtle-active: var(--color-red-800);
|
|
624
|
+
--color-surface-danger-subtle-hover: var(--color-red-800);
|
|
625
|
+
--color-surface-danger-tint: var(--color-red-900);
|
|
626
|
+
--color-surface-danger-tint-active: var(--color-red-800);
|
|
627
|
+
--color-surface-danger-tint-hover: var(--color-red-800);
|
|
628
|
+
--color-surface-info-strong: var(--color-sky-300);
|
|
629
|
+
--color-surface-info-subtle: var(--color-sky-700);
|
|
630
|
+
--color-surface-info-tint: var(--color-sky-900);
|
|
631
|
+
--color-surface-neutral-subtle: var(--color-base-800);
|
|
632
|
+
--color-surface-neutral-tint: var(--color-base-900);
|
|
633
|
+
--color-surface-primary: var(--color-base-950);
|
|
634
|
+
--color-surface-primary-active: var(--color-base-900);
|
|
635
|
+
--color-surface-primary-hover: var(--color-base-900);
|
|
636
|
+
--color-surface-secondary: var(--color-base-900);
|
|
637
|
+
--color-surface-secondary-active: var(--color-base-800);
|
|
638
|
+
--color-surface-secondary-hover: var(--color-base-800);
|
|
639
|
+
--color-surface-success-strong: var(--color-green-300);
|
|
640
|
+
--color-surface-success-subtle: var(--color-green-700);
|
|
641
|
+
--color-surface-success-tint: var(--color-green-900);
|
|
642
|
+
--color-surface-tertiary: var(--color-brand-900);
|
|
643
|
+
--color-surface-warning-strong: var(--color-amber-300);
|
|
644
|
+
--color-surface-warning-subtle: var(--color-amber-700);
|
|
645
|
+
--color-surface-warning-tint: var(--color-amber-900);
|
|
646
646
|
--font-body: var(--font-sans);
|
|
647
647
|
--font-body-bold: var(--font-sans-bold);
|
|
648
648
|
--font-body-bold-italic: var(--font-sans-bold-italic);
|
package/css/vanilla.css
CHANGED
|
@@ -397,7 +397,7 @@
|
|
|
397
397
|
--color-content-warning-on-strong: var(--color-black);
|
|
398
398
|
--color-content-warning-on-subtle: var(--color-amber-900);
|
|
399
399
|
--color-stroke-action: var(--color-brand-700);
|
|
400
|
-
--color-stroke-danger: var(--color-red-
|
|
400
|
+
--color-stroke-danger: var(--color-red-700);
|
|
401
401
|
--color-stroke-focus: var(--color-brand-700);
|
|
402
402
|
--color-stroke-hover: var(--color-base-950);
|
|
403
403
|
--color-stroke-info: var(--color-sky-500);
|
|
@@ -407,17 +407,17 @@
|
|
|
407
407
|
--color-stroke-success: var(--color-green-500);
|
|
408
408
|
--color-stroke-warning: var(--color-amber-600);
|
|
409
409
|
--color-surface-accent-core: var(--color-accent-input);
|
|
410
|
-
--color-surface-accent-strong: var(--color-accent-
|
|
410
|
+
--color-surface-accent-strong: var(--color-accent-700);
|
|
411
411
|
--color-surface-action-strong: var(--color-brand-700);
|
|
412
412
|
--color-surface-action-strong-active: var(--color-brand-800);
|
|
413
413
|
--color-surface-action-strong-hover: var(--color-brand-800);
|
|
414
414
|
--color-surface-action-subtle: var(--color-brand-300);
|
|
415
415
|
--color-surface-action-subtle-active: var(--color-brand-400);
|
|
416
416
|
--color-surface-action-subtle-hover: var(--color-brand-400);
|
|
417
|
-
--color-surface-action-tint: var(--color-brand-
|
|
418
|
-
--color-surface-action-tint-active: var(--color-brand-
|
|
419
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
420
|
-
--color-surface-background: var(--color-
|
|
417
|
+
--color-surface-action-tint: var(--color-brand-100);
|
|
418
|
+
--color-surface-action-tint-active: var(--color-brand-200);
|
|
419
|
+
--color-surface-action-tint-hover: var(--color-brand-200);
|
|
420
|
+
--color-surface-background: var(--color-base-100);
|
|
421
421
|
--color-surface-brand-core: var(--color-brand-input);
|
|
422
422
|
--color-surface-brand-strong: var(--color-brand-700);
|
|
423
423
|
--color-surface-danger-strong: var(--color-red-700);
|
|
@@ -487,12 +487,12 @@
|
|
|
487
487
|
--color-chart-simple-primary: var(--color-brand-500);
|
|
488
488
|
--color-chart-simple-secondary: var(--color-brand-950);
|
|
489
489
|
--color-content-action: var(--color-brand-100);
|
|
490
|
-
--color-content-action-on-strong: var(--color-
|
|
491
|
-
--color-content-action-on-subtle: var(--color-brand-
|
|
490
|
+
--color-content-action-on-strong: var(--color-brand-950);
|
|
491
|
+
--color-content-action-on-subtle: var(--color-brand-100);
|
|
492
492
|
--color-content-brand: var(--color-brand-700);
|
|
493
493
|
--color-content-danger: var(--color-red-300);
|
|
494
|
-
--color-content-danger-on-strong: var(--color-
|
|
495
|
-
--color-content-danger-on-subtle: var(--color-red-
|
|
494
|
+
--color-content-danger-on-strong: var(--color-red-900);
|
|
495
|
+
--color-content-danger-on-subtle: var(--color-red-100);
|
|
496
496
|
--color-content-info: var(--color-sky-500);
|
|
497
497
|
--color-content-info-on-strong: var(--color-white);
|
|
498
498
|
--color-content-info-on-subtle: var(--color-sky-900);
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
--color-content-link-visited: var(--color-purple-200);
|
|
501
501
|
--color-content-primary: var(--color-white);
|
|
502
502
|
--color-content-secondary: var(--color-base-100);
|
|
503
|
-
--color-content-selected: var(--color-brand-
|
|
503
|
+
--color-content-selected: var(--color-brand-100);
|
|
504
504
|
--color-content-success: var(--color-green-600);
|
|
505
505
|
--color-content-success-on-strong: var(--color-white);
|
|
506
506
|
--color-content-success-on-subtle: var(--color-green-900);
|
|
@@ -519,46 +519,46 @@
|
|
|
519
519
|
--color-stroke-success: var(--color-green-200);
|
|
520
520
|
--color-stroke-warning: var(--color-amber-300);
|
|
521
521
|
--color-surface-accent-core: var(--color-accent-input);
|
|
522
|
-
--color-surface-accent-strong: var(--color-accent-
|
|
523
|
-
--color-surface-action-strong: var(--color-brand-
|
|
524
|
-
--color-surface-action-strong-active: var(--color-brand-
|
|
525
|
-
--color-surface-action-strong-hover: var(--color-brand-
|
|
526
|
-
--color-surface-action-subtle: var(--color-brand-
|
|
527
|
-
--color-surface-action-subtle-active: var(--color-brand-
|
|
528
|
-
--color-surface-action-subtle-hover: var(--color-brand-
|
|
529
|
-
--color-surface-action-tint: var(--color-brand-
|
|
530
|
-
--color-surface-action-tint-active: var(--color-brand-
|
|
531
|
-
--color-surface-action-tint-hover: var(--color-brand-
|
|
532
|
-
--color-surface-background: var(--color-
|
|
522
|
+
--color-surface-accent-strong: var(--color-accent-400);
|
|
523
|
+
--color-surface-action-strong: var(--color-brand-300);
|
|
524
|
+
--color-surface-action-strong-active: var(--color-brand-200);
|
|
525
|
+
--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);
|
|
529
|
+
--color-surface-action-tint: var(--color-brand-900);
|
|
530
|
+
--color-surface-action-tint-active: var(--color-brand-800);
|
|
531
|
+
--color-surface-action-tint-hover: var(--color-brand-800);
|
|
532
|
+
--color-surface-background: var(--color-base-900);
|
|
533
533
|
--color-surface-brand-core: var(--color-brand-input);
|
|
534
|
-
--color-surface-brand-strong: var(--color-brand-
|
|
535
|
-
--color-surface-danger-strong: var(--color-red-
|
|
536
|
-
--color-surface-danger-strong-active: var(--color-red-
|
|
537
|
-
--color-surface-danger-strong-hover: var(--color-red-
|
|
538
|
-
--color-surface-danger-subtle: var(--color-red-
|
|
539
|
-
--color-surface-danger-subtle-active: var(--color-red-
|
|
540
|
-
--color-surface-danger-subtle-hover: var(--color-red-
|
|
541
|
-
--color-surface-danger-tint: var(--color-red-
|
|
542
|
-
--color-surface-danger-tint-active: var(--color-red-
|
|
543
|
-
--color-surface-danger-tint-hover: var(--color-red-
|
|
544
|
-
--color-surface-info-strong: var(--color-sky-
|
|
545
|
-
--color-surface-info-subtle: var(--color-sky-
|
|
546
|
-
--color-surface-info-tint: var(--color-sky-
|
|
547
|
-
--color-surface-neutral-subtle: var(--color-base-
|
|
548
|
-
--color-surface-neutral-tint: var(--color-base-
|
|
549
|
-
--color-surface-primary: var(--color-
|
|
550
|
-
--color-surface-primary-active: var(--color-base-
|
|
551
|
-
--color-surface-primary-hover: var(--color-base-
|
|
552
|
-
--color-surface-secondary: var(--color-base-
|
|
553
|
-
--color-surface-secondary-active: var(--color-base-
|
|
554
|
-
--color-surface-secondary-hover: var(--color-base-
|
|
555
|
-
--color-surface-success-strong: var(--color-green-
|
|
556
|
-
--color-surface-success-subtle: var(--color-green-
|
|
557
|
-
--color-surface-success-tint: var(--color-green-
|
|
558
|
-
--color-surface-tertiary: var(--color-brand-
|
|
559
|
-
--color-surface-warning-strong: var(--color-amber-
|
|
560
|
-
--color-surface-warning-subtle: var(--color-amber-
|
|
561
|
-
--color-surface-warning-tint: var(--color-amber-
|
|
534
|
+
--color-surface-brand-strong: var(--color-brand-400);
|
|
535
|
+
--color-surface-danger-strong: var(--color-red-200);
|
|
536
|
+
--color-surface-danger-strong-active: var(--color-red-100);
|
|
537
|
+
--color-surface-danger-strong-hover: var(--color-red-100);
|
|
538
|
+
--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);
|
|
541
|
+
--color-surface-danger-tint: var(--color-red-900);
|
|
542
|
+
--color-surface-danger-tint-active: var(--color-red-800);
|
|
543
|
+
--color-surface-danger-tint-hover: var(--color-red-800);
|
|
544
|
+
--color-surface-info-strong: var(--color-sky-300);
|
|
545
|
+
--color-surface-info-subtle: var(--color-sky-700);
|
|
546
|
+
--color-surface-info-tint: var(--color-sky-900);
|
|
547
|
+
--color-surface-neutral-subtle: var(--color-base-800);
|
|
548
|
+
--color-surface-neutral-tint: var(--color-base-900);
|
|
549
|
+
--color-surface-primary: var(--color-base-950);
|
|
550
|
+
--color-surface-primary-active: var(--color-base-900);
|
|
551
|
+
--color-surface-primary-hover: var(--color-base-900);
|
|
552
|
+
--color-surface-secondary: var(--color-base-900);
|
|
553
|
+
--color-surface-secondary-active: var(--color-base-800);
|
|
554
|
+
--color-surface-secondary-hover: var(--color-base-800);
|
|
555
|
+
--color-surface-success-strong: var(--color-green-300);
|
|
556
|
+
--color-surface-success-subtle: var(--color-green-700);
|
|
557
|
+
--color-surface-success-tint: var(--color-green-900);
|
|
558
|
+
--color-surface-tertiary: var(--color-brand-900);
|
|
559
|
+
--color-surface-warning-strong: var(--color-amber-300);
|
|
560
|
+
--color-surface-warning-subtle: var(--color-amber-700);
|
|
561
|
+
--color-surface-warning-tint: var(--color-amber-900);
|
|
562
562
|
--font-body: var(--font-sans);
|
|
563
563
|
--font-body-bold: var(--font-sans-bold);
|
|
564
564
|
--font-body-bold-italic: var(--font-sans-bold-italic);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/styles",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.41",
|
|
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-alpha.
|
|
56
|
+
"@cdx-ui/utils": "0.0.1-alpha.41"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": "^18.2.0 || ^19.0.0",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"poise.json": "
|
|
3
|
-
"prestige.json": "
|
|
4
|
-
"pulse.json": "
|
|
2
|
+
"poise.json": "8de6657e555788e1d9e10ae9c6868a2a886bdcb6bfdf01bdd2e3f628f6704586",
|
|
3
|
+
"prestige.json": "7828f391d212be0726839297dfa6638b575187faa6fc9eecd7d64219eaadf403",
|
|
4
|
+
"pulse.json": "1cbc3480aae055ae03360b243664e9a95e2eca96be3126334ea062d0d38d6033"
|
|
5
5
|
}
|
|
@@ -2430,7 +2430,7 @@
|
|
|
2430
2430
|
},
|
|
2431
2431
|
"danger": {
|
|
2432
2432
|
"$type": "color",
|
|
2433
|
-
"$value": "{color.red.
|
|
2433
|
+
"$value": "{color.red.700}"
|
|
2434
2434
|
},
|
|
2435
2435
|
"focus": {
|
|
2436
2436
|
"$type": "color",
|
|
@@ -2473,7 +2473,7 @@
|
|
|
2473
2473
|
},
|
|
2474
2474
|
"strong": {
|
|
2475
2475
|
"$type": "color",
|
|
2476
|
-
"$value": "{color.accent.
|
|
2476
|
+
"$value": "{color.accent.700}"
|
|
2477
2477
|
}
|
|
2478
2478
|
},
|
|
2479
2479
|
"action": {
|
|
@@ -2503,20 +2503,20 @@
|
|
|
2503
2503
|
},
|
|
2504
2504
|
"tint": {
|
|
2505
2505
|
"$type": "color",
|
|
2506
|
-
"$value": "{color.brand.
|
|
2506
|
+
"$value": "{color.brand.100}"
|
|
2507
2507
|
},
|
|
2508
2508
|
"tint-active": {
|
|
2509
2509
|
"$type": "color",
|
|
2510
|
-
"$value": "{color.brand.
|
|
2510
|
+
"$value": "{color.brand.200}"
|
|
2511
2511
|
},
|
|
2512
2512
|
"tint-hover": {
|
|
2513
2513
|
"$type": "color",
|
|
2514
|
-
"$value": "{color.brand.
|
|
2514
|
+
"$value": "{color.brand.200}"
|
|
2515
2515
|
}
|
|
2516
2516
|
},
|
|
2517
2517
|
"background": {
|
|
2518
2518
|
"$type": "color",
|
|
2519
|
-
"$value": "{color.
|
|
2519
|
+
"$value": "{color.base.100}"
|
|
2520
2520
|
},
|
|
2521
2521
|
"brand": {
|
|
2522
2522
|
"core": {
|
|
@@ -2814,11 +2814,11 @@
|
|
|
2814
2814
|
},
|
|
2815
2815
|
"action-on-strong": {
|
|
2816
2816
|
"$type": "color",
|
|
2817
|
-
"$value": "{color.
|
|
2817
|
+
"$value": "{color.brand.950}"
|
|
2818
2818
|
},
|
|
2819
2819
|
"action-on-subtle": {
|
|
2820
2820
|
"$type": "color",
|
|
2821
|
-
"$value": "{color.brand.
|
|
2821
|
+
"$value": "{color.brand.100}"
|
|
2822
2822
|
},
|
|
2823
2823
|
"brand": {
|
|
2824
2824
|
"$type": "color",
|
|
@@ -2830,11 +2830,11 @@
|
|
|
2830
2830
|
},
|
|
2831
2831
|
"danger-on-strong": {
|
|
2832
2832
|
"$type": "color",
|
|
2833
|
-
"$value": "{color.
|
|
2833
|
+
"$value": "{color.red.900}"
|
|
2834
2834
|
},
|
|
2835
2835
|
"danger-on-subtle": {
|
|
2836
2836
|
"$type": "color",
|
|
2837
|
-
"$value": "{color.red.
|
|
2837
|
+
"$value": "{color.red.100}"
|
|
2838
2838
|
},
|
|
2839
2839
|
"info": {
|
|
2840
2840
|
"$type": "color",
|
|
@@ -2866,7 +2866,7 @@
|
|
|
2866
2866
|
},
|
|
2867
2867
|
"selected": {
|
|
2868
2868
|
"$type": "color",
|
|
2869
|
-
"$value": "{color.brand.
|
|
2869
|
+
"$value": "{color.brand.100}"
|
|
2870
2870
|
},
|
|
2871
2871
|
"success": {
|
|
2872
2872
|
"$type": "color",
|
|
@@ -2947,50 +2947,50 @@
|
|
|
2947
2947
|
},
|
|
2948
2948
|
"strong": {
|
|
2949
2949
|
"$type": "color",
|
|
2950
|
-
"$value": "{color.accent.
|
|
2950
|
+
"$value": "{color.accent.400}"
|
|
2951
2951
|
}
|
|
2952
2952
|
},
|
|
2953
2953
|
"action": {
|
|
2954
2954
|
"strong": {
|
|
2955
2955
|
"$type": "color",
|
|
2956
|
-
"$value": "{color.brand.
|
|
2956
|
+
"$value": "{color.brand.300}"
|
|
2957
2957
|
},
|
|
2958
2958
|
"strong-active": {
|
|
2959
2959
|
"$type": "color",
|
|
2960
|
-
"$value": "{color.brand.
|
|
2960
|
+
"$value": "{color.brand.200}"
|
|
2961
2961
|
},
|
|
2962
2962
|
"strong-hover": {
|
|
2963
2963
|
"$type": "color",
|
|
2964
|
-
"$value": "{color.brand.
|
|
2964
|
+
"$value": "{color.brand.200}"
|
|
2965
2965
|
},
|
|
2966
2966
|
"subtle": {
|
|
2967
2967
|
"$type": "color",
|
|
2968
|
-
"$value": "{color.brand.
|
|
2968
|
+
"$value": "{color.brand.700}"
|
|
2969
2969
|
},
|
|
2970
2970
|
"subtle-active": {
|
|
2971
2971
|
"$type": "color",
|
|
2972
|
-
"$value": "{color.brand.
|
|
2972
|
+
"$value": "{color.brand.800}"
|
|
2973
2973
|
},
|
|
2974
2974
|
"subtle-hover": {
|
|
2975
2975
|
"$type": "color",
|
|
2976
|
-
"$value": "{color.brand.
|
|
2976
|
+
"$value": "{color.brand.800}"
|
|
2977
2977
|
},
|
|
2978
2978
|
"tint": {
|
|
2979
2979
|
"$type": "color",
|
|
2980
|
-
"$value": "{color.brand.
|
|
2980
|
+
"$value": "{color.brand.900}"
|
|
2981
2981
|
},
|
|
2982
2982
|
"tint-active": {
|
|
2983
2983
|
"$type": "color",
|
|
2984
|
-
"$value": "{color.brand.
|
|
2984
|
+
"$value": "{color.brand.800}"
|
|
2985
2985
|
},
|
|
2986
2986
|
"tint-hover": {
|
|
2987
2987
|
"$type": "color",
|
|
2988
|
-
"$value": "{color.brand.
|
|
2988
|
+
"$value": "{color.brand.800}"
|
|
2989
2989
|
}
|
|
2990
2990
|
},
|
|
2991
2991
|
"background": {
|
|
2992
2992
|
"$type": "color",
|
|
2993
|
-
"$value": "{color.
|
|
2993
|
+
"$value": "{color.base.900}"
|
|
2994
2994
|
},
|
|
2995
2995
|
"brand": {
|
|
2996
2996
|
"core": {
|
|
@@ -2999,125 +2999,125 @@
|
|
|
2999
2999
|
},
|
|
3000
3000
|
"strong": {
|
|
3001
3001
|
"$type": "color",
|
|
3002
|
-
"$value": "{color.brand.
|
|
3002
|
+
"$value": "{color.brand.400}"
|
|
3003
3003
|
}
|
|
3004
3004
|
},
|
|
3005
3005
|
"danger": {
|
|
3006
3006
|
"strong": {
|
|
3007
3007
|
"$type": "color",
|
|
3008
|
-
"$value": "{color.red.
|
|
3008
|
+
"$value": "{color.red.200}"
|
|
3009
3009
|
},
|
|
3010
3010
|
"strong-active": {
|
|
3011
3011
|
"$type": "color",
|
|
3012
|
-
"$value": "{color.red.
|
|
3012
|
+
"$value": "{color.red.100}"
|
|
3013
3013
|
},
|
|
3014
3014
|
"strong-hover": {
|
|
3015
3015
|
"$type": "color",
|
|
3016
|
-
"$value": "{color.red.
|
|
3016
|
+
"$value": "{color.red.100}"
|
|
3017
3017
|
},
|
|
3018
3018
|
"subtle": {
|
|
3019
3019
|
"$type": "color",
|
|
3020
|
-
"$value": "{color.red.
|
|
3020
|
+
"$value": "{color.red.700}"
|
|
3021
3021
|
},
|
|
3022
3022
|
"subtle-active": {
|
|
3023
3023
|
"$type": "color",
|
|
3024
|
-
"$value": "{color.red.
|
|
3024
|
+
"$value": "{color.red.800}"
|
|
3025
3025
|
},
|
|
3026
3026
|
"subtle-hover": {
|
|
3027
3027
|
"$type": "color",
|
|
3028
|
-
"$value": "{color.red.
|
|
3028
|
+
"$value": "{color.red.800}"
|
|
3029
3029
|
},
|
|
3030
3030
|
"tint": {
|
|
3031
3031
|
"$type": "color",
|
|
3032
|
-
"$value": "{color.red.
|
|
3032
|
+
"$value": "{color.red.900}"
|
|
3033
3033
|
},
|
|
3034
3034
|
"tint-active": {
|
|
3035
3035
|
"$type": "color",
|
|
3036
|
-
"$value": "{color.red.
|
|
3036
|
+
"$value": "{color.red.800}"
|
|
3037
3037
|
},
|
|
3038
3038
|
"tint-hover": {
|
|
3039
3039
|
"$type": "color",
|
|
3040
|
-
"$value": "{color.red.
|
|
3040
|
+
"$value": "{color.red.800}"
|
|
3041
3041
|
}
|
|
3042
3042
|
},
|
|
3043
3043
|
"info": {
|
|
3044
3044
|
"strong": {
|
|
3045
3045
|
"$type": "color",
|
|
3046
|
-
"$value": "{color.sky.
|
|
3046
|
+
"$value": "{color.sky.300}"
|
|
3047
3047
|
},
|
|
3048
3048
|
"subtle": {
|
|
3049
3049
|
"$type": "color",
|
|
3050
|
-
"$value": "{color.sky.
|
|
3050
|
+
"$value": "{color.sky.700}"
|
|
3051
3051
|
},
|
|
3052
3052
|
"tint": {
|
|
3053
3053
|
"$type": "color",
|
|
3054
|
-
"$value": "{color.sky.
|
|
3054
|
+
"$value": "{color.sky.900}"
|
|
3055
3055
|
}
|
|
3056
3056
|
},
|
|
3057
3057
|
"neutral": {
|
|
3058
3058
|
"subtle": {
|
|
3059
3059
|
"$type": "color",
|
|
3060
|
-
"$value": "{color.base.
|
|
3060
|
+
"$value": "{color.base.800}"
|
|
3061
3061
|
},
|
|
3062
3062
|
"tint": {
|
|
3063
3063
|
"$type": "color",
|
|
3064
|
-
"$value": "{color.base.
|
|
3064
|
+
"$value": "{color.base.900}"
|
|
3065
3065
|
}
|
|
3066
3066
|
},
|
|
3067
3067
|
"primary": {
|
|
3068
3068
|
"$type": "color",
|
|
3069
|
-
"$value": "{color.
|
|
3069
|
+
"$value": "{color.base.950}"
|
|
3070
3070
|
},
|
|
3071
3071
|
"primary-active": {
|
|
3072
3072
|
"$type": "color",
|
|
3073
|
-
"$value": "{color.base.
|
|
3073
|
+
"$value": "{color.base.900}"
|
|
3074
3074
|
},
|
|
3075
3075
|
"primary-hover": {
|
|
3076
3076
|
"$type": "color",
|
|
3077
|
-
"$value": "{color.base.
|
|
3077
|
+
"$value": "{color.base.900}"
|
|
3078
3078
|
},
|
|
3079
3079
|
"secondary": {
|
|
3080
3080
|
"$type": "color",
|
|
3081
|
-
"$value": "{color.base.
|
|
3081
|
+
"$value": "{color.base.900}"
|
|
3082
3082
|
},
|
|
3083
3083
|
"secondary-active": {
|
|
3084
3084
|
"$type": "color",
|
|
3085
|
-
"$value": "{color.base.
|
|
3085
|
+
"$value": "{color.base.800}"
|
|
3086
3086
|
},
|
|
3087
3087
|
"secondary-hover": {
|
|
3088
3088
|
"$type": "color",
|
|
3089
|
-
"$value": "{color.base.
|
|
3089
|
+
"$value": "{color.base.800}"
|
|
3090
3090
|
},
|
|
3091
3091
|
"success": {
|
|
3092
3092
|
"strong": {
|
|
3093
3093
|
"$type": "color",
|
|
3094
|
-
"$value": "{color.green.
|
|
3094
|
+
"$value": "{color.green.300}"
|
|
3095
3095
|
},
|
|
3096
3096
|
"subtle": {
|
|
3097
3097
|
"$type": "color",
|
|
3098
|
-
"$value": "{color.green.
|
|
3098
|
+
"$value": "{color.green.700}"
|
|
3099
3099
|
},
|
|
3100
3100
|
"tint": {
|
|
3101
3101
|
"$type": "color",
|
|
3102
|
-
"$value": "{color.green.
|
|
3102
|
+
"$value": "{color.green.900}"
|
|
3103
3103
|
}
|
|
3104
3104
|
},
|
|
3105
3105
|
"tertiary": {
|
|
3106
3106
|
"$type": "color",
|
|
3107
|
-
"$value": "{color.brand.
|
|
3107
|
+
"$value": "{color.brand.900}"
|
|
3108
3108
|
},
|
|
3109
3109
|
"warning": {
|
|
3110
3110
|
"strong": {
|
|
3111
3111
|
"$type": "color",
|
|
3112
|
-
"$value": "{color.amber.
|
|
3112
|
+
"$value": "{color.amber.300}"
|
|
3113
3113
|
},
|
|
3114
3114
|
"subtle": {
|
|
3115
3115
|
"$type": "color",
|
|
3116
|
-
"$value": "{color.amber.
|
|
3116
|
+
"$value": "{color.amber.700}"
|
|
3117
3117
|
},
|
|
3118
3118
|
"tint": {
|
|
3119
3119
|
"$type": "color",
|
|
3120
|
-
"$value": "{color.amber.
|
|
3120
|
+
"$value": "{color.amber.900}"
|
|
3121
3121
|
}
|
|
3122
3122
|
}
|
|
3123
3123
|
}
|