@bcc-code/design-tokens 5.1.58 → 5.1.60

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 CHANGED
@@ -33,6 +33,50 @@ Component tokens are automatically picked up from `component.json` — no manual
33
33
 
34
34
  For BCC-specific layout/sizing overrides (not from Figma), add them to `MANUAL_COMPONENT_OVERRIDES` in `export-tokens/constants.js`.
35
35
 
36
+ ## Repository Structure
37
+
38
+ ### Generated folders
39
+
40
+ - `tokens/` is generated from Figma token exports (source of truth from design).
41
+ - `build/` is generated by running the build script (`npm run build` / `node export-tokens/build.js`).
42
+ - Do not hand-edit files in `build/`; regenerate instead.
43
+
44
+ ### `config/`
45
+
46
+ - `config/config-reference.json`
47
+ PrimeVue reference config used by the generator to understand PrimeVue's expected token structure and keys when creating `build/primevue/config.js`.
48
+ - **Can edit?** Usually **leave alone**. Edit only when intentionally updating PrimeVue mapping/reference behavior (for example after PrimeVue config structure changes).
49
+
50
+ ### `export-tokens/`
51
+
52
+ - `export-tokens/build.js`
53
+ Main build orchestrator. Runs validation, builds token outputs, combines theme files, generates types, and generates PrimeVue config.
54
+ - **Can edit?** **Yes**, when changing build flow or adding new outputs.
55
+
56
+ - `export-tokens/constants.js`
57
+ Central configuration for paths, token group lists, Tailwind mappings/utilities, known exceptions, and manual component overrides.
58
+ - **Can edit?** **Yes**. This is the primary file to update when adding token groups, mappings, or BCC manual overrides.
59
+
60
+ - `export-tokens/sd-formats.js`
61
+ Registers custom Style Dictionary transforms/formats (JS with refs, CSS variables, Tailwind utilities).
62
+ - **Can edit?** **Yes**, if you need to change output format behavior.
63
+
64
+ - `export-tokens/primevue-config.js`
65
+ Generates `build/primevue/config.js` from built tokens + `config/config-reference.json` and applies override logic/validation.
66
+ - **Can edit?** **Yes**, for PrimeVue mapping/resolution logic changes.
67
+
68
+ - `export-tokens/validation.js`
69
+ Validates light/dark token symmetry and warns about missing component theme overrides.
70
+ - **Can edit?** **Yes**, when adjusting validation rules.
71
+
72
+ - `export-tokens/bcc-build.js`
73
+ Creates combined `auto.css` and `tailwind-auto.css` from generated light/dark outputs.
74
+ - **Can edit?** **Yes**, if combined output strategy needs to change.
75
+
76
+ - `export-tokens/type-gen.js`
77
+ Generates `.d.ts` files for built JS/CSS outputs.
78
+ - **Can edit?** **Yes**, when changing published type declarations.
79
+
36
80
  ## License
37
81
 
38
82
  MIT
@@ -192,16 +192,17 @@
192
192
  --font-weight-medium: 500;
193
193
  --font-weight-bold: 700;
194
194
  --font-weight-semibold: 600;
195
- --line-height-1: 14px;
196
- --line-height-2: 16px;
197
- --line-height-3: 20px;
198
- --line-height-4: 24px;
199
- --line-height-5: 28px;
200
- --line-height-6: 32px;
201
- --line-height-7: 36px;
202
- --line-height-8: 40px;
203
- --line-height-9: 56px;
204
- --line-height-10: 64px;
195
+ --line-height-xs: 12px;
196
+ --line-height-sm: 14px;
197
+ --line-height-md: 16px;
198
+ --line-height-lg: 20px;
199
+ --line-height-xl: 24px;
200
+ --line-height-2xl: 28px;
201
+ --line-height-3xl: 32px;
202
+ --line-height-4xl: 36px;
203
+ --line-height-5xl: 40px;
204
+ --line-height-6xl: 56px;
205
+ --line-height-7xl: 64px;
205
206
  --line-height-none: normal;
206
207
  --font-size-xs: 0.75rem; /** 12px */
207
208
  --font-size-sm: 0.875rem; /** 14px */
@@ -501,18 +502,18 @@
501
502
  --icon-size-md: var(--space-300); /** 24px */
502
503
  --icon-size-lg: var(--space-400); /** 32px */
503
504
  --icon-size-xl: var(--space-600); /** 48px */
