@helloimjolopez-pathway/pathway-tokens 11.2.0 → 11.4.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.
Files changed (13) hide show
  1. package/README.md +49 -28
  2. package/dist/README.md +4 -4
  3. package/dist/brands/newco/themes/dark.css +1 -1
  4. package/dist/brands/newco/themes/light.css +1 -1
  5. package/dist/contract.json +8 -6
  6. package/dist/layout-responsive.css +12 -1
  7. package/dist/themes/amplify-dark.css +233 -0
  8. package/dist/themes/amplify-light.css +234 -0
  9. package/dist/themes/light.css +6 -1
  10. package/dist/themes/midnight.css +4 -1
  11. package/dist/tokens.js +66 -0
  12. package/dist/tokens.json +36 -0
  13. package/package.json +11 -6
package/README.md CHANGED
@@ -20,7 +20,7 @@ one name set rather than each having their own.
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
- | Sheet and TopNav padding (`layout-responsive.css`) | 6 | Yes |
23
+ | Sheet and TopNav padding, and the touch target minimum (`layout-responsive.css`) | 11 | Yes |
24
24
  | Breakpoints (`breakpoints.css`) | 5 | Yes |
25
25
  | **Working vocabulary** | **284** | |
26
26
  | Raw ramps (`primitives.css`) | 350 | **No**, but you must load it |
@@ -66,14 +66,14 @@ as too granular to adopt. Retired 2026-09-03 and not coming back.
66
66
 
67
67
  ```html
68
68
  <!-- primitives first: the themes reference these via var(), so this must load -->
69
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/primitives.css" />
70
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/themes/light.css" />
71
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/themes/midnight.css" />
72
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/type.css" />
73
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/layout.css" />
74
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/layout-responsive.css" />
75
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/motion.css" />
76
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloimjolopez-collab/pathway-ds@main/src/tokens/breakpoints.css" />
69
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/primitives.css" />
70
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/themes/light.css" />
71
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/themes/midnight.css" />
72
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/type.css" />
73
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/layout.css" />
74
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/layout-responsive.css" />
75
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/motion.css" />
76
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@helloimjolopez-pathway/pathway-tokens/dist/breakpoints.css" />
77
77
  ```
78
78
 
79
79
  `@main` tracks the latest. Pin a tag instead if you need a fixed version.
@@ -178,27 +178,30 @@ it was measured from. This table is generated from
178
178
 
179
179
  <!-- BEGIN component-index (generated by scripts/build-component-index.js) -->
180
180
 
181
- **17 components with their own page, 2 building blocks that only exist nested.**
181
+ **20 components with their own page, 2 building blocks that only exist nested.**
182
182
 
183
183
  | Component | Spec | Module | Storybook | Figma node | Code Connect files |
184
184
  |---|---|---|---|---|---|
185
- | **SideNav** | [spec](components/sidenav/sidenav-spec.md) | [`sidenav.jsx`](components/sidenav/sidenav.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-sidenav--docs) | `40004059:1375` | 9 |
186
- | **Scrollable** | [spec](components/scrollbar/scrollbar-spec.md) | [`scrollbar.jsx`](components/scrollbar/scrollbar.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-scrollbar--docs) | repo only, not in Figma | 0 |
187
- | **Checkbox** | [spec](components/checkbox/checkbox-spec.md) | [`checkbox.jsx`](components/checkbox/checkbox.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-checkbox--docs) | `40002324:54532` | 1 |
188
- | **OrgSwitcher** | [spec](components/org-switcher/org-switcher-spec.md) | [`org-switcher.jsx`](components/org-switcher/org-switcher.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-orgswitcher--docs) | `40006819:14583` | 2 |
189
- | **TopNav.Global** | [spec](components/top-nav/top-nav-spec.md) | [`top-nav.jsx`](components/top-nav/top-nav.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-topnav--docs) | `40007067:6508` | 4 |
190
- | **Spinner** | [spec](components/spinner/spinner-spec.md) | [`spinner.jsx`](components/spinner/spinner.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-spinner--docs) | `40006622:50003` | 0 |
191
- | **Button** | [spec](components/button/button-spec.md) | [`button.jsx`](components/button/button.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-button--docs) | `40003293:93741` | 3 |
192
- | **Search** | [spec](components/search/search-spec.md) | [`search.jsx`](components/search/search.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-global-search-top-nav--docs) | `40007095:4048` | 1 |
193
- | **NavShell** | [spec](components/nav-shell/nav-shell-spec.md) | composed, see its stories | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-navshell--docs) | 3 sets on page `Navigation: Top Nav, Navigation: Side Nav, Page Template` | 0 |
194
- | **Widget** | [spec](components/widget/widget-spec.md) | [`widget.jsx`](components/widget/widget.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-widget--docs) | `40009622:39702` | 2 |
195
- | **KPI Tile** | [spec](components/kpi-tile/kpi-tile-spec.md) | [`kpi-tile.jsx`](components/kpi-tile/kpi-tile.jsx)<br>[`kpi-number-trend.jsx`](components/kpi-tile/kpi-number-trend.jsx)<br>[`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx)<br>[`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-kpi-tile--docs) | 7 sets on page `40009862:10309` | 9 |
196
- | **Dashboard** | [spec](components/dashboard/dashboard-spec.md) | [`dashboard.jsx`](components/dashboard/dashboard.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-dashboard--docs) | no Figma component | 0 |
197
- | **Icon** | [spec](components/icon/icon-spec.md) | [`icon.jsx`](components/icon/icon.jsx)<br>[`action-icon.jsx`](components/icon/action-icon.jsx)<br>[`display-icon.jsx`](components/icon/display-icon.jsx)<br>[`featured-icon.jsx`](components/icon/featured-icon.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-action-icon--docs) | `48:1153` | 4 |
198
- | **Dropdown** | [spec](components/dropdown/dropdown-spec.md) | [`dropdown.jsx`](components/dropdown/dropdown.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-dropdown--docs) | `40005568:4207` | 3 |
199
- | **Mini Chart** | [spec](components/kpi-tile/mini-chart-spec.md) | [`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-mini-chart--docs) | `40009415:27919` | 1 |
200
- | **Bar Chart** | [spec](components/kpi-tile/bar-chart-spec.md) | [`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-bar-chart--docs) | `40009417:13029` | 3 |
201
- | **Page Template** | [spec](components/page-template/page-template-spec.md) | [`page-template.jsx`](components/page-template/page-template.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-page-template--docs) | `40009709:26016` | 0 |
185
+ | **SideNav** | [spec](components/sidenav/sidenav-spec.md) | [`sidenav.jsx`](components/sidenav/sidenav.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-sidenav--docs) | `40004059:1375` | 9 |
186
+ | **Scrollable** | [spec](components/scrollbar/scrollbar-spec.md) | [`scrollbar.jsx`](components/scrollbar/scrollbar.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-scrollbar--docs) | repo only, not in Figma | 0 |
187
+ | **Checkbox** | [spec](components/checkbox/checkbox-spec.md) | [`checkbox.jsx`](components/checkbox/checkbox.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-checkbox--docs) | `40002324:54532` | 1 |
188
+ | **OrgSwitcher** | [spec](components/org-switcher/org-switcher-spec.md) | [`org-switcher.jsx`](components/org-switcher/org-switcher.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-orgswitcher--docs) | `40006819:14583` | 2 |
189
+ | **TopNav.Global** | [spec](components/top-nav/top-nav-spec.md) | [`top-nav.jsx`](components/top-nav/top-nav.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-topnav--docs) | `40007067:6508` | 4 |
190
+ | **Spinner** | [spec](components/spinner/spinner-spec.md) | [`spinner.jsx`](components/spinner/spinner.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-spinner--docs) | `40006622:50003` | 0 |
191
+ | **Badge** | [spec](components/badge/badge-spec.md) | [`badge.jsx`](components/badge/badge.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-badge--docs) | `40017025:86804` | 0 |
192
+ | **Button** | [spec](components/button/button-spec.md) | [`button.jsx`](components/button/button.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-button--docs) | `40003293:93741` | 3 |
193
+ | **Search** | [spec](components/search/search-spec.md) | [`search.jsx`](components/search/search.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-global-search-top-nav--docs) | `40007095:4048` | 1 |
194
+ | **NavShell** | [spec](components/nav-shell/nav-shell-spec.md) | composed, see its stories | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-navshell--docs) | 3 sets on page `Navigation: Top Nav, Navigation: Side Nav, Page Template` | 0 |
195
+ | **Widget** | [spec](components/widget/widget-spec.md) | [`widget.jsx`](components/widget/widget.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-widget--docs) | `40009622:39702` | 2 |
196
+ | **KPI Tile** | [spec](components/kpi-tile/kpi-tile-spec.md) | [`kpi-tile.jsx`](components/kpi-tile/kpi-tile.jsx)<br>[`kpi-number-trend.jsx`](components/kpi-tile/kpi-number-trend.jsx)<br>[`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx)<br>[`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-kpi-tile--docs) | 7 sets on page `40009862:10309` | 9 |
197
+ | **Dashboard** | [spec](components/dashboard/dashboard-spec.md) | [`dashboard.jsx`](components/dashboard/dashboard.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-dashboard--docs) | no Figma component | 0 |
198
+ | **Financial KPIs** | none | [`financial-kpis.jsx`](components/financial-kpis/financial-kpis.jsx) | none | no Figma component | 0 |
199
+ | **Icon** | [spec](components/icon/icon-spec.md) | [`icon.jsx`](components/icon/icon.jsx)<br>[`action-icon.jsx`](components/icon/action-icon.jsx)<br>[`display-icon.jsx`](components/icon/display-icon.jsx)<br>[`featured-icon.jsx`](components/icon/featured-icon.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-action-icon--docs) | `48:1153` | 4 |
200
+ | **Dropdown** | [spec](components/dropdown/dropdown-spec.md) | [`dropdown.jsx`](components/dropdown/dropdown.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-dropdown--docs) | `40005568:4207` | 3 |
201
+ | **Mini Chart** | [spec](components/kpi-tile/mini-chart-spec.md) | [`mini-chart.jsx`](components/kpi-tile/mini-chart.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-mini-chart--docs) | `40009415:27919` | 1 |
202
+ | **Bar Chart** | [spec](components/kpi-tile/bar-chart-spec.md) | [`bar-chart.jsx`](components/kpi-tile/bar-chart.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-bar-chart--docs) | `40009417:13029` | 3 |
203
+ | **Page Template** | [spec](components/page-template/page-template-spec.md) | [`page-template.jsx`](components/page-template/page-template.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-page-template--docs) | `40009709:26016` | 0 |
204
+ | **Tooltip** | [spec](components/tooltip/tooltip-spec.md) | [`tooltip.jsx`](components/tooltip/tooltip.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-tooltip--docs) | `40018655:12004` | 0 |
202
205
 
