@bcc-code/design-tokens 3.0.10 → 3.0.13

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 (18) hide show
  1. package/README.md +37 -2
  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.config.d.ts +6 -2
  16. package/config/primevue.config.js +987 -23
  17. package/package.json +6 -3
  18. package/build/bcc/js/aura-bcc-config.js +0 -1148
package/README.md CHANGED
@@ -186,9 +186,44 @@ We welcome contributions! Here's how to get started:
186
186
  - **Build configuration** is in `export-tokens/build.js` using Style Dictionary
187
187
  - **Output files** are generated in `build/bcc/` with organized folders for `css/` and `js/`
188
188
 
189
+ ### GitHub-Figma Workflow
190
+
191
+ The design token system integrates with Figma through Figma Token Studio, creating a streamlined workflow between design and development:
192
+
193
+ **1. Design in Figma**
194
+ - Design tokens are created and managed in Figma using the Token Studio plugin
195
+ - Tokens are organized into collections: primitives, semantic (light/dark), typeface, and PrimeVue
196
+ - Designers can make changes directly in Figma and preview them in real-time
197
+
198
+ **2. Export from Figma Token Studio**
199
+ - Use the Token Studio plugin to export tokens as JSON files
200
+ - Export collections separately or as a complete token set
201
+ - Tokens are exported in the Figma Token Studio format with proper references
202
+
203
+ **3. Sync to GitHub**
204
+ - Export token files from Figma Token Studio
205
+ - Update the corresponding files in the `tokens/` directory:
206
+ - `tokens/primitives/` - Base design tokens (colors, dimensions, typography)
207
+ - `tokens/semantic/light.json` - Light theme semantic tokens
208
+ - `tokens/semantic/dark.json` - Dark theme semantic tokens
209
+ - `tokens/typeface/` - Font definitions
210
+ - `tokens/primevue/aura-primitive.json` - PrimeVue Aura primitive tokens
211
+ - Commit changes to your feature branch
212
+
213
+ **4. Build and Deploy**
214
+ - Run `npm run build` to transform tokens into CSS, JS, and Tailwind formats
215
+ - The Style Dictionary build system processes tokens with custom transforms
216
+ - Generated files in `build/bcc/` are ready for distribution
217
+
218
+ **5. Version and Release**
219
+ - Create pull request with token changes
220
+ - Review generated output files and test with demo application
221
+ - Merge to main branch triggers automated release process
222
+ - New package version is published to npm with updated tokens
223
+
189
224
  ### Making Changes
190
225
 
191
- 1. **Token updates:** Modify files in `tokens/` directory or sync from Figma Token Studio
226
+ 1. **Token updates:** Export from Figma Token Studio and update files in `tokens/` directory
192
227
  2. **Build system changes:** Update `export-tokens/build.js` for new formats or transformations
193
228
  3. **PrimeVue preset:** Modify `config/primevue.config.js` for theme mapping changes
194
229
 
@@ -203,7 +238,7 @@ We welcome contributions! Here's how to get started:
203
238
 
204
239
  A comprehensive demo application is available in the `demo/` directory featuring:
205
240
 
206
- - **CSS Variables showcase**: E-commerce product cards, newsletter forms, and status displays using pure CSS with BCC tokens
241
+ - **CSS Variables showcase**: Custom cards, newsletter forms, and status displays using pure CSS with BCC tokens
207
242
  - **Tailwind Utilities showcase**: Project management dashboard with utility-first CSS classes
208
243
  - **PrimeVue Components showcase**: User profiles, settings panels, and component galleries
209
244
  - **Theme switching**: Manual dark/light mode toggle with system preference detection
package/build/bcc/css/auto.css CHANGED
@@ -4,7 +4,6 @@
4
4
 
5
5
 
6
6
  :root {
7
- --font-family-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);
@@ -176,26 +174,24 @@
176
174
  --space-negative-300: -1.5rem; /** -24px */
177
175
  --space-negative-400: -2rem; /** -32px */
178
176
  --border-radius-none: 0; /** 0 */
179
- --border-radius-xs: 0.125rem; /** 2px */
180
- --border-radius-sm: 0.25rem; /** 4px */
177
+ --border-radius-2xs: 0.125rem; /** 2px */
178
+ --border-radius-xs: 0.25rem; /** 4px */
179
+ --border-radius-sm: 0.375rem; /** 6px */
181
180
  --border-radius-md: 0.5rem; /** 8px */
