@workday/canvas-kit-css 16.0.0-alpha.0396-next.0 → 16.0.0-alpha.0431-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/avatar.css +30 -8
  2. package/badge.css +2 -2
  3. package/button.css +92 -86
  4. package/card.css +4 -3
  5. package/color-picker.css +18 -1
  6. package/common.css +7 -0
  7. package/form-field.css +17 -3
  8. package/loading-dots.css +2 -2
  9. package/modal.css +2 -2
  10. package/package.json +2 -2
  11. package/popup.css +2 -2
  12. package/skeleton.css +2 -2
  13. package/text-input.css +18 -3
  14. package/tooltip.css +2 -2
package/avatar.css CHANGED
@@ -20,29 +20,39 @@
20
20
  height: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
21
21
  min-width: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
22
22
  min-height: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
23
- background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));
24
- color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));
23
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));
24
+ color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
25
25
  display: flex;
26
26
  align-items: center;
27
27
  justify-content: center;
28
28
  overflow: hidden;
29
29
  border: none;
30
+ outline: 0.0625rem solid transparent;
30
31
  font-family: var(--cnvs-sys-font-family-default);
31
32
  font-weight: var(--cnvs-sys-font-weight-normal);
32
33
  line-height: var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));
33
34
  font-size: var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));
34
35
  }
35
36
 
37
+ button .cnvs-base-avatar, a .cnvs-base-avatar, .cnvs-base-avatar:is(button, a) {
38
+ outline: none;
39
+ }
40
+
41
+ .cnvs-base-avatar:is(button, a):focus-visible, .cnvs-base-avatar:is(button, a).focus {
42
+ outline: 0.125rem solid transparent;
43
+ outline-offset: 0.125rem;
44
+ }
45
+
36
46
 
37
47
  .cnvs-base-avatar.variant-blue {
38
- background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));
39
- color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));
48
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));
49
+ color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
40
50
  }
41
51
 
42
52
 
43
53
  .cnvs-base-avatar.variant-amber {
44
- background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)));
45
- color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)));
54
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)));
55
+ color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)));
46
56
  }
47
57
 
48
58
 
@@ -53,8 +63,20 @@
53
63
 
54
64
 
55
65
  .cnvs-base-avatar.variant-purple {
56
- background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)));
57
- color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)));
66
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)));
67
+ color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
68
+ }
69
+
70
+
71
+ .cnvs-base-avatar.variant-magenta {
72
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)));
73
+ color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
74
+ }
75
+
76
+
77
+ .cnvs-base-avatar.variant-green {
78
+ background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)));
79
+ color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
58
80
  }
59
81
 
60
82
 
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-2n07n0 {
1
+ @keyframes animation-2flwv8 {
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-2n07n0 0.2s ease;
15
+ animation: animation-2flwv8 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/button.css CHANGED
@@ -38,7 +38,7 @@
38
38
  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
39
39
  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
40
40
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
41
- font-weight: var(--cnvs-sys-font-weight-bold);
41
+ font-weight: var(--cnvs-sys-font-weight-medium);
42
42
  background-color: var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));
43
43
  color: var(--cnvs-button-color-prop-default-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
44
44
  border-width: 0.0625rem;
@@ -127,8 +127,8 @@
127
127
  line-height: var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));
128
128
  letter-spacing: var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));
129
129
  height: var(--cnvs-sys-size-lg, 3rem);
130
- padding-inline: var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem));
131
- min-width: var(--cnvs-base-size-1400, 7rem);
130
+ padding-inline: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
131
+ min-width: var(--cnvs-base-size-1300, 6.5rem);
132
132
  }
133
133
 
134
134
 
@@ -136,9 +136,10 @@
136
136
  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
137
137
  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
138
138
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
139
- min-width: var(--cnvs-base-size-1200, 6rem);
140
- padding-inline: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
139
+ padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
141
140
  height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
141
+ gap: var(--cnvs-base-size-75, 0.375rem);
142
+ min-width: var(--cnvs-base-size-1100, 5.5rem);
142
143
  }
143
144
 
144
145
 
@@ -147,9 +148,9 @@
147
148
  line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
148
149
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
149
150
  height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
