@workday/canvas-kit-css 16.0.0-alpha.0444-next.0 → 16.0.0-alpha.0449-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 (9) hide show
  1. package/badge.css +2 -2
  2. package/checkbox.css +49 -34
  3. package/form-field.css +1 -1
  4. package/loading-dots.css +2 -2
  5. package/modal.css +2 -2
  6. package/package.json +2 -2
  7. package/popup.css +2 -2
  8. package/skeleton.css +2 -2
  9. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-15x4jw {
1
+ @keyframes animation-qhl6q {
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-15x4jw 0.2s ease;
15
+ animation: animation-qhl6q 0.2s ease;
16
16
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
17
17
  display: inline-flex;
18
18
  font-family: var(--cnvs-sys-font-family-default);
package/checkbox.css CHANGED
@@ -2,15 +2,15 @@
2
2
  box-sizing: border-box;
3
3
  align-items: center;
4
4
  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
5
- border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
5
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-xs, 0.25rem);
6
6
  display: flex;
7
- height: var(--cnvs-base-size-225, 1.125rem);
8
7
  justify-content: center;
9
8
  padding: 0 0.125rem;
10
9
  pointer-events: none;
11
10
  position: absolute;
12
11
  transition: border 200ms ease,background 200ms;
13
- width: var(--cnvs-base-size-225, 1.125rem);
12
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
13
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
14
14
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
15
15
  }
16
16
 
@@ -22,15 +22,13 @@
22
22
 
23
23
  .cnvs-checkbox-background.error-error {
24
24
  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
25
- --cnvs-checkbox-background-error-ring-color-outer: transparent;
26
- background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
25
+ --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
27
26
  }
28
27
 
29
28
 
30
29
  .cnvs-checkbox-background.error-caution {
31
30
  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
32
31
  --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
33
- background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
34
32
  }
35
33
 
36
34
 
@@ -46,8 +44,10 @@
46
44
 
47
45
  .cnvs-checkbox-check {
48
46
  box-sizing: border-box;
47
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
49
48
  display: flex;
50
49
  flex-direction: column;
50
+ justify-content: center;
51
51
  max-width: 100%;
52
52
  pointer-events: none;
53
53
  transition: transform 200ms ease,opacity 200ms ease;
@@ -56,7 +56,7 @@
56
56
  }
57
57
 
58
58
  .cnvs-checkbox-check span {
59
- margin-inline-start: calc(0.375rem * -1);
59
+ margin-inline-start: calc(0.3125rem * -1);
60
60
  transition: margin 200ms ease;
61
61
  }
62
62
 
@@ -75,7 +75,7 @@
75
75
 
76
76
 
77
77
  .cnvs-checkbox-check.variant-inverse {
78
- --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
78
+ --cnvs-system-icon-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
79
79
  }
80
80
 
81
81
  .cnvs-checkbox-check.variant-inverse>div {
@@ -92,7 +92,7 @@
92
92
 
93
93
 
94
94
  .cnvs-indeterminate-box.variant-inverse {
95
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
95
+ background-color: var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
96
96
  }
97
97
 
98
98
 
@@ -100,20 +100,31 @@
100
100
  box-sizing: border-box;
101
101
  display: flex;
102
102
  align-items: center;
103
- min-height: var(--cnvs-base-size-225, 1.125rem);
103
+ min-height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
104
104
  position: relative;
105
105
  }
106
106
 
107
107
  .cnvs-checkbox-container>div {
108
108
  display: flex;
109
- height: var(--cnvs-base-size-225, 1.125rem);
110
- min-width: var(--cnvs-base-size-225, 1.125rem);
109
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
110
+ min-width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
111
111
  align-self: flex-start;
112
112
  position: relative;
113
113
  }
114
114
 