203
206
  Building blocks. Each is mapped for Code Connect and specced, but has no page
204
207
  of its own because it only ever appears as a nested instance inside the
@@ -207,7 +210,7 @@ component above it.
207
210
  | Component | Spec | Module | Storybook | Figma node | Code Connect files |
208
211
  |---|---|---|---|---|---|
209
212
  | **ModuleIcon** | [spec](components/module-icon/module-icon-spec.md) | [`module-icon.jsx`](components/module-icon/module-icon.jsx) | nested only | `40006876:42134` | 1 |
210
- | **TopNav.Actions** | [spec](components/top-nav-actions/top-nav-actions-spec.md) | [`top-nav.jsx`](components/top-nav/top-nav.jsx) | [open](https://helloimjolopez-collab.github.io/pathway-ds/storybook/?path=/docs/library-topnav--docs) | `40007082:7313` | 1 |
213
+ | **TopNav.Actions** | [spec](components/top-nav-actions/top-nav-actions-spec.md) | [`top-nav.jsx`](components/top-nav/top-nav.jsx) | [open](https://potential-bassoon-voz982n.pages.github.io/storybook/?path=/docs/library-topnav--docs) | `40007082:7313` | 1 |
211
214
 
212
215
  <!-- END component-index -->
213
216
 
@@ -336,6 +339,24 @@ A Widget is a container that does not know what it holds. A KPI Tile is a card
336
339
  in its own right. Both nest the same building block, `KpiNumberAndTrend`, which
337
340
  has no card of its own and gets one from whatever nests it.
338
341
 
342
+ ## Planned changes
343
+
344
+ ### Touch target tokens move to `Responsive: Layout` (open)
345
+
346
+ Decided 2026-10-30. Not done yet. Until it ships, the six tokens below stay in `layout.css` under their current names, and every place that documents them carries an "Open: this token moves to Responsive: Layout" note.
347
+
348
+ | What | Detail |
349
+ |---|---|
350
+ | Goal | All touch target tokens live in `Responsive: Layout`; none remain in `Semantic: Layout & Units` |
351
+ | Tokens to move | Accessibility/Touch Target/AA, AAA and Desktop Only (Height and Width), next to Touch Target/Minimum |
352
+ | Values | The same names and values, with a value for every mode (Desktop, Tablet, Mobile) |
353
+ | Code | CSS names change from `--semantic-layout-units-accessibility-touch-target-*` to `--responsive-layout-accessibility-touch-target-*`. Ships as a major release, with the old names kept as aliases for one release |
354
+ | Deprecate | The old Figma variables are described "Deprecated: moved to Responsive: Layout on <date>, use <new name>" and hidden from publishing, then deleted after one release |
355
+ | Token contract | `layout-responsive.css` is documented as holding only tokens that change by breakpoint. That line is updated as part of the move so it also covers touch targets |
356
+ | Components | Component touch frames rebind to Touch Target/Minimum in code and in Figma together, in the same release |
357
+
358
+ The first step shipped in 11.4.0: `--responsive-layout-touch-target-minimum-height` and `-width` (36 on desktop, 44 on tablet and mobile). See [CHANGELOG.md](CHANGELOG.md).
359
+
339
360
  ## Component-to-token map
340
361
 
341
362
  `tokens/component-token-map.json` maps every component element to its CSS variable. Use this file to answer "which token does X use?" without reading specs.
package/dist/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # Pathway design tokens
2
2
 
3
3
  **The colour contract is 210 names.** Your full working vocabulary is
4
- **360**. If you add up every declaration in this folder you get
5
- 1155. That number is not the contract, and the table below says why.
4
+ **362**. If you add up every declaration in this folder you get
5
+ 1157. That number is not the contract, and the table below says why.
6
6
 
7
7
  ## Link these, in this order
8
8
 
@@ -32,7 +32,7 @@ error**.
32
32
  | `layout.css` | 76 | yes | yes | Spacing, radii, border widths. |
33
33
  | `layout-contextual.css` | 37 | **no** | **no** | Per-component metrics. This repo's components use these. |
34
34
  | `motion.css` | 21 | yes | yes | Durations and easings. |
35
- | `layout-responsive.css` | 9 | yes | yes | Sheet and TopNav padding. The only layout tokens with media queries. |
35
+ | `layout-responsive.css` | 11 | yes | yes | Sheet and TopNav padding, and the touch target minimum. 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.
@@ -183,4 +183,4 @@ motion at all and no warning, so consume the package instead.
183
183
 
184
184
  ---
185
185
 
186
- Repo: https://github.com/helloimjolopez-collab/pathway-ds
186
+ Repo: https://github.com/ministry-brands-llc/jolopez-collab-pathwayds
package/dist/brands/newco/themes/dark.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- [data-brand="newco"][data-theme="dark"], [data-brand="newco"][data-theme="midnight"] {
5
+ [data-brand="newco"][data-theme="dark"], [data-brand="newco"][data-theme="midnight"], [data-theme="newco-dark"] {
6
6
  --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-350-8);
7
7
  --semantic-color-fill-action-ghost-hover: var(--primitive-color-midnight-350-8);
8
8
  --semantic-color-fill-action-ghost-pressed: var(--primitive-color-midnight-900-36);
package/dist/brands/newco/themes/light.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- [data-brand="newco"], [data-brand="newco"][data-theme="light"] {
5
+ [data-brand="newco"], [data-brand="newco"][data-theme="light"], [data-theme="newco-light"] {
6
6
  --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-350-4);
7
7
  --semantic-color-fill-action-ghost-hover: var(--primitive-color-brand-400-24);
8
8
  --semantic-color-fill-action-ghost-pressed: var(--primitive-color-brand-400-50);
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": "11.2.0",
4
- "generated": "2026-10-13",
3
+ "version": "11.4.0",
4
+ "generated": "2026-10-30",
5
5
  "counts": {
6
- "contract": 360,
6
+ "contract": 362,
7
7
  "infrastructure": 585,
8
- "declarationsAcrossAllFiles": 1155
8
+ "declarationsAcrossAllFiles": 1157
9
9
  },
10
10
  "loadOrder": [
11
11
  "primitives.css",
@@ -63,8 +63,8 @@
63
63
  "layout-responsive.css": {
64
64
  "contract": true,
65
65
  "mustLoad": true,
66
- "count": 9,
67
- "role": "Sheet and TopNav padding. The only layout tokens with media queries."
66
+ "count": 11,
67
+ "role": "Sheet and TopNav padding, and the touch target minimum. The only layout tokens with media queries."
68
68
  },
69
69
  "breakpoints.css": {
70
70
  "contract": true,
@@ -162,6 +162,8 @@
162
162
  "--responsive-layout-topnav-gap-horizontal",
163
163
  "--responsive-layout-topnav-padding-horizontal",
164
164
  "--responsive-layout-topnav-padding-vertical",
165
+ "--responsive-layout-touch-target-minimum-height",
166
+ "--responsive-layout-touch-target-minimum-width",
165
167
  "--semantic-color-fill-action-disabled",
166
168
  "--semantic-color-fill-action-ghost-hover",
167
169
  "--semantic-color-fill-action-ghost-pressed",
package/dist/layout-responsive.css CHANGED
@@ -14,7 +14,12 @@
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 23 custom properties.
17
+ Touch Target/Minimum (added 2026-10-30) is here for the same reason: it is
18
+ 36 on desktop and 44 on tablet and mobile. The other touch target tokens
19
+ are still single-valued in layout.css; moving them here is planned (see
20
+ README, Planned changes).
21
+
22
+ Declares 29 custom properties.
18
23
  Generated: do not edit. Run `npm run build-tokens`.
19
24
  ==========================================================================
20
25
  */
@@ -28,6 +33,8 @@
28
33
  --responsive-layout-topnav-gap-horizontal: 8px;
29
34
  --responsive-layout-topnav-padding-horizontal: 16px;
30
35
  --responsive-layout-topnav-padding-vertical: 6px;
36
+ --responsive-layout-touch-target-minimum-height: 36px;
37
+ --responsive-layout-touch-target-minimum-width: 36px;
31
38
  }
32
39
 
33
40
  @media (max-width: 1023px) {
@@ -39,6 +46,8 @@
39
46
  --responsive-layout-sheetcontainer-padding-horizontal: 16px;
40
47
  --responsive-layout-sheetcontainer-padding-top: 12px;
41
48
  --responsive-layout-topnav-padding-horizontal: 14px;
49
+ --responsive-layout-touch-target-minimum-height: 44px;
50
+ --responsive-layout-touch-target-minimum-width: 44px;
42
51
  }
43
52
  }
44
53
 
@@ -51,5 +60,7 @@
51
60
  --responsive-layout-sheetcontainer-padding-horizontal: 12px;
52
61
  --responsive-layout-sheetcontainer-padding-top: 8px;
53
62
  --responsive-layout-topnav-padding-horizontal: 6px;
63
+ --responsive-layout-touch-target-minimum-height: 44px;
64
+ --responsive-layout-touch-target-minimum-width: 44px;
54
65
  }
55
66
  }
package/dist/themes/amplify-dark.css ADDED
@@ -0,0 +1,233 @@
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS, CONTRACT
4
+ ==========================================================================
5
+
6
+ The colour contract, Amplify Dark. Identical names to Amplify Light.
7
+
8
+ THIS FILE IS NAMED FOR ITS FIGMA MODE; themes/midnight.css is the same
9
+ bytes under Pathway's own word for dark mode and still works.
10
+
11
+ Three selectors resolve to this mode: [data-theme="dark"],
12
+ [data-theme="midnight"] and [data-theme="amplify-dark"].
13
+
14
+ On the graded ladder the VALUES invert while the NAMES hold: Faint is
15
+ still the lightest-touch step even though here it is a dark near-ground.
16
+ White, XLight and Black are inversion anchors and keep their value.
17
+
18
+ Declares 210 custom properties.
19
+ Generated: do not edit. Run `npm run build-tokens`.
20
+ ==========================================================================
21
+ */
22
+ [data-theme="dark"], [data-theme="midnight"], [data-theme="amplify-dark"] {
23
+ --elevation-lift: 0 10px 28px -6px rgba(0,1,19,0.70);
24
+ --elevation-overlay: 0 20px 48px -10px rgba(0,1,19,0.70);
25
+ --elevation-sheet: 0 4px 32px -8px rgba(0,1,19,0.70);
26
+ --elevation-widget: 0 2px 8px -2px rgba(0,1,19,0.70);
27
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-16);
28
+ --semantic-color-fill-action-ghost-hover: var(--primitive-color-cool-neutral-0-16);
29
+ --semantic-color-fill-action-ghost-pressed: var(--primitive-color-brand-600-70);
30
+ --semantic-color-fill-action-ghost-rest: var(--primitive-color-cool-neutral-0-8);
31
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-450);
32
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-500);
33
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-400);
34
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-75-8);
35
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-600-50);
36
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-600);
37
+ --semantic-color-fill-action-secondary-hover: var(--primitive-color-midnight-700);
38
+ --semantic-color-fill-action-secondary-pressed: var(--primitive-color-midnight-600);
39
+ --semantic-color-fill-action-secondary-rest: var(--primitive-color-midnight-800);
40
+ --semantic-color-fill-action-selection-hover: var(--primitive-color-midnight-350-16);
41
+ --semantic-color-fill-action-selection-indicator: var(--primitive-color-brand-200);
42
+ --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-400-36);
43
+ --semantic-color-fill-action-selection-trail: var(--primitive-color-midnight-350-24);
44
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-500);
45
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-600);
46
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-400);
47
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-350-24);
48
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-350-36);
49
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-350-16);
50
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-500);
51
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-600);
52
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-400);
53
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-300-24);
54
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-300-36);
55
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-300-16);
56
+ --semantic-color-fill-action-status-neutral-strong-hover: var(--primitive-color-warm-neutral-500);
57
+ --semantic-color-fill-action-status-neutral-strong-pressed: var(--primitive-color-warm-neutral-600);
58
+ --semantic-color-fill-action-status-neutral-strong-rest: var(--primitive-color-warm-neutral-400);
59
+ --semantic-color-fill-action-status-neutral-subtle-hover: var(--primitive-color-warm-neutral-500-24);
60
+ --semantic-color-fill-action-status-neutral-subtle-pressed: var(--primitive-color-warm-neutral-500-36);
61
+ --semantic-color-fill-action-status-neutral-subtle-rest: var(--primitive-color-warm-neutral-500-16);
62
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-300);
63
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-350);
64
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-200);
65
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-350-24);
66
+ --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-350-36);
67
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-350-16);
68
+ --semantic-color-fill-shadow-dropshadow: var(--primitive-color-midnight-975-70);
69
+ --semantic-color-fill-static-accent-citrine-strong: var(--primitive-color-citrine-150);
70
+ --semantic-color-fill-static-accent-citrine-subtle: var(--primitive-color-citrine-350-16);
71
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-150);
72
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-300-16);
73
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-150);
74
+ --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-300-16);
75
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-500);
76
+ --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-350-16);
77
+ --semantic-color-fill-static-accent-rose-strong: var(--primitive-color-rose-500);
78
+ --semantic-color-fill-static-accent-rose-subtle: var(--primitive-color-rose-350-16);
79
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-150);
80
+ --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-300-16);
81
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-150);
82
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-150-16);
83
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-600);
84
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-800);
85
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-200);
86
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-150);
87
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-700);
88
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-200);
89
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-350-16);
90
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-400);
91
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-300-16);
92
+ --semantic-color-fill-static-neutral-base: var(--primitive-color-midnight-800);
93
+ --semantic-color-fill-static-neutral-faint: var(--primitive-color-midnight-900);
94
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-cool-neutral-0);
95
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-midnight-350);
96
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-midnight-850);
97
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-300);
98
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-350-16);
99
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
100
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-350-16);
101
+ --semantic-color-fill-surface-canvas: var(--primitive-color-midnight-950);
102
+ --semantic-color-fill-surface-chrome: var(--primitive-color-brand-700);
103
+ --semantic-color-fill-surface-elevated: var(--primitive-color-midnight-925);
104
+ --semantic-color-fill-surface-overlay: var(--primitive-color-midnight-975);
105
+ --semantic-color-fill-chart-sequential-10: var(--primitive-color-amethyst-400);
106
+ --semantic-color-fill-chart-sequential-11: var(--primitive-color-amethyst-500);
107
+ --semantic-color-fill-chart-sequential-12: var(--primitive-color-amethyst-600);
108
+ --semantic-color-fill-chart-sequential-13: var(--primitive-color-amethyst-700);
109
+ --semantic-color-fill-chart-sequential-14: var(--primitive-color-amethyst-800);
110
+ --semantic-color-fill-chart-sequential-15: var(--primitive-color-amethyst-900);
111
+ --semantic-color-fill-chart-sequential-01: var(--primitive-color-amethyst-25);
112
+ --semantic-color-fill-chart-sequential-02: var(--primitive-color-amethyst-50);
113
+ --semantic-color-fill-chart-sequential-03: var(--primitive-color-amethyst-75);
114
+ --semantic-color-fill-chart-sequential-04: var(--primitive-color-amethyst-100);
115
+ --semantic-color-fill-chart-sequential-05: var(--primitive-color-amethyst-150);
116
+ --semantic-color-fill-chart-sequential-06: var(--primitive-color-amethyst-200);
117
+ --semantic-color-fill-chart-sequential-07: var(--primitive-color-amethyst-250);
118
+ --semantic-color-fill-chart-sequential-08: var(--primitive-color-amethyst-300);
119
+ --semantic-color-fill-chart-sequential-09: var(--primitive-color-amethyst-350);
120
+ --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-amethyst-900);
121
+ --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-amethyst-25);
122
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-0-50);
123
+ --semantic-color-foreground-action-ghost-hover: var(--primitive-color-midnight-25);
124
+ --semantic-color-foreground-action-ghost-pressed: var(--primitive-color-midnight-0);
125
+ --semantic-color-foreground-action-ghost-rest: var(--primitive-color-midnight-50);
126
+ --semantic-color-foreground-action-primary-on-strong: var(--primitive-color-cool-neutral-0);
127
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-25);
128
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-0);
129
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-50);
130
+ --semantic-color-foreground-action-secondary-hover: var(--primitive-color-midnight-50);
131
+ --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-midnight-25);
132
+ --semantic-color-foreground-action-secondary-rest: var(--primitive-color-midnight-100);
133
+ --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-0);
134
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-100);
135
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-50);
136
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-150);
137
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
138
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-100);
139
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-50);
140
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-150);
141
+ --semantic-color-foreground-action-status-neutral-on-strong: var(--primitive-color-cool-neutral-0);
142
+ --semantic-color-foreground-action-status-neutral-on-subtle-hover: var(--primitive-color-midnight-100);
143
+ --semantic-color-foreground-action-status-neutral-on-subtle-pressed: var(--primitive-color-midnight-50);
144
+ --semantic-color-foreground-action-status-neutral-on-subtle-rest: var(--primitive-color-midnight-150);
145
+ --semantic-color-foreground-action-status-positive-on-strong: var(--primitive-color-green-900);
146
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-100);
147
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-75);
148
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-150);
149
+ --semantic-color-foreground-static-accent-citrine-on-strong: var(--primitive-color-citrine-800);
150
+ --semantic-color-foreground-static-accent-citrine-on-subtle: var(--primitive-color-citrine-150);
151
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-jade-800);
152
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-150);
153
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-lagoon-800);
154
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-150);
155
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-0);
156
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-25);
157
+ --semantic-color-foreground-static-accent-rose-on-strong: var(--primitive-color-cool-neutral-0);
158
+ --semantic-color-foreground-static-accent-rose-on-subtle: var(--primitive-color-rose-150);
159
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-cool-neutral-900);
160
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-200);
161
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-cool-neutral-900);
162
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-150);
163
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-900);
164
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-150);
165
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-amethyst-900);
166
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-150);
167
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-cool-neutral-0);
168
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-150);
169
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-midnight-50);
170
+ --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-25);
171
+ --semantic-color-foreground-static-neutral-faint: var(--primitive-color-midnight-300);
172
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-midnight-900);
173
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-0);
174
+ --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-midnight-150);
175
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-green-800);
176
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-150);
177
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-orange-800);
178
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-150);
179
+ --semantic-color-scrim-base: var(--primitive-color-midnight-900-36);
180
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-0-16);
181
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-0-24);
182
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-0-50);
183
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-100-24);
184
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-0-36);
185
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-0-50);
186
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-0-24);
187
+ --semantic-color-stroke-action-ghost-hover: var(--primitive-color-cool-neutral-0-50);
188
+ --semantic-color-stroke-action-ghost-pressed: var(--primitive-color-cool-neutral-0-70);
189
+ --semantic-color-stroke-action-ghost-rest: var(--primitive-color-cool-neutral-0-36);
190
+ --semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-250);
191
+ --semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-200);
192
+ --semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-300);
193
+ --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-125);
194
+ --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-100);
195
+ --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-150);
196
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-midnight-300);
197
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-midnight-200);
198
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-midnight-400);
199
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-150);
200
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-100);
201
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-200);
202
+ --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-150);
203
+ --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-100);
204
+ --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-200);
205
+ --semantic-color-stroke-action-status-neutral-hover: var(--primitive-color-midnight-300);
206
+ --semantic-color-stroke-action-status-neutral-pressed: var(--primitive-color-midnight-200);
207
+ --semantic-color-stroke-action-status-neutral-rest: var(--primitive-color-midnight-400);
208
+ --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-100);
209
+ --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-75);
210
+ --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-150);
211
+ --semantic-color-stroke-focusring-base: var(--primitive-color-brand-150);
212
+ --semantic-color-stroke-static-accent-citrine: var(--primitive-color-citrine-350);
213
+ --semantic-color-stroke-static-accent-jade: var(--primitive-color-jade-400);
214
+ --semantic-color-stroke-static-accent-lagoon: var(--primitive-color-lagoon-400);
215
+ --semantic-color-stroke-static-accent-mauve: var(--primitive-color-mauve-350);
216
+ --semantic-color-stroke-static-accent-rose: var(--primitive-color-rose-350);
217
+ --semantic-color-stroke-static-accent-seabreeze: var(--primitive-color-seabreeze-350);
218
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-150);
219
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-300);
220
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-300);
221
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-400);
222
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-300);
223
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-500);
224
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-midnight-700);
225
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-midnight-500);
226
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-midnight-800);
227
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
228
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-midnight-400);
229
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-150);
230
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-400);
231
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-150);
232
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-300);
233
+ }
package/dist/themes/amplify-light.css ADDED
@@ -0,0 +1,234 @@
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS, CONTRACT
4
+ ==========================================================================
5
+
6
+ The colour contract, Amplify Light. Name these freely.
7
+
8
+ Load primitives.css FIRST; every file below resolves through it.
9
+
10
+ THIS FILE IS NAMED FOR ITS FIGMA MODE. The panel's Semantic: Color
11
+ collection carries Amplify Light, Amplify Dark, NewCo Light and NewCo
12
+ Dark, and each one ships under that name. themes/light.css is the same
13
+ bytes under the name consumers have always used, and it is not going
14
+ away; scripts/check-distribution.js keeps the two in step.
15
+
16
+ Three selectors resolve to this mode: :root, [data-theme="light"] and
17
+ [data-theme="amplify-light"]. Reach for the last one in new code.
18
+
19
+ Declares 210 custom properties.
20
+ Generated: do not edit. Run `npm run build-tokens`.
21
+ ==========================================================================
22
+ */
23
+ :root, [data-theme="light"], [data-theme="amplify-light"] {
24
+ --elevation-lift: 0 10px 28px -6px rgba(24,27,43,0.08);
25
+ --elevation-overlay: 0 20px 48px -10px rgba(24,27,43,0.08);
26
+ --elevation-sheet: 0 4px 32px -8px rgba(24,27,43,0.08);
27
+ --elevation-widget: 0 2px 8px -2px rgba(24,27,43,0.08);
28
+ --semantic-color-fill-action-disabled: var(--primitive-color-warm-neutral-100-36);
29
+ --semantic-color-fill-action-ghost-hover: var(--primitive-color-brand-75-16);
30
+ --semantic-color-fill-action-ghost-pressed: var(--primitive-color-brand-600-70);
31
+ --semantic-color-fill-action-ghost-rest: var(--primitive-color-brand-75-8);
32
+ --semantic-color-fill-action-primary-strong-hover: var(--primitive-color-brand-500);
33
+ --semantic-color-fill-action-primary-strong-pressed: var(--primitive-color-brand-550);
34
+ --semantic-color-fill-action-primary-strong-rest: var(--primitive-color-brand-450);
35
+ --semantic-color-fill-action-primary-subtle-hover: var(--primitive-color-brand-25);
36
+ --semantic-color-fill-action-primary-subtle-pressed: var(--primitive-color-brand-50);
37
+ --semantic-color-fill-action-primary-subtle-rest: var(--primitive-color-brand-10);
38
+ --semantic-color-fill-action-secondary-hover: var(--primitive-color-warm-neutral-50);
39
+ --semantic-color-fill-action-secondary-pressed: var(--primitive-color-warm-neutral-75);
40
+ --semantic-color-fill-action-secondary-rest: var(--primitive-color-warm-neutral-25);
41
+ --semantic-color-fill-action-selection-hover: var(--primitive-color-warm-neutral-100-24);
42
+ --semantic-color-fill-action-selection-indicator: var(--primitive-color-brand-550);
43
+ --semantic-color-fill-action-selection-selected: var(--primitive-color-brand-75-24);
44
+ --semantic-color-fill-action-selection-trail: var(--primitive-color-warm-neutral-500-8);
45
+ --semantic-color-fill-action-status-info-strong-hover: var(--primitive-color-amethyst-500);
46
+ --semantic-color-fill-action-status-info-strong-pressed: var(--primitive-color-amethyst-600);
47
+ --semantic-color-fill-action-status-info-strong-rest: var(--primitive-color-amethyst-400);
48
+ --semantic-color-fill-action-status-info-subtle-hover: var(--primitive-color-amethyst-100);
49
+ --semantic-color-fill-action-status-info-subtle-pressed: var(--primitive-color-amethyst-200);
50
+ --semantic-color-fill-action-status-info-subtle-rest: var(--primitive-color-amethyst-75);
51
+ --semantic-color-fill-action-status-negative-strong-hover: var(--primitive-color-red-500);
52
+ --semantic-color-fill-action-status-negative-strong-pressed: var(--primitive-color-red-600);
53
+ --semantic-color-fill-action-status-negative-strong-rest: var(--primitive-color-red-400);
54
+ --semantic-color-fill-action-status-negative-subtle-hover: var(--primitive-color-red-50);
55
+ --semantic-color-fill-action-status-negative-subtle-pressed: var(--primitive-color-red-75);
56
+ --semantic-color-fill-action-status-negative-subtle-rest: var(--primitive-color-red-25);
57
+ --semantic-color-fill-action-status-neutral-strong-hover: var(--primitive-color-warm-neutral-500);
58
+ --semantic-color-fill-action-status-neutral-strong-pressed: var(--primitive-color-warm-neutral-600);
59
+ --semantic-color-fill-action-status-neutral-strong-rest: var(--primitive-color-warm-neutral-400);
60
+ --semantic-color-fill-action-status-neutral-subtle-hover: var(--primitive-color-warm-neutral-50);
61
+ --semantic-color-fill-action-status-neutral-subtle-pressed: var(--primitive-color-warm-neutral-75);
62
+ --semantic-color-fill-action-status-neutral-subtle-rest: var(--primitive-color-warm-neutral-25);
63
+ --semantic-color-fill-action-status-positive-strong-hover: var(--primitive-color-green-600);
64
+ --semantic-color-fill-action-status-positive-strong-pressed: var(--primitive-color-green-700);
65
+ --semantic-color-fill-action-status-positive-strong-rest: var(--primitive-color-green-500);
66
+ --semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
67
+ --semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
68
+ --semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
69
+ --semantic-color-fill-chart-sequential-10: var(--primitive-color-amethyst-200);
70
+ --semantic-color-fill-chart-sequential-11: var(--primitive-color-amethyst-150);
71
+ --semantic-color-fill-chart-sequential-12: var(--primitive-color-amethyst-100);
72
+ --semantic-color-fill-chart-sequential-13: var(--primitive-color-amethyst-75);
73
+ --semantic-color-fill-chart-sequential-14: var(--primitive-color-amethyst-50);
74
+ --semantic-color-fill-chart-sequential-15: var(--primitive-color-amethyst-25);
75
+ --semantic-color-fill-chart-sequential-01: var(--primitive-color-amethyst-900);
76
+ --semantic-color-fill-chart-sequential-02: var(--primitive-color-amethyst-800);
77
+ --semantic-color-fill-chart-sequential-03: var(--primitive-color-amethyst-700);
78
+ --semantic-color-fill-chart-sequential-04: var(--primitive-color-amethyst-600);
79
+ --semantic-color-fill-chart-sequential-05: var(--primitive-color-amethyst-500);
80
+ --semantic-color-fill-chart-sequential-06: var(--primitive-color-amethyst-400);
81
+ --semantic-color-fill-chart-sequential-07: var(--primitive-color-amethyst-350);
82
+ --semantic-color-fill-chart-sequential-08: var(--primitive-color-amethyst-300);
83
+ --semantic-color-fill-chart-sequential-09: var(--primitive-color-amethyst-250);
84
+ --semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-amethyst-25);
85
+ --semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-amethyst-900);
86
+ --semantic-color-fill-shadow-dropshadow: var(--primitive-color-brand-600-8);
87
+ --semantic-color-fill-static-accent-citrine-strong: var(--primitive-color-citrine-150);
88
+ --semantic-color-fill-static-accent-citrine-subtle: var(--primitive-color-citrine-50);
89
+ --semantic-color-fill-static-accent-jade-strong: var(--primitive-color-jade-300);
90
+ --semantic-color-fill-static-accent-jade-subtle: var(--primitive-color-jade-25);
91
+ --semantic-color-fill-static-accent-lagoon-strong: var(--primitive-color-lagoon-350);
92
+ --semantic-color-fill-static-accent-lagoon-subtle: var(--primitive-color-lagoon-50);
93
+ --semantic-color-fill-static-accent-mauve-strong: var(--primitive-color-mauve-200);
94
+ --semantic-color-fill-static-accent-mauve-subtle: var(--primitive-color-mauve-25);
95
+ --semantic-color-fill-static-accent-rose-strong: var(--primitive-color-rose-500);
96
+ --semantic-color-fill-static-accent-rose-subtle: var(--primitive-color-rose-50);
97
+ --semantic-color-fill-static-accent-seabreeze-strong: var(--primitive-color-seabreeze-350);
98
+ --semantic-color-fill-static-accent-seabreeze-subtle: var(--primitive-color-seabreeze-50);
99
+ --semantic-color-fill-static-attention-strong: var(--primitive-color-saffron-150);
100
+ --semantic-color-fill-static-attention-subtle: var(--primitive-color-saffron-25);
101
+ --semantic-color-fill-static-brand-base: var(--primitive-color-brand-350);
102
+ --semantic-color-fill-static-brand-faint: var(--primitive-color-brand-10);
103
+ --semantic-color-fill-static-brand-strong: var(--primitive-color-brand-550);
104
+ --semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-700);
105
+ --semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-50);
106
+ --semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-300);
107
+ --semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-75);
108
+ --semantic-color-fill-static-negative-strong: var(--primitive-color-red-500);
109
+ --semantic-color-fill-static-negative-subtle: var(--primitive-color-red-50);
110
+ --semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-50);
111
+ --semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-0);
112
+ --semantic-color-fill-static-neutral-mono: var(--primitive-color-cool-neutral-0);
113
+ --semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-75);
114
+ --semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-25);
115
+ --semantic-color-fill-static-positive-strong: var(--primitive-color-green-150);
116
+ --semantic-color-fill-static-positive-subtle: var(--primitive-color-green-25);
117
+ --semantic-color-fill-static-severe-strong: var(--primitive-color-orange-250);
118
+ --semantic-color-fill-static-severe-subtle: var(--primitive-color-orange-50);
119
+ --semantic-color-fill-surface-canvas: var(--primitive-color-cool-neutral-10);
120
+ --semantic-color-fill-surface-chrome: var(--primitive-color-brand-550);
121
+ --semantic-color-fill-surface-elevated: var(--primitive-color-cool-neutral-0);
122
+ --semantic-color-fill-surface-overlay: var(--primitive-color-cool-neutral-0);
123
+ --semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-900-50);
124
+ --semantic-color-foreground-action-ghost-hover: var(--primitive-color-brand-10);
125
+ --semantic-color-foreground-action-ghost-pressed: var(--primitive-color-brand-0);
126
+ --semantic-color-foreground-action-ghost-rest: var(--primitive-color-brand-25);
127
+ --semantic-color-foreground-action-primary-on-subtle-hover: var(--primitive-color-brand-700);
128
+ --semantic-color-foreground-action-primary-on-subtle-pressed: var(--primitive-color-brand-800);
129
+ --semantic-color-foreground-action-primary-on-subtle-rest: var(--primitive-color-brand-500);
130
+ --semantic-color-foreground-action-secondary-hover: var(--primitive-color-cool-neutral-700);
131
+ --semantic-color-foreground-action-secondary-pressed: var(--primitive-color-cool-neutral-900);
132
+ --semantic-color-foreground-action-secondary-rest: var(--primitive-color-cool-neutral-550);
133
+ --semantic-color-foreground-action-status-info-on-strong: var(--primitive-color-cool-neutral-0);
134
+ --semantic-color-foreground-action-status-info-on-subtle-hover: var(--primitive-color-amethyst-700);
135
+ --semantic-color-foreground-action-status-info-on-subtle-pressed: var(--primitive-color-amethyst-900);
136
+ --semantic-color-foreground-action-status-info-on-subtle-rest: var(--primitive-color-amethyst-600);
137
+ --semantic-color-foreground-action-status-negative-on-strong: var(--primitive-color-cool-neutral-0);
138
+ --semantic-color-foreground-action-status-negative-on-subtle-hover: var(--primitive-color-red-800);
139
+ --semantic-color-foreground-action-status-negative-on-subtle-pressed: var(--primitive-color-red-900);
140
+ --semantic-color-foreground-action-status-negative-on-subtle-rest: var(--primitive-color-red-700);
141
+ --semantic-color-foreground-action-status-neutral-on-strong: var(--primitive-color-cool-neutral-0);
142
+ --semantic-color-foreground-action-status-neutral-on-subtle-hover: var(--primitive-color-cool-neutral-800);
143
+ --semantic-color-foreground-action-status-neutral-on-subtle-pressed: var(--primitive-color-cool-neutral-900);
144
+ --semantic-color-foreground-action-status-neutral-on-subtle-rest: var(--primitive-color-cool-neutral-700);
145
+ --semantic-color-foreground-action-status-positive-on-subtle-hover: var(--primitive-color-green-800);
146
+ --semantic-color-foreground-action-status-positive-on-subtle-pressed: var(--primitive-color-green-900);
147
+ --semantic-color-foreground-action-status-positive-on-subtle-rest: var(--primitive-color-green-700);
148
+ --semantic-color-foreground-static-accent-citrine-on-strong: var(--primitive-color-citrine-800);
149
+ --semantic-color-foreground-static-accent-citrine-on-subtle: var(--primitive-color-citrine-700);
150
+ --semantic-color-foreground-static-accent-jade-on-strong: var(--primitive-color-cool-neutral-900);
151
+ --semantic-color-foreground-static-accent-jade-on-subtle: var(--primitive-color-jade-600);
152
+ --semantic-color-foreground-static-accent-lagoon-on-strong: var(--primitive-color-cool-neutral-900);
153
+ --semantic-color-foreground-static-accent-lagoon-on-subtle: var(--primitive-color-lagoon-800);
154
+ --semantic-color-foreground-static-accent-mauve-on-strong: var(--primitive-color-cool-neutral-900);
155
+ --semantic-color-foreground-static-accent-mauve-on-subtle: var(--primitive-color-mauve-500);
156
+ --semantic-color-foreground-static-accent-rose-on-strong: var(--primitive-color-cool-neutral-0);
157
+ --semantic-color-foreground-static-accent-rose-on-subtle: var(--primitive-color-rose-700);
158
+ --semantic-color-foreground-static-accent-seabreeze-on-strong: var(--primitive-color-cool-neutral-900);
159
+ --semantic-color-foreground-static-accent-seabreeze-on-subtle: var(--primitive-color-seabreeze-700);
160
+ --semantic-color-foreground-static-attention-on-strong: var(--primitive-color-saffron-800);
161
+ --semantic-color-foreground-static-attention-on-subtle: var(--primitive-color-saffron-700);
162
+ --semantic-color-foreground-static-brand-on-strong: var(--primitive-color-brand-50);
163
+ --semantic-color-foreground-static-brand-on-subtle: var(--primitive-color-brand-550);
164
+ --semantic-color-foreground-static-info-on-strong: var(--primitive-color-amethyst-900);
165
+ --semantic-color-foreground-static-info-on-subtle: var(--primitive-color-amethyst-700);
166
+ --semantic-color-foreground-static-negative-on-strong: var(--primitive-color-red-0);
167
+ --semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-700);
168
+ --semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-600);
169
+ --semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-700);
170
+ --semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-450);
171
+ --semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
172
+ --semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-900);
173
+ --semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
174
+ --semantic-color-foreground-static-positive-on-strong: var(--primitive-color-green-900);
175
+ --semantic-color-foreground-static-positive-on-subtle: var(--primitive-color-green-800);
176
+ --semantic-color-foreground-static-severe-on-strong: var(--primitive-color-cool-neutral-900);
177
+ --semantic-color-foreground-static-severe-on-subtle: var(--primitive-color-orange-700);
178
+ --semantic-color-scrim-base: var(--primitive-color-cool-neutral-900-70);
179
+ --semantic-color-scrim-faint: var(--primitive-color-cool-neutral-800-16);
180
+ --semantic-color-scrim-light: var(--primitive-color-cool-neutral-800-24);
181
+ --semantic-color-scrim-subtle: var(--primitive-color-cool-neutral-800-50);
182
+ --semantic-color-stroke-action-disabled: var(--primitive-color-warm-neutral-500-24);
183
+ --semantic-color-stroke-action-field-hover: var(--primitive-color-cool-neutral-350);
184
+ --semantic-color-stroke-action-field-pressed: var(--primitive-color-cool-neutral-400);
185
+ --semantic-color-stroke-action-field-rest: var(--primitive-color-cool-neutral-300);
186
+ --semantic-color-stroke-action-ghost-hover: var(--primitive-color-brand-75-50);
187
+ --semantic-color-stroke-action-ghost-pressed: var(--primitive-color-brand-75-70);
188
+ --semantic-color-stroke-action-ghost-rest: var(--primitive-color-brand-75-36);
189
+ --semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-300);
190
+ --semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-350);
191
+ --semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-250);
192
+ --semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-200);
193
+ --semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-250);
194
+ --semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-100);
195
+ --semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-450);
196
+ --semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-500);
197
+ --semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-400);
198
+ --semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-500);
199
+ --semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-600);
200
+ --semantic-color-stroke-action-status-info-rest: var(--primitive-color-amethyst-400);
201
+ --semantic-color-stroke-action-status-negative-hover: var(--primitive-color-red-300);
202
+ --semantic-color-stroke-action-status-negative-pressed: var(--primitive-color-red-350);
203
+ --semantic-color-stroke-action-status-negative-rest: var(--primitive-color-red-250);
204
+ --semantic-color-stroke-action-status-neutral-hover: var(--primitive-color-warm-neutral-500);
205
+ --semantic-color-stroke-action-status-neutral-pressed: var(--primitive-color-warm-neutral-600);
206
+ --semantic-color-stroke-action-status-neutral-rest: var(--primitive-color-warm-neutral-400);
207
+ --semantic-color-stroke-action-status-positive-hover: var(--primitive-color-green-600);
208
+ --semantic-color-stroke-action-status-positive-pressed: var(--primitive-color-green-700);
209
+ --semantic-color-stroke-action-status-positive-rest: var(--primitive-color-green-500);
210
+ --semantic-color-stroke-focusring-base: var(--primitive-color-brand-200);
211
+ --semantic-color-stroke-static-accent-citrine: var(--primitive-color-citrine-350);
212
+ --semantic-color-stroke-static-accent-jade: var(--primitive-color-jade-350);
213
+ --semantic-color-stroke-static-accent-lagoon: var(--primitive-color-lagoon-350);
214
+ --semantic-color-stroke-static-accent-mauve: var(--primitive-color-mauve-350);
215
+ --semantic-color-stroke-static-accent-rose: var(--primitive-color-rose-350);
216
+ --semantic-color-stroke-static-accent-seabreeze: var(--primitive-color-seabreeze-350);
217
+ --semantic-color-stroke-static-attention-strong: var(--primitive-color-saffron-350);
218
+ --semantic-color-stroke-static-attention-subtle: var(--primitive-color-saffron-100);
219
+ --semantic-color-stroke-static-info-strong: var(--primitive-color-amethyst-500);
220
+ --semantic-color-stroke-static-info-subtle: var(--primitive-color-amethyst-200);
221
+ --semantic-color-stroke-static-negative-strong: var(--primitive-color-red-450);
222
+ --semantic-color-stroke-static-negative-subtle: var(--primitive-color-red-250);
223
+ --semantic-color-stroke-static-neutral-base: var(--primitive-color-warm-neutral-75);
224
+ --semantic-color-stroke-static-neutral-bold: var(--primitive-color-warm-neutral-150);
225
+ --semantic-color-stroke-static-neutral-faint: var(--primitive-color-warm-neutral-25);
226
+ --semantic-color-stroke-static-neutral-mono: var(--primitive-color-cool-neutral-0);
227
+ --semantic-color-stroke-static-neutral-strong: var(--primitive-color-warm-neutral-350);
228
+ --semantic-color-stroke-static-positive-strong: var(--primitive-color-green-400);
229
+ --semantic-color-stroke-static-positive-subtle: var(--primitive-color-green-100);
230
+ --semantic-color-stroke-static-severe-strong: var(--primitive-color-orange-350);
231
+ --semantic-color-stroke-static-severe-subtle: var(--primitive-color-orange-150);
232
+ --semantic-color-foreground-action-primary-on-strong: var(--semantic-color-fill-static-neutral-mono);
233
+ --semantic-color-foreground-action-status-positive-on-strong: var(--semantic-color-fill-static-neutral-mono);
234
+ }
package/dist/themes/light.css CHANGED
@@ -5,6 +5,11 @@
5
5
 
