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

package/menu/lib/MenuItem.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
 
-import {CSProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
-
 import {
-  createSubcomponent,
+  isCursor,
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+import {
   composeHooks,
+  createComponent,
   createElemPropsHook,
+  createSubcomponent,
   useLocalRef,
-  createComponent,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {
-  isCursor,
-  useListItemRegister,
-  useListItemRovingFocus,
-  useListItemSelect,
-} from '@workday/canvas-kit-react/collection';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
 
@@ -60,20 +59,25 @@ export const menuItemStencil = createStencil({
     selected: 'menu-item-selected',
   },
   base: ({textPart, iconPart, selectedPart}) => ({
-    ...system.type.subtext.large,
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    gap: system.space.x4,
-    padding: `${system.space.x2} ${system.space.x4}`,
+    gap: system.legacy.gap.md,
+    padding: `${system.legacy.padding.sm} ${system.legacy.padding.md}`,
     boxSizing: 'border-box',
     cursor: 'pointer',
     color: system.color.fg.default,
     borderWidth: 0,
+    borderRadius: system.legacy.shape.xxl,
     textAlign: 'start',
     transition: 'background-color 80ms, color 80ms',
     backgroundColor: 'inherit',
-    minHeight: system.space.x10,
+    minHeight: system.legacy.size.md,
     overflowWrap: 'anywhere',
     // We want the icon colors to be the same as the text color
     [systemIconStencil.vars.color]: 'currentColor',
@@ -91,45 +95,46 @@ export const menuItemStencil = createStencil({
 
     // Selected styles
     '&[aria-selected=true]': {
-      color: brand.primary.dark,
-      backgroundColor: brand.primary.lightest,
+      color: system.legacy.color.brand.fg.primary.strong,
+      backgroundColor: system.legacy.color.brand.surface.primary.strong,
 
       [`& :where(${selectedPart})`]: {
         opacity: system.opacity.full,
       },
       '&:where(.focus, :focus-visible)': {
-        [systemIconStencil.vars.color]: brand.primary.accent,
+        [systemIconStencil.vars.color]: 'currentColor',
         outline: 'none',
-        backgroundColor: brand.primary.base,
-        color: systemIconStencil.vars.color,
+        backgroundColor: system.legacy.color.brand.accent.primary,
+        color: system.color.fg.inverse,
       },
     },
 
     // Hover styles
     '&:is(.hover, :hover)': {
       color: system.color.fg.strong,
-      backgroundColor: brand.neutral.lightest,
+      backgroundColor: system.legacy.color.surface.overlay.hover.default,
     },
 
     // Focus styles
     '&:is(.focus, :focus-visible)': {
-      color: brand.primary.accent,
-      backgroundColor: brand.primary.base,
+      color: system.color.fg.inverse,
+      backgroundColor: system.legacy.color.brand.accent.primary,
       outline: `${px2rem(2)} solid transparent`,
       outlineOffset: `-${px2rem(2)}`,
     },
 
     // Disabled styles
     '&:is(:disabled, [aria-disabled=true])': {
-      color: system.color.fg.disabled,
       cursor: 'default',
+      opacity: system.opacity.disabled,
 
       '&:where(.hover, :hover, [aria-selected=true])': {
         background: 'none',
       },
       // Focus + Disabled
       '&:where(.focus, :focus-visible)': {
-        backgroundColor: brand.primary.light,
+        backgroundColor: system.legacy.color.brand.accent.primary,
+        opacity: system.opacity.disabled,
       },
     },
 
@@ -149,8 +154,8 @@ const MenuItemIcon = (elemProps: SystemIconProps) => {
 };
 
 const MenuItemText = createComponent('span')({
-  Component: ({...elemProps}, ref, Element) => {
-    return <Element ref={ref} {...menuItemStencil.parts.text} {...elemProps} />;
+  Component: ({...elemProps}: CSProps, ref, Element) => {
+    return <Element ref={ref} {...menuItemStencil.parts.text} {...handleCsProp(elemProps)} />;
   },
 });
 
@@ -180,28 +185,30 @@ export const useMenuItemArrowReturn = createElemPropsHook(useMenuModel)(model =>
   };
 });
 
-export const useMenuItemFocus = createElemPropsHook(useMenuModel)(
-  (model, ref, elemProps: {'data-id': string} = {'data-id': ''}) => {
-    const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
-    const id = elemProps['data-id'];
-    // focus on the item with the cursor
-    React.useLayoutEffect(() => {
-      if (model.state.mode === 'single') {
-        if (isCursor(model.state, id)) {
-          // delay focus changes to allow PopperJS to position
-          requestAnimationFrame(() => {
-            localRef.current?.focus();
-          });
-        }
+export const useMenuItemFocus = createElemPropsHook(useMenuModel)((
+  model,
+  ref,
+  elemProps: {'data-id': string} = {'data-id': ''}
+) => {
+  const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+  const id = elemProps['data-id'];
+  // focus on the item with the cursor
+  React.useLayoutEffect(() => {
+    if (model.state.mode === 'single') {
+      if (isCursor(model.state, id)) {
+        // delay focus changes to allow PopperJS to position
+        requestAnimationFrame(() => {
+          localRef.current?.focus();
+        });
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id, localRef, model.state.cursorId, model.state.mode]);
-    return {
-      ref: elementRef,
-      className: isCursor(model.state, elemProps['data-id']) ? 'focus' : undefined,
-    };
-  }
-);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, localRef, model.state.cursorId, model.state.mode]);
+  return {
+    ref: elementRef,
+    className: isCursor(model.state, elemProps['data-id']) ? 'focus' : undefined,
+  };
+});
 
 function hideParent(model: ReturnType<typeof useMenuModel>) {
   if (model.UNSTABLE_parentModel) {

package/menu/lib/MenuList.tsx

@@ -1,15 +1,15 @@
+import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
 import {
-  createSubcomponent,
-  createElemPropsHook,
   ExtractProps,
   composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {ListBox, ListProps} from '@workday/canvas-kit-react/collection';
-import {useReturnFocus, useFocusRedirect} from '@workday/canvas-kit-react/popup';
+import {useFocusRedirect, useReturnFocus} from '@workday/canvas-kit-react/popup';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useMenuModel} from './useMenuModel';
-import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface MenuListProps<T = any>
   extends Omit<ExtractProps<typeof ListBox, never>, 'children'> {
@@ -33,10 +33,10 @@ export const useMenuList = composeHooks(
 
 export const menuListStencil = createStencil({
   base: {
-    background: system.color.bg.default,
-    borderRadius: system.shape.zero,
-    padding: system.space.zero,
-    gap: system.space.zero,
+    background: system.legacy.color.surface.popover,
+    borderRadius: system.legacy.shape.xxl,
+    padding: 0,
+    gap: system.legacy.gap.xs,
   },
   modifiers: {
     orientation: {
@@ -59,7 +59,7 @@ export const MenuList = createSubcomponent('div')({
     <ListBox
       as={Element}
       model={model}
-      marginY={cssVar(system.space.x2)}
+      marginY={system.legacy.gap.none}
       {...handleCsProp(elemProps, menuListStencil({orientation: model.state.orientation}))}
     >
       {children}

package/menu/lib/MenuOption.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
 
-import {checkSmallIcon} from '@workday/canvas-system-icons-web';
-
 import {
-  createSubcomponent,
+  isSelected,
+  useListItemActiveDescendant,
+  useListItemRegister,
+} from '@workday/canvas-kit-react/collection';
+import {
   composeHooks,
-  createElemPropsHook,
   createComponent,
+  createElemPropsHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {
-  isSelected,
-  useListItemActiveDescendant,
-  useListItemRegister,
-} from '@workday/canvas-kit-react/collection';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 
+import {MenuItem, MenuItemProps, menuItemStencil} from './MenuItem';
 import {useMenuModel} from './useMenuModel';
-import {menuItemStencil, MenuItem, MenuItemProps} from './MenuItem';
 
 const MenuOptionText = createComponent('span')({
   Component: ({...elemProps}, ref, Element) => {

package/menu/lib/MenuPopper.tsx

@@ -1,5 +1,5 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {usePopupPopper, Popper} from '@workday/canvas-kit-react/popup';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Popper, usePopupPopper} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';
 

package/menu/lib/MenuTarget.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   composeHooks,
-  createSubcomponent,
   createElemPropsHook,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {usePopupTarget, usePopupTargetContext} from '@workday/canvas-kit-react/popup';
 
 import {useMenuModel} from './useMenuModel';

package/menu/lib/Submenu.tsx

@@ -1,27 +1,26 @@
 import React from 'react';
 
-import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
-
+import {useListItemRegister, useListItemRovingFocus} from '@workday/canvas-kit-react/collection';
 import {
+  ExtractProps,
+  PropsWithModel,
   composeHooks,
   createElemPropsHook,
   createSubcomponent,
-  ExtractProps,
-  PropsWithModel,
   subModelHook,
   useForkRef,
 } from '@workday/canvas-kit-react/common';
+import {Popper} from '@workday/canvas-kit-react/popup';
+import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 
-import {useMenuModel} from './useMenuModel';
-import {defaultMenuPopperOptions, useMenuPopper} from './MenuPopper';
-import {MenuItem, StyledMenuItem, useMenuItemArrowReturn, useMenuItemFocus} from './MenuItem';
 import {MenuCard} from './MenuCard';
-import {MenuList} from './MenuList';
 import {MenuDivider} from './MenuDivider';
-import {MenuOption} from './MenuOption';
 import {MenuGroup} from './MenuGroup';
-import {useListItemRegister, useListItemRovingFocus} from '@workday/canvas-kit-react/collection';
-import {Popper} from '@workday/canvas-kit-react/popup';
+import {MenuItem, StyledMenuItem, useMenuItemArrowReturn, useMenuItemFocus} from './MenuItem';
+import {MenuList} from './MenuList';
+import {MenuOption} from './MenuOption';
+import {defaultMenuPopperOptions, useMenuPopper} from './MenuPopper';
+import {useMenuModel} from './useMenuModel';
 
 type MenuModelConfig = (typeof useMenuModel)['TConfig'];
 

package/menu/lib/useMenuModel.tsx

@@ -1,14 +1,14 @@
+import {
+  multiSelectionManager,
+  singleSelectionManager,
+  useListModel,
+} from '@workday/canvas-kit-react/collection';
 import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
   useAlwaysCloseOnOutsideClick,
   useCloseOnEscape,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {
-  multiSelectionManager,
-  singleSelectionManager,
-  useListModel,
-} from '@workday/canvas-kit-react/collection';
 
 export const useMenuModel = createModelHook({
   defaultConfig: {

package/modal/lib/Modal.tsx

@@ -1,12 +1,13 @@
-import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {ModalOverlay} from './ModalOverlay';
+
+import {ModalBody} from './ModalBody';
 import {ModalCard} from './ModalCard';
-import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
 import {ModalOverflowOverlay} from './ModalOverflowOverlay';
-import {ModalBody} from './ModalBody';
+import {ModalOverlay} from './ModalOverlay';
+import {useModalModel} from './hooks';
 
 /**
  * This component is the container component and does not render any semantic elements. It provides

package/modal/lib/ModalBody.tsx

@@ -1,17 +1,17 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-
-import {useModalModel} from './hooks';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+import {useModalModel} from './hooks';
 
 export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
 
 export const modalBodyStencil = createStencil({
   base: {
     '@media screen and (max-width: 768px)': {
-      padding: `${system.space.x1} ${system.space.x2} ${system.space.x2}`,
+      padding: `${system.legacy.padding.xxs} ${system.legacy.padding.xs} ${system.legacy.padding.xs}`,
     },
   },
 });

package/modal/lib/ModalCard.tsx

@@ -1,25 +1,25 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {useModalCard, useModalModel} from './hooks';
-import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
 export const modalCardStencil = createStencil({
   base: {
-    margin: system.space.x10,
-    width: calc.add(calc.multiply(system.space.x20, 5), system.space.x10),
-    borderWidth: system.space.zero,
+    margin: base.legacy.size500,
+    width: px2rem(440),
+    border: '0',
     outline: `${px2rem(1)} solid transparent`,
-    boxShadow: system.depth[6],
+    boxShadow: system.depth[5],
+    borderRadius: system.legacy.shape.xxxl,
     '@media screen and (max-width: 768px)': {
-      gap: system.space.zero,
-      margin: system.space.x4, // 16px all around margin on smaller screen sizes
-      padding: system.space.x4, // brings total padding between edge and content to 24px
-      borderRadius: system.space.x6, // 24px border radius on smaller devices.
+      gap: 0,
+      margin: system.legacy.gap.md, // 16px all around margin on smaller screen sizes
+      padding: system.legacy.gap.md, // brings total padding between edge and content to 24px
     },
   },
 });

package/modal/lib/ModalHeading.tsx

@@ -1,17 +1,17 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
-
-import {useModalHeading, useModalModel} from './hooks';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
+
+import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
 export const modalHeadingStencil = createStencil({
   base: {
     '@media screen and (max-width: 768px)': {
-      padding: `${system.space.x2} ${system.space.x2} ${system.space.x1}`,
+      padding: `${system.legacy.padding.xs} ${system.legacy.padding.xs} ${system.legacy.padding.xxs}`,
     },
   },
 });

package/modal/lib/ModalOverflowOverlay.tsx

@@ -1,9 +1,9 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
 
 import {ModalOverlay} from './ModalOverlay';
 import {useModalModel} from './hooks';
-import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export const modalOverflowOverlayStencil = createStencil({
   base: {

package/modal/lib/ModalOverlay.tsx

@@ -1,17 +1,18 @@
 import ReactDOM from 'react-dom';
 
 import {
-  createSubcomponent,
   createElemPropsHook,
-  useWindowSize,
+  createSubcomponent,
   useForkRef,
+  useWindowSize,
 } from '@workday/canvas-kit-react/common';
-import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
 import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {useModalModel} from './hooks';
-import {createStencil, cssVar, keyframes} from '@workday/canvas-kit-styling';
+import {usePopupModel, usePopupStack} from '@workday/canvas-kit-react/popup';
+import {createStencil, keyframes} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+import {useModalModel} from './hooks';
+
 export interface ModalOverlayProps extends BoxProps {}
 
 const fadeIn = keyframes({
@@ -19,7 +20,7 @@ const fadeIn = keyframes({
     background: 'none',
   },
   '100%': {
-    background: cssVar(system.color.bg.overlay),
+    background: system.legacy.color.surface.overlay.scrim,
   },
 });
 
@@ -29,11 +30,11 @@ export const modalOverlayContainerStencil = createStencil({
   },
   base: ({containerCenter}) => ({
     position: 'fixed',
-    top: system.space.zero,
-    left: system.space.zero,
+    top: 0,
+    left: 0,
     width: '100vw',
     height: '100vh',
-    background: system.color.bg.overlay,
+    background: system.legacy.color.surface.overlay.scrim,
     animationDuration: '0.3s',
     animationName: fadeIn,
     // Allow overriding of animation in special cases
@@ -45,8 +46,8 @@ export const modalOverlayContainerStencil = createStencil({
       maxHeight: '100%',
       display: 'flex',
       position: 'absolute',
-      left: system.space.zero,
-      top: system.space.zero,
+      left: 0,
+      top: 0,
       justifyContent: 'center',
       alignItems: 'center',
       height: '100%',

package/modal/lib/hooks/useModalHeading.ts

@@ -14,7 +14,7 @@ export const useModalHeading = composeHooks(
     const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
 
     useMountLayout(() => {
-      if (localRef.current?.parentElement?.querySelector('button')?.textContent) {
+      if (localRef.current?.parentElement?.querySelector('button')?.textContent?.trim()) {
         // First button is not a close icon button, set tabindex on the heading to capture initial focus
         localRef.current.setAttribute('tabindex', '0');
       }

package/modal/lib/hooks/useModalModel.ts

@@ -1,13 +1,13 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
 import {
-  usePopupModel,
-  useInitialFocus,
-  useReturnFocus,
-  useCloseOnEscape,
-  useFocusTrap,
   useAssistiveHideSiblings,
+  useCloseOnEscape,
   useDisableBodyScroll,
+  useFocusTrap,
+  useInitialFocus,
+  usePopupModel,
+  useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {createModelHook} from '@workday/canvas-kit-react/common';
 
 import {useCloseOnOverlayClick} from './useCloseOnOverlayClick';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.1303-next.0",
+  "version": "15.0.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,7 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/workday/canvas-kit.git",
+    "url": "https://github.com/Workday/canvas-kit.git",
     "directory": "modules/react"
   },
   "files": [
@@ -52,12 +52,13 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.1303-next.0",
-    "@workday/canvas-system-icons-web": "^3.0.36",
-    "@workday/canvas-tokens-web": "^3.1.1",
-    "@workday/design-assets-types": "^0.2.10",
+    "@workday/canvas-expressive-icons-web": "1.0.1",
+    "@workday/canvas-kit-popup-stack": "^15.0.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0",
+    "@workday/canvas-kit-styling": "^15.0.0",
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-tokens-web": "4.3.0",
+    "@workday/design-assets-types": "^0.3.0",
     "chroma-js": "^2.2.0",
     "csstype": "^3.0.2",
     "react-innertext": "^1.1.5",
@@ -69,5 +70,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "4dc1e2083d2767fd402c2d014bedd8b35a014490"
+  "gitHead": "d7401bd7648fa6dbe66fdf3400e05770b77b030b"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
+
 import {accessibleHide, createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil} from '@workday/canvas-kit-styling';
 import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-import {PaginationModel} from './types';
 import {useLiveRegion} from './common/useLiveRegion';
+import {PaginationModel} from './types';
 import {PaginationContext} from './usePaginationModel';
 
 export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
@@ -17,15 +18,21 @@ export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
 export const paginationAdditionalDetailsStencil = createStencil({
   base: {
     display: 'flex',
-    ...system.type.subtext.medium,
-    color: system.color.text.hint,
-    marginBlockStart: system.space.x3,
+    // ...system.legacy.type.subtext.md,
+    // components do not support spreading for legacy type token
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    fontSize: system.legacy.fontSize.subtext.md,
+    lineHeight: system.legacy.lineHeight.subtext.md,
+    letterSpacing: system.legacy.letterSpacing.subtext.md,
+    color: system.color.fg.muted.default,
+    marginBlockStart: px2rem(12),
   },
   modifiers: {
     shouldHideDetails: {
       true: {
         ...accessibleHide,
-        marginBlockStart: system.space.zero,
+        marginBlockStart: '0',
       },
     },
   },