@workday/canvas-kit-css 11.0.0-alpha.795-next.0 → 11.0.0-alpha.796-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.
Files changed (7) hide show
  1. package/button.css +63 -59
  2. package/checkbox.css +8 -8
  3. package/icon.css +11 -11
  4. package/loading-dots.css +4 -4
  5. package/menu.css +5 -5
  6. package/package.json +2 -2
  7. package/table.css +1 -1
package/button.css CHANGED
@@ -6,7 +6,7 @@
6
6
  letter-spacing: 0.015rem;
7
7
  font-weight: var(--cnvs-sys-font-weight-bold);
8
8
  background-color: var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));
9
- color: var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
9
+ color: var(--cnvs-button-color-prop-default-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
10
10
  border-width: 0.0625rem;
11
11
  border-style: solid;
12
12
  gap: var(--cnvs-sys-space-x2);
@@ -20,7 +20,7 @@
20
20
  white-space: nowrap;
21
21
  -webkit-font-smoothing: antialiased;
22
22
  -moz-osx-font-smoothing: grayscale;
23
- border-radius: var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));
23
+ border-radius: var(--cnvs-button-color-prop-default-border-radius, var(--cnvs-button-border-radius, var(--cnvs-sys-shape-round)));
24
24
  position: relative;
25
25
  vertical-align: middle;
26
26
  overflow: hidden;
@@ -37,15 +37,15 @@
37
37
  .cnvs-button:focus-visible, .cnvs-button.focus {
38
38
  background-color: var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));
39
39
  border-color: var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));
40
- color: var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
40
+ color: var(--cnvs-button-color-prop-focus-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
41
41
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
42
- box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-boxShadowOuter, var(--cnvs-button-boxShadowOuter, var(--cnvs-brand-primary-base)));
42
+ box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-brand-primary-base)));
43
43
  }
44
44
 
45
45
  .cnvs-button:hover, .cnvs-button.hover {
46
46
  background-color: var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));
47
47
  border-color: var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));
48
- color: var(--cnvs-button-color-prop-hover-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-stronger)));
48
+ color: var(--cnvs-button-color-prop-hover-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-stronger)));
49
49
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
50
50
  }
51
51
 
@@ -56,14 +56,14 @@
56
56
  .cnvs-button:active, .cnvs-button.active {
57
57
  background-color: var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));
58
58
  border-color: var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));
59
- color: var(--cnvs-button-color-prop-active-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
59
+ color: var(--cnvs-button-color-prop-active-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
60
60
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
61
61
  }
62
62
 
63
63
  .cnvs-button:disabled, .cnvs-button.disabled {
64
64
  background-color: var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));
65
65
  border-color: var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));
66
- color: var(--cnvs-button-color-prop-disabled-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
66
+ color: var(--cnvs-button-color-prop-disabled-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
67
67
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
68
68
  }
69
69
 
@@ -123,6 +123,8 @@
123
123
  }
124
124
 
125
125
 
126
+
127
+
126
128
  .cnvs-button--size-large.cnvs-button--icon-position-only {
127
129
  min-width: calc(var(--cnvs-sys-space-x4) * 3);
128
130
  }
@@ -198,35 +200,35 @@
198
200
  text-decoration: underline;
199
201
  border: var(--cnvs-sys-space-zero);
200
202
  --cnvs-button-background: transparent;
201
- --cnvs-button-borderRadius: var(--cnvs-sys-shape-x1);
202
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-base);
203
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
204
+ --cnvs-button-label: var(--cnvs-brand-primary-base);
203
205
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
204
206
  }
205
207
 
206
208
  .cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
207
209
  --cnvs-button-background: transparent;
208
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-base);
209
- --cnvs-button-boxShadowInner: var(--cnvs-brand-common-focus-outline);
210
- --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
210
+ --cnvs-button-label: var(--cnvs-brand-primary-base);
211
+ --cnvs-button-box-shadow-inner: var(--cnvs-brand-common-focus-outline);
212
+ --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
211
213
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
212
214
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
213
215
  }
214
216
 
215
217
  .cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
216
218
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
217
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-dark);
219
+ --cnvs-button-label: var(--cnvs-brand-primary-dark);
218
220
  --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
219
221
  }
220
222
 
221
223
  .cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
