@helloimjolopez-pathway/pathway-tokens 4.0.1 → 5.0.0

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 (5) hide show
  1. package/README.md +30 -1
  2. package/dist/tokens.css +70 -42
  3. package/dist/tokens.js +966 -136
  4. package/dist/tokens.json +176 -48
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -24,7 +24,7 @@ import tokenJson from "@helloimjolopez-pathway/pathway-tokens/json";
24
24
  Without a bundler — link the CSS directly:
25
25
 
26
26
  ```html
27
- <link rel="stylesheet" href="https://helloimjolopez-collab.github.io/pathway-ds/storybook/tokens.css" />
27
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/tokens.css" />
28
28
  ```
29
29
 
30
30
  Once loaded, use the custom properties anywhere:
@@ -90,3 +90,32 @@ Three workflows in `.github/workflows/`:
90
90
  3. **`deploy-storybook.yml`** — fires when `tokens/`, `src/`, `.storybook/`, `components/`, `docs/`, or `style-dictionary.config.js` changes. Rebuilds Style Dictionary + Storybook and commits the built site to `/storybook/` on `main`. GitHub Pages serves that folder.
91
91
 
92
92
  Source of truth is always the repo on `main`; Storybook is a downstream artifact.
93
+
94
+ ## Typography (brand fonts)
95
+
96
+ Pathway uses **Red Hat Text** (all UI text) and **Red Hat Display** (headings H1–H3 only). Both are open-source Google Fonts.
97
+
98
+ **Load via CDN (web/prototypes):**
99
+
100
+ ```html
101
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
102
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
103
+ <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@600&family=Red+Hat+Text:wght@400;500;600;700&display=swap" rel="stylesheet" />
104
+ ```
105
+
106
+ **Download font files (for Claude Design, Figma, or offline tools):**
107
+ - Red Hat Text: https://fonts.google.com/specimen/Red+Hat+Text → click **Download family**
108
+ - Red Hat Display: https://fonts.google.com/specimen/Red+Hat+Display → click **Download family**
109
+
110
+ Licensed under the [SIL Open Font License](https://scripts.sil.org/OFL). Free for any use.
111
+
112
+ ## Component-to-token map
113
+
114
+ `tokens/component-token-map.json` maps every component element to its CSS variable. Use this file to answer "which token does X use?" without reading specs.
115
+
116
+ ## Known token gaps
117
+
118
+ | Gap | Fix needed |
119
+ |---|---|
120
+ | Font-size tokens are unitless numbers | Use `calc(var(--...-fontsize) * 1px)` in CSS |
121
+ | No `Red Hat Display` token | Add `family-display: Red Hat Display` in Figma Variables, re-export |
package/dist/tokens.css CHANGED
@@ -461,9 +461,9 @@
461
461
  --semantic-color-light-mode-text-action-secondaryinverse-hover: var(--primitive-color-cool-neutral-150);
462
462
  --semantic-color-light-mode-text-action-secondaryinverse-pressed: var(--primitive-color-cool-neutral-160);
463
463
  --semantic-color-light-mode-text-action-secondaryinverse-disabled: var(--primitive-color-cool-neutral-90);
464
- --semantic-color-light-mode-text-action-tertiary-base: var(--primitive-color-brand-500);
465
- --semantic-color-light-mode-text-action-tertiary-hover: var(--primitive-color-brand-600);
466
- --semantic-color-light-mode-text-action-tertiary-pressed: var(--primitive-color-brand-700);
464
+ --semantic-color-light-mode-text-action-tertiary-base: var(--primitive-color-brand-400);
465
+ --semantic-color-light-mode-text-action-tertiary-hover: var(--primitive-color-brand-500);
466
+ --semantic-color-light-mode-text-action-tertiary-pressed: var(--primitive-color-brand-600);
467
467
  --semantic-color-light-mode-text-action-tertiary-disabled: var(--primitive-color-brand-50);
468
468
  --semantic-color-light-mode-text-action-mono-base: var(--primitive-color-cool-neutral-10);
469
469
  --semantic-color-light-mode-text-action-mono-hover: var(--primitive-color-cool-neutral-0);
@@ -525,9 +525,9 @@
525
525
  --semantic-color-light-mode-text-contextual-navitem-focused: var(--primitive-color-cool-neutral-180);
526
526
  --semantic-color-light-mode-text-contextual-navitem-active: var(--primitive-color-brand-700);
527
527
  --semantic-color-light-mode-text-contextual-navitem-disabled: var(--primitive-color-cool-neutral-220-50);
528
- --semantic-color-light-mode-fill-action-primary-base: var(--primitive-color-brand-100);
529
- --semantic-color-light-mode-fill-action-primary-hover: var(--primitive-color-brand-90);
530
- --semantic-color-light-mode-fill-action-primary-pressed: var(--primitive-color-brand-300);
528
+ --semantic-color-light-mode-fill-action-primary-base: var(--primitive-color-brand-300);
529
+ --semantic-color-light-mode-fill-action-primary-hover: var(--primitive-color-brand-200);
530
+ --semantic-color-light-mode-fill-action-primary-pressed: var(--primitive-color-brand-400);
531
531
  --semantic-color-light-mode-fill-action-primary-disabled: var(--primitive-color-brand-40);
532
532
  --semantic-color-light-mode-fill-action-primaryinverse-base: var(--primitive-color-brand-0);
533
533
  --semantic-color-light-mode-fill-action-primaryinverse-hover: var(--primitive-color-brand-10);
@@ -541,9 +541,9 @@
541
541
  --semantic-color-light-mode-fill-action-secondaryinverse-hover: var(--primitive-color-warm-neutral-200);
542
542
  --semantic-color-light-mode-fill-action-secondaryinverse-pressed: var(--primitive-color-warm-neutral-300);
543
543
  --semantic-color-light-mode-fill-action-secondaryinverse-disabled: var(--primitive-color-cool-neutral-220-2);
544
- --semantic-color-light-mode-fill-action-tertiary-base: var(--primitive-color-brand-10);
545
- --semantic-color-light-mode-fill-action-tertiary-hover: var(--primitive-color-brand-20);
546
- --semantic-color-light-mode-fill-action-tertiary-pressed: var(--primitive-color-brand-30);
544
+ --semantic-color-light-mode-fill-action-tertiary-base: var(--primitive-color-brand-100);
545
+ --semantic-color-light-mode-fill-action-tertiary-hover: var(--primitive-color-brand-80);
546
+ --semantic-color-light-mode-fill-action-tertiary-pressed: var(--primitive-color-brand-200);
547
547
  --semantic-color-light-mode-fill-action-tertiary-disabled: var(--primitive-color-brand-50-8);
548
548
  --semantic-color-light-mode-fill-action-tertiary-inverse-base: var(--primitive-color-brand-10);
549
549
  --semantic-color-light-mode-fill-action-tertiary-inverse-hover: var(--primitive-color-brand-20);
@@ -597,14 +597,13 @@
597
597
  --semantic-color-light-mode-fill-action-accent-jade-inverse-hover: var(--primitive-color-jade-30);
598
598
  --semantic-color-light-mode-fill-action-accent-jade-inverse-pressed: var(--primitive-color-jade-40);
599
599
  --semantic-color-light-mode-fill-action-accent-jade-inverse-disabled: var(--primitive-color-jade-10);
600
- --semantic-color-light-mode-fill-static-neutral-light: var(--primitive-color-cool-neutral-0);
601
- --semantic-color-light-mode-fill-static-neutral-subtle: var(--primitive-color-cool-neutral-10);
602
- --semantic-color-light-mode-fill-static-neutral-base: var(--primitive-color-cool-neutral-20);
603
- --semantic-color-light-mode-fill-static-neutral-opacity-80: var(--primitive-color-cool-neutral-0-80);
604
- --semantic-color-light-mode-fill-static-neutral-opacity-70: var(--primitive-color-cool-neutral-0-70);
605
- --semantic-color-light-mode-fill-static-neutral-opacity-30: var(--primitive-color-cool-neutral-0-30);
606
- --semantic-color-light-mode-fill-static-neutral-opacity-16: var(--primitive-color-cool-neutral-0-16);
607
- --semantic-color-light-mode-fill-static-neutral-opacity-8: var(--primitive-color-cool-neutral-0-8);
600
+ --semantic-color-light-mode-fill-static-neutral-light: var(--primitive-color-warm-neutral-0);
601
+ --semantic-color-light-mode-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-100);
602
+ --semantic-color-light-mode-fill-static-neutral-base: var(--primitive-color-warm-neutral-200);
603
+ --semantic-color-light-mode-fill-static-neutral-opacity-70: var(--primitive-color-warm-neutral-200-70);
604
+ --semantic-color-light-mode-fill-static-neutral-opacity-30: var(--primitive-color-warm-neutral-200-30);
605
+ --semantic-color-light-mode-fill-static-neutral-opacity-16: var(--primitive-color-warm-neutral-200-16);
606
+ --semantic-color-light-mode-fill-static-neutral-opacity-8: var(--primitive-color-warm-neutral-200-8);
608
607
  --semantic-color-light-mode-fill-static-brand-light: var(--primitive-color-brand-70);
