@workday/canvas-kit-css 15.0.0-alpha.0056-next.0 → 15.0.0-alpha.0060-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 (8) hide show
  1. package/badge.css +2 -2
  2. package/button.css +34 -34
  3. package/loading-dots.css +2 -2
  4. package/modal.css +2 -2
  5. package/package.json +2 -2
  6. package/popup.css +2 -2
  7. package/skeleton.css +2 -2
  8. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1wfqyv {
1
+ @keyframes animation-1srcy1 {
2
2
  from {
3
3
  transform: scale(0.85);
4
4
  }
@@ -12,7 +12,7 @@
12
12
  .cnvs-count-badge {
13
13
  box-sizing: border-box;
14
14
  align-items: center;
15
- animation: animation-1wfqyv 0.2s ease;
15
+ animation: animation-1srcy1 0.2s ease;
16
16
  border-radius: var(--cnvs-sys-shape-round);
17
17
  display: inline-flex;
18
18
  font-family: var(--cnvs-sys-font-family-default);
package/button.css CHANGED
@@ -227,27 +227,27 @@
227
227
  --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));
228
228
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
229
229
  --cnvs-button-label: var(--cnvs-brand-primary-base);
230
- --cnvs-system-icon-color: currentColor;
230
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
231
231
  }
232
232
 
233
233
  .cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
234
234
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
235
235
  --cnvs-button-label: var(--cnvs-brand-primary-base);
236
- --cnvs-system-icon-color: currentColor;
236
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
237
237
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
238
238
  }
239
239
 
240
240
  .cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
241
241
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
242
242
  --cnvs-button-label: var(--cnvs-brand-primary-dark);
243
- --cnvs-system-icon-color: currentColor;
243
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
244
244
  text-decoration: underline;
245
245
  }
246
246
 
247
247
  .cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
248
248
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
249
249
  --cnvs-button-label: var(--cnvs-brand-primary-darkest);
250
- --cnvs-system-icon-color: currentColor;
250
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
251
251
  text-decoration: underline;
252
252
  }
253
253
 
@@ -255,7 +255,7 @@
255
255
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
256
256
  --cnvs-button-label: var(--cnvs-brand-primary-base);
257
257
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
258
- --cnvs-system-icon-color: currentColor;
258
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
259
259
  }
260
260
 
261
261
 
@@ -286,32 +286,32 @@
286
286
  .cnvs-tertiary-button.variant-inverse {
287
287
  --cnvs-button-background: transparent;
288
288
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
289
- --cnvs-system-icon-color: currentColor;
289
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
290
290
  }
291
291
 
292
292
  .cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
293
293
  --cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
294
294
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
295
- --cnvs-system-icon-color: currentColor;
295
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
296
296
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-sys-color-border-inverse);
297
297
  }
298
298
 
299
299
  .cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
300
300
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
301
301
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
302
- --cnvs-system-icon-color: currentColor;
302
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
303
303
  }
304
304
 
305
305
  .cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
306
306
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
307
307
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
308
- --cnvs-system-icon-color: currentColor;
308
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
309
309
  }
310
310
 
311
311
  .cnvs-tertiary-button.variant-inverse:disabled, .cnvs-tertiary-button.variant-inverse.disabled {
312
312
  --cnvs-button-background: transparent;
313
313
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
314
- --cnvs-system-icon-color: currentColor;
314
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
315
315
  }
316
316
 
317
317
 
@@ -443,23 +443,23 @@
443
443
 
444
444
  .cnvs-toolbar-dropdown-button:focus-visible, .cnvs-toolbar-dropdown-button.focus {
445
445
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
446
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
446
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-muted-soft));
447
447
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
448
448
  }
449
449
 
450
450
  .cnvs-toolbar-dropdown-button:hover, .cnvs-toolbar-dropdown-button.hover {
451
451
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
452
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
452
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-muted-stronger));
453
453
  }
454
454
 
