@workday/canvas-kit-css 14.0.0-alpha.1238-next.0 → 14.0.0-alpha.1246-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 (14) hide show
  1. package/badge.css +5 -5
  2. package/banner.css +5 -5
  3. package/button.css +8 -5
  4. package/card.css +1 -0
  5. package/expandable.css +2 -2
  6. package/loading-dots.css +15 -3
  7. package/modal.css +2 -2
  8. package/package.json +2 -2
  9. package/pagination.css +1 -1
  10. package/popup.css +2 -2
  11. package/select.css +4 -0
  12. package/skeleton.css +2 -2
  13. package/tabs.css +1 -1
  14. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1sszko {
1
+ @keyframes animation-2neaxn {
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-1sszko 0.2s ease;
15
+ animation: animation-2neaxn 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);
@@ -23,7 +23,7 @@
23
23
  line-height: 1.25rem;
24
24
  min-width: 1.25rem;
25
25
  padding: 0 0.40625rem;
26
- background: var(--cnvs-sys-color-static-red-default);
26
+ background: var(--cnvs-sys-color-fg-critical-default);
27
27
  color: var(--cnvs-sys-color-text-inverse);
28
28
  }
29
29
 
@@ -36,8 +36,8 @@
36
36
 
37
37
 
38
38
  .cnvs-count-badge.emphasis-low {
39
- background: var(--cnvs-sys-color-static-blue-soft);
40
- color: var(--cnvs-sys-color-static-blue-stronger);
39
+ background: var(--cnvs-sys-color-bg-info-softer);
40
+ color: var(--cnvs-sys-color-fg-info-stronger);
41
41
  }
42
42
 
43
43
 
package/banner.css CHANGED
@@ -60,15 +60,15 @@
60
60
  }
61
61
 
62
62
  .cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
63
- --cnvs-system-icon-accent-color: var(--cnvs-brand-error-accent);
64
- --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
63
+ --cnvs-system-icon-accent-color: currentColor;
64
+ --cnvs-system-icon-color: currentColor;
65
65
  --cnvs-system-icon-background-color: none;
66
66
  }
67
67
 
68
68
 
69
69
  .cnvs-banner.has-errors-false {
70
70
  background-color: var(--cnvs-brand-alert-base);
71
- color: var(--cnvs-sys-color-fg-contrast-default);
71
+ color: var(--cnvs-brand-alert-accent);
72
72
  }
73
73
 
74
74
  .cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
@@ -76,8 +76,8 @@
76
76
  }
77
77
 
78
78
  .cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
79
- --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
80
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
79
+ --cnvs-system-icon-accent-color: currentColor;
80
+ --cnvs-system-icon-color: currentColor;
81
81
  --cnvs-system-icon-background-color: none;
82
82
  }
83
83
 
package/button.css CHANGED
@@ -647,14 +647,15 @@
647
647
 
648
648
  .cnvs-secondary-button {
649
649
  box-sizing: border-box;
650
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
650
+ --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
651
651
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
652
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
652
653
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
653
654
  --cnvs-system-icon-color: currentColor;
654
655
  }
655
656
 
656
657
  .cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
657
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
658
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
658
659
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
659
660
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
660
661
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
@@ -662,19 +663,21 @@
662
663
  }
663
664
 
664
665
  .cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
665
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
666
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
666
667
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
668
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
667
669
  --cnvs-system-icon-color: currentColor;
668
670
  }
669
671
 
670
672
  .cnvs-secondary-button:active, .cnvs-secondary-button.active {
671
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
673
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
672
674
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
675
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
673
676
  --cnvs-system-icon-color: currentColor;
674
677
  }
675
678
 
676
679
  .cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
677
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
680
+ --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
678
681
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
679
682
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
680
683
  --cnvs-system-icon-color: currentColor;
package/card.css CHANGED
@@ -30,5 +30,6 @@
30
30
 
31
31
  .cnvs-card.variant-filled {
32
32
  background-color: var(--cnvs-sys-color-bg-alt-soft);
33
+ border-color: var(--cnvs-sys-color-border-transparent);
33
34
  }
34
35
 
