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

package/action-bar/lib/ActionBarList.tsx

@@ -3,7 +3,7 @@ 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, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {useActionBarModel} from './useActionBarModel';
@@ -35,20 +35,15 @@ export const actionBarListStencil = createStencil({
   base: {
     display: 'flex',
     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),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    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)} `,
+    gap: system.legacy.gap.md,
+    background: system.legacy.color.surface.default,
+    borderBlockStart: `solid ${px2rem(1)}  ${system.legacy.color.border.default}`,
+    padding: `${system.legacy.padding.md} ${base.legacy.size500} `,
     position: 'fixed',
     insetBlockEnd: 0,
     insetInline: 0,
     '@media (max-width: 767.5px)': {
-      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-      padding: cssVar(system.size.xxxs, system.space.x4),
+      padding: system.legacy.size.xxxs,
       '> *': {
         flex: 1,
       },

package/avatar/lib/BaseAvatar.tsx

@@ -47,19 +47,14 @@ export const baseAvatarStencil = createStencil({
     size: '',
   },
   base: ({backgroundColor, color, size}) => ({
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderRadius: cssVar(system.shape.full, system.shape.round),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+    borderRadius: system.legacy.shape.full,
     // These are the fallbacks if "size" is not defined
-    width: cssVar(size, cssVar(system.size.lg, px2rem(48))),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    height: cssVar(size, cssVar(system.size.lg, px2rem(48))),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    minWidth: cssVar(size, cssVar(system.size.lg, px2rem(48))),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    minHeight: cssVar(size, cssVar(system.size.lg, px2rem(48))),
-    backgroundColor: cssVar(backgroundColor, base.blue300),
-    color: cssVar(color, base.blue800),
+    width: cssVar(size, system.legacy.size.lg),
+    height: cssVar(size, system.legacy.size.lg),
+    minWidth: cssVar(size, system.legacy.size.lg),
+    minHeight: cssVar(size, system.legacy.size.lg),
+    backgroundColor: cssVar(backgroundColor, base.legacy.blue300),
+    color: cssVar(color, base.legacy.blue800),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -67,95 +62,70 @@ export const baseAvatarStencil = createStencil({
     border: 'none',
     fontFamily: system.fontFamily.default,
     fontWeight: system.fontWeight.normal,
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    lineHeight: cssVar(system.lineHeight.body.md, system.lineHeight.body.medium),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    fontSize: cssVar(system.fontSize.body.md, system.fontSize.body.medium),
+    lineHeight: system.legacy.lineHeight.body.md,
+    fontSize: system.legacy.fontSize.body.md,
   }),
   modifiers: {
     variant: {
       blue: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.blue300),
-        color: cssVar(color, base.blue800),
+        backgroundColor: cssVar(backgroundColor, base.legacy.blue300),
+        color: cssVar(color, base.legacy.blue800),
       }),
       amber: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.amber200),
-        color: cssVar(color, base.amber700),
+        backgroundColor: cssVar(backgroundColor, base.legacy.amber200),
+        color: cssVar(color, base.legacy.amber700),
       }),
 
       teal: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.teal300),
-        color: cssVar(color, base.teal800),
+        backgroundColor: cssVar(backgroundColor, base.legacy.teal300),
+        color: cssVar(color, base.legacy.teal800),
       }),
       purple: ({backgroundColor, color}) => ({
-        backgroundColor: cssVar(backgroundColor, base.purple300),
-        color: cssVar(color, base.purple800),
+        backgroundColor: cssVar(backgroundColor, base.legacy.purple300),
+        color: cssVar(color, base.legacy.purple800),
       }),
     },
     size: {
       extraExtraSmall: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        [size]: cssVar(system.size.xs, system.space.x6),
-        lineHeight: cssVar(system.lineHeight.subtext.sm, system.lineHeight.subtext.small),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        fontSize: cssVar(system.fontSize.subtext.sm, system.fontSize.subtext.small),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        letterSpacing: cssVar(system.letterSpacing.subtext.sm, base.letterSpacing50),
+        [size]: system.legacy.size.xs,
+        lineHeight: system.legacy.lineHeight.subtext.sm,
+        fontSize: system.legacy.fontSize.subtext.sm,
+        letterSpacing: system.legacy.letterSpacing.subtext.sm,
       }),
       extraSmall: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        [size]: cssVar(system.size.sm, system.space.x8),
-        // 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
-        fontSize: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        letterSpacing: cssVar(system.letterSpacing.subtext.md, base.letterSpacing100),
+        [size]: system.legacy.size.sm,
+        lineHeight: system.legacy.lineHeight.subtext.md,
+        fontSize: system.legacy.fontSize.subtext.md,
+        letterSpacing: system.legacy.letterSpacing.subtext.md,
       }),
       small: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        [size]: cssVar(system.size.md, system.space.x10),
-        // 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
-        fontSize: cssVar(system.fontSize.body.sm, system.fontSize.body.small),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        letterSpacing: cssVar(system.letterSpacing.body.sm, base.letterSpacing200),
+        [size]: system.legacy.size.md,
+        lineHeight: system.legacy.lineHeight.body.sm,
+        fontSize: system.legacy.fontSize.body.sm,
+        letterSpacing: system.legacy.letterSpacing.body.sm,
       }),
       medium: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        [size]: cssVar(base.size600, px2rem(48)),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        lineHeight: cssVar(system.lineHeight.body.md, system.lineHeight.body.medium),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        fontSize: cssVar(system.fontSize.body.md, system.fontSize.body.medium),
+        [size]: cssVar(base.legacy.size600, px2rem(48)),
+        lineHeight: system.legacy.lineHeight.body.md,
+        fontSize: system.legacy.fontSize.body.md,
       }),
       large: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        [size]: cssVar(base.size900, px2rem(72)),
+        [size]: cssVar(base.legacy.size900, px2rem(72)),
         fontWeight: system.fontWeight.bold,
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        lineHeight: cssVar(system.lineHeight.heading.md, system.lineHeight.subtext.medium),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        fontSize: cssVar(system.fontSize.heading.md, system.fontSize.subtext.medium),
+        lineHeight: system.legacy.lineHeight.heading.md,
+        fontSize: system.legacy.fontSize.heading.md,
       }),
       extraLarge: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        [size]: cssVar(base.size1200, px2rem(96)),
+        [size]: cssVar(base.legacy.size1200, px2rem(96)),
         fontWeight: system.fontWeight.bold,
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        lineHeight: cssVar(system.lineHeight.title.sm, system.lineHeight.title.small),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        fontSize: cssVar(system.fontSize.title.sm, system.fontSize.title.small),
+        lineHeight: system.legacy.lineHeight.title.sm,
+        fontSize: system.legacy.fontSize.title.sm,
       }),
       extraExtraLarge: ({size}) => ({
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
         [size]: px2rem(120),
         fontWeight: system.fontWeight.bold,
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        lineHeight: cssVar(system.lineHeight.title.md, system.lineHeight.title.medium),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        fontSize: cssVar(system.fontSize.title.md, system.fontSize.title.medium),
+        lineHeight: system.legacy.lineHeight.title.md,
+        fontSize: system.legacy.fontSize.title.md,
       }),
     },
   },

package/badge/lib/CountBadge.tsx

@@ -1,13 +1,6 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {
-  CSProps,
-  createStencil,
-  cssVar,
-  handleCsProp,
-  keyframes,
-  px2rem,
-} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {CSProps, createStencil, handleCsProp, keyframes, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const grow = keyframes({
   from: {
@@ -49,43 +42,33 @@ const countBadgeStencil = createStencil({
   base: {
     alignItems: 'center',
     animation: `${grow} 0.2s ease`,
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderRadius: cssVar(system.shape.full, system.shape.round),
+    borderRadius: system.legacy.shape.full,
     display: 'inline-flex',
     fontFamily: system.fontFamily.default,
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    fontSize: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
+    fontSize: system.legacy.fontSize.subtext.md,
     fontWeight: system.fontWeight.bold,
     height: px2rem(20),
     justifyContent: 'center',
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    lineHeight: cssVar(system.lineHeight.subtext.lg, px2rem(20)),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    letterSpacing: cssVar(system.letterSpacing.subtext.md, base.letterSpacing100),
-    minWidth: cssVar(system.size.xxs, px2rem(20)),
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.md,
+    minWidth: system.legacy.size.xxs,
     padding: `0 ${px2rem(6.5)}`,
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    background: cssVar(system.color.accent.danger, system.color.fg.critical.default),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    color: cssVar(system.color.fg.inverse, system.color.text.inverse),
+    background: system.legacy.color.accent.danger,
+    color: system.color.fg.inverse,
   },
   modifiers: {
     variant: {
       // .cnvs-count-badge--variant-inverse
       inverse: {
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        background: cssVar(system.color.surface.inverse, system.color.bg.default),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        color: cssVar(system.color.fg.info.strong, system.color.text.primary.default),
+        background: system.legacy.color.surface.inverse,
+        color: system.legacy.color.fg.info.strong,
       },
     },
     emphasis: {
       high: {},
       low: {
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        background: cssVar(system.color.surface.info.strong, system.color.bg.info.softer),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        color: cssVar(system.color.fg.info.strong, system.color.fg.info.stronger),
+        background: system.legacy.color.surface.info.strong,
+        color: system.legacy.color.fg.info.strong,
       },
     },
   },
@@ -93,11 +76,7 @@ const countBadgeStencil = createStencil({
     {
       modifiers: {variant: 'inverse', emphasis: 'low'},
       styles: {
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        background: cssVar(
-          system.color.surface.overlay.hover.inverse,
-          system.color.bg.transparent.strong
-        ),
+        background: system.legacy.color.surface.overlay.hover.inverse,
         color: system.color.fg.inverse,
       },
     },

package/banner/lib/Banner.tsx

@@ -4,7 +4,7 @@ import {ExtractProps, createContainer, focusRing} from '@workday/canvas-kit-reac
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {colorSpace, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {BannerActionText} from './BannerActionText';
 import {BannerIcon} from './BannerIcon';
@@ -23,90 +23,59 @@ export const bannerStencil = createStencil({
     // TODO: Need to update fontFamily token [#3221](https://github.com/Workday/canvas-kit/issues/3221).
     fontFamily: `${system.fontFamily.default}, Helvetica Neue, Helvetica, Arial, sans-serif`,
     fontWeight: system.fontWeight.medium,
-    // 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
-    fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.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
-    padding: `${cssVar(system.padding.xs, system.space.x2)} ${cssVar(system.padding.md, system.space.x4)}`,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.md}`,
     border: '0',
     display: 'flex',
     alignItems: 'center',
     textAlign: 'left',
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderStartStartRadius: cssVar(system.shape.sm, system.shape.x1),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderStartEndRadius: cssVar(system.shape.sm, system.shape.x1),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderEndStartRadius: cssVar(system.shape.sm, system.shape.x1),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    borderEndEndRadius: cssVar(system.shape.sm, system.shape.x1),
+    borderStartStartRadius: system.legacy.shape.sm,
+    borderStartEndRadius: system.legacy.shape.sm,
+    borderEndStartRadius: system.legacy.shape.sm,
+    borderEndEndRadius: system.legacy.shape.sm,
+    gap: system.legacy.gap.sm,
     cursor: 'pointer',
