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

package/avatar/lib/BaseAvatar.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {AvatarImage} from './AvatarImage';
+import {AvatarName} from './AvatarName';
+
+export interface BaseAvatarProps extends CSProps {
+  /**
+   * Children of the BaseAvatar.
+   */
+  children?: React.ReactNode;
+  /**
+   * The variant of the Avatar.
+   * @default "blue"
+   */
+  variant?: 'blue' | 'amber' | 'teal' | 'purple';
+
+  /**
+   * The size of the Avatar.
+   * `extraExtraSmall` is 24px x 24px
+   * `extraSmall` is 32px x 32px
+   * `small` is 40px x 40px
+   * `medium` is 48px x 48px
+   * `large` is 72px x 72px
+   * `extraLarge` is 96px x 96px
+   * `extraExtraLarge` is 120px x 120px
+   * @default "medium"
+   */
+  size?:
+    | 'extraExtraSmall'
+    | 'extraSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extraLarge'
+    | 'extraExtraLarge'
+    | (string & {});
+}
+
+export const baseAvatarStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+    color: '',
+    size: '',
+  },
+  base: ({backgroundColor, color, size}) => ({
+    borderRadius: system.legacy.shape.full,
+    // These are the fallbacks if "size" is not defined
+    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',
+    overflow: 'hidden',
+    border: 'none',
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    lineHeight: system.legacy.lineHeight.body.md,
+    fontSize: system.legacy.fontSize.body.md,
+  }),
+  modifiers: {
+    variant: {
+      blue: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.legacy.blue300),
+        color: cssVar(color, base.legacy.blue800),
+      }),
+      amber: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.legacy.amber200),
+        color: cssVar(color, base.legacy.amber700),
+      }),
+
+      teal: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.legacy.teal300),
+        color: cssVar(color, base.legacy.teal800),
+      }),
+      purple: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.legacy.purple300),
+        color: cssVar(color, base.legacy.purple800),
+      }),
+    },
+    size: {
+      extraExtraSmall: ({size}) => ({
+        [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}) => ({
+        [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}) => ({
+        [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}) => ({
+        [size]: cssVar(base.legacy.size600, px2rem(48)),
+        lineHeight: system.legacy.lineHeight.body.md,
+        fontSize: system.legacy.fontSize.body.md,
+      }),
+      large: ({size}) => ({
+        [size]: cssVar(base.legacy.size900, px2rem(72)),
+        fontWeight: system.fontWeight.bold,
+        lineHeight: system.legacy.lineHeight.heading.md,
+        fontSize: system.legacy.fontSize.heading.md,
+      }),
+      extraLarge: ({size}) => ({
+        [size]: cssVar(base.legacy.size1200, px2rem(96)),
+        fontWeight: system.fontWeight.bold,
+        lineHeight: system.legacy.lineHeight.title.sm,
+        fontSize: system.legacy.fontSize.title.sm,
+      }),
+      extraExtraLarge: ({size}) => ({
+        [size]: px2rem(120),
+        fontWeight: system.fontWeight.bold,
+        lineHeight: system.legacy.lineHeight.title.md,
+        fontSize: system.legacy.fontSize.title.md,
+      }),
+    },
+  },
+});
+
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export const BaseAvatar = createComponent('div')({
+  displayName: 'BaseAvatar',
+  subComponents: {
+    Image: AvatarImage,
+    Name: AvatarName,
+  },
+  Component: ({variant, size, ...elemProps}: BaseAvatarProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, baseAvatarStencil({variant, size}))} />;
+  },
+});

package/avatar/lib/getInitialsFromName.ts

@@ -0,0 +1,11 @@
+export const getInitialsFromName = (name: string) => {
+  // Trim and split by one or more whitespace characters
+  const nameParts = name.trim().split(/\s+/).filter(Boolean);
+
+  const first = nameParts[0];
+  const firstInitial = first?.[0] || '';
+  const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
+  const lastInitial = last?.[0] || '';
+
+  return `${firstInitial}${lastInitial}`;
+};

package/badge/index.ts

@@ -1 +1 @@
-export {CountBadge, CountBadgeProps} from './lib/CountBadge';
+export {CountBadge, type CountBadgeProps} from './lib/CountBadge';

package/badge/lib/CountBadge.tsx

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

package/banner/lib/Banner.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
 
-import {createContainer, ExtractProps, focusRing} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createContainer, focusRing} from '@workday/canvas-kit-react/common';
+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 {system} from '@workday/canvas-tokens-web';
 
-import {useBannerModel} from './hooks';
-
+import {BannerActionText} from './BannerActionText';
 import {BannerIcon} from './BannerIcon';
 import {BannerLabel} from './BannerLabel';