609
608
  --semantic-color-light-mode-fill-static-brand-subtle: var(--primitive-color-brand-300);
610
609
  --semantic-color-light-mode-fill-static-brand-base: var(--primitive-color-brand-500);
@@ -622,14 +621,14 @@
622
621
  --semantic-color-light-mode-fill-static-warning-base: var(--primitive-color-saffron-30);
623
622
  --semantic-color-light-mode-fill-static-warning-contrast: var(--primitive-color-saffron-50);
624
623
  --semantic-color-light-mode-fill-static-warning-bold: var(--primitive-color-saffron-70);
625
- --semantic-color-light-mode-fill-static-danger-light: var(--primitive-color-orange-0);
624
+ --semantic-color-light-mode-fill-static-danger-light: var(--primitive-color-orange-10);
626
625
  --semantic-color-light-mode-fill-static-danger-subtle: var(--primitive-color-orange-20);
627
626
  --semantic-color-light-mode-fill-static-danger-base: var(--primitive-color-orange-30);
628
627
  --semantic-color-light-mode-fill-static-danger-contrast: var(--primitive-color-orange-40);
629
628
  --semantic-color-light-mode-fill-static-danger-bold: var(--primitive-color-orange-60);
630
- --semantic-color-light-mode-fill-static-negative-light: var(--primitive-color-red-0);
631
- --semantic-color-light-mode-fill-static-negative-subtle: var(--primitive-color-red-10);
632
- --semantic-color-light-mode-fill-static-negative-base: var(--primitive-color-red-20);
629
+ --semantic-color-light-mode-fill-static-negative-light: var(--primitive-color-red-10);
630
+ --semantic-color-light-mode-fill-static-negative-subtle: var(--primitive-color-red-20);
631
+ --semantic-color-light-mode-fill-static-negative-base: var(--primitive-color-red-30);
633
632
  --semantic-color-light-mode-fill-static-negative-contrast: var(--primitive-color-red-70);