150
- min-width: var(--cnvs-base-size-1000, 5rem);
151
- padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
151
+ padding-inline: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
152
152
  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
153
+ min-width: var(--cnvs-base-size-900, 4.5rem);
153
154
  }
154
155
 
155
156
 
@@ -158,9 +159,9 @@
158
159
  line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
159
160
  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
160
161
  height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
161
- min-width: auto;
162
- padding-inline: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
162
+ padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
163
163
  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
164
+ min-width: auto;
164
165
  }
165
166
 
166
167
 
@@ -183,14 +184,14 @@
183
184
 
184
185
 
185
186
  .cnvs-button.size-large.icon-position-start {
186
- padding-inline-start: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
187
- padding-inline-end: var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem));
187
+ padding-inline-start: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
188
+ padding-inline-end: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
188
189
  }
189
190
 
190
191
 
191
192
  .cnvs-button.size-large.icon-position-end {
192
- padding-inline-start: var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem));
193
- padding-inline-end: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
193
+ padding-inline-start: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
194
+ padding-inline-end: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
194
195
  }
195
196
 
196
197
 
@@ -200,14 +201,14 @@
200
201
 
201
202
 
202
203
  .cnvs-button.size-medium.icon-position-start {
203
- padding-inline-start: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
204
- padding-inline-end: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
204
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
205
+ padding-inline-end: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
205
206
  }
206
207
 
207
208
 
208
209
  .cnvs-button.size-medium.icon-position-end {
209
- padding-inline-start: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
210
- padding-inline-end: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
210
+ padding-inline-start: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
211
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
211
212
  }
212
213
 
213
214
 
@@ -217,14 +218,14 @@
217
218
 
218
219
 
219
220
  .cnvs-button.size-small.icon-position-start {
220
- padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
221
- padding-inline-end: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
221
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
222
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
222
223
  }
223
224
 
224
225
 
225
226
  .cnvs-button.size-small.icon-position-end {
226
- padding-inline-start: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
227
- padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
227
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
228
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
228
229
  }
229
230
 
230
231
 
@@ -234,84 +235,53 @@
234
235
 
235
236
 
236
237
  .cnvs-button.size-extraSmall.icon-position-start {
237
- padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
238
- padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
238
+ padding-inline-start: calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) + 0.125rem);
239
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
239
240
  }
240
241
 
241
242
 
242
243
  .cnvs-button.size-extraSmall.icon-position-end {
243
- padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
244
- padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
244
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
245
+ padding-inline-end: calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) + 0.125rem);
245
246
  }
246
247
 
247
248
 
248
249
  .cnvs-tertiary-button {
249
250
  box-sizing: border-box;
250
- padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
251
- min-width: auto;
252
- border-width: 0.125rem;
253
251
  --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
254
252
  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
255
253
  --cnvs-button-label: var(--cnvs-sys-color-fg-default);
256
254
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
255
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
257
256
  }
258
257
 
259
258
  .cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
260
- --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
261
- --cnvs-button-label: var(--cnvs-sys-color-fg-contrast-default);
259
+ --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
262
260
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
263
- --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
264
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
261
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
262
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
263
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
265
264
  }
266
265
 
267
266
  .cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
268
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
269
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
270
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
271
- text-decoration: underline;
267
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
268
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
269
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
272
270
  }
273
271
 
274
272
  .cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
275
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
276
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
273
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
277
274
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
278
- text-decoration: underline;
275
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
279
276
  }
280
277
 
281
278
  .cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
282
- text-decoration: none;
283
279
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
284
280
  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
285
- --cnvs-button-label: var(--cnvs-sys-color-fg-default);
286
281
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
287
282
  }
288
283
 
289
284
 