-    transition: 'background-color 120ms',
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    outline: `${cssVar(system.gap.xs, system.space.x1)} solid transparent`,
+    transition: 'background-color 120ms linear',
+    outline: `${system.legacy.gap.xs} solid transparent`,
     '&:focus-visible, &.focus': {
-      // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-      outline: `${cssVar(system.gap.xs, system.shape.x1)} double transparent`,
+      outline: `${system.legacy.gap.xs} double transparent`,
       ...focusRing({separation: 2}),
     },
   },
   modifiers: {
     hasErrors: {
       true: {
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        backgroundColor: cssVar(system.color.brand.accent.critical, brand.error.base),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        color: cssVar(system.color.fg.inverse, brand.error.accent),
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        backgroundColor: system.legacy.color.brand.accent.critical,
+        color: system.color.fg.inverse,
         '&:hover, &.hover': {
           background: colorSpace.darken({
-            color: system.color.brand.accent.critical,
-            fallback: brand.error.dark,
-            mixinColor: system.color.surface.overlay.mixin,
-            mixinValue: system.opacity.surface.hover,
+            color: system.legacy.color.brand.accent.critical,
+            mixinColor: system.legacy.color.accent.overlay.mixin,
+            mixinValue: system.legacy.opacity.accent.hover,
           }),
         },
         '& [data-part="exclamation-circle-icon"]': {
-          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-          [systemIconStencil.vars.accentColor]: cssVar(
-            system.color.brand.accent.critical,
-            'currentColor'
-          ),
-          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-          [systemIconStencil.vars.color]: cssVar(system.color.fg.inverse, 'currentColor'),
-          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-          [systemIconStencil.vars.backgroundColor]: cssVar(system.color.fg.inverse, 'none'),
+          [systemIconStencil.vars.accentColor]: system.legacy.color.brand.accent.critical,
+          [systemIconStencil.vars.color]: system.color.fg.inverse,
+          [systemIconStencil.vars.backgroundColor]: system.color.fg.inverse,
         },
       },
       false: {
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-        backgroundColor: cssVar(system.color.brand.accent.caution, brand.alert.base),
-        color: brand.alert.accent,
-        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
+        backgroundColor: system.legacy.color.brand.accent.caution,
+        color: system.color.fg.contrast.default,
         '&:hover, &.hover': {
           background: colorSpace.darken({
-            color: system.color.brand.accent.caution,
-            fallback: brand.alert.dark,
-            mixinColor: system.color.surface.overlay.mixin,
-            mixinValue: system.opacity.surface.hover,
+            color: system.legacy.color.brand.accent.caution,
+            mixinColor: system.legacy.color.accent.overlay.mixin,
+            mixinValue: system.legacy.opacity.accent.hover,
           }),
         },
         '& [data-part="exclamation-triangle-icon"]': {
-          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
           [systemIconStencil.vars.accentColor]: cssVar(system.color.fg.inverse, 'currentColor'),
-          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-          [systemIconStencil.vars.color]: cssVar(
-            system.color.brand.fg.caution.strong,
-            'currentColor'
-          ),
-          // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-          [systemIconStencil.vars.backgroundColor]: cssVar(
-            system.color.brand.fg.caution.strong,
-            'none'
-          ),
+          [systemIconStencil.vars.color]: system.legacy.color.brand.fg.caution.strong,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.brand.fg.caution.strong,
         },
       },
     },

