@workday/canvas-kit-react 16.0.0-alpha.0396-next.0 → 16.0.0-alpha.0431-next.0

package/avatar/lib/BaseAvatar.tsx

@@ -16,7 +16,7 @@ export interface BaseAvatarProps extends CSProps {
    * The variant of the Avatar.
    * @default "blue"
    */
-  variant?: 'blue' | 'amber' | 'teal' | 'purple';
+  variant?: 'blue' | 'amber' | 'teal' | 'purple' | 'magenta' | 'green';
 
   /**
    * The size of the Avatar.
@@ -53,13 +53,25 @@ export const baseAvatarStencil = createStencil({
     height: cssVar(size, system.legacy.size.lg),
     minWidth: cssVar(size, system.legacy.size.lg),
     minHeight: cssVar(size, system.legacy.size.lg),
-    backgroundColor: cssVar(backgroundColor, base.legacy.blue300),
-    color: cssVar(color, base.legacy.blue800),
+    backgroundColor: cssVar(backgroundColor, base.legacy.blue600),
+    color: cssVar(color, system.color.fg.inverse),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
     border: 'none',
+    // For Windows high contrast desktop themes
+    outline: `${px2rem(1)} solid transparent`,
+
+    // Remove outline when Avatar is or is inside a button/link — parent owns boundary and focus
+    'button &, a &, &:is(button, a)': {
+      outline: 'none',
+    },
+    // Focus-only ring when Avatar is the button/link — avoids clashing with a permanent boundary
+    '&:is(button, a):focus-visible, &:is(button, a).focus': {
+      outline: `${px2rem(2)} solid transparent`,
+      outlineOffset: px2rem(2),
+    },
     fontFamily: system.fontFamily.default,
     fontWeight: system.fontWeight.normal,
     lineHeight: system.legacy.lineHeight.body.md,
@@ -68,12 +80,12 @@ export const baseAvatarStencil = createStencil({
   modifiers: {
     variant: {
       blue: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.legacy.blue300),
-        color: cssVar(color, base.legacy.blue800),
+        backgroundColor: cssVar(backgroundColor, base.legacy.blue600),
+        color: cssVar(color, system.color.fg.inverse),
       }),
       amber: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.legacy.amber200),
-        color: cssVar(color, base.legacy.amber700),
+        backgroundColor: cssVar(backgroundColor, base.legacy.amber300),
+        color: cssVar(color, base.legacy.amber800),
       }),
 
       teal: ({backgroundColor, color}) => ({
@@ -81,8 +93,16 @@ export const baseAvatarStencil = createStencil({
         color: cssVar(color, base.legacy.teal800),
       }),
       purple: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.legacy.purple300),
-        color: cssVar(color, base.legacy.purple800),
+        backgroundColor: cssVar(backgroundColor, base.legacy.purple600),
+        color: cssVar(color, system.color.fg.inverse),
+      }),
+      magenta: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.legacy.magenta600),
+        color: cssVar(color, system.color.fg.inverse),
+      }),
+      green: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.legacy.green600),
+        color: cssVar(color, system.color.fg.inverse),
       }),
     },
     size: {

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'),