290
- .cnvs-tertiary-button.icon-position-only {
291
- padding: 0;
292
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-default));
293
- }
294
-
295
- .cnvs-tertiary-button.icon-position-only:focus-visible, .cnvs-tertiary-button.icon-position-only.focus {
296
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
297
- }
298
-
299
- .cnvs-tertiary-button.icon-position-only:hover, .cnvs-tertiary-button.icon-position-only.hover {
300
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-strong));
301
- }
302
-
303
- .cnvs-tertiary-button.icon-position-only:active, .cnvs-tertiary-button.icon-position-only.active {
304
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
305
- }
306
-
307
- .cnvs-tertiary-button.icon-position-only:disabled, .cnvs-tertiary-button.icon-position-only.disabled {
308
- --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
309
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-default));
310
- }
311
-
312
-
313
-
314
-
315
285
  .cnvs-tertiary-button.variant-inverse {
316
286
  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
317
287
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
@@ -319,7 +289,7 @@
319
289
  }
320
290
 
321
291
  .cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
322
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
292
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));
323
293
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
324
294
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
325
295
  }
@@ -328,11 +298,12 @@
328
298
  --cnvs-button-background: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
329
299
  --cnvs-button-label: var(--cnvs-sys-color-fg-contrast-default);
330
300
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
331
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
301
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
302
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
332
303
  }
333
304
 
334
305
  .cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
335
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
306
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-inverse, oklch(1 0 0 / 0.26));
336
307
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
337
308
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
338
309
  }
@@ -632,13 +603,13 @@
632
603
  }
633
604
 
634
605
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
635
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
606
+ --cnvs-button-background: var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));
636
607
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
637
608
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
638
609
  }
639
610
 
640
611
  .cnvs-primary-button:active, .cnvs-primary-button.active {
641
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));
612
+ --cnvs-button-background: var(--cnvs-brand-action-darkest, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));
642
613
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
643
614
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
644
615
  }
@@ -659,7 +630,7 @@
659
630
  }
660
631
 
661
632
  .cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
662
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
633
+ --cnvs-button-background: var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%)));
663
634
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
664
635
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
665
636
  }
@@ -673,7 +644,7 @@
673
644
  }
674
645
 
675
646
  .cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
676
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));
647
+ --cnvs-button-background: var(--cnvs-brand-action-light, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%)));
677
648
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
678
649
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
679
650
  }
@@ -690,57 +661,55 @@
690
661
  box-sizing: border-box;
691
662
  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
692
663
  --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
693
- --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
694
- --cnvs-button-label: var(--cnvs-sys-color-fg-default);
664
+ --cnvs-button-border: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
665
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
695
666
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
696
667
  }
697
668
 
698
669
  .cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
699
670
  --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
700
671
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
672
+ --cnvs-button-border: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
701
673
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
702
674
  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
703
675
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
704
676
  }
705
677
 
706
678
  .cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
707
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
708
679
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
709
- --cnvs-button-border: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
680
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
710
681
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
711
682
  }
712
683
 
713
684
  .cnvs-secondary-button:active, .cnvs-secondary-button.active {
714
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
715
685
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
716
- --cnvs-button-border: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
686
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-hover);
717
687
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
718
688
  }
719
689
 
720
690
  .cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
721
691
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
722
692
  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
723
- --cnvs-button-label: var(--cnvs-sys-color-fg-default);
693
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
724
694
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
725
695
  }
726
696
 
727
697
 
728
698
  .cnvs-secondary-button.variant-inverse {
729
699
  --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
730
- --cnvs-button-border: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
700
+ --cnvs-button-border: var(--cnvs-sys-color-border-inverse-strong, oklch(1 0 0 / 0.67));
731
701
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
732
702
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
733
703
  }
734
704
 
735
705
  .cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
736
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
737
706
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
738
707
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
739
708
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
740
709
  }
741
710
 
742
711
  .cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
743
- --cnvs-button-background: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
712
+ --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
744
713
  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
745
714
  --cnvs-button-label: var(--cnvs-sys-color-fg-contrast-default);
746
715
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
@@ -749,7 +718,6 @@
749
718
  }
750
719
 
751
720
  .cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
752
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
753
721
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
754
722
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
755
723
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
@@ -780,13 +748,13 @@
780
748
  }
781
749
 
782
750
  .cnvs-delete-button:hover, .cnvs-delete-button.hover {
783
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
751
+ --cnvs-button-background: var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));
784
752
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
785
753
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-inverse));
786
754
  }
787
755
 
