@helloimjolopez-pathway/pathway-tokens 4.0.0 → 4.0.2

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 +19 -1
  2. package/dist/tokens.css +147 -117
  3. package/dist/tokens.js +69069 -29637
  4. package/dist/tokens.json +165 -29
  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,21 @@ 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.
package/dist/tokens.css CHANGED
@@ -344,94 +344,94 @@
344
344
  --primitive-type-weight-500: 500;
345
345
  --primitive-type-weight-600: 600;
346
346
  --primitive-type-weight-700: 700;
347
- --primitive-type-line-height-56pt-tight: 60;
348
- --primitive-type-line-height-56pt-single: 68;
349
- --primitive-type-line-height-56pt-relaxed: 76;
350
- --primitive-type-line-height-56pt-spacious: 84;
351
- --primitive-type-line-height-48pt-tight: 52;
352
- --primitive-type-line-height-48pt-single: 58;
353
- --primitive-type-line-height-48pt-relaxed: 64;
354
- --primitive-type-line-height-48pt-spacious: 72;
355
- --primitive-type-line-height-40pt-tight: 44;
356
- --primitive-type-line-height-40pt-single: 48;
357
- --primitive-type-line-height-40pt-relaxed: 52;
358
- --primitive-type-line-height-40pt-spacious: 56;
359
- --primitive-type-line-height-36pt-tight: 40;
360
- --primitive-type-line-height-36pt-single: 44;
361
- --primitive-type-line-height-36pt-relaxed: 50;
362
- --primitive-type-line-height-36pt-spacious: 58;
363
- --primitive-type-line-height-32pt-tight: 36;
364
- --primitive-type-line-height-32pt-single: 40;
365
- --primitive-type-line-height-32pt-relaxed: 46;
366
- --primitive-type-line-height-32pt-spacious: 52;
367
- --primitive-type-line-height-24pt-tight: 28;
368
- --primitive-type-line-height-24pt-single: 30;
369
- --primitive-type-line-height-24pt-relaxed: 36;
370
- --primitive-type-line-height-24pt-spacious: 40;
371
- --primitive-type-line-height-20pt-tight: 24;
372
- --primitive-type-line-height-20pt-single: 28;
373
- --primitive-type-line-height-20pt-relaxed: 32;
374
- --primitive-type-line-height-20pt-spacious: 36;
375
- --primitive-type-line-height-18pt-tight: 22;
376
- --primitive-type-line-height-18pt-single: 24;
377
- --primitive-type-line-height-18pt-relaxed: 30;
378
- --primitive-type-line-height-18pt-spacious: 34;
379
- --primitive-type-line-height-16pt-tight: 20;
380
- --primitive-type-line-height-16pt-single: 22;
381
- --primitive-type-line-height-16pt-relaxed: 28;
382
- --primitive-type-line-height-16pt-spacious: 30;
383
- --primitive-type-line-height-14pt-tight: 18;
384
- --primitive-type-line-height-14pt-single: 20;
385
- --primitive-type-line-height-14pt-relaxed: 24;
386
- --primitive-type-line-height-14pt-spacious: 28;
387
- --primitive-type-line-height-12pt-tight: 16;
388
- --primitive-type-line-height-12pt-single: 18;
389
- --primitive-type-line-height-12pt-relaxed: 22;
390
- --primitive-type-line-height-12pt-spacious: 24;
391
- --primitive-type-line-height-11pt-tight: 14;
392
- --primitive-type-line-height-11pt-single: 16;
393
- --primitive-type-line-height-11pt-relaxed: 18;
394
- --primitive-type-line-height-11pt-spacious: 22;
395
- --primitive-type-line-height-10pt-tight: 12;
396
- --primitive-type-line-height-10pt-single: 14;
397
- --primitive-type-line-height-10pt-relaxed: 16;
398
- --primitive-type-line-height-10pt-spacious: 20;
399
- --primitive-type-letter-spacing-compact: 0;
400
- --primitive-type-letter-spacing-standard: 0.10000000149011612;
401
- --primitive-type-letter-spacing-wide: 0.30000001192092896;
402
- --primitive-type-letter-spacing-extrawide: 0.6000000238418579;
403
- --primitive-unit-unit-1: 1;
404
- --primitive-unit-unit-2: 2;
405
- --primitive-unit-unit-4: 4;
406
- --primitive-unit-unit-6: 6;
407
- --primitive-unit-unit-8: 8;
408
- --primitive-unit-unit-10: 10;
409
- --primitive-unit-unit-11: 11;
410
- --primitive-unit-unit-12: 12;
411
- --primitive-unit-unit-14: 14;
412
- --primitive-unit-unit-16: 16;
413
- --primitive-unit-unit-18: 18;
414
- --primitive-unit-unit-20: 20;
415
- --primitive-unit-unit-24: 24;
416
- --primitive-unit-unit-26: 26;
417
- --primitive-unit-unit-28: 28;
418
- --primitive-unit-unit-32: 32;
419
- --primitive-unit-unit-36: 36;
420
- --primitive-unit-unit-40: 40;
421
- --primitive-unit-unit-44: 44;
422
- --primitive-unit-unit-48: 48;
423
- --primitive-unit-unit-56: 56;
424
- --primitive-unit-unit-64: 64;
425
- --primitive-unit-unit-72: 72;
426
- --primitive-unit-unit-80: 80;
427
- --primitive-unit-unit-88: 88;
428
- --primitive-unit-unit-96: 96;
429
- --primitive-unit-unit-104: 104;
430
- --primitive-unit-unit-112: 112;
431
- --primitive-unit-unit-120: 120;
432
- --primitive-unit-unit-0-point-5: 0.5;
433
- --primitive-unit-unit-0-point-75: 0.75;
434
- --primitive-unit-unit-1-point-5: 1.5;
347
+ --primitive-type-line-height-56pt-tight: 60px;
348
+ --primitive-type-line-height-56pt-single: 68px;
349
+ --primitive-type-line-height-56pt-relaxed: 76px;
350
+ --primitive-type-line-height-56pt-spacious: 84px;
351
+ --primitive-type-line-height-48pt-tight: 52px;
352
+ --primitive-type-line-height-48pt-single: 58px;
353
+ --primitive-type-line-height-48pt-relaxed: 64px;
354
+ --primitive-type-line-height-48pt-spacious: 72px;
355
+ --primitive-type-line-height-40pt-tight: 44px;
356
+ --primitive-type-line-height-40pt-single: 48px;
357
+ --primitive-type-line-height-40pt-relaxed: 52px;
358
+ --primitive-type-line-height-40pt-spacious: 56px;
359
+ --primitive-type-line-height-36pt-tight: 40px;
360
+ --primitive-type-line-height-36pt-single: 44px;
361
+ --primitive-type-line-height-36pt-relaxed: 50px;
362
+ --primitive-type-line-height-36pt-spacious: 58px;
363
+ --primitive-type-line-height-32pt-tight: 36px;
364
+ --primitive-type-line-height-32pt-single: 40px;
365
+ --primitive-type-line-height-32pt-relaxed: 46px;
366
+ --primitive-type-line-height-32pt-spacious: 52px;
367
+ --primitive-type-line-height-24pt-tight: 28px;
368
+ --primitive-type-line-height-24pt-single: 30px;
369
+ --primitive-type-line-height-24pt-relaxed: 36px;
370
+ --primitive-type-line-height-24pt-spacious: 40px;
371
+ --primitive-type-line-height-20pt-tight: 24px;
372
+ --primitive-type-line-height-20pt-single: 28px;
373
+ --primitive-type-line-height-20pt-relaxed: 32px;
374
+ --primitive-type-line-height-20pt-spacious: 36px;
375
+ --primitive-type-line-height-18pt-tight: 22px;
376
+ --primitive-type-line-height-18pt-single: 24px;
377
+ --primitive-type-line-height-18pt-relaxed: 30px;
378
+ --primitive-type-line-height-18pt-spacious: 34px;
379
+ --primitive-type-line-height-16pt-tight: 20px;
380
+ --primitive-type-line-height-16pt-single: 22px;
381
+ --primitive-type-line-height-16pt-relaxed: 28px;
382
+ --primitive-type-line-height-16pt-spacious: 30px;
383
+ --primitive-type-line-height-14pt-tight: 18px;
384
+ --primitive-type-line-height-14pt-single: 20px;
385
+ --primitive-type-line-height-14pt-relaxed: 24px;
386
+ --primitive-type-line-height-14pt-spacious: 28px;
387
+ --primitive-type-line-height-12pt-tight: 16px;
388
+ --primitive-type-line-height-12pt-single: 18px;
389
+ --primitive-type-line-height-12pt-relaxed: 22px;
390
+ --primitive-type-line-height-12pt-spacious: 24px;
391
+ --primitive-type-line-height-11pt-tight: 14px;
392
+ --primitive-type-line-height-11pt-single: 16px;
393
+ --primitive-type-line-height-11pt-relaxed: 18px;
394
+ --primitive-type-line-height-11pt-spacious: 22px;
395
+ --primitive-type-line-height-10pt-tight: 12px;
396
+ --primitive-type-line-height-10pt-single: 14px;
397
+ --primitive-type-line-height-10pt-relaxed: 16px;
398
+ --primitive-type-line-height-10pt-spacious: 20px;
399
+ --primitive-type-letter-spacing-compact: 0px;
400
+ --primitive-type-letter-spacing-standard: 0.10000000149011612px;
401
+ --primitive-type-letter-spacing-wide: 0.30000001192092896px;
402
+ --primitive-type-letter-spacing-extrawide: 0.6000000238418579px;
403
+ --primitive-unit-unit-1: 1px;
404
+ --primitive-unit-unit-2: 2px;
405
+ --primitive-unit-unit-4: 4px;
406
+ --primitive-unit-unit-6: 6px;
407
+ --primitive-unit-unit-8: 8px;
408
+ --primitive-unit-unit-10: 10px;
409
+ --primitive-unit-unit-11: 11px;
410
+ --primitive-unit-unit-12: 12px;
411
+ --primitive-unit-unit-14: 14px;
412
+ --primitive-unit-unit-16: 16px;
413
+ --primitive-unit-unit-18: 18px;
414
+ --primitive-unit-unit-20: 20px;
415
+ --primitive-unit-unit-24: 24px;
416
+ --primitive-unit-unit-26: 26px;
417
+ --primitive-unit-unit-28: 28px;
418
+ --primitive-unit-unit-32: 32px;
419
+ --primitive-unit-unit-36: 36px;
420
+ --primitive-unit-unit-40: 40px;
421
+ --primitive-unit-unit-44: 44px;
422
+ --primitive-unit-unit-48: 48px;
423
+ --primitive-unit-unit-56: 56px;
424
+ --primitive-unit-unit-64: 64px;
425
+ --primitive-unit-unit-72: 72px;
426
+ --primitive-unit-unit-80: 80px;
427
+ --primitive-unit-unit-88: 88px;
428
+ --primitive-unit-unit-96: 96px;
429
+ --primitive-unit-unit-104: 104px;
430
+ --primitive-unit-unit-112: 112px;
431
+ --primitive-unit-unit-120: 120px;
432
+ --primitive-unit-unit-0-point-5: 0.5px;
433
+ --primitive-unit-unit-0-point-75: 0.75px;
434
+ --primitive-unit-unit-1-point-5: 1.5px;
435
435
  --primitive-type-size-10: var(--primitive-unit-unit-10);