222
224
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
223
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-darkest);
225
+ --cnvs-button-label: var(--cnvs-brand-primary-darkest);
224
226
  --cnvs-system-icon-color: var(--cnvs-brand-primary-darkest);
225
227
  }
226
228
 
227
229
  .cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
228
230
  --cnvs-button-background: transparent;
229
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-base);
231
+ --cnvs-button-label: var(--cnvs-brand-primary-base);
230
232
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
231
233
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
232
234
  }
@@ -255,6 +257,8 @@
255
257
  }
256
258
 
257
259
 
260
+
261
+
258
262
  .cnvs-tertiary-button--is-themeable {
259
263
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
260
264
  }
@@ -278,32 +282,32 @@
278
282
 
279
283
  .cnvs-tertiary-button--variant-inverse {
280
284
  --cnvs-button-background: transparent;
281
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
285
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
282
286
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
283
287
  }
284
288
 
285
289
  .cnvs-tertiary-button--variant-inverse:focus-visible, .cnvs-tertiary-button--variant-inverse.focus {
286
290
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
287
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
291
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
288
292
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
289
293
  box-shadow: inset 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
290
294
  }
291
295
 
292
296
  .cnvs-tertiary-button--variant-inverse:hover, .cnvs-tertiary-button--variant-inverse.hover {
293
297
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
294
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
298
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
295
299
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
296
300
  }
297
301
 
298
302
  .cnvs-tertiary-button--variant-inverse:active, .cnvs-tertiary-button--variant-inverse.active {
299
303
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
300
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
304
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
301
305
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
302
306
  }
303
307
 
304
308
  .cnvs-tertiary-button--variant-inverse:disabled, .cnvs-tertiary-button--variant-inverse.disabled {
305
309
  --cnvs-button-background: transparent;
306
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
310
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
307
311
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
308
312
  }
309
313
 
@@ -379,34 +383,34 @@
379
383
  .cnvs-primary-button {
380
384
  box-sizing: border-box;
381
385
  --cnvs-button-background: var(--cnvs-brand-primary-base);
382
- --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
383
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
386
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
387
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
384
388
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
385
389
  }
386
390
 
387
391
  .cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
388
392
  --cnvs-button-background: var(--cnvs-brand-primary-base);
389
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
390
- --cnvs-button-boxShadowInner: var(--cnvs-sys-color-border-inverse);
391
- --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
393
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
394
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
395
+ --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
392
396
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
393
397
  }
394
398
 
395
399
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
396
400
  --cnvs-button-background: var(--cnvs-brand-primary-dark);
397
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
401
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
398
402
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
399
403
  }
400
404
 
401
405
  .cnvs-primary-button:active, .cnvs-primary-button.active {
402
406
  --cnvs-button-background: var(--cnvs-brand-primary-darkest);
403
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
407
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
404
408
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
405
409
  }
406
410
 
407
411
  .cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
408
412
  --cnvs-button-background: var(--cnvs-brand-primary-base);
409
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
413
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
410
414
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
411
415
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
412
416
  }
@@ -414,34 +418,34 @@
414
418
 
415
419
  .cnvs-primary-button--variant-inverse {
416
420
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
417
- --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
418
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
421
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
422
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
419
423
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
420
424
  }
421
425
 
422
426
  .cnvs-primary-button--variant-inverse:focus-visible, .cnvs-primary-button--variant-inverse.focus {
423
427
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
424
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
425
- --cnvs-button-boxShadowInner: var(--cnvs-sys-color-border-contrast-default);
426
- --cnvs-button-boxShadowOuter: var(--cnvs-sys-color-border-inverse);
428
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
429
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
430
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
427
431
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
428
432
  }
429
433
 
430
434
  .cnvs-primary-button--variant-inverse:hover, .cnvs-primary-button--variant-inverse.hover {
431
435
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
432
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
436
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
433
437
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
434
438
  }
435
439
 
436
440
  .cnvs-primary-button--variant-inverse:active, .cnvs-primary-button--variant-inverse.active {
437
441
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
438
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
442
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
439
443
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
440
444
  }
441
445
 
442
446
  .cnvs-primary-button--variant-inverse:disabled, .cnvs-primary-button--variant-inverse.disabled {
443
447
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
444
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
448
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
445
449
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
446
450
  }
447
451
 
@@ -450,38 +454,38 @@
450
454
  box-sizing: border-box;
451
455
  --cnvs-button-background: transparent;
452
456
  --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
