@bcc-code/design-tokens 3.0.12 → 3.0.16

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 (19) hide show
  1. package/README.md +65 -161
  2. package/build/bcc/css/auto.css +155 -52
  3. package/build/bcc/css/dark.css +141 -48
  4. package/build/bcc/css/light.css +45 -36
  5. package/build/bcc/css/tailwind-auto.css +155 -52
  6. package/build/bcc/css/tailwind-dark.css +141 -48
  7. package/build/bcc/css/tailwind-light.css +45 -36
  8. package/build/bcc/js/dark.js +213 -51
  9. package/build/bcc/js/light.js +57 -41
  10. package/build/primevue/component-dark.js +2390 -0
  11. package/build/primevue/component-light.js +2390 -0
  12. package/build/primevue/primitive.js +554 -0
  13. package/build/primevue/semantic-dark.js +345 -0
  14. package/build/primevue/semantic-light.js +345 -0
  15. package/config/primevue-overrides.css +179 -0
  16. package/config/primevue.config.d.ts +6 -2
  17. package/config/primevue.config.js +987 -23
  18. package/package.json +5 -6
  19. package/build/bcc/js/aura-bcc-config.js +0 -1148
package/build/bcc/css/tailwind-auto.css CHANGED
@@ -6,7 +6,6 @@
6
6
  @custom-variant dark (&:where(.dark, .dark *));
7
7
 
