@helloimjolopez-pathway/pathway-tokens 7.0.1 → 7.0.2

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 (12) hide show
  1. package/README.md +4 -4
  2. package/components/sidenav/sidenav.jsx +20 -9
  3. package/dist/README.md +8 -8
  4. package/dist/contract.json +43 -25
  5. package/dist/layout-contextual.css +8 -2
  6. package/dist/layout-responsive.css +16 -15
  7. package/dist/primitives.css +2 -1
  8. package/dist/themes/light.css +28 -11
  9. package/dist/themes/midnight.css +28 -11
  10. package/dist/tokens.js +688 -112
  11. package/dist/tokens.json +319 -97
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -3,11 +3,11 @@
3
3
  Design system for Ministry Brands Amplify. Tokens + components + specifications, all versioned in one place, with Storybook deployed from `main`.
4
4
 
5
5
  > **Looking for the tokens?** → **[TOKENS.md](TOKENS.md)** — where the CSS lives, which
6
- > of the 267 names you may use, and what to link in what order.
6
+ > of the 284 names you may use, and what to link in what order.
7
7
 
8
8
  ## Using the tokens
9
9
 
10
- **The colour contract is 169 names. Your full working vocabulary is 267.**
10
+ **The colour contract is 186 names. Your full working vocabulary is 284.**
11
11
 
12
12
  That is the number worth knowing, because adding up every declaration in the token
13
13
  folder gives 966 and the retired `tokens.css` used to emit 2,338. Neither is the
@@ -16,13 +16,13 @@ one name set rather than each having their own.
16
16
 
17
17
  | | Count | Name these? |
18
18
  |---|---|---|
19
- | Colour (`themes/light.css`, `themes/midnight.css` — same names) | **169** | Yes |
19
+ | Colour (`themes/light.css`, `themes/midnight.css` — same names) | **186** | Yes |
20
20
  | Type scale (`type.css`) | 41 | Yes |
21
21
  | Spacing, radii, borders (`layout.css`) | 40 | Yes |
22
22
  | Motion (`motion.css`) | 17 | Yes |
23
23
  | Sheet and TopNav padding (`layout-responsive.css`) | 6 | Yes |
24
24
  | Breakpoints (`breakpoints.css`) | 5 | Yes |
25
- | **Working vocabulary** | **267** | |
25
+ | **Working vocabulary** | **284** | |
26
26
  | Raw ramps (`primitives.css`) | 350 | **No** — but you must load it |
27
27
  | Component metrics (`layout-contextual.css`) | 26 | This repo's components |
28
28
 
package/components/sidenav/sidenav.jsx CHANGED
@@ -48,6 +48,11 @@ import ReactDOM from "react-dom";
48
48
  */
49
49
  const c = (name) => `var(--semantic-color-${name})`;
50
50
  const u = (name, fallback) => `var(--semantic-layout-units-${name}, ${fallback}px)`;
51
+ // Component metrics live in the CONTEXTUAL collection, not the semantic one, so
52
+ // they need their own prefix. SideNav's two widths moved there on 2026-09-16:
53
+ // they were numeric literals with a "no token in Figma" comment, which was true
54
+ // until the tokens were created.
55
+ const x = (name, fallback) => `var(--contextual-layout-units-${name}, ${fallback}px)`;
51
56
 
52
57
  // Negate a length that may be either a number or a var() reference. Used for the
53
58
  // scroll-region edge bleed, where `-value` on a string would give NaN.
@@ -64,7 +69,10 @@ export const T = {
64
69
  navTrail: c("fill-action-selection-trail"),
65
70
  infoSubtle: c("stroke-static-neutral-base"), // container right border
66
71
  },
67
- surface: { navLight: c("fill-surface-sheet") },
72
+ surface: {
73
+ navLight: c("fill-surface-sheet"), // the nav container itself: white
74
+ navElevated: c("fill-surface-elevated"), // PopoverMenu, per Figma's "Popover Menu"
75
+ },
68
76
  // Label, icon and chevron all resolve to the SAME token per state. A nav item
69
77
  // is one interactive surface, so its foreground must not split across two
70
78
  // ramps that can drift apart.
