@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.0

package/button/lib/PrimaryButton.tsx

@@ -1,9 +1,10 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {colorSpace, createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
-import {buttonStencil} from './BaseButton';
-import {Button, ButtonProps} from './Button';
+
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
+import {Button, type ButtonProps} from './Button';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -21,71 +22,108 @@ const primaryButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
     // Base Styles
-    [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
-    [buttonStencil.vars.borderRadius]: system.shape.round,
-    [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-    [systemIconStencil.vars.color]: 'currentColor',
+    [buttonStencil.vars.background]: cssVar(
+      brand.action.base,
+      system.legacy.color.brand.accent.primary
+    ),
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
+    [buttonStencil.vars.label]: cssVar(brand.action.accent, system.color.fg.inverse),
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
-      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [buttonStencil.vars.background]: cssVar(
+        brand.action.base,
+        system.legacy.color.brand.accent.primary
+      ),
+      [buttonStencil.vars.label]: cssVar(brand.action.accent, system.color.fg.inverse),
+      [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]: cssVar(brand.action.dark, brand.primary.dark),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-      [systemIconStencil.vars.color]: 'currentColor',
+      [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.label]: cssVar(brand.action.accent, system.color.fg.inverse),
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: cssVar(brand.action.darkest, brand.primary.darkest),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-      [systemIconStencil.vars.color]: 'currentColor',
+      [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.label]: cssVar(brand.action.accent, system.color.fg.inverse),
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [buttonStencil.vars.background]: cssVar(
+        brand.action.base,
+        system.legacy.color.brand.accent.primary
+      ),
+      [buttonStencil.vars.label]: cssVar(brand.action.accent, system.color.fg.inverse),
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
   modifiers: {
     variant: {
       // Inverse Styles
       inverse: {
-        [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
-        [buttonStencil.vars.borderRadius]: system.shape.round,
+        [buttonStencil.vars.background]: cssVar(
+          brand.action.lightest,
+          system.legacy.color.surface.inverse
+        ),
+        [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
         [buttonStencil.vars.label]: system.color.fg.strong,
-        [systemIconStencil.vars.color]: 'currentColor',
+        [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.label]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
+        },
         // Focus Styles
         '&:focus-visible, &.focus': {
-          [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
+          [buttonStencil.vars.background]: cssVar(
+            brand.action.lightest,
+            system.legacy.color.surface.inverse
+          ),
           [buttonStencil.vars.label]: system.color.fg.strong,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
-          [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
-        },
-        // Hover Styles
-        '&:hover, &.hover': {
-          [buttonStencil.vars.background]: cssVar(brand.action.lighter, brand.primary.lightest),
-          [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [buttonStencil.vars.boxShadowOuter]: system.legacy.color.focus.inverse,
+
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: cssVar(brand.action.light, brand.primary.light),
+          [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.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
-          [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
+          [buttonStencil.vars.opacity]: system.opacity.disabled,
+          [buttonStencil.vars.background]: cssVar(
+            brand.action.lightest,
+            system.legacy.color.surface.inverse
+          ),
           [buttonStencil.vars.label]: system.color.fg.strong,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
         },
       },
     },

package/button/lib/SecondaryButton.tsx

@@ -1,9 +1,10 @@
-import {buttonStencil} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
-import {Button, ButtonProps} from './Button';
 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 {buttonColorPropVars, buttonStencil} from './BaseButton';
+import {Button, ButtonProps} from './Button';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -21,78 +22,96 @@ const secondaryButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
     // Base Styles
-    [buttonStencil.vars.background]: system.color.bg.transparent.default,
-    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [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.strong,
-    [systemIconStencil.vars.color]: 'currentColor',
+    [buttonStencil.vars.label]: system.color.fg.default,
+    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: system.color.bg.default,
-      [buttonStencil.vars.label]: system.color.fg.stronger,
-      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse,
-      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [buttonStencil.vars.background]: system.legacy.color.surface.default,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [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]: system.color.bg.alt.default,
-      [buttonStencil.vars.label]: system.color.fg.stronger,
-      [buttonStencil.vars.border]: system.color.border.input.strong,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [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,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: system.color.bg.alt.strong,
-      [buttonStencil.vars.label]: system.color.fg.stronger,
-      [buttonStencil.vars.border]: system.color.border.input.strong,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [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,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [buttonStencil.vars.label]: system.color.fg.stronger,
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+
+      [buttonStencil.vars.label]: system.color.fg.default,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
   modifiers: {
     variant: {
       inverse: {
         // Default Styles
-        [buttonStencil.vars.background]: 'transparent',
-        [buttonStencil.vars.border]: system.color.border.inverse,
+        [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+        [buttonStencil.vars.border]: system.legacy.color.border.inverse.default,
         [buttonStencil.vars.label]: system.color.fg.inverse,
-        [systemIconStencil.vars.color]: 'currentColor',
+        [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
-          [buttonStencil.vars.background]: system.color.bg.transparent.strong,
-          [buttonStencil.vars.border]: system.color.border.inverse,
+          [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]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
         },
         // Focus Styles
         '&:focus-visible, &.focus': {
-          [buttonStencil.vars.background]: system.color.bg.translucent,
-          [buttonStencil.vars.border]: 'transparent',
-          [buttonStencil.vars.label]: system.color.fg.inverse,
+          [buttonStencil.vars.background]: system.legacy.color.surface.inverse,
+
+          [buttonStencil.vars.border]: system.color.border.transparent,
+          [buttonStencil.vars.label]: system.color.fg.contrast.default,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
-          [buttonStencil.vars.boxShadowOuter]: system.color.border.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [buttonStencil.vars.boxShadowOuter]: system.legacy.color.focus.inverse,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: system.color.bg.transparent.stronger,
-          [buttonStencil.vars.border]: system.color.border.inverse,
+          [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]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
-          [buttonStencil.vars.background]: 'transparent',
-          [buttonStencil.vars.border]: system.color.border.inverse,
+          [buttonStencil.vars.opacity]: system.opacity.disabled,
+          [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         },
       },
     },

package/button/lib/TertiaryButton.tsx

@@ -1,9 +1,10 @@
-import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {system, brand} from '@workday/canvas-tokens-web';
-import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {buttonColorPropVars, buttonStencil} from './BaseButton';
+import {Button, ButtonProps} from './Button';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -21,45 +22,59 @@ const tertiaryButtonStencil = createStencil({
   extends: buttonStencil,
   // Base Styles
   base: {
-    paddingInline: system.space.x2,
+    paddingInline: system.legacy.padding.xs,
     minWidth: 'auto',
     borderWidth: px2rem(2),
-    [buttonStencil.vars.borderRadius]: system.shape.round,
-    [buttonStencil.vars.background]: system.color.bg.transparent.default,
-    [buttonStencil.vars.label]: brand.primary.base,
-    [systemIconStencil.vars.color]: 'currentColor',
+    [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'),
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [buttonStencil.vars.label]: brand.primary.base,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+
+      [buttonStencil.vars.label]: system.color.fg.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.color.border.inverse,
-        outerColor: brand.common.focusOutline,
+        innerColor: system.legacy.color.focus.inverse,
+
+        outerColor: system.legacy.color.brand.focus.primary,
       }),
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.color.bg.alt.soft,
-      [buttonStencil.vars.label]: brand.primary.dark,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [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',
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: system.color.bg.alt.default,
-      [buttonStencil.vars.label]: brand.primary.darkest,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [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,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
       textDecoration: 'underline',
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [buttonStencil.vars.label]: brand.primary.base,
+      textDecoration: 'none',
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: 'currentColor',
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+      [buttonStencil.vars.label]: system.color.fg.default,
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
   modifiers: {
@@ -67,10 +82,9 @@ const tertiaryButtonStencil = createStencil({
     iconPosition: {
       only: {
         padding: 0,
-        [systemIconStencil.vars.color]: system.color.fg.default,
         [systemIconStencil.vars.color]: cssVar(
           buttonColorPropVars.default.icon,
-          system.color.fg.strong
+          system.color.fg.default
         ),
         '&:focus-visible, &.focus': {
           [systemIconStencil.vars.color]: cssVar(
@@ -91,9 +105,10 @@ const tertiaryButtonStencil = createStencil({
           ),
         },
         '&:disabled, &.disabled': {
+          [buttonStencil.vars.opacity]: system.opacity.disabled,
           [systemIconStencil.vars.color]: cssVar(
             buttonColorPropVars.disabled.icon,
-            system.color.fg.strong
+            system.color.fg.default
           ),
         },
       },
@@ -103,37 +118,48 @@ const tertiaryButtonStencil = createStencil({
     variant: {
       // Inverse Styles
       inverse: {
-        [buttonStencil.vars.background]: 'transparent',
+        [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
         [buttonStencil.vars.label]: system.color.fg.inverse,
-        [systemIconStencil.vars.color]: 'currentColor',
+        [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.label]: system.color.fg.inverse,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
+        },
         // Focus Styles
         '&:focus-visible, &.focus': {
-          [buttonStencil.vars.background]: system.color.bg.translucent,
-          [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [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: 0,
-            outerColor: system.color.border.inverse,
+            separation: 2,
+            innerColor: system.color.border.contrast.default,
+            outerColor: system.legacy.color.focus.inverse,
           }),
         },
-        // Hover Styles
-        '&:hover, &.hover': {
-          [buttonStencil.vars.background]: system.color.bg.transparent.strong,
-          [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
-        },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: system.color.bg.transparent.stronger,
+          [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.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
-          [buttonStencil.vars.background]: 'transparent',
+          [buttonStencil.vars.opacity]: system.opacity.disabled,
+          [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
           [buttonStencil.vars.label]: system.color.fg.inverse,
-          [systemIconStencil.vars.color]: 'currentColor',
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         },
       },
     },
@@ -143,81 +169,81 @@ const tertiaryButtonStencil = createStencil({
     {
       modifiers: {size: 'large', iconPosition: 'only'},
       styles: {
-        minWidth: calc.multiply(system.space.x4, 3),
+        minWidth: system.legacy.size.lg,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: system.legacy.padding.xs,
+        paddingInlineEnd: system.legacy.padding.sm,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: system.legacy.padding.sm,
+        paddingInlineEnd: system.legacy.padding.xs,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x10,
+        minWidth: system.legacy.size.md,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: system.legacy.padding.xs,
+        paddingInlineEnd: system.legacy.padding.sm,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: system.legacy.padding.sm,
+        paddingInlineEnd: system.legacy.padding.xs,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x8,
+        minWidth: system.legacy.size.sm,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: system.legacy.padding.xs,
+        paddingInlineEnd: system.legacy.padding.sm,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: system.legacy.padding.sm,
+        paddingInlineEnd: system.legacy.padding.xs,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x6,
+        minWidth: system.legacy.size.xs,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x1,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: system.legacy.padding.xxs,
+        paddingInlineEnd: system.legacy.padding.xs,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x1,
+        paddingInlineStart: system.legacy.padding.xs,
+        paddingInlineEnd: system.legacy.padding.xxs,
       },
     },
   ],
@@ -242,10 +268,10 @@ export const TertiaryButton = createComponent('button')({
     const baseIconPosition = iconPosition
       ? iconPosition
       : icon
-      ? children
-        ? 'start'
-        : 'only'
-      : undefined;
+        ? children
+          ? 'start'
+          : 'only'
+        : undefined;
 
     return (
       <Button