8
8
  @theme {
9
- --font-archivo: Archivo;
10
9
  --color-neutral-0: #ffffff;
11
10
  --color-neutral-100: #f7f8f9;
12
11
  --color-neutral-200: #f1f2f4;
@@ -38,7 +37,6 @@
38
37
  --color-dark-neutral-900: #b6c2cf;
39
38
  --color-dark-neutral-1000: #c7d1db;
40
39
  --color-dark-neutral-1100: #dee4ea;
41
- --color-dark-neutral-negative-100: #101214;
42
40
  --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
43
41
  --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
44
42
  --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -179,26 +177,24 @@
179
177
  --spacing-negative-300: -1.5rem; /** -24px */
180
178
  --spacing-negative-400: -2rem; /** -32px */
181
179
  --radius-none: 0; /** 0 */
182
- --radius-xs: 0.125rem; /** 2px */
183
- --radius-sm: 0.25rem; /** 4px */
180
+ --radius-2xs: 0.125rem; /** 2px */
181
+ --radius-xs: 0.25rem; /** 4px */
182
+ --radius-sm: 0.375rem; /** 6px */
184
183
  --radius-md: 0.5rem; /** 8px */
185
- --radius-lg: 1rem; /** 16px */
186
- --radius-xl: 1.5rem; /** 24px */
187
- --radius-2xl: 2rem; /** 32px */
188
- --radius-3xl: 3rem; /** 48px */
184
+ --radius-lg: 0.75rem; /** 12px */
185
+ --radius-xl: 1rem; /** 16px */
186
+ --radius-2xl: 1.5rem; /** 24px */
187
+ --radius-3xl: 2rem; /** 32 */
188
+ --radius-4xl: 3rem; /** 48px */
189
189
  --radius-full: 999px;
190
- --icon-size-xs: 1rem; /** 16px */
191
- --icon-size-sm: 1.25rem; /** 20px */
192
- --icon-size-md: 1.5rem; /** 24px */
193
- --icon-size-lg: 2rem; /** 32px */
194
- --icon-size-xl: 3rem; /** 48px */
195
190
  --border-width-0: 0;
196
191
  --border-width-1: 1px;
197
192
  --border-width-2: 2px;
193
+ --font-archivo: Archivo;
198
194
  --font-weight-regular: 400;
199
195
  --font-weight-medium: 500;
200
196
  --font-weight-bold: 700;
201
- --leading-1: 12px;
197
+ --leading-1: 14px;
202
198
  --leading-2: 16px;
203
199
  --leading-3: 20px;
204
200
  --leading-4: 24px;
@@ -206,9 +202,9 @@
206
202
  --leading-6: 32px;
207
203
  --leading-7: 36px;
208
204
  --leading-8: 40px;
209
- --leading-9: 52px;
205
+ --leading-9: 56px;
210
206
  --leading-10: 64px;
211
- --leading-none: 1;
207
+ --leading-none: normal;
212
208
  --text-xs: 0.75rem; /** 12px */
213
209
  --text-sm: 0.875rem; /** 14px */
214
210
  --text-md: 1rem; /** 16px */
@@ -217,6 +213,9 @@
217
213
  --text-2xl: 2em; /** 32px */
218
214
  --text-3xl: 2.25rem; /** 36px */
219
215
  --text-4xl: 3rem; /** 48px */
216
+ --shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
217
+ --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
218
+ --shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
220
219
  --color-text-default: var(--color-neutral-1000);
221
220
  --color-text-subtle: var(--color-neutral-800);
222
221
  --color-text-subtlest: var(--color-neutral-700);
@@ -358,18 +357,18 @@
358
357
  --color-background-brand-boldest-default: var(--color-bcc-1000);
359
358
  --color-background-brand-boldest-hover: var(--color-bcc-900);
360
359
  --color-background-brand-boldest-pressed: var(--color-bcc-800);
361
- --color-background-accent-neutral-default: var(--color-neutral-alpha-300-a);
362
- --color-background-accent-neutral-hover: var(--color-neutral-alpha-400-a);
363
- --color-background-accent-neutral-pressed: var(--color-neutral-alpha-500-a);
364
- --color-background-accent-neutral-subtle-default: var(--color-neutral-alpha-200-a);
365
- --color-background-accent-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
366
- --color-background-accent-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
367
- --color-background-accent-neutral-subtler-default: var(--color-neutral-alpha-100-a);
368
- --color-background-accent-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
369
- --color-background-accent-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
370
- --color-background-accent-neutral-subtlest-default: var(--color-transparent);
371
- --color-background-accent-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
372
- --color-background-accent-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
360
+ --color-background-neutral-default: var(--color-neutral-alpha-300-a);
361
+ --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
362
+ --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
363
+ --color-background-neutral-subtle-default: var(--color-neutral-alpha-200-a);
364
+ --color-background-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
365
+ --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
366
+ --color-background-neutral-subtler-default: var(--color-neutral-alpha-100-a);
367
+ --color-background-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
368
+ --color-background-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
369
+ --color-background-neutral-subtlest-default: var(--color-transparent);
370
+ --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
371
+ --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
373
372
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
374
373
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
375
374
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -444,7 +443,10 @@
444
443
  --color-background-accent-orange-bolder-pressed: var(--color-orange-900);
445
444
  --color-background-accent-red-subtle-default: var(--color-red-400);
446
445
  --color-background-accent-red-subtle-hover: var(--color-red-300);
447
- --color-background-accent-red-subtle-pressed: var(--color-red-400);
446
+ --color-background-accent-red-subtle-pressed: var(--color-red-200);
447
+ --color-background-accent-red-subtler-default: var(--color-red-200);
448
+ --color-background-accent-red-subtler-hover: var(--color-red-300);
449
+ --color-background-accent-red-subtler-pressed: var(--color-red-400);
448
450
  --color-background-accent-red-subtlest-default: var(--color-red-100);
449
451
  --color-background-accent-red-subtlest-hover: var(--color-red-200);
450
452
  --color-background-accent-red-subtlest-pressed: var(--color-red-300);
@@ -503,13 +505,20 @@
503
505
  --color-elevation-surface-raised-hovered: var(--color-neutral-200);
504
506
  --color-elevation-surface-raised-pressed: var(--color-neutral-300);
505
507
  --color-elevation-surface-sunken-default: var(--color-neutral-100);
506
- --heading-xs: var(--font-weight-medium) var(--text-xs)/var(--leading-2) var(--font-archivo);
507
- --heading-sm: var(--font-weight-medium) var(--text-md)/var(--leading-3) var(--font-archivo);
508
- --heading-md: var(--font-weight-medium) var(--text-lg)/var(--leading-4) var(--font-archivo);
509
- --heading-lg: var(--font-weight-medium) var(--text-xl)/var(--leading-5) var(--font-archivo);
510
- --heading-xl: var(--font-weight-medium) var(--text-2xl)/var(--leading-6) var(--font-archivo);
511
- --heading-2xl: var(--font-weight-medium) var(--text-3xl)/var(--leading-8) var(--font-archivo);
512
- --heading-3xl: var(--font-weight-medium) var(--text-4xl)/var(--leading-9) var(--font-archivo);
508
+ --icon-size-xs: var(--spacing-200); /** 16px */
509
+ --icon-size-sm: var(--spacing-250); /** 20px */
510
+ --icon-size-md: var(--spacing-300); /** 24px */
511
+ --icon-size-lg: var(--spacing-400); /** 32px */
512
+ --icon-size-xl: var(--spacing-600); /** 48px */
513
+ --heading-xs: var(--font-weight-bold) var(--text-xs)/var(--leading-1) var(--font-archivo);
514
+ --heading-sm: var(--font-weight-bold) var(--text-sm)/var(--leading-2) var(--font-archivo);
515
+ --heading-md: var(--font-weight-bold) var(--text-md)/var(--leading-3) var(--font-archivo);
516
+ --heading-lg: var(--font-weight-bold) var(--text-lg)/var(--leading-4) var(--font-archivo);
517
+ --heading-xl: var(--font-weight-bold) var(--text-xl)/var(--leading-5) var(--font-archivo);
518
+ --heading-2xl: var(--font-weight-bold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
519
+ --heading-3xl: var(--font-weight-bold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
520
+ --heading-4xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
521
+ --heading-5xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-10) var(--font-archivo);
513
522
  --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
514
523
  --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
515
524
  --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);
@@ -519,7 +528,6 @@
519
528
  --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16);