6
6
  The colour contract, Light Mode. Name these freely.
7
7
 
8
+ ALIAS: the Figma mode is called Amplify Light and themes/amplify-light.css
9
+ carries the same 206 names and the same values. This path is kept because
10
+ 20+ files here, .storybook/preview.js, the package exports and consumers we
11
+ do not control all reference it.
12
+
8
13
  Load primitives.css FIRST; every file below resolves through it.
9
14
 
10
15
  themes/midnight.css declares the SAME names with inverted values, so a
@@ -16,7 +21,7 @@
16
21
  Generated: do not edit. Run `npm run build-tokens`.
17
22
  ==========================================================================
18
23
  */
19
- :root, [data-theme="light"] {
24
+ :root, [data-theme="light"], [data-theme="amplify-light"] {
20
25
  --elevation-lift: 0 10px 28px -6px rgba(24,27,43,0.08);
21
26
  --elevation-overlay: 0 20px 48px -10px rgba(24,27,43,0.08);
22
27
  --elevation-sheet: 0 4px 32px -8px rgba(24,27,43,0.08);
package/dist/themes/midnight.css CHANGED
@@ -5,6 +5,9 @@
5
5
 
6
6
  The colour contract, Midnight Mode. Identical names to themes/light.css.
7
7
 
8
+ ALIAS: the Figma mode is called Amplify Dark and themes/amplify-dark.css
9
+ carries the same names and values under the panel's own word.
10
+
8
11
  Pathway's dark mode is called Midnight Mode. Both selectors are emitted:
9
12
  [data-theme="midnight"] is the Pathway name, [data-theme="dark"] is what
10
13
  every framework and prefers-color-scheme uses, so a consumer does not have
@@ -18,7 +21,7 @@
18
21
  Generated: do not edit. Run `npm run build-tokens`.
19
22
  ==========================================================================
20
23
  */
21
- [data-theme="dark"], [data-theme="midnight"] {
24
+ [data-theme="dark"], [data-theme="midnight"], [data-theme="amplify-dark"] {
22
25
  --elevation-lift: 0 10px 28px -6px rgba(0,1,19,0.70);
23
26
  --elevation-overlay: 0 20px 48px -10px rgba(0,1,19,0.70);
24
27
  --elevation-sheet: 0 4px 32px -8px rgba(0,1,19,0.70);
package/dist/tokens.js CHANGED
@@ -6254,6 +6254,28 @@ const tokens = {
6254
6254
  "vertical"
6255
6255
  ]
6256
6256
  },
6257
+ "responsive-layout-desktop-1440pt-touch-target-minimum-height": {
6258
+ "value": 36,
6259
+ "type": "number",
6260
+ "path": [
6261
+ "responsive-layout",
6262
+ "desktop-1440pt",
6263
+ "touch-target",
6264
+ "minimum",
6265
+ "height"
6266
+ ]
6267
+ },
6268
+ "responsive-layout-desktop-1440pt-touch-target-minimum-width": {
6269
+ "value": 36,
6270
+ "type": "number",
6271
+ "path": [
6272
+ "responsive-layout",
6273
+ "desktop-1440pt",
6274
+ "touch-target",
6275
+ "minimum",
6276
+ "width"
6277
+ ]
6278
+ },
6257
6279
  "responsive-layout-tablet-798pt-sheet-corner-radius-cornerradius": {
6258
6280
  "value": 24,
6259
6281
  "type": "number",
@@ -6353,6 +6375,28 @@ const tokens = {
6353
6375
  "vertical"
6354
6376
  ]
6355
6377
  },
6378
+ "responsive-layout-tablet-798pt-touch-target-minimum-height": {
6379
+ "value": 44,
6380
+ "type": "number",
6381
+ "path": [
6382
+ "responsive-layout",
6383
+ "tablet-798pt",
6384
+ "touch-target",
6385
+ "minimum",
6386
+ "height"
6387
+ ]
6388
+ },
6389
+ "responsive-layout-tablet-798pt-touch-target-minimum-width": {
6390
+ "value": 44,
6391
+ "type": "number",
6392
+ "path": [
6393
+ "responsive-layout",
6394
+ "tablet-798pt",
6395
+ "touch-target",
6396
+ "minimum",
6397
+ "width"
6398
+ ]
6399
+ },
6356
6400
  "responsive-layout-mobile-393pt-sheet-corner-radius-cornerradius": {
6357
6401
  "value": 20,
6358
6402
  "type": "number",
@@ -6452,6 +6496,28 @@ const tokens = {
6452
6496
  "vertical"
6453
6497
  ]
6454
6498
  },
6499
+ "responsive-layout-mobile-393pt-touch-target-minimum-height": {
6500
+ "value": 44,
6501
+ "type": "number",
6502
+ "path": [
6503
+ "responsive-layout",
6504
+ "mobile-393pt",
6505
+ "touch-target",
6506
+ "minimum",
6507
+ "height"
6508
+ ]
6509
+ },
6510
+ "responsive-layout-mobile-393pt-touch-target-minimum-width": {
6511
+ "value": 44,
6512
+ "type": "number",
6513
+ "path": [
6514
+ "responsive-layout",
6515
+ "mobile-393pt",
6516
+ "touch-target",
6517
+ "minimum",
6518
+ "width"
6519
+ ]
6520
+ },
6455
6521
  "semantic-color-light-fill-action-disabled": {
6456
6522
  "value": "#d8d3cd5c",
6457
6523
  "type": "color",
package/dist/tokens.json CHANGED
@@ -4656,6 +4656,18 @@
4656
4656
  "$value": "{semantic-layout-units.padding.xxtight}"
4657
4657
  }
4658
4658
  }
4659
+ },
4660
+ "touch-target": {
4661
+ "minimum": {
4662
+ "height": {
4663
+ "$type": "number",
4664
+ "$value": "{semantic-layout-units.accessibility.touch-target.desktop-only.height}"
4665
+ },
4666
+ "width": {
4667
+ "$type": "number",
4668
+ "$value": "{semantic-layout-units.accessibility.touch-target.desktop-only.width}"
4669
+ }
4670
+ }
4659
4671
  }
4660
4672
  },