634
633
  --semantic-color-light-mode-fill-static-negative-bold: var(--primitive-color-red-90);
635
634
  --semantic-color-light-mode-fill-static-positive-light: var(--primitive-color-green-10);
@@ -677,9 +676,9 @@
677
676
  --semantic-color-light-mode-icon-action-mono-hover: var(--primitive-color-cool-neutral-0);
678
677
  --semantic-color-light-mode-icon-action-mono-pressed: var(--primitive-color-cool-neutral-0);
679
678
  --semantic-color-light-mode-icon-action-mono-disabled: var(--primitive-color-cool-neutral-0-80);
680
- --semantic-color-light-mode-icon-action-tertiary-base: var(--primitive-color-brand-500);
681
- --semantic-color-light-mode-icon-action-tertiary-hover: var(--primitive-color-brand-600);
682
- --semantic-color-light-mode-icon-action-tertiary-pressed: var(--primitive-color-brand-700);
679
+ --semantic-color-light-mode-icon-action-tertiary-base: var(--primitive-color-brand-400);
680
+ --semantic-color-light-mode-icon-action-tertiary-hover: var(--primitive-color-brand-500);
681
+ --semantic-color-light-mode-icon-action-tertiary-pressed: var(--primitive-color-brand-600);
683
682
  --semantic-color-light-mode-icon-action-tertiary-disabled: var(--primitive-color-brand-50);