520
529
  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24);
521
530
  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32);
522
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
523
531
  --color-blanket-default: rgba(16, 18, 20, 0.6);
524
532
  --color-blanket-selected: rgba(29, 122, 252, 0.08);
525
533
  --color-blanket-danger: rgba(227, 73, 53, 0.08);
@@ -663,11 +671,103 @@
663
671
  --color-background-brand-bolder-default: var(--color-bcc-400);
664
672
  --color-background-brand-bolder-hover: var(--color-bcc-300);
665
673
  --color-background-brand-bolder-pressed: var(--color-bcc-200);
666
- --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
667
- --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
668
- --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
669
- --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
670
- --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
674
+ --color-background-brand-boldest-default: var(--color-bcc-100);
675
+ --color-background-brand-boldest-hover: var(--color-bcc-200);
676
+ --color-background-brand-boldest-pressed: var(--color-bcc-300);
677
+ --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
678
+ --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
679
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
680
+ --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
681
+ --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
682
+ --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
683
+ --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
684
+ --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
685
+ --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
686
+ --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
687
+ --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
688
+ --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
689
+ --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
690
+ --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
691
+ --color-background-accent-blue-subtler-default: var(--color-blue-900);
692
+ --color-background-accent-blue-subtler-hover: var(--color-blue-800);
693
+ --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
694
+ --color-background-accent-blue-subtle-default: var(--color-blue-700);
695
+ --color-background-accent-blue-subtle-hover: var(--color-blue-600);
696
+ --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
697
+ --color-background-accent-blue-bolder-default: var(--color-blue-400);
698
+ --color-background-accent-blue-bolder-hover: var(--color-blue-300);
699
+ --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
700
+ --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
701
+ --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
702
+ --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
703
+ --color-background-accent-teal-subtler-default: var(--color-teal-900);
704
+ --color-background-accent-teal-subtler-hover: var(--color-teal-800);
705
+ --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
706
+ --color-background-accent-teal-subtle-default: var(--color-teal-700);
707
+ --color-background-accent-teal-subtle-hover: var(--color-teal-600);
708
+ --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
709
+ --color-background-accent-teal-bolder-default: var(--color-teal-400);
710
+ --color-background-accent-teal-bolder-hover: var(--color-teal-300);
711
+ --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
712
+ --color-background-accent-green-subtlest-default: var(--color-green-1000);
713
+ --color-background-accent-green-subtlest-hover: var(--color-green-900);
714
+ --color-background-accent-green-subtlest-pressed: var(--color-green-800);
715
+ --color-background-accent-green-subtler-default: var(--color-green-900);
716
+ --color-background-accent-green-subtler-hover: var(--color-green-800);
717
+ --color-background-accent-green-subtler-pressed: var(--color-green-700);
718
+ --color-background-accent-green-subtle-default: var(--color-green-700);
719
+ --color-background-accent-green-subtle-hover: var(--color-green-600);
720
+ --color-background-accent-green-subtle-pressed: var(--color-green-500);
721
+ --color-background-accent-green-bolder-default: var(--color-green-400);
722
+ --color-background-accent-green-bolder-hover: var(--color-green-300);
723
+ --color-background-accent-green-bolder-pressed: var(--color-green-200);
724
+ --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
725
+ --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
726
+ --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
727
+ --color-background-accent-brown-subtler-default: var(--color-brown-900);
728
+ --color-background-accent-brown-subtler-hover: var(--color-brown-800);
729
+ --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
730
+ --color-background-accent-brown-subtle-default: var(--color-brown-700);
731
+ --color-background-accent-brown-subtle-hover: var(--color-brown-600);
732
+ --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
733
+ --color-background-accent-brown-bolder-default: var(--color-brown-400);
734
+ --color-background-accent-brown-bolder-hover: var(--color-brown-300);
735
+ --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
736
+ --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
737
+ --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
738
+ --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
739
+ --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
740
+ --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
741
+ --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
742
+ --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
743
+ --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
744
+ --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
745
+ --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
746
+ --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
747
+ --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
748
+ --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
749
+ --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
750
+ --color-background-accent-orange-subtler-default: var(--color-orange-900);
751
+ --color-background-accent-orange-subtler-hover: var(--color-orange-800);
752
+ --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
753
+ --color-background-accent-orange-subtle-default: var(--color-orange-700);
754
+ --color-background-accent-orange-subtle-hover: var(--color-orange-600);
755
+ --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
756
+ --color-background-accent-orange-bolder-default: var(--color-orange-400);
757
+ --color-background-accent-orange-bolder-hover: var(--color-orange-300);
758
+ --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
759
+ --color-background-accent-red-subtlest-default: var(--color-red-1000);
760
+ --color-background-accent-red-subtlest-hover: var(--color-red-900);
761
+ --color-background-accent-red-subtlest-pressed: var(--color-red-800);
762
+ --color-background-accent-red-subtler-default: var(--color-red-900);
763
+ --color-background-accent-red-subtler-hover: var(--color-red-800);
764
+ --color-background-accent-red-subtler-pressed: var(--color-red-700);
765
+ --color-background-accent-red-subtle-default: var(--color-red-700);
766
+ --color-background-accent-red-subtle-hover: var(--color-red-600);
767
+ --color-background-accent-red-subtle-pressed: var(--color-red-500);
768
+ --color-background-accent-red-bolder-default: var(--color-red-400);
769
+ --color-background-accent-red-bolder-hover: var(--color-red-300);
770
+ --color-background-accent-red-bolder-pressed: var(--color-red-200);
671
771
  --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