453
- --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
454
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
457
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
458
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
455
459
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
456
460
  }
457
461
 
458
462
  .cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
459
463
  --cnvs-button-background: transparent;
460
464
  --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
461
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
462
- --cnvs-button-boxShadowInner: var(--cnvs-sys-color-border-inverse);
463
- --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
465
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
466
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
467
+ --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
464
468
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
465
469
  }
466
470
 
467
471
  .cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
468
472
  --cnvs-button-background: var(--cnvs-sys-color-bg-contrast-default);
469
473
  --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
470
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
474
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
471
475
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
472
476
  }
473
477
 
474
478
  .cnvs-secondary-button:active, .cnvs-secondary-button.active {
475
479
  --cnvs-button-background: var(--cnvs-sys-color-bg-contrast-strong);
476
480
  --cnvs-button-border: var(--cnvs-sys-color-border-contrast-strong);
477
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
481
+ --cnvs-button-label: var(--cnvs-brand-primary-accent);
478
482
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
479
483
  }
480
484
 
481
485
  .cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
482
486
  --cnvs-button-background: transparent;
483
487
  --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
484
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
488
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
485
489
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
486
490
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
487
491
  }
@@ -490,37 +494,37 @@
490
494
  .cnvs-secondary-button--variant-inverse {
491
495
  --cnvs-button-background: transparent;
492
496
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
493
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
497
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
494
498
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
495
499
  }
496
500
 
497
501
  .cnvs-secondary-button--variant-inverse:focus-visible, .cnvs-secondary-button--variant-inverse.focus {
498
502
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
499
503
  --cnvs-button-border: transparent;
500
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
501
- --cnvs-button-boxShadowInner: var(--cnvs-sys-color-border-contrast-default);
502
- --cnvs-button-boxShadowOuter: var(--cnvs-sys-color-border-inverse);
504
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
505
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
506
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
503
507
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
504
508
  }
505
509
 
506
510
  .cnvs-secondary-button--variant-inverse:hover, .cnvs-secondary-button--variant-inverse.hover {
507
511
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
508
512
  --cnvs-button-border: transparent;
509
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
513
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
510
514
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
511
515
  }
512
516
 
513
517
  .cnvs-secondary-button--variant-inverse:active, .cnvs-secondary-button--variant-inverse.active {
514
518
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
515
519
  --cnvs-button-border: transparent;
516
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
520
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
517
521
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
518
522
  }
519
523
 
520
524
  .cnvs-secondary-button--variant-inverse:disabled, .cnvs-secondary-button--variant-inverse.disabled {
521
525
  --cnvs-button-background: transparent;
522
526
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
523
- --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
527
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
524
528
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
525
529
  }
526
530
 
@@ -528,34 +532,34 @@
528
532
  .cnvs-delete-button {
529
533
  box-sizing: border-box;
530
534
  --cnvs-button-background: var(--cnvs-brand-error-base);
531
- --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
532
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
535
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
536
+ --cnvs-button-label: var(--cnvs-brand-error-accent);
533
537
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
534
538
  }
535
539
 
536
540
  .cnvs-delete-button:focus-visible, .cnvs-delete-button.focus {
537
541
  --cnvs-button-background: var(--cnvs-brand-error-base);
538
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
542
+ --cnvs-button-label: var(--cnvs-brand-error-accent);
539
543
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
540
- --cnvs-button-boxShadowInner: var(--cnvs-sys-color-border-inverse);
541
- --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
544
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
545
+ --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
542
546
  }
543
547
 
544
548
  .cnvs-delete-button:hover, .cnvs-delete-button.hover {
545
549
  --cnvs-button-background: var(--cnvs-brand-error-dark);
546
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
550
+ --cnvs-button-label: var(--cnvs-brand-error-accent);
547
551
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
548
552
  }
549
553
 
550
554
  .cnvs-delete-button:active, .cnvs-delete-button.active {
551
555
  --cnvs-button-background: var(--cnvs-brand-error-darkest);
552
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
556
+ --cnvs-button-label: var(--cnvs-brand-error-accent);
553
557
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
554
558
  }
555
559
 
556
560
  .cnvs-delete-button:disabled, .cnvs-delete-button.disabled {
557
561
  --cnvs-button-background: var(--cnvs-brand-error-base);
558
- --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
562
+ --cnvs-button-label: var(--cnvs-brand-error-accent);
559
563
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
560
564
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
561
565
  }