436
436
  --primitive-type-size-11: var(--primitive-unit-unit-11);
437
437
  --primitive-type-size-12: var(--primitive-unit-unit-12);
@@ -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);
528
+ --semantic-color-light-mode-fill-action-primary-base: var(--primitive-color-brand-300);
529
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);
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);
@@ -622,14 +622,14 @@
622
622
  --semantic-color-light-mode-fill-static-warning-base: var(--primitive-color-saffron-30);
623
623
  --semantic-color-light-mode-fill-static-warning-contrast: var(--primitive-color-saffron-50);
624
624
  --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);
625
+ --semantic-color-light-mode-fill-static-danger-light: var(--primitive-color-orange-10);
626
626
  --semantic-color-light-mode-fill-static-danger-subtle: var(--primitive-color-orange-20);
627
627
  --semantic-color-light-mode-fill-static-danger-base: var(--primitive-color-orange-30);
628
628
  --semantic-color-light-mode-fill-static-danger-contrast: var(--primitive-color-orange-40);
629
629
  --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);
630
+ --semantic-color-light-mode-fill-static-negative-light: var(--primitive-color-red-10);
631
+ --semantic-color-light-mode-fill-static-negative-subtle: var(--primitive-color-red-20);
632
+ --semantic-color-light-mode-fill-static-negative-base: var(--primitive-color-red-30);
633
633
  --semantic-color-light-mode-fill-static-negative-contrast: var(--primitive-color-red-70);