182
- --border-radius-lg: 1rem; /** 16px */
183
- --border-radius-xl: 1.5rem; /** 24px */
184
- --border-radius-2xl: 2rem; /** 32px */
185
- --border-radius-3xl: 3rem; /** 48px */
181
+ --border-radius-lg: 0.75rem; /** 12px */
182
+ --border-radius-xl: 1rem; /** 16px */
183
+ --border-radius-2xl: 1.5rem; /** 24px */
184
+ --border-radius-3xl: 2rem; /** 32 */
185
+ --border-radius-4xl: 3rem; /** 48px */
186
186
  --border-radius-full: 999px;
187
- --icon-size-xs: 1rem; /** 16px */
188
- --icon-size-sm: 1.25rem; /** 20px */
189
- --icon-size-md: 1.5rem; /** 24px */
190
- --icon-size-lg: 2rem; /** 32px */
191
- --icon-size-xl: 3rem; /** 48px */
192
187
  --border-width-0: 0;
193
188
  --border-width-1: 1px;
194
189
  --border-width-2: 2px;
190
+ --font-family-archivo: Archivo;
195
191
  --font-weight-regular: 400;
196
192
  --font-weight-medium: 500;
197
193
  --font-weight-bold: 700;
198
- --line-height-1: 12px;
194
+ --line-height-1: 14px;
199
195
  --line-height-2: 16px;
200
196
  --line-height-3: 20px;
201
197
  --line-height-4: 24px;
@@ -203,9 +199,9 @@
203
199
  --line-height-6: 32px;
204
200
  --line-height-7: 36px;
205
201
  --line-height-8: 40px;
206
- --line-height-9: 52px;
202
+ --line-height-9: 56px;
207
203
  --line-height-10: 64px;
208
- --line-height-none: 1;
204
+ --line-height-none: normal;
209
205
  --font-size-xs: 0.75rem; /** 12px */
210
206
  --font-size-sm: 0.875rem; /** 14px */
211
207
  --font-size-md: 1rem; /** 16px */
@@ -214,6 +210,9 @@
214
210
  --font-size-2xl: 2em; /** 32px */
215
211
  --font-size-3xl: 2.25rem; /** 36px */
216
212
  --font-size-4xl: 3rem; /** 48px */
213
+ --elevation-shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
214
+ --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
215
+ --elevation-shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
217
216
  --color-text-default: var(--color-neutral-1000);
218
217
  --color-text-subtle: var(--color-neutral-800);
219
218
  --color-text-subtlest: var(--color-neutral-700);
@@ -355,18 +354,18 @@
355
354
  --color-background-brand-boldest-default: var(--color-bcc-1000);
356
355
  --color-background-brand-boldest-hover: var(--color-bcc-900);
357
356
  --color-background-brand-boldest-pressed: var(--color-bcc-800);
358
- --color-background-accent-neutral-default: var(--color-neutral-alpha-300-a);
359
- --color-background-accent-neutral-hover: var(--color-neutral-alpha-400-a);
360
- --color-background-accent-neutral-pressed: var(--color-neutral-alpha-500-a);
361
- --color-background-accent-neutral-subtle-default: var(--color-neutral-alpha-200-a);
362
- --color-background-accent-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
363
- --color-background-accent-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
364
- --color-background-accent-neutral-subtler-default: var(--color-neutral-alpha-100-a);
365
- --color-background-accent-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
366
- --color-background-accent-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
367
- --color-background-accent-neutral-subtlest-default: var(--color-transparent);
368
- --color-background-accent-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
369
- --color-background-accent-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
357
+ --color-background-neutral-default: var(--color-neutral-alpha-300-a);
358
+ --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
359
+ --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
360
+ --color-background-neutral-subtle-default: var(--color-neutral-alpha-200-a);
361
+ --color-background-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
362
+ --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
363
+ --color-background-neutral-subtler-default: var(--color-neutral-alpha-100-a);
364
+ --color-background-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
365
+ --color-background-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
366
+ --color-background-neutral-subtlest-default: var(--color-transparent);
367
+ --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
368
+ --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
370
369
  --color-background-accent-blue-subtle-default: var(--color-blue-400);
371
370
  --color-background-accent-blue-subtle-hover: var(--color-blue-300);
372
371
  --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -441,7 +440,10 @@
441
440
  --color-background-accent-orange-bolder-pressed: var(--color-orange-900);
442
441
  --color-background-accent-red-subtle-default: var(--color-red-400);
443
442
  --color-background-accent-red-subtle-hover: var(--color-red-300);
444
- --color-background-accent-red-subtle-pressed: var(--color-red-400);
443
+ --color-background-accent-red-subtle-pressed: var(--color-red-200);
444
+ --color-background-accent-red-subtler-default: var(--color-red-200);
445
+ --color-background-accent-red-subtler-hover: var(--color-red-300);
446
+ --color-background-accent-red-subtler-pressed: var(--color-red-400);
445
447
  --color-background-accent-red-subtlest-default: var(--color-red-100);
