@workday/canvas-kit-css 14.0.0-alpha.1237-next.0 → 14.0.0-alpha.1239-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 +3 -3
  2. package/banner.css +5 -5
  3. package/button.css +8 -5
  4. package/card.css +1 -0
  5. package/checkbox.css +1 -1
  6. package/expandable.css +2 -2
  7. package/form-field.css +2 -2
  8. package/loading-dots.css +15 -3
  9. package/package.json +2 -2
  10. package/pagination.css +1 -1
  11. package/select.css +5 -1
  12. package/switch.css +1 -1
  13. package/tabs.css +1 -1
  14. package/text-input.css +3 -3
package/badge.css CHANGED
@@ -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/checkbox.css CHANGED
@@ -55,7 +55,7 @@
55
55
  }
56
56
 
57
57
 
58
- .cnvs-checkbox-background.error-alert {
58
+ .cnvs-checkbox-background.error-caution {
59
59
  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-common-alert-inner);
60
60
  --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-brand-common-alert-outer);
61
61
  background-color: var(--cnvs-brand-alert-lightest);
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/form-field.css CHANGED
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
 
68
- .cnvs-form-field-hint.error-alert {
68
+ .cnvs-form-field-hint.error-caution {
69
69
  color: var(--cnvs-sys-color-text-caution-default);
70
70
  }
71
71
 
@@ -149,7 +149,7 @@
149
149
  }
150
150
 
151
151
 
152
- .cnvs-form-field-group-list.error-alert {
152
+ .cnvs-form-field-group-list.error-caution {
153
153
  background-color: var(--cnvs-brand-alert-lightest);
154
154
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-outer),inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-inner);
155
155
  }
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-17azdh {
1
+ @keyframes animation-fc6cw {
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-fc6cw;
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "14.0.0-alpha.1237-next.0",
3
+ "version": "14.0.0-alpha.1239-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": "8a03bc6fdf11ecb2672ad937247aaf18b7cee0ec"
28
+ "gitHead": "fdb8b845a09a86de1fb0a383fb3c5def6016e064"
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/select.css CHANGED
@@ -35,13 +35,17 @@
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);
41
45
  }
42
46
 
43
47
 
44
- .cnvs-select-input.error-alert [data-part="select-visual-input"] {
48
+ .cnvs-select-input.error-caution [data-part="select-visual-input"] {
45
49
  background-color: var(--cnvs-brand-alert-lightest);
46
50
  }
47
51
 
package/switch.css CHANGED
@@ -49,7 +49,7 @@
49
49
  }
50
50
 
51
51
 
52
- .cnvs-switch-input.error-alert~div:first-of-type {
52
+ .cnvs-switch-input.error-caution~div:first-of-type {
53
53
  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-common-alert-inner),0 0 0 0.3125rem var(--cnvs-brand-common-alert-outer);
54
54
  }
55
55
 
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/text-input.css CHANGED
@@ -75,18 +75,18 @@
75
75
  }
76
76
 
77
77
 
78
- .cnvs-text-input.error-alert {
78
+ .cnvs-text-input.error-caution {
79
79
  border-color: var(--cnvs-brand-common-alert-outer);
80
80
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);
81
81
  background-color: var(--cnvs-brand-alert-lightest);
82
82
  outline-offset: 0.125rem;
83
83
  }
84
84
 
85
- .cnvs-text-input.error-alert:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
85
+ .cnvs-text-input.error-caution:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
86
86
  border-color: var(--cnvs-brand-common-alert-outer);
87
87
  }
88
88
 
89
- .cnvs-text-input.error-alert:is(:focus-visible, .focus):not([disabled]) {
89
+ .cnvs-text-input.error-caution:is(:focus-visible, .focus):not([disabled]) {
90
90
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
91
91
  }
92
92