504
- --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
505
- --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
506
- --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
507
- --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
508
- --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
509
- --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
510
- --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
511
- --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
512
- --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-10) var(--font-family-archivo);
513
- --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
514
- --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
515
- --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
505
+ --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-sm) var(--font-family-archivo);
506
+ --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-md) var(--font-family-archivo);
507
+ --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-lg) var(--font-family-archivo);
508
+ --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-xl) var(--font-family-archivo);
509
+ --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-2xl) var(--font-family-archivo);
510
+ --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-3xl) var(--font-family-archivo);
511
+ --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-5xl) var(--font-family-archivo);
512
+ --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-6xl) var(--font-family-archivo);
513
+ --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-7xl) var(--font-family-archivo);
514
+ --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-md) var(--font-family-archivo);
515
+ --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-lg) var(--font-family-archivo);
516
+ --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-xl) var(--font-family-archivo);
516
517
  --color-text-selected: var(--color-brand-700);
517
518
  --color-text-brand-default: var(--color-brand-800);
518
519
  --color-text-brand-bold: var(--color-brand-900);
@@ -194,16 +194,17 @@
194
194
  --font-weight-medium: 500;
195
195
  --font-weight-bold: 700;
196
196
  --font-weight-semibold: 600;
197
- --line-height-1: 14px;
198
- --line-height-2: 16px;
199
- --line-height-3: 20px;
200
- --line-height-4: 24px;
201
- --line-height-5: 28px;
202
- --line-height-6: 32px;
203
- --line-height-7: 36px;
204
- --line-height-8: 40px;
205
- --line-height-9: 56px;
206
- --line-height-10: 64px;
197
+ --line-height-xs: 12px;
198
+ --line-height-sm: 14px;
199
+ --line-height-md: 16px;
200
+ --line-height-lg: 20px;
201
+ --line-height-xl: 24px;
202
+ --line-height-2xl: 28px;
203
+ --line-height-3xl: 32px;
204
+ --line-height-4xl: 36px;
205
+ --line-height-5xl: 40px;
206
+ --line-height-6xl: 56px;
207
+ --line-height-7xl: 64px;
207
208
  --line-height-none: normal;
208
209
  --font-size-xs: 0.75rem; /** 12px */
209
210
  --font-size-sm: 0.875rem; /** 14px */
@@ -502,18 +503,18 @@
502
503
  --icon-size-md: var(--space-300); /** 24px */
503
504
  --icon-size-lg: var(--space-400); /** 32px */
504
505
  --icon-size-xl: var(--space-600); /** 48px */
505
- --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
506
- --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
507
- --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
508
- --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
509
- --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
510
- --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
511
- --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
512
- --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
513
- --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-10) var(--font-family-archivo);
514
- --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
515
- --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
516
- --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
506
+ --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-sm) var(--font-family-archivo);
507
+ --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-md) var(--font-family-archivo);
508
+ --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-lg) var(--font-family-archivo);
509
+ --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-xl) var(--font-family-archivo);
510
+ --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-2xl) var(--font-family-archivo);
511
+ --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-3xl) var(--font-family-archivo);
512
+ --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-5xl) var(--font-family-archivo);
513
+ --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-6xl) var(--font-family-archivo);
514
+ --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-7xl) var(--font-family-archivo);
515
+ --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-md) var(--font-family-archivo);
516
+ --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-lg) var(--font-family-archivo);
517
+ --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-xl) var(--font-family-archivo);
517
518
  --color-text-selected: var(--color-brand-400);
518
519
  --color-text-brand-default: var(--color-brand-400);
519
520
  --color-text-brand-bold: var(--color-brand-300);
@@ -192,16 +192,17 @@
192
192
  --font-weight-medium: 500;
193
193
  --font-weight-bold: 700;
194
194
  --font-weight-semibold: 600;
195
- --line-height-1: 14px;
196
- --line-height-2: 16px;
197
- --line-height-3: 20px;
198
- --line-height-4: 24px;
199
- --line-height-5: 28px;
200
- --line-height-6: 32px;
201
- --line-height-7: 36px;
202
- --line-height-8: 40px;
203
- --line-height-9: 56px;
204
- --line-height-10: 64px;
195
+ --line-height-xs: 12px;
196
+ --line-height-sm: 14px;
197
+ --line-height-md: 16px;
198
+ --line-height-lg: 20px;
199
+ --line-height-xl: 24px;
200
+ --line-height-2xl: 28px;
201
+ --line-height-3xl: 32px;
202
+ --line-height-4xl: 36px;
203
+ --line-height-5xl: 40px;
204
+ --line-height-6xl: 56px;
205
+ --line-height-7xl: 64px;
205
206
  --line-height-none: normal;