115
- .cnvs-checkbox-container>label {
116
- padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
115
+ .cnvs-checkbox-container [data-part="checkbox-container-label"] {
116
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
117
+ cursor: pointer;
118
+ margin-block-start: calc(0.125rem * -1);
119
+ }
120
+
121
+
122
+ .cnvs-checkbox-container.disabled {
123
+ opacity: var(--cnvs-sys-opacity-disabled);
124
+ }
125
+
126
+ .cnvs-checkbox-container.disabled [data-part="checkbox-container-label"] {
127
+ cursor: default;
117
128
  }
118
129
 
119
130
 
@@ -121,8 +132,8 @@
121
132
  box-sizing: border-box;
122
133
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
123
134
  box-shadow: none;
124
- height: var(--cnvs-base-size-225, 1.125rem);
125
- width: var(--cnvs-base-size-225, 1.125rem);
135
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
136
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
126
137
  transition: box-shadow 150ms ease-out;
127
138
  position: absolute;
128
139
  pointer-events: none;
@@ -131,12 +142,12 @@
131
142
 
132
143
  .cnvs-checkbox-input {
133
144
  box-sizing: border-box;
134
- border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
135
- width: var(--cnvs-base-size-300, 1.5rem);
136
- height: var(--cnvs-base-size-300, 1.5rem);
145
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
146
+ width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
147
+ height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
137
148
  margin: 0;
138
- margin-block-start: calc(0.1875rem * -1);
139
- margin-inline-start: calc(0.1875rem * -1);
149
+ margin-block-start: calc(0.25rem * -1);
150
+ margin-inline-start: calc(0.25rem * -1);
140
151
  position: absolute;
141
152
  opacity: var(--cnvs-sys-opacity-zero);
142
153
  }
@@ -146,7 +157,7 @@
146
157
  }
147
158
 
148
159
  .cnvs-checkbox-input:where(:hover,.hover)~[data-part="checkbox-ripple"] {
149
- box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
160
+ box-shadow: 0 0 0 0.375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
150
161
  }
151
162
 
152
163
  .cnvs-checkbox-input:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~[data-part="checkbox-background"] {
@@ -154,8 +165,8 @@
154
165
  }
155
166
 
156
167
  .cnvs-checkbox-input:where(:checked, :indeterminate)~[data-part="checkbox-background"] {
157
- border-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
158
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
168
+ border-color: var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
169
+ background-color: var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
159
170
  }
160
171
 
161
172
  .cnvs-checkbox-input:where(:disabled, .disabled)~[data-part="checkbox-background"] {
@@ -174,10 +185,18 @@
174
185
 
175
186
  .cnvs-checkbox-input:checked:focus-visible~[data-part="checkbox-background"], .cnvs-checkbox-input:indeterminate:focus-visible~[data-part="checkbox-background"], .cnvs-checkbox-input:checked.focus~[data-part="checkbox-background"], .cnvs-checkbox-input:indeterminate.focus~[data-part="checkbox-background"] {
176
187
  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
177
- border-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
188
+ border-color: var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
178
189
  border-width: 0.125rem;
179
190
  }
180
191
 
192
+ .cnvs-checkbox-input:checked:focus-visible~[data-part="checkbox-background"] >div span, .cnvs-checkbox-input:indeterminate:focus-visible~[data-part="checkbox-background"] >div span, .cnvs-checkbox-input:checked.focus~[data-part="checkbox-background"] >div span, .cnvs-checkbox-input:indeterminate.focus~[data-part="checkbox-background"] >div span {
193
+ margin-inline-start: calc(0.375rem * -1);
194
+ }
195
+
196
+ .cnvs-checkbox-input:checked:focus-visible~[data-part="checkbox-background"] >div div, .cnvs-checkbox-input:indeterminate:focus-visible~[data-part="checkbox-background"] >div div, .cnvs-checkbox-input:checked.focus~[data-part="checkbox-background"] >div div, .cnvs-checkbox-input:indeterminate.focus~[data-part="checkbox-background"] >div div {
197
+ margin-inline-start: calc(0.0625rem * -1);
198
+ }
199
+
181
200
 
182
201
  .cnvs-checkbox-input.variant-inverse~[data-part="checkbox-background"] {
183
202
  border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
@@ -196,10 +215,6 @@
196
215
  background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
197
216
  }
198
217
 
199
- .cnvs-checkbox-input.variant-inverse:disabled~[data-part="checkbox-background"] {
200
- opacity: var(--cnvs-sys-opacity-disabled);
201
- }
202
-
203
218
  .cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate):where(:disabled, .disabled)~[data-part="checkbox-background"] {
204
219
  background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
205
220
  }
