@helloimjolopez-pathway/pathway-tokens 11.2.0 → 11.3.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 (10) hide show
  1. package/README.md +29 -27
  2. package/dist/README.md +1 -1
  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 +2 -2
  6. package/dist/themes/amplify-dark.css +233 -0
  7. package/dist/themes/amplify-light.css +234 -0
  8. package/dist/themes/light.css +6 -1
  9. package/dist/themes/midnight.css +4 -1
  10. package/package.json +9 -5
package/README.md CHANGED
@@ -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,29 @@ 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
+ **19 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 |
202
204
 
203
205
  Building blocks. Each is mapped for Code Connect and specced, but has no page
204
206
  of its own because it only ever appears as a nested instance inside the
@@ -207,7 +209,7 @@ component above it.
207
209
  | Component | Spec | Module | Storybook | Figma node | Code Connect files |
208
210
  |---|---|---|---|---|---|
209
211
  | **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 |
212
+ | **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
213
 
212
214
  <!-- END component-index -->
213
215
 
package/dist/README.md CHANGED
@@ -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,7 +1,7 @@
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.3.0",
4
+ "generated": "2026-10-20",
5
5
  "counts": {
6
6
  "contract": 360,
7
7
  "infrastructure": 585,
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helloimjolopez-pathway/pathway-tokens",
3
- "version": "11.2.0",
3
+ "version": "11.3.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,7 +76,7 @@
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",
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",
78
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",
79
81
  "check-story-yield": "node scripts/check-story-yield.js",
80
82
  "stamp-headers": "node scripts/stamp-headers.js",
@@ -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,9 @@
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"
110
114
  },
111
115
  "devDependencies": {
112
116
  "@babel/preset-env": "^7.29.2",