206
207
  --font-size-xs: 0.75rem; /** 12px */
207
208
  --font-size-sm: 0.875rem; /** 14px */
@@ -501,18 +502,18 @@
501
502
  --icon-size-md: var(--space-300); /** 24px */
502
503
  --icon-size-lg: var(--space-400); /** 32px */
503
504
  --icon-size-xl: var(--space-600); /** 48px */
504
- --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-1) var(--font-family-archivo);
505
- --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-2) var(--font-family-archivo);
506
- --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-3) var(--font-family-archivo);
507
- --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-4) var(--font-family-archivo);
508
- --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-5) var(--font-family-archivo);
509
- --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-6) var(--font-family-archivo);
510
- --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-8) var(--font-family-archivo);
511
- --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-9) var(--font-family-archivo);
512
- --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-10) var(--font-family-archivo);
513
- --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-2) var(--font-family-archivo);
514
- --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-3) var(--font-family-archivo);
515
- --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-4) var(--font-family-archivo);
505
+ --heading-xs: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-sm) var(--font-family-archivo);
506
+ --heading-sm: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-md) var(--font-family-archivo);
507
+ --heading-md: var(--font-weight-semibold) var(--font-size-md)/var(--line-height-lg) var(--font-family-archivo);
508
+ --heading-lg: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-xl) var(--font-family-archivo);
509
+ --heading-xl: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-2xl) var(--font-family-archivo);
510
+ --heading-2xl: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-3xl) var(--font-family-archivo);
511
+ --heading-3xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-5xl) var(--font-family-archivo);
512
+ --heading-4xl: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-6xl) var(--font-family-archivo);
513
+ --heading-5xl: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-7xl) var(--font-family-archivo);
514
+ --body-sm: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-md) var(--font-family-archivo);
515
+ --body-md: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-lg) var(--font-family-archivo);
516
+ --body-lg: var(--font-weight-regular) var(--font-size-md)/var(--line-height-xl) var(--font-family-archivo);
516
517
  --color-text-selected: var(--color-brand-700);
517
518
  --color-text-brand-default: var(--color-brand-800);
518
519
  --color-text-brand-bold: var(--color-brand-900);
@@ -194,16 +194,17 @@
194
194
  --font-weight-medium: 500;
195
195
  --font-weight-bold: 700;
196
196
  --font-weight-semibold: 600;
197
- --leading-1: 14px;
198
- --leading-2: 16px;
199
- --leading-3: 20px;
200
- --leading-4: 24px;
201
- --leading-5: 28px;
202
- --leading-6: 32px;
203
- --leading-7: 36px;
204
- --leading-8: 40px;
205
- --leading-9: 56px;
206
- --leading-10: 64px;
197
+ --leading-xs: 12px;
198
+ --leading-sm: 14px;
199
+ --leading-md: 16px;
200
+ --leading-lg: 20px;
201
+ --leading-xl: 24px;
202
+ --leading-2xl: 28px;
203
+ --leading-3xl: 32px;
204
+ --leading-4xl: 36px;
205
+ --leading-5xl: 40px;
206
+ --leading-6xl: 56px;
207
+ --leading-7xl: 64px;
207
208
  --leading-none: normal;
208
209
  --text-xs: 0.75rem; /** 12px */
209
210
  --text-sm: 0.875rem; /** 14px */
@@ -503,18 +504,18 @@
503
504
  --icon-size-md: var(--spacing-300); /** 24px */
504
505
  --icon-size-lg: var(--spacing-400); /** 32px */
505
506
  --icon-size-xl: var(--spacing-600); /** 48px */
506
- --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-1) var(--font-archivo);
507
- --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-2) var(--font-archivo);
508
- --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-3) var(--font-archivo);
509
- --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-4) var(--font-archivo);
510
- --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-5) var(--font-archivo);
511
- --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
512
- --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
513
- --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
514
- --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-10) var(--font-archivo);
515
- --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
516
- --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
517
- --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);
507
+ --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-sm) var(--font-archivo);
508
+ --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-md) var(--font-archivo);
509
+ --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-lg) var(--font-archivo);
510
+ --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-xl) var(--font-archivo);
511
+ --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-2xl) var(--font-archivo);
512
+ --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-3xl) var(--font-archivo);
513
+ --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-5xl) var(--font-archivo);
514
+ --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-6xl) var(--font-archivo);
515
+ --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-7xl) var(--font-archivo);
516
+ --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-md) var(--font-archivo);
517
+ --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-lg) var(--font-archivo);
518
+ --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-xl) var(--font-archivo);
518
519
  --color-text-selected: var(--color-brand-700);