455
455
  .cnvs-toolbar-dropdown-button:active, .cnvs-toolbar-dropdown-button.active {
456
456
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
457
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
457
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-muted-stronger));
458
458
  }
459
459
 
460
460
  .cnvs-toolbar-dropdown-button:disabled, .cnvs-toolbar-dropdown-button.disabled {
461
461
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
462
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
462
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-disabled));
463
463
  }
464
464
 
465
465
  .cnvs-toolbar-dropdown-button [data-part="toolbar-dropdown-btn-custom-icon"] {
@@ -586,7 +586,7 @@
586
586
  --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
587
587
  --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));
588
588
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
589
- --cnvs-system-icon-color: currentColor;
589
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
590
590
  }
591
591
 
592
592
  .cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
@@ -594,26 +594,26 @@
594
594
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
595
595
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
596
596
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
597
- --cnvs-system-icon-color: currentColor;
597
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
598
598
  }
599
599
 
600
600
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
601
601
  --cnvs-button-background: var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));
602
602
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
603
- --cnvs-system-icon-color: currentColor;
603
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
604
604
  }
605
605
 
606
606
  .cnvs-primary-button:active, .cnvs-primary-button.active {
607
607
  --cnvs-button-background: var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));
608
608
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
609
- --cnvs-system-icon-color: currentColor;
609
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
610
610
  }
611
611
 
612
612
  .cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
613
613
  --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
614
614
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
615
615
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
616
- --cnvs-system-icon-color: currentColor;
616
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
617
617
  }
618
618
 
619
619
 
@@ -621,7 +621,7 @@
621
621
  --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
622
622
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
623
623
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
624
- --cnvs-system-icon-color: currentColor;
624
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
625
625
  }
626
626
 
627
627
  .cnvs-primary-button.variant-inverse:focus-visible, .cnvs-primary-button.variant-inverse.focus {
@@ -629,25 +629,25 @@
629
629
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
630
630
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
631
631
  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
632
- --cnvs-system-icon-color: currentColor;
632
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
633
633
  }
634
634
 
635
635
  .cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
636
636
  --cnvs-button-background: var(--cnvs-brand-action-lighter, var(--cnvs-brand-primary-lightest));
637
637
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
638
- --cnvs-system-icon-color: currentColor;
638
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
639
639
  }
640
640
 
641
641
  .cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
642
642
  --cnvs-button-background: var(--cnvs-brand-action-light, var(--cnvs-brand-primary-light));
643
643
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
644
- --cnvs-system-icon-color: currentColor;
644
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
645
645
  }
646
646
 
647
647
  .cnvs-primary-button.variant-inverse:disabled, .cnvs-primary-button.variant-inverse.disabled {
648
648
  --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
649
649
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
650
- --cnvs-system-icon-color: currentColor;
650
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
651
651
  }
652
652
 
653
653
 
@@ -657,7 +657,7 @@
657
657
  --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round));
658
658
  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
659
659
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
660
- --cnvs-system-icon-color: currentColor;
660
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
661
661
  }
662
662
 
663
663
  .cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
@@ -665,28 +665,28 @@
665
665
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
666
666
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
667
667
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
668
- --cnvs-system-icon-color: currentColor;
668
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
669
669
  }
670
670
 
671
671
  .cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
672
672
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
673
673
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
674
674
  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
675
- --cnvs-system-icon-color: currentColor;
675
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
676
676
  }
677
677
 
678
678
  .cnvs-secondary-button:active, .cnvs-secondary-button.active {
679
679
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
680
680
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
681
681
  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
682
- --cnvs-system-icon-color: currentColor;
682
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
683
683
  }
684
684
 
685
685
  .cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
686
686
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
687
687
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
688
688
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
689
- --cnvs-system-icon-color: currentColor;
689
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
690
690
  }
691
691
 
692
692
 
@@ -694,14 +694,14 @@
694
694
  --cnvs-button-background: transparent;
