@helloimjolopez-pathway/pathway-tokens 7.0.0 → 7.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.
Files changed (13) hide show
  1. package/components/scrollbar/scrollbar.jsx +19 -4
  2. package/dist/README.md +96 -0
  3. package/dist/breakpoints.css +10 -3
  4. package/dist/contract.json +356 -0
  5. package/dist/layout-contextual.css +15 -6
  6. package/dist/layout-responsive.css +20 -6
  7. package/dist/layout.css +18 -6
  8. package/dist/motion.css +17 -3
  9. package/dist/primitives.css +23 -3
  10. package/dist/themes/light.css +17 -3
  11. package/dist/themes/midnight.css +19 -3
  12. package/dist/type.css +23 -6
  13. package/package.json +1 -1
package/components/scrollbar/scrollbar.jsx CHANGED
@@ -30,13 +30,28 @@ export const SCROLL = {
30
30
  thumbMin: 28, // px — min thumb length (grab-target floor); JS layout math
31
31
  gutter: "var(--semantic-layout-units-padding-xxxtight)", // 2px — inset from the right edge
32
32
  grabZone: 16, // px — invisible mouse grab strip (wider than the 6px thumb so it's catchable)
33
- thumbRest: "var(--semantic-color-scrim-faint)", // black 16% — faint overlay (rest)
34
- thumbHover: "var(--semantic-color-scrim-light)", // black 30% — hover/drag
33
+ // WHY THESE TWO RUNGS AND NOT THE FAINTER ONES (2026-09-16):
34
+ //
35
+ // Rest was Scrim/Faint (black 16%), which composites to 1.4:1 against both
36
+ // canvas and sheet. The AA floor for a non-text UI component is 3:1, so a 6px
37
+ // pill at 1.4:1 sat right at the threshold of perception: one person saw it
38
+ // and another, on a brighter display, reported the scrollbar as missing
39
+ // entirely. That was a real report, not a misconfiguration.
40
+ //
41
+ // Measured over #fafafa: Faint 16% = 1.4:1, Light 24% = 1.68:1,
42
+ // Subtle 50% = 3.4:1, Base 70% = 6.57:1. Subtle is the lightest rung that
43
+ // clears the floor, so rest takes it and hover takes Base, which keeps the
44
+ // hover step legible as a step.
45
+ thumbRest: "var(--semantic-color-scrim-subtle)", // black 50% — 3.4:1, the lightest rung clearing 3:1
46
+ thumbHover: "var(--semantic-color-scrim-base)", // black 70% — 6.57:1, hover/drag
35
47
  thumbBlur: "blur(8px) saturate(180%)",
36
48
  // Hairline glass edge: semantic white at 35% via color-mix.
37
49
  thumbEdge: "inset 0 0 0 0.5px color-mix(in srgb, var(--semantic-color-fill-static-neutral-faint) 35%, transparent)",
38
- // Asymmetric fade, motion-token driven: snappy appear (200ms decelerate glide-in), graceful fade-out (380ms).
39
- fadeIn: "opacity var(--motion-duration-3) var(--motion-easing-decelerate), background var(--motion-duration-3) var(--motion-easing-standard)",
50
+ // Fade OUT gracefully, but appear INSTANTLY. Animating opacity on the way in
51
+ // multiplied the thumb's own alpha by the in-flight opacity, so during the
52
+ // 200ms glide-in it rendered as low as 1.18:1 — below the floor at the exact
53
+ // moment the user is looking for it. Only the fade-out is animated now.
54
+ fadeIn: "background var(--motion-duration-3) var(--motion-easing-standard)",
40
55
  fadeOut: "opacity var(--motion-duration-5) var(--motion-easing-standard)",
41
56
  idleHideMs: 500, // hide the thumb this long after scrolling stops / mouse leaves the bar
42
57
  };