4661
4673
  "tablet-798pt": {
@@ -4710,6 +4722,18 @@
4710
4722
  "$value": "{semantic-layout-units.padding.xxtight}"
4711
4723
  }
4712
4724
  }
4725
+ },
4726
+ "touch-target": {
4727
+ "minimum": {
4728
+ "height": {
4729
+ "$type": "number",
4730
+ "$value": "{semantic-layout-units.accessibility.touch-target.aa.height}"
4731
+ },
4732
+ "width": {
4733
+ "$type": "number",
4734
+ "$value": "{semantic-layout-units.accessibility.touch-target.aa.width}"
4735
+ }
4736
+ }
4713
4737
  }
4714
4738
  },
4715
4739
  "mobile-393pt": {
@@ -4764,6 +4788,18 @@
4764
4788
  "$value": "{semantic-layout-units.padding.xxtight}"
4765
4789
  }
4766
4790
  }
4791
+ },
4792
+ "touch-target": {
4793
+ "minimum": {
4794
+ "height": {
4795
+ "$type": "number",
4796
+ "$value": "{semantic-layout-units.accessibility.touch-target.aa.height}"
4797
+ },
4798
+ "width": {
4799
+ "$type": "number",
4800
+ "$value": "{semantic-layout-units.accessibility.touch-target.aa.width}"
4801
+ }
4802
+ }
4767
4803
  }
