@helloimjolopez-pathway/pathway-tokens 8.0.0 → 8.0.1
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 +1 -1
- package/components/sidenav/sidenav.jsx +11 -5
- package/dist/README.md +6 -6
- package/dist/contract.json +8 -9
- package/dist/layout-contextual.css +1 -2
- package/dist/themes/light.css +1 -2
- package/dist/themes/midnight.css +1 -2
- package/dist/tokens.js +0 -31
- package/dist/tokens.json +0 -12
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -83,7 +83,7 @@ as too granular to adopt. Retired 2026-09-03 and not coming back.
|
|
|
83
83
|
|
|
84
84
|
```css
|
|
85
85
|
.card {
|
|
86
|
-
background: var(--semantic-color-fill-
|
|
86
|
+
background: var(--semantic-color-fill-static-neutral-mono);
|
|
87
87
|
color: var(--semantic-color-foreground-static-neutral-strong);
|
|
88
88
|
border: var(--semantic-layout-units-borderwidth-base) solid
|
|
89
89
|
var(--semantic-color-stroke-static-neutral-base);
|
|
@@ -70,7 +70,7 @@ export const T = {
|
|
|
70
70
|
infoSubtle: c("stroke-static-neutral-base"), // container right border
|
|
71
71
|
},
|
|
72
72
|
surface: {
|
|
73
|
-
navLight: c("fill-
|
|
73
|
+
navLight: c("fill-static-neutral-mono"), // the nav container itself: white
|
|
74
74
|
navElevated: c("fill-surface-elevated"), // PopoverMenu, per Figma's "Popover Menu"
|
|
75
75
|
},
|
|
76
76
|
// Label, icon and chevron all resolve to the SAME token per state. A nav item
|
|
@@ -105,15 +105,21 @@ export const T = {
|
|
|
105
105
|
* say so.
|
|
106
106
|
*/
|
|
107
107
|
export const L = {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
// SideNav is chrome that does NOT change across breakpoints, so its own
|
|
109
|
+
// metrics live in Contextual: Layout & Units rather than Responsive: Layout.
|
|
110
|
+
// Values measured from SideNav.Container in Figma: expanded padding 16, the
|
|
111
|
+
// collapsed rail 12, vertical 8, item gap 6. These were on the generic
|
|
112
|
+
// semantic scale until 2026-09-17, which meant a change to Padding/Base
|
|
113
|
+
// would silently move the nav.
|
|
114
|
+
navPadH: x("sidenav-padding-horizontal-expanded", 16),
|
|
115
|
+
navColPadH: x("sidenav-padding-horizontal-collapsed", 12),
|
|
116
|
+
navPadTop: x("sidenav-padding-vertical", 8),
|
|
111
117
|
// Read from SideNav.Container in Figma on 2026-09-16: every expanded variant
|
|
112
118
|
// is 250 wide (Base, Stroked, Mobile.Base, Mobile.Stroked) and every
|
|
113
119
|
// collapsed one is 72. Was 240, which no longer matched the component.
|
|
114
120
|
navW: x("sidenav-width-expanded", 250),
|
|
115
121
|
navWcol: x("sidenav-width-collapsed", 72),
|
|
116
|
-
menuGap:
|
|
122
|
+
menuGap: x("sidenav-gap-vertical", 6),
|
|
117
123
|
menuPadT: u("padding-tight", 8),
|
|
118
124
|
menuPadB: u("padding-xxwide", 56),
|
|
119
125
|
itemH: u("accessibility-touch-target-aa-height", 44),
|
package/dist/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Pathway design tokens
|
|
2
2
|
|
|
3
|
-
**The colour contract is
|
|
4
|
-
**
|
|
5
|
-
|
|
3
|
+
**The colour contract is 143 names.** Your full working vocabulary is
|
|
4
|
+
**253**. If you add up every declaration in this folder you get
|
|
5
|
+
782 — that number is not the contract, and the table below says why.
|
|
6
6
|
|
|
7
7
|
## Link these, in this order
|
|
8
8
|
|
|
@@ -26,11 +26,11 @@ error**.
|
|
|
26
26
|
| File | Names | Safe to name? | Must load? | What it is |
|
|
27
27
|
|---|---|---|---|---|
|
|
28
28
|
| `primitives.css` | 353 | **no** | yes | Raw colour ramps. Load it; do not name it. |
|
|
29
|
-
| `themes/light.css` |
|
|
30
|
-
| `themes/midnight.css` |
|
|
29
|
+
| `themes/light.css` | 143 | yes | yes | Colour contract, Light Mode. |
|
|
30
|
+
| `themes/midnight.css` | 143 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
|
|
31
31
|
| `type.css` | 41 | yes | yes | Type scale. Compose from these. |
|
|
32
32
|
| `layout.css` | 40 | yes | yes | Spacing, radii, border widths. |
|
|
33
|
-
| `layout-contextual.css` |
|
|
33
|
+
| `layout-contextual.css` | 33 | **no** | **no** | Per-component metrics. This repo's components use these. |
|
|
34
34
|
| `motion.css` | 17 | yes | yes | Durations and easings. |
|
|
35
35
|
| `layout-responsive.css` | 7 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
|
|
36
36
|
| `breakpoints.css` | 5 | yes | yes | Breakpoint values. |
|
package/dist/contract.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$comment": "The names a consumer may use. Generated from the emitted CSS by scripts/build-contract.js — do not hand-edit. Lint against `contract` if you want the boundary enforced; nothing here blocks a primitive.",
|
|
3
|
-
"version": "8.0.
|
|
4
|
-
"generated": "2026-09-
|
|
3
|
+
"version": "8.0.1",
|
|
4
|
+
"generated": "2026-09-17",
|
|
5
5
|
"counts": {
|
|
6
|
-
"contract":
|
|
7
|
-
"infrastructure":
|
|
8
|
-
"declarationsAcrossAllFiles":
|
|
6
|
+
"contract": 253,
|
|
7
|
+
"infrastructure": 386,
|
|
8
|
+
"declarationsAcrossAllFiles": 782
|
|
9
9
|
},
|
|
10
10
|
"loadOrder": [
|
|
11
11
|
"primitives.css",
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
"themes/light.css": {
|
|
28
28
|
"contract": true,
|
|
29
29
|
"mustLoad": true,
|
|
30
|
-
"count":
|
|
30
|
+
"count": 143,
|
|
31
31
|
"role": "Colour contract, Light Mode."
|
|
32
32
|
},
|
|
33
33
|
"themes/midnight.css": {
|
|
34
34
|
"contract": true,
|
|
35
35
|
"mustLoad": true,
|
|
36
|
-
"count":
|
|
36
|
+
"count": 143,
|
|
37
37
|
"role": "Colour contract, Midnight Mode. Same names as light."
|
|
38
38
|
},
|
|
39
39
|
"type.css": {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"layout-contextual.css": {
|
|
52
52
|
"contract": false,
|
|
53
53
|
"mustLoad": false,
|
|
54
|
-
"count":
|
|
54
|
+
"count": 33,
|
|
55
55
|
"role": "Per-component metrics. This repo's components use these."
|
|
56
56
|
},
|
|
57
57
|
"motion.css": {
|
|
@@ -160,7 +160,6 @@
|
|
|
160
160
|
"--semantic-color-fill-static-severe-subtle",
|
|
161
161
|
"--semantic-color-fill-surface-canvas",
|
|
162
162
|
"--semantic-color-fill-surface-elevated",
|
|
163
|
-
"--semantic-color-fill-surface-sheet",
|
|
164
163
|
"--semantic-color-foreground-action-disabled",
|
|
165
164
|
"--semantic-color-foreground-action-primary-on-strong",
|
|
166
165
|
"--semantic-color-foreground-action-primary-on-subtle-hover",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
prefer layout.css, which is the general spacing contract. These exist so a
|
|
10
10
|
component's geometry can be tuned without moving the whole scale.
|
|
11
11
|
|
|
12
|
-
Declares
|
|
12
|
+
Declares 33 custom properties.
|
|
13
13
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
14
14
|
==========================================================================
|
|
15
15
|
*/
|
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
--contextual-layout-units-button-padding-small-vertical: 6px;
|
|
27
27
|
--contextual-layout-units-button-padding-xsmall-horizontal: 8px;
|
|
28
28
|
--contextual-layout-units-button-padding-xsmall-vertical: 6px;
|
|
29
|
-
--contextual-layout-units-button-radius: 8px;
|
|
30
29
|
--contextual-layout-units-card-border-width-hover: 0.75px;
|
|
31
30
|
--contextual-layout-units-card-border-width-rest: 0.5px;
|
|
32
31
|
--contextual-layout-units-card-cornerradius: 12px;
|
package/dist/themes/light.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
put a mode in a property name — that form came from tokens.css, retired
|
|
13
13
|
2026-09-03, and resolves to nothing.
|
|
14
14
|
|
|
15
|
-
Declares
|
|
15
|
+
Declares 143 custom properties.
|
|
16
16
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
17
17
|
==========================================================================
|
|
18
18
|
*/
|
|
@@ -157,7 +157,6 @@
|
|
|
157
157
|
--semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
|
|
158
158
|
--semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
|
|
159
159
|
--semantic-color-scrim-base: var(--primitive-color-cool-neutral-800-70);
|
|
160
|
-
--semantic-color-fill-surface-sheet: var(--semantic-color-fill-static-neutral-mono);
|
|
161
160
|
--semantic-color-foreground-action-status-positive-on-strong: var(--semantic-color-fill-static-neutral-mono);
|
|
162
161
|
--semantic-color-foreground-action-status-negative-on-strong: var(--semantic-color-fill-static-neutral-mono);
|
|
163
162
|
--semantic-color-foreground-action-primary-on-strong: var(--semantic-color-fill-static-neutral-mono);
|
package/dist/themes/midnight.css
CHANGED
|
@@ -14,13 +14,12 @@
|
|
|
14
14
|
still the lightest-touch step even though here it is a dark near-ground.
|
|
15
15
|
White, XLight and Black are inversion anchors and keep their value.
|
|
16
16
|
|
|
17
|
-
Declares
|
|
17
|
+
Declares 143 custom properties.
|
|
18
18
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
19
19
|
==========================================================================
|
|
20
20
|
*/
|
|
21
21
|
[data-theme="midnight"], [data-theme="dark"] {
|
|
22
22
|
--semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
|
|
23
|
-
--semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
|
|
24
23
|
--semantic-color-fill-surface-elevated: var(--primitive-color-brand-700);
|
|
25
24
|
--semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-8);
|
|
26
25
|
--semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-250);
|
package/dist/tokens.js
CHANGED
|
@@ -2179,17 +2179,6 @@ const tokens = {
|
|
|
2179
2179
|
"canvas"
|
|
2180
2180
|
]
|
|
2181
2181
|
},
|
|
2182
|
-
"semantic-color-light-mode-fill-surface-sheet": {
|
|
2183
|
-
"value": "#fefefd",
|
|
2184
|
-
"type": "color",
|
|
2185
|
-
"path": [
|
|
2186
|
-
"semantic-color",
|
|
2187
|
-
"light-mode",
|
|
2188
|
-
"fill",
|
|
2189
|
-
"surface",
|
|
2190
|
-
"sheet"
|
|
2191
|
-
]
|
|
2192
|
-
},
|
|
2193
2182
|
"semantic-color-light-mode-fill-surface-elevated": {
|
|
2194
2183
|
"value": "#fefefd",
|
|
2195
2184
|
"type": "color",
|
|
@@ -3969,17 +3958,6 @@ const tokens = {
|
|
|
3969
3958
|
"canvas"
|
|
3970
3959
|
]
|
|
3971
3960
|
},
|
|
3972
|
-
"semantic-color-midnight-mode-fill-surface-sheet": {
|
|
3973
|
-
"value": "#0a1223",
|
|
3974
|
-
"type": "color",
|
|
3975
|
-
"path": [
|
|
3976
|
-
"semantic-color",
|
|
3977
|
-
"midnight-mode",
|
|
3978
|
-
"fill",
|
|
3979
|
-
"surface",
|
|
3980
|
-
"sheet"
|
|
3981
|
-
]
|
|
3982
|
-
},
|
|
3983
3961
|
"semantic-color-midnight-mode-fill-surface-elevated": {
|
|
3984
3962
|
"value": "#152343",
|
|
3985
3963
|
"type": "color",
|
|
@@ -7755,15 +7733,6 @@ const tokens = {
|
|
|
7755
7733
|
"selected"
|
|
7756
7734
|
]
|
|
7757
7735
|
},
|
|
7758
|
-
"contextual-layout-units-button-radius": {
|
|
7759
|
-
"value": 8,
|
|
7760
|
-
"type": "number",
|
|
7761
|
-
"path": [
|
|
7762
|
-
"contextual-layout-units",
|
|
7763
|
-
"button",
|
|
7764
|
-
"radius"
|
|
7765
|
-
]
|
|
7766
|
-
},
|
|
7767
7736
|
"contextual-layout-units-button-corner-radius-radius": {
|
|
7768
7737
|
"value": 8,
|
|
7769
7738
|
"type": "number",
|
package/dist/tokens.json
CHANGED
|
@@ -997,10 +997,6 @@
|
|
|
997
997
|
"$type": "color",
|
|
998
998
|
"$value": "{primitive-color.cool-neutral.10}"
|
|
999
999
|
},
|
|
1000
|
-
"sheet": {
|
|
1001
|
-
"$type": "color",
|
|
1002
|
-
"$value": "{semantic-color.light-mode.fill.static.neutral.mono}"
|
|
1003
|
-
},
|
|
1004
1000
|
"elevated": {
|
|
1005
1001
|
"$type": "color",
|
|
1006
1002
|
"$value": "{primitive-color.warm-neutral.0}"
|
|
@@ -1721,10 +1717,6 @@
|
|
|
1721
1717
|
"$type": "color",
|
|
1722
1718
|
"$value": "{primitive-color.brand.900}"
|
|
1723
1719
|
},
|
|
1724
|
-
"sheet": {
|
|
1725
|
-
"$type": "color",
|
|
1726
|
-
"$value": "{primitive-color.brand.800}"
|
|
1727
|
-
},
|
|
1728
1720
|
"elevated": {
|
|
1729
1721
|
"$type": "color",
|
|
1730
1722
|
"$value": "{primitive-color.brand.700}"
|
|
@@ -3415,10 +3407,6 @@
|
|
|
3415
3407
|
"$value": "{semantic-layout-units.borderwidth.medium}"
|
|
3416
3408
|
}
|
|
3417
3409
|
},
|
|
3418
|
-
"radius": {
|
|
3419
|
-
"$type": "number",
|
|
3420
|
-
"$value": "{primitive-unit.unit.8}"
|
|
3421
|
-
},
|
|
3422
3410
|
"corner-radius": {
|
|
3423
3411
|
"radius": {
|
|
3424
3412
|
"$type": "number",
|
package/package.json
CHANGED