package/expandable.css CHANGED
@@ -12,8 +12,9 @@
12
12
  border-radius: var(--cnvs-sys-shape-x1);
13
13
  border-width: 0;
14
14
  display: flex;
15
- align-items: flex-start;
15
+ align-items: center;
16
16
  flex-direction: row;
17
+ gap: var(--cnvs-sys-space-x2);
17
18
  justify-content: start;
18
19
  padding: var(--cnvs-sys-space-x2);
19
20
  cursor: pointer;
@@ -83,7 +84,6 @@
83
84
 
84
85
  .cnvs-expandable-avatar {
85
86
  box-sizing: border-box;
86
- margin-inline-end: var(--cnvs-sys-space-x2);
87
87
  flex-shrink: 0;
88
88
  }
89
89
 
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-17azdh {
1
+ @keyframes animation-tgdhl {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -7,6 +7,18 @@
7
7
  transform: scale(1);
8
8
  }
9
9
 
10
+ 0%, 79%, 100% {
11
+ opacity: 0.6;
12
+ }
13
+
14
+ 27% {
15
+ opacity: 1;
16
+ }
17
+
18
+ 53% {
19
+ opacity: 0.8;
20
+ }
21
+
10
22
  }
11
23
 
12
24
  .cnvs-loading-dots {
@@ -26,7 +38,7 @@
26
38
  outline: 0.125rem solid transparent;
27
39
  transform: scale(0);
28
40
  display: inline-block;
29
- animation-name: animation-17azdh;
41
+ animation-name: animation-tgdhl;
30
42
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
31
43
  animation-iteration-count: infinite;
32
44
  animation-timing-function: ease-in-out;
@@ -47,6 +59,6 @@
47
59
 
48
60
 
49
61
  .cnvs-loading-dots.variant-inverse [data-part="loading-animation-dot"] {
50
- background-color: var(--cnvs-sys-color-bg-muted-softer, var(--cnvs-loading-dots-loading-dot-color));
62
+ background-color: var(--cnvs-sys-color-bg-default, var(--cnvs-loading-dots-loading-dot-color));
51
63
  }
52
64
 
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-48h80m {
1
+ @keyframes animation-1kmnmr {
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-48h80m;
21
+ animation-name: animation-1kmnmr;
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": "14.0.0-alpha.1238-next.0",
3
+ "version": "14.0.0-alpha.1246-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": "ddfa0ae8c1be2e17cd6133b84fa8a76825267f5b"
28
+ "gitHead": "28e18db177e94db87e0b0e3465db38ca69d0a964"
29
29
  }
package/pagination.css CHANGED
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  .cnvs-pagination-page-button:hover, .cnvs-pagination-page-button.hover {
44
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
44
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
45
45
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
46
46
  }
47
47
 
package/popup.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
 
6
- @keyframes animation-1fjixl {
6
+ @keyframes animation-3u8mpg {
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-1fjixl;
34
+ animation-name: animation-3u8mpg;
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/select.css CHANGED
@@ -35,6 +35,10 @@
35
35
  background-color: transparent;
36
36
  }
37
37
 
38
+ .cnvs-select-input:has(:disabled, .disabled) [data-part="select-caret-icon"] {
39
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
40
+ }
41
+
38
42
 
39
43
  .cnvs-select-input.error-error [data-part="select-visual-input"] {
40
44
  background-color: var(--cnvs-brand-error-lightest);
package/skeleton.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
 
39
- @keyframes animation-1po55w {
39
+ @keyframes animation-1lkzel {
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-1po55w 0.8s linear infinite alternate;
52
+ animation: animation-1lkzel 0.8s linear infinite alternate;
53
53
  position: relative;
54
54
  overflow: hidden;
55
55
  height: 100%;
package/tabs.css CHANGED
@@ -20,7 +20,7 @@
20
20
  white-space: nowrap;
21
21
  text-overflow: ellipsis;
22
22
  overflow: hidden;
23
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
23
+ --cnvs-system-icon-color: currentColor;
24
24
  }
25
25
 
26
26
  .cnvs-tab-item:has(span) {
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-2zcyz9 {
1
+ @keyframes animation-hw5nh {
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-2zcyz9;
25
+ animation-name: animation-hw5nh;
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);