634
634
  --semantic-color-light-mode-fill-static-negative-bold: var(--primitive-color-red-90);
635
635
  --semantic-color-light-mode-fill-static-positive-light: var(--primitive-color-green-10);
@@ -677,9 +677,9 @@
677
677
  --semantic-color-light-mode-icon-action-mono-hover: var(--primitive-color-cool-neutral-0);
678
678
  --semantic-color-light-mode-icon-action-mono-pressed: var(--primitive-color-cool-neutral-0);
679
679
  --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);
680
+ --semantic-color-light-mode-icon-action-tertiary-base: var(--primitive-color-brand-400);
681
+ --semantic-color-light-mode-icon-action-tertiary-hover: var(--primitive-color-brand-500);
682
+ --semantic-color-light-mode-icon-action-tertiary-pressed: var(--primitive-color-brand-600);
683
683
  --semantic-color-light-mode-icon-action-tertiary-disabled: var(--primitive-color-brand-50);
684
684
  --semantic-color-light-mode-icon-action-alert-base: var(--primitive-color-saffron-140);
685
685
  --semantic-color-light-mode-icon-action-alert-hover: var(--primitive-color-saffron-130);
@@ -724,14 +724,14 @@
724
724
  --semantic-color-light-mode-icon-static-mono-base: var(--primitive-color-cool-neutral-0);
