@helloimjolopez-pathway/pathway-tokens 10.0.1 → 10.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/sidenav/sidenav.jsx +29 -24
- package/dist/README.md +94 -4
- package/dist/brands/newco/primitives.css +10 -10
- package/dist/brands/newco/themes/dark.css +8 -8
- package/dist/brands/newco/themes/light.css +8 -8
- package/dist/brands/newco/tokens.js +29 -29
- package/dist/contract.json +51 -2
- package/dist/primitives.css +14 -14
- package/dist/themes/light.css +24 -24
- package/dist/themes/midnight.css +8 -8
- package/dist/tokens.js +1097 -1097
- package/dist/tokens.json +909 -909
- package/package.json +6 -4
package/dist/contract.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "The names a consumer may use. Generated from the emitted CSS by scripts/build-contract.js
|
|
3
|
-
"version": "10.0.
|
|
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": "10.0.3",
|
|
4
4
|
"generated": "2026-09-30",
|
|
5
5
|
"counts": {
|
|
6
6
|
"contract": 360,
|
|
@@ -73,6 +73,55 @@
|
|
|
73
73
|
"role": "Breakpoint values."
|
|
74
74
|
}
|
|
75
75
|
},
|
|
76
|
+
"guidance": {
|
|
77
|
+
"why": "One token library skins several codebases, products and UI libraries, and there is no shared component library yet. The names must be legible enough to assist mapping without being so granular that the set bloats and adoption fails. Every other choice below follows from that constraint.",
|
|
78
|
+
"decide": {
|
|
79
|
+
"question": "Does this element's colour change because of something the user does to it?",
|
|
80
|
+
"yes": "Action. Take the whole state set: -rest, -hover, -pressed, plus -disabled.",
|
|
81
|
+
"no": "Static. Pick one emphasis rung and stop.",
|
|
82
|
+
"note": "Not how many values exist. Static has six rungs and is still single-valued per element: the rungs are a menu you choose from once, the states are a sequence one element walks through."
|
|
83
|
+
},
|
|
84
|
+
"axes": {
|
|
85
|
+
"tier": {
|
|
86
|
+
"fill": "a background",
|
|
87
|
+
"foreground": "text or an icon",
|
|
88
|
+
"stroke": "a border or outline"
|
|
89
|
+
},
|
|
90
|
+
"family": [
|
|
91
|
+
"neutral",
|
|
92
|
+
"brand",
|
|
93
|
+
"negative",
|
|
94
|
+
"positive",
|
|
95
|
+
"info",
|
|
96
|
+
"attention",
|
|
97
|
+
"severe",
|
|
98
|
+
"accent"
|
|
99
|
+
],
|
|
100
|
+
"emphasisQuietestFirst": [
|
|
101
|
+
"faint",
|
|
102
|
+
"subtle",
|
|
103
|
+
"base",
|
|
104
|
+
"bold",
|
|
105
|
+
"strong"
|
|
106
|
+
],
|
|
107
|
+
"stateOnlyOnAction": [
|
|
108
|
+
"rest",
|
|
109
|
+
"hover",
|
|
110
|
+
"pressed",
|
|
111
|
+
"disabled"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
"doesNotPromise": [
|
|
115
|
+
"`primary` means A primary action, not your primary button. This package ships no components.",
|
|
116
|
+
"A component-shaped name such as fill-action-field-* describes a surface, not a component contract.",
|
|
117
|
+
"Two names sharing a value today are not interchangeable and may diverge in the next release.",
|
|
118
|
+
"`-on-strong` and `-on-subtle` are contrast pairing constraints, not lightness variants. The prefix names what must be behind the foreground.",
|
|
119
|
+
"No foreground rung is lighter than #484848 because everything lighter fails WCAG AA on white. A missing grey is a refusal, not a gap."
|
|
120
|
+
],
|
|
121
|
+
"modes": "One name resolves per brand theme (Amplify, NewCo) and per mode (Light, Dark). Never put a brand or a mode in a property name; --semantic-color-light-mode-* is retired and resolves to nothing.",
|
|
122
|
+
"primitives": "Published so that bindings resolve, not so that they get applied. Every primitive carries \"Do not apply directly\" in its own description.",
|
|
123
|
+
"ifAmbiguous": "If two names look equally right, that is a defect here rather than in your understanding. Report which two: a consumer's mapping is invisible from this side until someone says so."
|
|
124
|
+
},
|
|
76
125
|
"contract": [
|
|
77
126
|
"--breakpoints-desktop-1440px",
|
|
78
127
|
"--breakpoints-desktop-1920px",
|
package/dist/primitives.css
CHANGED
|
@@ -369,16 +369,16 @@
|
|
|
369
369
|
--primitive-color-saffron-75: #fee2b3;
|
|
370
370
|
--primitive-color-saffron-100: #fed897;
|
|
371
371
|
--primitive-color-saffron-150: #ffc864;
|
|
372
|
-
--primitive-color-saffron-200: #
|
|
373
|
-
--primitive-color-saffron-250: #
|
|
374
|
-
--primitive-color-saffron-300: #
|
|
375
|
-
--primitive-color-saffron-350: #
|
|
376
|
-
--primitive-color-saffron-400: #
|
|
377
|
-
--primitive-color-saffron-500: #
|
|
378
|
-
--primitive-color-saffron-600: #
|
|
379
|
-
--primitive-color-saffron-700: #
|
|
380
|
-
--primitive-color-saffron-800: #
|
|
381
|
-
--primitive-color-saffron-900: #
|
|
372
|
+
--primitive-color-saffron-200: #efb44d;
|
|
373
|
+
--primitive-color-saffron-250: #dfa23e;
|
|
374
|
+
--primitive-color-saffron-300: #cb8e31;
|
|
375
|
+
--primitive-color-saffron-350: #b97e2b;
|
|
376
|
+
--primitive-color-saffron-400: #a26b26;
|
|
377
|
+
--primitive-color-saffron-500: #7c5324;
|
|
378
|
+
--primitive-color-saffron-600: #583e24;
|
|
379
|
+
--primitive-color-saffron-700: #3d2a19;
|
|
380
|
+
--primitive-color-saffron-800: #23170b;
|
|
381
|
+
--primitive-color-saffron-900: #0a0200;
|
|
382
382
|
--primitive-color-saffron-150-16: rgba(255, 200, 100, 0.16);
|
|
383
383
|
--primitive-color-saffron-150-24: rgba(255, 200, 100, 0.24);
|
|
384
384
|
--primitive-color-saffron-150-36: rgba(255, 200, 100, 0.36);
|
|
@@ -453,10 +453,10 @@
|
|
|
453
453
|
--primitive-color-warm-neutral-500-70: rgba(87, 83, 78, 0.7);
|
|
454
454
|
--primitive-color-warm-neutral-500-8: rgba(87, 83, 78, 0.08);
|
|
455
455
|
--primitive-type-family-brand: Red Hat Text;
|
|
456
|
-
--primitive-type-fontstyle-normal:
|
|
457
|
-
--primitive-type-fontstyle-italic:
|
|
458
|
-
--primitive-type-textdecoration-none:
|
|
459
|
-
--primitive-type-textdecoration-underline:
|
|
456
|
+
--primitive-type-fontstyle-normal: normal;
|
|
457
|
+
--primitive-type-fontstyle-italic: italic;
|
|
458
|
+
--primitive-type-textdecoration-none: none;
|
|
459
|
+
--primitive-type-textdecoration-underline: underline;
|
|
460
460
|
--primitive-type-size-10: 10px;
|
|
461
461
|
--primitive-type-size-11: 11px;
|
|
462
462
|
--primitive-type-size-12: 12px;
|
package/dist/themes/light.css
CHANGED
|
@@ -62,6 +62,23 @@
|
|
|
62
62
|
--semantic-color-fill-action-status-positive-subtle-hover: var(--primitive-color-green-50);
|
|
63
63
|
--semantic-color-fill-action-status-positive-subtle-pressed: var(--primitive-color-green-75);
|
|
64
64
|
--semantic-color-fill-action-status-positive-subtle-rest: var(--primitive-color-green-25);
|
|
65
|
+
--semantic-color-fill-chart-sequential-10: var(--primitive-color-amethyst-200);
|
|
66
|
+
--semantic-color-fill-chart-sequential-11: var(--primitive-color-amethyst-150);
|
|
67
|
+
--semantic-color-fill-chart-sequential-12: var(--primitive-color-amethyst-100);
|
|
68
|
+
--semantic-color-fill-chart-sequential-13: var(--primitive-color-amethyst-75);
|
|
69
|
+
--semantic-color-fill-chart-sequential-14: var(--primitive-color-amethyst-50);
|
|
70
|
+
--semantic-color-fill-chart-sequential-15: var(--primitive-color-amethyst-25);
|
|
71
|
+
--semantic-color-fill-chart-sequential-01: var(--primitive-color-amethyst-900);
|
|
72
|
+
--semantic-color-fill-chart-sequential-02: var(--primitive-color-amethyst-800);
|
|
73
|
+
--semantic-color-fill-chart-sequential-03: var(--primitive-color-amethyst-700);
|
|
74
|
+
--semantic-color-fill-chart-sequential-04: var(--primitive-color-amethyst-600);
|
|
75
|
+
--semantic-color-fill-chart-sequential-05: var(--primitive-color-amethyst-500);
|
|
76
|
+
--semantic-color-fill-chart-sequential-06: var(--primitive-color-amethyst-400);
|
|
77
|
+
--semantic-color-fill-chart-sequential-07: var(--primitive-color-amethyst-350);
|
|
78
|
+
--semantic-color-fill-chart-sequential-08: var(--primitive-color-amethyst-300);
|
|
79
|
+
--semantic-color-fill-chart-sequential-09: var(--primitive-color-amethyst-250);
|
|
80
|
+
--semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-amethyst-25);
|
|
81
|
+
--semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-amethyst-900);
|
|
65
82
|
--semantic-color-fill-shadow-dropshadow: var(--primitive-color-brand-600-8);
|
|
66
83
|
--semantic-color-fill-static-accent-citrine-strong: var(--primitive-color-citrine-150);
|
|
67
84
|
--semantic-color-fill-static-accent-citrine-subtle: var(--primitive-color-citrine-50);
|
|
@@ -86,11 +103,11 @@
|
|
|
86
103
|
--semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-75);
|
|
87
104
|
--semantic-color-fill-static-negative-strong: var(--primitive-color-red-500);
|
|
88
105
|
--semantic-color-fill-static-negative-subtle: var(--primitive-color-red-50);
|
|
89
|
-
--semantic-color-fill-static-neutral-base: var(--primitive-color-
|
|
90
|
-
--semantic-color-fill-static-neutral-faint: var(--primitive-color-
|
|
106
|
+
--semantic-color-fill-static-neutral-base: var(--primitive-color-warm-neutral-50);
|
|
107
|
+
--semantic-color-fill-static-neutral-faint: var(--primitive-color-warm-neutral-0);
|
|
91
108
|
--semantic-color-fill-static-neutral-mono: var(--primitive-color-cool-neutral-0);
|
|
92
|
-
--semantic-color-fill-static-neutral-strong: var(--primitive-color-
|
|
93
|
-
--semantic-color-fill-static-neutral-subtle: var(--primitive-color-
|
|
109
|
+
--semantic-color-fill-static-neutral-strong: var(--primitive-color-warm-neutral-75);
|
|
110
|
+
--semantic-color-fill-static-neutral-subtle: var(--primitive-color-warm-neutral-25);
|
|
94
111
|
--semantic-color-fill-static-positive-strong: var(--primitive-color-green-150);
|
|
95
112
|
--semantic-color-fill-static-positive-subtle: var(--primitive-color-green-25);
|
|
96
113
|
--semantic-color-fill-static-severe-strong: var(--primitive-color-orange-250);
|
|
@@ -99,23 +116,6 @@
|
|
|
99
116
|
--semantic-color-fill-surface-chrome: var(--primitive-color-brand-550);
|
|
100
117
|
--semantic-color-fill-surface-elevated: var(--primitive-color-cool-neutral-0);
|
|
101
118
|
--semantic-color-fill-surface-overlay: var(--primitive-color-cool-neutral-0);
|
|
102
|
-
--semantic-color-fill-chart-sequential-10: var(--primitive-color-amethyst-200);
|
|
103
|
-
--semantic-color-fill-chart-sequential-11: var(--primitive-color-amethyst-150);
|
|
104
|
-
--semantic-color-fill-chart-sequential-12: var(--primitive-color-amethyst-100);
|
|
105
|
-
--semantic-color-fill-chart-sequential-13: var(--primitive-color-amethyst-75);
|
|
106
|
-
--semantic-color-fill-chart-sequential-14: var(--primitive-color-amethyst-50);
|
|
107
|
-
--semantic-color-fill-chart-sequential-15: var(--primitive-color-amethyst-25);
|
|
108
|
-
--semantic-color-fill-chart-sequential-01: var(--primitive-color-amethyst-900);
|
|
109
|
-
--semantic-color-fill-chart-sequential-02: var(--primitive-color-amethyst-800);
|
|
110
|
-
--semantic-color-fill-chart-sequential-03: var(--primitive-color-amethyst-700);
|
|
111
|
-
--semantic-color-fill-chart-sequential-04: var(--primitive-color-amethyst-600);
|
|
112
|
-
--semantic-color-fill-chart-sequential-05: var(--primitive-color-amethyst-500);
|
|
113
|
-
--semantic-color-fill-chart-sequential-06: var(--primitive-color-amethyst-400);
|
|
114
|
-
--semantic-color-fill-chart-sequential-07: var(--primitive-color-amethyst-350);
|
|
115
|
-
--semantic-color-fill-chart-sequential-08: var(--primitive-color-amethyst-300);
|
|
116
|
-
--semantic-color-fill-chart-sequential-09: var(--primitive-color-amethyst-250);
|
|
117
|
-
--semantic-color-fill-chart-sequential-anchor-end: var(--primitive-color-amethyst-25);
|
|
118
|
-
--semantic-color-fill-chart-sequential-anchor-start: var(--primitive-color-amethyst-900);
|
|
119
119
|
--semantic-color-foreground-action-disabled: var(--primitive-color-cool-neutral-900-50);
|
|
120
120
|
--semantic-color-foreground-action-ghost-hover: var(--primitive-color-brand-10);
|
|
121
121
|
--semantic-color-foreground-action-ghost-pressed: var(--primitive-color-brand-0);
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
--semantic-color-foreground-static-negative-on-subtle: var(--primitive-color-red-700);
|
|
164
164
|
--semantic-color-foreground-static-neutral-base: var(--primitive-color-cool-neutral-600);
|
|
165
165
|
--semantic-color-foreground-static-neutral-bold: var(--primitive-color-cool-neutral-700);
|
|
166
|
-
--semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-
|
|
166
|
+
--semantic-color-foreground-static-neutral-faint: var(--primitive-color-cool-neutral-450);
|
|
167
167
|
--semantic-color-foreground-static-neutral-mono: var(--primitive-color-cool-neutral-0);
|
|
168
168
|
--semantic-color-foreground-static-neutral-strong: var(--primitive-color-cool-neutral-900);
|
|
169
169
|
--semantic-color-foreground-static-neutral-subtle: var(--primitive-color-cool-neutral-500);
|
|
@@ -188,8 +188,8 @@
|
|
|
188
188
|
--semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-200);
|
|
189
189
|
--semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-250);
|
|
190
190
|
--semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-100);
|
|
191
|
-
--semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-
|
|
192
|
-
--semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-
|
|
191
|
+
--semantic-color-stroke-action-secondary-hover: var(--primitive-color-warm-neutral-450);
|
|
192
|
+
--semantic-color-stroke-action-secondary-pressed: var(--primitive-color-warm-neutral-500);
|
|
193
193
|
--semantic-color-stroke-action-secondary-rest: var(--primitive-color-warm-neutral-400);
|
|
194
194
|
--semantic-color-stroke-action-status-info-hover: var(--primitive-color-amethyst-500);
|
|
195
195
|
--semantic-color-stroke-action-status-info-pressed: var(--primitive-color-amethyst-600);
|
package/dist/themes/midnight.css
CHANGED
|
@@ -82,17 +82,17 @@
|
|
|
82
82
|
--semantic-color-fill-static-brand-base: var(--primitive-color-brand-600);
|
|
83
83
|
--semantic-color-fill-static-brand-faint: var(--primitive-color-brand-800);
|
|
84
84
|
--semantic-color-fill-static-brand-strong: var(--primitive-color-brand-200);
|
|
85
|
-
--semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-
|
|
85
|
+
--semantic-color-fill-static-brand-strongest: var(--primitive-color-brand-150);
|
|
86
86
|
--semantic-color-fill-static-brand-subtle: var(--primitive-color-brand-700);
|
|
87
87
|
--semantic-color-fill-static-info-strong: var(--primitive-color-amethyst-200);
|
|
88
88
|
--semantic-color-fill-static-info-subtle: var(--primitive-color-amethyst-350-16);
|
|
89
89
|
--semantic-color-fill-static-negative-strong: var(--primitive-color-red-400);
|
|
90
90
|
--semantic-color-fill-static-negative-subtle: var(--primitive-color-red-300-16);
|
|
91
|
-
--semantic-color-fill-static-neutral-base: var(--primitive-color-
|
|
92
|
-
--semantic-color-fill-static-neutral-faint: var(--primitive-color-
|
|
91
|
+
--semantic-color-fill-static-neutral-base: var(--primitive-color-midnight-800);
|
|
92
|
+
--semantic-color-fill-static-neutral-faint: var(--primitive-color-midnight-900);
|
|
93
93
|
--semantic-color-fill-static-neutral-mono: var(--primitive-color-cool-neutral-0);
|
|
94
|
-
--semantic-color-fill-static-neutral-strong: var(--primitive-color-
|
|
95
|
-
--semantic-color-fill-static-neutral-subtle: var(--primitive-color-
|
|
94
|
+
--semantic-color-fill-static-neutral-strong: var(--primitive-color-midnight-350);
|
|
95
|
+
--semantic-color-fill-static-neutral-subtle: var(--primitive-color-midnight-850);
|
|
96
96
|
--semantic-color-fill-static-positive-strong: var(--primitive-color-green-300);
|
|
97
97
|
--semantic-color-fill-static-positive-subtle: var(--primitive-color-green-350-16);
|
|
98
98
|
--semantic-color-fill-static-severe-strong: var(--primitive-color-orange-200);
|
|
@@ -189,9 +189,9 @@
|
|
|
189
189
|
--semantic-color-stroke-action-primary-strong-hover: var(--primitive-color-brand-250);
|
|
190
190
|
--semantic-color-stroke-action-primary-strong-pressed: var(--primitive-color-brand-200);
|
|
191
191
|
--semantic-color-stroke-action-primary-strong-rest: var(--primitive-color-brand-300);
|
|
192
|
-
--semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-
|
|
193
|
-
--semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-
|
|
194
|
-
--semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-
|
|
192
|
+
--semantic-color-stroke-action-primary-subtle-hover: var(--primitive-color-brand-125);
|
|
193
|
+
--semantic-color-stroke-action-primary-subtle-pressed: var(--primitive-color-brand-100);
|
|
194
|
+
--semantic-color-stroke-action-primary-subtle-rest: var(--primitive-color-brand-150);
|
|
195
195
|
--semantic-color-stroke-action-secondary-hover: var(--primitive-color-midnight-300);
|
|
196
196
|
--semantic-color-stroke-action-secondary-pressed: var(--primitive-color-midnight-200);
|
|
197
197
|
--semantic-color-stroke-action-secondary-rest: var(--primitive-color-midnight-400);
|