@workday/canvas-kit-css 12.0.0-alpha.822-next.0 → 12.0.0-alpha.841-next.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/button.css +51 -45
- package/package.json +2 -2
package/button.css
CHANGED
|
@@ -118,6 +118,12 @@
|
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
|
|
121
|
+
.cnvs-button.grow {
|
|
122
|
+
width: 100%;
|
|
123
|
+
max-width: 100%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
|
|
121
127
|
.cnvs-button.icon-position-only {
|
|
122
128
|
padding: var(--cnvs-sys-space-zero);
|
|
123
129
|
}
|
|
@@ -202,7 +208,7 @@
|
|
|
202
208
|
--cnvs-button-background: transparent;
|
|
203
209
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
|
|
204
210
|
--cnvs-button-label: var(--cnvs-brand-primary-base);
|
|
205
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
211
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-primary-base));
|
|
206
212
|
}
|
|
207
213
|
|
|
208
214
|
.cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
|
|
@@ -210,105 +216,105 @@
|
|
|
210
216
|
--cnvs-button-label: var(--cnvs-brand-primary-base);
|
|
211
217
|
--cnvs-button-box-shadow-inner: var(--cnvs-brand-common-focus-outline);
|
|
212
218
|
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
213
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
219
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-base));
|
|
214
220
|
box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
|
|
215
221
|
}
|
|
216
222
|
|
|
217
223
|
.cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
|
|
218
224
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
219
225
|
--cnvs-button-label: var(--cnvs-brand-primary-dark);
|
|
220
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
|
|
226
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-dark));
|
|
221
227
|
}
|
|
222
228
|
|
|
223
229
|
.cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
|
|
224
230
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
|
|
225
231
|
--cnvs-button-label: var(--cnvs-brand-primary-darkest);
|
|
226
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-darkest);
|
|
232
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-darkest));
|
|
227
233
|
}
|
|
228
234
|
|
|
229
235
|
.cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
|
|
230
236
|
--cnvs-button-background: transparent;
|
|
231
237
|
--cnvs-button-label: var(--cnvs-brand-primary-base);
|
|
232
238
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
233
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
239
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-base));
|
|
234
240
|
}
|
|
235
241
|
|
|
236
242
|
|
|
237
243
|
.cnvs-tertiary-button.icon-position-only {
|
|
238
244
|
padding: 0;
|
|
239
245
|
border-radius: var(--cnvs-sys-shape-round);
|
|
240
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
246
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
|
|
241
247
|
}
|
|
242
248
|
|
|
243
249
|
.cnvs-tertiary-button.icon-position-only:focus-visible, .cnvs-tertiary-button.icon-position-only.focus {
|
|
244
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
250
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
|
|
245
251
|
}
|
|
246
252
|
|
|
247
253
|
.cnvs-tertiary-button.icon-position-only:hover, .cnvs-tertiary-button.icon-position-only.hover {
|
|
248
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
254
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-strong));
|
|
249
255
|
}
|
|
250
256
|
|
|
251
257
|
.cnvs-tertiary-button.icon-position-only:active, .cnvs-tertiary-button.icon-position-only.active {
|
|
252
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-
|
|
258
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
|
|
253
259
|
}
|
|
254
260
|
|
|
255
261
|
.cnvs-tertiary-button.icon-position-only:disabled, .cnvs-tertiary-button.icon-position-only.disabled {
|
|
256
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
262
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
|
|
257
263
|
}
|
|
258
264
|
|
|
259
265
|
|
|
260
266
|
|
|
261
267
|
|
|
262
268
|
.cnvs-tertiary-button.is-themeable {
|
|
263
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
269
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-primary-base));
|
|
264
270
|
}
|
|
265
271
|
|
|
266
272
|
.cnvs-tertiary-button.is-themeable:focus-visible, .cnvs-tertiary-button.is-themeable.focus {
|
|
267
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
273
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-base));
|
|
268
274
|
}
|
|
269
275
|
|
|
270
276
|
.cnvs-tertiary-button.is-themeable:hover, .cnvs-tertiary-button.is-themeable.hover {
|
|
271
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
|
|
277
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-dark));
|
|
272
278
|
}
|
|
273
279
|
|
|
274
280
|
.cnvs-tertiary-button.is-themeable:active, .cnvs-tertiary-button.is-themeable.active {
|
|
275
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-darkest);
|
|
281
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-darkest));
|
|
276
282
|
}
|
|
277
283
|
|
|
278
284
|
.cnvs-tertiary-button.is-themeable:disabled, .cnvs-tertiary-button.is-themeable.disabled {
|
|
279
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-base);
|
|
285
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-primary-base));
|
|
280
286
|
}
|
|
281
287
|
|
|
282
288
|
|
|
283
289
|
.cnvs-tertiary-button.variant-inverse {
|
|
284
290
|
--cnvs-button-background: transparent;
|
|
285
291
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
286
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
|
|
292
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-inverse));
|
|
287
293
|
}
|
|
288
294
|
|
|
289
295
|
.cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
|
|
290
296
|
--cnvs-button-background: var(--cnvs-sys-color-bg-default);
|
|
291
297
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
292
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
298
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
|
|
293
299
|
box-shadow: inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
|
|
294
300
|
}
|
|
295
301
|
|
|
296
302
|
.cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
|
|
297
303
|
--cnvs-button-background: var(--cnvs-sys-color-bg-default);
|
|
298
304
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
299
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
305
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-strong));
|
|
300
306
|
}
|
|
301
307
|
|
|
302
308
|
.cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
|
|
303
309
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
|
|
304
310
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
305
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
311
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
|
|
306
312
|
}
|
|
307
313
|
|
|
308
314
|
.cnvs-tertiary-button.variant-inverse:disabled, .cnvs-tertiary-button.variant-inverse.disabled {
|
|
309
315
|
--cnvs-button-background: transparent;
|
|
310
316
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
311
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
|
|
317
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-inverse));
|
|
312
318
|
}
|
|
313
319
|
|
|
314
320
|
|
|
@@ -385,7 +391,7 @@
|
|
|
385
391
|
--cnvs-button-background: var(--cnvs-brand-primary-base);
|
|
386
392
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
387
393
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
388
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
394
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-primary-accent));
|
|
389
395
|
}
|
|
390
396
|
|
|
391
397
|
.cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
|
|
@@ -393,26 +399,26 @@
|
|
|
393
399
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
394
400
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
|
|
395
401
|
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
396
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
402
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-primary-accent));
|
|
397
403
|
}
|
|
398
404
|
|
|
399
405
|
.cnvs-primary-button:hover, .cnvs-primary-button.hover {
|
|
400
406
|
--cnvs-button-background: var(--cnvs-brand-primary-dark);
|
|
401
407
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
402
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
408
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-accent));
|
|
403
409
|
}
|
|
404
410
|
|
|
405
411
|
.cnvs-primary-button:active, .cnvs-primary-button.active {
|
|
406
412
|
--cnvs-button-background: var(--cnvs-brand-primary-darkest);
|
|
407
413
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
408
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
414
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-accent));
|
|
409
415
|
}
|
|
410
416
|
|
|
411
417
|
.cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
|
|
412
418
|
--cnvs-button-background: var(--cnvs-brand-primary-base);
|
|
413
419
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
414
420
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
415
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
421
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-primary-accent));
|
|
416
422
|
}
|
|
417
423
|
|
|
418
424
|
|
|
@@ -420,7 +426,7 @@
|
|
|
420
426
|
--cnvs-button-background: var(--cnvs-sys-color-bg-default);
|
|
421
427
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
422
428
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
423
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
429
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
|
|
424
430
|
}
|
|
425
431
|
|
|
426
432
|
.cnvs-primary-button.variant-inverse:focus-visible, .cnvs-primary-button.variant-inverse.focus {
|
|
@@ -428,25 +434,25 @@
|
|
|
428
434
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
429
435
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
|
|
430
436
|
--cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
|
|
431
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
437
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
|
|
432
438
|
}
|
|
433
439
|
|
|
434
440
|
.cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
|
|
435
441
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
436
442
|
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
437
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
|
|
443
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
|
|
438
444
|
}
|
|
439
445
|
|
|
440
446
|
.cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
|
|
441
447
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
|
|
442
448
|
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
443
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
|
|
449
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-stronger));
|
|
444
450
|
}
|
|
445
451
|
|
|
446
452
|
.cnvs-primary-button.variant-inverse:disabled, .cnvs-primary-button.variant-inverse.disabled {
|
|
447
453
|
--cnvs-button-background: var(--cnvs-sys-color-bg-default);
|
|
448
454
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
449
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
455
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
|
|
450
456
|
}
|
|
451
457
|
|
|
452
458
|
|
|
@@ -456,7 +462,7 @@
|
|
|
456
462
|
--cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
|
|
457
463
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
458
464
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
459
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
465
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
|
|
460
466
|
}
|
|
461
467
|
|
|
462
468
|
.cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
|
|
@@ -465,21 +471,21 @@
|
|
|
465
471
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
466
472
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
|
|
467
473
|
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
468
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
474
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
|
|
469
475
|
}
|
|
470
476
|
|
|
471
477
|
.cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
|
|
472
478
|
--cnvs-button-background: var(--cnvs-sys-color-bg-contrast-default);
|
|
473
479
|
--cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
|
|
474
480
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
475
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
481
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-primary-accent));
|
|
476
482
|
}
|
|
477
483
|
|
|
478
484
|
.cnvs-secondary-button:active, .cnvs-secondary-button.active {
|
|
479
485
|
--cnvs-button-background: var(--cnvs-sys-color-bg-contrast-strong);
|
|
480
486
|
--cnvs-button-border: var(--cnvs-sys-color-border-contrast-strong);
|
|
481
487
|
--cnvs-button-label: var(--cnvs-brand-primary-accent);
|
|
482
|
-
--cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
|
|
488
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-primary-accent));
|
|
483
489
|
}
|
|
484
490
|
|
|
485
491
|
.cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
|
|
@@ -487,7 +493,7 @@
|
|
|
487
493
|
--cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
|
|
488
494
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
489
495
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
490
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
496
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
|
|
491
497
|
}
|
|
492
498
|
|
|
493
499
|
|
|
@@ -495,7 +501,7 @@
|
|
|
495
501
|
--cnvs-button-background: transparent;
|
|
496
502
|
--cnvs-button-border: var(--cnvs-sys-color-border-inverse);
|
|
497
503
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
498
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
|
|
504
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-inverse));
|
|
499
505
|
}
|
|
500
506
|
|
|
501
507
|
.cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
|
|
@@ -504,28 +510,28 @@
|
|
|
504
510
|
--cnvs-button-label: var(--cnvs-sys-color-fg-strong);
|
|
505
511
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
|
|
506
512
|
--cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
|
|
507
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
|
|
513
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
|
|
508
514
|
}
|
|
509
515
|
|
|
510
516
|
.cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
|
|
511
517
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
|
|
512
518
|
--cnvs-button-border: transparent;
|
|
513
519
|
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
514
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
|
|
520
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
|
|
515
521
|
}
|
|
516
522
|
|
|
517
523
|
.cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
|
|
518
524
|
--cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
|
|
519
525
|
--cnvs-button-border: transparent;
|
|
520
526
|
--cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
|
|
521
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
|
|
527
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-stronger));
|
|
522
528
|
}
|
|
523
529
|
|
|
524
530
|
.cnvs-secondary-button.variant-inverse:disabled, .cnvs-secondary-button.variant-inverse.disabled {
|
|
525
531
|
--cnvs-button-background: transparent;
|
|
526
532
|
--cnvs-button-border: var(--cnvs-sys-color-border-inverse);
|
|
527
533
|
--cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
|
|
528
|
-
--cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
|
|
534
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-inverse));
|
|
529
535
|
}
|
|
530
536
|
|
|
531
537
|
|
|
@@ -534,13 +540,13 @@
|
|
|
534
540
|
--cnvs-button-background: var(--cnvs-brand-error-base);
|
|
535
541
|
--cnvs-button-border-radius: var(--cnvs-sys-shape-round);
|
|
536
542
|
--cnvs-button-label: var(--cnvs-brand-error-accent);
|
|
537
|
-
--cnvs-system-icon-color: var(--cnvs-brand-error-accent);
|
|
543
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-error-accent));
|
|
538
544
|
}
|
|
539
545
|
|
|
540
546
|
.cnvs-delete-button:focus-visible, .cnvs-delete-button.focus {
|
|
541
547
|
--cnvs-button-background: var(--cnvs-brand-error-base);
|
|
542
548
|
--cnvs-button-label: var(--cnvs-brand-error-accent);
|
|
543
|
-
--cnvs-system-icon-color: var(--cnvs-brand-error-accent);
|
|
549
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-error-accent));
|
|
544
550
|
--cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
|
|
545
551
|
--cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
|
|
546
552
|
}
|
|
@@ -548,19 +554,19 @@
|
|
|
548
554
|
.cnvs-delete-button:hover, .cnvs-delete-button.hover {
|
|
549
555
|
--cnvs-button-background: var(--cnvs-brand-error-dark);
|
|
550
556
|
--cnvs-button-label: var(--cnvs-brand-error-accent);
|
|
551
|
-
--cnvs-system-icon-color: var(--cnvs-brand-error-accent);
|
|
557
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-error-accent));
|
|
552
558
|
}
|
|
553
559
|
|
|
554
560
|
.cnvs-delete-button:active, .cnvs-delete-button.active {
|
|
555
561
|
--cnvs-button-background: var(--cnvs-brand-error-darkest);
|
|
556
562
|
--cnvs-button-label: var(--cnvs-brand-error-accent);
|
|
557
|
-
--cnvs-system-icon-color: var(--cnvs-brand-error-accent);
|
|
563
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-error-accent));
|
|
558
564
|
}
|
|
559
565
|
|
|
560
566
|
.cnvs-delete-button:disabled, .cnvs-delete-button.disabled {
|
|
561
567
|
--cnvs-button-background: var(--cnvs-brand-error-base);
|
|
562
568
|
--cnvs-button-label: var(--cnvs-brand-error-accent);
|
|
563
|
-
--cnvs-system-icon-color: var(--cnvs-brand-error-accent);
|
|
569
|
+
--cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-error-accent));
|
|
564
570
|
--cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
|
|
565
571
|
}
|
|
566
572
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-css",
|
|
3
|
-
"version": "12.0.0-alpha.
|
|
3
|
+
"version": "12.0.0-alpha.841-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit CSS components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"components",
|
|
26
26
|
"workday"
|
|
27
27
|
],
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "066c4b170850949586bf9f89370f5302a6c8f9a4"
|
|
29
29
|
}
|