788
756
  .cnvs-delete-button:active, .cnvs-delete-button.active {
789
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));
757
+ --cnvs-button-background: var(--cnvs-brand-critical-800, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));
790
758
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
791
759
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-inverse));
792
760
  }
@@ -798,3 +766,41 @@
798
766
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
799
767
  }
800
768
 
769
+
770
+ .cnvs-delete-button.variant-outline {
771
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
772
+ --cnvs-button-border: var(--cnvs-sys-color-border-default);
773
+ --cnvs-button-label: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
774
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
775
+ }
776
+
777
+ .cnvs-delete-button.variant-outline:hover, .cnvs-delete-button.variant-outline.hover {
778
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
779
+ --cnvs-button-border: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
780
+ --cnvs-button-label: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
781
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
782
+ }
783
+
784
+ .cnvs-delete-button.variant-outline:focus-visible, .cnvs-delete-button.variant-outline.focus {
785
+ --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
786
+ --cnvs-button-border: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
787
+ --cnvs-button-label: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
788
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
789
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
790
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
791
+ }
792
+
793
+ .cnvs-delete-button.variant-outline:active, .cnvs-delete-button.variant-outline.active {
794
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
795
+ --cnvs-button-border: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
796
+ --cnvs-button-label: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
797
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
798
+ }
799
+
800
+ .cnvs-delete-button.variant-outline:disabled, .cnvs-delete-button.variant-outline.disabled {
801
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
802
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
803
+ --cnvs-button-label: var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
804
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
805
+ }
806
+
package/card.css CHANGED
@@ -7,18 +7,19 @@
7
7
  box-sizing: border-box;
8
8
  color: var(--cnvs-sys-color-fg-strong);
9
9
  font-weight: var(--cnvs-sys-font-weight-bold);
10
- margin-block: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
10
+ margin-block-start: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
11
+ margin-block-end: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
11
12
  }
12
13
 
13
14
 
14
15
  .cnvs-card {
15
16
  box-sizing: border-box;
17
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
16
18
  display: flex;
17
19
  flex-direction: column;
18
- gap: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
20
+ gap: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
19
21
  padding: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
20
22
  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
21
- border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
22
23
  border: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
23
24
  }
24
25
 
package/color-picker.css CHANGED
@@ -1,13 +1,14 @@
1
1
  .cnvs-color-picker-color-swatch {
2
2
  box-sizing: border-box;
3
3
  --cnvs-system-icon-color: var(--cnvs-color-picker-color-swatch-icon-color);
4
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
4
5
  width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
5
6
  height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
6
- border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
7
7
  background-color: var(--cnvs-color-picker-color-swatch-color);
8
8
  display: flex;
9
9
  align-items: center;
10
10
  justify-content: center;
11
+ forced-color-adjust: none;
11
12
  }
12
13
 
13
14
  .cnvs-color-picker-color-swatch>* {
@@ -19,6 +20,14 @@
19
20
  box-shadow: inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);
20
21
  }
21
22
 
23
+ @media (forced-colors: active) {
24
+ .cnvs-color-picker-color-swatch.with-shadow {
25
+ outline: solid 0.0625rem SelectedItemText;
26
+ }
27
+
28
+
29
+ }
30
+
22
31
 
23
32
  .cnvs-color-picker-hex-input {
24
33
  box-sizing: border-box;
@@ -53,6 +62,14 @@
53
62
  pointer-events: none;
54
63
  }
55
64
 
65
+ @media (forced-colors: active) {
66
+ .cnvs-color-picker-hex-input [data-part="color-picker-hex-input-swatch"] {
67
+ outline: solid 0.0625rem SelectedItemText;
68
+ }
69
+
70
+
71
+ }
72
+
56
73
  .cnvs-color-picker-hex-input :dir(ltr) [data-part="color-picker-hex-input"] {
57
74
  padding-inline-start: 2.875rem;
58
75
  }