package/checkbox.css CHANGED
@@ -49,14 +49,14 @@
49
49
 
50
50
 
51
51
  .cnvs-checkbox-background--error-error {
52
- --cnvs-checkbox-background-errorRingColorInner: var(--cnvs-brand-error-base);
53
- --cnvs-checkbox-background-errorRingColorOuter: transparent;
52
+ --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-error-base);
53
+ --cnvs-checkbox-background-error-ring-color-outer: transparent;
54
54
  }
55
55
 
56
56
 
57
57
  .cnvs-checkbox-background--error-alert {
58
- --cnvs-checkbox-background-errorRingColorInner: var(--cnvs-brand-alert-base);
59
- --cnvs-checkbox-background-errorRingColorOuter: var(--cnvs-brand-alert-darkest);
58
+ --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-alert-base);
59
+ --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-brand-alert-darkest);
60
60
  }
61
61
 
62
62
 
@@ -212,17 +212,17 @@
212
212
 
213
213
 
214
214
  .cnvs-checkbox-input--error:not(:where(:focus-visible, .focus))~div:first-of-type {
215
- border-color: var(--cnvs-checkbox-background-errorRingColorInner);
216
- box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-errorRingColorInner),0 0 0 0.125rem var(--cnvs-checkbox-background-errorRingColorOuter);
215
+ border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
216
+ box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.125rem var(--cnvs-checkbox-background-error-ring-color-outer);
217
217
  }
218
218
 
219
219
  .cnvs-checkbox-input--error:where(:checked, :indeterminate)~div:first-of-type {
220
220
  border-color: transparent;
221
- box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-errorRingColorInner),0 0 0 0.3125rem var(--cnvs-checkbox-background-errorRingColorOuter);
221
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.3125rem var(--cnvs-checkbox-background-error-ring-color-outer);
222
222
  }
223
223
 
224
224
  .cnvs-checkbox-input--error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
225
- border-color: var(--cnvs-checkbox-background-errorRingColorInner);
225
+ border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
226
226
  }
227
227
 
228
228
 
package/icon.css CHANGED
@@ -65,7 +65,7 @@
65
65
 
66
66
 
67
67
  .cnvs-system-icon {
68
- --cnvs-system-icon-backgroundColor: transparent;
68
+ --cnvs-system-icon-background-color: transparent;
69
69
  box-sizing: border-box;
70
70
  }
71
71
 
@@ -74,29 +74,29 @@
74
74
  }
75
75
 
76
76
  .cnvs-system-icon .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
77
- fill: var(--cnvs-system-icon-accentColor, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));
77
+ fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));
78
78
  }
79
79
 
80
80
  .cnvs-system-icon .wd-icon-background {
81
- fill: var(--cnvs-system-icon-backgroundColor);
81
+ fill: var(--cnvs-system-icon-background-color);
82
82
  }
83
83
 
84
84
  .cnvs-system-icon:where(:hover, .hover) .wd-icon-fill {
85
- fill: var(--cnvs-deprecated-system-icon-fillHover, var(--cnvs-deprecated-system-icon-colorHover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));
85
+ fill: var(--cnvs-deprecated-system-icon-fill-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));
86
86
  }
87
87
 
88
88
  .cnvs-system-icon:where(:hover, .hover) .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
89
- fill: var(--cnvs-deprecated-system-icon-accentHover, var(--cnvs-deprecated-system-icon-colorHover, var(--cnvs-system-icon-accentColor, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));
89
+ fill: var(--cnvs-deprecated-system-icon-accent-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));
90
90
  }
91
91
 
92
92
  .cnvs-system-icon:where(:hover, .hover) .wd-icon-background {
93
- fill: var(--cnvs-deprecated-system-icon-backgroundHover, var(--cnvs-system-icon-backgroundColor));
93
+ fill: var(--cnvs-deprecated-system-icon-background-hover, var(--cnvs-system-icon-background-color));
94
94
  }
95
95
 
96
96
 