package/banner/lib/BannerIcon.tsx

@@ -2,7 +2,6 @@ import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
 
 import {useBannerIcon, useBannerModel} from './hooks';
 
@@ -15,7 +14,7 @@ export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, ne
 
 export const bannerIconStencil = createStencil({
   base: {
-    marginInlineEnd: system.space.x3,
+    marginInlineEnd: 0,
   },
 });
 

package/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx

@@ -11,8 +11,8 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {Text, TextProps} from '@workday/canvas-kit-react/text';
 import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
@@ -26,17 +26,12 @@ export const breadcrumbsCurrentItemStencil = createStencil({
     maxWidth: '',
   },
   base: ({maxWidth}) => ({
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
     fontFamily: system.fontFamily.default,
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+    fontSize: system.legacy.fontSize.subtext.lg,
     fontWeight: system.fontWeight.medium,
-    // 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
-    lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    color: cssVar(system.color.fg.default, system.color.text.default),
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    color: system.color.fg.default,
     display: 'inline-block',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -7,7 +7,7 @@ import {
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {createStencil} from '@workday/canvas-kit-styling';
 import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 import {component, system} from '@workday/canvas-tokens-web';
 
@@ -39,15 +39,11 @@ export const breadcrumbsItemStencil = createStencil({
     alignItems: 'center',
     display: 'inline-flex',
     whiteSpace: 'nowrap',
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.md, system.space.x5),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    [systemIconStencil.vars.color]: cssVar(system.color.fg.default, system.color.icon.default),
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+    [systemIconStencil.vars.color]: system.color.fg.default,
     [chevronRightIconPart]: {
-      // 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
-      width: cssVar(system.size.sm, system.space.x8),
+      height: system.legacy.size.sm,
+      width: system.legacy.size.sm,
       justifyContent: 'center',
       alignItems: 'center',
       display: 'inline-flex',

package/breadcrumbs/lib/BreadcrumbsLink.tsx

@@ -1,8 +1,8 @@
 import {Hyperlink, HyperlinkProps} from '@workday/canvas-kit-react/button';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {base, system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface BreadcrumbsLinkProps extends HyperlinkProps {
   /**
@@ -24,13 +24,10 @@ export const breadcrumbsLinkStencil = createStencil({
   },
   base: ({maxWidth}) => ({
     fontFamily: system.fontFamily.default,
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+    fontSize: system.legacy.fontSize.subtext.lg,
     fontWeight: system.fontWeight.normal,
-    // 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
-    lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',

package/breadcrumbs/lib/BreadcrumbsList.tsx

@@ -3,7 +3,7 @@ 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} from '@workday/canvas-kit-react/layout';
-import {createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
@@ -25,13 +25,11 @@ export interface BreadcrumbsListProps<T = any>
 
 export const breadcrumbsListStencil = createStencil({
   base: {
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    padding: `${cssVar(system.padding.xs, system.space.x2)} 0`,
+    padding: `${system.legacy.padding.xs} 0`,
     margin: 0,
     display: 'inline-flex',
     alignItems: 'center',
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    minHeight: cssVar(system.size.lg, px2rem(48)),
+    minHeight: system.legacy.size.lg,
     listStyle: 'none',
     width: '100%',
   },

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -9,7 +9,7 @@ import {
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {FlexProps} from '@workday/canvas-kit-react/layout';
 import {useMenuTarget} from '@workday/canvas-kit-react/menu';
-import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {chevronRightSmallIcon, relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {component, system} from '@workday/canvas-tokens-web';
 
@@ -33,15 +33,11 @@ export const breadcrumbsOverflowButtonStencil = createStencil({
   base: ({chevronRightIconPart}) => ({
     alignItems: 'center',
     display: 'flex',
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    [systemIconStencil.vars.color]: cssVar(system.color.fg.default, system.color.icon.default),
-    // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token
-    [systemIconStencil.vars.size]: cssVar(component.systemIcon.size.md, system.space.x5),
+    [systemIconStencil.vars.color]: system.color.fg.default,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
     [chevronRightIconPart]: {
-      // 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
-      width: cssVar(system.size.sm, system.space.x8),
+      height: system.legacy.size.sm,
+      width: system.legacy.size.sm,
       justifyContent: 'center',
       alignItems: 'center',
       display: 'inline-flex',