519
520
  --color-text-brand-default: var(--color-brand-800);
520
521
  --color-text-brand-bold: var(--color-brand-900);
@@ -193,16 +193,17 @@
193
193
  --font-weight-medium: 500;
194
194
  --font-weight-bold: 700;
195
195
  --font-weight-semibold: 600;
196
- --leading-1: 14px;
197
- --leading-2: 16px;
198
- --leading-3: 20px;
199
- --leading-4: 24px;
200
- --leading-5: 28px;
201
- --leading-6: 32px;
202
- --leading-7: 36px;
203
- --leading-8: 40px;
204
- --leading-9: 56px;
205
- --leading-10: 64px;
196
+ --leading-xs: 12px;
197
+ --leading-sm: 14px;
198
+ --leading-md: 16px;
199
+ --leading-lg: 20px;
200
+ --leading-xl: 24px;
201
+ --leading-2xl: 28px;
202
+ --leading-3xl: 32px;
203
+ --leading-4xl: 36px;
204
+ --leading-5xl: 40px;
205
+ --leading-6xl: 56px;
206
+ --leading-7xl: 64px;
206
207
  --leading-none: normal;
207
208
  --text-xs: 0.75rem; /** 12px */
208
209
  --text-sm: 0.875rem; /** 14px */
@@ -501,18 +502,18 @@
501
502
  --icon-size-md: var(--spacing-300); /** 24px */
502
503
  --icon-size-lg: var(--spacing-400); /** 32px */
503
504
  --icon-size-xl: var(--spacing-600); /** 48px */
504
- --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-1) var(--font-archivo);
505
- --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-2) var(--font-archivo);
506
- --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-3) var(--font-archivo);
507
- --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-4) var(--font-archivo);
508
- --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-5) var(--font-archivo);
509
- --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
510
- --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
511
- --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
512
- --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-10) var(--font-archivo);
513
- --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
514
- --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
515
- --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);
505
+ --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-sm) var(--font-archivo);
506
+ --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-md) var(--font-archivo);
507
+ --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-lg) var(--font-archivo);
508
+ --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-xl) var(--font-archivo);
509
+ --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-2xl) var(--font-archivo);
510
+ --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-3xl) var(--font-archivo);
511
+ --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-5xl) var(--font-archivo);
512
+ --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-6xl) var(--font-archivo);
513
+ --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-7xl) var(--font-archivo);
514
+ --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-md) var(--font-archivo);
515
+ --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-lg) var(--font-archivo);
516
+ --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-xl) var(--font-archivo);
516
517
  --color-text-selected: var(--color-brand-400);
517
518
  --color-text-brand-default: var(--color-brand-400);
518
519
  --color-text-brand-bold: var(--color-brand-300);
@@ -192,16 +192,17 @@
192
192
  --font-weight-medium: 500;
193
193
  --font-weight-bold: 700;
194
194
  --font-weight-semibold: 600;
195
- --leading-1: 14px;
196
- --leading-2: 16px;
197
- --leading-3: 20px;
198
- --leading-4: 24px;
199
- --leading-5: 28px;
200
- --leading-6: 32px;
201
- --leading-7: 36px;
202
- --leading-8: 40px;
203
- --leading-9: 56px;
204
- --leading-10: 64px;
195
+ --leading-xs: 12px;
196
+ --leading-sm: 14px;
197
+ --leading-md: 16px;
198
+ --leading-lg: 20px;
199
+ --leading-xl: 24px;
200
+ --leading-2xl: 28px;
201
+ --leading-3xl: 32px;
202
+ --leading-4xl: 36px;
203
+ --leading-5xl: 40px;
204
+ --leading-6xl: 56px;
205
+ --leading-7xl: 64px;
205
206
  --leading-none: normal;
206
207
  --text-xs: 0.75rem; /** 12px */
207
208
  --text-sm: 0.875rem; /** 14px */
@@ -501,18 +502,18 @@
501
502
  --icon-size-md: var(--spacing-300); /** 24px */
502
503
  --icon-size-lg: var(--spacing-400); /** 32px */
503
504
  --icon-size-xl: var(--spacing-600); /** 48px */