725
725
  --semantic-color-light-mode-icon-static-info-light: var(--primitive-color-brand-70);
726
726
  --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);
727
+ --semantic-color-light-mode-icon-static-info-base: var(--primitive-color-brand-100);
728
728
  --semantic-color-light-mode-icon-static-info-contrast: var(--primitive-color-brand-400);
729
729
  --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);
730
+ --semantic-color-light-mode-icon-static-warning-light: var(--primitive-color-saffron-60);
731
+ --semantic-color-light-mode-icon-static-warning-subtle: var(--primitive-color-saffron-80);
732
+ --semantic-color-light-mode-icon-static-warning-base: var(--primitive-color-saffron-100);
733
+ --semantic-color-light-mode-icon-static-warning-contrast: var(--primitive-color-saffron-130);
734
+ --semantic-color-light-mode-icon-static-warning-bold: var(--primitive-color-saffron-140);
735
735
  --semantic-color-light-mode-icon-static-danger-light: var(--primitive-color-orange-50);
736
736
  --semantic-color-light-mode-icon-static-danger-subtle: var(--primitive-color-orange-60);
737
737
  --semantic-color-light-mode-icon-static-danger-base: var(--primitive-color-orange-80);
@@ -750,8 +750,8 @@
750
750
  --semantic-color-light-mode-icon-static-accent-amethyst-light: var(--primitive-color-amethyst-50);
751
751
  --semantic-color-light-mode-icon-static-accent-amethyst-subtle: var(--primitive-color-amethyst-70);
752
752
  --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);
753
+ --semantic-color-light-mode-icon-static-accent-amethyst-contrast: var(--primitive-color-amethyst-100);
754
+ --semantic-color-light-mode-icon-static-accent-amethyst-bold: var(--primitive-color-amethyst-130);
755
755
  --semantic-color-light-mode-icon-static-accent-jade-light: var(--primitive-color-jade-40);
756
756
  --semantic-color-light-mode-icon-static-accent-jade-subtle: var(--primitive-color-jade-60);
757
757
  --semantic-color-light-mode-icon-static-accent-jade-base: var(--primitive-color-jade-90);
@@ -772,9 +772,9 @@
772
772
  --semantic-color-light-mode-icon-contextual-navitem-focused: var(--primitive-color-cool-neutral-170);
773
773
  --semantic-color-light-mode-icon-contextual-navitem-active: var(--primitive-color-brand-500);