672
772
  --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
673
773
  --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
@@ -692,17 +792,20 @@
692
792
  --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
693
793
  --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
694
794
  --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
695
- --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
696
- --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
697
- --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
698
- --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
699
- --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
700
- --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
701
- --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
702
- --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
703
- --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
795
+ --color-background-accent-gray-default: var(--color-dark-neutral-300);
796
+ --color-background-accent-gray-hover: var(--color-dark-neutral-400);
797
+ --color-background-accent-gray-pressed: var(--color-dark-neutral-500);
798
+ --color-background-accent-gray-subtle-default: var(--color-dark-neutral-200);
799
+ --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-300);
800
+ --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-400);
801
+ --color-background-accent-gray-subtler-default: var(--color-dark-neutral-100);
802
+ --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-200);
803
+ --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-300);
804
+ --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
805
+ --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
806
+ --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
704
807
  --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
705
- --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
808
+ --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
706
809
  --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
707
810
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
708
811
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);
package/build/bcc/css/tailwind-dark.css CHANGED
@@ -4,7 +4,6 @@
4
4
 
5
5
 
6
6
  @theme {
7
- --font-archivo: Archivo;
8
7
  --color-neutral-0: #ffffff;
9
8
  --color-neutral-100: #f7f8f9;
10
9
  --color-neutral-200: #f1f2f4;
@@ -36,7 +35,6 @@
36
35
  --color-dark-neutral-900: #b6c2cf;
37
36
  --color-dark-neutral-1000: #c7d1db;
38
37
  --color-dark-neutral-1100: #dee4ea;
39
- --color-dark-neutral-negative-100: #101214;
40
38
  --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
41
39
  --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
42
40
  --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -148,7 +146,6 @@
148
146
  --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16); /** Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. */
149
147
  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24); /** Use for the hovered state of color.background.inverse.subtle */
150
148
  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32); /** Use for the pressed state of color.background.inverse.subtle */
151
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
152
149
  --color-blanket-default: rgba(16, 18, 20, 0.6); /** Use for the screen overlay that appears with modal dialogs */
