@helloimjolopez-pathway/pathway-tokens 4.0.2 → 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.
package/README.md CHANGED
@@ -108,3 +108,14 @@ Pathway uses **Red Hat Text** (all UI text) and **Red Hat Display** (headings H1
108
108
  - Red Hat Display: https://fonts.google.com/specimen/Red+Hat+Display → click **Download family**
109
109
 
110
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
@@ -526,7 +526,7 @@
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
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-90);
529
+ --semantic-color-light-mode-fill-action-primary-hover: var(--primitive-color-brand-200);
530
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);
@@ -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);
@@ -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);
package/dist/tokens.js CHANGED
@@ -10850,12 +10850,12 @@ export default {
10850
10850
  hover: {
10851
10851
  key: "{semantic-color.light-mode.fill.action.primary.hover}",
10852
10852
  $type: "color",
10853
- $value: "#5475c6",
10853
+ $value: "#4364b6",
10854
10854
  filePath: "tokens/pathway-design-tokens.json",
10855
10855
  isSource: true,
10856
10856
  original: {
10857
10857
  $type: "color",
10858
- $value: "{primitive-color.brand.90}",
10858
+ $value: "{primitive-color.brand.200}",
10859
10859
  key: "{semantic-color.light-mode.fill.action.primary.hover}",
10860
10860
  },
10861
10861
  name: "SemanticColorLightModeFillActionPrimaryHover",
@@ -12876,12 +12876,12 @@ export default {
12876
12876
  light: {
12877
12877
  key: "{semantic-color.light-mode.fill.static.neutral.light}",
12878
12878
  $type: "color",
12879
- $value: "#ffffff",
12879
+ $value: "#fefefd",
12880
12880
  filePath: "tokens/pathway-design-tokens.json",
12881
12881
  isSource: true,
12882
12882
  original: {
12883
12883
  $type: "color",
12884
- $value: "{primitive-color.cool-neutral.0}",
12884
+ $value: "{primitive-color.warm-neutral.0}",
12885
12885
  key: "{semantic-color.light-mode.fill.static.neutral.light}",
12886
12886
  },
12887
12887
  name: "SemanticColorLightModeFillStaticNeutralLight",
@@ -12904,12 +12904,12 @@ export default {
12904
12904
  subtle: {
12905
12905
  key: "{semantic-color.light-mode.fill.static.neutral.subtle}",
12906
12906
  $type: "color",
12907
- $value: "#fbfbfb",
12907
+ $value: "#fbfaf8",
12908
12908
  filePath: "tokens/pathway-design-tokens.json",
12909
12909
  isSource: true,
12910
12910
  original: {
12911
12911
  $type: "color",
12912
- $value: "{primitive-color.cool-neutral.10}",
12912
+ $value: "{primitive-color.warm-neutral.100}",
12913
12913
  key: "{semantic-color.light-mode.fill.static.neutral.subtle}",
12914
12914
  },
12915
12915
  name: "SemanticColorLightModeFillStaticNeutralSubtle",
@@ -12932,12 +12932,12 @@ export default {
12932
12932
  base: {
12933
12933
  key: "{semantic-color.light-mode.fill.static.neutral.base}",
12934
12934
  $type: "color",
12935
- $value: "#f6f6f6",
12935
+ $value: "#f7f5f3",
12936
12936
  filePath: "tokens/pathway-design-tokens.json",
12937
12937
  isSource: true,
12938
12938
  original: {
12939
12939
  $type: "color",
12940
- $value: "{primitive-color.cool-neutral.20}",
12940
+ $value: "{primitive-color.warm-neutral.200}",
12941
12941
  key: "{semantic-color.light-mode.fill.static.neutral.base}",
12942
12942
  },
12943
12943
  name: "SemanticColorLightModeFillStaticNeutralBase",
@@ -12957,43 +12957,15 @@ export default {
12957
12957
  "base",
12958
12958
  ],
12959
12959
  },
12960
- "opacity-80": {
12961
- key: "{semantic-color.light-mode.fill.static.neutral.opacity-80}",
12962
- $type: "color",
12963
- $value: "#ffffffcc",
12964
- filePath: "tokens/pathway-design-tokens.json",
12965
- isSource: true,
12966
- original: {
12967
- $type: "color",
12968
- $value: "{primitive-color.cool-neutral.0-80}",
12969
- key: "{semantic-color.light-mode.fill.static.neutral.opacity-80}",
12970
- },
12971
- name: "SemanticColorLightModeFillStaticNeutralOpacity80",
12972
- attributes: {
12973
- category: "semantic-color",
12974
- type: "light-mode",
12975
- item: "fill",
12976
- subitem: "static",
12977
- state: "neutral",
12978
- },
12979
- path: [
12980
- "semantic-color",
12981
- "light-mode",
12982
- "fill",
12983
- "static",
12984
- "neutral",
12985
- "opacity-80",
12986
- ],
12987
- },
12988
12960
  "opacity-70": {
12989
12961
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-70}",
12990
12962
  $type: "color",
12991
- $value: "#ffffffb3",
12963
+ $value: "#d4cfc8",
12992
12964
  filePath: "tokens/pathway-design-tokens.json",
12993
12965
  isSource: true,
12994
12966
  original: {
12995
12967
  $type: "color",
12996
- $value: "{primitive-color.cool-neutral.0-70}",
12968
+ $value: "{primitive-color.warm-neutral.200-70}",
12997
12969
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-70}",
12998
12970
  },
12999
12971
  name: "SemanticColorLightModeFillStaticNeutralOpacity70",
@@ -13016,12 +12988,12 @@ export default {
13016
12988
  "opacity-30": {
13017
12989
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-30}",
13018
12990
  $type: "color",
13019
- $value: "#ffffff4d",
12991
+ $value: "#d4cfc84d",
13020
12992
  filePath: "tokens/pathway-design-tokens.json",
13021
12993
  isSource: true,
13022
12994
  original: {
13023
12995
  $type: "color",
13024
- $value: "{primitive-color.cool-neutral.0-30}",
12996
+ $value: "{primitive-color.warm-neutral.200-30}",
13025
12997
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-30}",
13026
12998
  },
13027
12999
  name: "SemanticColorLightModeFillStaticNeutralOpacity30",
@@ -13044,12 +13016,12 @@ export default {
13044
13016
  "opacity-16": {
13045
13017
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-16}",
13046
13018
  $type: "color",
13047
- $value: "#ffffff29",
13019
+ $value: "#d4cfc829",
13048
13020
  filePath: "tokens/pathway-design-tokens.json",
13049
13021
  isSource: true,
13050
13022
  original: {
13051
13023
  $type: "color",
13052
- $value: "{primitive-color.cool-neutral.0-16}",
13024
+ $value: "{primitive-color.warm-neutral.200-16}",
13053
13025
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-16}",
13054
13026
  },
13055
13027
  name: "SemanticColorLightModeFillStaticNeutralOpacity16",
@@ -13072,12 +13044,12 @@ export default {
13072
13044
  "opacity-8": {
13073
13045
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-8}",
13074
13046
  $type: "color",
13075
- $value: "#ffffff14",
13047
+ $value: "#d4cfc814",
13076
13048
  filePath: "tokens/pathway-design-tokens.json",
13077
13049
  isSource: true,
13078
13050
  original: {
13079
13051
  $type: "color",
13080
- $value: "{primitive-color.cool-neutral.0-8}",
13052
+ $value: "{primitive-color.warm-neutral.200-8}",
13081
13053
  key: "{semantic-color.light-mode.fill.static.neutral.opacity-8}",
13082
13054
  },
13083
13055
  name: "SemanticColorLightModeFillStaticNeutralOpacity8",
@@ -19004,12 +18976,12 @@ export default {
19004
18976
  base: {
19005
18977
  key: "{semantic-color.light-mode.stroke.action.negative.base}",
19006
18978
  $type: "color",
19007
- $value: "#e29f9f",
18979
+ $value: "#ba4646",
19008
18980
  filePath: "tokens/pathway-design-tokens.json",
19009
18981
  isSource: true,
19010
18982
  original: {
19011
18983
  $type: "color",
19012
- $value: "{primitive-color.red.50}",
18984
+ $value: "{primitive-color.red.90}",
19013
18985
  key: "{semantic-color.light-mode.stroke.action.negative.base}",
19014
18986
  },
19015
18987
  name: "SemanticColorLightModeStrokeActionNegativeBase",
@@ -19032,12 +19004,12 @@ export default {
19032
19004
  hover: {
19033
19005
  key: "{semantic-color.light-mode.stroke.action.negative.hover}",
19034
19006
  $type: "color",
19035
- $value: "#e9b7b7",
19007
+ $value: "#c55858",
19036
19008
  filePath: "tokens/pathway-design-tokens.json",
19037
19009
  isSource: true,
19038
19010
  original: {
19039
19011
  $type: "color",
19040
- $value: "{primitive-color.red.40}",
19012
+ $value: "{primitive-color.red.80}",
19041
19013
  key: "{semantic-color.light-mode.stroke.action.negative.hover}",
19042
19014
  },
19043
19015
  name: "SemanticColorLightModeStrokeActionNegativeHover",
@@ -19060,12 +19032,12 @@ export default {
19060
19032
  pressed: {
19061
19033
  key: "{semantic-color.light-mode.stroke.action.negative.pressed}",
19062
19034
  $type: "color",
19063
- $value: "#d98686",
19035
+ $value: "#b03a3a",
19064
19036
  filePath: "tokens/pathway-design-tokens.json",
19065
19037
  isSource: true,
19066
19038
  original: {
19067
19039
  $type: "color",
19068
- $value: "{primitive-color.red.60}",
19040
+ $value: "{primitive-color.red.100}",
19069
19041
  key: "{semantic-color.light-mode.stroke.action.negative.pressed}",
19070
19042
  },
19071
19043
  name: "SemanticColorLightModeStrokeActionNegativePressed",
@@ -25817,34 +25789,6 @@ export default {
25817
25789
  "base",
25818
25790
  ],
25819
25791
  },
25820
- "opacity-80": {
25821
- key: "{semantic-color.dark-mode.fill.static.neutral.opacity-80}",
25822
- $type: "color",
25823
- $value: "#111111b3",
25824
- filePath: "tokens/pathway-design-tokens.json",
25825
- isSource: true,
25826
- original: {
25827
- $type: "color",
25828
- $value: "{primitive-color.cool-neutral.220-70}",
25829
- key: "{semantic-color.dark-mode.fill.static.neutral.opacity-80}",
25830
- },
25831
- name: "SemanticColorDarkModeFillStaticNeutralOpacity80",
25832
- attributes: {
25833
- category: "semantic-color",
25834
- type: "dark-mode",
25835
- item: "fill",
25836
- subitem: "static",
25837
- state: "neutral",
25838
- },
25839
- path: [
25840
- "semantic-color",
25841
- "dark-mode",
25842
- "fill",
25843
- "static",
25844
- "neutral",
25845
- "opacity-80",
25846
- ],
25847
- },
25848
25792
  "opacity-70": {
25849
25793
  key: "{semantic-color.dark-mode.fill.static.neutral.opacity-70}",
25850
25794
  $type: "color",
package/dist/tokens.json CHANGED
@@ -2220,7 +2220,7 @@
2220
2220
  },
2221
2221
  "hover": {
2222
2222
  "$type": "color",
2223
- "$value": "{primitive-color.brand.90}"
2223
+ "$value": "{primitive-color.brand.200}"
2224
2224
  },
2225
2225
  "pressed": {
2226
2226
  "$type": "color",
@@ -2542,35 +2542,31 @@
2542
2542
  "neutral": {
2543
2543
  "light": {
2544
2544
  "$type": "color",
2545
- "$value": "{primitive-color.cool-neutral.0}"
2545
+ "$value": "{primitive-color.warm-neutral.0}"
2546
2546
  },
2547
2547
  "subtle": {
2548
2548
  "$type": "color",
2549
- "$value": "{primitive-color.cool-neutral.10}"
2549
+ "$value": "{primitive-color.warm-neutral.100}"
2550
2550
  },
2551
2551
  "base": {
2552
2552
  "$type": "color",
2553
- "$value": "{primitive-color.cool-neutral.20}"
2554
- },
2555
- "opacity-80": {
2556
- "$type": "color",
2557
- "$value": "{primitive-color.cool-neutral.0-80}"
2553
+ "$value": "{primitive-color.warm-neutral.200}"
2558
2554
  },
2559
2555
  "opacity-70": {
2560
2556
  "$type": "color",
2561
- "$value": "{primitive-color.cool-neutral.0-70}"
2557
+ "$value": "{primitive-color.warm-neutral.200-70}"
2562
2558
  },
2563
2559
  "opacity-30": {
2564
2560
  "$type": "color",
2565
- "$value": "{primitive-color.cool-neutral.0-30}"
2561
+ "$value": "{primitive-color.warm-neutral.200-30}"
2566
2562
  },
2567
2563
  "opacity-16": {
2568
2564
  "$type": "color",
2569
- "$value": "{primitive-color.cool-neutral.0-16}"
2565
+ "$value": "{primitive-color.warm-neutral.200-16}"
2570
2566
  },
2571
2567
  "opacity-8": {
2572
2568
  "$type": "color",
2573
- "$value": "{primitive-color.cool-neutral.0-8}"
2569
+ "$value": "{primitive-color.warm-neutral.200-8}"
2574
2570
  }
2575
2571
  },
2576
2572
  "brand": {
@@ -3510,15 +3506,15 @@
3510
3506
  "negative": {
3511
3507
  "base": {
3512
3508
  "$type": "color",
3513
- "$value": "{primitive-color.red.50}"
3509
+ "$value": "{primitive-color.red.90}"
3514
3510
  },
3515
3511
  "hover": {
3516
3512
  "$type": "color",
3517
- "$value": "{primitive-color.red.40}"
3513
+ "$value": "{primitive-color.red.80}"
3518
3514
  },
3519
3515
  "pressed": {
3520
3516
  "$type": "color",
3521
- "$value": "{primitive-color.red.60}"
3517
+ "$value": "{primitive-color.red.100}"
3522
3518
  },
3523
3519
  "disabled": {
3524
3520
  "$type": "color",
@@ -4610,10 +4606,6 @@
4610
4606
  "$type": "color",
4611
4607
  "$value": "{primitive-color.cool-neutral.200}"
4612
4608
  },
4613
- "opacity-80": {
4614
- "$type": "color",
4615
- "$value": "{primitive-color.cool-neutral.220-70}"
4616
- },
4617
4609
  "opacity-70": {
4618
4610
  "$type": "color",
4619
4611
  "$value": "{primitive-color.cool-neutral.220-50}"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helloimjolopez-pathway/pathway-tokens",
3
- "version": "4.0.2",
3
+ "version": "5.0.0",
4
4
  "description": "Pathway Design System tokens — CSS custom properties, JS export, and DTCG JSON",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",