@@ -222,12 +237,12 @@
222
237
 
223
238
  .cnvs-checkbox-input.error:not(:where(:focus-visible, .focus))~div:first-of-type {
224
239
  border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
225
- 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);
240
+ box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-error-ring-color-outer),0 0 0 0.0625rem var(--cnvs-checkbox-background-error-ring-color-inner);
226
241
  }
227
242
 
228
243
  .cnvs-checkbox-input.error:where(:checked, :indeterminate)~div:first-of-type {
229
244
  border-color: transparent;
230
- box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),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);
245
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 0.1875rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-outer);
231
246
  }
232
247
 
233
248
  .cnvs-checkbox-input.error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
@@ -235,15 +250,15 @@
235
250
  }
236
251
 
237
252
 
238
- .cnvs-checkbox-input.variant-inverse.error:not(:where(:focus-visible, .focus))~div:first-of-type {
253
+ .cnvs-checkbox-input.variant-inverse.error-true:not(:where(:focus-visible, .focus))~div:first-of-type {
239
254
  border: 0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
240
255
  }
241
256
 
242
- .cnvs-checkbox-input.variant-inverse.error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
257
+ .cnvs-checkbox-input.variant-inverse.error-true:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
243
258
  border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
244
259
  }
245
260
 
246
- .cnvs-checkbox-input.variant-inverse.error:where(:checked, :indeterminate)~div:first-of-type {
261
+ .cnvs-checkbox-input.variant-inverse.error-true:where(:checked, :indeterminate)~div:first-of-type {
247
262
  border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
248
263
  }
249
264
 
package/form-field.css CHANGED
@@ -170,7 +170,7 @@
170
170
  display: flex;
171
171
  flex-direction: column;
172
172
  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
173
- padding: 0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
173
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
174
174
  margin: 0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);
175
175
  transition: 100ms box-shadow;
176
176
  width: fit-content;
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1ju52w {
1
+ @keyframes animation-3xncit {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -37,7 +37,7 @@
37
37
  outline: 0.125rem solid transparent;
38
38
  transform: scale(0);
39
39
  display: inline-block;
40
- animation-name: animation-1ju52w;
40
+ animation-name: animation-3xncit;
41
41
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
42
42
  animation-iteration-count: infinite;
43
43
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
 
47
47
 
48
- @keyframes animation-qpg6n {
48
+ @keyframes animation-3alfc4 {
49
49
  0% {
50
50
  background: none;
51
51
  }
@@ -65,7 +65,7 @@
65
65
  height: 100vh;
66
66
  background: var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));
67
67
  animation-duration: 0.3s;
68
- animation-name: animation-qpg6n;
68
+ animation-name: animation-3alfc4;
69
69
  }
70
70
 
71
71
  .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": "16.0.0-alpha.0444-next.0",
3
+ "version": "16.0.0-alpha.0449-next.0",
4
4
  "type": "module",
5
5
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
6
6
  "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
26
26
  "components",
27
27
  "workday"
28
28
  ],
29
- "gitHead": "3f302de58e8b2f669ada3ee978312c9aa600e709"
29
+ "gitHead": "bad40564ba682746a1cb3408743184f5a502b58c"
30
30
  }
package/popup.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
 
13
- @keyframes animation-2xkfi8 {
13
+ @keyframes animation-1avjkd {
14
14
  0% {
15
15
  opacity: 1;
16
16
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -39,7 +39,7 @@
39
39
  border-radius: var(--cnvs-sys-shape-xxxl, 2rem);
40
40
  max-height: var(--cnvs-popup-card-max-height);
41
41
  overflow-y: auto;
42
- animation-name: animation-2xkfi8;
42
+ animation-name: animation-1avjkd;
43
43
  animation-duration: 150ms;
44
44
  animation-timing-function: ease-out;
45
45
  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-2oc1gq {
39
+ @keyframes animation-ln64j {
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-2oc1gq 0.8s linear infinite alternate;
52
+ animation: animation-ln64j 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-3669pk {
1
+ @keyframes animation-1vo9jw {
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-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
24
24
  color: var(--cnvs-sys-color-fg-inverse);
25
- animation-name: animation-3669pk;
25
+ animation-name: animation-1vo9jw;
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);