From 2f4317a9c1e51693aea8b637d9ec79ae8eac49ad Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 15 Jun 2026 14:59:20 -0600
Subject: [PATCH 01/40] chore: Updated Buttons with new styling

---
 modules/react/button/lib/BaseButton.tsx       | 47 ++++++++---------
 modules/react/button/lib/DeleteButton.tsx     | 52 +++++++++++++++++--
 modules/react/button/lib/SecondaryButton.tsx  | 16 ++----
 modules/react/button/lib/TertiaryButton.tsx   | 33 +++---------
 .../react/button/stories/button/Button.mdx    |  6 +++
 .../button/stories/button/Button.stories.tsx  |  4 ++
 .../stories/button/examples/DeleteInverse.tsx | 26 ++++++++++
 .../visual-testing/DeleteButton.stories.tsx   |  4 ++
 8 files changed, 120 insertions(+), 68 deletions(-)
 create mode 100644 modules/react/button/stories/button/examples/DeleteInverse.tsx

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 2b0ff54a63..eb225cef62 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/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';
 
@@ -253,24 +253,22 @@ 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,
       },
       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.size75,
       },
       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,
       },
       extraSmall: {
@@ -278,8 +276,7 @@ export const buttonStencil = createStencil({
         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,
       },
     },
@@ -307,15 +304,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 +324,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 +344,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 +364,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, '0.125rem'),
+        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, '0.125rem'),
       },
     },
   ],
diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index 81bf6f696b..efc60d7fc8 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -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 `inverse` which will inverse the styling
+   */
+  variant?: 'inverse';
+}
 
 const deleteButtonStencil = createStencil({
   extends: buttonStencil,
@@ -72,6 +77,47 @@ const deleteButtonStencil = createStencil({
       [buttonStencil.vars.label]: system.color.fg.inverse,
     },
   },
+  modifiers: {
+    variant: {
+      inverse: {
+        // Default Styles
+        [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+        [buttonStencil.vars.border]: system.color.border.transparent,
+        [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.brand.border.critical,
+          [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
+          [buttonStencil.vars.boxShadowInner]: system.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 +128,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 +139,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}
diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
index 59f235e4e0..d10fa155ce 100644
--- a/modules/react/button/lib/SecondaryButton.tsx
+++ b/modules/react/button/lib/SecondaryButton.tsx
@@ -24,35 +24,25 @@ 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.color.border.transparent,
+    [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.color.border.input.hover,
       [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,
       [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,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index a4ccefecbb..6e36c1299d 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -28,13 +28,11 @@ const tertiaryButtonStencil = createStencil({
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
     [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'),
     // 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,
@@ -48,23 +46,13 @@ const tertiaryButtonStencil = createStencil({
     },
     // 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.background]: system.legacy.color.surface.overlay.hover.default,
       [systemIconStencil.vars.color]: system.color.fg.strong,
       textDecoration: 'underline',
     },
     // 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',
     },
@@ -73,7 +61,6 @@ const tertiaryButtonStencil = createStencil({
       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'),
     },
   },
@@ -123,11 +110,7 @@ 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'),
         },
@@ -146,11 +129,7 @@ const tertiaryButtonStencil = 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.background]: system.legacy.color.surface.overlay.pressed.inverse,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
diff --git a/modules/react/button/stories/button/Button.mdx b/modules/react/button/stories/button/Button.mdx
index 14181c1bca..e8a1acce79 100644
--- a/modules/react/button/stories/button/Button.mdx
+++ b/modules/react/button/stories/button/Button.mdx
@@ -9,6 +9,7 @@ import {
 
 import {CustomStyles} from './examples/CustomStyles';
 import {Delete} from './examples/Delete';
+import {DeleteInverse} from './examples/DeleteInverse';
 import {Grow} from './examples/Grow';
 import {Primary} from './examples/Primary';
 import {PrimaryInverse} from './examples/PrimaryInverse';
@@ -82,6 +83,11 @@ on a dark or colorful background such as `blueberry400`.
 
 <ExampleCodeBlock code={Delete} />
 
+Delete Buttons also have an `inverse` variant. Use this when you need to place a Delete Button on a
+dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={DeleteInverse} />
+
 ### Grow Prop
 
 The example below shows the use of the `grow` prop on different variants of buttons. This will set
diff --git a/modules/react/button/stories/button/Button.stories.tsx b/modules/react/button/stories/button/Button.stories.tsx
index 84d374c423..677b456f5e 100644
--- a/modules/react/button/stories/button/Button.stories.tsx
+++ b/modules/react/button/stories/button/Button.stories.tsx
@@ -3,6 +3,7 @@ import {Meta} from '@storybook/react';
 import mdxDoc from './Button.mdx';
 import {CustomStyles as CustomStylesExample} from './examples/CustomStyles';
 import {Delete as DeleteExample} from './examples/Delete';
+import {DeleteInverse as DeleteInverseExample} from './examples/DeleteInverse';
 import {Primary as PrimaryExample} from './examples/Primary';
 import {PrimaryInverse as PrimaryInverseExample} from './examples/PrimaryInverse';
 import {Secondary as SecondaryExample} from './examples/Secondary';
@@ -42,6 +43,9 @@ export const TertiaryInverse = {
 export const Delete = {
   render: DeleteExample,
 };
+export const DeleteInverse = {
+  render: DeleteInverseExample,
+};
 export const CustomStyles = {
   render: CustomStylesExample,
 };
diff --git a/modules/react/button/stories/button/examples/DeleteInverse.tsx b/modules/react/button/stories/button/examples/DeleteInverse.tsx
new file mode 100644
index 0000000000..16ccbf3802
--- /dev/null
+++ b/modules/react/button/stories/button/examples/DeleteInverse.tsx
@@ -0,0 +1,26 @@
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {trashIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.gap.md,
+  padding: system.padding.md,
+});
+
+export const DeleteInverse = () => (
+  <Flex cs={parentContainerStyles}>
+    <DeleteButton variant="inverse">Delete</DeleteButton>
+    <DeleteButton icon={trashIcon} iconPosition="start" variant="inverse">
+      Delete
+    </DeleteButton>
+    <DeleteButton icon={trashIcon} iconPosition="end" variant="inverse">
+      Delete
+    </DeleteButton>
+    <Tooltip title="Delete">
+      <DeleteButton icon={trashIcon} variant="inverse" />
+    </Tooltip>
+  </Flex>
+);
diff --git a/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx b/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
index 2927de7bd7..83121c9d49 100644
--- a/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
+++ b/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
@@ -27,6 +27,10 @@ const DeleteButtonTest = (props: {theme?: PartialEmotionCanvasTheme}) => (
     <ComponentStatesTable
       rowProps={permutateProps(
         {
+          variant: [
+            {value: undefined, label: ''},
+            {value: 'inverse', label: 'Inverse'},
+          ],
           size: [
             {value: 'extraSmall', label: 'Extra Small'},
             {value: 'small', label: 'Small'},

From 3a364dd5812aa72422061ae876b3ec6b8c8776c9 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 15 Jun 2026 17:34:34 -0600
Subject: [PATCH 02/40] chore: Updated styles for Secondary and Tertiary

---
 modules/react/button/lib/BaseButton.tsx      |  1 +
 modules/react/button/lib/SecondaryButton.tsx |  7 +-
 modules/react/button/lib/TertiaryButton.tsx  | 67 ++------------------
 3 files changed, 9 insertions(+), 66 deletions(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index eb225cef62..73d06b840c 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -144,6 +144,7 @@ export const buttonStencil = createStencil({
     whiteSpace: 'nowrap',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
+    minWidth: 'min-content',
     borderRadius: cssVar(
       buttonColorPropVars.default.borderRadius,
       cssVar(borderRadius, system.legacy.shape.full)
diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
index d10fa155ce..ab81bd0315 100644
--- a/modules/react/button/lib/SecondaryButton.tsx
+++ b/modules/react/button/lib/SecondaryButton.tsx
@@ -24,13 +24,13 @@ 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.transparent,
+    [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.label]: system.color.fg.strong,
-      [buttonStencil.vars.border]: system.color.border.input.hover,
+      [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'),
@@ -51,8 +51,7 @@ const secondaryButtonStencil = createStencil({
     '&: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'),
     },
   },
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index 6e36c1299d..fe5aa57a6f 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -1,6 +1,6 @@
 import {createComponent, focusRing} 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, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
@@ -22,86 +22,37 @@ 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.strong,
     [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.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.boxShadowInner]: system.legacy.color.focus.inverse,
+      [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
     },
     // Hover Styles
     '&:hover, &.hover': {
       [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
       [systemIconStencil.vars.color]: system.color.fg.strong,
-      textDecoration: 'underline',
     },
     // Active Styles
     '&:active, &.active': {
       [buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
-      textDecoration: 'underline',
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      textDecoration: 'none',
       [buttonStencil.vars.opacity]: system.opacity.disabled,
       [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
       [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: {
@@ -244,14 +195,6 @@ export const TertiaryButton = createComponent('button')({
     ref,
     Element
   ) => {
-    const baseIconPosition = iconPosition
-      ? iconPosition
-      : icon
-        ? children
-          ? 'start'
-          : 'only'
-        : undefined;
-
     return (
       <Button
         as={Element}
@@ -265,7 +208,7 @@ export const TertiaryButton = createComponent('button')({
             size,
             variant,
             grow,
-            iconPosition: baseIconPosition,
+            iconPosition,
           }),
           cs,
         ]}

From 33a6c66e4a2ed61d4373c053306291da5f0378a5 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 15 Jun 2026 17:54:41 -0600
Subject: [PATCH 03/40] chore: Updated minWidth

---
 modules/react/button/lib/BaseButton.tsx                      | 2 +-
 modules/react/segmented-control/lib/SegmentedControlItem.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 73d06b840c..fc64d7e5d9 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -144,7 +144,7 @@ export const buttonStencil = createStencil({
     whiteSpace: 'nowrap',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
-    minWidth: 'min-content',
+    minWidth: 'auto',
     borderRadius: cssVar(
       buttonColorPropVars.default.borderRadius,
       cssVar(borderRadius, system.legacy.shape.full)
diff --git a/modules/react/segmented-control/lib/SegmentedControlItem.tsx b/modules/react/segmented-control/lib/SegmentedControlItem.tsx
index 6a269140d5..016e8acf37 100644
--- a/modules/react/segmented-control/lib/SegmentedControlItem.tsx
+++ b/modules/react/segmented-control/lib/SegmentedControlItem.tsx
@@ -61,6 +61,7 @@ export const segmentedControlItemStencil = createStencil({
     textAlign: 'start',
     paddingInline: 0,
     gap: system.legacy.gap.xs,
+    minWidth: 'min-content',
 
     [buttonStencil.vars.borderRadius]: system.legacy.shape.md,
     [buttonStencil.vars.label]: system.color.fg.muted.default,

From 79482da157423b2fa410566e3912bde3b160a558 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 15 Jun 2026 18:11:10 -0600
Subject: [PATCH 04/40] chore: Remove unused import

---
 modules/react/button/lib/TertiaryButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index fe5aa57a6f..19e54fbdda 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -1,6 +1,6 @@
 import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {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';

From c5cd3101bdc19f0a6a2d2ef5d4bdd599c2dcd6c0 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 17 Jun 2026 15:44:27 -0600
Subject: [PATCH 05/40] chore: Updated styles with temp css variables

---
 modules/react/button/lib/BaseButton.tsx      |  5 +++
 modules/react/button/lib/DeleteButton.tsx    | 18 ++++++----
 modules/react/button/lib/PrimaryButton.tsx   | 20 +++++++----
 modules/react/button/lib/SecondaryButton.tsx | 16 ++-------
 modules/react/button/lib/TertiaryButton.tsx  | 17 ++++-----
 modules/styling/lib/colorSpace.tsx           | 36 +++++++++++++++++---
 6 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index fc64d7e5d9..88ebd99322 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -120,6 +120,11 @@ export const buttonStencil = createStencil({
     borderRadius: '',
   },
   base: ({background, border, boxShadowInner, boxShadowOuter, label, opacity, borderRadius}) => ({
+    // This is here temporarily until tokens are updated
+    '[data-theme="sana-canvas"] &': {
+      '--cnvs-sys-opacity-accent-hover': '0.045',
+      '--cnvs-sys-opacity-accent-pressed': '0.118',
+    },
     // Default Styles
     fontFamily: system.fontFamily.default,
     fontSize: system.legacy.fontSize.subtext.lg,
diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index efc60d7fc8..e37df126ce 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -21,6 +21,10 @@ export interface DeleteButtonProps extends ButtonProps {
 const deleteButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
+    // This is here temporarily until tokens are updated
+    '[data-theme="sana-canvas"] &': {
+      '--cnvs-sys-color-accent-overlay-mixin': 'black',
+    },
     // Base Styles
     [buttonStencil.vars.background]: system.legacy.color.brand.accent.critical,
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
@@ -42,10 +46,10 @@ const deleteButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
+      [buttonStencil.vars.background]: colorSpace.hover({
         color: system.legacy.color.brand.accent.critical,
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.hover,
+        fallback: system.legacy.color.brand.accent.critical,
+        colorType: 'accent',
       }),
       [buttonStencil.vars.label]: system.color.fg.inverse,
       [systemIconStencil.vars.color]: cssVar(
@@ -55,10 +59,10 @@ const deleteButtonStencil = createStencil({
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.darken({
+      [buttonStencil.vars.background]: colorSpace.pressed({
         color: system.legacy.color.brand.accent.critical,
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.pressed,
+        fallback: system.legacy.color.brand.accent.critical,
+        colorType: 'accent',
       }),
       [buttonStencil.vars.label]: system.color.fg.inverse,
       [systemIconStencil.vars.color]: cssVar(
@@ -82,7 +86,7 @@ const deleteButtonStencil = createStencil({
       inverse: {
         // Default Styles
         [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-        [buttonStencil.vars.border]: system.color.border.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
diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
index d3f0009e37..f1bf71fb9a 100644
--- a/modules/react/button/lib/PrimaryButton.tsx
+++ b/modules/react/button/lib/PrimaryButton.tsx
@@ -21,6 +21,10 @@ export interface PrimaryButtonProps extends ButtonProps {
 const primaryButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
+    // These are here temporarily until tokens are updated
+    '[data-theme="sana-canvas"] &': {
+      '--cnvs-sys-color-accent-overlay-mixin': 'white',
+    },
     // Base Styles
     [buttonStencil.vars.background]: cssVar(
       brand.action.base,
@@ -43,20 +47,20 @@ const primaryButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.darken({
+      [buttonStencil.vars.background]: colorSpace.hover({
         color: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.hover,
+        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({
+      [buttonStencil.vars.background]: colorSpace.pressed({
         color: cssVar(brand.action.base, system.legacy.color.brand.accent.primary),
-        mixinColor: system.legacy.color.accent.overlay.mixin,
-        mixinValue: system.legacy.opacity.accent.pressed,
+        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'),
@@ -76,6 +80,10 @@ const primaryButtonStencil = createStencil({
     variant: {
       // Inverse Styles
       inverse: {
+        // This is here temporarily until tokens are updated
+        '[data-theme="sana-canvas"] &': {
+          '--cnvs-sys-color-accent-overlay-mixin': 'black',
+        },
         [buttonStencil.vars.background]: cssVar(
           brand.action.lightest,
           system.legacy.color.surface.inverse
diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
index ab81bd0315..1a3bf6a5d7 100644
--- a/modules/react/button/lib/SecondaryButton.tsx
+++ b/modules/react/button/lib/SecondaryButton.tsx
@@ -29,6 +29,7 @@ const secondaryButtonStencil = createStencil({
     [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,
@@ -38,13 +39,13 @@ const secondaryButtonStencil = createStencil({
     // Hover Styles
     '&:hover, &.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.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
@@ -65,11 +66,6 @@ const secondaryButtonStencil = 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.border]: system.legacy.color.border.inverse.default,
           [buttonStencil.vars.label]: system.color.fg.inverse,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
@@ -77,7 +73,6 @@ const secondaryButtonStencil = createStencil({
         // Focus Styles
         '&:focus-visible, &.focus': {
           [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,
@@ -86,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'),
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index 19e54fbdda..a5ce0693bc 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -24,21 +24,21 @@ const tertiaryButtonStencil = createStencil({
   base: {
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
     [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
-    [buttonStencil.vars.label]: system.color.fg.strong,
+    [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.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
-      [buttonStencil.vars.label]: system.color.fg.contrast.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,
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
-      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.inverse,
+      [systemIconStencil.vars.color]: system.color.fg.stronger,
     },
     // Active Styles
     '&:active, &.active': {
@@ -68,15 +68,10 @@ const tertiaryButtonStencil = createStencil({
         // 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': {
diff --git a/modules/styling/lib/colorSpace.tsx b/modules/styling/lib/colorSpace.tsx
index 3b5c655a9f..7013225ce5 100644
--- a/modules/styling/lib/colorSpace.tsx
+++ b/modules/styling/lib/colorSpace.tsx
@@ -95,6 +95,12 @@ export interface InteractiveStateProps {
    * @default 'accent'
    */
   colorType?: 'accent' | 'surface';
+  /**
+   * A string that will determine which surface overlay variant to use.
+   *
+   * @default 'default'
+   */
+  surfaceType?: 'default' | 'inverse';
 }
 
 /**
@@ -110,11 +116,22 @@ export interface InteractiveStateProps {
  * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from (i.e. `system.color.accent....` or `system.color.surface....`).
  *
  */
-const hover = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) => {
+const hover = ({
+  color,
+  fallback,
+  colorType = 'accent',
+  surfaceType = 'default',
+}: InteractiveStateProps) => {
+  const mixinColor =
+    colorType === 'accent'
+      ? system.color.accent.overlay.hover
+      : surfaceType === 'default'
+        ? system.color.surface.overlay.hover.default
+        : system.color.surface.overlay.hover.inverse;
   return darken({
     color: color,
     fallback: fallback,
-    mixinColor: system.color[colorType].overlay.mixin,
+    mixinColor: mixinColor,
     mixinValue: system.opacity[colorType].hover,
   });
 };
@@ -140,11 +157,22 @@ const hover = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) =
  * @param colorType
  * A string that will determine where the mixin color and the mixin percentage comes from within tokens.
  */
-const pressed = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) => {
+const pressed = ({
+  color,
+  fallback,
+  colorType = 'accent',
+  surfaceType = 'default',
+}: InteractiveStateProps) => {
+  const mixinColor =
+    colorType === 'accent'
+      ? system.color.accent.overlay.pressed
+      : surfaceType === 'default'
+        ? system.color.surface.overlay.pressed.default
+        : system.color.surface.overlay.pressed.inverse;
   return darken({
     color: color,
     fallback: fallback,
-    mixinColor: system.color[colorType].overlay.mixin,
+    mixinColor: mixinColor,
     mixinValue: system.opacity[colorType].pressed,
   });
 };

From 43a25738ef09e93859b40f31da680648c60513be Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 17 Jun 2026 15:51:20 -0600
Subject: [PATCH 06/40] chore: Removed unused lines

---
 modules/react/button/lib/SecondaryButton.tsx | 2 +-
 modules/react/button/lib/TertiaryButton.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
index 1a3bf6a5d7..5842b10f43 100644
--- a/modules/react/button/lib/SecondaryButton.tsx
+++ b/modules/react/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';
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index a5ce0693bc..6bc8964d4f 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -1,4 +1,4 @@
-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 {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';

From 0804649957b74c0d9295f484e76eed287cc722d3 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 17 Jun 2026 16:09:55 -0600
Subject: [PATCH 07/40] chore: Updated PrimaryButton and spec for colorSpace

---
 modules/react/button/lib/PrimaryButton.tsx | 12 +++----
 modules/styling/spec/colorSpace.spec.ts    | 38 ++++++++++++++++++----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
index f1bf71fb9a..2d6855753e 100644
--- a/modules/react/button/lib/PrimaryButton.tsx
+++ b/modules/react/button/lib/PrimaryButton.tsx
@@ -93,10 +93,10 @@ const primaryButtonStencil = createStencil({
         [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
         // Hover Styles
         '&:hover, &.hover': {
-          [buttonStencil.vars.background]: colorSpace.darken({
+          [buttonStencil.vars.background]: colorSpace.hover({
             color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
-            mixinColor: system.legacy.color.accent.overlay.mixin,
-            mixinValue: system.legacy.opacity.accent.hover,
+            fallback: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
+            colorType: 'accent',
           }),
           [buttonStencil.vars.label]: system.color.fg.stronger,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
@@ -115,10 +115,10 @@ const primaryButtonStencil = createStencil({
         },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: colorSpace.darken({
+          [buttonStencil.vars.background]: colorSpace.pressed({
             color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
-            mixinColor: system.legacy.color.accent.overlay.mixin,
-            mixinValue: system.legacy.opacity.accent.pressed,
+            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'),
diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index f8ebd54f03..4a63253737 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -15,22 +15,34 @@ describe('CSS color-mix Functions', () => {
     });
   });
   describe('hover', () => {
-    it('should return color-mix of hover state', () => {
-      const color = '--cnvs-sys-color-surface-alt-strong';
-      const fallback = '--cnvs-sys-color-bg-alt-strong';
+    it('should return color-mix of hover state using accent tokens', () => {
+      const color = '--cnvs-sys-color-brand-accent-primary';
+      const fallback = '--cnvs-brand-primary-base';
       const colorType = 'accent';
 
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-hover, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+      );
+    });
+    it('should return color-mix of hover state using surface tokens', () => {
+      const color = '--cnvs-sys-color-brand-accent-primary';
+      const fallback = '--cnvs-brand-primary-base';
+      const colorType = 'surface';
+      const surfaceType = 'default';
+
+      const expected = colorSpace.hover({color, fallback, colorType, surfaceType});
+
+      expect(expected).toBe(
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-hover-${surfaceType}, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
       );
     });
   });
   describe('pressed', () => {
-    it('should return color-mix of pressed state', () => {
-      const color = '--cnvs-sys-color-surface-alt-strong';
-      const fallback = '--cnvs-sys-color-bg-alt-strong';
+    it('should return color-mix of pressed state using accent tokens', () => {
+      const color = '--cnvs-sys-color-brand-accent-primary';
+      const fallback = '--cnvs-brand-primary-base';
       const colorType = 'accent';
 
       const expected = colorSpace.pressed({color, fallback, colorType});
@@ -39,5 +51,17 @@ describe('CSS color-mix Functions', () => {
         `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
       );
     });
+    it('should return color-mix of pressed state using surface tokens', () => {
+      const color = '--cnvs-sys-color-brand-accent-primary';
+      const fallback = '--cnvs-brand-primary-base';
+      const colorType = 'surface';
+      const surfaceType = 'default';
+
+      const expected = colorSpace.pressed({color, fallback, colorType, surfaceType});
+
+      expect(expected).toBe(
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-pressed-${surfaceType}, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+      );
+    });
   });
 });

From 1ceb6c550ced85631713fef9c1238e50922928eb Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 17 Jun 2026 16:23:45 -0600
Subject: [PATCH 08/40] chore: Updated spec for colorSpace

---
 modules/styling/spec/colorSpace.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index 4a63253737..cc6b068b9f 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -48,7 +48,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-pressed, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
       );
     });
     it('should return color-mix of pressed state using surface tokens', () => {

From b90361c60ac0da2f47095bef895d0bcf8f181dd4 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Tue, 23 Jun 2026 13:39:44 -0600
Subject: [PATCH 09/40] chore: Updated styles for buttons

---
 modules/react/button/lib/BaseButton.tsx     | 2 +-
 modules/react/button/lib/DeleteButton.tsx   | 2 +-
 modules/react/button/lib/PrimaryButton.tsx  | 2 +-
 modules/react/button/lib/TertiaryButton.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 88ebd99322..0b3d368500 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -135,6 +135,7 @@ export const buttonStencil = createStencil({
       buttonColorPropVars.default.background,
       cssVar(background, 'transparent')
     ),
+    minWidth: 'max-content',
     color: cssVar(buttonColorPropVars.default.label, cssVar(label, system.color.fg.strong)),
     borderWidth: px2rem(1),
     borderStyle: 'solid',
@@ -149,7 +150,6 @@ export const buttonStencil = createStencil({
     whiteSpace: 'nowrap',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
-    minWidth: 'auto',
     borderRadius: cssVar(
       buttonColorPropVars.default.borderRadius,
       cssVar(borderRadius, system.legacy.shape.full)
diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index e37df126ce..2a93429b70 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -99,7 +99,7 @@ const deleteButtonStencil = createStencil({
         // Focus Styles
         '&:focus-visible, &.focus': {
           [buttonStencil.vars.background]: system.legacy.color.surface.default,
-          [buttonStencil.vars.border]: system.legacy.color.brand.border.critical,
+          [buttonStencil.vars.border]: system.legacy.color.border.default,
           [buttonStencil.vars.label]: system.legacy.color.brand.fg.critical.default,
           [buttonStencil.vars.boxShadowInner]: system.color.focus.inverse,
           [buttonStencil.vars.boxShadowOuter]: system.legacy.color.brand.focus.primary,
diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
index 2d6855753e..3f4d85965a 100644
--- a/modules/react/button/lib/PrimaryButton.tsx
+++ b/modules/react/button/lib/PrimaryButton.tsx
@@ -96,7 +96,7 @@ const primaryButtonStencil = createStencil({
           [buttonStencil.vars.background]: colorSpace.hover({
             color: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
             fallback: cssVar(brand.action.lightest, system.legacy.color.surface.inverse),
-            colorType: 'accent',
+            colorType: 'surface',
           }),
           [buttonStencil.vars.label]: system.color.fg.stronger,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index 6bc8964d4f..d99935d53c 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -37,7 +37,7 @@ const tertiaryButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.inverse,
+      [buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
       [systemIconStencil.vars.color]: system.color.fg.stronger,
     },
     // Active Styles

From 0263d37888f5a4118056d9d2b47745ae9059793f Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Tue, 23 Jun 2026 15:46:49 -0600
Subject: [PATCH 10/40] chore: Updated minWidth for sizes

---
 modules/react/button/lib/BaseButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 0b3d368500..682386cb27 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -135,7 +135,6 @@ export const buttonStencil = createStencil({
       buttonColorPropVars.default.background,
       cssVar(background, 'transparent')
     ),
-    minWidth: 'max-content',
     color: cssVar(buttonColorPropVars.default.label, cssVar(label, system.color.fg.strong)),
     borderWidth: px2rem(1),
     borderStyle: 'solid',
@@ -260,6 +259,7 @@ export const buttonStencil = createStencil({
         letterSpacing: system.legacy.letterSpacing.body.sm,
         height: system.legacy.size.lg,
         paddingInline: system.legacy.padding.lg,
+        minWidth: base.legacy.size1300,
       },
       medium: {
         fontSize: system.legacy.fontSize.subtext.lg,
@@ -268,6 +268,7 @@ export const buttonStencil = createStencil({
         paddingInline: system.legacy.padding.md,
         height: system.legacy.size.md,
         gap: base.size75,
+        minWidth: base.legacy.size1100,
       },
       small: {
         fontSize: system.legacy.fontSize.subtext.lg,
@@ -276,6 +277,7 @@ export const buttonStencil = createStencil({
         height: system.legacy.size.sm,
         paddingInline: system.legacy.padding.sm,
         gap: system.legacy.gap.xs,
+        minWidth: base.legacy.size900,
       },
       extraSmall: {
         fontSize: system.legacy.fontSize.subtext.md,
@@ -284,6 +286,7 @@ export const buttonStencil = createStencil({
         height: system.legacy.size.xs,
         paddingInline: system.legacy.padding.xs,
         gap: system.legacy.gap.xs,
+        minWidth: 'auto',
       },
     },
     grow: {

From 1a112ed83ce18754e2105c87025e3c6a51660521 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Tue, 23 Jun 2026 16:11:30 -0600
Subject: [PATCH 11/40] chore: Updated and removed certain token overrides

---
 modules/react/button/lib/DeleteButton.tsx  | 4 ----
 modules/react/button/lib/PrimaryButton.tsx | 8 --------
 2 files changed, 12 deletions(-)

diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index 2a93429b70..038615d998 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -21,10 +21,6 @@ export interface DeleteButtonProps extends ButtonProps {
 const deleteButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
-    // This is here temporarily until tokens are updated
-    '[data-theme="sana-canvas"] &': {
-      '--cnvs-sys-color-accent-overlay-mixin': 'black',
-    },
     // Base Styles
     [buttonStencil.vars.background]: system.legacy.color.brand.accent.critical,
     [buttonStencil.vars.borderRadius]: system.legacy.shape.full,
diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
index 3f4d85965a..18570b7b5e 100644
--- a/modules/react/button/lib/PrimaryButton.tsx
+++ b/modules/react/button/lib/PrimaryButton.tsx
@@ -21,10 +21,6 @@ export interface PrimaryButtonProps extends ButtonProps {
 const primaryButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
-    // These are here temporarily until tokens are updated
-    '[data-theme="sana-canvas"] &': {
-      '--cnvs-sys-color-accent-overlay-mixin': 'white',
-    },
     // Base Styles
     [buttonStencil.vars.background]: cssVar(
       brand.action.base,
@@ -80,10 +76,6 @@ const primaryButtonStencil = createStencil({
     variant: {
       // Inverse Styles
       inverse: {
-        // This is here temporarily until tokens are updated
-        '[data-theme="sana-canvas"] &': {
-          '--cnvs-sys-color-accent-overlay-mixin': 'black',
-        },
         [buttonStencil.vars.background]: cssVar(
           brand.action.lightest,
           system.legacy.color.surface.inverse

From 8f97f1692ffe1c6fb56510d9c462b4633f1c0df5 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 24 Jun 2026 16:25:20 -0600
Subject: [PATCH 12/40] chore: Removed temp styles

---
 modules/react/button/lib/BaseButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 682386cb27..6dd60a5866 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -121,10 +121,10 @@ export const buttonStencil = createStencil({
   },
   base: ({background, border, boxShadowInner, boxShadowOuter, label, opacity, borderRadius}) => ({
     // This is here temporarily until tokens are updated
-    '[data-theme="sana-canvas"] &': {
-      '--cnvs-sys-opacity-accent-hover': '0.045',
-      '--cnvs-sys-opacity-accent-pressed': '0.118',
-    },
+    // '[data-theme="sana-canvas"] &': {
+    //   '--cnvs-sys-opacity-accent-hover': '0.045',
+    //   '--cnvs-sys-opacity-accent-pressed': '0.118',
+    // },
     // Default Styles
     fontFamily: system.fontFamily.default,
     fontSize: system.legacy.fontSize.subtext.lg,

From 17dfcc6da2af945d5179b2f5bd3f3ff795c4d2dd Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 24 Jun 2026 17:28:04 -0600
Subject: [PATCH 13/40] chore: Updated colorSpace utility

---
 modules/styling/lib/colorSpace.tsx | 40 +++++-------------------------
 1 file changed, 6 insertions(+), 34 deletions(-)

diff --git a/modules/styling/lib/colorSpace.tsx b/modules/styling/lib/colorSpace.tsx
index 7013225ce5..3277bdd105 100644
--- a/modules/styling/lib/colorSpace.tsx
+++ b/modules/styling/lib/colorSpace.tsx
@@ -95,12 +95,6 @@ export interface InteractiveStateProps {
    * @default 'accent'
    */
   colorType?: 'accent' | 'surface';
-  /**
-   * A string that will determine which surface overlay variant to use.
-   *
-   * @default 'default'
-   */
-  surfaceType?: 'default' | 'inverse';
 }
 
 /**
@@ -116,23 +110,12 @@ export interface InteractiveStateProps {
  * - `colorType`: A string that will determine where the mixin color and the mixin percentage comes from (i.e. `system.color.accent....` or `system.color.surface....`).
  *
  */
-const hover = ({
-  color,
-  fallback,
-  colorType = 'accent',
-  surfaceType = 'default',
-}: InteractiveStateProps) => {
-  const mixinColor =
-    colorType === 'accent'
-      ? system.color.accent.overlay.hover
-      : surfaceType === 'default'
-        ? system.color.surface.overlay.hover.default
-        : system.color.surface.overlay.hover.inverse;
+const hover = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) => {
   return darken({
     color: color,
     fallback: fallback,
-    mixinColor: mixinColor,
-    mixinValue: system.opacity[colorType].hover,
+    mixinColor: system.legacy.color[colorType].overlay.mixin,
+    mixinValue: system.legacy.opacity[colorType].hover,
   });
 };
 
@@ -157,23 +140,12 @@ const hover = ({
  * @param colorType
  * A string that will determine where the mixin color and the mixin percentage comes from within tokens.
  */
-const pressed = ({
-  color,
-  fallback,
-  colorType = 'accent',
-  surfaceType = 'default',
-}: InteractiveStateProps) => {
-  const mixinColor =
-    colorType === 'accent'
-      ? system.color.accent.overlay.pressed
-      : surfaceType === 'default'
-        ? system.color.surface.overlay.pressed.default
-        : system.color.surface.overlay.pressed.inverse;
+const pressed = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) => {
   return darken({
     color: color,
     fallback: fallback,
-    mixinColor: mixinColor,
-    mixinValue: system.opacity[colorType].pressed,
+    mixinColor: system.legacy.color[colorType].overlay.mixin,
+    mixinValue: system.legacy.opacity[colorType].pressed,
   });
 };
 

From 42f0d91d9a98bfe0e0193da5577fb5fba42f21f8 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 24 Jun 2026 17:39:35 -0600
Subject: [PATCH 14/40] chore: Updated colorSpace spec

---
 modules/styling/spec/colorSpace.spec.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index cc6b068b9f..f5973e449a 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -23,19 +23,18 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-hover, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
       );
     });
     it('should return color-mix of hover state using surface tokens', () => {
       const color = '--cnvs-sys-color-brand-accent-primary';
       const fallback = '--cnvs-brand-primary-base';
       const colorType = 'surface';
-      const surfaceType = 'default';
 
-      const expected = colorSpace.hover({color, fallback, colorType, surfaceType});
+      const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-hover-${surfaceType}, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
       );
     });
   });
@@ -55,12 +54,11 @@ describe('CSS color-mix Functions', () => {
       const color = '--cnvs-sys-color-brand-accent-primary';
       const fallback = '--cnvs-brand-primary-base';
       const colorType = 'surface';
-      const surfaceType = 'default';
 
-      const expected = colorSpace.pressed({color, fallback, colorType, surfaceType});
+      const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-pressed-${surfaceType}, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
       );
     });
   });

From 0dba6375de87ea1b7527dad716cb0452c1d816e7 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 24 Jun 2026 17:59:08 -0600
Subject: [PATCH 15/40] chore: Updated colorSpace spec

---
 modules/styling/spec/colorSpace.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index f5973e449a..147ea9ccfb 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -23,7 +23,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0.18) * 100%))`
       );
     });
     it('should return color-mix of hover state using surface tokens', () => {
@@ -34,7 +34,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0.08) * 100%))`
       );
     });
   });
@@ -47,7 +47,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-pressed, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-pressed, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.36) * 100%))`
       );
     });
     it('should return color-mix of pressed state using surface tokens', () => {
@@ -58,7 +58,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, black) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.18) * 100%))`
       );
     });
   });

From 26eca6c09fc2dafe388170fc72bb9de88280334d Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 25 Jun 2026 09:13:45 -0600
Subject: [PATCH 16/40] chore: Updated spec

---
 modules/styling/spec/colorSpace.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index 147ea9ccfb..d9e33a4c70 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -47,7 +47,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-pressed, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.36) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.36) * 100%))`
       );
     });
     it('should return color-mix of pressed state using surface tokens', () => {

From b247cf7af06e7367294f8c53d66780698e65a38c Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 25 Jun 2026 15:31:40 -0600
Subject: [PATCH 17/40] chore: Nit fixes

---
 modules/react/button/lib/BaseButton.tsx   | 5 -----
 modules/react/button/lib/DeleteButton.tsx | 2 +-
 modules/styling/spec/colorSpace.spec.ts   | 4 ++--
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 6dd60a5866..78c7b1b3b6 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -120,11 +120,6 @@ export const buttonStencil = createStencil({
     borderRadius: '',
   },
   base: ({background, border, boxShadowInner, boxShadowOuter, label, opacity, borderRadius}) => ({
-    // This is here temporarily until tokens are updated
-    // '[data-theme="sana-canvas"] &': {
-    //   '--cnvs-sys-opacity-accent-hover': '0.045',
-    //   '--cnvs-sys-opacity-accent-pressed': '0.118',
-    // },
     // Default Styles
     fontFamily: system.fontFamily.default,
     fontSize: system.legacy.fontSize.subtext.lg,
diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index 038615d998..423d73ff19 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -13,7 +13,7 @@ import {Button, ButtonProps} from './Button';
  */
 export interface DeleteButtonProps extends ButtonProps {
   /**
-   * Variant has an option for `inverse` which will inverse the styling
+   * Variant has an option for `inverse` which will invert the styling
    */
   variant?: 'inverse';
 }
diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index d9e33a4c70..86cf0aa9a7 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -27,7 +27,7 @@ describe('CSS color-mix Functions', () => {
       );
     });
     it('should return color-mix of hover state using surface tokens', () => {
-      const color = '--cnvs-sys-color-brand-accent-primary';
+      const color = '--cnvs-sys-color-brand-surface-primary-default';
       const fallback = '--cnvs-brand-primary-base';
       const colorType = 'surface';
 
@@ -51,7 +51,7 @@ describe('CSS color-mix Functions', () => {
       );
     });
     it('should return color-mix of pressed state using surface tokens', () => {
-      const color = '--cnvs-sys-color-brand-accent-primary';
+      const color = '--cnvs-sys-color-brand-surface-primary-default';
       const fallback = '--cnvs-brand-primary-base';
       const colorType = 'surface';
 

From a855ed8474fb146c8ea5c61a3f80a105797ea994 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 25 Jun 2026 15:46:54 -0600
Subject: [PATCH 18/40] chore: Updated Upgrade Guide

---
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx           | 15 ++++++++++++++-
 modules/react/button/lib/BaseButton.tsx           |  2 +-
 .../stories/button/examples/DeleteInverse.tsx     |  1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index e571a21066..3579730bed 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -92,7 +92,20 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Updates
 
-[Content will be added]
+### Buttons
+
+#### Delete Button Inverse Variant
+
+**PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
+
+We've added an `inverse` variant to the `DeleteButton` component. This variant will invert the
+button's styling.
+
+```tsx
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+
+<DeleteButton variant="inverse">Delete</DeleteButton>;
+```
 
 ## New Utilities
 
diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 78c7b1b3b6..9f7244d2af 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -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')
diff --git a/modules/react/button/stories/button/examples/DeleteInverse.tsx b/modules/react/button/stories/button/examples/DeleteInverse.tsx
index 16ccbf3802..aa1a1fde14 100644
--- a/modules/react/button/stories/button/examples/DeleteInverse.tsx
+++ b/modules/react/button/stories/button/examples/DeleteInverse.tsx
@@ -6,6 +6,7 @@ import {trashIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
+  backgroundColor: system.color.surface.contrast.default,
   gap: system.gap.md,
   padding: system.padding.md,
 });

From 99a980949f865768024d5ac581ea10cf56011f94 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 25 Jun 2026 15:47:59 -0600
Subject: [PATCH 19/40] chore: Made commit for md file

---
 .../llm/upgrade-guides/16.0-UPGRADE-GUIDE.md  | 218 ++++++++++++++++++
 1 file changed, 218 insertions(+)
 create mode 100644 modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md

diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
new file mode 100644
index 0000000000..e3db1ea44f
--- /dev/null
+++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
@@ -0,0 +1,218 @@
+# Canvas Kit 16.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v16. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+## Why You Should Upgrade
+
+Soon to be...
+
+## Table of Contents
+
+- [Codemod](#codemod)
+  - [Instructions](#instructions)
+- [New Components](#new-components)
+- [Component Updates](#component-updates)
+- [New Utilities](#new-utilities)
+  - [cornerShapeStencil](#cornershapestencil)
+- [Deprecations](#deprecations)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Codemod
+
+We've provided a [codemod](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) to
+automatically update your code to work with most of the breaking changes in v16. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+AST, identifying patterns, and making prescribed changes. This greatly decreases opportunities for
+error and reduces the number of manual updates, which allows you to focus on changes that need your
+attention. **We highly recommend you use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v14 of Canvas Kit,
+  you'll need to run the v15 codemod before you run v16.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in v16. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.```sh
+npx @workday/canvas-kit-codemod v16 [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v16 [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note:** The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+## New Components
+
+[Content will be added]
+
+## Component Updates
+
+### Buttons
+
+#### Delete Button Inverse Variant
+
+**PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
+
+We've added an `inverse` variant to the `DeleteButton` component. This variant will invert the
+button's styling.
+
+```tsx
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+
+<DeleteButton variant="inverse">Delete</DeleteButton>;
+```
+
+## New Utilities
+
+### cornerShapeStencil
+
+We've added a new stencil called `cornerShapeStencil` to `@workday/canvas-kit-react/common`. It
+applies the CSS [`corner-shape`](https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape)
+property as a progressive enhancement for components using border radius that aren't circular.
+Browsers that don't support `corner-shape` fall back to `border-radius` alone, as border-radius is
+declared first in the cascade.
+
+The stencil exposes a `shape` variable for setting the border radius. Extend it in your own stencils
+to get consistent rounded corners:
+
+```tsx
+import {cornerShapeStencil} from '@workday/canvas-kit-react/common';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const myStencil = createStencil({
+  extends: cornerShapeStencil,
+  base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.xxl,
+  },
+});
+```
+
+`Card` extends this stencil for its rounded corners.
+
+## Deprecations
+
+We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
+in a future major release. This signals consumers to migrate to a more stable alternative before the
+deprecated code is removed.
+
+## Glossary
+
+For an overview of the different packages we provide, please view our docs
+[here](https://workday.github.io/canvas-kit/?path=/docs/guides-packages--docs).
+
+### Main
+
+Components in the Main package are stable and ready for production use.
+
+### Preview
+
+Components in the Preview package are mostly stable but may still receive breaking changes before
+being promoted to Main.
+
+### Labs
+
+Components in the Labs package are experimental and may receive significant changes or be removed
+entirely.
+
+---
+
+## Codemod Reference
+
+# What is a Codemod?
+
+A codemod is a script that makes programmatic transformations on your codebase by traversing the
+[AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
+prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
+updates, which allows you to focus on changes that need your attention. **We highly recommend you
+use the codemod for these reasons.**
+
+If you're new to running codemods or if it's been a minute since you've used one, there are a few
+things you'll want to keep in mind.
+
+- Our codemods are meant to be run sequentially. For example, if you're using v8 of Canvas Kit,
+  you'll need to run the v9 codemod before you run v10 and so on.
+- The codemod will update your code to be compatible with the specified version, but it will **not**
+  remove outdated dependencies or upgrade dependencies to the latest version. You'll need to upgrade
+  dependencies on your own.
+  - We recommend upgrading dependencies before running the codemod.
+  - Always review your `package.json` files to make sure your dependency versions look correct.
+- The codemod will not handle every breaking change in this upgrade. You will likely need to make some manual
+  changes to be compatible. Use our Upgrade Guide as a checklist.
+- Codemods are not bulletproof.
+  - Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
+  - As a safety precaution, we recommend committing the changes from the codemod as a single
+    isolated commit (separate from other changes) so you can roll back more easily if necessary.
+
+We're here to help! Automatic changes to your codebase can feel scary. You can always reach out to
+our team. We'd be very happy to walk you through the process to set you up for success.
+
+## Running a Codemod
+
+### Instructions
+
+The easiest way to run our codemod is to use `npx` in your terminal.```sh
+npx @workday/canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
+```
+
+Be sure to provide specific directories that need to be updated via the `[path]` argument. This
+decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
+having an error. For example, if your source code lives in `src/`, use `src/` as your `[path]`. Or,
+if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
+`[path]`.
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+yarn add @workday/canvas-kit-codemod --dev
+yarn canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
+yarn remove @workday/canvas-kit-codemod
+```
+
+> **Note**: The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to
+> manually edit other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter
+> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
+> your project conventions.
+
+No codemod transformations available for v16.
\ No newline at end of file

From ae98f90d5801fe7da4e7f584a663a01c1e4ce540 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 25 Jun 2026 17:57:21 -0600
Subject: [PATCH 20/40] chore: Added alpha tokens

---
 .storybook/preview.js                  | 2 +-
 modules/docs/package.json              | 2 +-
 modules/labs-react/package.json        | 2 +-
 modules/preview-react/package.json     | 2 +-
 modules/react/package.json             | 2 +-
 modules/styling-transform/package.json | 2 +-
 modules/styling/lib/colorSpace.tsx     | 4 ++--
 modules/styling/package.json           | 2 +-
 package.json                           | 2 +-
 yarn.lock                              | 8 ++++----
 10 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index cf8f64c4d0..be1495f22f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -4,7 +4,7 @@ import {defaultCanvasTheme} from '@workday/canvas-kit-react/common';
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
 import '@workday/canvas-tokens-web/css/component/_variables.css';
-import '@workday/canvas-tokens-web/css/sana/_variables.css';
+// import '@workday/canvas-tokens-web/css/sana/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
 import {CanvasProviderDecorator} from '../utils/storybook';
diff --git a/modules/docs/package.json b/modules/docs/package.json
index 2b8ca5ec3a..f6d96eaea4 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -52,7 +52,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index e0c217f53e..e4dd0d0d65 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index b89d4b7059..7ac5d91a07 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
     "@workday/design-assets-types": "^0.3.0"
   },
   "devDependencies": {
diff --git a/modules/react/package.json b/modules/react/package.json
index c1300bf9e8..d7bedd94e9 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -57,7 +57,7 @@
     "@workday/canvas-kit-preview-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index 10ad32b308..0c60ad03fd 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
     "@workday/canvas-kit-styling": "^15.0.14",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
     "stylis": "4.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.0"
diff --git a/modules/styling/lib/colorSpace.tsx b/modules/styling/lib/colorSpace.tsx
index 3277bdd105..b7e34e3b97 100644
--- a/modules/styling/lib/colorSpace.tsx
+++ b/modules/styling/lib/colorSpace.tsx
@@ -115,7 +115,7 @@ const hover = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) =
     color: color,
     fallback: fallback,
     mixinColor: system.legacy.color[colorType].overlay.mixin,
-    mixinValue: system.legacy.opacity[colorType].hover,
+    mixinValue: system.opacity[colorType].hover,
   });
 };
 
@@ -145,7 +145,7 @@ const pressed = ({color, fallback, colorType = 'accent'}: InteractiveStateProps)
     color: color,
     fallback: fallback,
     mixinColor: system.legacy.color[colorType].overlay.mixin,
-    mixinValue: system.legacy.opacity[colorType].pressed,
+    mixinValue: system.opacity[colorType].pressed,
   });
 };
 
diff --git a/modules/styling/package.json b/modules/styling/package.json
index b4d01713c0..379244d397 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.6.0",
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
     "typescript": "5.0"
   }
 }
diff --git a/package.json b/package.json
index bd9283cd82..c296f308be 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
   "@workday/canvas-applet-icons-web": "^2.0.15",
   "@workday/canvas-expressive-icons-web": "1.0.2",
   "@workday/canvas-system-icons-web": "4.0.4",
-  "@workday/canvas-tokens-web": "4.4.0-beta.0",
+  "@workday/canvas-tokens-web": "5.0.0-alpha.1",
   "resolutions": {
     "ansi-regex": "3.0.1",
     "braces": "3.0.3",
diff --git a/yarn.lock b/yarn.lock
index 2e8c7ec31e..e4b88718f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4834,10 +4834,10 @@
   resolved "https://registry.yarnpkg.com/@workday/canvas-system-icons-web/-/canvas-system-icons-web-4.0.4.tgz#8ddaa5a465059227d79b808c263f167f7d3b6915"
   integrity sha512-+CO8OTemP947vf/nQeVu3IxHrq9Q2sHra3/FAImkQ0w4/f3tlOgQn7YTWt7rKL2fvTYghjNN0HoHQSR0T64uWg==
 
-"@workday/canvas-tokens-web@4.4.0-beta.0":
-  version "4.4.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.0.tgz#6d93f5329eb94c6d3843ccb630d9a1b7b1faf66c"
-  integrity sha512-9q2alt3aG+coip7G3oyAubChFH3TBgOsGHtRDHVuTY1qN1l2UzzgWE/YGjJlHe8QK7ukBd4gc8bYys/817jtjw==
+"@workday/canvas-tokens-web@5.0.0-alpha.1":
+  version "5.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-5.0.0-alpha.1.tgz#3de0c1f68d3c23355c1716fb4bbedb8bcc7b1a81"
+  integrity sha512-ge29p025lWNEk4phMY2/dkaU9/5r50N9wQmLq+EbYZlTNB7bu4e4jMRdqcBUb2UoWo19rfqC3thaXSa6Rgju7g==
 
 "@workday/design-assets-types@0.2.8":
   version "0.2.8"

From 6819b6a6e10025c992a530656923b76d493a1f2a Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Fri, 26 Jun 2026 17:46:12 -0600
Subject: [PATCH 21/40] chore: Updated from suggestions

---
 modules/docs/package.json                                 | 2 +-
 modules/labs-react/package.json                           | 2 +-
 modules/preview-react/package.json                        | 2 +-
 modules/react/button/lib/BaseButton.tsx                   | 6 +++---
 modules/react/button/stories/button/Button.mdx            | 8 ++++----
 .../button/stories/button/examples/DeleteInverse.tsx      | 5 +++--
 .../stories/visual-testing/DeleteButton.stories.tsx       | 2 +-
 modules/react/package.json                                | 2 +-
 modules/styling-transform/package.json                    | 2 +-
 modules/styling/package.json                              | 2 +-
 package.json                                              | 2 +-
 yarn.lock                                                 | 8 ++++----
 12 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/modules/docs/package.json b/modules/docs/package.json
index f6d96eaea4..20035ad1e9 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -52,7 +52,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index e4dd0d0d65..cf2e3f3119 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index 7ac5d91a07..96d7b2c02b 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
     "@workday/design-assets-types": "^0.3.0"
   },
   "devDependencies": {
diff --git a/modules/react/button/lib/BaseButton.tsx b/modules/react/button/lib/BaseButton.tsx
index 9f7244d2af..c815db5c44 100644
--- a/modules/react/button/lib/BaseButton.tsx
+++ b/modules/react/button/lib/BaseButton.tsx
@@ -262,7 +262,7 @@ export const buttonStencil = createStencil({
         letterSpacing: system.legacy.letterSpacing.subtext.lg,
         paddingInline: system.legacy.padding.md,
         height: system.legacy.size.md,
-        gap: base.size75,
+        gap: base.legacy.size75,
         minWidth: base.legacy.size1100,
       },
       small: {
@@ -368,7 +368,7 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'extraSmall', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: calc.add(system.legacy.padding.xxs, '0.125rem'),
+        paddingInlineStart: calc.add(system.legacy.padding.xxs, px2rem(2)),
         paddingInlineEnd: system.legacy.padding.xs,
       },
     },
@@ -376,7 +376,7 @@ export const buttonStencil = createStencil({
       modifiers: {size: 'extraSmall', iconPosition: 'end'},
       styles: {
         paddingInlineStart: system.legacy.padding.xs,
-        paddingInlineEnd: calc.add(system.legacy.padding.xxs, '0.125rem'),
+        paddingInlineEnd: calc.add(system.legacy.padding.xxs, px2rem(2)),
       },
     },
   ],
diff --git a/modules/react/button/stories/button/Button.mdx b/modules/react/button/stories/button/Button.mdx
index e8a1acce79..4ae94052e7 100644
--- a/modules/react/button/stories/button/Button.mdx
+++ b/modules/react/button/stories/button/Button.mdx
@@ -47,7 +47,7 @@ The example below shows multiple instances of a `PrimaryButton` with various ico
 
 Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
 Button, the default outline as well as the hover and focus states are different. Use this variant
-when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.
+when you need to place a Primary Button on a dark or colorful background such as `neutral400`.
 
 <ExampleCodeBlock code={PrimaryInverse} />
 
@@ -60,7 +60,7 @@ The example below shows multiple instances of a `SecondaryButton` with various i
 <ExampleCodeBlock code={Secondary} />
 
 Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button
-on a dark or colorful background such as `blueberry400`.
+on a dark or colorful background such as `neutral400`.
 
 <ExampleCodeBlock code={SecondaryInverse} />
 
@@ -73,7 +73,7 @@ The example below shows multiple instances of a `TertiaryButton` with various ic
 <ExampleCodeBlock code={Tertiary} />
 
 Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button
-on a dark or colorful background such as `blueberry400`.
+on a dark or colorful background such as `neutral400`.
 
 <ExampleCodeBlock code={TertiaryInverse} />
 
@@ -84,7 +84,7 @@ on a dark or colorful background such as `blueberry400`.
 <ExampleCodeBlock code={Delete} />
 
 Delete Buttons also have an `inverse` variant. Use this when you need to place a Delete Button on a
-dark or colorful background such as `blueberry400`.
+dark or colorful background such as `neutral400`.
 
 <ExampleCodeBlock code={DeleteInverse} />
 
diff --git a/modules/react/button/stories/button/examples/DeleteInverse.tsx b/modules/react/button/stories/button/examples/DeleteInverse.tsx
index aa1a1fde14..e3e3900900 100644
--- a/modules/react/button/stories/button/examples/DeleteInverse.tsx
+++ b/modules/react/button/stories/button/examples/DeleteInverse.tsx
@@ -7,12 +7,13 @@ import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
   backgroundColor: system.color.surface.contrast.default,
+  display: 'flex',
   gap: system.gap.md,
   padding: system.padding.md,
 });
 
 export const DeleteInverse = () => (
-  <Flex cs={parentContainerStyles}>
+  <div className={parentContainerStyles}>
     <DeleteButton variant="inverse">Delete</DeleteButton>
     <DeleteButton icon={trashIcon} iconPosition="start" variant="inverse">
       Delete
@@ -23,5 +24,5 @@ export const DeleteInverse = () => (
     <Tooltip title="Delete">
       <DeleteButton icon={trashIcon} variant="inverse" />
     </Tooltip>
-  </Flex>
+  </div>
 );
diff --git a/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx b/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
index 83121c9d49..acef896c3a 100644
--- a/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
+++ b/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
@@ -53,7 +53,7 @@ const DeleteButtonTest = (props: {theme?: PartialEmotionCanvasTheme}) => (
       columnProps={stateTableColumnProps}
     >
       {props => (
-        <Container>
+        <Container blue={props.variant === 'inverse'}>
           <DeleteButton {...props}>Test</DeleteButton>
         </Container>
       )}
diff --git a/modules/react/package.json b/modules/react/package.json
index d7bedd94e9..42f98d8087 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -57,7 +57,7 @@
     "@workday/canvas-kit-preview-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index 0c60ad03fd..dc151410ab 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
     "@workday/canvas-kit-styling": "^15.0.14",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
     "stylis": "4.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.0"
diff --git a/modules/styling/package.json b/modules/styling/package.json
index 379244d397..15256ef789 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.6.0",
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
     "typescript": "5.0"
   }
 }
diff --git a/package.json b/package.json
index c296f308be..d4d2563e81 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
   "@workday/canvas-applet-icons-web": "^2.0.15",
   "@workday/canvas-expressive-icons-web": "1.0.2",
   "@workday/canvas-system-icons-web": "4.0.4",
-  "@workday/canvas-tokens-web": "5.0.0-alpha.1",
+  "@workday/canvas-tokens-web": "5.0.0-alpha.2",
   "resolutions": {
     "ansi-regex": "3.0.1",
     "braces": "3.0.3",
diff --git a/yarn.lock b/yarn.lock
index e4b88718f9..b146b78b09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4834,10 +4834,10 @@
   resolved "https://registry.yarnpkg.com/@workday/canvas-system-icons-web/-/canvas-system-icons-web-4.0.4.tgz#8ddaa5a465059227d79b808c263f167f7d3b6915"
   integrity sha512-+CO8OTemP947vf/nQeVu3IxHrq9Q2sHra3/FAImkQ0w4/f3tlOgQn7YTWt7rKL2fvTYghjNN0HoHQSR0T64uWg==
 
-"@workday/canvas-tokens-web@5.0.0-alpha.1":
-  version "5.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-5.0.0-alpha.1.tgz#3de0c1f68d3c23355c1716fb4bbedb8bcc7b1a81"
-  integrity sha512-ge29p025lWNEk4phMY2/dkaU9/5r50N9wQmLq+EbYZlTNB7bu4e4jMRdqcBUb2UoWo19rfqC3thaXSa6Rgju7g==
+"@workday/canvas-tokens-web@5.0.0-alpha.2":
+  version "5.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-5.0.0-alpha.2.tgz#ae972ff219668a44de86e19550a1761b8fd55e96"
+  integrity sha512-I6Eh9SR1u051aDhz+RNOXaqLrnltRn4vHwPmiTtWpNOgGu6qMsaCZWu/2Oq2ygLBzNeqlKnSoTpVYMLrdizY1w==
 
 "@workday/design-assets-types@0.2.8":
   version "0.2.8"

From e62504e1b23882b971dd870c7acb6a9525963aaa Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 11:44:48 -0600
Subject: [PATCH 22/40] chore: Updated tokens package

---
 modules/docs/package.json              | 2 +-
 modules/labs-react/package.json        | 2 +-
 modules/preview-react/package.json     | 2 +-
 modules/react/package.json             | 2 +-
 modules/styling-transform/package.json | 2 +-
 modules/styling/package.json           | 2 +-
 package.json                           | 2 +-
 yarn.lock                              | 8 ++++----
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/modules/docs/package.json b/modules/docs/package.json
index 20035ad1e9..2b8ca5ec3a 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -52,7 +52,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.0",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index cf2e3f3119..e0c217f53e 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.0",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index 96d7b2c02b..b89d4b7059 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.0",
     "@workday/design-assets-types": "^0.3.0"
   },
   "devDependencies": {
diff --git a/modules/react/package.json b/modules/react/package.json
index 42f98d8087..c1300bf9e8 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -57,7 +57,7 @@
     "@workday/canvas-kit-preview-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.0",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index dc151410ab..10ad32b308 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
     "@workday/canvas-kit-styling": "^15.0.14",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.0",
     "stylis": "4.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.0"
diff --git a/modules/styling/package.json b/modules/styling/package.json
index 15256ef789..b4d01713c0 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.6.0",
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.0",
     "typescript": "5.0"
   }
 }
diff --git a/package.json b/package.json
index d4d2563e81..bd9283cd82 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
   "@workday/canvas-applet-icons-web": "^2.0.15",
   "@workday/canvas-expressive-icons-web": "1.0.2",
   "@workday/canvas-system-icons-web": "4.0.4",
-  "@workday/canvas-tokens-web": "5.0.0-alpha.2",
+  "@workday/canvas-tokens-web": "4.4.0-beta.0",
   "resolutions": {
     "ansi-regex": "3.0.1",
     "braces": "3.0.3",
diff --git a/yarn.lock b/yarn.lock
index b146b78b09..2e8c7ec31e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4834,10 +4834,10 @@
   resolved "https://registry.yarnpkg.com/@workday/canvas-system-icons-web/-/canvas-system-icons-web-4.0.4.tgz#8ddaa5a465059227d79b808c263f167f7d3b6915"
   integrity sha512-+CO8OTemP947vf/nQeVu3IxHrq9Q2sHra3/FAImkQ0w4/f3tlOgQn7YTWt7rKL2fvTYghjNN0HoHQSR0T64uWg==
 
-"@workday/canvas-tokens-web@5.0.0-alpha.2":
-  version "5.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-5.0.0-alpha.2.tgz#ae972ff219668a44de86e19550a1761b8fd55e96"
-  integrity sha512-I6Eh9SR1u051aDhz+RNOXaqLrnltRn4vHwPmiTtWpNOgGu6qMsaCZWu/2Oq2ygLBzNeqlKnSoTpVYMLrdizY1w==
+"@workday/canvas-tokens-web@4.4.0-beta.0":
+  version "4.4.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.0.tgz#6d93f5329eb94c6d3843ccb630d9a1b7b1faf66c"
+  integrity sha512-9q2alt3aG+coip7G3oyAubChFH3TBgOsGHtRDHVuTY1qN1l2UzzgWE/YGjJlHe8QK7ukBd4gc8bYys/817jtjw==
 
 "@workday/design-assets-types@0.2.8":
   version "0.2.8"

From 460da7851344464ab2ef6acf2da06f1325dc0adb Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 11:51:54 -0600
Subject: [PATCH 23/40] chore: Updated Upgrade Guide

---
 .../llm/upgrade-guides/16.0-UPGRADE-GUIDE.md  | 45 ++++++++++++++++++-
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx       |  2 +
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
index e3db1ea44f..cb417f3190 100644
--- a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
+++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
@@ -13,7 +13,9 @@ Soon to be...
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [New Components](#new-components)
+  - [KBD](#kbd)
 - [Component Updates](#component-updates)
+  - [Card](#card)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Deprecations](#deprecations)
@@ -82,10 +84,51 @@ yarn remove @workday/canvas-kit-codemod
 
 ## New Components
 
-[Content will be added]
+### KBD
+
+**PR:** [#4001](https://github.com/Workday/canvas-kit/pull/4001)
+
+The new `KBD` component allows you to display keyboard inputs in your UI using accessible, visually
+consistent keyboard key representations. This is useful for documenting keyboard shortcuts,
+instructional prompts, or any UI patterns that reference specific keys.
+
+**Highlights:**
+
+- Provides a semantic (`kbd` element) way to visually present keyboard keys and shortcuts to users.
+- Supports various variants (`default` for prominence, `plain` for use on colored surfaces), as well
+  as size options (`small`, `medium`, `large`).
+- Easy to use nested `KBD.Item` components for sequences or combinations.
+- RTL support.
+
+**Example:**
+
+```tsx
+import {KBD} from '@workday/canvas-kit-labs-react';
+
+<KBD>
+  <KBD.Item aria-label="Command">⌘</KBD.Item>
+  <KBD.Item>C</KBD.Item>
+</KBD>;
+```
+
+For more details and advanced usage, including accessibility guidance for symbolic keys and
+functional shortcuts, refer to the storybook documentation and our example stories.
 
 ## Component Updates
 
+### Card
+
+**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014)
+
+#### Visual Updates
+
+- `Card.Heading` now defaults to `body.small` type level (previously `body.large`). If your design
+  requires a larger heading, you can override the `typeLevel` prop on `Card.Heading`.
+- The gap between `Card.Heading` and `Card.Body` has been reduced (previously `gap.lg`, now
+  `padding.sm`).
+- Card's border radius is now managed via the new `cornerShapeStencil` (see
+  [New Utilities](#new-utilities)).
+
 ### Buttons
 
 #### Delete Button Inverse Variant
diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index 29138a6d13..3af4cc4ab9 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -19,6 +19,8 @@ Soon to be...
 - [New Components](#new-components)
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
+  - [Buttons](#buttons)
+    - [Delete Button Inverse Variant](#delete-button-inverse-variant)
   - [Card](#card)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)

From 799715c6fc8a54e3970885c52687ed46053ad49a Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 11:53:07 -0600
Subject: [PATCH 24/40] chore: Updated llm file

---
 modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
index cb417f3190..be2e4a321a 100644
--- a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
+++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
@@ -15,6 +15,8 @@ Soon to be...
 - [New Components](#new-components)
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
+  - [Buttons](#buttons)
+    - [Delete Button Inverse Variant](#delete-button-inverse-variant)
   - [Card](#card)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)

From e32564cc1b24b8f1bb3e22b0b06324ffd4058f8f Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 12:20:40 -0600
Subject: [PATCH 25/40] chore: Re-added sana variable css file

---
 .storybook/preview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 859742018a..74526fc3b0 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -4,7 +4,7 @@ import {defaultCanvasTheme} from '@workday/canvas-kit-react/common';
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
 import '@workday/canvas-tokens-web/css/component/_variables.css';
-// import '@workday/canvas-tokens-web/css/sana/_variables.css';
+import '@workday/canvas-tokens-web/css/sana/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
 import {CanvasProviderDecorator} from '../utils/storybook';

From 1bab837feb1a1575eeab4cee4c02d342a107766b Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 16:16:09 -0600
Subject: [PATCH 26/40] chore: Updated token package

---
 modules/docs/package.json              | 2 +-
 modules/labs-react/package.json        | 2 +-
 modules/preview-react/package.json     | 2 +-
 modules/react/package.json             | 2 +-
 modules/styling-transform/package.json | 2 +-
 modules/styling/package.json           | 2 +-
 package.json                           | 2 +-
 yarn.lock                              | 8 ++++----
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/modules/docs/package.json b/modules/docs/package.json
index 2b8ca5ec3a..3232bc5a63 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -52,7 +52,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.2",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index e0c217f53e..8d0d683651 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.2",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index b89d4b7059..ae41061874 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.2",
     "@workday/design-assets-types": "^0.3.0"
   },
   "devDependencies": {
diff --git a/modules/react/package.json b/modules/react/package.json
index c1300bf9e8..5bdd685241 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -57,7 +57,7 @@
     "@workday/canvas-kit-preview-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.2",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index 10ad32b308..ea16647b4f 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
     "@workday/canvas-kit-styling": "^15.0.14",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.2",
     "stylis": "4.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.0"
diff --git a/modules/styling/package.json b/modules/styling/package.json
index b4d01713c0..616ed766d3 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.6.0",
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.0",
+    "@workday/canvas-tokens-web": "4.4.0-beta.2",
     "typescript": "5.0"
   }
 }
diff --git a/package.json b/package.json
index bd9283cd82..809df55a3a 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
   "@workday/canvas-applet-icons-web": "^2.0.15",
   "@workday/canvas-expressive-icons-web": "1.0.2",
   "@workday/canvas-system-icons-web": "4.0.4",
-  "@workday/canvas-tokens-web": "4.4.0-beta.0",
+  "@workday/canvas-tokens-web": "4.4.0-beta.2",
   "resolutions": {
     "ansi-regex": "3.0.1",
     "braces": "3.0.3",
diff --git a/yarn.lock b/yarn.lock
index 2e8c7ec31e..4ab6f06dae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4834,10 +4834,10 @@
   resolved "https://registry.yarnpkg.com/@workday/canvas-system-icons-web/-/canvas-system-icons-web-4.0.4.tgz#8ddaa5a465059227d79b808c263f167f7d3b6915"
   integrity sha512-+CO8OTemP947vf/nQeVu3IxHrq9Q2sHra3/FAImkQ0w4/f3tlOgQn7YTWt7rKL2fvTYghjNN0HoHQSR0T64uWg==
 
-"@workday/canvas-tokens-web@4.4.0-beta.0":
-  version "4.4.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.0.tgz#6d93f5329eb94c6d3843ccb630d9a1b7b1faf66c"
-  integrity sha512-9q2alt3aG+coip7G3oyAubChFH3TBgOsGHtRDHVuTY1qN1l2UzzgWE/YGjJlHe8QK7ukBd4gc8bYys/817jtjw==
+"@workday/canvas-tokens-web@4.4.0-beta.2":
+  version "4.4.0-beta.2"
+  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.2.tgz#6685016fa75963233bd604588748f2d2c8a4b6a4"
+  integrity sha512-0kUrbAW8e2MNtCSq4GLDDi5Q3asMKiBLZQaiMiUkoFfPVEXp8GzSxKcLBdW9anQJ6+69C6v3Enou7GwxccpFFQ==
 
 "@workday/design-assets-types@0.2.8":
   version "0.2.8"

From 31b2116a6e6b1916ac1b1d7b566973e3ae91621c Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 16:32:59 -0600
Subject: [PATCH 27/40] chore: Updated colorSpace and spec

---
 modules/styling/lib/colorSpace.tsx      | 2 +-
 modules/styling/spec/colorSpace.spec.ts | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/styling/lib/colorSpace.tsx b/modules/styling/lib/colorSpace.tsx
index b7e34e3b97..a33118a86e 100644
--- a/modules/styling/lib/colorSpace.tsx
+++ b/modules/styling/lib/colorSpace.tsx
@@ -115,7 +115,7 @@ const hover = ({color, fallback, colorType = 'accent'}: InteractiveStateProps) =
     color: color,
     fallback: fallback,
     mixinColor: system.legacy.color[colorType].overlay.mixin,
-    mixinValue: system.opacity[colorType].hover,
+    mixinValue: system.legacy.opacity[colorType].hover,
   });
 };
 
diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index 86cf0aa9a7..53153b0c60 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -23,7 +23,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0.18) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
       );
     });
     it('should return color-mix of hover state using surface tokens', () => {
@@ -34,7 +34,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0.08) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
       );
     });
   });
@@ -47,7 +47,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.36) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
       );
     });
     it('should return color-mix of pressed state using surface tokens', () => {
@@ -58,7 +58,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.18) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
       );
     });
   });

From a73ea73ed3494d8b1c3230a8e66fb9adcdd9b817 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 29 Jun 2026 17:22:28 -0600
Subject: [PATCH 28/40] chore: Updated spec

---
 modules/styling/spec/colorSpace.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index 53153b0c60..9ea029d247 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -23,7 +23,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0.18) * 100%))`
       );
     });
     it('should return color-mix of hover state using surface tokens', () => {
@@ -34,7 +34,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.hover({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-hover, 0.08) * 100%))`
       );
     });
   });

From bb73fdde61d1696f80cd531fe1158408cc18f373 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Tue, 30 Jun 2026 13:34:16 -0600
Subject: [PATCH 29/40] chore: Updated Delete variant to be Outline

---
 modules/react/button/lib/DeleteButton.tsx            |  6 +++---
 modules/react/button/stories/button/Button.mdx       |  7 +++----
 .../react/button/stories/button/Button.stories.tsx   |  6 +++---
 .../{DeleteInverse.tsx => DeleteOutline.tsx}         | 12 +++++-------
 .../stories/visual-testing/DeleteButton.stories.tsx  |  4 ++--
 5 files changed, 16 insertions(+), 19 deletions(-)
 rename modules/react/button/stories/button/examples/{DeleteInverse.tsx => DeleteOutline.tsx} (64%)

diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index 423d73ff19..e374cb65ce 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -13,9 +13,9 @@ import {Button, ButtonProps} from './Button';
  */
 export interface DeleteButtonProps extends ButtonProps {
   /**
-   * Variant has an option for `inverse` which will invert the styling
+   * Variant has an option for `outline` which will reverse the styling of the button
    */
-  variant?: 'inverse';
+  variant?: 'outline';
 }
 
 const deleteButtonStencil = createStencil({
@@ -79,7 +79,7 @@ const deleteButtonStencil = createStencil({
   },
   modifiers: {
     variant: {
-      inverse: {
+      outline: {
         // Default Styles
         [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
         [buttonStencil.vars.border]: system.color.border.default,
diff --git a/modules/react/button/stories/button/Button.mdx b/modules/react/button/stories/button/Button.mdx
index 4ae94052e7..0170fad023 100644
--- a/modules/react/button/stories/button/Button.mdx
+++ b/modules/react/button/stories/button/Button.mdx
@@ -9,7 +9,7 @@ import {
 
 import {CustomStyles} from './examples/CustomStyles';
 import {Delete} from './examples/Delete';
-import {DeleteInverse} from './examples/DeleteInverse';
+import {DeleteOutline} from './examples/DeleteOutline';
 import {Grow} from './examples/Grow';
 import {Primary} from './examples/Primary';
 import {PrimaryInverse} from './examples/PrimaryInverse';
@@ -83,10 +83,9 @@ on a dark or colorful background such as `neutral400`.
 
 <ExampleCodeBlock code={Delete} />
 
-Delete Buttons also have an `inverse` variant. Use this when you need to place a Delete Button on a
-dark or colorful background such as `neutral400`.
+Delete Buttons also have an `outline` variant.
 
-<ExampleCodeBlock code={DeleteInverse} />
+<ExampleCodeBlock code={DeleteOutline} />
 
 ### Grow Prop
 
diff --git a/modules/react/button/stories/button/Button.stories.tsx b/modules/react/button/stories/button/Button.stories.tsx
index 677b456f5e..85374df7f9 100644
--- a/modules/react/button/stories/button/Button.stories.tsx
+++ b/modules/react/button/stories/button/Button.stories.tsx
@@ -3,7 +3,7 @@ import {Meta} from '@storybook/react';
 import mdxDoc from './Button.mdx';
 import {CustomStyles as CustomStylesExample} from './examples/CustomStyles';
 import {Delete as DeleteExample} from './examples/Delete';
-import {DeleteInverse as DeleteInverseExample} from './examples/DeleteInverse';
+import {DeleteOutline as DeleteOutlineExample} from './examples/DeleteOutline';
 import {Primary as PrimaryExample} from './examples/Primary';
 import {PrimaryInverse as PrimaryInverseExample} from './examples/PrimaryInverse';
 import {Secondary as SecondaryExample} from './examples/Secondary';
@@ -43,8 +43,8 @@ export const TertiaryInverse = {
 export const Delete = {
   render: DeleteExample,
 };
-export const DeleteInverse = {
-  render: DeleteInverseExample,
+export const DeleteOutline = {
+  render: DeleteOutlineExample,
 };
 export const CustomStyles = {
   render: CustomStylesExample,
diff --git a/modules/react/button/stories/button/examples/DeleteInverse.tsx b/modules/react/button/stories/button/examples/DeleteOutline.tsx
similarity index 64%
rename from modules/react/button/stories/button/examples/DeleteInverse.tsx
rename to modules/react/button/stories/button/examples/DeleteOutline.tsx
index e3e3900900..414112f79c 100644
--- a/modules/react/button/stories/button/examples/DeleteInverse.tsx
+++ b/modules/react/button/stories/button/examples/DeleteOutline.tsx
@@ -1,28 +1,26 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {trashIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
-  backgroundColor: system.color.surface.contrast.default,
   display: 'flex',
   gap: system.gap.md,
   padding: system.padding.md,
 });
 
-export const DeleteInverse = () => (
+export const DeleteOutline = () => (
   <div className={parentContainerStyles}>
-    <DeleteButton variant="inverse">Delete</DeleteButton>
-    <DeleteButton icon={trashIcon} iconPosition="start" variant="inverse">
+    <DeleteButton variant="outline">Delete</DeleteButton>
+    <DeleteButton icon={trashIcon} iconPosition="start" variant="outline">
       Delete
     </DeleteButton>
-    <DeleteButton icon={trashIcon} iconPosition="end" variant="inverse">
+    <DeleteButton icon={trashIcon} iconPosition="end" variant="outline">
       Delete
     </DeleteButton>
     <Tooltip title="Delete">
-      <DeleteButton icon={trashIcon} variant="inverse" />
+      <DeleteButton icon={trashIcon} variant="outline" />
     </Tooltip>
   </div>
 );
diff --git a/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx b/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
index acef896c3a..07fef1dfb4 100644
--- a/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
+++ b/modules/react/button/stories/visual-testing/DeleteButton.stories.tsx
@@ -29,7 +29,7 @@ const DeleteButtonTest = (props: {theme?: PartialEmotionCanvasTheme}) => (
         {
           variant: [
             {value: undefined, label: ''},
-            {value: 'inverse', label: 'Inverse'},
+            {value: 'outline', label: 'Outline'},
           ],
           size: [
             {value: 'extraSmall', label: 'Extra Small'},
@@ -53,7 +53,7 @@ const DeleteButtonTest = (props: {theme?: PartialEmotionCanvasTheme}) => (
       columnProps={stateTableColumnProps}
     >
       {props => (
-        <Container blue={props.variant === 'inverse'}>
+        <Container>
           <DeleteButton {...props}>Test</DeleteButton>
         </Container>
       )}

From cbe66be16b7127846d88888ded7269ad65b8ec98 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Tue, 30 Jun 2026 13:38:57 -0600
Subject: [PATCH 30/40] chore: Updated Upgrade Guide

---
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index 3af4cc4ab9..6f58916a7a 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -20,7 +20,7 @@ Soon to be...
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
-    - [Delete Button Inverse Variant](#delete-button-inverse-variant)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
@@ -139,17 +139,17 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ### Buttons
 
-#### Delete Button Inverse Variant
+#### Delete Button Outline Variant
 
 **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
 
-We've added an `inverse` variant to the `DeleteButton` component. This variant will invert the
-button's styling.
+We've added an `outline` variant to the `DeleteButton` component. This variant will reverse the
+button's styling with a `border` and `transparent` background.
 
 ```tsx
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 
-<DeleteButton variant="inverse">Delete</DeleteButton>;
+<DeleteButton variant="outline">Delete</DeleteButton>;
 ```
 
 ## New Utilities

From a6d2eba3b5c49fd5d9f9534703bfe1b4c8e114f8 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Tue, 30 Jun 2026 13:41:42 -0600
Subject: [PATCH 31/40] chore: Updated LLM Upgrade Guide

---
 modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
index be2e4a321a..f2ac72bd9c 100644
--- a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
+++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
@@ -16,7 +16,7 @@ Soon to be...
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
   - [Buttons](#buttons)
-    - [Delete Button Inverse Variant](#delete-button-inverse-variant)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
@@ -133,17 +133,17 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ### Buttons
 
-#### Delete Button Inverse Variant
+#### Delete Button Outline Variant
 
 **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
 
-We've added an `inverse` variant to the `DeleteButton` component. This variant will invert the
-button's styling.
+We've added an `outline` variant to the `DeleteButton` component. This variant will reverse the
+button's styling with a `border` and `transparent` background.
 
 ```tsx
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 
-<DeleteButton variant="inverse">Delete</DeleteButton>;
+<DeleteButton variant="outline">Delete</DeleteButton>;
 ```
 
 ## New Utilities

From 67f2c150856fb9566f220fb72b00d0cf86cd98b2 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 1 Jul 2026 11:11:23 -0600
Subject: [PATCH 32/40] chore: Updated PrimaryButton

---
 modules/react/button/lib/PrimaryButton.tsx | 52 +++++++++++++---------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/modules/react/button/lib/PrimaryButton.tsx b/modules/react/button/lib/PrimaryButton.tsx
index 18570b7b5e..09c71b19ca 100644
--- a/modules/react/button/lib/PrimaryButton.tsx
+++ b/modules/react/button/lib/PrimaryButton.tsx
@@ -43,21 +43,27 @@ const primaryButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: 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.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.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.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.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.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.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.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'),
         },

From 368831bb2c38a0a549b5fc6ba4ec046bf69564a0 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 1 Jul 2026 12:02:31 -0600
Subject: [PATCH 33/40] chore: Updated SegmentedControl

---
 modules/react/segmented-control/lib/SegmentedControlItem.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modules/react/segmented-control/lib/SegmentedControlItem.tsx b/modules/react/segmented-control/lib/SegmentedControlItem.tsx
index 016e8acf37..6a269140d5 100644
--- a/modules/react/segmented-control/lib/SegmentedControlItem.tsx
+++ b/modules/react/segmented-control/lib/SegmentedControlItem.tsx
@@ -61,7 +61,6 @@ export const segmentedControlItemStencil = createStencil({
     textAlign: 'start',
     paddingInline: 0,
     gap: system.legacy.gap.xs,
-    minWidth: 'min-content',
 
     [buttonStencil.vars.borderRadius]: system.legacy.shape.md,
     [buttonStencil.vars.label]: system.color.fg.muted.default,

From 2ea196572c93a0a1e6b45a3d9f6a7f1eb0972223 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 1 Jul 2026 14:11:50 -0600
Subject: [PATCH 34/40] chore: Updated Upgrade Guide

---
 modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | 25 +++++++++++++++++++++++--
 modules/docs/package.json               |  2 +-
 modules/labs-react/package.json         |  2 +-
 modules/preview-react/package.json      |  2 +-
 modules/react/package.json              |  2 +-
 modules/styling-transform/package.json  |  2 +-
 modules/styling/package.json            |  2 +-
 package.json                            |  2 +-
 yarn.lock                               |  8 ++++----
 9 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
index fbafe3cda0..b532377242 100644
--- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
+++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
@@ -189,10 +189,31 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ### Buttons
 
-#### Delete Button Outline Variant
-
 **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
 
+All buttons have had the following updates:
+
+- `fontWeight` has been updated from `system.fontWeight.bold` to `system.fontWeight.medium`.
+- `minWidth` has been updated to the following:
+
+| Default Size | minWidth v15 | minWidth v16 |
+| ------------ | ------------ | ------------ |
+| extraSmall   | unchanged    | unchanged    |
+| small        | `5rem`       | `4.5rem`     |
+| medium       | `6rem`       | `5.5rem`     |
+| large        | `7rem`       | `6.5rem`     |
+
+- `paddingInline` has been updated to the following:
+
+| Size       | paddingInline v15 | paddingInline v16 |
+| ---------- | ----------------- | ----------------- |
+| extraSmall | `0.75rem`         | `0.5rem`          |
+| small      | `1rem`            | `0.75rem`         |
+| medium     | `1.5rem`          | `1rem`            |
+| large      | `2rem`            | `1.25rem`         |
+
+#### Delete Button Outline Variant
+
 We've added an `outline` variant to the `DeleteButton` component. This variant will reverse the
 button's styling with a `border` and `transparent` background.
 
diff --git a/modules/docs/package.json b/modules/docs/package.json
index 3232bc5a63..2c52dd0b38 100644
--- a/modules/docs/package.json
+++ b/modules/docs/package.json
@@ -52,7 +52,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
index 8d0d683651..b0a5622e33 100644
--- a/modules/labs-react/package.json
+++ b/modules/labs-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "lodash.flatten": "^4.4.0",
diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
index ae41061874..3937e9fc9a 100644
--- a/modules/preview-react/package.json
+++ b/modules/preview-react/package.json
@@ -51,7 +51,7 @@
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "@workday/design-assets-types": "^0.3.0"
   },
   "devDependencies": {
diff --git a/modules/react/package.json b/modules/react/package.json
index 5bdd685241..042d749a99 100644
--- a/modules/react/package.json
+++ b/modules/react/package.json
@@ -57,7 +57,7 @@
     "@workday/canvas-kit-preview-react": "^15.0.14",
     "@workday/canvas-kit-styling": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json
index ea16647b4f..f54b5d9768 100644
--- a/modules/styling-transform/package.json
+++ b/modules/styling-transform/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
     "@workday/canvas-kit-styling": "^15.0.14",
-    "@workday/canvas-tokens-web": "4.4.0-beta.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "stylis": "4.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.0"
diff --git a/modules/styling/package.json b/modules/styling/package.json
index 616ed766d3..8440985067 100644
--- a/modules/styling/package.json
+++ b/modules/styling/package.json
@@ -55,7 +55,7 @@
     "@emotion/styled": "^11.6.0",
     "@workday/canvas-kit-react": "^15.0.14",
     "@workday/canvas-system-icons-web": "4.0.4",
-    "@workday/canvas-tokens-web": "4.4.0-beta.2",
+    "@workday/canvas-tokens-web": "4.4.0-beta.3",
     "typescript": "5.0"
   }
 }
diff --git a/package.json b/package.json
index 809df55a3a..2b196fdc4e 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
   "@workday/canvas-applet-icons-web": "^2.0.15",
   "@workday/canvas-expressive-icons-web": "1.0.2",
   "@workday/canvas-system-icons-web": "4.0.4",
-  "@workday/canvas-tokens-web": "4.4.0-beta.2",
+  "@workday/canvas-tokens-web": "4.4.0-beta.3",
   "resolutions": {
     "ansi-regex": "3.0.1",
     "braces": "3.0.3",
diff --git a/yarn.lock b/yarn.lock
index 4ab6f06dae..3d18e6caae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4834,10 +4834,10 @@
   resolved "https://registry.yarnpkg.com/@workday/canvas-system-icons-web/-/canvas-system-icons-web-4.0.4.tgz#8ddaa5a465059227d79b808c263f167f7d3b6915"
   integrity sha512-+CO8OTemP947vf/nQeVu3IxHrq9Q2sHra3/FAImkQ0w4/f3tlOgQn7YTWt7rKL2fvTYghjNN0HoHQSR0T64uWg==
 
-"@workday/canvas-tokens-web@4.4.0-beta.2":
-  version "4.4.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.2.tgz#6685016fa75963233bd604588748f2d2c8a4b6a4"
-  integrity sha512-0kUrbAW8e2MNtCSq4GLDDi5Q3asMKiBLZQaiMiUkoFfPVEXp8GzSxKcLBdW9anQJ6+69C6v3Enou7GwxccpFFQ==
+"@workday/canvas-tokens-web@4.4.0-beta.3":
+  version "4.4.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.3.tgz#59964c31e43383499136f13e88b5b6aa6d4fedcd"
+  integrity sha512-MF4RhgcdOZSyhGZqLfD8iypoujqjP4CrWciKdGLHNbNoRqBlpmJTjv+mWrhRxAbDdi283Vf2oqk5TdfXH9BnTw==
 
 "@workday/design-assets-types@0.2.8":
   version "0.2.8"

From 48848b33bfddf561e22e86452ed931618e991cee Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 1 Jul 2026 14:13:00 -0600
Subject: [PATCH 35/40] Updated llm Upgrade Guide

---
 .../llm/upgrade-guides/16.0-UPGRADE-GUIDE.md  | 75 ++++++++++++++++++-
 1 file changed, 73 insertions(+), 2 deletions(-)

diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
index f2ac72bd9c..1cf016c778 100644
--- a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
+++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
@@ -118,6 +118,56 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ## Component Updates
 
+> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme
+> unless specified otherwise.
+
+### Color Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+
+### Color Picker
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- **Sana Canvas:** swatch shape is now **6px** (previously **4px**).
+
+### Form Field
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As
+  in v15, this shape is primarily visible for error and caution states.
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Area
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
 ### Card
 
 **PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014)
@@ -133,10 +183,31 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ### Buttons
 
-#### Delete Button Outline Variant
-
 **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
 
+All buttons have had the following updates:
+
+- `fontWeight` has been updated from `system.fontWeight.bold` to `system.fontWeight.medium`.
+- `minWidth` has been updated to the following:
+
+| Default Size | minWidth v15 | minWidth v16 |
+| ------------ | ------------ | ------------ |
+| extraSmall   | unchanged    | unchanged    |
+| small        | `5rem`       | `4.5rem`     |
+| medium       | `6rem`       | `5.5rem`     |
+| large        | `7rem`       | `6.5rem`     |
+
+- `paddingInline` has been updated to the following:
+
+| Size       | paddingInline v15 | paddingInline v16 |
+| ---------- | ----------------- | ----------------- |
+| extraSmall | `0.75rem`         | `0.5rem`          |
+| small      | `1rem`            | `0.75rem`         |
+| medium     | `1.5rem`          | `1rem`            |
+| large      | `2rem`            | `1.25rem`         |
+
+#### Delete Button Outline Variant
+
 We've added an `outline` variant to the `DeleteButton` component. This variant will reverse the
 button's styling with a `border` and `transparent` background.
 

From c958358a1bf7bdccd0a69502ac3d8f3c977ddbde Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Wed, 1 Jul 2026 18:47:05 -0600
Subject: [PATCH 36/40] chore: Updated DeleteButton

---
 modules/react/button/lib/DeleteButton.tsx | 28 ++++++++++++++---------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index e374cb65ce..d31bb8c375 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/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';
@@ -42,11 +42,14 @@ const deleteButtonStencil = createStencil({
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: colorSpace.hover({
-        color: system.legacy.color.brand.accent.critical,
-        fallback: system.legacy.color.brand.accent.critical,
-        colorType: 'accent',
-      }),
+      [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,
@@ -55,11 +58,14 @@ const deleteButtonStencil = createStencil({
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: colorSpace.pressed({
-        color: system.legacy.color.brand.accent.critical,
-        fallback: system.legacy.color.brand.accent.critical,
-        colorType: 'accent',
-      }),
+      [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,

From 192eb444b1736097bcf943d33593dd28925e9f46 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 2 Jul 2026 09:59:50 -0600
Subject: [PATCH 37/40] chore: Updated llm Upgrade Guide

---
 .../llm/upgrade-guides/16.0-UPGRADE-GUIDE.md  | 139 +++++++++++-------
 1 file changed, 89 insertions(+), 50 deletions(-)

diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
index 1cf016c778..f3818e907f 100644
--- a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
+++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md
@@ -15,9 +15,15 @@ Soon to be...
 - [New Components](#new-components)
   - [KBD](#kbd)
 - [Component Updates](#component-updates)
+  - [Avatar](#avatar)
   - [Buttons](#buttons)
     - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
+  - [Color Input](#color-input)
+  - [Color Picker](#color-picker)
+  - [Form Field](#form-field)
+  - [Text Area](#text-area)
+  - [Text Input](#text-input)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Deprecations](#deprecations)
@@ -118,68 +124,41 @@ functional shortcuts, refer to the storybook documentation and our example stori
 
 ## Component Updates
 
-> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme
-> unless specified otherwise.
+### Avatar
 
-### Color Input
-
-**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
-
-#### Visual Updates
-
-- Shape is now **12px** (previously 8px).
-
-### Color Picker
-
-**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
-
-#### Visual Updates
-
-- **Sana Canvas:** swatch shape is now **6px** (previously **4px**).
+**PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
 
-### Form Field
+We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
+the component API is unchanged except for two new `variant` options.
 
-**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+#### Updated Variants
 
-#### Visual Updates
+Existing variants use darker background colors and updated foreground colors for improved contrast:
 
-- Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As
-  in v15, this shape is primarily visible for error and caution states.
-- Error and caution states no longer display a status background color; only the standard background
-  is shown.
+| Variant  | Change                                                                                       |
+| -------- | -------------------------------------------------------------------------------------------- |
+| `blue`   | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse`      |
+| `amber`  | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
+| `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse`  |
 
-### Text Area
+The `teal` variant is unchanged.
 
-**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+#### New Variants
 
-#### Visual Updates
+Two new color variants are available:
 
-- Shape is now **12px** (previously 8px).
-- Error and caution states no longer display a status background color; only the standard background
-  is shown.
+- `magenta` — `magenta600` background with `system.color.fg.inverse` text
+- `green` — `green600` background with `system.color.fg.inverse` text
 
-### Text Input
-
-**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
-
-#### Visual Updates
-
-- Shape is now **12px** (previously 8px).
-- Error and caution states no longer display a status background color; only the standard background
-  is shown.
-
-### Card
-
-**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014)
+```tsx
+import {Avatar} from '@workday/canvas-kit-react/avatar';
 
-#### Visual Updates
+<Avatar name="Mary Jane" variant="magenta" />
+<Avatar name="Green Arrow" variant="green" />
+```
 
-- `Card.Heading` now defaults to `body.small` type level (previously `body.large`). If your design
-  requires a larger heading, you can override the `typeLevel` prop on `Card.Heading`.
-- The gap between `Card.Heading` and `Card.Body` has been reduced (previously `gap.lg`, now
-  `padding.sm`).
-- Card's border radius is now managed via the new `cornerShapeStencil` (see
-  [New Utilities](#new-utilities)).
+No migration is required unless you rely on the previous color values for custom styling via the
+`cs` prop or `baseAvatarStencil` modifiers.
 
 ### Buttons
 
@@ -217,6 +196,66 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
 <DeleteButton variant="outline">Delete</DeleteButton>;
 ```
 
+### Card
+
+**PR:** [#4014](https://github.com/Workday/canvas-kit/pull/4014)
+
+#### Visual Updates
+
+- `Card.Heading` now defaults to `body.small` type level (previously `body.large`). If your design
+  requires a larger heading, you can override the `typeLevel` prop on `Card.Heading`.
+- The gap between `Card.Heading` and `Card.Body` has been reduced (previously `gap.lg`, now
+  `padding.sm`).
+- Card's border radius is now managed via the new `cornerShapeStencil` (see
+  [New Utilities](#new-utilities)).
+
+### Color Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+
+### Color Picker
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- **Sana Canvas:** swatch shape is now **6px** (previously **4px**).
+
+### Form Field
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape for grouped inputs (Radio groups and Checkbox groups) is now **12px** (previously 8px). As
+  in v15, this shape is primarily visible for error and caution states.
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Area
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
+### Text Input
+
+**PR:** [#3992](https://github.com/Workday/canvas-kit/pull/3992)
+
+#### Visual Updates
+
+- Shape is now **12px** (previously 8px).
+- Error and caution states no longer display a status background color; only the standard background
+  is shown.
+
 ## New Utilities
 
 ### cornerShapeStencil

From a53fffef183909083e0ee8cb283a23b5af48a4dd Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 2 Jul 2026 13:01:37 -0600
Subject: [PATCH 38/40] chore: Updated DeleteButton and colorSpace

---
 modules/react/button/lib/DeleteButton.tsx | 2 +-
 modules/styling/lib/colorSpace.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
index d31bb8c375..df61508194 100644
--- a/modules/react/button/lib/DeleteButton.tsx
+++ b/modules/react/button/lib/DeleteButton.tsx
@@ -103,7 +103,7 @@ const deleteButtonStencil = createStencil({
           [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.color.focus.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'),
         },
diff --git a/modules/styling/lib/colorSpace.tsx b/modules/styling/lib/colorSpace.tsx
index a33118a86e..3277bdd105 100644
--- a/modules/styling/lib/colorSpace.tsx
+++ b/modules/styling/lib/colorSpace.tsx
@@ -145,7 +145,7 @@ const pressed = ({color, fallback, colorType = 'accent'}: InteractiveStateProps)
     color: color,
     fallback: fallback,
     mixinColor: system.legacy.color[colorType].overlay.mixin,
-    mixinValue: system.opacity[colorType].pressed,
+    mixinValue: system.legacy.opacity[colorType].pressed,
   });
 };
 

From 26d62696aced986833cbde05db1c4d7f0a5bfff4 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 2 Jul 2026 13:11:18 -0600
Subject: [PATCH 39/40] chore: Updated colorSpace spec

---
 modules/styling/spec/colorSpace.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/styling/spec/colorSpace.spec.ts b/modules/styling/spec/colorSpace.spec.ts
index 9ea029d247..86cf0aa9a7 100644
--- a/modules/styling/spec/colorSpace.spec.ts
+++ b/modules/styling/spec/colorSpace.spec.ts
@@ -47,7 +47,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.36) * 100%))`
       );
     });
     it('should return color-mix of pressed state using surface tokens', () => {
@@ -58,7 +58,7 @@ describe('CSS color-mix Functions', () => {
       const expected = colorSpace.pressed({color, fallback, colorType});
 
       expect(expected).toBe(
-        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0) * 100%))`
+        `color-mix(in srgb, var(${color}, var(${fallback})) , var(--cnvs-sys-color-${colorType}-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-${colorType}-pressed, 0.18) * 100%))`
       );
     });
   });

From a463e241b381a9d8214c29eaf6d03b7cefa7a20a Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Thu, 2 Jul 2026 13:58:34 -0600
Subject: [PATCH 40/40] chore: Minor tweaks to SecondaryButton and
 TertiaryButton

---
 modules/react/button/lib/SecondaryButton.tsx | 4 ++--
 modules/react/button/lib/TertiaryButton.tsx  | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/react/button/lib/SecondaryButton.tsx b/modules/react/button/lib/SecondaryButton.tsx
index 5842b10f43..0e21a42a9d 100644
--- a/modules/react/button/lib/SecondaryButton.tsx
+++ b/modules/react/button/lib/SecondaryButton.tsx
@@ -61,7 +61,7 @@ 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
@@ -72,7 +72,7 @@ const secondaryButtonStencil = createStencil({
         },
         // 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,
diff --git a/modules/react/button/lib/TertiaryButton.tsx b/modules/react/button/lib/TertiaryButton.tsx
index d99935d53c..af4404a919 100644
--- a/modules/react/button/lib/TertiaryButton.tsx
+++ b/modules/react/button/lib/TertiaryButton.tsx
@@ -39,11 +39,13 @@ const tertiaryButtonStencil = createStencil({
     '&:hover, &.hover': {
       [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]: system.legacy.color.surface.overlay.pressed.default,
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
+      [buttonStencil.vars.label]: system.color.fg.stronger,
     },
     // Disabled Styles
     '&:disabled, &.disabled': {