153
150
  --color-blanket-selected: rgba(29, 122, 252, 0.08); /** Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements */
154
151
  --color-blanket-danger: rgba(227, 73, 53, 0.08); /** Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements */
@@ -179,26 +176,24 @@
179
176
  --spacing-negative-300: -1.5rem; /** -24px */
180
177
  --spacing-negative-400: -2rem; /** -32px */
181
178
  --radius-none: 0; /** 0 */
182
- --radius-xs: 0.125rem; /** 2px */
183
- --radius-sm: 0.25rem; /** 4px */
179
+ --radius-2xs: 0.125rem; /** 2px */
180
+ --radius-xs: 0.25rem; /** 4px */
181
+ --radius-sm: 0.375rem; /** 6px */
184
182
  --radius-md: 0.5rem; /** 8px */
185
- --radius-lg: 1rem; /** 16px */
186
- --radius-xl: 1.5rem; /** 24px */
187
- --radius-2xl: 2rem; /** 32px */
188
- --radius-3xl: 3rem; /** 48px */
183
+ --radius-lg: 0.75rem; /** 12px */
184
+ --radius-xl: 1rem; /** 16px */
185
+ --radius-2xl: 1.5rem; /** 24px */
186
+ --radius-3xl: 2rem; /** 32 */
187
+ --radius-4xl: 3rem; /** 48px */
189
188
  --radius-full: 999px;
190
- --icon-size-xs: 1rem; /** 16px */
191
- --icon-size-sm: 1.25rem; /** 20px */
192
- --icon-size-md: 1.5rem; /** 24px */
193
- --icon-size-lg: 2rem; /** 32px */
194
- --icon-size-xl: 3rem; /** 48px */
195
189
  --border-width-0: 0;
196
190
  --border-width-1: 1px;
197
191
  --border-width-2: 2px;
192
+ --font-archivo: Archivo;
198
193
  --font-weight-regular: 400;
199
194
  --font-weight-medium: 500;
200
195
  --font-weight-bold: 700;
201
- --leading-1: 12px;
196
+ --leading-1: 14px;
202
197
  --leading-2: 16px;
203
198
  --leading-3: 20px;
204
199
  --leading-4: 24px;
@@ -206,9 +201,9 @@
206
201
  --leading-6: 32px;
207
202
  --leading-7: 36px;
208
203
  --leading-8: 40px;
209
- --leading-9: 52px;
204
+ --leading-9: 56px;
210
205
  --leading-10: 64px;
211
- --leading-none: 1;
206
+ --leading-none: normal;
212
207
  --text-xs: 0.75rem; /** 12px */
213
208
  --text-sm: 0.875rem; /** 14px */
214
209
  --text-md: 1rem; /** 16px */
@@ -217,11 +212,9 @@
217
212
  --text-2xl: 2em; /** 32px */
218
213
  --text-3xl: 2.25rem; /** 36px */
219
214
  --text-4xl: 3rem; /** 48px */
220
- --shadow-overflow-default: 0 0 12px 0 rgba(3, 4, 4, 0.56), 0 0 1px 0 rgba(3, 4, 4, 0.5); /** Use to create a shadow when content scrolls under other content. */
221
- --shadow-overflow-perimeter: inset 0 0 0 0 #091e421f;
222
- --shadow-overflow-spread: inset 0 0 0 0 #091e4229; /** Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow. */
223
- --shadow-overlay: 0 8px 12px 0 rgba(9, 30, 66, 0.15), 0 0 1px 0 1px rgba(9, 30, 66, 0.31); /** Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay Also use for the box shadow of raised cards in a dragged state. */
224
- --shadow-raised: 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31); /** Use for the box shadow of raised card elements */
215
+ --shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
216
+ --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
217
+ --shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
225
218
  --color-text-default: var(--color-dark-neutral-900);
226
219
  --color-text-subtle: var(--color-dark-neutral-800);
227
220
  --color-text-subtlest: var(--color-dark-neutral-700);
@@ -321,7 +314,6 @@
321
314
  --color-background-selected-bold-default: var(--color-bcc-400); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
322
315
  --color-background-selected-bold-hovered: var(--color-bcc-300); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
