@workday/canvas-kit-react 16.0.0-alpha.0441-next.0 → 16.0.0-alpha.0444-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 (5) hide show
  1. package/dist/commonjs/button/lib/DeleteButton.js +1 -1
  2. package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
  3. package/dist/es6/button/lib/DeleteButton.js +1 -1
  4. package/dist/es6/button/lib/PrimaryButton.js +2 -2
  5. package/package.json +4 -4
package/dist/commonjs/button/lib/DeleteButton.js CHANGED
@@ -10,7 +10,7 @@ const BaseButton_1 = require("./BaseButton");
10
10
  const Button_1 = require("./Button");
11
11
  const deleteButtonStencil = (0, canvas_kit_styling_1.createStencil)({
12
12
  extends: BaseButton_1.buttonStencil,
13
- base: { name: "8x39n", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
13
+ base: { name: "8x39n", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
14
14
  modifiers: {
15
15
  variant: {
16
16
  outline: { name: "2zl08g", styles: "--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-border-default);--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
package/dist/commonjs/button/lib/PrimaryButton.js CHANGED
@@ -10,11 +10,11 @@ const BaseButton_1 = require("./BaseButton");
10
10
  const Button_1 = require("./Button");
11
11
  const primaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
12
12
  extends: BaseButton_1.buttonStencil,
13
- base: { name: "1v4qo1", styles: "box-sizing:border-box;--background-button-a19f67: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))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
13
+ base: { name: "1v4qo1", styles: "box-sizing:border-box;--background-button-a19f67: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))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
14
14
  modifiers: {
15
15
  variant: {
16
16
  // Inverse Styles
17
- inverse: { name: "24m9zz", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
17
+ inverse: { name: "24m9zz", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
18
18
  }
19
19
  }
20
20
  }, "primary-button-821491");
package/dist/es6/button/lib/DeleteButton.js CHANGED
@@ -7,7 +7,7 @@ import { buttonColorPropVars, buttonStencil } from './BaseButton';
7
7
  import { Button } from './Button';
8
8
  const deleteButtonStencil = createStencil({
9
9
  extends: buttonStencil,
10
- base: { name: "8x39n", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
10
+ base: { name: "8x39n", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
11
11
  modifiers: {
12
12
  variant: {
13
13
  outline: { name: "2zl08g", styles: "--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-border-default);--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
package/dist/es6/button/lib/PrimaryButton.js CHANGED
@@ -7,11 +7,11 @@ import { buttonColorPropVars, buttonStencil } from './BaseButton';
7
7
  import { Button } from './Button';
8
8
  const primaryButtonStencil = createStencil({
9
9
  extends: buttonStencil,
10
- base: { name: "1v4qo1", styles: "box-sizing:border-box;--background-button-a19f67: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))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
10
+ base: { name: "1v4qo1", styles: "box-sizing:border-box;--background-button-a19f67: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))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67: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))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
11
11
  modifiers: {
12
12
  variant: {
13
13
  // Inverse Styles
14
- inverse: { name: "24m9zz", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
14
+ inverse: { name: "24m9zz", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67: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%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
15
15
  }
16
16
  }
17
17
  }, "primary-button-821491");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0441-next.0",
3
+ "version": "16.0.0-alpha.0444-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -53,8 +53,8 @@
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
55
  "@workday/canvas-expressive-icons-web": "1.0.2",
56
- "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0441-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0441-next.0",
56
+ "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0444-next.0",
57
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0444-next.0",
58
58
  "@workday/canvas-system-icons-web": "4.0.4",
59
59
  "@workday/canvas-tokens-web": "4.4.0-beta.3",
60
60
  "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "df9a69acd1329b7bc14a225dfbe46d4cfe3265c0"
72
+ "gitHead": "3f302de58e8b2f669ada3ee978312c9aa600e709"
73
73
  }