504
- --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-1) var(--font-archivo);
505
- --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-2) var(--font-archivo);
506
- --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-3) var(--font-archivo);
507
- --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-4) var(--font-archivo);
508
- --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-5) var(--font-archivo);
509
- --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
510
- --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
511
- --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
512
- --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-10) var(--font-archivo);
513
- --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
514
- --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
515
- --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);
505
+ --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-sm) var(--font-archivo);
506
+ --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-md) var(--font-archivo);
507
+ --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-lg) var(--font-archivo);
508
+ --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-xl) var(--font-archivo);
509
+ --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-2xl) var(--font-archivo);
510
+ --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-3xl) var(--font-archivo);
511
+ --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-5xl) var(--font-archivo);
512
+ --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-6xl) var(--font-archivo);
513
+ --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-7xl) var(--font-archivo);
514
+ --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-md) var(--font-archivo);
515
+ --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-lg) var(--font-archivo);
516
+ --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-xl) var(--font-archivo);
516
517
  --color-text-selected: var(--color-brand-700);
517
518
  --color-text-brand-default: var(--color-brand-800);
518
519
  --color-text-brand-bold: var(--color-brand-900);
@@ -798,16 +798,17 @@ declare const tokens: {
798
798
  semibold: number;
799
799
  };
800
800
  "line-height": {
801
- "1": string;
802
- "2": string;
803
- "3": string;
804
- "4": string;
805
- "5": string;
806
- "6": string;
807
- "7": string;
808
- "8": string;
809
- "9": string;
810
- "10": string;
801
+ xs: string;
802
+ sm: string;
803
+ md: string;
804
+ lg: string;
805
+ xl: string;
806
+ "2xl": string;
807
+ "3xl": string;
808
+ "4xl": string;
809
+ "5xl": string;
810
+ "6xl": string;
811
+ "7xl": string;
811
812
  none: string;
812
813
  };