4768
4804
  }
4769
4805
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helloimjolopez-pathway/pathway-tokens",
3
- "version": "11.2.0",
3
+ "version": "11.4.0",
4
4
  "description": "Pathway Design System tokens, CSS custom properties, JS export, and DTCG JSON",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -19,7 +19,9 @@
19
19
  "./json": "./dist/tokens.json",
20
20
  "./primitives.css": "./dist/primitives.css",
21
21
  "./themes/light.css": "./dist/themes/light.css",
22
+ "./themes/amplify-light.css": "./dist/themes/amplify-light.css",
22
23
  "./themes/midnight.css": "./dist/themes/midnight.css",
24
+ "./themes/amplify-dark.css": "./dist/themes/amplify-dark.css",
23
25
  "./sidenav": "./components/sidenav/sidenav.jsx",
24
26
  "./layout.css": "./dist/layout.css",
25
27
  "./layout-contextual.css": "./dist/layout-contextual.css",
@@ -62,7 +64,7 @@
62
64
  "fix-tokens": "node scripts/fix-tokens.js",
63
65
  "fix-tokens-preview": "node scripts/fix-tokens.js --dry-run",
64
66
  "build-tokens": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js",
65
- "build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/build-component-index.js --check && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon && node scripts/check-component-tables.js && node scripts/build-demos.js && node scripts/check-demo-links.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js",
67
+ "build-dist": "node scripts/sync-motion-tokens.js && node style-dictionary.config.js && node scripts/stamp-headers.js && node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-state-distinctness.js && node scripts/check-ladder-order.js && node scripts/check-variant-distinctness.js && node scripts/check-fill-foreground-pairs.js && node scripts/check-story-yield.js && node scripts/check-motion-coverage.js && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/build-component-index.js --check && node scripts/build-dist.js && node scripts/build-index.js && node scripts/build-contract.js && npm run build-elements && npm run sync-demo-module-icon && node scripts/check-component-tables.js && node scripts/build-demos.js && node scripts/check-demo-links.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js && node scripts/check-distribution.js",
66
68
  "storybook": "node style-dictionary.config.js && PATHWAY_BRAND_AXIS=1 storybook dev -p 6006",
