@workday/canvas-tokens-web 3.0.0-alpha.9 → 3.1.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.
- package/css/base/_variables.css +169 -1
- package/css/brand/_variables.css +1 -1
- package/css/system/_variables.css +34 -34
- package/dist/common-js/base/index.d.ts +337 -1
- package/dist/common-js/base/index.js +169 -1
- package/dist/common-js/brand/index.d.ts +1 -1
- package/dist/common-js/brand/index.js +1 -1
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +153 -145
- package/dist/common-js/system/index.js +29 -27
- package/dist/es6/base/index.d.ts +337 -1
- package/dist/es6/base/index.js +169 -1
- package/dist/es6/brand/index.d.ts +1 -1
- package/dist/es6/brand/index.js +1 -1
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +153 -145
- package/dist/es6/system/index.js +29 -27
- package/less/base/_variables.less +169 -1
- package/less/brand/_variables.less +1 -1
- package/less/system/_variables.less +34 -34
- package/package.json +1 -1
- package/scss/base/_variables.sass +169 -1
- package/scss/base/_variables.scss +169 -1
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/system/_variables.sass +34 -34
- package/scss/system/_variables.scss +34 -34
package/css/base/_variables.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 19 Sep 2025 19:25:21 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -175,6 +175,168 @@
|
|
|
175
175
|
--cnvs-base-palette-teal-900: oklch(0.3052 0.0529 210.69 / 1);
|
|
176
176
|
--cnvs-base-palette-teal-950: oklch(0.2425 0.042 210.69 / 1);
|
|
177
177
|
--cnvs-base-palette-teal-975: oklch(0.2037 0.0354 211.24 / 1);
|
|
178
|
+
--cnvs-base-palette-cinnamon-100: var(--cnvs-base-palette-red-50);
|
|
179
|
+
--cnvs-base-palette-cinnamon-200: var(--cnvs-base-palette-red-100);
|
|
180
|
+
--cnvs-base-palette-cinnamon-300: var(--cnvs-base-palette-red-300);
|
|
181
|
+
--cnvs-base-palette-cinnamon-400: var(--cnvs-base-palette-red-400);
|
|
182
|
+
--cnvs-base-palette-cinnamon-500: var(--cnvs-base-palette-red-600);
|
|
183
|
+
--cnvs-base-palette-cinnamon-600: var(--cnvs-base-palette-red-700);
|
|
184
|
+
--cnvs-base-palette-peach-100: var(--cnvs-base-palette-coral-50);
|
|
185
|
+
--cnvs-base-palette-peach-200: var(--cnvs-base-palette-coral-200);
|
|
186
|
+
--cnvs-base-palette-peach-300: var(--cnvs-base-palette-coral-300);
|
|
187
|
+
--cnvs-base-palette-peach-400: var(--cnvs-base-palette-red-400);
|
|
188
|
+
--cnvs-base-palette-peach-500: var(--cnvs-base-palette-coral-600);
|
|
189
|
+
--cnvs-base-palette-peach-600: var(--cnvs-base-palette-coral-700);
|
|
190
|
+
--cnvs-base-palette-chili-mango-100: var(--cnvs-base-palette-coral-100);
|
|
191
|
+
--cnvs-base-palette-chili-mango-200: var(--cnvs-base-palette-coral-200);
|
|
192
|
+
--cnvs-base-palette-chili-mango-300: var(--cnvs-base-palette-coral-300);
|
|
193
|
+
--cnvs-base-palette-chili-mango-400: var(--cnvs-base-palette-orange-500);
|
|
194
|
+
--cnvs-base-palette-chili-mango-500: var(--cnvs-base-palette-orange-500);
|
|
195
|
+
--cnvs-base-palette-chili-mango-600: var(--cnvs-base-palette-orange-700);
|
|
196
|
+
--cnvs-base-palette-cantaloupe-100: var(--cnvs-base-palette-amber-50);
|
|
197
|
+
--cnvs-base-palette-cantaloupe-200: var(--cnvs-base-palette-amber-200);
|
|
198
|
+
--cnvs-base-palette-cantaloupe-300: var(--cnvs-base-palette-amber-300);
|
|
199
|
+
--cnvs-base-palette-cantaloupe-400: var(--cnvs-base-palette-amber-400);
|
|
200
|
+
--cnvs-base-palette-cantaloupe-500: var(--cnvs-base-palette-amber-500);
|
|
201
|
+
--cnvs-base-palette-cantaloupe-600: var(--cnvs-base-palette-amber-600);
|
|
202
|
+
--cnvs-base-palette-sour-lemon-100: var(--cnvs-base-palette-amber-25);
|
|
203
|
+
--cnvs-base-palette-sour-lemon-200: var(--cnvs-base-palette-amber-100);
|
|
204
|
+
--cnvs-base-palette-sour-lemon-300: var(--cnvs-base-palette-amber-200);
|
|
205
|
+
--cnvs-base-palette-sour-lemon-400: var(--cnvs-base-palette-amber-300);
|
|
206
|
+
--cnvs-base-palette-sour-lemon-500: var(--cnvs-base-palette-amber-300);
|
|
207
|
+
--cnvs-base-palette-sour-lemon-600: var(--cnvs-base-palette-amber-500);
|
|
208
|
+
--cnvs-base-palette-juicy-pear-100: var(--cnvs-base-palette-amber-25);
|
|
209
|
+
--cnvs-base-palette-juicy-pear-200: var(--cnvs-base-palette-amber-100);
|
|
210
|
+
--cnvs-base-palette-juicy-pear-300: var(--cnvs-base-palette-amber-200);
|
|
211
|
+
--cnvs-base-palette-juicy-pear-400: var(--cnvs-base-palette-amber-200);
|
|
212
|
+
--cnvs-base-palette-juicy-pear-500: var(--cnvs-base-palette-green-500);
|
|
213
|
+
--cnvs-base-palette-juicy-pear-600: var(--cnvs-base-palette-green-700);
|
|
214
|
+
--cnvs-base-palette-kiwi-100: var(--cnvs-base-palette-green-50);
|
|
215
|
+
--cnvs-base-palette-kiwi-200: var(--cnvs-base-palette-green-100);
|
|
216
|
+
--cnvs-base-palette-kiwi-300: var(--cnvs-base-palette-green-200);
|
|
217
|
+
--cnvs-base-palette-kiwi-400: var(--cnvs-base-palette-green-500);
|
|
218
|
+
--cnvs-base-palette-kiwi-500: var(--cnvs-base-palette-green-500);
|
|
219
|
+
--cnvs-base-palette-kiwi-600: var(--cnvs-base-palette-green-700);
|
|
220
|
+
--cnvs-base-palette-green-apple-100: var(--cnvs-base-palette-green-50);
|
|
221
|
+
--cnvs-base-palette-green-apple-200: var(--cnvs-base-palette-green-100);
|
|
222
|
+
--cnvs-base-palette-green-apple-300: var(--cnvs-base-palette-green-200);
|
|
223
|
+
--cnvs-base-palette-green-apple-400: var(--cnvs-base-palette-green-600);
|
|
224
|
+
--cnvs-base-palette-green-apple-500: var(--cnvs-base-palette-green-700);
|
|
225
|
+
--cnvs-base-palette-green-apple-600: var(--cnvs-base-palette-green-800);
|
|
226
|
+
--cnvs-base-palette-watermelon-100: var(--cnvs-base-palette-teal-25);
|
|
227
|
+
--cnvs-base-palette-watermelon-200: var(--cnvs-base-palette-teal-100);
|
|
228
|
+
--cnvs-base-palette-watermelon-300: var(--cnvs-base-palette-green-100);
|
|
229
|
+
--cnvs-base-palette-watermelon-400: var(--cnvs-base-palette-green-600);
|
|
230
|
+
--cnvs-base-palette-watermelon-500: var(--cnvs-base-palette-green-800);
|
|
231
|
+
--cnvs-base-palette-watermelon-600: var(--cnvs-base-palette-green-800);
|
|
232
|
+
--cnvs-base-palette-jewel-100: var(--cnvs-base-palette-teal-25);
|
|
233
|
+
--cnvs-base-palette-jewel-200: var(--cnvs-base-palette-teal-200);
|
|
234
|
+
--cnvs-base-palette-jewel-300: var(--cnvs-base-palette-teal-400);
|
|
235
|
+
--cnvs-base-palette-jewel-400: var(--cnvs-base-palette-teal-500);
|
|
236
|
+
--cnvs-base-palette-jewel-500: var(--cnvs-base-palette-teal-600);
|
|
237
|
+
--cnvs-base-palette-jewel-600: var(--cnvs-base-palette-teal-700);
|
|
238
|
+
--cnvs-base-palette-toothpaste-100: var(--cnvs-base-palette-azure-50);
|
|
239
|
+
--cnvs-base-palette-toothpaste-200: var(--cnvs-base-palette-azure-200);
|
|
240
|
+
--cnvs-base-palette-toothpaste-300: var(--cnvs-base-palette-azure-300);
|
|
241
|
+
--cnvs-base-palette-toothpaste-400: var(--cnvs-base-palette-azure-500);
|
|
242
|
+
--cnvs-base-palette-toothpaste-500: var(--cnvs-base-palette-azure-700);
|
|
243
|
+
--cnvs-base-palette-toothpaste-600: var(--cnvs-base-palette-azure-800);
|
|
244
|
+
--cnvs-base-palette-blueberry-100: var(--cnvs-base-palette-blue-100);
|
|
245
|
+
--cnvs-base-palette-blueberry-200: var(--cnvs-base-palette-blue-100);
|
|
246
|
+
--cnvs-base-palette-blueberry-300: var(--cnvs-base-palette-blue-400);
|
|
247
|
+
--cnvs-base-palette-blueberry-400: var(--cnvs-base-palette-blue-600);
|
|
248
|
+
--cnvs-base-palette-blueberry-500: var(--cnvs-base-palette-blue-700);
|
|
249
|
+
--cnvs-base-palette-blueberry-600: var(--cnvs-base-palette-blue-800);
|
|
250
|
+
--cnvs-base-palette-plum-100: var(--cnvs-base-palette-blue-100);
|
|
251
|
+
--cnvs-base-palette-plum-200: var(--cnvs-base-palette-blue-200);
|
|
252
|
+
--cnvs-base-palette-plum-300: var(--cnvs-base-palette-blue-400);
|
|
253
|
+
--cnvs-base-palette-plum-400: var(--cnvs-base-palette-blue-600);
|
|
254
|
+
--cnvs-base-palette-plum-500: var(--cnvs-base-palette-blue-700);
|
|
255
|
+
--cnvs-base-palette-plum-600: var(--cnvs-base-palette-blue-800);
|
|
256
|
+
--cnvs-base-palette-berry-smoothie-100: var(--cnvs-base-palette-indigo-50);
|
|
257
|
+
--cnvs-base-palette-berry-smoothie-200: var(--cnvs-base-palette-indigo-200);
|
|
258
|
+
--cnvs-base-palette-berry-smoothie-300: var(--cnvs-base-palette-indigo-400);
|
|
259
|
+
--cnvs-base-palette-berry-smoothie-400: var(--cnvs-base-palette-blue-500);
|
|
260
|
+
--cnvs-base-palette-berry-smoothie-500: var(--cnvs-base-palette-blue-700);
|
|
261
|
+
--cnvs-base-palette-berry-smoothie-600: var(--cnvs-base-palette-blue-800);
|
|
262
|
+
--cnvs-base-palette-blackberry-100: var(--cnvs-base-palette-indigo-25);
|
|
263
|
+
--cnvs-base-palette-blackberry-200: var(--cnvs-base-palette-indigo-200);
|
|
264
|
+
--cnvs-base-palette-blackberry-300: var(--cnvs-base-palette-indigo-400);
|
|
265
|
+
--cnvs-base-palette-blackberry-400: var(--cnvs-base-palette-indigo-500);
|
|
266
|
+
--cnvs-base-palette-blackberry-500: var(--cnvs-base-palette-indigo-700);
|
|
267
|
+
--cnvs-base-palette-blackberry-600: var(--cnvs-base-palette-indigo-900);
|
|
268
|
+
--cnvs-base-palette-island-punch-100: var(--cnvs-base-palette-purple-25);
|
|
269
|
+
--cnvs-base-palette-island-punch-200: var(--cnvs-base-palette-purple-200);
|
|
270
|
+
--cnvs-base-palette-island-punch-300: var(--cnvs-base-palette-purple-500);
|
|
271
|
+
--cnvs-base-palette-island-punch-400: var(--cnvs-base-palette-purple-500);
|
|
272
|
+
--cnvs-base-palette-island-punch-500: var(--cnvs-base-palette-purple-700);
|
|
273
|
+
--cnvs-base-palette-island-punch-600: var(--cnvs-base-palette-purple-800);
|
|
274
|
+
--cnvs-base-palette-grape-soda-100: var(--cnvs-base-palette-magenta-50);
|
|
275
|
+
--cnvs-base-palette-grape-soda-200: var(--cnvs-base-palette-magenta-200);
|
|
276
|
+
--cnvs-base-palette-grape-soda-300: var(--cnvs-base-palette-purple-400);
|
|
277
|
+
--cnvs-base-palette-grape-soda-400: var(--cnvs-base-palette-purple-500);
|
|
278
|
+
--cnvs-base-palette-grape-soda-500: var(--cnvs-base-palette-purple-600);
|
|
279
|
+
--cnvs-base-palette-grape-soda-600: var(--cnvs-base-palette-purple-800);
|
|
280
|
+
--cnvs-base-palette-pomegranate-100: var(--cnvs-base-palette-magenta-50);
|
|
281
|
+
--cnvs-base-palette-pomegranate-200: var(--cnvs-base-palette-magenta-100);
|
|
282
|
+
--cnvs-base-palette-pomegranate-300: var(--cnvs-base-palette-magenta-500);
|
|
283
|
+
--cnvs-base-palette-pomegranate-400: var(--cnvs-base-palette-magenta-500);
|
|
284
|
+
--cnvs-base-palette-pomegranate-500: var(--cnvs-base-palette-red-700);
|
|
285
|
+
--cnvs-base-palette-pomegranate-600: var(--cnvs-base-palette-red-800);
|
|
286
|
+
--cnvs-base-palette-fruit-punch-100: var(--cnvs-base-palette-red-25);
|
|
287
|
+
--cnvs-base-palette-fruit-punch-200: var(--cnvs-base-palette-red-200);
|
|
288
|
+
--cnvs-base-palette-fruit-punch-300: var(--cnvs-base-palette-red-300);
|
|
289
|
+
--cnvs-base-palette-fruit-punch-400: var(--cnvs-base-palette-red-400);
|
|
290
|
+
--cnvs-base-palette-fruit-punch-500: var(--cnvs-base-palette-red-400);
|
|
291
|
+
--cnvs-base-palette-fruit-punch-600: var(--cnvs-base-palette-red-700);
|
|
292
|
+
--cnvs-base-palette-root-beer-100: var(--cnvs-base-palette-coral-25);
|
|
293
|
+
--cnvs-base-palette-root-beer-200: var(--cnvs-base-palette-coral-100);
|
|
294
|
+
--cnvs-base-palette-root-beer-300: var(--cnvs-base-palette-coral-200);
|
|
295
|
+
--cnvs-base-palette-root-beer-400: var(--cnvs-base-palette-coral-200);
|
|
296
|
+
--cnvs-base-palette-root-beer-500: var(--cnvs-base-palette-amber-900);
|
|
297
|
+
--cnvs-base-palette-root-beer-600: var(--cnvs-base-palette-amber-950);
|
|
298
|
+
--cnvs-base-palette-toasted-marshmallow-100: var(--cnvs-base-palette-amber-25);
|
|
299
|
+
--cnvs-base-palette-toasted-marshmallow-200: var(--cnvs-base-palette-orange-100);
|
|
300
|
+
--cnvs-base-palette-toasted-marshmallow-300: var(--cnvs-base-palette-orange-200);
|
|
301
|
+
--cnvs-base-palette-toasted-marshmallow-400: var(--cnvs-base-palette-orange-300);
|
|
302
|
+
--cnvs-base-palette-toasted-marshmallow-500: var(--cnvs-base-palette-amber-500);
|
|
303
|
+
--cnvs-base-palette-toasted-marshmallow-600: var(--cnvs-base-palette-amber-600);
|
|
304
|
+
--cnvs-base-palette-licorice-100: var(--cnvs-base-palette-slate-400);
|
|
305
|
+
--cnvs-base-palette-licorice-200: var(--cnvs-base-palette-slate-500);
|
|
306
|
+
--cnvs-base-palette-licorice-300: var(--cnvs-base-palette-slate-600);
|
|
307
|
+
--cnvs-base-palette-licorice-400: var(--cnvs-base-palette-slate-700);
|
|
308
|
+
--cnvs-base-palette-licorice-500: var(--cnvs-base-palette-slate-800);
|
|
309
|
+
--cnvs-base-palette-licorice-600: var(--cnvs-base-palette-slate-900);
|
|
310
|
+
--cnvs-base-palette-soap-100: var(--cnvs-base-palette-slate-25);
|
|
311
|
+
--cnvs-base-palette-soap-200: var(--cnvs-base-palette-slate-50);
|
|
312
|
+
--cnvs-base-palette-soap-300: var(--cnvs-base-palette-slate-100);
|
|
313
|
+
--cnvs-base-palette-soap-400: var(--cnvs-base-palette-slate-200);
|
|
314
|
+
--cnvs-base-palette-soap-500: var(--cnvs-base-palette-slate-300);
|
|
315
|
+
--cnvs-base-palette-soap-600: var(--cnvs-base-palette-slate-300);
|
|
316
|
+
--cnvs-base-palette-french-vanilla-100: var(--cnvs-base-palette-neutral-0);
|
|
317
|
+
--cnvs-base-palette-french-vanilla-200: var(--cnvs-base-palette-neutral-100);
|
|
318
|
+
--cnvs-base-palette-french-vanilla-300: var(--cnvs-base-palette-neutral-200);
|
|
319
|
+
--cnvs-base-palette-french-vanilla-400: var(--cnvs-base-palette-neutral-300);
|
|
320
|
+
--cnvs-base-palette-french-vanilla-500: var(--cnvs-base-palette-neutral-400);
|
|
321
|
+
--cnvs-base-palette-french-vanilla-600: var(--cnvs-base-palette-neutral-500);
|
|
322
|
+
--cnvs-base-palette-black-pepper-100: var(--cnvs-base-palette-neutral-500);
|
|
323
|
+
--cnvs-base-palette-black-pepper-200: var(--cnvs-base-palette-neutral-700);
|
|
324
|
+
--cnvs-base-palette-black-pepper-300: var(--cnvs-base-palette-neutral-800);
|
|
325
|
+
--cnvs-base-palette-black-pepper-400: var(--cnvs-base-palette-neutral-900);
|
|
326
|
+
--cnvs-base-palette-black-pepper-500: var(--cnvs-base-palette-neutral-950);
|
|
327
|
+
--cnvs-base-palette-black-pepper-600: var(--cnvs-base-palette-neutral-1000);
|
|
328
|
+
--cnvs-base-palette-coconut-100: #F0EEEE;
|
|
329
|
+
--cnvs-base-palette-coconut-200: #e3dfdf;
|
|
330
|
+
--cnvs-base-palette-coconut-300: #d1cbcc;
|
|
331
|
+
--cnvs-base-palette-coconut-400: #b3acac;
|
|
332
|
+
--cnvs-base-palette-coconut-500: #9e9595;
|
|
333
|
+
--cnvs-base-palette-coconut-600: #8F8687;
|
|
334
|
+
--cnvs-base-palette-cappuccino-100: #7A7374;
|
|
335
|
+
--cnvs-base-palette-cappuccino-200: #706869;
|
|
336
|
+
--cnvs-base-palette-cappuccino-300: #5E5757;
|
|
337
|
+
--cnvs-base-palette-cappuccino-400: #4A4242;
|
|
338
|
+
--cnvs-base-palette-cappuccino-500: #352f2f;
|
|
339
|
+
--cnvs-base-palette-cappuccino-600: #231f20;
|
|
178
340
|
--cnvs-base-opacity-0: 0;
|
|
179
341
|
--cnvs-base-opacity-100: 0.08;
|
|
180
342
|
--cnvs-base-opacity-200: 0.12;
|
|
@@ -222,4 +384,10 @@
|
|
|
222
384
|
--cnvs-base-letter-spacing-150: 0.015rem;
|
|
223
385
|
--cnvs-base-letter-spacing-200: 0.01rem;
|
|
224
386
|
--cnvs-base-unit: 0.25rem; /* The base unit used in the grid system.; */
|
|
387
|
+
--cnvs-base-extended-palette-dragon-fruit-100: ;
|
|
388
|
+
--cnvs-base-extended-palette-dragon-fruit-200: ;
|
|
389
|
+
--cnvs-base-extended-palette-dragon-fruit-300: ;
|
|
390
|
+
--cnvs-base-extended-palette-dragon-fruit-400: ;
|
|
391
|
+
--cnvs-base-extended-palette-dragon-fruit-500: ;
|
|
392
|
+
--cnvs-base-extended-palette-dragon-fruit-600: ;
|
|
225
393
|
}
|
package/css/brand/_variables.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 19 Sep 2025 19:25:21 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -82,11 +82,11 @@
|
|
|
82
82
|
--cnvs-sys-color-fg-info-soft: var(--cnvs-base-palette-blue-400);
|
|
83
83
|
--cnvs-sys-color-fg-info-softer: var(--cnvs-base-palette-blue-200); /* Link Inverse, Disabled */
|
|
84
84
|
--cnvs-sys-color-fg-ai: var(--cnvs-base-palette-blue-950); /* AI icons and text */
|
|
85
|
-
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-
|
|
86
|
-
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-
|
|
85
|
+
--cnvs-sys-color-fg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Strong contrast */
|
|
86
|
+
--cnvs-sys-color-fg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast */
|
|
87
87
|
--cnvs-sys-color-fg-caution-softer: var(--cnvs-base-palette-amber-200); /* Warning */
|
|
88
88
|
--cnvs-sys-color-fg-caution-stronger: var(--cnvs-base-palette-amber-975); /* Warning on hover */
|
|
89
|
-
--cnvs-sys-color-fg-caution-soft: var(--cnvs-base-palette-amber-
|
|
89
|
+
--cnvs-sys-color-fg-caution-soft: var(--cnvs-base-palette-amber-400); /* Warning */
|
|
90
90
|
--cnvs-sys-color-fg-caution-strong: var(--cnvs-base-palette-amber-950); /* Warning on hover */
|
|
91
91
|
--cnvs-sys-color-fg-caution-default: var(--cnvs-base-palette-amber-900); /* Warning */
|
|
92
92
|
--cnvs-sys-color-fg-primary-stronger: var(--cnvs-base-palette-blue-800); /* Links on hover */
|
|
@@ -105,15 +105,15 @@
|
|
|
105
105
|
--cnvs-sys-color-fg-critical-default: var(--cnvs-base-palette-red-600); /* Error */
|
|
106
106
|
--cnvs-sys-color-fg-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse */
|
|
107
107
|
--cnvs-sys-color-fg-disabled: var(--cnvs-base-palette-slate-400); /* Disabled */
|
|
108
|
-
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-
|
|
109
|
-
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-
|
|
110
|
-
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-
|
|
108
|
+
--cnvs-sys-color-fg-stronger: var(--cnvs-base-palette-neutral-950); /* Heading on hover */
|
|
109
|
+
--cnvs-sys-color-fg-strong: var(--cnvs-base-palette-neutral-900); /* Headings */
|
|
110
|
+
--cnvs-sys-color-fg-default: var(--cnvs-base-palette-neutral-800); /* Body */
|
|
111
111
|
--cnvs-sys-color-icon-info-stronger: var(--cnvs-base-palette-blue-800); /* Stronger brand icon color */
|
|
112
112
|
--cnvs-sys-color-icon-info-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
|
|
113
113
|
--cnvs-sys-color-icon-info-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
|
|
114
114
|
--cnvs-sys-color-icon-disabled: var(--cnvs-base-palette-slate-400); /* Disabled icon color */
|
|
115
|
-
--cnvs-sys-color-icon-caution-softer: var(--cnvs-base-palette-amber-
|
|
116
|
-
--cnvs-sys-color-icon-caution-soft: var(--cnvs-base-palette-amber-
|
|
115
|
+
--cnvs-sys-color-icon-caution-softer: var(--cnvs-base-palette-amber-200); /* Strong caution icon color */
|
|
116
|
+
--cnvs-sys-color-icon-caution-soft: var(--cnvs-base-palette-amber-400); /* Strong caution icon color */
|
|
117
117
|
--cnvs-sys-color-icon-caution-stronger: var(--cnvs-base-palette-amber-975); /* Strong caution icon color */
|
|
118
118
|
--cnvs-sys-color-icon-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong caution icon color */
|
|
119
119
|
--cnvs-sys-color-icon-caution-default: var(--cnvs-base-palette-amber-900); /* Caution icon color */
|
|
@@ -133,9 +133,9 @@
|
|
|
133
133
|
--cnvs-sys-color-icon-primary-strong: var(--cnvs-base-palette-blue-700); /* Stronger brand icon color */
|
|
134
134
|
--cnvs-sys-color-icon-primary-default: var(--cnvs-base-palette-blue-600); /* Brand icon color */
|
|
135
135
|
--cnvs-sys-color-icon-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse icon color */
|
|
136
|
-
--cnvs-sys-color-icon-strong: var(--cnvs-base-palette-neutral-
|
|
136
|
+
--cnvs-sys-color-icon-strong: var(--cnvs-base-palette-neutral-900); /* Hover icon color */
|
|
137
137
|
--cnvs-sys-color-icon-soft: var(--cnvs-base-palette-slate-600); /* Disabled icon color */
|
|
138
|
-
--cnvs-sys-color-icon-default: var(--cnvs-base-palette-neutral-
|
|
138
|
+
--cnvs-sys-color-icon-default: var(--cnvs-base-palette-neutral-800); /* Default icon color */
|
|
139
139
|
--cnvs-sys-color-text-info-softer: var(--cnvs-base-palette-blue-200); /* Active links */
|
|
140
140
|
--cnvs-sys-color-text-info-soft: var(--cnvs-base-palette-blue-400); /* Active links */
|
|
141
141
|
--cnvs-sys-color-text-info-stronger: var(--cnvs-base-palette-blue-800); /* Active links */
|
|
@@ -147,9 +147,9 @@
|
|
|
147
147
|
--cnvs-sys-color-text-positive-strong: var(--cnvs-base-palette-green-700); /* Branded hover text */
|
|
148
148
|
--cnvs-sys-color-text-positive-default: var(--cnvs-base-palette-green-600); /* Branded text */
|
|
149
149
|
--cnvs-sys-color-text-ai: var(--cnvs-base-palette-blue-950);
|
|
150
|
-
--cnvs-sys-color-text-caution-softer: var(--cnvs-base-palette-amber-
|
|
150
|
+
--cnvs-sys-color-text-caution-softer: var(--cnvs-base-palette-amber-200); /* Strong warning text */
|
|
151
151
|
--cnvs-sys-color-text-caution-stronger: var(--cnvs-base-palette-amber-975); /* Strong warning text */
|
|
152
|
-
--cnvs-sys-color-text-caution-soft: var(--cnvs-base-palette-amber-
|
|
152
|
+
--cnvs-sys-color-text-caution-soft: var(--cnvs-base-palette-amber-400); /* Strong warning text */
|
|
153
153
|
--cnvs-sys-color-text-caution-strong: var(--cnvs-base-palette-amber-950); /* Strong warning text */
|
|
154
154
|
--cnvs-sys-color-text-caution-default: var(--cnvs-base-palette-amber-900); /* Warning text */
|
|
155
155
|
--cnvs-sys-color-text-primary-softer: var(--cnvs-base-palette-blue-200); /* Active links */
|
|
@@ -163,61 +163,61 @@
|
|
|
163
163
|
--cnvs-sys-color-text-critical-strong: var(--cnvs-base-palette-red-700); /* Error text */
|
|
164
164
|
--cnvs-sys-color-text-critical-default: var(--cnvs-base-palette-red-600); /* Error text */
|
|
165
165
|
--cnvs-sys-color-text-inverse: var(--cnvs-base-palette-neutral-0); /* Inverse text color */
|
|
166
|
-
--cnvs-sys-color-text-stronger: var(--cnvs-base-palette-neutral-975); /* Display text */
|
|
167
|
-
--cnvs-sys-color-text-strong: var(--cnvs-base-palette-neutral-950); /* Heading text */
|
|
168
166
|
--cnvs-sys-color-text-hint: var(--cnvs-base-palette-slate-600); /* Hint text color */
|
|
169
167
|
--cnvs-sys-color-text-disabled: var(--cnvs-base-palette-slate-400); /* Disabled text color */
|
|
170
|
-
--cnvs-sys-color-text-
|
|
168
|
+
--cnvs-sys-color-text-stronger: var(--cnvs-base-palette-neutral-950); /* Display text */
|
|
169
|
+
--cnvs-sys-color-text-strong: var(--cnvs-base-palette-neutral-900); /* Heading text */
|
|
170
|
+
--cnvs-sys-color-text-default: var(--cnvs-base-palette-neutral-800); /* Body text */
|
|
171
171
|
--cnvs-sys-color-bg-info-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
|
|
172
172
|
--cnvs-sys-color-bg-info-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
|
|
173
173
|
--cnvs-sys-color-bg-info-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
|
|
174
174
|
--cnvs-sys-color-bg-info-soft: var(--cnvs-base-palette-blue-100); /* Disabled */
|
|
175
175
|
--cnvs-sys-color-bg-info-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
176
176
|
--cnvs-sys-color-bg-info-softest: var(--cnvs-base-palette-blue-25); /* Surface */
|
|
177
|
-
--cnvs-sys-color-bg-overlay-inverse: oklch(from var(--cnvs-base-palette-neutral-0) l c h / var(--cnvs-base-opacity-200)); /* Inverse overlay background */
|
|
178
|
-
--cnvs-sys-color-bg-translucent-inverse: oklch(from var(--cnvs-base-palette-neutral-0) l c h / var(--cnvs-base-opacity-250));
|
|
179
177
|
--cnvs-sys-color-bg-ai-strongest: var(--cnvs-base-palette-blue-950); /* AI surfaces */
|
|
180
178
|
--cnvs-sys-color-bg-ai-stronger: var(--cnvs-base-palette-blue-400); /* Active state on AI containers */
|
|
181
179
|
--cnvs-sys-color-bg-ai-strong: var(--cnvs-base-palette-blue-200); /* Hover on AI container */
|
|
182
180
|
--cnvs-sys-color-bg-ai-default: var(--cnvs-base-palette-blue-100); /* AI container */
|
|
183
|
-
--cnvs-sys-color-bg-critical-soft: var(--cnvs-base-palette-red-100); /* Disabled error background */
|
|
184
|
-
--cnvs-sys-color-bg-critical-softer: var(--cnvs-base-palette-red-50); /* Disabled error background */
|
|
185
181
|
--cnvs-sys-color-bg-critical-stronger: var(--cnvs-base-palette-red-800); /* Stronger error background */
|
|
186
182
|
--cnvs-sys-color-bg-critical-strong: var(--cnvs-base-palette-red-700); /* Strong error background */
|
|
187
|
-
--cnvs-sys-color-bg-critical-softest: var(--cnvs-base-palette-red-25); /* Input error background */
|
|
188
183
|
--cnvs-sys-color-bg-critical-default: var(--cnvs-base-palette-red-600); /* Default error background */
|
|
189
|
-
--cnvs-sys-color-bg-
|
|
190
|
-
--cnvs-sys-color-bg-
|
|
184
|
+
--cnvs-sys-color-bg-critical-soft: var(--cnvs-base-palette-red-100); /* Disabled error background */
|
|
185
|
+
--cnvs-sys-color-bg-critical-softer: var(--cnvs-base-palette-red-50); /* Disabled error background */
|
|
186
|
+
--cnvs-sys-color-bg-critical-softest: var(--cnvs-base-palette-red-25); /* Input error background */
|
|
191
187
|
--cnvs-sys-color-bg-caution-stronger: var(--cnvs-base-palette-amber-600); /* Stronger warning background */
|
|
192
188
|
--cnvs-sys-color-bg-caution-strong: var(--cnvs-base-palette-amber-500); /* Strong warning background */
|
|
193
|
-
--cnvs-sys-color-bg-caution-softest: var(--cnvs-base-palette-amber-25); /* Disabled warning background */
|
|
194
189
|
--cnvs-sys-color-bg-caution-default: var(--cnvs-base-palette-amber-400); /* Default warning background */
|
|
195
|
-
--cnvs-sys-color-bg-
|
|
196
|
-
--cnvs-sys-color-bg-
|
|
197
|
-
--cnvs-sys-color-bg-
|
|
190
|
+
--cnvs-sys-color-bg-caution-soft: var(--cnvs-base-palette-amber-100); /* Softer warning background */
|
|
191
|
+
--cnvs-sys-color-bg-caution-softer: var(--cnvs-base-palette-amber-50); /* Softer warning background */
|
|
192
|
+
--cnvs-sys-color-bg-caution-softest: var(--cnvs-base-palette-amber-25); /* Disabled warning background */
|
|
198
193
|
--cnvs-sys-color-bg-positive-stronger: var(--cnvs-base-palette-green-800); /* Active success background */
|
|
199
194
|
--cnvs-sys-color-bg-positive-strong: var(--cnvs-base-palette-green-700); /* Hover success background */
|
|
200
195
|
--cnvs-sys-color-bg-positive-default: var(--cnvs-base-palette-green-600); /* Disabled success background */
|
|
201
|
-
--cnvs-sys-color-bg-
|
|
202
|
-
--cnvs-sys-color-bg-
|
|
196
|
+
--cnvs-sys-color-bg-positive-soft: var(--cnvs-base-palette-green-100); /* Disabled success background */
|
|
197
|
+
--cnvs-sys-color-bg-positive-softer: var(--cnvs-base-palette-green-50); /* Surface success background */
|
|
198
|
+
--cnvs-sys-color-bg-positive-softest: var(--cnvs-base-palette-green-25); /* Lightest surface success background */
|
|
203
199
|
--cnvs-sys-color-bg-primary-stronger: var(--cnvs-base-palette-blue-800); /* Brand active background */
|
|
204
200
|
--cnvs-sys-color-bg-primary-strong: var(--cnvs-base-palette-blue-700); /* Brand hover background */
|
|
205
|
-
--cnvs-sys-color-bg-primary-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
206
201
|
--cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blue-600); /* Primary brand color */
|
|
202
|
+
--cnvs-sys-color-bg-primary-soft: var(--cnvs-base-palette-blue-100); /* Disabled */
|
|
203
|
+
--cnvs-sys-color-bg-primary-softer: var(--cnvs-base-palette-blue-50); /* Select */
|
|
204
|
+
--cnvs-sys-color-bg-primary-softest: var(--cnvs-base-palette-blue-25); /* Surface */
|
|
207
205
|
--cnvs-sys-color-bg-contrast-strong: var(--cnvs-base-palette-neutral-950); /* Contrast backgrounds, like Secondary Buttons */
|
|
208
206
|
--cnvs-sys-color-bg-contrast-default: var(--cnvs-base-palette-neutral-900); /* Contrast backgrounds, like Secondary Buttons */
|
|
209
|
-
--cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
|
|
210
207
|
--cnvs-sys-color-bg-muted-strong: var(--cnvs-base-palette-slate-700);
|
|
211
208
|
--cnvs-sys-color-bg-muted-default: var(--cnvs-base-palette-slate-600);
|
|
212
209
|
--cnvs-sys-color-bg-muted-soft: var(--cnvs-base-palette-slate-500);
|
|
213
|
-
--cnvs-sys-color-bg-
|
|
210
|
+
--cnvs-sys-color-bg-muted-softer: var(--cnvs-base-palette-slate-400);
|
|
214
211
|
--cnvs-sys-color-bg-alt-stronger: var(--cnvs-base-palette-slate-300); /* Active state for segmented control, Pill */
|
|
215
212
|
--cnvs-sys-color-bg-alt-strong: var(--cnvs-base-palette-slate-200); /* Active states */
|
|
216
|
-
--cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
|
|
217
213
|
--cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-slate-100); /* Surface hover, Secondary surfaces */
|
|
214
|
+
--cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-slate-50); /* Alternative page background */
|
|
215
|
+
--cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-slate-25); /* Disabled inputs */
|
|
218
216
|
--cnvs-sys-color-bg-translucent: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
|
|
219
217
|
--cnvs-sys-color-bg-overlay: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-400)); /* Overlay background */
|
|
220
|
-
--cnvs-sys-color-bg-transparent:
|
|
218
|
+
--cnvs-sys-color-bg-transparent-stronger: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-250)); /* Inverse Secondary Button Active state */
|
|
219
|
+
--cnvs-sys-color-bg-transparent-strong: oklch(from var(--cnvs-base-palette-neutral-1000) l c h / var(--cnvs-base-opacity-100)); /* Inverse Secondary Button Hover state */
|
|
220
|
+
--cnvs-sys-color-bg-transparent-default: transparent; /* Transparent background */
|
|
221
221
|
--cnvs-sys-color-bg-default: var(--cnvs-base-palette-neutral-0); /* Main background color */
|
|
222
222
|
--cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
|
|
223
223
|
--cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
|