@@ -100,8 +108,11 @@ export const L = {
100
108
  navPadH: u("padding-base", 16),
101
109
  navColPadH: u("padding-medium", 12),
102
110
  navPadTop: u("padding-tight", 8),
103
- navW: 240, // no token in Figma — expanded sidebar width
104
- navWcol: 72, // no token in Figma — collapsed rail width
111
+ // Read from SideNav.Container in Figma on 2026-09-16: every expanded variant
112
+ // is 250 wide (Base, Stroked, Mobile.Base, Mobile.Stroked) and every
113
+ // collapsed one is 72. Was 240, which no longer matched the component.
114
+ navW: x("sidenav-width-expanded", 250),
115
+ navWcol: x("sidenav-width-collapsed", 72),
105
116
  menuGap: u("gap-xtight", 6),
106
117
  menuPadT: u("padding-tight", 8),
107
118
  menuPadB: u("padding-xxwide", 56),
@@ -294,13 +305,13 @@ export function SideNavTooltip({ label, anchorRect, onMouseEnter, onMouseLeave }
294
305
  style={{ position: "fixed",
295
306
  left: anchorRect.right + 8,
296
307
  top: anchorRect.top + anchorRect.height / 2,
297
- zIndex: 1000, backgroundColor: "#fff",
298
- border: "0.5px solid #f6f6f6", borderRadius: 8,
308
+ zIndex: 1000, backgroundColor: T.surface.navLight,
309
+ border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
299
310
  boxShadow: "2px 2px 8px 0px rgba(0,0,0,0.03)",
300
311
  padding: "6px 8px", whiteSpace: "nowrap", pointerEvents: "auto",
301
312
  animation: "popoverInCentered var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
302
313
  <span style={{ fontFamily: "'Red Hat Text',sans-serif", fontWeight: 400,
303
- fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: "#202020" }}>
314
+ fontSize: 14, lineHeight: "20px", letterSpacing: "0.02px", color: T.text.secondary }}>
304
315
  {label}
305
316
  </span>
306
317
  </div>,
@@ -333,13 +344,13 @@ export function CollapsedPopover({ item, onClick, anchorRect, onMouseEnter, onMo
333
344
  return ReactDOM.createPortal(
334
345
  <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
335
346
  style={{ position: "fixed", left: anchorRect.right + 8, top: anchorRect.top,
336
- zIndex: 1000, backgroundColor: "#fff",
337
- border: "0.5px solid #ededed", borderRadius: 8,
347
+ zIndex: 1000, backgroundColor: T.surface.navElevated,
348
+ border: `0.5px solid ${c("stroke-static-neutral-faint")}`, borderRadius: 8,
338
349
  boxShadow: "2px 2px 8px 4px rgba(0,0,0,0.03)",
339
350
  padding: 6, minWidth: 200, pointerEvents: "auto",
340
351
  animation: "popoverIn var(--motion-duration-3) var(--motion-easing-spring) forwards" }}>
341
352
  {/* Section label — Figma component 40006794-5977 */}
342
- <div style={{ borderBottom: "0.5px solid #ededed" }}>
353
+ <div style={{ borderBottom: `0.5px solid ${c("stroke-static-neutral-faint")}` }}>
343
354
  <SectionLabel label={item.label} />
344
355
  </div>
345
356
  {item.children.map(child =>
package/dist/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Pathway design tokens
2
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.
3
+ **The colour contract is 186 names.** Your full working vocabulary is
4
+ **296**. If you add up every declaration in this folder you get
5
+ 869 — that number is not the contract, and the table below says why.
6
6
 
7
7
  ## Link these, in this order
8
8
 
@@ -25,14 +25,14 @@ error**.
25
25
 
26
26
  | File | Names | Safe to name? | Must load? | What it is |
27
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. |
28
+ | `primitives.css` | 353 | **no** | yes | Raw colour ramps. Load it; do not name it. |
29
+ | `themes/light.css` | 186 | yes | yes | Colour contract, Light Mode. |
30
+ | `themes/midnight.css` | 186 | 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` | 28 | **no** | **no** | Per-component metrics. This repo's components use these. |
33
+ | `layout-contextual.css` | 34 | **no** | **no** | Per-component metrics. This repo's components use these. |
34
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. |
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. |
37
37
 
38
38
  Each file repeats this in its own header.
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": "7.0.1",
3
+ "version": "7.0.2",
4
4
  "generated": "2026-09-16",
5
5
  "counts": {
6
- "contract": 278,
7
- "infrastructure": 380,
8
- "declarationsAcrossAllFiles": 827
6
+ "contract": 296,
7
+ "infrastructure": 387,
8
+ "declarationsAcrossAllFiles": 869
9
9
  },
10
10
  "loadOrder": [
11
11
  "primitives.css",
@@ -21,19 +21,19 @@
21
21
  "primitives.css": {
22
22
  "contract": false,
23
23
  "mustLoad": true,
24
- "count": 352,
24
+ "count": 353,
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": 169,
30
+ "count": 186,
31
31
  "role": "Colour contract, Light Mode."
32
32
  },
33
33
  "themes/midnight.css": {
34
34
  "contract": true,
35
35
  "mustLoad": true,
36
- "count": 169,
36
+ "count": 186,
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": 28,
54
+ "count": 34,
55
55
  "role": "Per-component metrics. This repo's components use these."
56
56
  },
57
57
  "motion.css": {
@@ -63,7 +63,7 @@
63
63
  "layout-responsive.css": {
64
64
  "contract": true,
65
65
  "mustLoad": true,
66
- "count": 6,
66
+ "count": 7,
67
67
  "role": "Sheet and TopNav padding. The only layout tokens with media queries."
68
68
  },
69
69
  "breakpoints.css": {
@@ -96,6 +96,13 @@
96
96
  "--motion-easing-linear",
97
97
  "--motion-easing-spring",
98
98
  "--motion-easing-standard",
99
+ "--responsive-layout-sheet-cornerradius-top",
100
+ "--responsive-layout-sheet-padding-horizontal",
101
+ "--responsive-layout-sheet-padding-top",
102
+ "--responsive-layout-topnav-gap-horizontal",
103
+ "--responsive-layout-topnav-height",
104
+ "--responsive-layout-topnav-padding-horizontal",
105
+ "--responsive-layout-topnav-padding-vertical",
99
106
  "--semantic-color-fill-action-disabled",
100
107
  "--semantic-color-fill-action-primary-strong-hover",
101
108
  "--semantic-color-fill-action-primary-strong-pressed",
@@ -109,12 +116,18 @@
109
116
  "--semantic-color-fill-action-selection-hover",
110
117
  "--semantic-color-fill-action-selection-selected",
111
118
  "--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",
119
+ "--semantic-color-fill-action-status-attention-strong-hover",
120
+ "--semantic-color-fill-action-status-attention-strong-pressed",
121
+ "--semantic-color-fill-action-status-attention-strong-rest",
122
+ "--semantic-color-fill-action-status-attention-subtle-hover",
123
+ "--semantic-color-fill-action-status-attention-subtle-pressed",
124
+ "--semantic-color-fill-action-status-attention-subtle-rest",
125
+ "--semantic-color-fill-action-status-info-strong-hover",
126
+ "--semantic-color-fill-action-status-info-strong-pressed",
127
+ "--semantic-color-fill-action-status-info-strong-rest",
128
+ "--semantic-color-fill-action-status-info-subtle-hover",
129
+ "--semantic-color-fill-action-status-info-subtle-pressed",
130
+ "--semantic-color-fill-action-status-info-subtle-rest",
118
131
  "--semantic-color-fill-action-status-negative-strong-hover",
119
132
  "--semantic-color-fill-action-status-negative-strong-pressed",
120
133
  "--semantic-color-fill-action-status-negative-strong-rest",
@@ -127,9 +140,12 @@
127
140
  "--semantic-color-fill-action-status-positive-subtle-hover",
128
141
  "--semantic-color-fill-action-status-positive-subtle-pressed",
129
142
  "--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",
143
+ "--semantic-color-fill-action-status-severe-strong-hover",
144
+ "--semantic-color-fill-action-status-severe-strong-pressed",
145
+ "--semantic-color-fill-action-status-severe-strong-rest",
146
+ "--semantic-color-fill-action-status-severe-subtle-hover",
147
+ "--semantic-color-fill-action-status-severe-subtle-pressed",
148
+ "--semantic-color-fill-action-status-severe-subtle-rest",
133
149
  "--semantic-color-fill-static-accent-jade-strong",
134
150
  "--semantic-color-fill-static-accent-jade-subtle",
135
151
  "--semantic-color-fill-static-accent-lagoon-strong",
@@ -151,6 +167,7 @@
151
167
  "--semantic-color-fill-static-negative-strong",
152
168
  "--semantic-color-fill-static-negative-subtle",
153
169
  "--semantic-color-fill-static-neutral-base",
170
+ "--semantic-color-fill-static-neutral-bold",
154
171
  "--semantic-color-fill-static-neutral-faint",
155
172
  "--semantic-color-fill-static-neutral-mono",
156
173
  "--semantic-color-fill-static-neutral-strong",
@@ -163,6 +180,7 @@
163
180
  "--semantic-color-fill-surface-elevated",
164
181
  "--semantic-color-fill-surface-sheet",
165
182
  "--semantic-color-foreground-action-disabled",
183
+ "--semantic-color-foreground-action-primary-on-strong",
166
184
  "--semantic-color-foreground-action-primary-on-subtle-hover",
167
185
  "--semantic-color-foreground-action-primary-on-subtle-pressed",
168
186
  "--semantic-color-foreground-action-primary-on-subtle-rest",
@@ -172,18 +190,23 @@
172
190
  "--semantic-color-foreground-action-secondary-subtle-hover",
173
191
  "--semantic-color-foreground-action-secondary-subtle-pressed",
174
192
  "--semantic-color-foreground-action-secondary-subtle-rest",
193
+ "--semantic-color-foreground-action-status-attention-on-strong",
175
194
  "--semantic-color-foreground-action-status-attention-on-subtle-hover",
176
195
  "--semantic-color-foreground-action-status-attention-on-subtle-pressed",
177
196
  "--semantic-color-foreground-action-status-attention-on-subtle-rest",
197
+ "--semantic-color-foreground-action-status-info-on-strong",
178
198
  "--semantic-color-foreground-action-status-info-on-subtle-hover",
179
199
  "--semantic-color-foreground-action-status-info-on-subtle-pressed",
180
200
  "--semantic-color-foreground-action-status-info-on-subtle-rest",
201
+ "--semantic-color-foreground-action-status-negative-on-strong",
181
202
  "--semantic-color-foreground-action-status-negative-on-subtle-hover",
182
203
  "--semantic-color-foreground-action-status-negative-on-subtle-pressed",
183
204
  "--semantic-color-foreground-action-status-negative-on-subtle-rest",
205
+ "--semantic-color-foreground-action-status-positive-on-strong",
184
206
  "--semantic-color-foreground-action-status-positive-on-subtle-hover",
185
207
  "--semantic-color-foreground-action-status-positive-on-subtle-pressed",
186
208
  "--semantic-color-foreground-action-status-positive-on-subtle-rest",
209
+ "--semantic-color-foreground-action-status-severe-on-strong",
187
210
  "--semantic-color-foreground-action-status-severe-on-subtle-hover",
188
211
  "--semantic-color-foreground-action-status-severe-on-subtle-pressed",
189
212
  "--semantic-color-foreground-action-status-severe-on-subtle-rest",
@@ -260,6 +283,7 @@
260
283
  "--semantic-color-stroke-static-neutral-base",
261
284
  "--semantic-color-stroke-static-neutral-bold",
262
285
  "--semantic-color-stroke-static-neutral-faint",
286
+ "--semantic-color-stroke-static-neutral-mono",
263
287
  "--semantic-color-stroke-static-neutral-strong",
264
288
  "--semantic-color-stroke-static-positive-strong",
265
289
  "--semantic-color-stroke-static-positive-subtle",
@@ -345,12 +369,6 @@
345
369
  "--semantic-type-weight-light",
346
370
  "--semantic-type-weight-medium",
347
371
  "--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"
372
+ "--semantic-type-weight-semibold"
355
373
  ]
356
374
  }
package/dist/layout-contextual.css CHANGED
@@ -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 28 custom properties.
12
+ Declares 34 custom properties.
13
13
  Generated — do not edit. Run `npm run build-tokens`.
14
14
  ==========================================================================
15
15
  */
@@ -35,11 +35,17 @@
35
35
  --contextual-layout-units-card-padding-medium-vertical: 16px;
36
36
  --contextual-layout-units-card-padding-small-horizontal: 14px;
37
37
  --contextual-layout-units-card-padding-small-vertical: 14px;
38
- --contextual-layout-units-field-borderwidth: 1px;
38
+ --contextual-layout-units-field-borderwidth: 0.75px;
39
39
  --contextual-layout-units-focus-ring-offset: 2px;
40
40
  --contextual-layout-units-focus-ring-width: 2px;
41
41
  --contextual-layout-units-navitem-corner-radius-radius: 8px;
42
42
  --contextual-layout-units-navitem-padding-horizontal: 14px;
43
43
  --contextual-layout-units-navitem-padding-vertical: 12px;
44
44
  --contextual-layout-units-selector-borderwidth: 1px;
45
+ --contextual-layout-units-sidenav-gap-vertical: 6px;
46
+ --contextual-layout-units-sidenav-padding-horizontal-collapsed: 12px;
47
+ --contextual-layout-units-sidenav-padding-horizontal-expanded: 16px;
48
+ --contextual-layout-units-sidenav-padding-vertical: 8px;
49
+ --contextual-layout-units-sidenav-width-collapsed: 72px;
50
+ --contextual-layout-units-sidenav-width-expanded: 250px;
45
51
  }
package/dist/layout-responsive.css CHANGED
@@ -14,33 +14,34 @@
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 14 custom properties.
17
+ Declares 15 custom properties.
18
18
  Generated — do not edit. Run `npm run build-tokens`.
19
19
  ==========================================================================
20
20
  */
21
21
  :root {
22
- --shell-layout-sheet-padding-bottom: 64px;
23
- --shell-layout-sheet-padding-horizontal: 36px;
24
- --shell-layout-sheet-padding-top: 16px;
25
- --shell-layout-topnav-height: 56px;
26
- --shell-layout-topnav-padding-horizontal: 16px;
27
- --shell-layout-topnav-padding-vertical: 6px;
22
+ --responsive-layout-sheet-cornerradius-top: 16px;
23
+ --responsive-layout-sheet-padding-horizontal: 36px;
24
+ --responsive-layout-sheet-padding-top: 16px;
25
+ --responsive-layout-topnav-gap-horizontal: 8px;
26
+ --responsive-layout-topnav-height: 56px;
27
+ --responsive-layout-topnav-padding-horizontal: 16px;
28
+ --responsive-layout-topnav-padding-vertical: 6px;
28
29
  }
29
30
 
30
31
  @media (max-width: 1023px) {
31
32
  :root {
32
- --shell-layout-sheet-padding-bottom: 48px;
33
- --shell-layout-sheet-padding-horizontal: 24px;
34
- --shell-layout-sheet-padding-top: 14px;
35
- --shell-layout-topnav-padding-horizontal: 12px;
33
+ --responsive-layout-sheet-cornerradius-top: 12px;
34
+ --responsive-layout-sheet-padding-horizontal: 24px;
35
+ --responsive-layout-sheet-padding-top: 14px;
36
+ --responsive-layout-topnav-padding-horizontal: 12px;
36
37
  }
37
38
  }
38
39
 
39
40
  @media (max-width: 767px) {
40
41
  :root {
41
- --shell-layout-sheet-padding-bottom: 36px;
42
- --shell-layout-sheet-padding-horizontal: 16px;
43
- --shell-layout-sheet-padding-top: 12px;
44
- --shell-layout-topnav-padding-horizontal: 8px;
42
+ --responsive-layout-sheet-cornerradius-top: 8px;
43
+ --responsive-layout-sheet-padding-horizontal: 16px;
44
+ --responsive-layout-sheet-padding-top: 12px;
45
+ --responsive-layout-topnav-padding-horizontal: 8px;
45
46
  }
46
47
  }
package/dist/primitives.css CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  Nothing blocks you. It is an escape hatch with a stated cost.
20
20
 
21
- Declares 352 custom properties.
21
+ Declares 353 custom properties.
22
22
  Generated — do not edit. Run `npm run build-tokens`.
23
23
  ==========================================================================
24
24
  */
@@ -372,6 +372,7 @@
372
372
  --primitive-unit-unit-104: 104px;
373
373
  --primitive-unit-unit-112: 112px;
374
374
  --primitive-unit-unit-120: 120px;
375
+ --primitive-unit-unit-250: 250px;
375
376
  --primitive-unit-unit-0-point-5: 0.5px;
376
377
  --primitive-unit-unit-0-point-75: 0.75px;
377
378
  --primitive-unit-unit-1-point-5: 1.5px;
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 169 custom properties.
15
+ Declares 186 custom properties.
16
16
  Generated — do not edit. Run `npm run build-tokens`.
17
17
  ==========================================================================
18
18
  */
@@ -33,21 +33,30 @@
33
33
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-24);
34
34
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-24);
35
35
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-500-8);
36
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-25);
37
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-50);
38
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-75);
36
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-25);
37
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-50);
38
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-75);
39
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-200);
40
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-300);
41
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-350);
39
42
  --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
40
43
  --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
41
44
  --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
42
45
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
43
46
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
44
47
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
45
- --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-25);
46
- --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-75);
47
- --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-100);
48
- --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-50);
49
- --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-75);
50
- --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-100);
48
+ --semantic-color-fill-action-status-attention-subtle-rest: var(--primitive-color-saffron-25);
49
+ --semantic-color-fill-action-status-attention-subtle-hover: var(--primitive-color-saffron-75);
50
+ --semantic-color-fill-action-status-attention-subtle-pressed: var(--primitive-color-saffron-100);
51
+ --semantic-color-fill-action-status-attention-strong-rest: var(--primitive-color-saffron-150);
52
+ --semantic-color-fill-action-status-attention-strong-hover: var(--primitive-color-saffron-200);
53
+ --semantic-color-fill-action-status-attention-strong-pressed: var(--primitive-color-saffron-300);
54
+ --semantic-color-fill-action-status-severe-subtle-rest: var(--primitive-color-orange-50);
55
+ --semantic-color-fill-action-status-severe-subtle-hover: var(--primitive-color-orange-75);
56
+ --semantic-color-fill-action-status-severe-subtle-pressed: var(--primitive-color-orange-100);
57
+ --semantic-color-fill-action-status-severe-strong-rest: var(--primitive-color-orange-250);
58
+ --semantic-color-fill-action-status-severe-strong-hover: var(--primitive-color-orange-300);
59
+ --semantic-color-fill-action-status-severe-strong-pressed: var(--primitive-color-orange-350);
51
60
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-350);
52
61
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-400);
53
62
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-450);
@@ -58,7 +67,8 @@
58
67
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-25);
59
68
  --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-50);
60
69
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-75);
61
- --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-150);
70
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-800);
71
+ --semantic-color-fill-static-neutral-bold: var(--primitive-color-warm-neutral-150);
62
72
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-10);
63
73
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-25);
64
74
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-50);
@@ -87,6 +97,7 @@
87
97
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
88
98
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-600);
89
99
  --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-800);
100
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-cool-neutral-0);
90
101
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-550);
91
102
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-600);
92
103
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-800);
@@ -96,18 +107,23 @@
96
107
  --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-700);
97
108
  --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-800);
98
109
  --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-900);
110
+ --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-900);
99
111
  --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
100
112
  --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
101
113
  --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-900);
114
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-0);
102
115
  --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-700);
103
116
  --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-800);
104
117
  --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-900);
118
+ --semantic-color-foreground-action-status-attention-on-strong: var(--primitive-color-cool-neutral-900);
105
119
  --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-700);
106
120
  --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-800);
107
121
  --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-900);
122
+ --semantic-color-foreground-action-status-severe-on-strong: var(--primitive-color-cool-neutral-900);
108
123
  --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
109
124
  --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
110
125
  --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-900);
126
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
111
127
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
112
128
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-400);
113
129
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
@@ -164,6 +180,7 @@
164
180
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-100);
165
181
  --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-200);
166
182
  --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-350);
183
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
167
184
  --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-200);
168
185
  --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-500);
169
186
  --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-100);
package/dist/themes/midnight.css CHANGED
@@ -14,7 +14,7 @@
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 169 custom properties.
17
+ Declares 186 custom properties.
18
18
  Generated — do not edit. Run `npm run build-tokens`.
19
19
  ==========================================================================
20
20
  */
@@ -35,21 +35,30 @@
35
35
  --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-8);
36
36
  --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-16);
37
37
  --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-100-16);
38
- --semantic-color-fill-action-status-info-rest: var(--primitive-color-amethyst-700);
39
- --semantic-color-fill-action-status-info-hover: var(--primitive-color-amethyst-600);
40
- --semantic-color-fill-action-status-info-pressed: var(--primitive-color-amethyst-500);
38
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-700);
39
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-600);
40
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-500);
41
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-200);
42
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-300);
43
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-350);
41
44
  --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-350);
42
45
  --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
43
46
  --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-200);
44
47
  --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-800);
45
48
  --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-700);
46
49
  --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-600);
47
- --semantic-color-fill-action-status-attention-rest: var(--primitive-color-saffron-700);
48
- --semantic-color-fill-action-status-attention-hover: var(--primitive-color-saffron-500);
49
- --semantic-color-fill-action-status-attention-pressed: var(--primitive-color-saffron-400);
50
- --semantic-color-fill-action-status-severe-rest: var(--primitive-color-orange-800);
51
- --semantic-color-fill-action-status-severe-hover: var(--primitive-color-orange-700);
52
- --semantic-color-fill-action-status-severe-pressed: var(--primitive-color-orange-600);
50
+ --semantic-color-fill-action-status-attention-subtle-rest: var(--primitive-color-saffron-700);
51
+ --semantic-color-fill-action-status-attention-subtle-hover: var(--primitive-color-saffron-500);
52
+ --semantic-color-fill-action-status-attention-subtle-pressed: var(--primitive-color-saffron-400);
53
+ --semantic-color-fill-action-status-attention-strong-rest: var(--primitive-color-saffron-200);
54
+ --semantic-color-fill-action-status-attention-strong-hover: var(--primitive-color-saffron-300);
55
+ --semantic-color-fill-action-status-attention-strong-pressed: var(--primitive-color-saffron-350);
56
+ --semantic-color-fill-action-status-severe-subtle-rest: var(--primitive-color-orange-800);
57
+ --semantic-color-fill-action-status-severe-subtle-hover: var(--primitive-color-orange-700);
58
+ --semantic-color-fill-action-status-severe-subtle-pressed: var(--primitive-color-orange-600);
59
+ --semantic-color-fill-action-status-severe-strong-rest: var(--primitive-color-orange-200);
60
+ --semantic-color-fill-action-status-severe-strong-hover: var(--primitive-color-orange-250);
61
+ --semantic-color-fill-action-status-severe-strong-pressed: var(--primitive-color-orange-300);
53
62
  --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-200);
54
63
  --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-150);
55
64
  --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-100);
@@ -60,7 +69,8 @@
60
69
  --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-800);
61
70
  --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-700);
62
71
  --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-600);
63
- --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-500);
72
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-100);
73
+ --semantic-color-fill-static-neutral-bold: var(--primitive-color-warm-neutral-500);
64
74
  --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-25);
65
75
  --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
66
76
  --semantic-color-fill-static-brand-base: var(--primitive-color-brand-100);
@@ -89,6 +99,7 @@
89
99
  --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
90
100
  --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
91
101
  --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
102
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-cool-neutral-900);
92
103
  --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-175);
93
104
  --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-150);
94
105
  --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-125);
@@ -98,18 +109,23 @@
98
109
  --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-100);
99
110
  --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-75);
100
111
  --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-50);
112
+ --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-900);
101
113
  --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-300);
102
114
  --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-200);
103
115
  --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-150);
116
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-cool-neutral-900);
104
117
  --semantic-color-foreground-action-status-attention-on-subtle-rest: var(--primitive-color-saffron-300);
105
118
  --semantic-color-foreground-action-status-attention-on-subtle-hover: var(--primitive-color-saffron-200);
106
119
  --semantic-color-foreground-action-status-attention-on-subtle-pressed: var(--primitive-color-saffron-150);
120
+ --semantic-color-foreground-action-status-attention-on-strong: var(--primitive-color-cool-neutral-900);
107
121
  --semantic-color-foreground-action-status-severe-on-subtle-rest: var(--primitive-color-orange-250);
108
122
  --semantic-color-foreground-action-status-severe-on-subtle-hover: var(--primitive-color-orange-200);
109
123
  --semantic-color-foreground-action-status-severe-on-subtle-pressed: var(--primitive-color-orange-150);
124
+ --semantic-color-foreground-action-status-severe-on-strong: var(--primitive-color-cool-neutral-900);
110
125
  --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-200);
111
126
  --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-150);
112
127
  --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-100);
128
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-900);
113
129
  --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
114
130
  --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-250);
115
131
  --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-175);
@@ -166,6 +182,7 @@
166
182
  --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-700);
167
183
  --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-450);
168
184
  --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-200);
185
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
169
186
  --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-700);
170
187
  --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-350);
171
188
  --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-800);