67
69
  "build-storybook": "storybook build",
68
70
  "check-demo-tokens": "node scripts/check-demo-tokens.js",
@@ -74,8 +76,8 @@
74
76
  "check-secrets": "node scripts/check-secrets.js",
75
77
  "check-token-refs": "node scripts/check-token-refs.js",
76
78
  "check-token-names": "node scripts/check-token-names.js",
77
- "check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js && node scripts/build-component-index.js --check && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/check-component-tables.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js",
78
- "build-elements": "esbuild components/sidenav/pathway-sidenav.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-sidenav.js",
79
+ "check-tokens": "node scripts/check-demo-tokens.js && node scripts/check-token-refs.js && node scripts/check-token-names.js && node scripts/check-token-object-refs.js && node scripts/check-story-yield.js && node scripts/fix-stale-doc-hex.js --check && node scripts/check-motion-coverage.js && node scripts/build-component-index.js --check && node scripts/check-spec-stories.js && node scripts/check-code-connect.js && node scripts/check-component-tables.js && node scripts/check-alpha-names.js && node scripts/check-token-descriptions.js && node scripts/check-distribution.js",
80
+ "build-elements": "esbuild components/sidenav/pathway-sidenav.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-sidenav.js && esbuild components/pathway-components.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-components.js",
79
81
  "check-story-yield": "node scripts/check-story-yield.js",