684
683
  --semantic-color-light-mode-icon-action-alert-base: var(--primitive-color-saffron-140);
685
684
  --semantic-color-light-mode-icon-action-alert-hover: var(--primitive-color-saffron-130);
@@ -724,14 +723,14 @@
724
723
  --semantic-color-light-mode-icon-static-mono-base: var(--primitive-color-cool-neutral-0);
725
724
  --semantic-color-light-mode-icon-static-info-light: var(--primitive-color-brand-70);
726
725
  --semantic-color-light-mode-icon-static-info-subtle: var(--primitive-color-brand-80);
727
- --semantic-color-light-mode-icon-static-info-base: var(--primitive-color-brand-90);
726
+ --semantic-color-light-mode-icon-static-info-base: var(--primitive-color-brand-100);
728
727
  --semantic-color-light-mode-icon-static-info-contrast: var(--primitive-color-brand-400);
729
728
  --semantic-color-light-mode-icon-static-info-bold: var(--primitive-color-brand-500);
730
- --semantic-color-light-mode-icon-static-warning-light: var(--primitive-color-saffron-40);
731
- --semantic-color-light-mode-icon-static-warning-subtle: var(--primitive-color-saffron-50);
732
- --semantic-color-light-mode-icon-static-warning-base: var(--primitive-color-saffron-80);
733
- --semantic-color-light-mode-icon-static-warning-contrast: var(--primitive-color-saffron-90);
734
- --semantic-color-light-mode-icon-static-warning-bold: var(--primitive-color-saffron-100);
729
+ --semantic-color-light-mode-icon-static-warning-light: var(--primitive-color-saffron-60);
730
+ --semantic-color-light-mode-icon-static-warning-subtle: var(--primitive-color-saffron-80);
731
+ --semantic-color-light-mode-icon-static-warning-base: var(--primitive-color-saffron-100);
732
+ --semantic-color-light-mode-icon-static-warning-contrast: var(--primitive-color-saffron-130);
733
+ --semantic-color-light-mode-icon-static-warning-bold: var(--primitive-color-saffron-140);
735
734
  --semantic-color-light-mode-icon-static-danger-light: var(--primitive-color-orange-50);
736
735
  --semantic-color-light-mode-icon-static-danger-subtle: var(--primitive-color-orange-60);
737
736
  --semantic-color-light-mode-icon-static-danger-base: var(--primitive-color-orange-80);
@@ -750,8 +749,8 @@
750
749
  --semantic-color-light-mode-icon-static-accent-amethyst-light: var(--primitive-color-amethyst-50);
751
750
  --semantic-color-light-mode-icon-static-accent-amethyst-subtle: var(--primitive-color-amethyst-70);
752
751
  --semantic-color-light-mode-icon-static-accent-amethyst-base: var(--primitive-color-amethyst-80);
753
- --semantic-color-light-mode-icon-static-accent-amethyst-contrast: var(--primitive-color-amethyst-90);
754
- --semantic-color-light-mode-icon-static-accent-amethyst-bold: var(--primitive-color-amethyst-120);
752
+ --semantic-color-light-mode-icon-static-accent-amethyst-contrast: var(--primitive-color-amethyst-100);
753
+ --semantic-color-light-mode-icon-static-accent-amethyst-bold: var(--primitive-color-amethyst-130);
755
754
  --semantic-color-light-mode-icon-static-accent-jade-light: var(--primitive-color-jade-40);
756
755
  --semantic-color-light-mode-icon-static-accent-jade-subtle: var(--primitive-color-jade-60);