446
448
  --color-background-accent-red-subtlest-hover: var(--color-red-200);
447
449
  --color-background-accent-red-subtlest-pressed: var(--color-red-300);
@@ -500,13 +502,20 @@
500
502
  --color-elevation-surface-raised-hovered: var(--color-neutral-200);
501
503
  --color-elevation-surface-raised-pressed: var(--color-neutral-300);
502
504
  --color-elevation-surface-sunken-default: var(--color-neutral-100);
503
- --heading-xs: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
504
- --heading-sm: var(--font-weight-medium) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
505
- --heading-md: var(--font-weight-medium) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
506
- --heading-lg: var(--font-weight-medium) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
507
- --heading-xl: var(--font-weight-medium) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
508
- --heading-2xl: var(--font-weight-medium) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
509
- --heading-3xl: var(--font-weight-medium) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
505
+ --icon-size-xs: var(--space-200); /** 16px */
506
+ --icon-size-sm: var(--space-250); /** 20px */
507
+ --icon-size-md: var(--space-300); /** 24px */
508
+ --icon-size-lg: var(--space-400); /** 32px */
509
+ --icon-size-xl: var(--space-600); /** 48px */
510
+ --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
511
+ --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
512
+ --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
513
+ --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
514
+ --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
515
+ --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
516
+ --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
517
+ --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
518
+ --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
510
519
  --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
511
520
  --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
512
521
  --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
@@ -516,7 +525,6 @@
516
525
  --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16);
517
526
  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24);
518
527
  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32);
519
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
520
528
  --color-blanket-default: rgba(16, 18, 20, 0.6);
521
529
  --color-blanket-selected: rgba(29, 122, 252, 0.08);
522
530
  --color-blanket-danger: rgba(227, 73, 53, 0.08);
@@ -660,11 +668,103 @@
660
668
  --color-background-brand-bolder-default: var(--color-bcc-400);
661
669
  --color-background-brand-bolder-hover: var(--color-bcc-300);
662
670
  --color-background-brand-bolder-pressed: var(--color-bcc-200);
