@helloimjolopez-pathway/pathway-tokens 9.0.0 → 10.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 +1 -1
- package/components/sidenav/sidenav.jsx +1 -1
- package/dist/README.md +12 -12
- package/dist/brands/newco/index.css +9 -0
- package/dist/brands/newco/layout-contextual.css +42 -0
- package/dist/brands/newco/primitives.css +435 -0
- package/dist/brands/newco/themes/dark.css +212 -0
- package/dist/brands/newco/themes/light.css +212 -0
- package/dist/brands/newco/tokens.js +9836 -0
- package/dist/breakpoints.css +2 -2
- package/dist/contract.json +138 -31
- package/dist/index.css +14 -0
- package/dist/layout-contextual.css +25 -24
- package/dist/layout-responsive.css +17 -9
- package/dist/layout.css +44 -8
- package/dist/motion.css +8 -4
- package/dist/primitives.css +363 -168
- package/dist/themes/light.css +179 -112
- package/dist/themes/midnight.css +201 -134
- package/dist/tokens.js +9495 -5122
- package/dist/tokens.json +9011 -3443
- package/dist/type.css +2 -4
- package/package.json +12 -4
package/dist/breakpoints.css
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
==========================================================================
|
|
11
11
|
*/
|
|
12
12
|
:root {
|
|
13
|
-
--breakpoints-desktop-1920px: 1920px;
|
|
14
13
|
--breakpoints-desktop-1440px: 1440px;
|
|
14
|
+
--breakpoints-desktop-1920px: 1920px;
|
|
15
|
+
--breakpoints-mobile-393px: 393px;
|
|
15
16
|
--breakpoints-tablet-1024px: 1024px;
|
|
16
17
|
--breakpoints-tablet-768px: 768px;
|
|
17
|
-
--breakpoints-mobile-393px: 393px;
|
|
18
18
|
}
|
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": "
|
|
4
|
-
"generated": "2026-09-
|
|
3
|
+
"version": "10.0.0",
|
|
4
|
+
"generated": "2026-09-30",
|
|
5
5
|
"counts": {
|
|
6
|
-
"contract":
|
|
7
|
-
"infrastructure":
|
|
8
|
-
"declarationsAcrossAllFiles":
|
|
6
|
+
"contract": 360,
|
|
7
|
+
"infrastructure": 582,
|
|
8
|
+
"declarationsAcrossAllFiles": 1152
|
|
9
9
|
},
|
|
10
10
|
"loadOrder": [
|
|
11
11
|
"primitives.css",
|
|
@@ -21,49 +21,49 @@
|
|
|
21
21
|
"primitives.css": {
|
|
22
22
|
"contract": false,
|
|
23
23
|
"mustLoad": true,
|
|
24
|
-
"count":
|
|
24
|
+
"count": 548,
|
|
25
25
|
"role": "Raw colour ramps. Load it; do not name it."
|
|
26
26
|
},
|
|
27
27
|
"themes/light.css": {
|
|
28
28
|
"contract": true,
|
|
29
29
|
"mustLoad": true,
|
|
30
|
-
"count":
|
|
30
|
+
"count": 210,
|
|
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": 210,
|
|
37
37
|
"role": "Colour contract, Midnight Mode. Same names as light."
|
|
38
38
|
},
|
|
39
39
|
"type.css": {
|
|
40
40
|
"contract": true,
|
|
41
41
|
"mustLoad": true,
|
|
42
|
-
"count":
|
|
42
|
+
"count": 39,
|
|
43
43
|
"role": "Type scale. Compose from these."
|
|
44
44
|
},
|
|
45
45
|
"layout.css": {
|
|
46
46
|
"contract": true,
|
|
47
47
|
"mustLoad": true,
|
|
48
|
-
"count":
|
|
48
|
+
"count": 76,
|
|
49
49
|
"role": "Spacing, radii, border widths."
|
|
50
50
|
},
|
|
51
51
|
"layout-contextual.css": {
|
|
52
52
|
"contract": false,
|
|
53
53
|
"mustLoad": false,
|
|
54
|
-
"count":
|
|
54
|
+
"count": 34,
|
|
55
55
|
"role": "Per-component metrics. This repo's components use these."
|
|
56
56
|
},
|
|
57
57
|
"motion.css": {
|
|
58
58
|
"contract": true,
|
|
59
59
|
"mustLoad": true,
|
|
60
|
-
"count":
|
|
60
|
+
"count": 21,
|
|
61
61
|
"role": "Durations and easings."
|
|
62
62
|
},
|
|
63
63
|
"layout-responsive.css": {
|
|
64
64
|
"contract": true,
|
|
65
65
|
"mustLoad": true,
|
|
66
|
-
"count":
|
|
66
|
+
"count": 9,
|
|
67
67
|
"role": "Sheet and TopNav padding. The only layout tokens with media queries."
|
|
68
68
|
},
|
|
69
69
|
"breakpoints.css": {
|
|
@@ -79,6 +79,10 @@
|
|
|
79
79
|
"--breakpoints-mobile-393px",
|
|
80
80
|
"--breakpoints-tablet-1024px",
|
|
81
81
|
"--breakpoints-tablet-768px",
|
|
82
|
+
"--elevation-lift",
|
|
83
|
+
"--elevation-overlay",
|
|
84
|
+
"--elevation-sheet",
|
|
85
|
+
"--elevation-widget",
|
|
82
86
|
"--motion-duration-1",
|
|
83
87
|
"--motion-duration-2",
|
|
84
88
|
"--motion-duration-3",
|
|
@@ -91,19 +95,28 @@
|
|
|
91
95
|
"--motion-duration-loop-fast",
|
|
92
96
|
"--motion-easing-accelerate",
|
|
93
97
|
"--motion-easing-accordion",
|
|
98
|
+
"--motion-easing-breath",
|
|
99
|
+
"--motion-easing-burst",
|
|
94
100
|
"--motion-easing-decelerate",
|
|
95
101
|
"--motion-easing-emphasized",
|
|
102
|
+
"--motion-easing-inout",
|
|
96
103
|
"--motion-easing-linear",
|
|
97
104
|
"--motion-easing-spring",
|
|
105
|
+
"--motion-easing-spring-soft",
|
|
98
106
|
"--motion-easing-standard",
|
|
99
|
-
"--responsive-layout-sheet-cornerradius
|
|
107
|
+
"--responsive-layout-sheet-corner-radius-cornerradius",
|
|
108
|
+
"--responsive-layout-sheet-padding-bottom",
|
|
100
109
|
"--responsive-layout-sheet-padding-horizontal",
|
|
101
110
|
"--responsive-layout-sheet-padding-top",
|
|
111
|
+
"--responsive-layout-sheetcontainer-padding-horizontal",
|
|
112
|
+
"--responsive-layout-sheetcontainer-padding-top",
|
|
102
113
|
"--responsive-layout-topnav-gap-horizontal",
|
|
103
|
-
"--responsive-layout-topnav-height",
|
|
104
114
|
"--responsive-layout-topnav-padding-horizontal",
|
|
105
115
|
"--responsive-layout-topnav-padding-vertical",
|
|
106
116
|
"--semantic-color-fill-action-disabled",
|
|
117
|
+
"--semantic-color-fill-action-ghost-hover",
|
|
118
|
+
"--semantic-color-fill-action-ghost-pressed",
|
|
119
|
+
"--semantic-color-fill-action-ghost-rest",
|
|
107
120
|
"--semantic-color-fill-action-primary-strong-hover",
|
|
108
121
|
"--semantic-color-fill-action-primary-strong-pressed",
|
|
109
122
|
"--semantic-color-fill-action-primary-strong-rest",
|
|
@@ -114,32 +127,66 @@
|
|
|
114
127
|
"--semantic-color-fill-action-secondary-pressed",
|
|
115
128
|
"--semantic-color-fill-action-secondary-rest",
|
|
116
129
|
"--semantic-color-fill-action-selection-hover",
|
|
130
|
+
"--semantic-color-fill-action-selection-indicator",
|
|
117
131
|
"--semantic-color-fill-action-selection-selected",
|
|
118
132
|
"--semantic-color-fill-action-selection-trail",
|
|
133
|
+
"--semantic-color-fill-action-status-info-strong-hover",
|
|
134
|
+
"--semantic-color-fill-action-status-info-strong-pressed",
|
|
135
|
+
"--semantic-color-fill-action-status-info-strong-rest",
|
|
136
|
+
"--semantic-color-fill-action-status-info-subtle-hover",
|
|
137
|
+
"--semantic-color-fill-action-status-info-subtle-pressed",
|
|
138
|
+
"--semantic-color-fill-action-status-info-subtle-rest",
|
|
119
139
|
"--semantic-color-fill-action-status-negative-strong-hover",
|
|
120
140
|
"--semantic-color-fill-action-status-negative-strong-pressed",
|
|
121
141
|
"--semantic-color-fill-action-status-negative-strong-rest",
|
|
122
142
|
"--semantic-color-fill-action-status-negative-subtle-hover",
|
|
123
143
|
"--semantic-color-fill-action-status-negative-subtle-pressed",
|
|
124
144
|
"--semantic-color-fill-action-status-negative-subtle-rest",
|
|
145
|
+
"--semantic-color-fill-action-status-neutral-strong-hover",
|
|
146
|
+
"--semantic-color-fill-action-status-neutral-strong-pressed",
|
|
147
|
+
"--semantic-color-fill-action-status-neutral-strong-rest",
|
|
148
|
+
"--semantic-color-fill-action-status-neutral-subtle-hover",
|
|
149
|
+
"--semantic-color-fill-action-status-neutral-subtle-pressed",
|
|
150
|
+
"--semantic-color-fill-action-status-neutral-subtle-rest",
|
|
125
151
|
"--semantic-color-fill-action-status-positive-strong-hover",
|
|
126
152
|
"--semantic-color-fill-action-status-positive-strong-pressed",
|
|
127
153
|
"--semantic-color-fill-action-status-positive-strong-rest",
|
|
128
154
|
"--semantic-color-fill-action-status-positive-subtle-hover",
|
|
129
155
|
"--semantic-color-fill-action-status-positive-subtle-pressed",
|
|
130
156
|
"--semantic-color-fill-action-status-positive-subtle-rest",
|
|
157
|
+
"--semantic-color-fill-chart-sequential-01",
|
|
158
|
+
"--semantic-color-fill-chart-sequential-02",
|
|
159
|
+
"--semantic-color-fill-chart-sequential-03",
|
|
160
|
+
"--semantic-color-fill-chart-sequential-04",
|
|
161
|
+
"--semantic-color-fill-chart-sequential-05",
|
|
162
|
+
"--semantic-color-fill-chart-sequential-06",
|
|
163
|
+
"--semantic-color-fill-chart-sequential-07",
|
|
164
|
+
"--semantic-color-fill-chart-sequential-08",
|
|
165
|
+
"--semantic-color-fill-chart-sequential-09",
|
|
166
|
+
"--semantic-color-fill-chart-sequential-10",
|
|
167
|
+
"--semantic-color-fill-chart-sequential-11",
|
|
168
|
+
"--semantic-color-fill-chart-sequential-12",
|
|
169
|
+
"--semantic-color-fill-chart-sequential-13",
|
|
170
|
+
"--semantic-color-fill-chart-sequential-14",
|
|
171
|
+
"--semantic-color-fill-chart-sequential-15",
|
|
172
|
+
"--semantic-color-fill-chart-sequential-anchor-end",
|
|
173
|
+
"--semantic-color-fill-chart-sequential-anchor-start",
|
|
174
|
+
"--semantic-color-fill-shadow-dropshadow",
|
|
175
|
+
"--semantic-color-fill-static-accent-citrine-strong",
|
|
176
|
+
"--semantic-color-fill-static-accent-citrine-subtle",
|
|
131
177
|
"--semantic-color-fill-static-accent-jade-strong",
|
|
132
178
|
"--semantic-color-fill-static-accent-jade-subtle",
|
|
133
179
|
"--semantic-color-fill-static-accent-lagoon-strong",
|
|
134
180
|
"--semantic-color-fill-static-accent-lagoon-subtle",
|
|
135
181
|
"--semantic-color-fill-static-accent-mauve-strong",
|
|
136
182
|
"--semantic-color-fill-static-accent-mauve-subtle",
|
|
183
|
+
"--semantic-color-fill-static-accent-rose-strong",
|
|
184
|
+
"--semantic-color-fill-static-accent-rose-subtle",
|
|
137
185
|
"--semantic-color-fill-static-accent-seabreeze-strong",
|
|
138
186
|
"--semantic-color-fill-static-accent-seabreeze-subtle",
|
|
139
187
|
"--semantic-color-fill-static-attention-strong",
|
|
140
188
|
"--semantic-color-fill-static-attention-subtle",
|
|
141
189
|
"--semantic-color-fill-static-brand-base",
|
|
142
|
-
"--semantic-color-fill-static-brand-bold",
|
|
143
190
|
"--semantic-color-fill-static-brand-faint",
|
|
144
191
|
"--semantic-color-fill-static-brand-strong",
|
|
145
192
|
"--semantic-color-fill-static-brand-strongest",
|
|
@@ -149,7 +196,6 @@
|
|
|
149
196
|
"--semantic-color-fill-static-negative-strong",
|
|
150
197
|
"--semantic-color-fill-static-negative-subtle",
|
|
151
198
|
"--semantic-color-fill-static-neutral-base",
|
|
152
|
-
"--semantic-color-fill-static-neutral-bold",
|
|
153
199
|
"--semantic-color-fill-static-neutral-faint",
|
|
154
200
|
"--semantic-color-fill-static-neutral-mono",
|
|
155
201
|
"--semantic-color-fill-static-neutral-strong",
|
|
@@ -159,8 +205,13 @@
|
|
|
159
205
|
"--semantic-color-fill-static-severe-strong",
|
|
160
206
|
"--semantic-color-fill-static-severe-subtle",
|
|
161
207
|
"--semantic-color-fill-surface-canvas",
|
|
208
|
+
"--semantic-color-fill-surface-chrome",
|
|
162
209
|
"--semantic-color-fill-surface-elevated",
|
|
210
|
+
"--semantic-color-fill-surface-overlay",
|
|
163
211
|
"--semantic-color-foreground-action-disabled",
|
|
212
|
+
"--semantic-color-foreground-action-ghost-hover",
|
|
213
|
+
"--semantic-color-foreground-action-ghost-pressed",
|
|
214
|
+
"--semantic-color-foreground-action-ghost-rest",
|
|
164
215
|
"--semantic-color-foreground-action-primary-on-strong",
|
|
165
216
|
"--semantic-color-foreground-action-primary-on-subtle-hover",
|
|
166
217
|
"--semantic-color-foreground-action-primary-on-subtle-pressed",
|
|
@@ -168,20 +219,32 @@
|
|
|
168
219
|
"--semantic-color-foreground-action-secondary-hover",
|
|
169
220
|
"--semantic-color-foreground-action-secondary-pressed",
|
|
170
221
|
"--semantic-color-foreground-action-secondary-rest",
|
|
222
|
+
"--semantic-color-foreground-action-status-info-on-strong",
|
|
223
|
+
"--semantic-color-foreground-action-status-info-on-subtle-hover",
|
|
224
|
+
"--semantic-color-foreground-action-status-info-on-subtle-pressed",
|
|
225
|
+
"--semantic-color-foreground-action-status-info-on-subtle-rest",
|
|
171
226
|
"--semantic-color-foreground-action-status-negative-on-strong",
|
|
172
227
|
"--semantic-color-foreground-action-status-negative-on-subtle-hover",
|
|
173
228
|
"--semantic-color-foreground-action-status-negative-on-subtle-pressed",
|
|
174
229
|
"--semantic-color-foreground-action-status-negative-on-subtle-rest",
|
|
230
|
+
"--semantic-color-foreground-action-status-neutral-on-strong",
|
|
231
|
+
"--semantic-color-foreground-action-status-neutral-on-subtle-hover",
|
|
232
|
+
"--semantic-color-foreground-action-status-neutral-on-subtle-pressed",
|
|
233
|
+
"--semantic-color-foreground-action-status-neutral-on-subtle-rest",
|
|
175
234
|
"--semantic-color-foreground-action-status-positive-on-strong",
|
|
176
235
|
"--semantic-color-foreground-action-status-positive-on-subtle-hover",
|
|
177
236
|
"--semantic-color-foreground-action-status-positive-on-subtle-pressed",
|
|
178
237
|
"--semantic-color-foreground-action-status-positive-on-subtle-rest",
|
|
238
|
+
"--semantic-color-foreground-static-accent-citrine-on-strong",
|
|
239
|
+
"--semantic-color-foreground-static-accent-citrine-on-subtle",
|
|
179
240
|
"--semantic-color-foreground-static-accent-jade-on-strong",
|
|
180
241
|
"--semantic-color-foreground-static-accent-jade-on-subtle",
|
|
181
242
|
"--semantic-color-foreground-static-accent-lagoon-on-strong",
|
|
182
243
|
"--semantic-color-foreground-static-accent-lagoon-on-subtle",
|
|
183
244
|
"--semantic-color-foreground-static-accent-mauve-on-strong",
|
|
184
245
|
"--semantic-color-foreground-static-accent-mauve-on-subtle",
|
|
246
|
+
"--semantic-color-foreground-static-accent-rose-on-strong",
|
|
247
|
+
"--semantic-color-foreground-static-accent-rose-on-subtle",
|
|
185
248
|
"--semantic-color-foreground-static-accent-seabreeze-on-strong",
|
|
186
249
|
"--semantic-color-foreground-static-accent-seabreeze-on-subtle",
|
|
187
250
|
"--semantic-color-foreground-static-attention-on-strong",
|
|
@@ -210,27 +273,37 @@
|
|
|
210
273
|
"--semantic-color-stroke-action-field-hover",
|
|
211
274
|
"--semantic-color-stroke-action-field-pressed",
|
|
212
275
|
"--semantic-color-stroke-action-field-rest",
|
|
213
|
-
"--semantic-color-stroke-action-
|
|
214
|
-
"--semantic-color-stroke-action-
|
|
215
|
-
"--semantic-color-stroke-action-
|
|
276
|
+
"--semantic-color-stroke-action-ghost-hover",
|
|
277
|
+
"--semantic-color-stroke-action-ghost-pressed",
|
|
278
|
+
"--semantic-color-stroke-action-ghost-rest",
|
|
279
|
+
"--semantic-color-stroke-action-primary-strong-hover",
|
|
280
|
+
"--semantic-color-stroke-action-primary-strong-pressed",
|
|
281
|
+
"--semantic-color-stroke-action-primary-strong-rest",
|
|
282
|
+
"--semantic-color-stroke-action-primary-subtle-hover",
|
|
283
|
+
"--semantic-color-stroke-action-primary-subtle-pressed",
|
|
284
|
+
"--semantic-color-stroke-action-primary-subtle-rest",
|
|
216
285
|
"--semantic-color-stroke-action-secondary-hover",
|
|
217
286
|
"--semantic-color-stroke-action-secondary-pressed",
|
|
218
287
|
"--semantic-color-stroke-action-secondary-rest",
|
|
288
|
+
"--semantic-color-stroke-action-status-info-hover",
|
|
289
|
+
"--semantic-color-stroke-action-status-info-pressed",
|
|
290
|
+
"--semantic-color-stroke-action-status-info-rest",
|
|
219
291
|
"--semantic-color-stroke-action-status-negative-hover",
|
|
220
292
|
"--semantic-color-stroke-action-status-negative-pressed",
|
|
221
293
|
"--semantic-color-stroke-action-status-negative-rest",
|
|
294
|
+
"--semantic-color-stroke-action-status-neutral-hover",
|
|
295
|
+
"--semantic-color-stroke-action-status-neutral-pressed",
|
|
296
|
+
"--semantic-color-stroke-action-status-neutral-rest",
|
|
222
297
|
"--semantic-color-stroke-action-status-positive-hover",
|
|
223
298
|
"--semantic-color-stroke-action-status-positive-pressed",
|
|
224
299
|
"--semantic-color-stroke-action-status-positive-rest",
|
|
225
300
|
"--semantic-color-stroke-focusring-base",
|
|
226
|
-
"--semantic-color-stroke-static-accent-
|
|
227
|
-
"--semantic-color-stroke-static-accent-jade
|
|
228
|
-
"--semantic-color-stroke-static-accent-lagoon
|
|
229
|
-
"--semantic-color-stroke-static-accent-
|
|
230
|
-
"--semantic-color-stroke-static-accent-
|
|
231
|
-
"--semantic-color-stroke-static-accent-
|
|
232
|
-
"--semantic-color-stroke-static-accent-seabreeze-strong",
|
|
233
|
-
"--semantic-color-stroke-static-accent-seabreeze-subtle",
|
|
301
|
+
"--semantic-color-stroke-static-accent-citrine",
|
|
302
|
+
"--semantic-color-stroke-static-accent-jade",
|
|
303
|
+
"--semantic-color-stroke-static-accent-lagoon",
|
|
304
|
+
"--semantic-color-stroke-static-accent-mauve",
|
|
305
|
+
"--semantic-color-stroke-static-accent-rose",
|
|
306
|
+
"--semantic-color-stroke-static-accent-seabreeze",
|
|
234
307
|
"--semantic-color-stroke-static-attention-strong",
|
|
235
308
|
"--semantic-color-stroke-static-attention-subtle",
|
|
236
309
|
"--semantic-color-stroke-static-info-strong",
|
|
@@ -262,7 +335,6 @@
|
|
|
262
335
|
"--semantic-layout-units-cornerradius-base",
|
|
263
336
|
"--semantic-layout-units-cornerradius-full",
|
|
264
337
|
"--semantic-layout-units-cornerradius-large",
|
|
265
|
-
"--semantic-layout-units-cornerradius-medium",
|
|
266
338
|
"--semantic-layout-units-cornerradius-small",
|
|
267
339
|
"--semantic-layout-units-cornerradius-xlarge",
|
|
268
340
|
"--semantic-layout-units-cornerradius-xsmall",
|
|
@@ -280,12 +352,49 @@
|
|
|
280
352
|
"--semantic-layout-units-padding-medium",
|
|
281
353
|
"--semantic-layout-units-padding-relaxed",
|
|
282
354
|
"--semantic-layout-units-padding-tight",
|
|
355
|
+
"--semantic-layout-units-padding-tightest",
|
|
283
356
|
"--semantic-layout-units-padding-wide",
|
|
284
357
|
"--semantic-layout-units-padding-xtight",
|
|
285
358
|
"--semantic-layout-units-padding-xwide",
|
|
286
359
|
"--semantic-layout-units-padding-xxtight",
|
|
287
360
|
"--semantic-layout-units-padding-xxwide",
|
|
288
361
|
"--semantic-layout-units-padding-xxxtight",
|
|
362
|
+
"--semantic-layout-units-shadow-card-hover-blur",
|
|
363
|
+
"--semantic-layout-units-shadow-card-hover-spread",
|
|
364
|
+
"--semantic-layout-units-shadow-card-hover-x",
|
|
365
|
+
"--semantic-layout-units-shadow-card-hover-y",
|
|
366
|
+
"--semantic-layout-units-shadow-card-pressed-blur",
|
|
367
|
+
"--semantic-layout-units-shadow-card-pressed-spread",
|
|
368
|
+
"--semantic-layout-units-shadow-card-pressed-x",
|
|
369
|
+
"--semantic-layout-units-shadow-card-pressed-y",
|
|
370
|
+
"--semantic-layout-units-shadow-card-rest-blur",
|
|
371
|
+
"--semantic-layout-units-shadow-card-rest-spread",
|
|
372
|
+
"--semantic-layout-units-shadow-card-rest-x",
|
|
373
|
+
"--semantic-layout-units-shadow-card-rest-y",
|
|
374
|
+
"--semantic-layout-units-shadow-lift-blur",
|
|
375
|
+
"--semantic-layout-units-shadow-lift-spread",
|
|
376
|
+
"--semantic-layout-units-shadow-lift-x",
|
|
377
|
+
"--semantic-layout-units-shadow-lift-y",
|
|
378
|
+
"--semantic-layout-units-shadow-overlay-blur",
|
|
379
|
+
"--semantic-layout-units-shadow-overlay-spread",
|
|
380
|
+
"--semantic-layout-units-shadow-overlay-x",
|
|
381
|
+
"--semantic-layout-units-shadow-overlay-y",
|
|
382
|
+
"--semantic-layout-units-shadow-sheet-blur",
|
|
383
|
+
"--semantic-layout-units-shadow-sheet-spread",
|
|
384
|
+
"--semantic-layout-units-shadow-sheet-x",
|
|
385
|
+
"--semantic-layout-units-shadow-sheet-y",
|
|
386
|
+
"--semantic-layout-units-shadow-widget-hover-blur",
|
|
387
|
+
"--semantic-layout-units-shadow-widget-hover-spread",
|
|
388
|
+
"--semantic-layout-units-shadow-widget-hover-x",
|
|
389
|
+
"--semantic-layout-units-shadow-widget-hover-y",
|
|
390
|
+
"--semantic-layout-units-shadow-widget-pressed-blur",
|
|
391
|
+
"--semantic-layout-units-shadow-widget-pressed-spread",
|
|
392
|
+
"--semantic-layout-units-shadow-widget-pressed-x",
|
|
393
|
+
"--semantic-layout-units-shadow-widget-pressed-y",
|
|
394
|
+
"--semantic-layout-units-shadow-widget-rest-blur",
|
|
395
|
+
"--semantic-layout-units-shadow-widget-rest-spread",
|
|
396
|
+
"--semantic-layout-units-shadow-widget-rest-x",
|
|
397
|
+
"--semantic-layout-units-shadow-widget-rest-y",
|
|
289
398
|
"--semantic-type-family-brand",
|
|
290
399
|
"--semantic-type-font-size-4xl",
|
|
291
400
|
"--semantic-type-font-size-5xl",
|
|
@@ -300,7 +409,6 @@
|
|
|
300
409
|
"--semantic-type-font-size-xxs",
|
|
301
410
|
"--semantic-type-font-size-xxxl",
|
|
302
411
|
"--semantic-type-font-size-xxxs",
|
|
303
|
-
"--semantic-type-letter-spacing-compact",
|
|
304
412
|
"--semantic-type-letter-spacing-extraspacious",
|
|
305
413
|
"--semantic-type-letter-spacing-spacious",
|
|
306
414
|
"--semantic-type-letter-spacing-wide",
|
|
@@ -323,7 +431,6 @@
|
|
|
323
431
|
"--semantic-type-line-height-xxxs-single",
|
|
324
432
|
"--semantic-type-line-height-xxxs-tight",
|
|
325
433
|
"--semantic-type-weight-bold",
|
|
326
|
-
"--semantic-type-weight-light",
|
|
327
434
|
"--semantic-type-weight-medium",
|
|
328
435
|
"--semantic-type-weight-regular",
|
|
329
436
|
"--semantic-type-weight-semibold"
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Pathway design tokens — single entry point.
|
|
3
|
+
@imports every token file in load order (primitives first, so the themes that
|
|
4
|
+
reference it resolve). Generated — do not edit. Run `npm run build-dist`.
|
|
5
|
+
*/
|
|
6
|
+
@import "./primitives.css";
|
|
7
|
+
@import "./themes/light.css";
|
|
8
|
+
@import "./themes/midnight.css";
|
|
9
|
+
@import "./layout.css";
|
|
10
|
+
@import "./layout-contextual.css";
|
|
11
|
+
@import "./layout-responsive.css";
|
|
12
|
+
@import "./type.css";
|
|
13
|
+
@import "./motion.css";
|
|
14
|
+
@import "./breakpoints.css";
|
|
@@ -9,42 +9,43 @@
|
|
|
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 34 custom properties.
|
|
13
13
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
14
14
|
==========================================================================
|
|
15
15
|
*/
|
|
16
16
|
:root {
|
|
17
|
-
--contextual-layout-units-button-
|
|
18
|
-
--contextual-layout-units-button-
|
|
19
|
-
--contextual-layout-units-button-
|
|
17
|
+
--contextual-layout-units-button-borderwidth-rest: 0.75px;
|
|
18
|
+
--contextual-layout-units-button-borderwidth-selected: 1px;
|
|
19
|
+
--contextual-layout-units-button-cornerradius: 8px;
|
|
20
20
|
--contextual-layout-units-button-gap-horizontal: 8px;
|
|
21
|
-
--contextual-layout-units-button-padding-large-horizontal:
|
|
21
|
+
--contextual-layout-units-button-padding-large-horizontal: 12px;
|
|
22
22
|
--contextual-layout-units-button-padding-large-vertical: 12px;
|
|
23
|
-
--contextual-layout-units-button-padding-medium-horizontal:
|
|
24
|
-
--contextual-layout-units-button-padding-medium-vertical:
|
|
25
|
-
--contextual-layout-units-button-padding-small-horizontal:
|
|
23
|
+
--contextual-layout-units-button-padding-medium-horizontal: 8px;
|
|
24
|
+
--contextual-layout-units-button-padding-medium-vertical: 8px;
|
|
25
|
+
--contextual-layout-units-button-padding-small-horizontal: 6px;
|
|
26
26
|
--contextual-layout-units-button-padding-small-vertical: 6px;
|
|
27
|
-
--contextual-layout-units-button-padding-xsmall-horizontal:
|
|
27
|
+
--contextual-layout-units-button-padding-xsmall-horizontal: 6px;
|
|
28
28
|
--contextual-layout-units-button-padding-xsmall-vertical: 6px;
|
|
29
|
-
--contextual-layout-units-card-
|
|
30
|
-
--contextual-layout-units-card-
|
|
31
|
-
--contextual-layout-units-card-
|
|
29
|
+
--contextual-layout-units-card-borderwidth-hover: 0.75px;
|
|
30
|
+
--contextual-layout-units-card-borderwidth-rest: 0.5px;
|
|
31
|
+
--contextual-layout-units-card-borderwidth-selected: 1px;
|
|
32
|
+
--contextual-layout-units-card-cornerradius: 16px;
|
|
32
33
|
--contextual-layout-units-card-gap: 8px;
|
|
33
|
-
--contextual-layout-units-card-padding-
|
|
34
|
-
--contextual-layout-units-card-padding-
|
|
35
|
-
--contextual-layout-units-card-padding-small-horizontal: 14px;
|
|
36
|
-
--contextual-layout-units-card-padding-small-vertical: 14px;
|
|
34
|
+
--contextual-layout-units-card-padding-horizontal: 14px;
|
|
35
|
+
--contextual-layout-units-card-padding-vertical: 14px;
|
|
37
36
|
--contextual-layout-units-field-borderwidth: 0.75px;
|
|
38
|
-
--contextual-layout-units-
|
|
39
|
-
--contextual-layout-units-
|
|
40
|
-
--contextual-layout-units-
|
|
37
|
+
--contextual-layout-units-field-cornerradius: 8px;
|
|
38
|
+
--contextual-layout-units-focusring-offset: 2px;
|
|
39
|
+
--contextual-layout-units-focusring-width: 2px;
|
|
40
|
+
--contextual-layout-units-navitem-cornerradius: 8px;
|
|
41
41
|
--contextual-layout-units-navitem-padding-horizontal: 14px;
|
|
42
|
-
--contextual-layout-units-navitem-padding-vertical:
|
|
43
|
-
--contextual-layout-units-
|
|
42
|
+
--contextual-layout-units-navitem-padding-vertical: 8px;
|
|
43
|
+
--contextual-layout-units-selection-controls-borderwidth: 0.75px;
|
|
44
44
|
--contextual-layout-units-sidenav-gap-vertical: 6px;
|
|
45
45
|
--contextual-layout-units-sidenav-padding-horizontal-collapsed: 12px;
|
|
46
46
|
--contextual-layout-units-sidenav-padding-horizontal-expanded: 16px;
|
|
47
|
-
--contextual-layout-units-sidenav-padding-vertical:
|
|
48
|
-
--contextual-layout-units-sidenav-width-collapsed:
|
|
49
|
-
--contextual-layout-units-sidenav-width-expanded:
|
|
47
|
+
--contextual-layout-units-sidenav-padding-vertical: 12px;
|
|
48
|
+
--contextual-layout-units-sidenav-width-collapsed: 84px;
|
|
49
|
+
--contextual-layout-units-sidenav-width-expanded: 256px;
|
|
50
|
+
--contextual-layout-units-topnav-height: 60px;
|
|
50
51
|
}
|
|
@@ -14,34 +14,42 @@
|
|
|
14
14
|
A developer cannot derive these from a responsive grid. The grid governs
|
|
15
15
|
columns; it says nothing about the chrome's padding.
|
|
16
16
|
|
|
17
|
-
Declares
|
|
17
|
+
Declares 23 custom properties.
|
|
18
18
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
19
19
|
==========================================================================
|
|
20
20
|
*/
|
|
21
21
|
:root {
|
|
22
|
-
--responsive-layout-sheet-cornerradius
|
|
23
|
-
--responsive-layout-sheet-padding-
|
|
22
|
+
--responsive-layout-sheet-corner-radius-cornerradius: 28px;
|
|
23
|
+
--responsive-layout-sheet-padding-bottom: 56px;
|
|
24
|
+
--responsive-layout-sheet-padding-horizontal: 32px;
|
|
24
25
|
--responsive-layout-sheet-padding-top: 16px;
|
|
26
|
+
--responsive-layout-sheetcontainer-padding-horizontal: 24px;
|
|
27
|
+
--responsive-layout-sheetcontainer-padding-top: 16px;
|
|
25
28
|
--responsive-layout-topnav-gap-horizontal: 8px;
|
|
26
|
-
--responsive-layout-topnav-height: 56px;
|
|
27
29
|
--responsive-layout-topnav-padding-horizontal: 16px;
|
|
28
30
|
--responsive-layout-topnav-padding-vertical: 6px;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
@media (max-width: 1023px) {
|
|
32
34
|
:root {
|
|
33
|
-
--responsive-layout-sheet-cornerradius
|
|
35
|
+
--responsive-layout-sheet-corner-radius-cornerradius: 24px;
|
|
36
|
+
--responsive-layout-sheet-padding-bottom: 48px;
|
|
34
37
|
--responsive-layout-sheet-padding-horizontal: 24px;
|
|
35
38
|
--responsive-layout-sheet-padding-top: 14px;
|
|
36
|
-
--responsive-layout-
|
|
39
|
+
--responsive-layout-sheetcontainer-padding-horizontal: 16px;
|
|
40
|
+
--responsive-layout-sheetcontainer-padding-top: 12px;
|
|
41
|
+
--responsive-layout-topnav-padding-horizontal: 14px;
|
|
37
42
|
}
|
|
38
43
|
}
|
|
39
44
|
|
|
40
45
|
@media (max-width: 767px) {
|
|
41
46
|
:root {
|
|
42
|
-
--responsive-layout-sheet-cornerradius
|
|
47
|
+
--responsive-layout-sheet-corner-radius-cornerradius: 20px;
|
|
48
|
+
--responsive-layout-sheet-padding-bottom: 32px;
|
|
43
49
|
--responsive-layout-sheet-padding-horizontal: 16px;
|
|
44
|
-
--responsive-layout-sheet-padding-top:
|
|
45
|
-
--responsive-layout-
|
|
50
|
+
--responsive-layout-sheet-padding-top: 8px;
|
|
51
|
+
--responsive-layout-sheetcontainer-padding-horizontal: 12px;
|
|
52
|
+
--responsive-layout-sheetcontainer-padding-top: 8px;
|
|
53
|
+
--responsive-layout-topnav-padding-horizontal: 6px;
|
|
46
54
|
}
|
|
47
55
|
}
|
package/dist/layout.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Breakpoints are handled by media query inside this file rather than by
|
|
13
13
|
putting the breakpoint in the property name, so one name works responsively.
|
|
14
14
|
|
|
15
|
-
Declares
|
|
15
|
+
Declares 76 custom properties.
|
|
16
16
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
17
17
|
==========================================================================
|
|
18
18
|
*/
|
|
@@ -31,9 +31,8 @@
|
|
|
31
31
|
--semantic-layout-units-borderwidth-xthin: 0.5px;
|
|
32
32
|
--semantic-layout-units-borderwidth-xxthick: 6px;
|
|
33
33
|
--semantic-layout-units-cornerradius-base: 8px;
|
|
34
|
-
--semantic-layout-units-cornerradius-full:
|
|
34
|
+
--semantic-layout-units-cornerradius-full: 999px;
|
|
35
35
|
--semantic-layout-units-cornerradius-large: 12px;
|
|
36
|
-
--semantic-layout-units-cornerradius-medium: 8px;
|
|
37
36
|
--semantic-layout-units-cornerradius-small: 4px;
|
|
38
37
|
--semantic-layout-units-cornerradius-xlarge: 16px;
|
|
39
38
|
--semantic-layout-units-cornerradius-xsmall: 2px;
|
|
@@ -48,13 +47,50 @@
|
|
|
48
47
|
--semantic-layout-units-padding-base: 16px;
|
|
49
48
|
--semantic-layout-units-padding-collosal: 120px;
|
|
50
49
|
--semantic-layout-units-padding-ginormous: 64px;
|
|
51
|
-
--semantic-layout-units-padding-medium:
|
|
50
|
+
--semantic-layout-units-padding-medium: 14px;
|
|
52
51
|
--semantic-layout-units-padding-relaxed: 24px;
|
|
53
|
-
--semantic-layout-units-padding-tight:
|
|
52
|
+
--semantic-layout-units-padding-tight: 12px;
|
|
53
|
+
--semantic-layout-units-padding-tightest: 2px;
|
|
54
54
|
--semantic-layout-units-padding-wide: 36px;
|
|
55
|
-
--semantic-layout-units-padding-xtight:
|
|
55
|
+
--semantic-layout-units-padding-xtight: 8px;
|
|
56
56
|
--semantic-layout-units-padding-xwide: 48px;
|
|
57
|
-
--semantic-layout-units-padding-xxtight:
|
|
57
|
+
--semantic-layout-units-padding-xxtight: 6px;
|
|
58
58
|
--semantic-layout-units-padding-xxwide: 56px;
|
|
59
|
-
--semantic-layout-units-padding-xxxtight:
|
|
59
|
+
--semantic-layout-units-padding-xxxtight: 4px;
|
|
60
|
+
--semantic-layout-units-shadow-card-hover-blur: 24px;
|
|
61
|
+
--semantic-layout-units-shadow-card-hover-spread: -3px;
|
|
62
|
+
--semantic-layout-units-shadow-card-hover-x: 0px;
|
|
63
|
+
--semantic-layout-units-shadow-card-hover-y: 8px;
|
|
64
|
+
--semantic-layout-units-shadow-card-pressed-blur: 8px;
|
|
65
|
+
--semantic-layout-units-shadow-card-pressed-spread: -1px;
|
|
66
|
+
--semantic-layout-units-shadow-card-pressed-x: 0px;
|
|
67
|
+
--semantic-layout-units-shadow-card-pressed-y: 2px;
|
|
68
|
+
--semantic-layout-units-shadow-card-rest-blur: 16px;
|
|
69
|
+
--semantic-layout-units-shadow-card-rest-spread: -2px;
|
|
70
|
+
--semantic-layout-units-shadow-card-rest-x: 0px;
|
|
71
|
+
--semantic-layout-units-shadow-card-rest-y: 4px;
|
|
72
|
+
--semantic-layout-units-shadow-lift-blur: 28px;
|
|
73
|
+
--semantic-layout-units-shadow-lift-spread: -4px;
|
|
74
|
+
--semantic-layout-units-shadow-lift-x: 0px;
|
|
75
|
+
--semantic-layout-units-shadow-lift-y: 10px;
|
|
76
|
+
--semantic-layout-units-shadow-overlay-blur: 48px;
|
|
77
|
+
--semantic-layout-units-shadow-overlay-spread: -8px;
|
|
78
|
+
--semantic-layout-units-shadow-overlay-x: 0px;
|
|
79
|
+
--semantic-layout-units-shadow-overlay-y: 20px;
|
|
80
|
+
--semantic-layout-units-shadow-sheet-blur: 32px;
|
|
81
|
+
--semantic-layout-units-shadow-sheet-spread: -6px;
|
|
82
|
+
--semantic-layout-units-shadow-sheet-x: 0px;
|
|
83
|
+
--semantic-layout-units-shadow-sheet-y: 4px;
|
|
84
|
+
--semantic-layout-units-shadow-widget-hover-blur: 12px;
|
|
85
|
+
--semantic-layout-units-shadow-widget-hover-spread: -2px;
|
|
86
|
+
--semantic-layout-units-shadow-widget-hover-x: 0px;
|
|
87
|
+
--semantic-layout-units-shadow-widget-hover-y: 4px;
|
|
88
|
+
--semantic-layout-units-shadow-widget-pressed-blur: 4px;
|
|
89
|
+
--semantic-layout-units-shadow-widget-pressed-spread: 0px;
|
|
90
|
+
--semantic-layout-units-shadow-widget-pressed-x: 0px;
|
|
91
|
+
--semantic-layout-units-shadow-widget-pressed-y: 1px;
|
|
92
|
+
--semantic-layout-units-shadow-widget-rest-blur: 8px;
|
|
93
|
+
--semantic-layout-units-shadow-widget-rest-spread: -1px;
|
|
94
|
+
--semantic-layout-units-shadow-widget-rest-x: 0px;
|
|
95
|
+
--semantic-layout-units-shadow-widget-rest-y: 2px;
|
|
60
96
|
}
|
package/dist/motion.css
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
Consequence worth knowing: anyone rebuilding tokens from a Figma export
|
|
13
13
|
alone gets no motion at all, and no warning. Consume the package.
|
|
14
14
|
|
|
15
|
-
Declares
|
|
15
|
+
Declares 21 custom properties.
|
|
16
16
|
Generated — do not edit. Run `npm run build-tokens`.
|
|
17
17
|
==========================================================================
|
|
18
18
|
*/
|
|
@@ -27,11 +27,15 @@
|
|
|
27
27
|
--motion-duration-8: 1100ms; /** Slowest transition step: very large layout shifts, deliberate full-screen moves */
|
|
28
28
|
--motion-duration-loop: 1000ms; /** Standard continuous-loop period (standalone Spinner, skeleton shimmer) */
|
|
29
29
|
--motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner — faster reads as more responsive feedback) */
|
|
30
|
-
--motion-easing-
|
|
31
|
-
--motion-easing-
|
|
30
|
+
--motion-easing-breath: cubic-bezier(0.37, 0, 0.63, 1);
|
|
31
|
+
--motion-easing-burst: cubic-bezier(0.30, 0, 0.5, 1.18);
|
|
32
32
|
--motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
|
|
33
|
-
--motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
|
|
34
33
|
--motion-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /** Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot. */
|
|
34
|
+
--motion-easing-inout: cubic-bezier(0.62, 0.02, 0.23, 1);
|
|
35
|
+
--motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** 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. */
|
|
36
|
+
--motion-easing-spring-soft: cubic-bezier(0.30, 1.05, 0.40, 1);
|
|
37
|
+
--motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
|
|
38
|
+
--motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
|
|
35
39
|
--motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** 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. */
|
|
36
40
|
--motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Continuous loops only (spinners, shimmer). Never for bounded transitions. */
|
|
37
41
|
}
|