package/common.css CHANGED
@@ -1,3 +1,10 @@
1
+ .cnvs-corner-shape {
2
+ box-sizing: border-box;
3
+ border-radius: var(--cnvs-corner-shape-shape);
4
+ corner-shape: superellipse(1.1);
5
+ }
6
+
7
+
1
8
  .cnvs-accessible-hide {
2
9
  clip: rect(1px, 1px, 1px, 1px);
3
10
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
package/form-field.css CHANGED
@@ -166,9 +166,9 @@
166
166
 
167
167
  .cnvs-form-field-group-list {
168
168
  box-sizing: border-box;
169
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
169
170
  display: flex;
170
171
  flex-direction: column;
171
- border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
172
172
  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
173
173
  padding: 0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
174
174
  margin: 0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);
@@ -178,13 +178,27 @@
178
178
 
179
179
 
180
180
  .cnvs-form-field-group-list.error-error {
181
- background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
182
181
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
183
182
  }
184
183
 
184
+ @media (forced-colors: active) {
185
+ .cnvs-form-field-group-list.error-error {
186
+ outline: solid 0.125rem ButtonBorder;
187
+ }
188
+
189
+
190
+ }
191
+
185
192
 
186
193
  .cnvs-form-field-group-list.error-caution {
187
- background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
188
194
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))),inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
189
195
  }
190
196
 
197
+ @media (forced-colors: active) {
198
+ .cnvs-form-field-group-list.error-caution {
199
+ outline: solid 0.125rem ButtonBorder;
200
+ }
201
+
202
+
203
+ }
204
+
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-11xvt3 {
1
+ @keyframes animation-1bh17a {
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-11xvt3;
40
+ animation-name: animation-1bh17a;
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-46a317 {
48
+ @keyframes animation-3fzqd4 {
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-46a317;
68
+ animation-name: animation-3fzqd4;
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.0396-next.0",
3
+ "version": "16.0.0-alpha.0431-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": "70f2ee99c66df706e5101477f62799d1967358ad"
29
+ "gitHead": "4c60e57196dd7159579dde8977cc784182cc6171"
30
30
  }
package/popup.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
 
13
- @keyframes animation-3yz2xp {
13
+ @keyframes animation-2iq2ck {
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-3yz2xp;
42
+ animation-name: animation-2iq2ck;
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-14y9b4 {
39
+ @keyframes animation-1s6ubh {
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-14y9b4 0.8s linear infinite alternate;
52
+ animation: animation-1s6ubh 0.8s linear infinite alternate;
53
53
  position: relative;
54
54
  overflow: hidden;
55
55
  height: 100%;
package/text-input.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .cnvs-text-input {
2
2
  box-sizing: border-box;
3
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
3
4
  font-family: var(--cnvs-sys-font-family-default);
4
5
  font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
5
6
  font-weight: var(--cnvs-sys-font-weight-normal);
@@ -8,7 +9,6 @@
8
9
  display: block;
9
10
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
10
11
  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
11
- border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
12
12
  height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
13
13
  transition: 0.2s box-shadow,0.2s border-color;
14
14
  padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
@@ -60,7 +60,6 @@
60
60
  .cnvs-text-input.error-error {
61
61
  border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
62
62
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
63
- background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
64
63
  }
65
64
 
66
65
  .cnvs-text-input.error-error:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
@@ -72,11 +71,18 @@
72
71
  outline-offset: 0.125rem;
73
72
  }
74
73
 
74
+ @media (forced-colors: active) {
75
+ .cnvs-text-input.error-error {
76
+ outline: solid 0.25rem ButtonBorder;
77
+ }
78
+
79
+
80
+ }
81
+
75
82
 
76
83
  .cnvs-text-input.error-caution {
77
84
  border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
78
85
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
79
- background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
80
86
  outline-offset: 0.125rem;
81
87
  }
82
88
 
@@ -88,6 +94,15 @@
88
94
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
89
95
  }
90
96
 
97
+ @media (forced-colors: active) {
98
+ .cnvs-text-input.error-caution {
99
+ outline: solid 0.25rem ButtonBorder;
100
+ outline-offset: 0;
101
+ }
102
+
103
+
104
+ }
105
+
91
106
 
92
107
  .cnvs-input-group-inner {
93
108
  --cnvs-input-group-inner-inset-inline-start: initial;
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-4bzd0b {
1
+ @keyframes animation-o3vof {
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-4bzd0b;
25
+ animation-name: animation-o3vof;
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);