@workday/canvas-kit-react 10.2.4 → 10.3.0-646-next.0

package/button/lib/TertiaryButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {buttonVars, getIconPosition} from './BaseButton';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {createStyles, cssVar, createModifiers} from '@workday/canvas-kit-styling';
+import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {system, brand, base} from '@workday/canvas-tokens-web';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
@@ -22,46 +22,46 @@ export interface TertiaryButtonProps extends ButtonProps {
 }
 
 const tertiaryStyles = createStyles({
-  paddingInline: cssVar(system.space.x2, '0.5rem'),
+  paddingInline: system.space.x2,
   minWidth: 'auto',
   textDecoration: 'underline',
   border: 0,
   // Default Styles
   [buttonVars.default.background]: 'transparent',
   [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: cssVar(system.shape.x1, '0.25rem'),
-  [buttonVars.default.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
-  [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+  [buttonVars.default.borderRadius]: system.shape.x1,
+  [buttonVars.default.label]: brand.primary.base,
+  [buttonVars.default.icon]: base.blackPepper400,
   // Hover Styles
-  [buttonVars.hover.background]: cssVar(base.soap200, 'rgba(241, 242, 243, 1)'),
+  [buttonVars.hover.background]: base.soap200,
   [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
-  [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+  [buttonVars.hover.label]: brand.primary.dark,
+  [buttonVars.hover.icon]: base.blackPepper500,
   // Focus Styles
   [buttonVars.focus.background]: 'transparent',
   [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
-  [buttonVars.focus.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
-  [buttonVars.focus.boxShadowInner]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
-  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
+  [buttonVars.focus.label]: brand.primary.base,
+  [buttonVars.focus.icon]: base.blackPepper500,
+  [buttonVars.focus.boxShadowInner]: brand.common.focusOutline,
+  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
   // Active Styles
-  [buttonVars.active.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
+  [buttonVars.active.background]: base.soap300,
   [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
-  [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+  [buttonVars.active.label]: brand.primary.dark,
+  [buttonVars.active.icon]: base.blackPepper500,
   // Disabled Styles
   [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, '#fff'),
-  [buttonVars.disabled.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
-  [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+  [buttonVars.disabled.border]: base.frenchVanilla100,
+  [buttonVars.disabled.label]: brand.primary.base,
+  [buttonVars.disabled.icon]: base.blackPepper400,
   [buttonVars.disabled.opacity]: '0.4',
 
   '&:focus-visible, &.focus': {
     ...focusRing({
       width: 2,
       separation: 0,
-      innerColor: cssVar(base.frenchVanilla100, cssVar(buttonVars.focus.boxShadowInner)),
-      outerColor: cssVar(brand.common.focusOutline, cssVar(buttonVars.focus.boxShadowOuter)),
+      innerColor: base.frenchVanilla100,
+      outerColor: brand.common.focusOutline,
     }),
   },
 });
@@ -69,11 +69,11 @@ const tertiaryStyles = createStyles({
 export const tertiaryButtonModifiers = createModifiers({
   isThemeable: {
     true: createStyles({
-      [buttonVars.default.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
-      [buttonVars.hover.icon]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
-      [buttonVars.focus.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
-      [buttonVars.active.icon]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
-      [buttonVars.disabled.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+      [buttonVars.default.icon]: brand.primary.base,
+      [buttonVars.hover.icon]: brand.primary.dark,
+      [buttonVars.focus.icon]: brand.primary.base,
+      [buttonVars.active.icon]: brand.primary.dark,
+      [buttonVars.disabled.icon]: brand.primary.base,
     }),
   },
   variant: {
@@ -81,36 +81,36 @@ export const tertiaryButtonModifiers = createModifiers({
       // Default Styles
       [buttonVars.default.background]: 'transparent',
       [buttonVars.default.border]: 'transparent',
-      [buttonVars.default.label]: cssVar(base.frenchVanilla100, '#fff'),
-      [buttonVars.default.icon]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.default.label]: base.frenchVanilla100,
+      [buttonVars.default.icon]: base.frenchVanilla100,
       // Hover Styles
-      [buttonVars.hover.background]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.hover.background]: base.frenchVanilla100,
       [buttonVars.hover.border]: 'transparent',
-      [buttonVars.hover.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
-      [buttonVars.hover.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+      [buttonVars.hover.label]: base.blackPepper400,
+      [buttonVars.hover.icon]: base.blackPepper400,
       // Focus Styles
-      [buttonVars.focus.background]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.focus.background]: base.frenchVanilla100,
       [buttonVars.focus.border]: 'transparent',
-      [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
-      [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+      [buttonVars.focus.label]: base.blackPepper400,
+      [buttonVars.focus.icon]: base.blackPepper400,
       // Active Styles
-      [buttonVars.active.background]: cssVar(base.soap200, 'rgba(241, 242, 243, 1)'),
+      [buttonVars.active.background]: base.soap200,
       [buttonVars.active.border]: 'transparent',
-      [buttonVars.active.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
-      [buttonVars.active.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+      [buttonVars.active.label]: base.blackPepper400,
+      [buttonVars.active.icon]: base.blackPepper400,
       // Disabled Styles
       [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, '#fff'),
-      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100, '#fff'),
-      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.disabled.border]: base.frenchVanilla100,
+      [buttonVars.disabled.label]: base.frenchVanilla100,
+      [buttonVars.disabled.icon]: base.frenchVanilla100,
 
       '&:focus-visible, &.focus': {
         ...focusRing({
           inset: 'inner',
           width: 2,
           separation: 2,
-          innerColor: cssVar(base.blackPepper400, cssVar(buttonVars.focus.boxShadowInner)),
-          outerColor: cssVar(base.frenchVanilla100, cssVar(buttonVars.focus.boxShadowOuter)),
+          innerColor: base.blackPepper400,
+          outerColor: base.frenchVanilla100,
         }),
       },
     }),
@@ -119,7 +119,7 @@ export const tertiaryButtonModifiers = createModifiers({
     largeOnly: createStyles({
       borderRadius: borderRadius.circle,
       padding: '0',
-      minWidth: `calc(${cssVar(system.space.x4, '1rem')} * 3)`,
+      minWidth: `calc(${system.space.x4} * 3)`,
     }),
     largeStart: createStyles({
       paddingInlineStart: space.xxs,

package/button/lib/ToolbarDropdownButton.tsx

@@ -9,7 +9,6 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {cssVar} from '@workday/canvas-kit-styling';
 import {ButtonColors} from './types';
 import {BaseButton} from './BaseButton';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
@@ -45,7 +44,7 @@ const StyledToolbarDropdownButton = styled(BaseButton)<StyledType & ToolbarDropd
       width: 2,
       separation: 0,
       innerColor: 'transparent',
-      outerColor: cssVar(brand.common.focusOutline, '#0875e1'),
+      outerColor: brand.common.focusOutline,
     }),
   },
 });

package/button/lib/ToolbarIconButton.tsx

@@ -9,7 +9,6 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {cssVar} from '@workday/canvas-kit-styling';
 import {ButtonColors} from './types';
 import {BaseButton} from './BaseButton';
 import {TertiaryButtonProps} from './TertiaryButton';
@@ -34,7 +33,7 @@ const StyledToolbarIconButton = styled(BaseButton)<StyledType & ToolbarIconButto
       width: 2,
       separation: 0,
       innerColor: 'transparent',
-      outerColor: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
+      outerColor: brand.common.focusOutline,
     }),
   },
 });

package/common/lib/styles/focusRing.ts

@@ -1,5 +1,6 @@
 import {keyframes, Theme, CSSObject} from '@emotion/react';
 import {canvas} from '@workday/canvas-kit-react/tokens';
+import {cssVar} from '@workday/canvas-kit-styling';
 import {defaultCanvasTheme} from '../theming/index';
 
 interface FocusRingOptions {
@@ -27,6 +28,14 @@ function calculateFocusRing({
 }: Required<Omit<FocusRingOptions, 'memoize' | 'inset'>> &
   Pick<FocusRingOptions, 'inset'>): CSSObject {
   let boxShadow, innerWidth, outerWidth;
+  if (innerColor && innerColor.startsWith('--')) {
+    // eslint-disable-next-line no-param-reassign
+    innerColor = cssVar(innerColor);
+  }
+  if (outerColor && outerColor.startsWith('--')) {
+    // eslint-disable-next-line no-param-reassign
+    outerColor = cssVar(outerColor);
+  }
 
   switch (inset) {
     case 'outer':

package/dist/commonjs/avatar/lib/Avatar.js

@@ -51,7 +51,7 @@ const StyledContainer = common_1.styled('button', {
     '&:not([disabled])': {
         '&:focus': {
             outline: 'none',
-            ...common_1.focusRing({ separation: 2 }),
+            ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
         },
     },
     ...common_1.hideMouseFocus,

package/dist/commonjs/banner/lib/Banner.js

@@ -16,7 +16,7 @@ const styles = {
     transition: 'background-color 120ms',
     '&:focus': {
         outline: 'none',
-        ...common_1.focusRing({ separation: 2 }),
+        ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
     },
     ...common_1.hideMouseFocus,
 };

package/dist/commonjs/button/lib/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAkGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}

package/dist/commonjs/button/lib/BaseButton.js

@@ -31,16 +31,16 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * Temporary css variables to be used across all Buttons.
  */
 exports.buttonVars = {
-    default: canvas_kit_styling_1.createVars({ id: "css-button-vars-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    hover: canvas_kit_styling_1.createVars({ id: "css-button-vars-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    active: canvas_kit_styling_1.createVars({ id: "css-button-vars-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    focus: canvas_kit_styling_1.createVars({ id: "css-button-vars-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
-    disabled: canvas_kit_styling_1.createVars({ id: "css-button-vars-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    default: canvas_kit_styling_1.createVars({ id: "css-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    hover: canvas_kit_styling_1.createVars({ id: "css-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    active: canvas_kit_styling_1.createVars({ id: "css-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    focus: canvas_kit_styling_1.createVars({ id: "css-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
+    disabled: canvas_kit_styling_1.createVars({ id: "css-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
 };
 /**
  * Base styles for Buttons.
  */
-const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "q8h91", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-round, 62.5rem));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled, &.disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
+const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "lwdo1", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--css-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
 /**
  * Button modifiers that will overwrite the base styles of Buttons.
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "q8h91", styl
  */
 exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
     size: {
-        large: canvas_kit_styling_1.createStyles({ name: "q8h92", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
-        medium: canvas_kit_styling_1.createStyles({ name: "q8h93", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        small: canvas_kit_styling_1.createStyles({ name: "q8h94", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
-        extraSmall: canvas_kit_styling_1.createStyles({ name: "q8h95", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        large: canvas_kit_styling_1.createStyles({ name: "lwdo2", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
+        medium: canvas_kit_styling_1.createStyles({ name: "lwdo3", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
+        small: canvas_kit_styling_1.createStyles({ name: "lwdo4", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
+        extraSmall: canvas_kit_styling_1.createStyles({ name: "lwdo5", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
     },
     iconPosition: {
-        largeOnly: canvas_kit_styling_1.createStyles({ name: "q8h96", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "q8h97", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "q8h98", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "q8h99", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "q8h9a", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "q8h9b", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "q8h9c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "q8h9d", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "q8h9e", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "q8h9f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "q8h9g", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "q8h9h", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "lwdo6", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "lwdo7", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "lwdo8", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "lwdo9", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "lwdoa", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "lwdob", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "lwdoc", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "lwdod", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "lwdoe", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "lwdof", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "lwdog", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "lwdoh", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
     },
 });
 function capitalize(string = '') {

package/dist/commonjs/button/lib/DeleteButton.js

@@ -27,7 +27,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const deleteStyles = canvas_kit_styling_1.createStyles({ name: "q8h911", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-disabled-icon:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
+const deleteStyles = canvas_kit_styling_1.createStyles({ name: "lwdo11", styles: "--css-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--css-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--css-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--css-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-disabled-background:var(--cnvs-brand-error-light, rgba(252,201,197,1));--css-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));opacity:1px;}" });
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
  * have significant consequences. They commonly appear in confirmation dialogs as the final

package/dist/commonjs/button/lib/PrimaryButton.js

@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const primaryStyles = canvas_kit_styling_1.createStyles({ name: "q8h9x", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
+const primaryStyles = canvas_kit_styling_1.createStyles({ name: "lwdox", styles: "--css-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
 exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "q8h9y", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "lwdoy", styles: "--css-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
     },
 });
 exports.PrimaryButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/SecondaryButton.js

@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const Button_1 = require("./Button");
-const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "q8h9z", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-round, 62.5rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
+const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "lwdoz", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:transparent;--css-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
 exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "q8h910", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "lwdo10", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
     },
 });
 exports.SecondaryButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/TertiaryButton.js

@@ -28,27 +28,27 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const Button_1 = require("./Button");
-const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "q8h9i", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-vars-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
+const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "lwdoi", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:transparent;--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" });
 exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
     isThemeable: {
-        true: canvas_kit_styling_1.createStyles({ name: "q8h9j", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
+        true: canvas_kit_styling_1.createStyles({ name: "lwdoj", styles: "--css-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
     },
     variant: {
-        inverse: canvas_kit_styling_1.createStyles({ name: "q8h9k", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
+        inverse: canvas_kit_styling_1.createStyles({ name: "lwdok", styles: "--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }),
     },
     iconPosition: {
-        largeOnly: canvas_kit_styling_1.createStyles({ name: "q8h9l", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, 1rem) * 3);" }),
-        largeStart: canvas_kit_styling_1.createStyles({ name: "q8h9m", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        largeEnd: canvas_kit_styling_1.createStyles({ name: "q8h9n", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        mediumOnly: canvas_kit_styling_1.createStyles({ name: "q8h9o", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
-        mediumStart: canvas_kit_styling_1.createStyles({ name: "q8h9p", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        mediumEnd: canvas_kit_styling_1.createStyles({ name: "q8h9q", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        smallOnly: canvas_kit_styling_1.createStyles({ name: "q8h9r", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
-        smallStart: canvas_kit_styling_1.createStyles({ name: "q8h9s", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        smallEnd: canvas_kit_styling_1.createStyles({ name: "q8h9t", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "q8h9u", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
-        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "q8h9v", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
-        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "q8h9w", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
+        largeOnly: canvas_kit_styling_1.createStyles({ name: "lwdol", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
+        largeStart: canvas_kit_styling_1.createStyles({ name: "lwdom", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        largeEnd: canvas_kit_styling_1.createStyles({ name: "lwdon", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ name: "lwdoo", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
+        mediumStart: canvas_kit_styling_1.createStyles({ name: "lwdop", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ name: "lwdoq", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        smallOnly: canvas_kit_styling_1.createStyles({ name: "lwdor", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
+        smallStart: canvas_kit_styling_1.createStyles({ name: "lwdos", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
+        smallEnd: canvas_kit_styling_1.createStyles({ name: "lwdot", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "lwdou", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ name: "lwdov", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "lwdow", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
     },
 });
 exports.TertiaryButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAK1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAgChB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAgChB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}

package/dist/commonjs/button/lib/ToolbarDropdownButton.js

@@ -7,7 +7,6 @@ exports.ToolbarDropdownButton = void 0;
 const react_1 = __importDefault(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const BaseButton_1 = require("./BaseButton");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
@@ -32,12 +31,7 @@ const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
         width: 18, // decrease the space between a custom icon and the chevron per design
     },
     '&:focus-visible, &.focus': {
-        ...common_1.focusRing({
-            width: 2,
-            separation: 0,
-            innerColor: 'transparent',
-            outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, '#0875e1'),
-        }),
+        ...{ boxShadow: `0 0 0 ${0} ${'transparent'}, 0 0 0 calc(${2} + ${0}) ${canvas_tokens_web_1.brand.common.focusOutline}` },
     },
 });
 exports.ToolbarDropdownButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAkBD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAkBD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}

package/dist/commonjs/button/lib/ToolbarIconButton.js

@@ -23,7 +23,6 @@ exports.ToolbarIconButton = void 0;
 const React = __importStar(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const BaseButton_1 = require("./BaseButton");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
@@ -33,12 +32,7 @@ const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
         height: 20,
     },
     '&:focus-visible, &.focus': {
-        ...common_1.focusRing({
-            width: 2,
-            separation: 0,
-            innerColor: 'transparent',
-            outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
-        }),
+        ...{ boxShadow: `0 0 0 ${0} ${'transparent'}, 0 0 0 calc(${2} + ${0}) ${canvas_tokens_web_1.brand.common.focusOutline}` },
     },
 });
 exports.ToolbarIconButton = common_1.createComponent('button')({

package/dist/commonjs/button/lib/deprecated_Button.js

@@ -130,11 +130,11 @@ const Container = styled_1.default('button')({
         '&:not([disabled])': {
             '&:focus': {
                 borderColor: buttonColors.focusBorder,
-                ...common_1.focusRing(),
+                ...{ boxShadow: `0 0 0 ${"0px"} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${"0px"}) ${"--cnvs-brand-common-focus-outline"}` },
             },
             '&:active': {
                 borderColor: buttonColors.activeBorder,
-                ...common_1.focusRing(),
+                ...{ boxShadow: `0 0 0 ${"0px"} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${"0px"}) ${"--cnvs-brand-common-focus-outline"}` },
             },
         },
         ...common_1.mouseFocusBehavior({

package/dist/commonjs/checkbox/lib/Checkbox.js

@@ -98,22 +98,10 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
         borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main,
         borderWidth: '2px',
         boxShadow: 'none',
-        ...common_1.focusRing({
-            width: variant === 'inverse' ? 2 : 0,
-            separation: 0,
-            animate: false,
-            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
-            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
-        }),
+        ...{ boxShadow: `0 0 0 ${0} ${variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined}, 0 0 0 calc(${variant === 'inverse' ? 2 : 0} + ${0}) ${variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined}` },
     },
     '&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
-        ...common_1.focusRing({
-            width: 2,
-            separation: 2,
-            animate: false,
-            innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
-            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-        }),
+        ...{ boxShadow: `0 0 0 ${2} ${variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined}, 0 0 0 calc(${2} + ${2}) ${variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline}` },
         borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
         borderWidth: '2px',
         '& span': {