757
756
  --semantic-color-light-mode-icon-static-accent-jade-base: var(--primitive-color-jade-90);
@@ -772,9 +771,9 @@
772
771
  --semantic-color-light-mode-icon-contextual-navitem-focused: var(--primitive-color-cool-neutral-170);
773
772
  --semantic-color-light-mode-icon-contextual-navitem-active: var(--primitive-color-brand-500);
774
773
  --semantic-color-light-mode-icon-contextual-navitem-disabled: var(--primitive-color-brand-60);
775
- --semantic-color-light-mode-stroke-action-primary-base: var(--primitive-color-brand-100);
776
- --semantic-color-light-mode-stroke-action-primary-hover: var(--primitive-color-brand-60);
777
- --semantic-color-light-mode-stroke-action-primary-pressed: var(--primitive-color-brand-70);
774
+ --semantic-color-light-mode-stroke-action-primary-base: var(--primitive-color-brand-300);
775
+ --semantic-color-light-mode-stroke-action-primary-hover: var(--primitive-color-brand-100);
776
+ --semantic-color-light-mode-stroke-action-primary-pressed: var(--primitive-color-brand-400);
778
777
  --semantic-color-light-mode-stroke-action-primary-disabled: var(--primitive-color-brand-30);
779
778
  --semantic-color-light-mode-stroke-action-primary-inverse-base: var(--primitive-color-brand-40);
780
779
  --semantic-color-light-mode-stroke-action-primary-inverse-hover: var(--primitive-color-brand-30);
@@ -812,9 +811,9 @@
812
811
  --semantic-color-light-mode-stroke-action-dangerinverse-hover: var(--primitive-color-orange-0);
813
812
  --semantic-color-light-mode-stroke-action-dangerinverse-pressed: var(--primitive-color-orange-30);
814
813
  --semantic-color-light-mode-stroke-action-dangerinverse-disabled: var(--primitive-color-orange-50);
815
- --semantic-color-light-mode-stroke-action-negative-base: var(--primitive-color-red-50);
816
- --semantic-color-light-mode-stroke-action-negative-hover: var(--primitive-color-red-40);
817
- --semantic-color-light-mode-stroke-action-negative-pressed: var(--primitive-color-red-60);
814
+ --semantic-color-light-mode-stroke-action-negative-base: var(--primitive-color-red-90);
815
+ --semantic-color-light-mode-stroke-action-negative-hover: var(--primitive-color-red-80);
816
+ --semantic-color-light-mode-stroke-action-negative-pressed: var(--primitive-color-red-100);
818
817
  --semantic-color-light-mode-stroke-action-negative-disabled: var(--primitive-color-red-30);
819
818
  --semantic-color-light-mode-stroke-action-negative-inverse-base: var(--primitive-color-red-30);
820
819
  --semantic-color-light-mode-stroke-action-negative-inverse-hover: var(--primitive-color-red-40);
@@ -1052,7 +1051,6 @@
1052
1051
  --semantic-color-dark-mode-fill-static-neutral-light: var(--primitive-color-cool-neutral-170);
1053
1052
  --semantic-color-dark-mode-fill-static-neutral-subtle: var(--primitive-color-cool-neutral-180);
1054
1053
  --semantic-color-dark-mode-fill-static-neutral-base: var(--primitive-color-cool-neutral-200);
1055
- --semantic-color-dark-mode-fill-static-neutral-opacity-80: var(--primitive-color-cool-neutral-220-70);
1056
1054
  --semantic-color-dark-mode-fill-static-neutral-opacity-70: var(--primitive-color-cool-neutral-220-50);
1057
1055
  --semantic-color-dark-mode-fill-static-neutral-opacity-30: var(--primitive-color-cool-neutral-220-30);
1058
1056
  --semantic-color-dark-mode-fill-static-neutral-opacity-16: var(--primitive-color-cool-neutral-220-16);
@@ -1508,16 +1506,28 @@
1508
1506
  --semantic-type-desktop-heading-section-s-bold-letterspacing: var(--primitive-type-letter-spacing-wide);