663
- --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
664
- --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
665
- --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
666
- --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
667
- --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
671
+ --color-background-brand-boldest-default: var(--color-bcc-100);
672
+ --color-background-brand-boldest-hover: var(--color-bcc-200);
673
+ --color-background-brand-boldest-pressed: var(--color-bcc-300);
674
+ --color-background-neutral-default: var(--color-dark-neutral-alpha-300-a);
675
+ --color-background-neutral-hover: var(--color-dark-neutral-alpha-400-a);
676
+ --color-background-neutral-pressed: var(--color-dark-neutral-alpha-500-a);
677
+ --color-background-neutral-subtle-default: var(--color-dark-neutral-alpha-200-a);
678
+ --color-background-neutral-subtle-hover: var(--color-dark-neutral-alpha-300-a);
679
+ --color-background-neutral-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
680
+ --color-background-neutral-subtler-default: var(--color-dark-neutral-alpha-100-a);
681
+ --color-background-neutral-subtler-hover: var(--color-dark-neutral-alpha-200-a);
682
+ --color-background-neutral-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
683
+ --color-background-neutral-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
684
+ --color-background-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
685
+ --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
686
+ --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
687
+ --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
688
+ --color-background-accent-blue-subtler-default: var(--color-blue-900);
689
+ --color-background-accent-blue-subtler-hover: var(--color-blue-800);
690
+ --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
691
+ --color-background-accent-blue-subtle-default: var(--color-blue-700);
692
+ --color-background-accent-blue-subtle-hover: var(--color-blue-600);
693
+ --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
694
+ --color-background-accent-blue-bolder-default: var(--color-blue-400);
695
+ --color-background-accent-blue-bolder-hover: var(--color-blue-300);
696
+ --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
697
+ --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
698
+ --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
699
+ --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
700
+ --color-background-accent-teal-subtler-default: var(--color-teal-900);
701
+ --color-background-accent-teal-subtler-hover: var(--color-teal-800);
702
+ --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
703
+ --color-background-accent-teal-subtle-default: var(--color-teal-700);
704
+ --color-background-accent-teal-subtle-hover: var(--color-teal-600);
705
+ --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
706
+ --color-background-accent-teal-bolder-default: var(--color-teal-400);
707
+ --color-background-accent-teal-bolder-hover: var(--color-teal-300);
708
+ --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
709
+ --color-background-accent-green-subtlest-default: var(--color-green-1000);
710
+ --color-background-accent-green-subtlest-hover: var(--color-green-900);
711
+ --color-background-accent-green-subtlest-pressed: var(--color-green-800);
712
+ --color-background-accent-green-subtler-default: var(--color-green-900);
713
+ --color-background-accent-green-subtler-hover: var(--color-green-800);
714
+ --color-background-accent-green-subtler-pressed: var(--color-green-700);
715
+ --color-background-accent-green-subtle-default: var(--color-green-700);
716
+ --color-background-accent-green-subtle-hover: var(--color-green-600);
717
+ --color-background-accent-green-subtle-pressed: var(--color-green-500);
718
+ --color-background-accent-green-bolder-default: var(--color-green-400);
719
+ --color-background-accent-green-bolder-hover: var(--color-green-300);
720
+ --color-background-accent-green-bolder-pressed: var(--color-green-200);
721
+ --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
722
+ --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
723
+ --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
724
+ --color-background-accent-brown-subtler-default: var(--color-brown-900);
725
+ --color-background-accent-brown-subtler-hover: var(--color-brown-800);
726
+ --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
727
+ --color-background-accent-brown-subtle-default: var(--color-brown-700);
728
+ --color-background-accent-brown-subtle-hover: var(--color-brown-600);
729
+ --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
730
+ --color-background-accent-brown-bolder-default: var(--color-brown-400);
731
+ --color-background-accent-brown-bolder-hover: var(--color-brown-300);
732
+ --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
733
+ --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
734
+ --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
735
+ --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
736
+ --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
737
+ --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
738
+ --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
739
+ --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
740
+ --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
741
+ --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
742
+ --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
743
+ --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
744
+ --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
745
+ --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
746
+ --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
747
+ --color-background-accent-orange-subtler-default: var(--color-orange-900);
748
+ --color-background-accent-orange-subtler-hover: var(--color-orange-800);
749
+ --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
750
+ --color-background-accent-orange-subtle-default: var(--color-orange-700);
751
+ --color-background-accent-orange-subtle-hover: var(--color-orange-600);
752
+ --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
753
+ --color-background-accent-orange-bolder-default: var(--color-orange-400);
754
+ --color-background-accent-orange-bolder-hover: var(--color-orange-300);
755
+ --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
756
+ --color-background-accent-red-subtlest-default: var(--color-red-1000);
757
+ --color-background-accent-red-subtlest-hover: var(--color-red-900);
758
+ --color-background-accent-red-subtlest-pressed: var(--color-red-800);
759
+ --color-background-accent-red-subtler-default: var(--color-red-900);
760
+ --color-background-accent-red-subtler-hover: var(--color-red-800);
761
+ --color-background-accent-red-subtler-pressed: var(--color-red-700);
762
+ --color-background-accent-red-subtle-default: var(--color-red-700);
763
+ --color-background-accent-red-subtle-hover: var(--color-red-600);
764
+ --color-background-accent-red-subtle-pressed: var(--color-red-500);
765
+ --color-background-accent-red-bolder-default: var(--color-red-400);
766
+ --color-background-accent-red-bolder-hover: var(--color-red-300);
767
+ --color-background-accent-red-bolder-pressed: var(--color-red-200);
668
768
  --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
669
769
  --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
670
770
  --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
@@ -689,17 +789,20 @@
689
789
  --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
690
790
  --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
691
791
  --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
692
- --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
693
- --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
694
- --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
695
- --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
696
- --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
697
- --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
698
- --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
699
- --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
700
- --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
792
+ --color-background-accent-gray-default: var(--color-dark-neutral-300);
793
+ --color-background-accent-gray-hover: var(--color-dark-neutral-400);
794
+ --color-background-accent-gray-pressed: var(--color-dark-neutral-500);
795
+ --color-background-accent-gray-subtle-default: var(--color-dark-neutral-200);
796
+ --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-300);
797
+ --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-400);
798
+ --color-background-accent-gray-subtler-default: var(--color-dark-neutral-100);
799
+ --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-200);
800
+ --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-300);
801
+ --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
802
+ --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
803
+ --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
701
804
  --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
702
- --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
805
+ --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
703
806
  --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
704
807
  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
705
808
  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);
package/build/bcc/css/dark.css CHANGED
@@ -5,7 +5,6 @@
5
5
 
