@helloimjolopez-pathway/pathway-tokens 4.0.1 → 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 +59 -29
  3. package/dist/tokens.js +944 -58
  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
@@ -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);