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

package/action-bar/lib/ActionBarList.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import {useListRenderItems, useOverflowListMeasure} from '@workday/canvas-kit-react/collection';
 import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useActionBarModel} from './useActionBarModel';
 
@@ -34,19 +34,21 @@ export interface ActionBarListProps<T = any>
 export const actionBarListStencil = createStencil({
   base: {
     display: 'flex',
-    boxShadow: system.depth[1],
+    boxShadow: system.depth[2],
     // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
     gap: cssVar(system.gap.md, system.space.x4),
-    background: system.color.bg.default,
     // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderBlockStart: `solid 1px ${cssVar(system.color.border.default, system.color.border.divider)}`,
-    padding: `${cssVar(system.space.x4)} ${cssVar(system.space.x10)} `,
+    background: cssVar(system.color.surface.default, system.color.bg.default),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    borderBlockStart: `solid ${px2rem(1)}  ${cssVar(system.color.border.default, system.color.border.divider)}`,
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    padding: `${cssVar(system.padding.md, system.space.x4)} ${cssVar(base.size500, system.space.x10)} `,
     position: 'fixed',
     insetBlockEnd: 0,
-    insetInlineStart: 0,
-    insetInlineEnd: 0,
+    insetInline: 0,
     '@media (max-width: 767.5px)': {
-      padding: system.space.x4,
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      padding: cssVar(system.size.xxxs, system.space.x4),
       '> *': {
         flex: 1,
       },

package/button/lib/BaseButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import {GrowthBehavior, createComponent, focusRing} from '@workday/canvas-kit-react/common';
+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 {calc, createStencil, createVars, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {createStencil, createVars, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 
 import {ButtonLabel} from '../lib/parts/ButtonLabel';
@@ -122,9 +122,12 @@ export const buttonStencil = createStencil({
   base: ({background, border, boxShadowInner, boxShadowOuter, label, opacity, borderRadius}) => ({
     // Default Styles
     fontFamily: system.fontFamily.default,
-    fontSize: '0.875rem',
-    lineHeight: 'normal',
-    letterSpacing: '0.015rem',
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    letterSpacing: cssVar(system.letterSpacing.subtext.lg, base.letterSpacing150),
     fontWeight: system.fontWeight.bold,
     backgroundColor: cssVar(
       buttonColorPropVars.default.background,
@@ -141,7 +144,6 @@ export const buttonStencil = createStencil({
     boxShadow: 'none',
     alignItems: 'center',
     justifyContent: 'center',
-    boxSizing: 'border-box',
     outline: `${px2rem(2)} transparent`,
     whiteSpace: 'nowrap',
     WebkitFontSmoothing: 'antialiased',
@@ -178,18 +180,13 @@ export const buttonStencil = createStencil({
       ),
       outline: `${px2rem(2)} solid transparent`,
       outlineOffset: px2rem(2),
-      ...focusRing({
-        width: 2,
-        separation: 2,
-        innerColor: cssVar(
-          buttonColorPropVars.focus.boxShadowInner,
-          cssVar(boxShadowInner, system.color.border.inverse.default)
-        ),
-        outerColor: cssVar(
-          buttonColorPropVars.focus.boxShadowOuter,
-          cssVar(boxShadowOuter, brand.common.focusOutline)
-        ),
-      }),
+      boxShadow: `0 0 0 ${px2rem(2)} ${cssVar(
+        buttonColorPropVars.focus.boxShadowInner,
+        cssVar(boxShadowInner, cssVar(system.color.border.inverse.default, base.neutral0))
+      )},0 0 0 ${px2rem(4)} ${cssVar(
+        buttonColorPropVars.focus.boxShadowOuter,
+        cssVar(boxShadowOuter, cssVar(system.color.brand.focus.primary, brand.common.focusOutline))
+      )}`,
     },
     // Hover Styles
     '&:hover, &.hover': {
@@ -226,10 +223,7 @@ export const buttonStencil = createStencil({
       ),
       borderColor: cssVar(buttonColorPropVars.disabled.border, cssVar(border, 'transparent')),
       color: cssVar(buttonColorPropVars.disabled.label, cssVar(label, system.color.fg.strong)),
-      [systemIconStencil.vars.color]: cssVar(
-        buttonColorPropVars.disabled.icon,
-        system.color.fg.strong
-      ),
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
     },
     // for Windows high contrast desktop themes
     '@media (prefers-contrast: more)': {
@@ -259,34 +253,63 @@ export const buttonStencil = createStencil({
      */
     size: {
       large: {
-        ...system.type.body.small,
-        fontWeight: system.fontWeight.bold,
-        height: px2rem(48),
-        paddingInline: system.space.x8,
-        minWidth: px2rem(112),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        fontSize: cssVar(system.fontSize.body.sm, system.fontSize.body.small),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        lineHeight: cssVar(system.lineHeight.body.sm, system.lineHeight.body.small),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        letterSpacing: cssVar(system.letterSpacing.body.sm, base.letterSpacing200),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        height: cssVar(system.size.lg, px2rem(48)),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInline: cssVar(system.padding.xxl, system.space.x8),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(base.size1400, px2rem(112)),
       },
       medium: {
-        ...system.type.subtext.large,
-        fontWeight: system.fontWeight.bold,
-        minWidth: px2rem(96),
-        paddingInline: system.space.x6,
-        height: system.space.x10,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        letterSpacing: cssVar(system.letterSpacing.subtext.lg, base.letterSpacing150),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(base.size1200, px2rem(96)),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInline: cssVar(system.padding.xl, system.space.x6),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        height: cssVar(system.size.md, system.space.x10),
       },
       small: {
-        ...system.type.subtext.large,
-        fontWeight: system.fontWeight.bold,
-        height: system.space.x8,
-        minWidth: system.space.x20,
-        paddingInline: system.space.x4,
-        gap: system.space.x1,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        letterSpacing: cssVar(system.letterSpacing.subtext.lg, base.letterSpacing150),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        height: cssVar(system.size.sm, system.space.x8),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(base.size1000, system.space.x20),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInline: cssVar(system.padding.md, system.space.x4),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        gap: cssVar(system.gap.xs, system.space.x1),
       },
       extraSmall: {
-        ...system.type.subtext.medium,
-        fontWeight: system.fontWeight.bold,
-        height: system.space.x6,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        fontSize: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        lineHeight: cssVar(system.lineHeight.subtext.md, system.lineHeight.subtext.medium),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        letterSpacing: cssVar(system.letterSpacing.subtext.md, base.letterSpacing100),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        height: cssVar(system.size.xs, system.space.x6),
         minWidth: 'auto',
-        paddingInline: system.space.x3,
-        gap: system.space.x1,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInline: cssVar(system.padding.sm, system.space.x3),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        gap: cssVar(system.gap.xs, system.space.x1),
       },
     },
     grow: {
@@ -297,7 +320,7 @@ export const buttonStencil = createStencil({
     },
     // IconPosition Styles
     iconPosition: {
-      only: {padding: system.space.zero},
+      only: {padding: 0},
       start: {},
       end: {},
     },
@@ -307,81 +330,101 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'large', iconPosition: 'only'},
       styles: {
-        minWidth: calc.multiply(system.space.x4, 3),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(system.size.lg, px2rem(48)),
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x6,
-        paddingInlineEnd: system.space.x8,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.xl, system.space.x6),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.xxl, system.space.x8),
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x8,
-        paddingInlineEnd: system.space.x6,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.xxl, system.space.x8),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.xl, system.space.x6),
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x10,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(system.size.md, system.space.x10),
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: calc.multiply(system.space.x1, 5),
-        paddingInlineEnd: system.space.x6,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.lg, px2rem(20)),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.xl, system.space.x6),
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x6,
-        paddingInlineEnd: calc.multiply(system.space.x1, 5),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.xl, system.space.x6),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.lg, px2rem(20)),
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x8,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(system.size.sm, system.space.x8),
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x4,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.sm, system.space.x3),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.md, system.space.x4),
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x4,
-        paddingInlineEnd: system.space.x3,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.md, system.space.x4),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.sm, system.space.x3),
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x6,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        minWidth: cssVar(system.size.xs, system.space.x6),
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.xs, system.space.x2),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.sm, system.space.x3),
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineStart: cssVar(system.padding.sm, system.space.x3),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        paddingInlineEnd: cssVar(system.padding.xs, system.space.x2),
       },
     },
   ],

package/button/lib/DeleteButton.tsx

@@ -1,7 +1,7 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {colorSpace, createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, ButtonProps} from './Button';
@@ -17,36 +17,83 @@ const deleteButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
     // Base Styles
-    [buttonStencil.vars.background]: brand.error.base,
-    [buttonStencil.vars.borderRadius]: system.shape.round,
-    [buttonStencil.vars.label]: brand.error.accent,
-    [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.error.accent),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [buttonStencil.vars.background]: cssVar(system.color.brand.accent.critical, brand.error.base),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [buttonStencil.vars.borderRadius]: cssVar(system.shape.full, system.shape.round),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [buttonStencil.vars.label]: cssVar(system.color.fg.inverse, brand.error.accent),
+    [systemIconStencil.vars.color]: cssVar(
+    buttonColorPropVars.default.icon,
+      cssVar(system.color.fg.inverse, brand.error.accent)
+    ),
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: brand.error.base,
-      [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, brand.error.accent),
-      [buttonStencil.vars.boxShadowInner]: system.color.border.inverse.default,
-      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: cssVar(system.color.brand.accent.critical, brand.error.base),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(system.color.fg.inverse, brand.error.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        cssVar(system.color.fg.inverse, brand.error.accent)
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.boxShadowInner]: cssVar(
+        system.color.focus.inverse,
+        cssVar(system.color.border.inverse.default, base.neutral0)
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.boxShadowOuter]: cssVar(
+        system.color.brand.focus.primary,
+        brand.common.focusOutline
+      ),
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: brand.error.dark,
-      [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, brand.error.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: colorSpace.darken(
+        system.color.brand.accent.critical,
+        brand.error.dark,
+        system.color.accent.overlay.mixin,
+        system.opacity.accent.hover
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(system.color.fg.inverse, brand.error.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.hover.icon,
+        cssVar(system.color.fg.inverse, brand.error.accent)
+      ),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: brand.error.darkest,
-      [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, brand.error.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: colorSpace.darken(
+        system.color.brand.accent.critical,
+        brand.error.darkest,
+        system.color.accent.overlay.mixin,
+        system.opacity.accent.pressed
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(system.color.fg.inverse, brand.error.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        cssVar(system.color.fg.inverse, brand.error.accent)
+      ),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: brand.error.base,
-      [buttonStencil.vars.label]: brand.error.accent,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, brand.error.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: cssVar(system.color.brand.accent.critical, brand.error.base),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        cssVar(system.color.fg.inverse, brand.error.accent)
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(system.color.fg.inverse, brand.error.accent),
     },
   },
 });

package/button/lib/PrimaryButton.tsx

@@ -1,7 +1,7 @@
 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 {brand, system} from '@workday/canvas-tokens-web';
+import {colorSpace, createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, type ButtonProps} from './Button';
@@ -22,69 +22,149 @@ const primaryButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
     // Base Styles
-    [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [buttonStencil.vars.background]: cssVar(
+      brand.action.base,
+      cssVar(system.color.brand.accent.primary, brand.primary.base)
+    ),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
     [buttonStencil.vars.borderRadius]: cssVar(system.shape.full, system.shape.round),
-    [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
+    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    [buttonStencil.vars.label]: cssVar(
+      brand.action.accent,
+      cssVar(system.color.fg.inverse, brand.primary.accent)
+    ),
     [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     // Focus Styles
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
-      [buttonStencil.vars.boxShadowInner]: system.color.focus.inverse,
-      [buttonStencil.vars.boxShadowOuter]: brand.common.focusOutline,
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: cssVar(
+        brand.action.base,
+        cssVar(system.color.brand.accent.primary, brand.primary.base)
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(
+        brand.action.accent,
+        cssVar(system.color.fg.inverse, brand.primary.accent)
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.boxShadowInner]: cssVar(
+        system.color.focus.inverse,
+        cssVar(system.color.border.inverse.default, base.neutral0)
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.boxShadowOuter]: cssVar(
+        system.color.brand.focus.primary,
+        brand.common.focusOutline
+      ),
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
     },
     // Hover Styles
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: cssVar(brand.action.dark, brand.primary.dark),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: colorSpace.darken(
+        brand.action.dark,
+        cssVar(system.color.brand.accent.primary, brand.primary.dark),
+        system.color.accent.overlay.mixin,
+        system.opacity.accent.hover
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(
+        brand.action.accent,
+        cssVar(system.color.fg.inverse, brand.primary.accent)
+      ),
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
     },
     // Active Styles
     '&:active, &.active': {
-      [buttonStencil.vars.background]: cssVar(brand.action.darkest, brand.primary.darkest),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.background]: colorSpace.darken(
+        brand.action.darkest,
+        cssVar(system.color.brand.accent.primary, brand.primary.darkest),
+        system.color.accent.overlay.mixin,
+        system.opacity.accent.pressed
+      ),
+      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+      [buttonStencil.vars.label]: cssVar(
+        brand.action.accent,
+        cssVar(system.color.fg.inverse, brand.primary.accent)
+      ),
       [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
     },
     // Disabled Styles
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
-      [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
       [buttonStencil.vars.opacity]: system.opacity.disabled,
-      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
+      [buttonStencil.vars.background]: cssVar(
+        brand.action.base,
+        cssVar(system.color.brand.accent.primary, brand.primary.base)
+      ),
+      [buttonStencil.vars.label]: cssVar(
+        brand.action.accent,
+        cssVar(system.color.fg.inverse, brand.primary.accent)
+      ),
+      [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
     },
   },
   modifiers: {
     variant: {
       // Inverse Styles
       inverse: {
-        [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
-        [buttonStencil.vars.borderRadius]: system.shape.round,
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        [buttonStencil.vars.background]: cssVar(
+          brand.action.lightest,
+          cssVar(system.color.surface.inverse, brand.primary.lightest)
+        ),
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        [buttonStencil.vars.borderRadius]: cssVar(system.shape.full, system.shape.round),
         [buttonStencil.vars.label]: system.color.fg.strong,
         [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, 'currentColor'),
+        // Hover Styles
+        '&:hover, &.hover': {
+          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+          [buttonStencil.vars.background]: colorSpace.darken(
+            brand.action.lighter,
+            cssVar(system.color.surface.inverse, brand.primary.lighter),
+            system.color.accent.overlay.mixin,
+            system.opacity.accent.hover
+          ),
+          [buttonStencil.vars.label]: system.color.fg.stronger,
+          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
+        },
         // Focus Styles
         '&:focus-visible, &.focus': {
-          [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
+          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+          [buttonStencil.vars.background]: cssVar(
+            brand.action.lightest,
+            cssVar(system.color.surface.inverse, brand.primary.lightest)
+          ),
           [buttonStencil.vars.label]: system.color.fg.strong,
           [buttonStencil.vars.boxShadowInner]: system.color.border.contrast.default,
-          [buttonStencil.vars.boxShadowOuter]: system.color.focus.inverse,
+          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+          [buttonStencil.vars.boxShadowOuter]: cssVar(
+            system.color.focus.inverse,
+            cssVar(system.color.border.inverse.default, base.neutral0)
+          ),
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.focus.icon, 'currentColor'),
         },
-        // Hover Styles
-        '&:hover, &.hover': {
-          [buttonStencil.vars.background]: cssVar(brand.action.lighter, brand.primary.lightest),
-          [buttonStencil.vars.label]: system.color.fg.stronger,
-          [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.hover.icon, 'currentColor'),
-        },
         // Active Styles
         '&:active, &.active': {
-          [buttonStencil.vars.background]: cssVar(brand.action.light, brand.primary.light),
+          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+          [buttonStencil.vars.background]: colorSpace.darken(
+            brand.action.light,
+            cssVar(system.color.surface.inverse, brand.primary.light),
+            system.color.accent.overlay.mixin,
+            system.opacity.accent.pressed
+          ),
           [buttonStencil.vars.label]: system.color.fg.stronger,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.active.icon, 'currentColor'),
         },
         // Disabled Styles
         '&:disabled, &.disabled': {
-          [buttonStencil.vars.background]: cssVar(brand.action.lightest, brand.primary.lightest),
+          [buttonStencil.vars.opacity]: system.opacity.disabled,
+          [buttonStencil.vars.background]: cssVar(
+            brand.action.lightest,
+            cssVar(system.color.surface.inverse, brand.primary.lightest)
+          ),
           [buttonStencil.vars.label]: system.color.fg.strong,
           [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.disabled.icon, 'currentColor'),
         },