323
316
  --color-background-selected-bold-pressed: var(--color-bcc-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
324
- --color-background-inverse-default: var(--color-neutral-0);
325
317
  --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
326
318
  --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
327
319
  --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
@@ -361,14 +353,105 @@
361
353
  --color-background-brand-bolder-default: var(--color-bcc-400);
362
354
  --color-background-brand-bolder-hover: var(--color-bcc-300);
363
355
  --color-background-brand-bolder-pressed: var(--color-bcc-200);
364
- --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
365
- --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
366
- --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
367
- --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
368
- --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
369
- --color-background-accent-neutral-bolder-default: var(--color-red-400);
370
- --color-background-accent-neutral-bolder-hover: var(--color-red-300);
371
- --color-background-accent-neutral-bolder-pressed: var(--color-red-200);
356
+ --color-background-brand-boldest-default: var(--color-bcc-100);
357
+ --color-background-brand-boldest-hover: var(--color-bcc-200);
358
+ --color-background-brand-boldest-pressed: var(--color-bcc-300);
359
+ --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
360
+ --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
361
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
362
+ --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
363
+ --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
364
+ --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
365
+ --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
366
+ --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
367
+ --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
368
+ --color-background-neutral-subtlest-default: var(--color-transparent);
369
+ --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
370
+ --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
371
+ --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
372
+ --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
373
+ --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
374
+ --color-background-accent-blue-subtler-default: var(--color-blue-900);
375
+ --color-background-accent-blue-subtler-hover: var(--color-blue-800);
376
+ --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
377
+ --color-background-accent-blue-subtle-default: var(--color-blue-700);
378
+ --color-background-accent-blue-subtle-hover: var(--color-blue-600);
379
+ --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
380
+ --color-background-accent-blue-bolder-default: var(--color-blue-400);
381
+ --color-background-accent-blue-bolder-hover: var(--color-blue-300);
382
+ --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
383
+ --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
384
+ --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
385
+ --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
386
+ --color-background-accent-teal-subtler-default: var(--color-teal-900);
387
+ --color-background-accent-teal-subtler-hover: var(--color-teal-800);
388
+ --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
389
+ --color-background-accent-teal-subtle-default: var(--color-teal-700);
390
+ --color-background-accent-teal-subtle-hover: var(--color-teal-600);
391
+ --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
392
+ --color-background-accent-teal-bolder-default: var(--color-teal-400);
393
+ --color-background-accent-teal-bolder-hover: var(--color-teal-300);
394
+ --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
395
+ --color-background-accent-green-subtlest-default: var(--color-green-1000);
396
+ --color-background-accent-green-subtlest-hover: var(--color-green-900);
397
+ --color-background-accent-green-subtlest-pressed: var(--color-green-800);
398
+ --color-background-accent-green-subtler-default: var(--color-green-900);
399
+ --color-background-accent-green-subtler-hover: var(--color-green-800);
400
+ --color-background-accent-green-subtler-pressed: var(--color-green-700);
401
+ --color-background-accent-green-subtle-default: var(--color-green-700);
402
+ --color-background-accent-green-subtle-hover: var(--color-green-600);
403
+ --color-background-accent-green-subtle-pressed: var(--color-green-500);
404
+ --color-background-accent-green-bolder-default: var(--color-green-400);
405
+ --color-background-accent-green-bolder-hover: var(--color-green-300);
406
+ --color-background-accent-green-bolder-pressed: var(--color-green-200);
407
+ --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
408
+ --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
409
+ --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
410
+ --color-background-accent-brown-subtler-default: var(--color-brown-900);
411
+ --color-background-accent-brown-subtler-hover: var(--color-brown-800);
412
+ --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
413
+ --color-background-accent-brown-subtle-default: var(--color-brown-700);
414
+ --color-background-accent-brown-subtle-hover: var(--color-brown-600);
415
+ --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
416
+ --color-background-accent-brown-bolder-default: var(--color-brown-400);
417
+ --color-background-accent-brown-bolder-hover: var(--color-brown-300);
418
+ --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
419
+ --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
420
+ --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
421
+ --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
422
+ --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
423
+ --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
424
+ --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
425
+ --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
426
+ --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
427
+ --color-background-accent-yellow-subtle-pressed: var(--color-yellow-500);
428
+ --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
429
+ --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
430
+ --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
431
+ --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
432
+ --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
433
+ --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
434
+ --color-background-accent-orange-subtler-default: var(--color-orange-900);
435
+ --color-background-accent-orange-subtler-hover: var(--color-orange-800);
436
+ --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
437
+ --color-background-accent-orange-subtle-default: var(--color-orange-700);
438
+ --color-background-accent-orange-subtle-hover: var(--color-orange-600);
439
+ --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
440
+ --color-background-accent-orange-bolder-default: var(--color-orange-400);
441
+ --color-background-accent-orange-bolder-hover: var(--color-orange-300);
442
+ --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
443
+ --color-background-accent-red-subtlest-default: var(--color-red-1000);
444
+ --color-background-accent-red-subtlest-hover: var(--color-red-900);
445
+ --color-background-accent-red-subtlest-pressed: var(--color-red-800);
446
+ --color-background-accent-red-subtler-default: var(--color-red-900);
447
+ --color-background-accent-red-subtler-hover: var(--color-red-800);
448
+ --color-background-accent-red-subtler-pressed: var(--color-red-700);
449
+ --color-background-accent-red-subtle-default: var(--color-red-700);
450
+ --color-background-accent-red-subtle-hover: var(--color-red-600);
451
+ --color-background-accent-red-subtle-pressed: var(--color-red-500);
452
+ --color-background-accent-red-bolder-default: var(--color-red-400);
453
+ --color-background-accent-red-bolder-hover: var(--color-red-300);
454
+ --color-background-accent-red-bolder-pressed: var(--color-red-200);
372
455
  --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
373
456
  --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
374
457
  --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
@@ -393,17 +476,20 @@
393
476
  --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
394
477
  --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
395
478
  --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
396
- --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
397
- --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
398
- --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
399
- --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
400
- --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
401
- --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
402
- --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
403
- --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
404
- --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
479
+ --color-background-accent-gray-default: var(--color-dark-neutral-300);
480
+ --color-background-accent-gray-hover: var(--color-dark-neutral-400);
481
+ --color-background-accent-gray-pressed: var(--color-dark-neutral-500);
482
+ --color-background-accent-gray-subtle-default: var(--color-dark-neutral-200);
483
+ --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-300);
484
+ --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-400);
485
+ --color-background-accent-gray-subtler-default: var(--color-dark-neutral-100);
486
+ --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-200);
487
+ --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-300);
488
+ --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
489
+ --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
490
+ --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
405
491
  --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