package/dist/README.md ADDED
@@ -0,0 +1,96 @@
1
+ # Pathway design tokens
2
+
3
+ **The colour contract is 169 names.** Your full working vocabulary is
4
+ **278**. If you add up every declaration in this folder you get
5
+ 827 — that number is not the contract, and the table below says why.
6
+
7
+ ## Link these, in this order
8
+
9
+ ```html
10
+ <link rel="stylesheet" href="primitives.css">
11
+ <link rel="stylesheet" href="themes/light.css">
12
+ <link rel="stylesheet" href="themes/midnight.css">
13
+ <link rel="stylesheet" href="type.css">
14
+ <link rel="stylesheet" href="layout.css">
15
+ <link rel="stylesheet" href="motion.css">
16
+ <link rel="stylesheet" href="layout-responsive.css">
17
+ <link rel="stylesheet" href="breakpoints.css">
18
+ ```
19
+
20
+ `primitives.css` must come first. Every semantic token resolves through it, so if it is
21
+ missing all colour resolves to nothing and the page renders unstyled **with no console
22
+ error**.
23
+
24
+ ## The files
25
+
26
+ | File | Names | Safe to name? | Must load? | What it is |
27
+ |---|---|---|---|---|
28
+ | `primitives.css` | 352 | **no** | yes | Raw colour ramps. Load it; do not name it. |
29
+ | `themes/light.css` | 169 | yes | yes | Colour contract, Light Mode. |
30
+ | `themes/midnight.css` | 169 | yes | yes | Colour contract, Midnight Mode. Same names as light. |
31
+ | `type.css` | 41 | yes | yes | Type scale. Compose from these. |
32
+ | `layout.css` | 40 | yes | yes | Spacing, radii, border widths. |
33
+ | `layout-contextual.css` | 28 | **no** | **no** | Per-component metrics. This repo's components use these. |
34
+ | `motion.css` | 17 | yes | yes | Durations and easings. |
35
+ | `layout-responsive.css` | 6 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
36
+ | `breakpoints.css` | 5 | yes | yes | Breakpoint values. |
37
+
38
+ Each file repeats this in its own header.
39
+
40
+ ## Can I use a primitive?
41
+
42
+ Yes. Nothing stops you and nothing should. But `Primitive: Color` has exactly **one
43
+ mode** and `themes/midnight.css` declares **zero** primitives, so a primitive holds one
44
+ value forever:
45
+
46
+ ```css
47
+ color: var(--primitive-color-brand-400); /* stays this blue in Midnight */
48
+ color: var(--semantic-color-fill-action-primary-strong-rest); /* flips with the theme */
49
+ ```
50
+
51
+ Use one when you specifically want a value that does not respond to the theme.
52
+
53
+ ## Theming
54
+
55
+ One name, two values, resolved by selector. Set `data-theme="midnight"` on `<html>`
56
+ to flip the page, or on any element to flip just that subtree — it composes both ways,
57
+ so a light island can sit inside a dark island.
58
+
59
+ Never put a mode in a property name. `--semantic-color-light-mode-*` came from
60
+ `tokens.css`, retired 2026-09-03, and resolves to nothing.
61
+
62
+ ## Type
63
+
64
+ No composite styles and no `.pw-type-*` classes. Name five properties:
65
+
66
+ ```css
67
+ font-family: var(--semantic-type-family-brand);
68
+ font-size: var(--semantic-type-font-size-m);
69
+ font-weight: var(--semantic-type-weight-semibold);
70
+ line-height: var(--semantic-type-line-height-m-single);
71
+ letter-spacing: var(--semantic-type-letter-spacing-compact);
72
+ ```
73
+
74
+ ## Layout units carry their unit
75
+
76
+ ```css
77
+ border-radius: var(--semantic-layout-units-cornerradius-small); /* correct */
78
+ border-radius: calc(var(--semantic-layout-units-cornerradius-small) * 1px); /* WRONG */
79
+ ```
80
+
81
+ The second is `calc(4px * 1px)`, which is not a length, so the browser drops it silently.
82
+
83
+ ## Machine-readable
84
+
85
+ `contract.json` lists every consumable name plus the per-file counts, so you can lint
86
+ against it if you want the boundary enforced.
87
+
88
+ ## Motion is not in Figma
89
+
90
+ The Variables panel has zero motion variables; `motion.css` is generated from
91
+ `docs/design-system-spec.md` §2. Anyone rebuilding tokens from a Figma export gets no
92
+ motion at all and no warning — consume the package instead.
93
+
94
+ ---
95
+
96
+ Repo: https://github.com/helloimjolopez-collab/pathway-ds
package/dist/breakpoints.css CHANGED
@@ -1,7 +1,14 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ The breakpoint values. Name these freely.
7
+
8
+ Declares 5 custom properties.
9
+ Generated — do not edit. Run `npm run build-tokens`.
10
+ ==========================================================================
11
+ */
5
12
  :root {
6
13
  --breakpoints-desktop-1920px: 1920px;
7
14
  --breakpoints-desktop-1440px: 1440px;
package/dist/contract.json ADDED
@@ -0,0 +1,356 @@
1
+ {
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": "7.0.1",
4
+ "generated": "2026-09-16",
5
+ "counts": {
6
+ "contract": 278,
7
+ "infrastructure": 380,
8
+ "declarationsAcrossAllFiles": 827
9
+ },
10
+ "loadOrder": [
11
+ "primitives.css",
12
+ "themes/light.css",
13
+ "themes/midnight.css",
14
+ "type.css",
15
+ "layout.css",
16
+ "motion.css",
17
+ "layout-responsive.css",
18
+ "breakpoints.css"
19
+ ],
20
+ "files": {
21
+ "primitives.css": {
22
+ "contract": false,
23
+ "mustLoad": true,
24
+ "count": 352,
25
+ "role": "Raw colour ramps. Load it; do not name it."
26
+ },
27
+ "themes/light.css": {
28
+ "contract": true,
29
+ "mustLoad": true,
30
+ "count": 169,
31
+ "role": "Colour contract, Light Mode."
32
+ },
33
+ "themes/midnight.css": {
34
+ "contract": true,
35
+ "mustLoad": true,
36
+ "count": 169,
37
+ "role": "Colour contract, Midnight Mode. Same names as light."
38
+ },
39
+ "type.css": {
40
+ "contract": true,
41
+ "mustLoad": true,
42
+ "count": 41,
43
+ "role": "Type scale. Compose from these."
44
+ },
45
+ "layout.css": {
46
+ "contract": true,
47
+ "mustLoad": true,
48
+ "count": 40,
49
+ "role": "Spacing, radii, border widths."
50
+ },
51
+ "layout-contextual.css": {
52
+ "contract": false,
53
+ "mustLoad": false,
54
+ "count": 28,
55
+ "role": "Per-component metrics. This repo's components use these."
56
+ },
57
+ "motion.css": {
58
+ "contract": true,
59
+ "mustLoad": true,
60
+ "count": 17,
61
+ "role": "Durations and easings."
62
+ },
63
+ "layout-responsive.css": {
64
+ "contract": true,
65
+ "mustLoad": true,
66
+ "count": 6,
67
+ "role": "Sheet and TopNav padding. The only layout tokens with media queries."
68
+ },
69
+ "breakpoints.css": {
70
+ "contract": true,
71
+ "mustLoad": true,
72
+ "count": 5,
73
+ "role": "Breakpoint values."
74
+ }
75
+ },
76
+ "contract": [
77
+ "--breakpoints-desktop-1440px",
78
+ "--breakpoints-desktop-1920px",
79
+ "--breakpoints-mobile-393px",
80
+ "--breakpoints-tablet-1024px",
81
+ "--breakpoints-tablet-768px",
82
+ "--motion-duration-1",
83
+ "--motion-duration-2",
84
+ "--motion-duration-3",
85
+ "--motion-duration-4",
86
+ "--motion-duration-5",
87
+ "--motion-duration-6",
88
+ "--motion-duration-7",
89
+ "--motion-duration-8",
90
+ "--motion-duration-loop",
91
+ "--motion-duration-loop-fast",
92
+ "--motion-easing-accelerate",
93
+ "--motion-easing-accordion",
94
+ "--motion-easing-decelerate",
95
+ "--motion-easing-emphasized",
96
+ "--motion-easing-linear",
97
+ "--motion-easing-spring",
98
+ "--motion-easing-standard",
99
+ "--semantic-color-fill-action-disabled",
100
+ "--semantic-color-fill-action-primary-strong-hover",
101
+ "--semantic-color-fill-action-primary-strong-pressed",
102
+ "--semantic-color-fill-action-primary-strong-rest",
103
+ "--semantic-color-fill-action-primary-subtle-hover",
104
+ "--semantic-color-fill-action-primary-subtle-pressed",
105
+ "--semantic-color-fill-action-primary-subtle-rest",
106
+ "--semantic-color-fill-action-secondary-hover",
107
+ "--semantic-color-fill-action-secondary-pressed",
108
+ "--semantic-color-fill-action-secondary-rest",
109
+ "--semantic-color-fill-action-selection-hover",
110
+ "--semantic-color-fill-action-selection-selected",
111
+ "--semantic-color-fill-action-selection-trail",
112
+ "--semantic-color-fill-action-status-attention-hover",
113
+ "--semantic-color-fill-action-status-attention-pressed",
114
+ "--semantic-color-fill-action-status-attention-rest",
115
+ "--semantic-color-fill-action-status-info-hover",
116
+ "--semantic-color-fill-action-status-info-pressed",
117
+ "--semantic-color-fill-action-status-info-rest",
118
+ "--semantic-color-fill-action-status-negative-strong-hover",
119
+ "--semantic-color-fill-action-status-negative-strong-pressed",
120
+ "--semantic-color-fill-action-status-negative-strong-rest",
121
+ "--semantic-color-fill-action-status-negative-subtle-hover",
122
+ "--semantic-color-fill-action-status-negative-subtle-pressed",
123
+ "--semantic-color-fill-action-status-negative-subtle-rest",
124
+ "--semantic-color-fill-action-status-positive-strong-hover",
125
+ "--semantic-color-fill-action-status-positive-strong-pressed",
126
+ "--semantic-color-fill-action-status-positive-strong-rest",
127
+ "--semantic-color-fill-action-status-positive-subtle-hover",
128
+ "--semantic-color-fill-action-status-positive-subtle-pressed",
129
+ "--semantic-color-fill-action-status-positive-subtle-rest",
130
+ "--semantic-color-fill-action-status-severe-hover",
131
+ "--semantic-color-fill-action-status-severe-pressed",
132
+ "--semantic-color-fill-action-status-severe-rest",
133
+ "--semantic-color-fill-static-accent-jade-strong",
134
+ "--semantic-color-fill-static-accent-jade-subtle",
135
+ "--semantic-color-fill-static-accent-lagoon-strong",
136
+ "--semantic-color-fill-static-accent-lagoon-subtle",
137
+ "--semantic-color-fill-static-accent-mauve-strong",
138
+ "--semantic-color-fill-static-accent-mauve-subtle",
139
+ "--semantic-color-fill-static-accent-seabreeze-strong",
140
+ "--semantic-color-fill-static-accent-seabreeze-subtle",
141
+ "--semantic-color-fill-static-attention-strong",
142
+ "--semantic-color-fill-static-attention-subtle",
143
+ "--semantic-color-fill-static-brand-base",
144
+ "--semantic-color-fill-static-brand-bold",
145
+ "--semantic-color-fill-static-brand-faint",
146
+ "--semantic-color-fill-static-brand-strong",
147
+ "--semantic-color-fill-static-brand-strongest",
148
+ "--semantic-color-fill-static-brand-subtle",
149
+ "--semantic-color-fill-static-info-strong",
150
+ "--semantic-color-fill-static-info-subtle",
151
+ "--semantic-color-fill-static-negative-strong",
152
+ "--semantic-color-fill-static-negative-subtle",
153
+ "--semantic-color-fill-static-neutral-base",
154
+ "--semantic-color-fill-static-neutral-faint",
155
+ "--semantic-color-fill-static-neutral-mono",
156
+ "--semantic-color-fill-static-neutral-strong",
157
+ "--semantic-color-fill-static-neutral-subtle",
158
+ "--semantic-color-fill-static-positive-strong",
159
+ "--semantic-color-fill-static-positive-subtle",
160
+ "--semantic-color-fill-static-severe-strong",
161
+ "--semantic-color-fill-static-severe-subtle",
162
+ "--semantic-color-fill-surface-canvas",
163
+ "--semantic-color-fill-surface-elevated",
164
+ "--semantic-color-fill-surface-sheet",
165
+ "--semantic-color-foreground-action-disabled",
166
+ "--semantic-color-foreground-action-primary-on-subtle-hover",
167
+ "--semantic-color-foreground-action-primary-on-subtle-pressed",
168
+ "--semantic-color-foreground-action-primary-on-subtle-rest",
169
+ "--semantic-color-foreground-action-secondary-hover",
170
+ "--semantic-color-foreground-action-secondary-pressed",
171
+ "--semantic-color-foreground-action-secondary-rest",
172
+ "--semantic-color-foreground-action-secondary-subtle-hover",
173
+ "--semantic-color-foreground-action-secondary-subtle-pressed",
174
+ "--semantic-color-foreground-action-secondary-subtle-rest",
175
+ "--semantic-color-foreground-action-status-attention-on-subtle-hover",
176
+ "--semantic-color-foreground-action-status-attention-on-subtle-pressed",
177
+ "--semantic-color-foreground-action-status-attention-on-subtle-rest",
178
+ "--semantic-color-foreground-action-status-info-on-subtle-hover",
179
+ "--semantic-color-foreground-action-status-info-on-subtle-pressed",
180
+ "--semantic-color-foreground-action-status-info-on-subtle-rest",
181
+ "--semantic-color-foreground-action-status-negative-on-subtle-hover",
182
+ "--semantic-color-foreground-action-status-negative-on-subtle-pressed",
183
+ "--semantic-color-foreground-action-status-negative-on-subtle-rest",
184
+ "--semantic-color-foreground-action-status-positive-on-subtle-hover",
185
+ "--semantic-color-foreground-action-status-positive-on-subtle-pressed",
186
+ "--semantic-color-foreground-action-status-positive-on-subtle-rest",
187
+ "--semantic-color-foreground-action-status-severe-on-subtle-hover",
188
+ "--semantic-color-foreground-action-status-severe-on-subtle-pressed",
189
+ "--semantic-color-foreground-action-status-severe-on-subtle-rest",
190
+ "--semantic-color-foreground-static-accent-jade-on-strong",
191
+ "--semantic-color-foreground-static-accent-jade-on-subtle",
192
+ "--semantic-color-foreground-static-accent-lagoon-on-strong",
193
+ "--semantic-color-foreground-static-accent-lagoon-on-subtle",
194
+ "--semantic-color-foreground-static-accent-mauve-on-strong",
195
+ "--semantic-color-foreground-static-accent-mauve-on-subtle",
196
+ "--semantic-color-foreground-static-accent-seabreeze-on-strong",
197
+ "--semantic-color-foreground-static-accent-seabreeze-on-subtle",
198
+ "--semantic-color-foreground-static-attention-on-strong",
199
+ "--semantic-color-foreground-static-attention-on-subtle",
200
+ "--semantic-color-foreground-static-brand-on-strong",
201
+ "--semantic-color-foreground-static-brand-on-subtle",
202
+ "--semantic-color-foreground-static-info-on-strong",
203
+ "--semantic-color-foreground-static-info-on-subtle",
204
+ "--semantic-color-foreground-static-negative-on-strong",
205
+ "--semantic-color-foreground-static-negative-on-subtle",
206
+ "--semantic-color-foreground-static-neutral-base",
207
+ "--semantic-color-foreground-static-neutral-bold",
208
+ "--semantic-color-foreground-static-neutral-faint",
209
+ "--semantic-color-foreground-static-neutral-mono",
210
+ "--semantic-color-foreground-static-neutral-strong",
211
+ "--semantic-color-foreground-static-neutral-subtle",
212
+ "--semantic-color-foreground-static-positive-on-strong",
213
+ "--semantic-color-foreground-static-positive-on-subtle",
214
+ "--semantic-color-foreground-static-severe-on-strong",
215
+ "--semantic-color-foreground-static-severe-on-subtle",
216
+ "--semantic-color-scrim-base",
217
+ "--semantic-color-scrim-faint",
218
+ "--semantic-color-scrim-light",
219
+ "--semantic-color-scrim-subtle",
220
+ "--semantic-color-stroke-action-disabled",
221
+ "--semantic-color-stroke-action-field-hover",
222
+ "--semantic-color-stroke-action-field-pressed",
223
+ "--semantic-color-stroke-action-field-rest",
224
+ "--semantic-color-stroke-action-primary-hover",
225
+ "--semantic-color-stroke-action-primary-pressed",
226
+ "--semantic-color-stroke-action-primary-rest",
227
+ "--semantic-color-stroke-action-secondary-hover",
228
+ "--semantic-color-stroke-action-secondary-pressed",
229
+ "--semantic-color-stroke-action-secondary-rest",
230
+ "--semantic-color-stroke-action-status-attention-hover",
231
+ "--semantic-color-stroke-action-status-attention-pressed",
232
+ "--semantic-color-stroke-action-status-attention-rest",
233
+ "--semantic-color-stroke-action-status-info-hover",
234
+ "--semantic-color-stroke-action-status-info-pressed",
235
+ "--semantic-color-stroke-action-status-info-rest",
236
+ "--semantic-color-stroke-action-status-negative-hover",
237
+ "--semantic-color-stroke-action-status-negative-pressed",
238
+ "--semantic-color-stroke-action-status-negative-rest",
239
+ "--semantic-color-stroke-action-status-positive-hover",
240
+ "--semantic-color-stroke-action-status-positive-pressed",
241
+ "--semantic-color-stroke-action-status-positive-rest",
242
+ "--semantic-color-stroke-action-status-severe-hover",
243
+ "--semantic-color-stroke-action-status-severe-pressed",
244
+ "--semantic-color-stroke-action-status-severe-rest",
245
+ "--semantic-color-stroke-focusring-base",
246
+ "--semantic-color-stroke-static-accent-jade-strong",
247
+ "--semantic-color-stroke-static-accent-jade-subtle",
248
+ "--semantic-color-stroke-static-accent-lagoon-strong",
249
+ "--semantic-color-stroke-static-accent-lagoon-subtle",
250
+ "--semantic-color-stroke-static-accent-mauve-strong",
251
+ "--semantic-color-stroke-static-accent-mauve-subtle",
252
+ "--semantic-color-stroke-static-accent-seabreeze-strong",
253
+ "--semantic-color-stroke-static-accent-seabreeze-subtle",
254
+ "--semantic-color-stroke-static-attention-strong",
255
+ "--semantic-color-stroke-static-attention-subtle",
256
+ "--semantic-color-stroke-static-info-strong",
257
+ "--semantic-color-stroke-static-info-subtle",
258
+ "--semantic-color-stroke-static-negative-strong",
259
+ "--semantic-color-stroke-static-negative-subtle",
260
+ "--semantic-color-stroke-static-neutral-base",
261
+ "--semantic-color-stroke-static-neutral-bold",
262
+ "--semantic-color-stroke-static-neutral-faint",
263
+ "--semantic-color-stroke-static-neutral-strong",
264
+ "--semantic-color-stroke-static-positive-strong",
265
+ "--semantic-color-stroke-static-positive-subtle",
266
+ "--semantic-color-stroke-static-severe-strong",
267
+ "--semantic-color-stroke-static-severe-subtle",
268
+ "--semantic-layout-units-accessibility-touch-target-aa-height",
269
+ "--semantic-layout-units-accessibility-touch-target-aa-width",
270
+ "--semantic-layout-units-accessibility-touch-target-aaa-height",
271
+ "--semantic-layout-units-accessibility-touch-target-aaa-width",
272
+ "--semantic-layout-units-accessibility-touch-target-desktop-only-height",
273
+ "--semantic-layout-units-accessibility-touch-target-desktop-only-width",
274
+ "--semantic-layout-units-borderwidth-base",
275
+ "--semantic-layout-units-borderwidth-medium",
276
+ "--semantic-layout-units-borderwidth-thick",
277
+ "--semantic-layout-units-borderwidth-thin",
278
+ "--semantic-layout-units-borderwidth-xthick",
279
+ "--semantic-layout-units-borderwidth-xthin",
280
+ "--semantic-layout-units-borderwidth-xxthick",
281
+ "--semantic-layout-units-cornerradius-base",
282
+ "--semantic-layout-units-cornerradius-full",
283
+ "--semantic-layout-units-cornerradius-large",
284
+ "--semantic-layout-units-cornerradius-medium",
285
+ "--semantic-layout-units-cornerradius-small",
286
+ "--semantic-layout-units-cornerradius-xlarge",
287
+ "--semantic-layout-units-cornerradius-xsmall",
288
+ "--semantic-layout-units-gap-base",
289
+ "--semantic-layout-units-gap-medium",
290
+ "--semantic-layout-units-gap-relaxed",
291
+ "--semantic-layout-units-gap-tight",
292
+ "--semantic-layout-units-gap-wide",
293
+ "--semantic-layout-units-gap-xtight",
294
+ "--semantic-layout-units-gap-xxtight",
295
+ "--semantic-layout-units-gap-xxxtight",
296
+ "--semantic-layout-units-padding-base",
297
+ "--semantic-layout-units-padding-collosal",
298
+ "--semantic-layout-units-padding-ginormous",
299
+ "--semantic-layout-units-padding-medium",
300
+ "--semantic-layout-units-padding-relaxed",
301
+ "--semantic-layout-units-padding-tight",
302
+ "--semantic-layout-units-padding-wide",
303
+ "--semantic-layout-units-padding-xtight",
304
+ "--semantic-layout-units-padding-xwide",
305
+ "--semantic-layout-units-padding-xxtight",
306
+ "--semantic-layout-units-padding-xxwide",
307
+ "--semantic-layout-units-padding-xxxtight",
308
+ "--semantic-type-family-brand",
309
+ "--semantic-type-font-size-4xl",
310
+ "--semantic-type-font-size-5xl",
311
+ "--semantic-type-font-size-6xl",
312
+ "--semantic-type-font-size-l",
313
+ "--semantic-type-font-size-m",
314
+ "--semantic-type-font-size-r",
315
+ "--semantic-type-font-size-s",
316
+ "--semantic-type-font-size-xl",
317
+ "--semantic-type-font-size-xs",
318
+ "--semantic-type-font-size-xxl",
319
+ "--semantic-type-font-size-xxs",
320
+ "--semantic-type-font-size-xxxl",
321
+ "--semantic-type-font-size-xxxs",
322
+ "--semantic-type-letter-spacing-compact",
323
+ "--semantic-type-letter-spacing-extraspacious",
324
+ "--semantic-type-letter-spacing-spacious",
325
+ "--semantic-type-letter-spacing-wide",
326
+ "--semantic-type-line-height-4xl-single",
327
+ "--semantic-type-line-height-5xl-single",
328
+ "--semantic-type-line-height-6xl-single",
329
+ "--semantic-type-line-height-l-single",
330
+ "--semantic-type-line-height-m-relaxed",
331
+ "--semantic-type-line-height-m-single",
332
+ "--semantic-type-line-height-r-single",
333
+ "--semantic-type-line-height-s-single",
334
+ "--semantic-type-line-height-s-tight",
335
+ "--semantic-type-line-height-xl-single",
336
+ "--semantic-type-line-height-xs-single",
337
+ "--semantic-type-line-height-xs-tight",
338
+ "--semantic-type-line-height-xxl-single",
339
+ "--semantic-type-line-height-xxs-single",
340
+ "--semantic-type-line-height-xxs-tight",
341
+ "--semantic-type-line-height-xxxl-single",
342
+ "--semantic-type-line-height-xxxs-single",
343
+ "--semantic-type-line-height-xxxs-tight",
344
+ "--semantic-type-weight-bold",
345
+ "--semantic-type-weight-light",
346
+ "--semantic-type-weight-medium",
347
+ "--semantic-type-weight-regular",
348
+ "--semantic-type-weight-semibold",
349
+ "--shell-layout-sheet-padding-bottom",
350
+ "--shell-layout-sheet-padding-horizontal",
351
+ "--shell-layout-sheet-padding-top",
352
+ "--shell-layout-topnav-height",
353
+ "--shell-layout-topnav-padding-horizontal",
354
+ "--shell-layout-topnav-padding-vertical"
355
+ ]
356
+ }
package/dist/layout-contextual.css CHANGED
@@ -1,9 +1,18 @@
1
- /**
2
- * contextual-layout-units — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — COMPONENT INTERNALS
4
+ ==========================================================================
5
+
6
+ Per-component metrics (Button, Card, NavItem, Page, focus ring).
7
+
8
+ This repo's own components use these. Product code generally should not —
9
+ prefer layout.css, which is the general spacing contract. These exist so a
10
+ component's geometry can be tuned without moving the whole scale.
11
+
12
+ Declares 28 custom properties.
13
+ Generated — do not edit. Run `npm run build-tokens`.
14
+ ==========================================================================
15
+ */
7
16
  :root {
8
17
  --contextual-layout-units-button-border-width-hover: 1px;
9
18
  --contextual-layout-units-button-border-width-rest: 0.75px;
package/dist/layout-responsive.css CHANGED
@@ -1,9 +1,23 @@
1
- /**
2
- * shell-layout — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
5
+
6
+ The only layout tokens that change by breakpoint. Name these freely.
7
+
8
+ Sheet padding and TopNav padding/height really do tighten on smaller
9
+ screens, so they keep a Desktop/Tablet/Mobile axis and are emitted with
10
+ media queries. Everything else in layout.css and layout-contextual.css is
11
+ single-valued: of 69 layout tokens only these varied, so the other 66 lost
12
+ the mode axis on 2026-09-14 rather than carry the same number three times.
13
+
14
+ A developer cannot derive these from a responsive grid. The grid governs
15
+ columns; it says nothing about the chrome's padding.
16
+
17
+ Declares 14 custom properties.
18
+ Generated — do not edit. Run `npm run build-tokens`.
19
+ ==========================================================================
20
+ */
7
21
  :root {
8
22
  --shell-layout-sheet-padding-bottom: 64px;
9
23
  --shell-layout-sheet-padding-horizontal: 36px;
package/dist/layout.css CHANGED
@@ -1,9 +1,21 @@
1
- /**
2
- * semantic-layout-units — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
5
+
6
+ Spacing, radii and border widths. Name these freely.
7
+
8
+ Values already carry their unit, so use them directly — do NOT wrap in
9
+ calc(... * 1px). That produces calc(4px * 1px), which is not a length, so
10
+ the browser silently drops the declaration.
11
+
12
+ Breakpoints are handled by media query inside this file rather than by
13
+ putting the breakpoint in the property name, so one name works responsively.
14
+
15
+ Declares 40 custom properties.
16
+ Generated — do not edit. Run `npm run build-tokens`.
17
+ ==========================================================================
18
+ */
7
19
  :root {
8
20
  --semantic-layout-units-accessibility-touch-target-aa-height: 44px;
9
21
  --semantic-layout-units-accessibility-touch-target-aa-width: 44px;
package/dist/motion.css CHANGED
@@ -1,7 +1,21 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ Durations and easings. Name these freely.
7
+
8
+ These are NOT in the Figma Variables panel — the panel has zero motion
9
+ variables. Their source of truth is docs/design-system-spec.md §2, and
10
+ scripts/sync-motion-tokens.js generates this file from it.
11
+
12
+ Consequence worth knowing: anyone rebuilding tokens from a Figma export
13
+ alone gets no motion at all, and no warning. Consume the package.
14
+
15
+ Declares 17 custom properties.
16
+ Generated — do not edit. Run `npm run build-tokens`.
17
+ ==========================================================================
18
+ */
5
19
  :root {
6
20
  --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
7
21
  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
package/dist/primitives.css CHANGED
@@ -1,7 +1,27 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — INFRASTRUCTURE
4
+ ==========================================================================
4
5
 
6
+ The raw colour ramps. NOT part of the token contract.
7
+
8
+ You must LOAD this file — every semantic token resolves through it, so
9
+ without it all colour resolves to nothing and the page renders unstyled
10
+ with no console error. But product code should not NAME these.
11
+
12
+ The reason is a consequence, not a rule: Primitive: Color has exactly ONE
13
+ mode, and themes/midnight.css declares zero primitives. So a primitive
14
+ holds one value forever. `var(--primitive-color-brand-400)` stays that
15
+ blue in Midnight Mode; `var(--semantic-color-fill-action-primary-strong-rest)`
16
+ flips. Reach for a primitive only when you specifically want a value that
17
+ does NOT respond to the theme.
18
+
19
+ Nothing blocks you. It is an escape hatch with a stated cost.
20
+
21
+ Declares 352 custom properties.
22
+ Generated — do not edit. Run `npm run build-tokens`.
23
+ ==========================================================================
24
+ */
5
25
  :root {
6
26
  --primitive-color-cool-neutral-0: #ffffff;
7
27
  --primitive-color-cool-neutral-10: #fafafa;
package/dist/themes/light.css CHANGED
@@ -1,7 +1,21 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ The colour contract, Light Mode. Name these freely.
7
+
8
+ Load primitives.css FIRST; every file below resolves through it.
9
+
10
+ themes/midnight.css declares the SAME names with inverted values, so a
11
+ component names a colour once and both modes resolve by selector. Never
12
+ put a mode in a property name — that form came from tokens.css, retired
13
+ 2026-09-03, and resolves to nothing.
14
+
15
+ Declares 169 custom properties.
16
+ Generated — do not edit. Run `npm run build-tokens`.
17
+ ==========================================================================
18
+ */
5
19
  :root, [data-theme="light"] {
6
20
  --semantic-color-fill-surface-canvas: var(--primitive-color-cool-neutral-10);
7
21
  --semantic-color-fill-surface-sheet: var(--primitive-color-cool-neutral-0);
package/dist/themes/midnight.css CHANGED
@@ -1,7 +1,23 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
4
5
 
6
+ The colour contract, Midnight Mode. Identical names to themes/light.css.
7
+
8
+ Pathway's dark mode is called Midnight Mode. Both selectors are emitted:
9
+ [data-theme="midnight"] is the Pathway name, [data-theme="dark"] is what
10
+ every framework and prefers-color-scheme uses, so a consumer does not have
11
+ to learn our vocabulary to switch themes.
12
+
13
+ On the graded ladder the VALUES invert while the NAMES hold: Faint is
14
+ still the lightest-touch step even though here it is a dark near-ground.
15
+ White, XLight and Black are inversion anchors and keep their value.
16
+
17
+ Declares 169 custom properties.
18
+ Generated — do not edit. Run `npm run build-tokens`.
19
+ ==========================================================================
20
+ */
5
21
  [data-theme="midnight"], [data-theme="dark"] {
6
22
  --semantic-color-fill-surface-canvas: var(--primitive-color-brand-900);
7
23
  --semantic-color-fill-surface-sheet: var(--primitive-color-brand-800);
package/dist/type.css CHANGED
@@ -1,9 +1,26 @@
1
- /**
2
- * semantic-type — one name per token, breakpoint resolved by media query.
3
- * Generated by style-dictionary.config.js. Do not edit.
4
- *
5
- * :root is the desktop value. Narrower breakpoints override only what differs.
6
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — CONTRACT
4
+ ==========================================================================
5
+
6
+ The type SCALE. Name these freely.
7
+
8
+ There are no composite text styles here and no .pw-type-* classes; both
9
+ were retired 2026-09-03. Compose five properties at the call site:
10
+
11
+ font-family: var(--semantic-type-family-brand);
12
+ font-size: var(--semantic-type-font-size-m);
13
+ font-weight: var(--semantic-type-weight-semibold);
14
+ line-height: var(--semantic-type-line-height-m-single);
15
+ letter-spacing: var(--semantic-type-letter-spacing-compact);
16
+
17
+ The 111 named styles still exist as Figma text styles, which is where a
18
+ designer applies them.
19
+
20
+ Declares 41 custom properties.
21
+ Generated — do not edit. Run `npm run build-tokens`.
22
+ ==========================================================================
23
+ */
7
24
  :root {
8
25
  --semantic-type-family-brand: Red Hat Text;
9
26
  --semantic-type-font-size-4xl: 40px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helloimjolopez-pathway/pathway-tokens",
3
- "version": "7.0.0",
3
+ "version": "7.0.1",
4
4
  "description": "Pathway Design System tokens — CSS custom properties, JS export, and DTCG JSON",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",