97
97
  .cnvs-system-icon-circle {
98
98
  box-sizing: border-box;
99
- background: var(--cnvs-system-icon-circle-backgroundColor, var(--cnvs-base-palette-soap-200));
99
+ background: var(--cnvs-system-icon-circle-background-color, var(--cnvs-base-palette-soap-200));
100
100
  display: flex;
101
101
  align-items: center;
102
102
  justify-content: center;
@@ -104,10 +104,10 @@
104
104
  border: none;
105
105
  border-radius: var(--cnvs-sys-shape-round);
106
106
  overflow: hidden;
107
- width: var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10));
108
- height: var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10));
109
- --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-containerSize, var(--cnvs-sys-space-x10)) * 0.625);
110
- --cnvs-system-icon-color: var(--cnvs-system-icon-circle-iconColor);
107
+ width: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
108
+ height: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
109
+ --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10)) * 0.625);
110
+ --cnvs-system-icon-color: var(--cnvs-system-icon-circle-icon-color);
111
111
  }
112
112
 
113
113
  .cnvs-system-icon-circle img {
package/loading-dots.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .cnvs-single-loading-dot {
13
- --cnvs-single-loading-dot-animationDurationMs: 40ms;
13
+ --cnvs-single-loading-dot-animation-duration-ms: 40ms;
14
14
  box-sizing: border-box;
15
15
  background-color: var(--cnvs-sys-color-bg-alt-strong);
16
16
  width: var(--cnvs-sys-space-x4);
@@ -20,7 +20,7 @@
20
20
  transform: scale(0);
21
21
  display: inline-block;
22
22
  animation-name: animation-9d34b1;
23
- animation-duration: calc(var(--cnvs-single-loading-dot-animationDurationMs) * 35);
23
+ animation-duration: calc(var(--cnvs-single-loading-dot-animation-duration-ms) * 35);
24
24
  animation-iteration-count: infinite;
25
25
  animation-timing-function: ease-in-out;
26
26
  animation-fill-mode: both;
@@ -31,11 +31,11 @@
31
31
  }
32
32
 
33
33
  .cnvs-single-loading-dot:nth-child(2) {
34
- animation-delay: calc(var(--cnvs-single-loading-dot-animationDurationMs) * 4);
34
+ animation-delay: calc(var(--cnvs-single-loading-dot-animation-duration-ms) * 4);
35
35
  }
36
36
 
37
37
  .cnvs-single-loading-dot:nth-child(3) {
38
- animation-delay: calc(var(--cnvs-single-loading-dot-animationDurationMs) * 8);
38
+ animation-delay: calc(var(--cnvs-single-loading-dot-animation-duration-ms) * 8);
39
39
  }
40
40
 
41
41
 
package/menu.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .cnvs-menu-card {
2
- --cnvs-menu-card-minWidth: 0.0625rem;
3
- --cnvs-menu-card-transformOriginVertical: top;
4
- --cnvs-menu-card-transformOriginHorizontal: left;
2
+ --cnvs-menu-card-min-width: 0.0625rem;
3
+ --cnvs-menu-card-transform-origin-vertical: top;
4
+ --cnvs-menu-card-transform-origin-horizontal: left;
5
5
  box-sizing: border-box;
6
6
  font-family: var(--cnvs-base-font-family-50);
7
7
  font-weight: var(--cnvs-base-font-weight-400);
@@ -16,8 +16,8 @@
16
16
  padding: var(--cnvs-sys-space-zero);
17
17
  max-width: calc(100vw - var(--cnvs-sys-space-x8));
18
18
  box-shadow: var(--cnvs-sys-depth-3);
19
- min-width: var(--cnvs-menu-card-minWidth);
20
- transform-origin: var(--cnvs-menu-card-transformOriginVertical) var(--cnvs-menu-card-transformOriginHorizontal);
19
+ min-width: var(--cnvs-menu-card-min-width);
20
+ transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
21
21
  }
22
22
 
23
23
  .wd-no-animation .cnvs-menu-card {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "11.0.0-alpha.795-next.0",
3
+ "version": "11.0.0-alpha.796-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": "3762ebcef04e77d2e53ebef07dbfeb4fd48481de"
28
+ "gitHead": "2313244746a317a77b62512a32c6967fda5374e3"
29
29
  }
package/table.css CHANGED
@@ -40,7 +40,7 @@
40
40
  box-sizing: border-box;
41
41
  display: grid;
42
42
  grid-auto-flow: column;
43
- grid-template-columns: repeat(var(--cnvs-children-cellNumber), minmax(10rem, 1fr));
43
+ grid-template-columns: repeat(var(--cnvs-children-cell-number), minmax(10rem, 1fr));
44
44
  }
45
45
 
46
46