@helloimjolopez-pathway/pathway-tokens 11.0.0 → 11.2.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 +178 -12
- package/components/scrollbar/scrollbar.jsx +39 -16
- package/components/sidenav/sidenav.jsx +90 -44
- package/dist/README.md +2 -2
- package/dist/brands/newco/index.css +2 -2
- package/dist/brands/newco/layout-contextual.css +4 -1
- package/dist/brands/newco/tokens.js +34 -1
- package/dist/breakpoints.css +2 -2
- package/dist/contract.json +5 -5
- package/dist/index.css +2 -2
- package/dist/layout-contextual.css +7 -4
- package/dist/layout-responsive.css +2 -2
- package/dist/layout.css +3 -3
- package/dist/motion.css +10 -10
- package/dist/primitives.css +3 -3
- package/dist/themes/light.css +3 -3
- package/dist/themes/midnight.css +2 -2
- package/dist/tokens.js +33 -0
- package/dist/tokens.json +40 -8
- package/dist/type.css +2 -2
- package/package.json +28 -6
package/dist/primitives.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/*
|
|
2
2
|
==========================================================================
|
|
3
|
-
PATHWAY DESIGN TOKENS
|
|
3
|
+
PATHWAY DESIGN TOKENS, INFRASTRUCTURE
|
|
4
4
|
==========================================================================
|
|
5
5
|
|
|
6
6
|
The raw colour ramps. NOT part of the token contract.
|
|
7
7
|
|
|
8
|
-
You must LOAD this file
|
|
8
|
+
You must LOAD this file: every semantic token resolves through it, so
|
|
9
9
|
without it all colour resolves to nothing and the page renders unstyled
|
|
10
10
|
with no console error. But product code should not NAME these.
|
|
11
11
|
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
Nothing blocks you. It is an escape hatch with a stated cost.
|
|
20
20
|
|
|
21
21
|
Declares 548 custom properties.
|
|
22
|
-
Generated
|
|
22
|
+
Generated: do not edit. Run `npm run build-tokens`.
|
|
23
23
|
==========================================================================
|
|
24
24
|
*/
|
|
25
25
|
:root {
|
package/dist/themes/light.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
==========================================================================
|
|
3
|
-
PATHWAY DESIGN TOKENS
|
|
3
|
+
PATHWAY DESIGN TOKENS, CONTRACT
|
|
4
4
|
==========================================================================
|
|
5
5
|
|
|
6
6
|
The colour contract, Light Mode. Name these freely.
|
|
@@ -9,11 +9,11 @@
|
|
|
9
9
|
|
|
10
10
|
themes/midnight.css declares the SAME names with inverted values, so a
|
|
11
11
|
component names a colour once and both modes resolve by selector. Never
|
|
12
|
-
put a mode in a property name
|
|
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
15
|
Declares 210 custom properties.
|
|
16
|
-
Generated
|
|
16
|
+
Generated: do not edit. Run `npm run build-tokens`.
|
|
17
17
|
==========================================================================
|
|
18
18
|
*/
|
|
19
19
|
:root, [data-theme="light"] {
|
package/dist/themes/midnight.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
==========================================================================
|
|
3
|
-
PATHWAY DESIGN TOKENS
|
|
3
|
+
PATHWAY DESIGN TOKENS, CONTRACT
|
|
4
4
|
==========================================================================
|
|
5
5
|
|
|
6
6
|
The colour contract, Midnight Mode. Identical names to themes/light.css.
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
White, XLight and Black are inversion anchors and keep their value.
|
|
16
16
|
|
|
17
17
|
Declares 210 custom properties.
|
|
18
|
-
Generated
|
|
18
|
+
Generated: do not edit. Run `npm run build-tokens`.
|
|
19
19
|
==========================================================================
|
|
20
20
|
*/
|
|
21
21
|
[data-theme="dark"], [data-theme="midnight"] {
|
package/dist/tokens.js
CHANGED
|
@@ -413,6 +413,39 @@ const tokens = {
|
|
|
413
413
|
"height"
|
|
414
414
|
]
|
|
415
415
|
},
|
|
416
|
+
"contextual-layout-units-widget-minwidth-glance": {
|
|
417
|
+
"value": 275,
|
|
418
|
+
"type": "number",
|
|
419
|
+
"path": [
|
|
420
|
+
"contextual-layout-units",
|
|
421
|
+
"amplify",
|
|
422
|
+
"widget",
|
|
423
|
+
"minwidth",
|
|
424
|
+
"glance"
|
|
425
|
+
]
|
|
426
|
+
},
|
|
427
|
+
"contextual-layout-units-widget-minwidth-detail": {
|
|
428
|
+
"value": 515,
|
|
429
|
+
"type": "number",
|
|
430
|
+
"path": [
|
|
431
|
+
"contextual-layout-units",
|
|
432
|
+
"amplify",
|
|
433
|
+
"widget",
|
|
434
|
+
"minwidth",
|
|
435
|
+
"detail"
|
|
436
|
+
]
|
|
437
|
+
},
|
|
438
|
+
"contextual-layout-units-widget-minwidth-explore": {
|
|
439
|
+
"value": 1050,
|
|
440
|
+
"type": "number",
|
|
441
|
+
"path": [
|
|
442
|
+
"contextual-layout-units",
|
|
443
|
+
"amplify",
|
|
444
|
+
"widget",
|
|
445
|
+
"minwidth",
|
|
446
|
+
"explore"
|
|
447
|
+
]
|
|
448
|
+
},
|
|
416
449
|
"elevation-light-lift": {
|
|
417
450
|
"value": "0 10px 28px -6px rgba(24,27,43,0.08)",
|
|
418
451
|
"type": "string",
|
package/dist/tokens.json
CHANGED
|
@@ -202,6 +202,22 @@
|
|
|
202
202
|
"$type": "number",
|
|
203
203
|
"$value": "{primitive-unit.unit.60}"
|
|
204
204
|
}
|
|
205
|
+
},
|
|
206
|
+
"widget": {
|
|
207
|
+
"minwidth": {
|
|
208
|
+
"glance": {
|
|
209
|
+
"$type": "number",
|
|
210
|
+
"$value": 275
|
|
211
|
+
},
|
|
212
|
+
"detail": {
|
|
213
|
+
"$type": "number",
|
|
214
|
+
"$value": 515
|
|
215
|
+
},
|
|
216
|
+
"explore": {
|
|
217
|
+
"$type": "number",
|
|
218
|
+
"$value": 1050
|
|
219
|
+
}
|
|
220
|
+
}
|
|
205
221
|
}
|
|
206
222
|
},
|
|
207
223
|
"newco": {
|
|
@@ -384,6 +400,22 @@
|
|
|
384
400
|
"$type": "number",
|
|
385
401
|
"$value": "{primitive-unit.unit.60}"
|
|
386
402
|
}
|
|
403
|
+
},
|
|
404
|
+
"widget": {
|
|
405
|
+
"minwidth": {
|
|
406
|
+
"detail": {
|
|
407
|
+
"$type": "number",
|
|
408
|
+
"$value": 0
|
|
409
|
+
},
|
|
410
|
+
"explore": {
|
|
411
|
+
"$type": "number",
|
|
412
|
+
"$value": 0
|
|
413
|
+
},
|
|
414
|
+
"glance": {
|
|
415
|
+
"$type": "number",
|
|
416
|
+
"$value": 0
|
|
417
|
+
}
|
|
418
|
+
}
|
|
387
419
|
}
|
|
388
420
|
}
|
|
389
421
|
},
|
|
@@ -435,7 +467,7 @@
|
|
|
435
467
|
"2": {
|
|
436
468
|
"$type": "duration",
|
|
437
469
|
"$value": "150ms",
|
|
438
|
-
"$description": "Hover fills, small opacity fades, colour transitions
|
|
470
|
+
"$description": "Hover fills, small opacity fades, colour transitions: the most common micro-interaction timing"
|
|
439
471
|
},
|
|
440
472
|
"3": {
|
|
441
473
|
"$type": "duration",
|
|
@@ -475,7 +507,7 @@
|
|
|
475
507
|
"loop-fast": {
|
|
476
508
|
"$type": "duration",
|
|
477
509
|
"$value": "750ms",
|
|
478
|
-
"$description": "Tighter loop for embedded/inline contexts (in-button spinner
|
|
510
|
+
"$description": "Tighter loop for embedded/inline contexts (in-button spinner, faster reads as more responsive feedback)"
|
|
479
511
|
}
|
|
480
512
|
},
|
|
481
513
|
"easing": {
|
|
@@ -487,7 +519,7 @@
|
|
|
487
519
|
0.2,
|
|
488
520
|
1
|
|
489
521
|
],
|
|
490
|
-
"$description": "Most transitions
|
|
522
|
+
"$description": "Most transitions, enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings."
|
|
491
523
|
},
|
|
492
524
|
"spring": {
|
|
493
525
|
"$type": "cubicBezier",
|
|
@@ -497,7 +529,7 @@
|
|
|
497
529
|
0.64,
|
|
498
530
|
1
|
|
499
531
|
],
|
|
500
|
-
"$description": "Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04)
|
|
532
|
+
"$description": "Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04), easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons, see chevron rule below."
|
|
501
533
|
},
|
|
502
534
|
"decelerate": {
|
|
503
535
|
"$type": "cubicBezier",
|
|
@@ -507,7 +539,7 @@
|
|
|
507
539
|
0.2,
|
|
508
540
|
1
|
|
509
541
|
],
|
|
510
|
-
"$description": "Enters where the element should glide in smoothly
|
|
542
|
+
"$description": "Enters where the element should glide in smoothly: overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce."
|
|
511
543
|
},
|
|
512
544
|
"accelerate": {
|
|
513
545
|
"$type": "cubicBezier",
|
|
@@ -517,7 +549,7 @@
|
|
|
517
549
|
1,
|
|
518
550
|
1
|
|
519
551
|
],
|
|
520
|
-
"$description": "Exits where the element leaves cleanly
|
|
552
|
+
"$description": "Exits where the element leaves cleanly, dismissing overlays, scaling down."
|
|
521
553
|
},
|
|
522
554
|
"emphasized": {
|
|
523
555
|
"$type": "cubicBezier",
|
|
@@ -537,7 +569,7 @@
|
|
|
537
569
|
0.68,
|
|
538
570
|
1
|
|
539
571
|
],
|
|
540
|
-
"$description": "Accordion settle
|
|
572
|
+
"$description": "Accordion settle, content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy."
|
|
541
573
|
},
|
|
542
574
|
"linear": {
|
|
543
575
|
"$type": "cubicBezier",
|
|
@@ -3866,7 +3898,7 @@
|
|
|
3866
3898
|
},
|
|
3867
3899
|
"300-70": {
|
|
3868
3900
|
"$type": "color",
|
|
3869
|
-
"$value": "#
|
|
3901
|
+
"$value": "#8598d7b3"
|
|
3870
3902
|
},
|
|
3871
3903
|
"300-8": {
|
|
3872
3904
|
"$type": "color",
|
package/dist/type.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
2
|
==========================================================================
|
|
3
|
-
PATHWAY DESIGN TOKENS
|
|
3
|
+
PATHWAY DESIGN TOKENS, CONTRACT
|
|
4
4
|
==========================================================================
|
|
5
5
|
|
|
6
6
|
The type SCALE. Name these freely.
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
designer applies them.
|
|
19
19
|
|
|
20
20
|
Declares 39 custom properties.
|
|
21
|
-
Generated
|
|
21
|
+
Generated: do not edit. Run `npm run build-tokens`.
|
|
22
22
|
==========================================================================
|
|
23
23
|
*/
|
|
24
24
|
:root {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@helloimjolopez-pathway/pathway-tokens",
|
|
3
|
-
"version": "11.
|
|
4
|
-
"description": "Pathway Design System tokens
|
|
3
|
+
"version": "11.2.0",
|
|
4
|
+
"description": "Pathway Design System tokens, CSS custom properties, JS export, and DTCG JSON",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"engines": {
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"fix-tokens": "node scripts/fix-tokens.js",
|
|
63
63
|
"fix-tokens-preview": "node scripts/fix-tokens.js --dry-run",
|
|
64
64
|
"build-tokens": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js",
|
|
65
|
-
"build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon",
|
|
66
|
-
"storybook": "node style-dictionary.config.js && storybook dev -p 6006",
|
|
65
|
+
"build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/build-component-index.js --check && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon && node scripts/check-component-tables.js && node scripts/build-demos.js && node scripts/check-demo-links.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js",
|
|
66
|
+
"storybook": "node style-dictionary.config.js && PATHWAY_BRAND_AXIS=1 storybook dev -p 6006",
|
|
67
67
|
"build-storybook": "storybook build",
|
|
68
68
|
"check-demo-tokens": "node scripts/check-demo-tokens.js",
|
|
69
69
|
"assemble-export": "node scripts/assemble-figma-export.js",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"check-secrets": "node scripts/check-secrets.js",
|
|
75
75
|
"check-token-refs": "node scripts/check-token-refs.js",
|
|
76
76
|
"check-token-names": "node scripts/check-token-names.js",
|
|
77
|
-
"check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js",
|
|
77
|
+
"check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js && node scripts/build-component-index.js --check && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/check-component-tables.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js",
|
|
78
78
|
"build-elements": "esbuild components/sidenav/pathway-sidenav.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-sidenav.js",
|
|
79
79
|
"check-story-yield": "node scripts/check-story-yield.js",
|
|
80
80
|
"stamp-headers": "node scripts/stamp-headers.js",
|
|
@@ -84,7 +84,29 @@
|
|
|
84
84
|
"check-doc-hex": "node scripts/fix-stale-doc-hex.js --check",
|
|
85
85
|
"check-token-object-refs": "node scripts/check-token-object-refs.js",
|
|
86
86
|
"check-motion-coverage": "node scripts/check-motion-coverage.js",
|
|
87
|
-
"sync-demo-module-icon": "node scripts/sync-demo-module-icon.js"
|
|
87
|
+
"sync-demo-module-icon": "node scripts/sync-demo-module-icon.js",
|
|
88
|
+
"build-storybook:brands": "PATHWAY_BRAND_AXIS=1 storybook build",
|
|
89
|
+
"build-component-index": "node scripts/build-component-index.js",
|
|
90
|
+
"check-component-index": "node scripts/build-component-index.js --check",
|
|
91
|
+
"check-spec-stories": "node scripts/check-spec-stories.js",
|
|
92
|
+
"check-figma-nodes": "node scripts/check-figma-nodes.js",
|
|
93
|
+
"check-stories-render": "node scripts/check-stories-render.js",
|
|
94
|
+
"verify-storybook": "node scripts/check-syntax.js && storybook build --quiet && node scripts/check-stories-render.js && node scripts/check-sidebar-shape.js && node scripts/check-reduced-motion.js && node scripts/check-target-size.js && node scripts/check-contrast-focus.js && node scripts/check-mdx-refs.js && node scripts/check-accessible-names.js && node scripts/check-demos-render.js",
|
|
95
|
+
"check-code-connect": "node scripts/check-code-connect.js",
|
|
96
|
+
"check-mdx-refs": "node scripts/check-mdx-refs.js",
|
|
97
|
+
"check-component-tables": "node scripts/check-component-tables.js",
|
|
98
|
+
"check-accessible-names": "node scripts/check-accessible-names.js",
|
|
99
|
+
"check-syntax": "node scripts/check-syntax.js",
|
|
100
|
+
"build-demos": "node scripts/build-demos.js",
|
|
101
|
+
"check-demo-links": "node scripts/check-demo-links.js",
|
|
102
|
+
"check-alpha-names": "node scripts/check-alpha-names.js",
|
|
103
|
+
"check-demos-render": "node scripts/check-demos-render.js",
|
|
104
|
+
"check-token-descriptions": "node scripts/check-token-descriptions.js",
|
|
105
|
+
"check-sidebar-shape": "node scripts/check-sidebar-shape.js",
|
|
106
|
+
"check-reduced-motion": "node scripts/check-reduced-motion.js",
|
|
107
|
+
"check-target-size": "node scripts/check-target-size.js",
|
|
108
|
+
"check-contrast-focus": "node scripts/check-contrast-focus.js",
|
|
109
|
+
"check-spec-structure": "node scripts/check-spec-structure.js"
|
|
88
110
|
},
|
|
89
111
|
"devDependencies": {
|
|
90
112
|
"@babel/preset-env": "^7.29.2",
|