774
774
  --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);
775
+ --semantic-color-light-mode-stroke-action-primary-base: var(--primitive-color-brand-300);
776
+ --semantic-color-light-mode-stroke-action-primary-hover: var(--primitive-color-brand-100);
777
+ --semantic-color-light-mode-stroke-action-primary-pressed: var(--primitive-color-brand-400);
778
778
  --semantic-color-light-mode-stroke-action-primary-disabled: var(--primitive-color-brand-30);
779
779
  --semantic-color-light-mode-stroke-action-primary-inverse-base: var(--primitive-color-brand-40);
780
780
  --semantic-color-light-mode-stroke-action-primary-inverse-hover: var(--primitive-color-brand-30);
@@ -1508,16 +1508,28 @@
1508
1508
  --semantic-type-desktop-heading-section-s-bold-letterspacing: var(--primitive-type-letter-spacing-wide);
1509
1509
  --semantic-type-desktop-heading-section-xs-medium-fontfamily: var(--primitive-type-family-brand);
1510
1510
  --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);
1511
+ --semantic-type-desktop-heading-section-xs-medium-lineheight: var(--primitive-type-line-height-14pt-single);
1512
1512
  --semantic-type-desktop-heading-section-xs-medium-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1513
1513
  --semantic-type-desktop-heading-section-xs-semibold-fontfamily: var(--primitive-type-family-brand);
1514
1514
  --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);
1515
+ --semantic-type-desktop-heading-section-xs-semibold-lineheight: var(--primitive-type-line-height-14pt-single);
1516
1516
  --semantic-type-desktop-heading-section-xs-semibold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1517
1517
  --semantic-type-desktop-heading-section-xs-bold-fontfamily: var(--primitive-type-family-brand);
1518
1518
  --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);
1519
+ --semantic-type-desktop-heading-section-xs-bold-lineheight: var(--primitive-type-line-height-14pt-single);
1520
1520
  --semantic-type-desktop-heading-section-xs-bold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1521
+ --semantic-type-desktop-heading-section-xxs-medium-fontfamily: var(--primitive-type-family-brand);
1522
+ --semantic-type-desktop-heading-section-xxs-medium-fontweight: var(--primitive-type-weight-500);
1523
+ --semantic-type-desktop-heading-section-xxs-medium-lineheight: var(--primitive-type-line-height-12pt-single);
1524
+ --semantic-type-desktop-heading-section-xxs-medium-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1525
+ --semantic-type-desktop-heading-section-xxs-semibold-fontfamily: var(--primitive-type-family-brand);
1526
+ --semantic-type-desktop-heading-section-xxs-semibold-fontweight: var(--primitive-type-weight-600);
1527
+ --semantic-type-desktop-heading-section-xxs-semibold-lineheight: var(--primitive-type-line-height-12pt-single);
1528
+ --semantic-type-desktop-heading-section-xxs-semibold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1529
+ --semantic-type-desktop-heading-section-xxs-bold-fontfamily: var(--primitive-type-family-brand);
1530
+ --semantic-type-desktop-heading-section-xxs-bold-fontweight: var(--primitive-type-weight-700);
1531
+ --semantic-type-desktop-heading-section-xxs-bold-lineheight: var(--primitive-type-line-height-12pt-single);
1532
+ --semantic-type-desktop-heading-section-xxs-bold-letterspacing: var(--primitive-type-letter-spacing-extrawide);
1521
1533
  --semantic-type-desktop-heading-local-base-semibold-fontfamily: var(--primitive-type-family-brand);
1522
1534
  --semantic-type-desktop-heading-local-base-semibold-fontweight: var(--primitive-type-weight-600);
1523
1535
  --semantic-type-desktop-heading-local-base-semibold-lineheight: var(--primitive-type-line-height-14pt-tight);
@@ -1949,6 +1961,18 @@
1949
1961
  --semantic-type-mobile-heading-section-xs-bold-fontweight: var(--primitive-type-weight-700);
1950
1962
  --semantic-type-mobile-heading-section-xs-bold-lineheight: var(--primitive-type-line-height-14pt-single);
1951
1963
  --semantic-type-mobile-heading-section-xs-bold-letterspacing: var(--primitive-type-letter-spacing-standard);