1509
1507
  --semantic-type-desktop-heading-section-xs-medium-fontfamily: var(--primitive-type-family-brand);
1510
1508
  --semantic-type-desktop-heading-section-xs-medium-fontweight: var(--primitive-type-weight-500);
1511
- --semantic-type-desktop-heading-section-xs-medium-lineheight: var(--primitive-type-line-height-16pt-single);
1509
+ --semantic-type-desktop-heading-section-xs-medium-lineheight: var(--primitive-type-line-height-14pt-single);
1512
1510
  --semantic-type-desktop-heading-section-xs-medium-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1513
1511
  --semantic-type-desktop-heading-section-xs-semibold-fontfamily: var(--primitive-type-family-brand);
1514
1512
  --semantic-type-desktop-heading-section-xs-semibold-fontweight: var(--primitive-type-weight-600);
1515
- --semantic-type-desktop-heading-section-xs-semibold-lineheight: var(--primitive-type-line-height-16pt-single);
1513
+ --semantic-type-desktop-heading-section-xs-semibold-lineheight: var(--primitive-type-line-height-14pt-single);
1516
1514
  --semantic-type-desktop-heading-section-xs-semibold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1517
1515
  --semantic-type-desktop-heading-section-xs-bold-fontfamily: var(--primitive-type-family-brand);
1518
1516
  --semantic-type-desktop-heading-section-xs-bold-fontweight: var(--primitive-type-weight-700);
1519
- --semantic-type-desktop-heading-section-xs-bold-lineheight: var(--primitive-type-line-height-16pt-single);
1517
+ --semantic-type-desktop-heading-section-xs-bold-lineheight: var(--primitive-type-line-height-14pt-single);
1520
1518
  --semantic-type-desktop-heading-section-xs-bold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1519
+ --semantic-type-desktop-heading-section-xxs-medium-fontfamily: var(--primitive-type-family-brand);
1520
+ --semantic-type-desktop-heading-section-xxs-medium-fontweight: var(--primitive-type-weight-500);
1521
+ --semantic-type-desktop-heading-section-xxs-medium-lineheight: var(--primitive-type-line-height-12pt-single);
1522
+ --semantic-type-desktop-heading-section-xxs-medium-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1523
+ --semantic-type-desktop-heading-section-xxs-semibold-fontfamily: var(--primitive-type-family-brand);
1524
+ --semantic-type-desktop-heading-section-xxs-semibold-fontweight: var(--primitive-type-weight-600);
1525
+ --semantic-type-desktop-heading-section-xxs-semibold-lineheight: var(--primitive-type-line-height-12pt-single);
1526
+ --semantic-type-desktop-heading-section-xxs-semibold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1527
+ --semantic-type-desktop-heading-section-xxs-bold-fontfamily: var(--primitive-type-family-brand);
1528
+ --semantic-type-desktop-heading-section-xxs-bold-fontweight: var(--primitive-type-weight-700);
1529
+ --semantic-type-desktop-heading-section-xxs-bold-lineheight: var(--primitive-type-line-height-12pt-single);
1530
+ --semantic-type-desktop-heading-section-xxs-bold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1521
1531
  --semantic-type-desktop-heading-local-base-semibold-fontfamily: var(--primitive-type-family-brand);
1522
1532
  --semantic-type-desktop-heading-local-base-semibold-fontweight: var(--primitive-type-weight-600);
1523
1533
  --semantic-type-desktop-heading-local-base-semibold-lineheight: var(--primitive-type-line-height-14pt-tight);
@@ -1949,6 +1959,18 @@
1949
1959
  --semantic-type-mobile-heading-section-xs-bold-fontweight: var(--primitive-type-weight-700);
1950
1960
  --semantic-type-mobile-heading-section-xs-bold-lineheight: var(--primitive-type-line-height-14pt-single);
1951
1961
  --semantic-type-mobile-heading-section-xs-bold-letterspacing: var(--primitive-type-letter-spacing-standard);