813
814
  "font-size": {
@@ -798,16 +798,17 @@ export default {
798
798
  semibold: 600,
799
799
  },
800
800
  "line-height": {
801
- 1: "14px",
802
- 2: "16px",
803
- 3: "20px",
804
- 4: "24px",
805
- 5: "28px",
806
- 6: "32px",
807
- 7: "36px",
808
- 8: "40px",
809
- 9: "56px",
810
- 10: "64px",
801
+ xs: "12px",
802
+ sm: "14px",
803
+ md: "16px",
804
+ lg: "20px",
805
+ xl: "24px",
806
+ "2xl": "28px",
807
+ "3xl": "32px",
808
+ "4xl": "36px",
809
+ "5xl": "40px",
810
+ "6xl": "56px",
811
+ "7xl": "64px",
811
812
  none: "normal",
812
813
  },
813
814
  "font-size": {
@@ -798,16 +798,17 @@ declare const tokens: {
798
798
  semibold: number;
799
799
  };
800
800
  "line-height": {
801
- "1": string;
802
- "2": string;
803
- "3": string;
804
- "4": string;
805
- "5": string;
806
- "6": string;
807
- "7": string;
808
- "8": string;
809
- "9": string;
810
- "10": string;
801
+ xs: string;
802
+ sm: string;
803
+ md: string;
804
+ lg: string;
805
+ xl: string;
806
+ "2xl": string;
807
+ "3xl": string;
808
+ "4xl": string;
809
+ "5xl": string;
810
+ "6xl": string;
811
+ "7xl": string;
811
812
  none: string;
812
813
  };
813
814
  "font-size": {
@@ -798,16 +798,17 @@ export default {
798
798
  semibold: 600,
799
799
  },
800
800
  "line-height": {
801
- 1: "14px",
802
- 2: "16px",
803
- 3: "20px",
804
- 4: "24px",
805
- 5: "28px",
806
- 6: "32px",
807
- 7: "36px",
808
- 8: "40px",
809
- 9: "56px",
810
- 10: "64px",
801
+ xs: "12px",
802
+ sm: "14px",
803
+ md: "16px",
804
+ lg: "20px",
805
+ xl: "24px",
806
+ "2xl": "28px",
807
+ "3xl": "32px",
808
+ "4xl": "36px",
809
+ "5xl": "40px",
810
+ "6xl": "56px",
811
+ "7xl": "64px",
811
812
  none: "normal",
812
813
  },
813
814
  "font-size": {
@@ -565,29 +565,31 @@ const BCCPreset = definePreset(Aura, {
565
565
  semibold: 600
566
566
  },
567
567
  lineHeight: {
568
- "1": "14px",
569
- "2": "16px",
570
- "3": "20px",
571
- "4": "24px",
572
- "5": "28px",
573
- "6": "32px",
574
- "7": "36px",
575
- "8": "40px",
576
- "9": "56px",
577
- "10": "64px",
568
+ xs: "12px",
569
+ sm: "14px",
570
+ md: "16px",
571
+ lg: "20px",
572
+ xl: "24px",
573
+ "2xl": "28px",
574
+ "3xl": "32px",
575
+ "4xl": "36px",
576
+ "5xl": "40px",
577
+ "6xl": "56px",
578
+ "7xl": "64px",
578
579
  none: "normal"
579
580
  },
580
581
  "line-height": {
581
- "1": "14px",
582
- "2": "16px",
583
- "3": "20px",
584
- "4": "24px",
585
- "5": "28px",
586
- "6": "32px",
587
- "7": "36px",
588
- "8": "40px",
589
- "9": "56px",
590
- "10": "64px",
582
+ xs: "12px",
583
+ sm: "14px",
584
+ md: "16px",
585
+ lg: "20px",
586
+ xl: "24px",
587
+ "2xl": "28px",
588
+ "3xl": "32px",
589
+ "4xl": "36px",
590
+ "5xl": "40px",
591
+ "6xl": "56px",
592
+ "7xl": "64px",
591
593
  none: "normal"
592
594
  },
593
595
  fontSize: {
@@ -2270,7 +2272,7 @@ const BCCPreset = definePreset(Aura, {
2270
2272
  lg: {
2271
2273
  fontSize: "var(--font-size-md)"
2272
2274
  },
2273
- lineHeight: "var(--line-height-4)"
2275
+ lineHeight: "{line-height.4}"
2274
2276
  },
2275
2277
  icon: {
2276
2278
  size: "var(--space-250)",
@@ -3679,7 +3681,7 @@ const BCCPreset = definePreset(Aura, {
3679
3681
  transitionDuration: "{transition.duration}"
3680
3682
  },
3681
3683
  tablist: {
3682
- borderWidth: "0 0 1px 0",
3684
+ borderWidth: "var(--border-width-0)",
3683
3685
  background: "transparent",
3684
3686
  borderColor: "var(--color-border-default)"
3685
3687
  },
@@ -3687,7 +3689,7 @@ const BCCPreset = definePreset(Aura, {
3687
3689
  background: "transparent",
3688
3690
  hoverBackground: "transparent",
3689
3691
  activeBackground: "transparent",
3690
- borderWidth: "0 0 1px 0",
3692
+ borderWidth: "var(--border-width-2)",
3691
3693
  borderColor: "var(--color-border-default)",
3692
3694
  hoverBorderColor: "var(--color-border-default)",
3693
3695
  activeBorderColor: "var(--color-border-selected)",
@@ -3696,7 +3698,7 @@ const BCCPreset = definePreset(Aura, {
3696
3698
  activeColor: "var(--color-text-selected)",
3697
3699
  padding: "var(--space-150)",
3698
3700
  fontWeight: "var(--font-weight-medium)",
3699
- margin: "0 0 -1px 0",
3701
+ margin: "0",
3700
3702
  gap: "var(--space-100)",
3701
3703
  focusRing: {
3702
3704
  width: "{focus.ring.width}",
@@ -246,16 +246,17 @@ export default {
246
246
  semibold: 600,
247
247
  },
248
248
  "line-height": {
249
- 1: "14px",
250
- 2: "16px",
251
- 3: "20px",
252
- 4: "24px",
253
- 5: "28px",
254
- 6: "32px",
255
- 7: "36px",
256
- 8: "40px",
257
- 9: "56px",
258
- 10: "64px",
249
+ xs: "12px",
250
+ sm: "14px",
251
+ md: "16px",
252
+ lg: "20px",
253
+ xl: "24px",
254
+ "2xl": "28px",
255
+ "3xl": "32px",
256
+ "4xl": "36px",
257
+ "5xl": "40px",
258
+ "6xl": "56px",
259
+ "7xl": "64px",
259
260
  none: "normal",
260
261
  },
261
262
  "font-size": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/design-tokens",
3
- "version": "5.1.58",
3
+ "version": "5.1.60",
4
4
  "description": "Design tokens build system",
5
5
  "type": "module",
6
6
  "engines": {