@helloimjolopez-pathway/pathway-tokens 6.0.0 → 7.0.1

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 (17) hide show
  1. package/README.md +69 -15
  2. package/components/scrollbar/scrollbar.jsx +19 -4
  3. package/components/sidenav/sidenav.jsx +85 -14
  4. package/dist/README.md +96 -0
  5. package/dist/breakpoints.css +11 -4
  6. package/dist/contract.json +356 -0
  7. package/dist/layout-contextual.css +30 -37
  8. package/dist/layout-responsive.css +46 -0
  9. package/dist/layout.css +19 -10
  10. package/dist/motion.css +17 -3
  11. package/dist/primitives.css +138 -116
  12. package/dist/themes/light.css +171 -314
  13. package/dist/themes/midnight.css +161 -302
  14. package/dist/tokens.js +4100 -9535
  15. package/dist/tokens.json +1737 -3723
  16. package/dist/type.css +23 -6
  17. package/package.json +13 -6
package/dist/primitives.css CHANGED
@@ -1,7 +1,27 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
1
+ /*
2
+ ==========================================================================
3
+ PATHWAY DESIGN TOKENS — INFRASTRUCTURE
4
+ ==========================================================================
4
5
 
6
+ The raw colour ramps. NOT part of the token contract.
7
+
8
+ You must LOAD this file — every semantic token resolves through it, so
9
+ without it all colour resolves to nothing and the page renders unstyled
10
+ with no console error. But product code should not NAME these.
11
+
12
+ The reason is a consequence, not a rule: Primitive: Color has exactly ONE
13
+ mode, and themes/midnight.css declares zero primitives. So a primitive
14
+ holds one value forever. `var(--primitive-color-brand-400)` stays that
15
+ blue in Midnight Mode; `var(--semantic-color-fill-action-primary-strong-rest)`
16
+ flips. Reach for a primitive only when you specifically want a value that
17
+ does NOT respond to the theme.
18
+
19
+ Nothing blocks you. It is an escape hatch with a stated cost.
20
+
21
+ Declares 352 custom properties.
22
+ Generated — do not edit. Run `npm run build-tokens`.
23
+ ==========================================================================
24
+ */
5
25
  :root {
6
26
  --primitive-color-cool-neutral-0: #ffffff;
7
27
  --primitive-color-cool-neutral-10: #fafafa;
@@ -38,69 +58,40 @@
38
58
  --primitive-color-cool-neutral-800-36: rgba(22, 22, 22, 0.36);
39
59
  --primitive-color-cool-neutral-800-50: rgba(22, 22, 22, 0.5);
40
60
  --primitive-color-cool-neutral-800-70: rgba(22, 22, 22, 0.7);
41
- --primitive-color-amethyst-0: #faf9fc;
42
- --primitive-color-amethyst-25: #f4f2fa;
43
- --primitive-color-amethyst-50: #e8e6f5;
44
- --primitive-color-amethyst-75: #dcd9ef;
45
- --primitive-color-amethyst-100: #cbc6e8;
46
- --primitive-color-amethyst-150: #b9b3e0;
47
- --primitive-color-amethyst-200: #a8a0d8;
48
- --primitive-color-amethyst-300: #9a90d0;
49
- --primitive-color-amethyst-350: #877ec8;
50
- --primitive-color-amethyst-400: #6e64b8;
51
- --primitive-color-amethyst-500: #5951a0;
52
- --primitive-color-amethyst-600: #464080;
53
- --primitive-color-amethyst-700: #353063;
54
- --primitive-color-amethyst-800: #221e3f;
55
- --primitive-color-amethyst-900: #110c2c;
56
- --primitive-color-green-0: #f8fcf9;
57
- --primitive-color-green-25: #dff6e2;
58
- --primitive-color-green-50: #c9edce;
59
- --primitive-color-green-75: #b4e4b9;
60
- --primitive-color-green-100: #9edba5;
61
- --primitive-color-green-150: #7acd84;
62
- --primitive-color-green-200: #59c56b;
63
- --primitive-color-green-300: #3db856;
64
- --primitive-color-green-350: #36a14f;
65
- --primitive-color-green-400: #358d4b;
66
- --primitive-color-green-500: #2a793e;
67
- --primitive-color-green-600: #1f602e;
68
- --primitive-color-green-700: #174f26;
69
- --primitive-color-green-800: #0d351b;
70
- --primitive-color-green-900: #001f00;
71
- --primitive-color-orange-0: #fcfafa;
72
- --primitive-color-orange-25: #f9f1ed;
73
- --primitive-color-orange-50: #f9e2d6;
74
- --primitive-color-orange-75: #f9d2bc;
75
- --primitive-color-orange-100: #fabd9d;
76
- --primitive-color-orange-150: #fda97b;
77
- --primitive-color-orange-200: #fe9156;
78
- --primitive-color-orange-250: #f97b38;
79
- --primitive-color-orange-300: #f56618;
80
- --primitive-color-orange-350: #e1580e;
81
- --primitive-color-orange-400: #c14d0f;
82
- --primitive-color-orange-500: #a5420d;
83
- --primitive-color-orange-600: #8d380b;
84
- --primitive-color-orange-700: #72300c;
85
- --primitive-color-orange-800: #59270c;
86
- --primitive-color-orange-900: #491900;
87
- --primitive-color-red-0: #fdfafa;
88
- --primitive-color-red-25: #faefef;
89
- --primitive-color-red-50: #f5dfdf;
90
- --primitive-color-red-75: #f0cdcd;
91
- --primitive-color-red-100: #e9b7b7;
92
- --primitive-color-red-150: #e29f9f;
93
- --primitive-color-red-200: #d98686;
94
- --primitive-color-red-250: #cf6e6e;
95
- --primitive-color-red-300: #c55858;
96
- --primitive-color-red-350: #ba4646;
97
- --primitive-color-red-400: #b03a3a;
98
- --primitive-color-red-450: #a63232;
99
- --primitive-color-red-500: #9d2d2d;
100
- --primitive-color-red-600: #882727;
101
- --primitive-color-red-700: #722121;
102
- --primitive-color-red-800: #5f1b1b;
103
- --primitive-color-red-900: #520f11;
61
+ --primitive-color-warm-neutral-0: #fefefd;
62
+ --primitive-color-warm-neutral-25: #f9f7f5;
63
+ --primitive-color-warm-neutral-50: #f3f0ec;
64
+ --primitive-color-warm-neutral-75: #e6e2dc;
65
+ --primitive-color-warm-neutral-100: #d8d3cd;
66
+ --primitive-color-warm-neutral-125: #d1ccc5;
67
+ --primitive-color-warm-neutral-150: #cbc6be;
68
+ --primitive-color-warm-neutral-175: #c4bfb7;
69
+ --primitive-color-warm-neutral-200: #bdb8b0;
70
+ --primitive-color-warm-neutral-250: #b0aaa2;
71
+ --primitive-color-warm-neutral-300: #9b968e;
72
+ --primitive-color-warm-neutral-350: #87827b;
73
+ --primitive-color-warm-neutral-400: #77726b;
74
+ --primitive-color-warm-neutral-450: #67625c;
75
+ --primitive-color-warm-neutral-500: #57534e;
76
+ --primitive-color-warm-neutral-550: #484540;
77
+ --primitive-color-warm-neutral-600: #393733;
78
+ --primitive-color-warm-neutral-700: #2b2926;
79
+ --primitive-color-warm-neutral-800: #1e1c1a;
80
+ --primitive-color-warm-neutral-900: #0f0e0d;
81
+ --primitive-color-warm-neutral-100-4: rgba(216, 211, 205, 0.04);
82
+ --primitive-color-warm-neutral-100-8: rgba(216, 211, 205, 0.08);
83
+ --primitive-color-warm-neutral-100-16: rgba(216, 211, 205, 0.16);
84
+ --primitive-color-warm-neutral-100-24: rgba(216, 211, 205, 0.24);
85
+ --primitive-color-warm-neutral-100-36: rgba(216, 211, 205, 0.36);
86
+ --primitive-color-warm-neutral-100-50: rgba(216, 211, 205, 0.5);
87
+ --primitive-color-warm-neutral-100-70: rgba(216, 211, 205, 0.7);
88
+ --primitive-color-warm-neutral-500-4: rgba(87, 83, 78, 0.04);
89
+ --primitive-color-warm-neutral-500-8: rgba(87, 83, 78, 0.08);
90
+ --primitive-color-warm-neutral-500-16: rgba(87, 83, 78, 0.16);
91
+ --primitive-color-warm-neutral-500-24: rgba(87, 83, 78, 0.24);
92
+ --primitive-color-warm-neutral-500-36: rgba(87, 83, 78, 0.36);
93
+ --primitive-color-warm-neutral-500-50: rgba(87, 83, 78, 0.5);
94
+ --primitive-color-warm-neutral-500-70: rgba(87, 83, 78, 0.7);
104
95
  --primitive-color-brand-0: #f9fafd;
105
96
  --primitive-color-brand-10: #eef2fb;
106
97
  --primitive-color-brand-25: #e2e9f7;
@@ -134,6 +125,54 @@
134
125
  --primitive-color-brand-600-36: rgba(34, 56, 107, 0.36);
135
126
  --primitive-color-brand-600-50: rgba(34, 56, 107, 0.5);
136
127
  --primitive-color-brand-600-70: rgba(34, 56, 107, 0.7);
128
+ --primitive-color-red-0: #fdfafa;
129
+ --primitive-color-red-25: #faefef;
130
+ --primitive-color-red-50: #f5dfdf;
131
+ --primitive-color-red-75: #f0cdcd;
132
+ --primitive-color-red-100: #e9b7b7;
133
+ --primitive-color-red-150: #e29f9f;
134
+ --primitive-color-red-200: #d98686;
135
+ --primitive-color-red-250: #cf6e6e;
136
+ --primitive-color-red-300: #c55858;
137
+ --primitive-color-red-350: #ba4646;
138
+ --primitive-color-red-400: #b03a3a;
139
+ --primitive-color-red-450: #a63232;
140
+ --primitive-color-red-500: #9d2d2d;
141
+ --primitive-color-red-600: #882727;
142
+ --primitive-color-red-700: #722121;
143
+ --primitive-color-red-800: #5f1b1b;
144
+ --primitive-color-red-900: #520f11;
145
+ --primitive-color-orange-0: #fcfafa;
146
+ --primitive-color-orange-25: #f9f1ed;
147
+ --primitive-color-orange-50: #f9e2d6;
148
+ --primitive-color-orange-75: #f9d2bc;
149
+ --primitive-color-orange-100: #fabd9d;
150
+ --primitive-color-orange-150: #fda97b;
151
+ --primitive-color-orange-200: #fe9156;
152
+ --primitive-color-orange-250: #f97b38;
153
+ --primitive-color-orange-300: #f56618;
154
+ --primitive-color-orange-350: #e1580e;
155
+ --primitive-color-orange-400: #c14d0f;
156
+ --primitive-color-orange-500: #a5420d;
157
+ --primitive-color-orange-600: #8d380b;
158
+ --primitive-color-orange-700: #72300c;
159
+ --primitive-color-orange-800: #59270c;
160
+ --primitive-color-orange-900: #491900;
161
+ --primitive-color-green-0: #f8fcf9;
162
+ --primitive-color-green-25: #dff6e2;
163
+ --primitive-color-green-50: #c9edce;
164
+ --primitive-color-green-75: #b4e4b9;
165
+ --primitive-color-green-100: #9edba5;
166
+ --primitive-color-green-150: #7acd84;
167
+ --primitive-color-green-200: #59c56b;
168
+ --primitive-color-green-300: #3db856;
169
+ --primitive-color-green-350: #36a14f;
170
+ --primitive-color-green-400: #358d4b;
171
+ --primitive-color-green-500: #2a793e;
172
+ --primitive-color-green-600: #1f602e;
173
+ --primitive-color-green-700: #174f26;
174
+ --primitive-color-green-800: #0d351b;
175
+ --primitive-color-green-900: #001f00;
137
176
  --primitive-color-seabreeze-0: #f6fbfd;
138
177
  --primitive-color-seabreeze-25: #e9f6fc;
139
178
  --primitive-color-seabreeze-50: #dbf0fb;
@@ -150,6 +189,22 @@
150
189
  --primitive-color-seabreeze-700: #185167;
151
190
  --primitive-color-seabreeze-800: #123c4e;
152
191
  --primitive-color-seabreeze-900: #00293a;
192
+ --primitive-color-lagoon-0: #f8fbfc;
193
+ --primitive-color-lagoon-25: #e5f2f4;
194
+ --primitive-color-lagoon-50: #d2e9ed;
195
+ --primitive-color-lagoon-75: #bfe0e5;
196
+ --primitive-color-lagoon-100: #acd7dd;
197
+ --primitive-color-lagoon-150: #9aced5;
198
+ --primitive-color-lagoon-200: #89c5cd;
199
+ --primitive-color-lagoon-250: #7bbec6;
200
+ --primitive-color-lagoon-300: #5dbac6;
201
+ --primitive-color-lagoon-350: #31adc0;
202
+ --primitive-color-lagoon-400: #23a4b8;
203
+ --primitive-color-lagoon-500: #1e99ae;
204
+ --primitive-color-lagoon-600: #187d8e;
205
+ --primitive-color-lagoon-700: #146171;
206
+ --primitive-color-lagoon-800: #104956;
207
+ --primitive-color-lagoon-900: #003440;
153
208
  --primitive-color-jade-0: #f8fcfb;
154
209
  --primitive-color-jade-25: #daf1eb;
155
210
  --primitive-color-jade-50: #c7ebe1;
@@ -166,8 +221,24 @@
166
221
  --primitive-color-jade-700: #10423b;
167
222
  --primitive-color-jade-800: #0d362f;
168
223
  --primitive-color-jade-900: #012b25;
224
+ --primitive-color-amethyst-0: #faf9fc;
225
+ --primitive-color-amethyst-25: #f4f2fa;
226
+ --primitive-color-amethyst-50: #e8e6f5;
227
+ --primitive-color-amethyst-75: #dcd9ef;
228
+ --primitive-color-amethyst-100: #cbc6e8;
229
+ --primitive-color-amethyst-150: #b9b3e0;
230
+ --primitive-color-amethyst-200: #a8a0d8;
231
+ --primitive-color-amethyst-300: #9a90d0;
232
+ --primitive-color-amethyst-350: #877ec8;
233
+ --primitive-color-amethyst-400: #6e64b8;
234
+ --primitive-color-amethyst-500: #5951a0;
235
+ --primitive-color-amethyst-600: #464080;
236
+ --primitive-color-amethyst-700: #353063;
237
+ --primitive-color-amethyst-800: #221e3f;
238
+ --primitive-color-amethyst-900: #110c2c;
169
239
  --primitive-color-saffron-0: #fefaf2;
170
240
  --primitive-color-saffron-25: #fef2de;
241
+ --primitive-color-saffron-50: #feeaca;
171
242
  --primitive-color-saffron-75: #fee2b3;
172
243
  --primitive-color-saffron-100: #fed897;
173
244
  --primitive-color-saffron-150: #ffc864;
@@ -176,43 +247,10 @@
176
247
  --primitive-color-saffron-350: #aa843e;
177
248
  --primitive-color-saffron-400: #91723b;
178
249
  --primitive-color-saffron-500: #6d5936;
250
+ --primitive-color-saffron-600: #51432c;
179
251
  --primitive-color-saffron-700: #342d21;
180
252
  --primitive-color-saffron-800: #1d1912;
181
253
  --primitive-color-saffron-900: #110d07;
182
- --primitive-color-warm-neutral-0: #fefefd;
183
- --primitive-color-warm-neutral-25: #f9f7f5;
184
- --primitive-color-warm-neutral-50: #f3f0ec;
185
- --primitive-color-warm-neutral-75: #e6e2dc;
186
- --primitive-color-warm-neutral-100: #d8d3cd;
187
- --primitive-color-warm-neutral-125: #d1ccc5;
188
- --primitive-color-warm-neutral-150: #cbc6be;
189
- --primitive-color-warm-neutral-175: #c4bfb7;
190
- --primitive-color-warm-neutral-200: #bdb8b0;
191
- --primitive-color-warm-neutral-250: #b0aaa2;
192
- --primitive-color-warm-neutral-300: #9b968e;
193
- --primitive-color-warm-neutral-350: #87827b;
194
- --primitive-color-warm-neutral-400: #77726b;
195
- --primitive-color-warm-neutral-450: #67625c;
196
- --primitive-color-warm-neutral-500: #57534e;
197
- --primitive-color-warm-neutral-550: #484540;
198
- --primitive-color-warm-neutral-600: #393733;
199
- --primitive-color-warm-neutral-700: #2b2926;
200
- --primitive-color-warm-neutral-800: #1e1c1a;
201
- --primitive-color-warm-neutral-900: #0f0e0d;
202
- --primitive-color-warm-neutral-100-4: rgba(216, 211, 205, 0.04);
203
- --primitive-color-warm-neutral-100-8: rgba(216, 211, 205, 0.08);
204
- --primitive-color-warm-neutral-100-16: rgba(216, 211, 205, 0.16);
205
- --primitive-color-warm-neutral-100-24: rgba(216, 211, 205, 0.24);
206
- --primitive-color-warm-neutral-100-36: rgba(216, 211, 205, 0.36);
207
- --primitive-color-warm-neutral-100-50: rgba(216, 211, 205, 0.5);
208
- --primitive-color-warm-neutral-100-70: rgba(216, 211, 205, 0.7);
209
- --primitive-color-warm-neutral-500-4: rgba(87, 83, 78, 0.04);
210
- --primitive-color-warm-neutral-500-8: rgba(87, 83, 78, 0.08);
211
- --primitive-color-warm-neutral-500-16: rgba(87, 83, 78, 0.16);
212
- --primitive-color-warm-neutral-500-24: rgba(87, 83, 78, 0.24);
213
- --primitive-color-warm-neutral-500-36: rgba(87, 83, 78, 0.36);
214
- --primitive-color-warm-neutral-500-50: rgba(87, 83, 78, 0.5);
215
- --primitive-color-warm-neutral-500-70: rgba(87, 83, 78, 0.7);
216
254
  --primitive-color-mauve-0: #fcf9fb;
217
255
  --primitive-color-mauve-25: #f7e9f2;
218
256
  --primitive-color-mauve-75: #f2d9e9;
@@ -226,22 +264,6 @@
226
264
  --primitive-color-mauve-700: #74255a;
227
265
  --primitive-color-mauve-800: #65204e;
228
266
  --primitive-color-mauve-900: #5b1545;
229
- --primitive-color-lagoon-0: #f8fbfc;
230
- --primitive-color-lagoon-25: #e5f2f4;
231
- --primitive-color-lagoon-50: #d2e9ed;
232
- --primitive-color-lagoon-75: #bfe0e5;
233
- --primitive-color-lagoon-100: #acd7dd;
234
- --primitive-color-lagoon-150: #9aced5;
235
- --primitive-color-lagoon-200: #89c5cd;
236
- --primitive-color-lagoon-250: #7bbec6;
237
- --primitive-color-lagoon-300: #5dbac6;
238
- --primitive-color-lagoon-350: #31adc0;
239
- --primitive-color-lagoon-400: #23a4b8;
240
- --primitive-color-lagoon-500: #1e99ae;
241
- --primitive-color-lagoon-600: #187d8e;
242
- --primitive-color-lagoon-700: #146171;
243
- --primitive-color-lagoon-800: #104956;
244
- --primitive-color-lagoon-900: #003440;
245
267
  --primitive-type-family-brand: Red Hat Text;
246
268
  --primitive-type-fontstyle-normal: Normal;
247
269
  --primitive-type-fontstyle-italic: Italic;