6
6
  @media (prefers-color-scheme: dark) {
7
7
  :root {
8
- --font-family-archivo: Archivo;
9
8
  --color-neutral-0: #ffffff;
10
9
  --color-neutral-100: #f7f8f9;
11
10
  --color-neutral-200: #f1f2f4;
@@ -37,7 +36,6 @@
37
36
  --color-dark-neutral-900: #b6c2cf;
38
37
  --color-dark-neutral-1000: #c7d1db;
39
38
  --color-dark-neutral-1100: #dee4ea;
40
- --color-dark-neutral-negative-100: #101214;
41
39
  --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
42
40
  --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
43
41
  --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -149,7 +147,6 @@
149
147
  --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. */
150
148
  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24); /** Use for the hovered state of color.background.inverse.subtle */
151
149
  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32); /** Use for the pressed state of color.background.inverse.subtle */
152
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
153
150
  --color-blanket-default: rgba(16, 18, 20, 0.6); /** Use for the screen overlay that appears with modal dialogs */
154
151
  --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 */
155
152
  --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
  --space-negative-300: -1.5rem; /** -24px */
180
177
  --space-negative-400: -2rem; /** -32px */
181
178
  --border-radius-none: 0; /** 0 */
182
- --border-radius-xs: 0.125rem; /** 2px */
183
- --border-radius-sm: 0.25rem; /** 4px */
179
+ --border-radius-2xs: 0.125rem; /** 2px */
180
+ --border-radius-xs: 0.25rem; /** 4px */
181
+ --border-radius-sm: 0.375rem; /** 6px */
184
182
  --border-radius-md: 0.5rem; /** 8px */
185
- --border-radius-lg: 1rem; /** 16px */
186
- --border-radius-xl: 1.5rem; /** 24px */
187
- --border-radius-2xl: 2rem; /** 32px */
188
- --border-radius-3xl: 3rem; /** 48px */
183
+ --border-radius-lg: 0.75rem; /** 12px */
184
+ --border-radius-xl: 1rem; /** 16px */
185
+ --border-radius-2xl: 1.5rem; /** 24px */
186
+ --border-radius-3xl: 2rem; /** 32 */
187
+ --border-radius-4xl: 3rem; /** 48px */
189
188
  --border-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-family-archivo: Archivo;
198
193
  --font-weight-regular: 400;
199
194
  --font-weight-medium: 500;
200
195
  --font-weight-bold: 700;
201
- --line-height-1: 12px;
196
+ --line-height-1: 14px;
202
197
  --line-height-2: 16px;
203
198
  --line-height-3: 20px;
204
199
  --line-height-4: 24px;
@@ -206,9 +201,9 @@
206
201
  --line-height-6: 32px;
207
202
  --line-height-7: 36px;
208
203
  --line-height-8: 40px;
209
- --line-height-9: 52px;
204
+ --line-height-9: 56px;
210
205
  --line-height-10: 64px;
211
- --line-height-none: 1;
206
+ --line-height-none: normal;
212
207
  --font-size-xs: 0.75rem; /** 12px */
213
208
  --font-size-sm: 0.875rem; /** 14px */
214
209
  --font-size-md: 1rem; /** 16px */
@@ -217,11 +212,9 @@
217
212
  --font-size-2xl: 2em; /** 32px */
218
213
  --font-size-3xl: 2.25rem; /** 36px */
219
214
  --font-size-4xl: 3rem; /** 48px */
220
- --elevation-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
- --elevation-shadow-overflow-perimeter: inset 0 0 0 0 #091e421f;
222
- --elevation-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
- --elevation-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
- --elevation-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
+ --elevation-shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
216
+ --elevation-shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
217
+ --elevation-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(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
421
- --heading-sm: var(--font-weight-medium) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
422
- --heading-md: var(--font-weight-medium) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
423
- --heading-lg: var(--font-weight-medium) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
424
- --heading-xl: var(--font-weight-medium) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
425
- --heading-2xl: var(--font-weight-medium) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
426
- --heading-3xl: var(--font-weight-medium) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
506
+ --icon-size-xs: var(--space-200); /** 16px */
507
+ --icon-size-sm: var(--space-250); /** 20px */
508
+ --icon-size-md: var(--space-300); /** 24px */
509
+ --icon-size-lg: var(--space-400); /** 32px */
510
+ --icon-size-xl: var(--space-600); /** 48px */
511
+ --heading-xs: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
512
+ --heading-sm: var(--font-weight-bold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
513
+ --heading-md: var(--font-weight-bold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
514
+ --heading-lg: var(--font-weight-bold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
515
+ --heading-xl: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
516
+ --heading-2xl: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
517
+ --heading-3xl: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
518
+ --heading-4xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
519
+ --heading-5xl: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-10) var(--font-family-archivo);
427
520
  --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
428
521
  --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
429
522
  --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);