@workday/canvas-kit-react 16.0.0-alpha.0424-next.0 → 16.0.0-alpha.0433-next.0

package/button/lib/BaseButton.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil, createVars, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {calc, createStencil, createVars, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
 import {base, system} from '@workday/canvas-tokens-web';
 
@@ -125,7 +125,7 @@ export const buttonStencil = createStencil({
     fontSize: system.legacy.fontSize.subtext.lg,
     lineHeight: system.legacy.lineHeight.subtext.lg,
     letterSpacing: system.legacy.letterSpacing.subtext.lg,
-    fontWeight: system.fontWeight.bold,
+    fontWeight: system.fontWeight.medium,
     backgroundColor: cssVar(
       buttonColorPropVars.default.background,
       cssVar(background, 'transparent')
@@ -253,34 +253,35 @@ export const buttonStencil = createStencil({
         lineHeight: system.legacy.lineHeight.body.sm,
         letterSpacing: system.legacy.letterSpacing.body.sm,
         height: system.legacy.size.lg,
-        paddingInline: system.legacy.padding.xxl,
-        minWidth: base.legacy.size1400,
+        paddingInline: system.legacy.padding.lg,
+        minWidth: base.legacy.size1300,
       },
       medium: {
         fontSize: system.legacy.fontSize.subtext.lg,
         lineHeight: system.legacy.lineHeight.subtext.lg,
         letterSpacing: system.legacy.letterSpacing.subtext.lg,
-        minWidth: base.legacy.size1200,
-        paddingInline: system.legacy.padding.xl,
+        paddingInline: system.legacy.padding.md,
         height: system.legacy.size.md,
+        gap: base.legacy.size75,
+        minWidth: base.legacy.size1100,
       },
       small: {
         fontSize: system.legacy.fontSize.subtext.lg,
         lineHeight: system.legacy.lineHeight.subtext.lg,
         letterSpacing: system.legacy.letterSpacing.subtext.lg,
         height: system.legacy.size.sm,
-        minWidth: base.legacy.size1000,
-        paddingInline: system.legacy.padding.md,
+        paddingInline: system.legacy.padding.sm,
         gap: system.legacy.gap.xs,
+        minWidth: base.legacy.size900,
       },
       extraSmall: {
         fontSize: system.legacy.fontSize.subtext.md,
         lineHeight: system.legacy.lineHeight.subtext.md,
         letterSpacing: system.legacy.letterSpacing.subtext.md,
         height: system.legacy.size.xs,
-        minWidth: 'auto',
-        paddingInline: system.legacy.padding.sm,
+        paddingInline: system.legacy.padding.xs,
         gap: system.legacy.gap.xs,
+        minWidth: 'auto',
       },
     },
     grow: {
@@ -307,15 +308,15 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'large', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.legacy.padding.xl,
-        paddingInlineEnd: system.legacy.padding.xxl,
+        paddingInlineStart: system.legacy.padding.md,
+        paddingInlineEnd: system.legacy.padding.lg,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.legacy.padding.xxl,
-        paddingInlineEnd: system.legacy.padding.xl,
+        paddingInlineStart: system.legacy.padding.lg,
+        paddingInlineEnd: system.legacy.padding.md,
       },
     },
     {
@@ -327,15 +328,15 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'medium', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.legacy.padding.lg,
-        paddingInlineEnd: system.legacy.padding.xl,
+        paddingInlineStart: system.legacy.padding.sm,
+        paddingInlineEnd: system.legacy.padding.md,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.legacy.padding.xl,
-        paddingInlineEnd: system.legacy.padding.lg,
+        paddingInlineStart: system.legacy.padding.md,
+        paddingInlineEnd: system.legacy.padding.sm,
       },
     },
     {
@@ -347,15 +348,15 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'small', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.legacy.padding.sm,
-        paddingInlineEnd: system.legacy.padding.md,
+        paddingInlineStart: system.legacy.padding.xs,
+        paddingInlineEnd: system.legacy.padding.sm,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.legacy.padding.md,
-        paddingInlineEnd: system.legacy.padding.sm,
+        paddingInlineStart: system.legacy.padding.sm,
+        paddingInlineEnd: system.legacy.padding.xs,
       },
     },
     {
@@ -367,15 +368,15 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'extraSmall', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.legacy.padding.xs,
-        paddingInlineEnd: system.legacy.padding.sm,
+        paddingInlineStart: calc.add(system.legacy.padding.xxs, px2rem(2)),
+        paddingInlineEnd: system.legacy.padding.xs,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.legacy.padding.sm,
-        paddingInlineEnd: system.legacy.padding.xs,
+        paddingInlineStart: system.legacy.padding.xs,
+        paddingInlineEnd: calc.add(system.legacy.padding.xxs, px2rem(2)),
       },
     },
   ],