695
695
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
696
696
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
697
- --cnvs-system-icon-color: currentColor;
697
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
698
698
  }
699
699
 
700
700
  .cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
701
701
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
702
702
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
703
703
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
704
- --cnvs-system-icon-color: currentColor;
704
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
705
705
  }
706
706
 
707
707
  .cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
@@ -710,21 +710,21 @@
710
710
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
711
711
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
712
712
  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
713
- --cnvs-system-icon-color: currentColor;
713
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
714
714
  }
715
715
 
716
716
  .cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
717
717
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
718
718
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
719
719
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
720
- --cnvs-system-icon-color: currentColor;
720
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
721
721
  }
722
722
 
723
723
  .cnvs-secondary-button.variant-inverse:disabled, .cnvs-secondary-button.variant-inverse.disabled {
724
724
  --cnvs-button-background: transparent;
725
725
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
726
726
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
727
- --cnvs-system-icon-color: currentColor;
727
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
728
728
  }
729
729
 
730
730
 
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-14fo6y {
1
+ @keyframes animation-2rnm3t {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -38,7 +38,7 @@
38
38
  outline: 0.125rem solid transparent;
39
39
  transform: scale(0);
40
40
  display: inline-block;
41
- animation-name: animation-14fo6y;
41
+ animation-name: animation-2rnm3t;
42
42
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
43
43
  animation-iteration-count: infinite;
44
44
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-19xo12 {
1
+ @keyframes animation-1lqc63 {
2
2
  0% {
3
3
  background: none;
4
4
  }
@@ -18,7 +18,7 @@
18
18
  height: 100vh;
19
19
  background: var(--cnvs-sys-color-bg-overlay);
20
20
  animation-duration: 0.3s;
21
- animation-name: animation-19xo12;
21
+ animation-name: animation-1lqc63;
22
22
  }
23
23
 
24
24
  .wd-no-animation .cnvs-modal-overlay-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "15.0.0-alpha.0056-next.0",
3
+ "version": "15.0.0-alpha.0060-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": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
28
+ "gitHead": "34d5076dcc1f6b3d605fc3bf5b36ce5f97917686"
29
29
  }
package/popup.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
 
6
- @keyframes animation-3afa50 {
6
+ @keyframes animation-47ucsr {
7
7
  0% {
8
8
  opacity: 1;
9
9
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -31,7 +31,7 @@
31
31
  padding: var(--cnvs-sys-space-x6);
32
32
  max-height: var(--cnvs-popup-card-max-height);
33
33
  overflow-y: auto;
34
- animation-name: animation-3afa50;
34
+ animation-name: animation-47ucsr;
35
35
  animation-duration: 150ms;
36
36
  animation-timing-function: ease-out;
37
37
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/skeleton.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
 
39
- @keyframes animation-3edb5q {
39
+ @keyframes animation-34d0aa {
40
40
  from {
41
41
  opacity: 0.4;
42
42
  }
@@ -49,7 +49,7 @@
49
49
 
50
50
  .cnvs-skeleton {
51
51
  box-sizing: border-box;
52
- animation: animation-3edb5q 0.8s linear infinite alternate;
52
+ animation: animation-34d0aa 0.8s linear infinite alternate;
53
53
  position: relative;
54
54
  overflow: hidden;
55
55
  height: 100%;
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-2d4xst {
1
+ @keyframes animation-3mnj8 {
2
2
  0% {
3
3
  opacity: 0;
4
4
  transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
@@ -22,7 +22,7 @@
22
22
  position: relative;
23
23
  padding: var(--cnvs-sys-space-x3);
24
24
  color: var(--cnvs-sys-color-text-inverse);
25
- animation-name: animation-2d4xst;
25
+ animation-name: animation-3mnj8;
26
26
  animation-duration: 150ms;
27
27
  animation-timing-function: ease-out;
28
28
  transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);