1964
+ --semantic-type-mobile-heading-section-xxs-medium-fontfamily: var(--primitive-type-family-brand);
1965
+ --semantic-type-mobile-heading-section-xxs-medium-fontweight: var(--primitive-type-weight-600);
1966
+ --semantic-type-mobile-heading-section-xxs-medium-lineheight: var(--primitive-type-line-height-12pt-single);
1967
+ --semantic-type-mobile-heading-section-xxs-medium-letterspacing: var(--primitive-type-letter-spacing-standard);
1968
+ --semantic-type-mobile-heading-section-xxs-semibold-fontfamily: var(--primitive-type-family-brand);
1969
+ --semantic-type-mobile-heading-section-xxs-semibold-fontweight: var(--primitive-type-weight-600);
1970
+ --semantic-type-mobile-heading-section-xxs-semibold-lineheight: var(--primitive-type-line-height-12pt-single);
1971
+ --semantic-type-mobile-heading-section-xxs-semibold-letterspacing: var(--primitive-type-letter-spacing-standard);
1972
+ --semantic-type-mobile-heading-section-xxs-bold-fontfamily: var(--primitive-type-family-brand);
1973
+ --semantic-type-mobile-heading-section-xxs-bold-fontweight: var(--primitive-type-weight-700);
1974
+ --semantic-type-mobile-heading-section-xxs-bold-lineheight: var(--primitive-type-line-height-12pt-single);
1975
+ --semantic-type-mobile-heading-section-xxs-bold-letterspacing: var(--primitive-type-letter-spacing-standard);
1952
1976
  --semantic-type-mobile-heading-local-base-semibold-fontfamily: var(--primitive-type-family-brand);
1953
1977
  --semantic-type-mobile-heading-local-base-semibold-fontweight: var(--primitive-type-weight-600);
1954
1978
  --semantic-type-mobile-heading-local-base-semibold-lineheight: var(--primitive-type-line-height-12pt-tight);
@@ -2314,6 +2338,9 @@
2314
2338
  --semantic-type-desktop-heading-section-xs-medium-fontsize: var(--primitive-type-size-14);
2315
2339
  --semantic-type-desktop-heading-section-xs-semibold-fontsize: var(--primitive-type-size-14);
2316
2340
  --semantic-type-desktop-heading-section-xs-bold-fontsize: var(--primitive-type-size-14);
2341
+ --semantic-type-desktop-heading-section-xxs-medium-fontsize: var(--primitive-type-size-12);
2342
+ --semantic-type-desktop-heading-section-xxs-semibold-fontsize: var(--primitive-type-size-12);
2343
+ --semantic-type-desktop-heading-section-xxs-bold-fontsize: var(--primitive-type-size-12);
2317
2344
  --semantic-type-desktop-heading-local-base-semibold-fontsize: var(--primitive-type-size-14);
2318
2345
  --semantic-type-desktop-heading-local-base-bold-fontsize: var(--primitive-type-size-14);
2319
2346
  --semantic-type-desktop-heading-local-s-fontsize: var(--primitive-type-size-12);
@@ -2467,6 +2494,9 @@
2467
2494
  --semantic-type-mobile-heading-section-xs-medium-fontsize: var(--primitive-type-size-14);
2468
2495
  --semantic-type-mobile-heading-section-xs-semibold-fontsize: var(--primitive-type-size-14);
2469
2496
  --semantic-type-mobile-heading-section-xs-bold-fontsize: var(--primitive-type-size-14);
2497
+ --semantic-type-mobile-heading-section-xxs-medium-fontsize: var(--primitive-type-size-11);
2498
+ --semantic-type-mobile-heading-section-xxs-semibold-fontsize: var(--primitive-type-size-11);
2499
+ --semantic-type-mobile-heading-section-xxs-bold-fontsize: var(--primitive-type-size-11);
2470
2500
  --semantic-type-mobile-heading-local-base-semibold-fontsize: var(--primitive-type-size-12);
2471
2501
  --semantic-type-mobile-heading-local-base-bold-fontsize: var(--primitive-type-size-12);
2472
2502
  --semantic-type-mobile-heading-local-s-fontsize: var(--primitive-type-size-11);