80
82
  "stamp-headers": "node scripts/stamp-headers.js",
81
83
  "check-headers": "node scripts/stamp-headers.js --check",
@@ -91,7 +93,7 @@
91
93
  "check-spec-stories": "node scripts/check-spec-stories.js",
92
94
  "check-figma-nodes": "node scripts/check-figma-nodes.js",
93
95
  "check-stories-render": "node scripts/check-stories-render.js",
94
- "verify-storybook": "node scripts/check-syntax.js && storybook build --quiet && node scripts/check-stories-render.js && node scripts/check-sidebar-shape.js && node scripts/check-reduced-motion.js && node scripts/check-target-size.js && node scripts/check-contrast-focus.js && node scripts/check-mdx-refs.js && node scripts/check-accessible-names.js && node scripts/check-demos-render.js",
96
+ "verify-storybook": "node scripts/check-syntax.js && storybook build --quiet && node scripts/check-stories-render.js && node scripts/check-sidebar-shape.js && node scripts/check-reduced-motion.js && node scripts/check-target-size.js && node scripts/check-contrast-focus.js && node scripts/check-type-floor.js && node scripts/check-mdx-refs.js && node scripts/check-accessible-names.js && node scripts/check-demos-render.js",
95
97
  "check-code-connect": "node scripts/check-code-connect.js",
96
98
  "check-mdx-refs": "node scripts/check-mdx-refs.js",
97
99
  "check-component-tables": "node scripts/check-component-tables.js",
@@ -106,7 +108,10 @@
106
108
  "check-reduced-motion": "node scripts/check-reduced-motion.js",
107
109
  "check-target-size": "node scripts/check-target-size.js",
108
110
  "check-contrast-focus": "node scripts/check-contrast-focus.js",
109
- "check-spec-structure": "node scripts/check-spec-structure.js"
111
+ "check-spec-structure": "node scripts/check-spec-structure.js",
112
+ "check-type-floor": "node scripts/check-type-floor.js",
113
+ "check-distribution": "node scripts/check-distribution.js",
114
+ "build-components": "esbuild components/pathway-components.js --bundle --format=esm --minify --loader:.jsx=jsx --jsx=automatic --define:process.env.NODE_ENV='\"production\"' --outfile=dist/pathway-components.js"
110
115
  },
111
116
  "devDependencies": {
112
117
  "@babel/preset-env": "^7.29.2",