-import {BannerActionText} from './BannerActionText';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {useBannerModel} from './hooks';
 
 export interface BannerProps extends ExtractProps<typeof Flex, never> {
   /**
@@ -21,51 +20,62 @@ export interface BannerProps extends ExtractProps<typeof Flex, never> {
 
 export const bannerStencil = createStencil({
   base: {
-    ...system.type.subtext.large,
     // 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,
-    padding: `${system.space.x2} ${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',
-    borderStartStartRadius: system.shape.x1,
-    borderStartEndRadius: system.shape.x1,
-    borderEndStartRadius: system.shape.x1,
-    borderEndEndRadius: 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',
-    outline: `${system.space.x1} solid transparent`,
+    transition: 'background-color 120ms linear',
+    outline: `${system.legacy.gap.xs} solid transparent`,
     '&:focus-visible, &.focus': {
-      outline: `${system.shape.x1} double transparent`,
+      outline: `${system.legacy.gap.xs} double transparent`,
       ...focusRing({separation: 2}),
     },
   },
   modifiers: {
     hasErrors: {
       true: {
-        backgroundColor: brand.error.base,
-        color: brand.error.accent,
+        backgroundColor: system.legacy.color.brand.accent.critical,
+        color: system.color.fg.inverse,
         '&:hover, &.hover': {
-          background: brand.error.dark,
+          background: colorSpace.darken({
+            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"]': {
-          [systemIconStencil.vars.accentColor]: 'currentColor',
-          [systemIconStencil.vars.color]: 'currentColor',
-          [systemIconStencil.vars.backgroundColor]: '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: {
-        backgroundColor: brand.alert.base,
-        color: brand.alert.accent,
+        backgroundColor: system.legacy.color.brand.accent.caution,
+        color: system.color.fg.contrast.default,
         '&:hover, &.hover': {
-          background: brand.alert.dark,
+          background: colorSpace.darken({
+            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"]': {
-          [systemIconStencil.vars.accentColor]: 'currentColor',
-          [systemIconStencil.vars.color]: 'currentColor',
-          [systemIconStencil.vars.backgroundColor]: 'none',
+          [systemIconStencil.vars.accentColor]: cssVar(system.color.fg.inverse, 'currentColor'),
+          [systemIconStencil.vars.color]: system.legacy.color.brand.fg.caution.strong,
+          [systemIconStencil.vars.backgroundColor]: system.legacy.color.brand.fg.caution.strong,
         },
       },
     },

package/banner/lib/BannerActionText.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 
 import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {Box, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 import {useBannerActionText, useBannerModel} from './hooks';
-import {createStencil} from '@workday/canvas-kit-styling';
 
 export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
   /**

package/banner/lib/BannerIcon.tsx

@@ -1,8 +1,7 @@
 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 {system} from '@workday/canvas-tokens-web';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {CanvasSystemIcon} from '@workday/canvas-system-icons-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/banner/lib/hooks/useBannerActionText.tsx

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useBannerModel} from './useBannerModel';
 
 /**

package/banner/lib/hooks/useBannerIcon.tsx

@@ -1,5 +1,7 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+
 import {useBannerModel} from './useBannerModel';
 
 /**
@@ -7,8 +9,10 @@ import {useBannerModel} from './useBannerModel';
  * Used by the Banner.Icon subcomponent
  */
 export const useBannerIcon = createElemPropsHook(useBannerModel)(({state}) => {
+  const icon = state.hasError ? exclamationCircleIcon : exclamationTriangleIcon;
+
   return {
-    icon: state.hasError ? exclamationCircleIcon : exclamationTriangleIcon,
+    icon: icon as CanvasSystemIcon,
     size: 24,
   };
 });

package/banner/lib/hooks/useBannerLabel.tsx

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useBannerModel} from './useBannerModel';
 
 /**

package/banner/lib/hooks/useThemedPalette.ts

@@ -1,7 +1,7 @@
-import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
-import {colors} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
 
+import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+
 type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
 
 interface BackgroundColors {
@@ -27,6 +27,9 @@ const getPaletteColorsFromTheme = (
   };
 };
 
+/**
+ * @deprecated ⚠️ `getPaletteColors` is deprecated. Use CSS variables from `@workday/canvas-tokens-web` instead. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export const getPaletteColors = (
   type: paletteSelection,
   theme: EmotionCanvasTheme
@@ -35,10 +38,10 @@ export const getPaletteColors = (
 
   switch (type) {
     case 'error': {
-      return getPaletteColorsFromTheme(palette, {contrast: colors.frenchVanilla100});
+      return getPaletteColorsFromTheme(palette, {contrast: '#FFFFFF'});
     }
     case 'alert': {
-      return getPaletteColorsFromTheme(palette, {contrast: colors.blackPepper400});
+      return getPaletteColorsFromTheme(palette, {contrast: '#333333'});
     }
     default: {
       return getPaletteColorsFromTheme(palette);
@@ -46,6 +49,9 @@ export const getPaletteColors = (
   }
 };
 
+/**
+ * @deprecated ⚠️ `useThemedPalette` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+ */
 export const useThemedPalette = (type: paletteSelection) => {
   const theme = useTheme();
 

package/breadcrumbs/lib/Breadcrumbs.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
+
 import {createContainer} from '@workday/canvas-kit-react/common';
 import {Menu} from '@workday/canvas-kit-react/menu';
-import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
-import {BreadcrumbsList} from './BreadcrumbsList';
-import {BreadcrumbsOverflowButton} from './BreadcrumbsOverflowButton';
+import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+
+import {BreadcrumbsCurrentItem} from './BreadcrumbsCurrentItem';
 import {BreadcrumbsItem} from './BreadcrumbsItem';
 import {BreadcrumbsLink} from './BreadcrumbsLink';
-import {BreadcrumbsCurrentItem} from './BreadcrumbsCurrentItem';
+import {BreadcrumbsList} from './BreadcrumbsList';
 import {BreadcrumbsMenu} from './BreadcrumbsMenu';
-import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+import {BreadcrumbsOverflowButton} from './BreadcrumbsOverflowButton';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsProps extends CSProps {
   /**

package/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx

@@ -1,21 +1,23 @@
 import {
-  createElemPropsHook,
-  useLocalRef,
+  useListItemRegister,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+import {
   composeHooks,
+  createElemPropsHook,
   createSubcomponent,
   useForkRef,
+  useLocalRef,
 } from '@workday/canvas-kit-react/common';
-import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {
-  useListItemRegister,
-  useOverflowListItemMeasure,
-} from '@workday/canvas-kit-react/collection';
 import {Text, TextProps} from '@workday/canvas-kit-react/text';
-import {system} from '@workday/canvas-tokens-web';
+import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsCurrentItemProps extends TextProps {
+  maxWidth?: string | number;
   tooltipProps?: OverflowTooltipProps;
 }
 
@@ -24,9 +26,12 @@ export const breadcrumbsCurrentItemStencil = createStencil({
     maxWidth: '',
   },
   base: ({maxWidth}) => ({
-    ...system.type.subtext.large,
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
     fontWeight: system.fontWeight.medium,
-    color: 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',
@@ -36,7 +41,7 @@ export const breadcrumbsCurrentItemStencil = createStencil({
 });
 
 export const useBreadcrumbsItem = composeHooks(
-  createElemPropsHook(useBreadcrumbsModel)((_model: any, ref: any, elemProps) => {
+  createElemPropsHook(useBreadcrumbsModel)((_model: any, ref: any) => {
     const {localRef} = useLocalRef(useForkRef(ref));
     let shouldShowTooltip = false;
     const refCurrent = localRef.current;

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+
 import {
   useListItemRegister,
   useOverflowListItemMeasure,
 } from '@workday/canvas-kit-react/collection';
-import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+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} from '@workday/canvas-kit-styling';
 import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
-import {createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {component, system} from '@workday/canvas-tokens-web';
+
 import {BreadcrumbsLink} from './BreadcrumbsLink';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsItemProps extends FlexProps {
   /**
@@ -38,11 +39,11 @@ export const breadcrumbsItemStencil = createStencil({
     alignItems: 'center',
     display: 'inline-flex',
     whiteSpace: 'nowrap',
-    [systemIconStencil.vars.size]: px2rem(20),
-    [systemIconStencil.vars.color]: system.color.icon.default,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+    [systemIconStencil.vars.color]: system.color.fg.default,
     [chevronRightIconPart]: {
-      height: system.space.x8,
-      width: 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 {createComponent} from '@workday/canvas-kit-react/common';
 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 {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 {
   /**
@@ -14,7 +14,7 @@ export interface BreadcrumbsLinkProps extends HyperlinkProps {
    *
    * @default 350px
    */
-  maxWidth?: number;
+  maxWidth?: string | number;
   tooltipProps?: OverflowTooltipProps | {};
 }
 
@@ -23,7 +23,11 @@ export const breadcrumbsLinkStencil = createStencil({
     maxWidth: '',
   },
   base: ({maxWidth}) => ({
-    ...system.type.subtext.large,
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    fontWeight: system.fontWeight.normal,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',

package/breadcrumbs/lib/BreadcrumbsList.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+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 {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
-import {system} from '@workday/canvas-tokens-web';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
 export interface BreadcrumbsListProps<T = any>
@@ -24,11 +25,11 @@ export interface BreadcrumbsListProps<T = any>
 
 export const breadcrumbsListStencil = createStencil({
   base: {
-    padding: 0,
+    padding: `${system.legacy.padding.xs} 0`,
     margin: 0,
     display: 'inline-flex',
     alignItems: 'center',
-    minHeight: system.space.x10,
+    minHeight: system.legacy.size.lg,
     listStyle: 'none',
     width: '100%',
   },

package/breadcrumbs/lib/BreadcrumbsMenu.tsx

@@ -1,4 +1,4 @@
-import {createContainer, createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createComponent, createContainer} from '@workday/canvas-kit-react/common';
 import {Menu, useMenuModel} from '@workday/canvas-kit-react/menu';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 
@@ -25,7 +25,7 @@ export const breadcrumbsMenuCardStencil = createStencil({
   },
 });
 
-export const BreadcrumbsMenuCard = (elemProps: ExtractProps<typeof Menu.Card, never>) => (
+export const BreadcrumbsMenuCard = (elemProps: ExtractProps<typeof Menu.Card>) => (
   <Menu.Card {...handleCsProp(elemProps, breadcrumbsMenuCardStencil())} />
 );