1962
+ --semantic-type-mobile-heading-section-xxs-medium-fontfamily: var(--primitive-type-family-brand);
1963
+ --semantic-type-mobile-heading-section-xxs-medium-fontweight: var(--primitive-type-weight-600);
1964
+ --semantic-type-mobile-heading-section-xxs-medium-lineheight: var(--primitive-type-line-height-12pt-single);
1965
+ --semantic-type-mobile-heading-section-xxs-medium-letterspacing: var(--primitive-type-letter-spacing-standard);
1966
+ --semantic-type-mobile-heading-section-xxs-semibold-fontfamily: var(--primitive-type-family-brand);
1967
+ --semantic-type-mobile-heading-section-xxs-semibold-fontweight: var(--primitive-type-weight-600);
1968
+ --semantic-type-mobile-heading-section-xxs-semibold-lineheight: var(--primitive-type-line-height-12pt-single);
1969
+ --semantic-type-mobile-heading-section-xxs-semibold-letterspacing: var(--primitive-type-letter-spacing-standard);
1970
+ --semantic-type-mobile-heading-section-xxs-bold-fontfamily: var(--primitive-type-family-brand);
1971
+ --semantic-type-mobile-heading-section-xxs-bold-fontweight: var(--primitive-type-weight-700);
1972
+ --semantic-type-mobile-heading-section-xxs-bold-lineheight: var(--primitive-type-line-height-12pt-single);
1973
+ --semantic-type-mobile-heading-section-xxs-bold-letterspacing: var(--primitive-type-letter-spacing-standard);
1952
1974
  --semantic-type-mobile-heading-local-base-semibold-fontfamily: var(--primitive-type-family-brand);
1953
1975
  --semantic-type-mobile-heading-local-base-semibold-fontweight: var(--primitive-type-weight-600);
1954
1976
  --semantic-type-mobile-heading-local-base-semibold-lineheight: var(--primitive-type-line-height-12pt-tight);
@@ -2314,6 +2336,9 @@
2314
2336
  --semantic-type-desktop-heading-section-xs-medium-fontsize: var(--primitive-type-size-14);
2315
2337
  --semantic-type-desktop-heading-section-xs-semibold-fontsize: var(--primitive-type-size-14);
2316
2338
  --semantic-type-desktop-heading-section-xs-bold-fontsize: var(--primitive-type-size-14);
2339
+ --semantic-type-desktop-heading-section-xxs-medium-fontsize: var(--primitive-type-size-12);
2340
+ --semantic-type-desktop-heading-section-xxs-semibold-fontsize: var(--primitive-type-size-12);
2341
+ --semantic-type-desktop-heading-section-xxs-bold-fontsize: var(--primitive-type-size-12);
2317
2342
  --semantic-type-desktop-heading-local-base-semibold-fontsize: var(--primitive-type-size-14);
2318
2343
  --semantic-type-desktop-heading-local-base-bold-fontsize: var(--primitive-type-size-14);
2319
2344
  --semantic-type-desktop-heading-local-s-fontsize: var(--primitive-type-size-12);
@@ -2467,6 +2492,9 @@
2467
2492
  --semantic-type-mobile-heading-section-xs-medium-fontsize: var(--primitive-type-size-14);
2468
2493
  --semantic-type-mobile-heading-section-xs-semibold-fontsize: var(--primitive-type-size-14);
2469
2494
  --semantic-type-mobile-heading-section-xs-bold-fontsize: var(--primitive-type-size-14);
2495
+ --semantic-type-mobile-heading-section-xxs-medium-fontsize: var(--primitive-type-size-11);
2496
+ --semantic-type-mobile-heading-section-xxs-semibold-fontsize: var(--primitive-type-size-11);
2497
+ --semantic-type-mobile-heading-section-xxs-bold-fontsize: var(--primitive-type-size-11);
2470
2498
  --semantic-type-mobile-heading-local-base-semibold-fontsize: var(--primitive-type-size-12);
2471
2499
  --semantic-type-mobile-heading-local-base-bold-fontsize: var(--primitive-type-size-12);
2472
2500
  --semantic-type-mobile-heading-local-s-fontsize: var(--primitive-type-size-11);