package/button/lib/DeleteButton.tsx

@@ -1,7 +1,7 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {colorSpace, createStencil, cssVar} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {brand, system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, ButtonProps} from './Button';
@@ -11,7 +11,12 @@ import {Button, ButtonProps} from './Button';
  * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
  * Use this type to extend and customize any one off buttons that you want full control over styling.
  */
-export interface DeleteButtonProps extends ButtonProps {}
+export interface DeleteButtonProps extends ButtonProps {
+  /**
+   * Variant has an option for `outline` which will reverse the styling of the button
+   */
+  variant?: 'outline';
+}
 
 const deleteButtonStencil = createStencil({
   extends: buttonStencil,
@@ -37,11 +42,14 @@ const deleteButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.brand.accent.critical,
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.hover,
-      }),
+      [buttonStencil.vars.background]: cssVar(
+        brand.critical700,
+        colorSpace.hover({
+          color: system.legacy.color.brand.accent.critical,
+          fallback: system.legacy.color.brand.accent.critical,
+          colorType: 'accent',
+        })
+      ),
       [buttonStencil.vars.label]: system.color.fg.inverse,
       [systemIconStencil.vars.color]: cssVar(
         buttonColorPropVars.hover.icon,
@@ -50,11 +58,14 @@ const deleteButtonStencil = createStencil({
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.brand.accent.critical,
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.pressed,
-      }),
+      [buttonStencil.vars.background]: cssVar(
+        brand.critical800,
+        colorSpace.pressed({
+          color: system.legacy.color.brand.accent.critical,
+          fallback: system.legacy.color.brand.accent.critical,
+          colorType: 'accent',
+        })
+      ),
       [buttonStencil.vars.label]: system.color.fg.inverse,
       [systemIconStencil.vars.color]: cssVar(
         buttonColorPropVars.active.icon,
@@ -72,6 +83,47 @@ const deleteButtonStencil = createStencil({
       [buttonStencil.vars.label]: system.color.fg.inverse,
     },
   },
+  modifiers: {
+    variant: {
+      outline: {
+        // Default Styles
+        [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+        [buttonStencil.vars.border]: system.color.border.default,
+        [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
+        [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
+        // Hover Styles
+        '&:hover, &.hover': {
+          [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+          [buttonStencil.vars.border]: system.legacy.color.brand.border.critical,
+          [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
+        },
+        // Focus Styles
+        '&:focus-visible, &.focus': {
+          [buttonStencil.vars.background]: system.legacy.color.surface.default,
+          [buttonStencil.vars.border]: system.legacy.color.border.default,
+          [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
+          [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
+          [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
+        },
+        // Active Styles
+        '&:active, &.active': {
+          [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+          [buttonStencil.vars.border]: system.legacy.color.brand.border.critical,
+          [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
+        },
+        // Disabled Styles
+        '&:disabled, &.disabled': {
+          [buttonStencil.vars.opacity]: system.opacity.disabled,
+          [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+          [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
+        },
+      },
+    },
+  },
 });
 
 /**
@@ -82,7 +134,7 @@ const deleteButtonStencil = createStencil({
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
   Component: (
-    {children, size, iconPosition, grow, cs, ...elemProps}: DeleteButtonProps,
+    {children, size, iconPosition, grow, variant, cs, ...elemProps}: DeleteButtonProps,
     ref,
     Element
   ) => {
@@ -93,7 +145,7 @@ export const DeleteButton = createComponent('button')({
         size={size}
         grow={grow}
         iconPosition={iconPosition}
-        cs={[deleteButtonStencil({size, iconPosition}), cs]}
+        cs={[deleteButtonStencil({variant, size, iconPosition}), cs]}
         {...elemProps}
       >
         {children}

package/button/lib/PrimaryButton.tsx

@@ -43,21 +43,27 @@ const primaryButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.hover,
-      }),
+      [buttonStencil.vars.background]: cssVar(
+        brand.action.dark,
+        colorSpace.hover({
+          color: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
+          fallback: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
+          colorType: 'accent',
+        })
+      ),
       [buttonStencil.vars.label]: cssVar(brand.action.accent, system.color.fg.inverse),
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.pressed,
-      }),
+      [buttonStencil.vars.background]: cssVar(
+        brand.action.darkest,
+        colorSpace.pressed({
+          color: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
+          fallback: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
+          colorType: 'accent',
+        })
+      ),
       [buttonStencil.vars.label]: cssVar(brand.action.accent, system.color.fg.inverse),
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
@@ -85,11 +91,14 @@ const primaryButtonStencil = createStencil({
         [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
-            mixinColor: system.legacy.color.accent.overlay.mixin,
-            mixinValue: system.legacy.opacity.accent.hover,
-          }),
+          [buttonStencil.vars.background]: cssVar(
+            brand.action.lighter,
+            colorSpace.hover({
+              color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
+              fallback: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
+              colorType: 'surface',
+            })
+          ),
           [buttonStencil.vars.label]: system.color.fg.stronger,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
@@ -107,11 +116,14 @@ const primaryButtonStencil = createStencil({
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
-            mixinColor: system.legacy.color.accent.overlay.mixin,
-            mixinValue: system.legacy.opacity.accent.pressed,
-          }),
+          [buttonStencil.vars.background]: cssVar(
+            brand.action.light,
+            colorSpace.pressed({
+              color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
+              fallback: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
+              colorType: 'surface',
+            })
+          ),
           [buttonStencil.vars.label]: system.color.fg.stronger,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },

package/button/lib/SecondaryButton.tsx

@@ -1,6 +1,6 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {colorSpace, createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
@@ -24,45 +24,35 @@ const secondaryButtonStencil = createStencil({
     // Base Styles
     [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
-    [buttonStencil.vars.border]: system.color.border.input.default,
-    [buttonStencil.vars.label]: system.color.fg.default,
+    [buttonStencil.vars.border]: system.legacy.color.border.default,
+    [buttonStencil.vars.label]: system.color.fg.strong,
     [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
       [buttonStencil.vars.background]: system.legacy.color.surface.default,
       [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.border]: system.legacy.color.border.default,
       [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
       [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.transparent,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.hover,
-      }),
       [buttonStencil.vars.label]: system.color.fg.strong,
-      [buttonStencil.vars.border]: system.legacy.color.border.input.hover,
+      [buttonStencil.vars.border]: system.color.border.input.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.transparent,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.pressed,
-      }),
       [buttonStencil.vars.label]: system.color.fg.strong,
-      [buttonStencil.vars.border]: system.legacy.color.border.input.hover,
+      [buttonStencil.vars.border]: system.color.border.input.hover,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
       [buttonStencil.vars.opacity]: system.opacity.disabled,
       [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-
-      [buttonStencil.vars.label]: system.color.fg.default,
+      [buttonStencil.vars.label]: system.color.fg.strong,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
@@ -71,24 +61,18 @@ const secondaryButtonStencil = createStencil({
       inverse: {
         // Default Styles
         [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-        [buttonStencil.vars.border]: system.legacy.color.border.inverse.default,
+        [buttonStencil.vars.border]: system.legacy.color.border.inverse.strong,
         [buttonStencil.vars.label]: system.color.fg.inverse,
         [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.transparent,
-            mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.hover,
-          }),
           [buttonStencil.vars.border]: system.legacy.color.border.inverse.default,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Focus Styles
         '&:focus-visible, &.focus': {
-          [buttonStencil.vars.background]: system.legacy.color.surface.inverse,
-
+          [buttonStencil.vars.background]: system.legacy.color.surface.default,
           [buttonStencil.vars.border]: system.color.border.transparent,
           [buttonStencil.vars.label]: system.color.fg.contrast.default,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
@@ -97,11 +81,6 @@ const secondaryButtonStencil = createStencil({
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.transparent,
-            mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.pressed,
-          }),
           [buttonStencil.vars.border]: system.legacy.color.border.inverse.default,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),

package/button/lib/TertiaryButton.tsx

@@ -1,6 +1,6 @@
-import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
@@ -22,99 +22,39 @@ const tertiaryButtonStencil = createStencil({
   extends: buttonStencil,
   // Base Styles
   base: {
-    paddingInline: system.legacy.padding.xs,
-    minWidth: 'auto',
-    borderWidth: px2rem(2),
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
     [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-
     [buttonStencil.vars.label]: system.color.fg.default,
     [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
+    [buttonStencil.vars.border]: system.color.border.transparent,
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-
-      [buttonStencil.vars.label]: system.color.fg.default,
+      [buttonStencil.vars.background]: system.legacy.color.surface.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
-      [buttonStencil.vars.border]: system.color.border.transparent,
-      [buttonStencil.vars.label]: system.color.fg.contrast.default,
-      ...focusRing({
-        width: 2,
-        separation: 0,
-        innerColor: system.legacy.color.focus.inverse,
-
-        outerColor: system.legacy.color.brand.focus.primary,
-      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.boxShadowInner]: system.legacy.color.focus.inverse,
+      [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.transparent,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.hover,
-      }),
-      [buttonStencil.vars.label]: system.color.fg.strong,
-      [systemIconStencil.vars.color]: system.color.fg.strong,
-      textDecoration: 'underline',
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
+      [systemIconStencil.vars.color]: system.color.fg.stronger,
+      [buttonStencil.vars.label]: system.color.fg.stronger,
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
-        color: system.legacy.color.surface.transparent,
-        mixinColor: system.legacy.color.surface.overlay.mixin,
-        mixinValue: system.legacy.opacity.surface.pressed,
-      }),
-      [buttonStencil.vars.label]: system.color.fg.strong,
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
-      textDecoration: 'underline',
+      [buttonStencil.vars.label]: system.color.fg.stronger,
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      textDecoration: 'none',
       [buttonStencil.vars.opacity]: system.opacity.disabled,
       [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-      [buttonStencil.vars.label]: system.color.fg.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
   modifiers: {
-    // IconPosition Styles
-    iconPosition: {
-      only: {
-        padding: 0,
-        [systemIconStencil.vars.color]: cssVar(
-          buttonColorPropVars.default.icon,
-          system.color.fg.default
-        ),
-        '&:focus-visible, &.focus': {
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.focus.icon,
-            system.color.fg.strong
-          ),
-        },
-        '&:hover, &.hover': {
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.hover.icon,
-            system.color.fg.strong
-          ),
-        },
-        '&:active, &.active': {
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.active.icon,
-            system.color.fg.strong
-          ),
-        },
-        '&:disabled, &.disabled': {
-          [buttonStencil.vars.opacity]: system.opacity.disabled,
-          [systemIconStencil.vars.color]: cssVar(
-            buttonColorPropVars.disabled.icon,
-            system.color.fg.default
-          ),
-        },
-      },
-      start: {},
-      end: {},
-    },
     variant: {
       // Inverse Styles
       inverse: {
@@ -123,34 +63,21 @@ const tertiaryButtonStencil = createStencil({
         [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.transparent,
-            mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.hover,
-          }),
+          [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.legacy.color.surface.inverse,
-
           [buttonStencil.vars.label]: system.color.fg.contrast.default,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
-          ...focusRing({
-            width: 2,
-            separation: 2,
-            innerColor: system.color.border.contrast.default,
-            outerColor: system.legacy.color.focus.inverse,
-          }),
+          [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
+          [buttonStencil.vars.boxShadowOuter]: system.legacy.color.focus.inverse,
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: colorSpace.darken({
-            color: system.legacy.color.surface.transparent,
-            mixinColor: system.legacy.color.surface.overlay.mixin,
-            mixinValue: system.legacy.opacity.surface.pressed,
-          }),
+          [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
@@ -265,14 +192,6 @@ export const TertiaryButton = createComponent('button')({
     ref,
     Element
   ) => {
-    const baseIconPosition = iconPosition
-      ? iconPosition
-      : icon
-        ? children
-          ? 'start'
-          : 'only'
-        : undefined;
-
     return (
       <Button
         as={Element}
@@ -286,7 +205,7 @@ export const TertiaryButton = createComponent('button')({
             size,
             variant,
             grow,
-            iconPosition: baseIconPosition,
+            iconPosition,
           }),
           cs,
         ]}

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -9,7 +9,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useActionBarModel_1 = require("./useActionBarModel");
 exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1zrust", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-500, 2.5rem) ;position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));> *{flex:1;}}" }
+    base: { name: "26yab1", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-500, 2.5rem) ;position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));> *{flex:1;}}" }
 }, "action-bar-list-d6d378");
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = (0, common_1.createSubcomponent)('div')({

package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js

@@ -11,7 +11,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const useActionBarModel_1 = require("./useActionBarModel");
 exports.actionBarOverflowButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "klx8", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "3iyb46", styles: "box-sizing:border-box;flex:0;" }
 }, "action-bar-overflow-button-0a24d9");
 exports.useActionBarOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useActionBarModel_1.useActionBarModel)(() => ({
     'aria-haspopup': true,