406
- --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
492
+ --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
407
493
  --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
408
494
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
409
495
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
@@ -417,13 +503,20 @@
417
503
  --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
418
504
  --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
419
505
  --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
420
- --heading-xs: var(--font-weight-medium) var(--text-xs)/var(--leading-2) var(--font-archivo);
421
- --heading-sm: var(--font-weight-medium) var(--text-md)/var(--leading-3) var(--font-archivo);
422
- --heading-md: var(--font-weight-medium) var(--text-lg)/var(--leading-4) var(--font-archivo);
423
- --heading-lg: var(--font-weight-medium) var(--text-xl)/var(--leading-5) var(--font-archivo);
424
- --heading-xl: var(--font-weight-medium) var(--text-2xl)/var(--leading-6) var(--font-archivo);
425
- --heading-2xl: var(--font-weight-medium) var(--text-3xl)/var(--leading-8) var(--font-archivo);
426
- --heading-3xl: var(--font-weight-medium) var(--text-4xl)/var(--leading-9) var(--font-archivo);
506
+ --icon-size-xs: var(--spacing-200); /** 16px */
507
+ --icon-size-sm: var(--spacing-250); /** 20px */
508
+ --icon-size-md: var(--spacing-300); /** 24px */
509
+ --icon-size-lg: var(--spacing-400); /** 32px */
510
+ --icon-size-xl: var(--spacing-600); /** 48px */
511
+ --heading-xs: var(--font-weight-bold) var(--text-xs)/var(--leading-1) var(--font-archivo);
512
+ --heading-sm: var(--font-weight-bold) var(--text-sm)/var(--leading-2) var(--font-archivo);
513
+ --heading-md: var(--font-weight-bold) var(--text-md)/var(--leading-3) var(--font-archivo);
514
+ --heading-lg: var(--font-weight-bold) var(--text-lg)/var(--leading-4) var(--font-archivo);
515
+ --heading-xl: var(--font-weight-bold) var(--text-xl)/var(--leading-5) var(--font-archivo);
516
+ --heading-2xl: var(--font-weight-bold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
517
+ --heading-3xl: var(--font-weight-bold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
518
+ --heading-4xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
519
+ --heading-5xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-10) var(--font-archivo);
427
520
  --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
428
521
  --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
429
522
  --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);