@workday/canvas-kit-css 16.0.0-alpha.0424-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 (8) hide show
  1. package/badge.css +2 -2
  2. package/button.css +92 -86
  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-3ixwlo {
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-3ixwlo 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/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-2zsp0u {
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-2zsp0u;
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-3vqy2x {
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-3vqy2x;
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.0424-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": "cebd41107b3d9b3a051bfe89c62ee33f9665f0a7"
29
+ "gitHead": "4c60e57196dd7159579dde8977cc784182cc6171"
30
30
  }
package/popup.css CHANGED
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
 
13
- @keyframes animation-4dht9 {
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-4dht9;
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-4908wy {
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-4908wy 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/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1za7de {
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-1za7de;
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);