@workday/canvas-kit-css 16.0.0-alpha.0494-next.0 → 16.0.0-alpha.0500-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 (4) hide show
  1. package/banner.css +2 -2
  2. package/button.css +10 -10
  3. package/package.json +2 -2
  4. package/pill.css +4 -4
package/banner.css CHANGED
@@ -56,7 +56,7 @@
56
56
  }
57
57
 
58
58
  .cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
59
- 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-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
59
+ 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%));
60
60
  }
61
61
 
62
62
  .cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
@@ -72,7 +72,7 @@
72
72
  }
73
73
 
74
74
  .cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
75
- background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
75
+ background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
76
76
  }
77
77
 
78
78
  .cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
package/button.css CHANGED
@@ -400,12 +400,12 @@
400
400
  }
401
401
 
402
402
  .cnvs-toolbar-icon-button:hover, .cnvs-toolbar-icon-button.hover {
403
- --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%));
403
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
404
404
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
405
405
  }
406
406
 
407
407
  .cnvs-toolbar-icon-button:active, .cnvs-toolbar-icon-button.active {
408
- --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%));
408
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
409
409
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
410
410
  }
411
411
 
@@ -452,12 +452,12 @@
452
452
  }
453
453
 
454
454
  .cnvs-toolbar-dropdown-button:hover, .cnvs-toolbar-dropdown-button.hover {
455
- --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%));
455
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
456
456
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-default));
457
457
  }
458
458
 
459
459
  .cnvs-toolbar-dropdown-button:active, .cnvs-toolbar-dropdown-button.active {
460
- --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%));
460
+ --cnvs-button-background: var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));
461
461
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
462
462
  }
463
463
 
@@ -607,13 +607,13 @@
607
607
  }
608
608
 
609
609
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
610
- --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-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));
610
+ --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%)));
611
611
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
612
612
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
613
613
  }
614
614
 
615
615
  .cnvs-primary-button:active, .cnvs-primary-button.active {
616
- --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-pressed, oklch(0.0847 0 0 / 0.36)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));
616
+ --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%)));
617
617
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
618
618
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
619
619
  }
@@ -634,7 +634,7 @@
634
634
  }
635
635
 
636
636
  .cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
637
- --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-hover-default, oklch(0.3343 0.0951 253.3 / 0.05)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%)));
637
+ --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%)));
638
638
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
639
639
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
640
640
  }
@@ -648,7 +648,7 @@
648
648
  }
649
649
 
650
650
  .cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
651
- --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-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%)));
651
+ --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%)));
652
652
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
653
653
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
654
654
  }
@@ -752,13 +752,13 @@
752
752
  }
753
753
 
754
754
  .cnvs-delete-button:hover, .cnvs-delete-button.hover {
755
- --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-hover, oklch(0.0847 0 0 / 0.17)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));
755
+ --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%)));
756
756
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
757
757
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-inverse));
758
758
  }
759
759
 
760
760
  .cnvs-delete-button:active, .cnvs-delete-button.active {
761
- --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-pressed, oklch(0.0847 0 0 / 0.36)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));
761
+ --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%)));
762
762
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
763
763
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-inverse));
764
764
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "16.0.0-alpha.0494-next.0",
3
+ "version": "16.0.0-alpha.0500-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": "7bde57a5a6d4e41fd4a2e08f9f035c609ff4a8f0"
29
+ "gitHead": "009ee6f188364d295abc6d7fa4ac2eb610bf2251"
30
30
  }
package/pill.css CHANGED
@@ -145,7 +145,7 @@
145
145
  }
146
146
 
147
147
  .cnvs-pill:hover, .cnvs-pill.hover {
148
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0392 * 100%));
148
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));
149
149
  --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
150
150
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
151
151
  --cnvs-system-icon-color: currentColor;
@@ -153,7 +153,7 @@
153
153
  }
154
154
 
155
155
  .cnvs-pill:active, .cnvs-pill.active {
156
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0745 * 100%));
156
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));
157
157
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
158
158
  --cnvs-system-icon-color: currentColor;
159
159
  --cnvs-pill-count-border-color: transparent;
@@ -216,12 +216,12 @@
216
216
  }
217
217
 
218
218
  .cnvs-pill.variant-removable:hover, .cnvs-pill.variant-removable.hover {
219
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0392 * 100%));
219
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));
220
220
  --cnvs-pill-count-background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
221
221
  }
222
222
 
223
223
  .cnvs-pill.variant-removable:active, .cnvs-pill.variant-removable.active {
224
- --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(0.0745 * 100%));
224
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));
225
225
  --cnvs-pill-count-background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
226
226
  }
227
227