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

package/action-bar/lib/ActionBarList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {system} from '@workday/canvas-tokens-web';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
 
@@ -35,16 +35,16 @@ export const actionBarListStencil = createStencil({
   base: {
     display: 'flex',
     boxShadow: system.depth[1],
-    gap: system.space.x4,
+    gap: forwardFitTokens.system.gap.md,
     background: system.color.bg.default,
     borderBlockStart: `solid 1px ${cssVar(system.color.border.divider)}`,
-    padding: `${cssVar(system.space.x4)} ${cssVar(system.space.x10)} `,
+    padding: `${forwardFitTokens.system.padding.md} ${forwardFitTokens.system.padding.xxl} `,
     position: 'fixed',
     insetBlockEnd: 0,
     insetInlineStart: 0,
     insetInlineEnd: 0,
     '@media (max-width: 767.5px)': {
-      padding: system.space.x4,
+      padding: forwardFitTokens.system.padding.md,
       '> *': {
         flex: 1,
       },

package/button/lib/BaseButton.tsx

@@ -3,10 +3,15 @@ import * as React from 'react';
 import {ButtonLabelIcon} from '../lib/parts/ButtonLabelIcon';
 import {ButtonLabel} from '../lib/parts/ButtonLabel';
 
-import {createComponent, GrowthBehavior, focusRing} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, px2rem, createVars, calc} from '@workday/canvas-kit-styling';
+import {
+  createComponent,
+  GrowthBehavior,
+  focusRing,
+  forwardFitTokens,
+} from '@workday/canvas-kit-react/common';
+import {cssVar, createStencil, px2rem, createVars} from '@workday/canvas-kit-styling';
 import {SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {brand, system, base} from '@workday/canvas-tokens-web';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
@@ -122,9 +127,9 @@ export const buttonStencil = createStencil({
   base: ({background, border, boxShadowInner, boxShadowOuter, label, opacity, borderRadius}) => ({
     // Default Styles
     fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
-    fontSize: '0.875rem',
-    lineHeight: 'normal',
-    letterSpacing: '0.015rem',
+    fontSize: forwardFitTokens.system.fontSize.subtext.lg,
+    lineHeight: system.lineHeight.subtext.large,
+    letterSpacing: system.letterSpacing.subtext.lg,
     fontWeight: system.fontWeight.bold,
     backgroundColor: cssVar(
       buttonColorPropVars.default.background,
@@ -133,7 +138,7 @@ export const buttonStencil = createStencil({
     color: cssVar(buttonColorPropVars.default.label, cssVar(label, system.color.fg.strong)),
     borderWidth: px2rem(1),
     borderStyle: 'solid',
-    gap: system.space.x2,
+    gap: forwardFitTokens.system.gap.sm,
     borderColor: cssVar(buttonColorPropVars.default.border, cssVar(border, 'transparent')),
     cursor: 'pointer',
     display: 'inline-flex',
@@ -258,34 +263,34 @@ export const buttonStencil = createStencil({
      */
     size: {
       large: {
-        ...system.type.body.small,
+        ...forwardFitTokens.system.type.body.sm,
         fontWeight: system.fontWeight.bold,
-        height: px2rem(48),
-        paddingInline: system.space.x8,
-        minWidth: px2rem(112),
+        height: forwardFitTokens.system.size.xl,
+        paddingInline: forwardFitTokens.system.padding.xxl,
+        minWidth: base.size1400,
       },
       medium: {
-        ...system.type.subtext.large,
+        ...forwardFitTokens.system.type.subtext.lg,
         fontWeight: system.fontWeight.bold,
-        minWidth: px2rem(96),
-        paddingInline: system.space.x6,
-        height: system.space.x10,
+        minWidth: base.size1200,
+        paddingInline: forwardFitTokens.system.padding.xl,
+        height: forwardFitTokens.system.size.lg,
       },
       small: {
-        ...system.type.subtext.large,
+        ...forwardFitTokens.system.type.subtext.lg,
         fontWeight: system.fontWeight.bold,
-        height: system.space.x8,
-        minWidth: system.space.x20,
-        paddingInline: system.space.x4,
-        gap: system.space.x1,
+        height: forwardFitTokens.system.size.md,
+        minWidth: base.size1000,
+        paddingInline: forwardFitTokens.system.padding.md,
+        gap: forwardFitTokens.system.gap.xs,
       },
       extraSmall: {
-        ...system.type.subtext.medium,
+        ...forwardFitTokens.system.type.subtext.md,
         fontWeight: system.fontWeight.bold,
-        height: system.space.x6,
+        height: forwardFitTokens.system.size.sm,
         minWidth: 'auto',
-        paddingInline: system.space.x3,
-        gap: system.space.x1,
+        paddingInline: forwardFitTokens.system.padding.sm,
+        gap: forwardFitTokens.system.gap.xs,
       },
     },
     grow: {
@@ -296,7 +301,7 @@ export const buttonStencil = createStencil({
     },
     // IconPosition Styles
     iconPosition: {
-      only: {padding: system.space.zero},
+      only: {padding: forwardFitTokens.system.padding.none},
       start: {},
       end: {},
     },
@@ -306,81 +311,81 @@ export const buttonStencil = createStencil({
     {
       modifiers: {size: 'large', iconPosition: 'only'},
       styles: {
-        minWidth: calc.multiply(system.space.x4, 3),
+        minWidth: base.size600,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x6,
-        paddingInlineEnd: system.space.x8,
+        paddingInlineStart: forwardFitTokens.system.padding.xl,
+        paddingInlineEnd: forwardFitTokens.system.padding.xxl,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x8,
-        paddingInlineEnd: system.space.x6,
+        paddingInlineStart: forwardFitTokens.system.padding.xxl,
+        paddingInlineEnd: forwardFitTokens.system.padding.xl,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x10,
+        minWidth: forwardFitTokens.system.size.lg,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: calc.multiply(system.space.x1, 5),
-        paddingInlineEnd: system.space.x6,
+        paddingInlineStart: forwardFitTokens.system.padding.lg,
+        paddingInlineEnd: forwardFitTokens.system.padding.xl,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x6,
-        paddingInlineEnd: calc.multiply(system.space.x1, 5),
+        paddingInlineStart: forwardFitTokens.system.padding.xl,
+        paddingInlineEnd: forwardFitTokens.system.padding.lg,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x8,
+        minWidth: forwardFitTokens.system.size.md,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x4,
+        paddingInlineStart: forwardFitTokens.system.padding.sm,
+        paddingInlineEnd: forwardFitTokens.system.padding.md,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x4,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: forwardFitTokens.system.padding.md,
+        paddingInlineEnd: forwardFitTokens.system.padding.sm,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x6,
+        minWidth: forwardFitTokens.system.size.sm,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: forwardFitTokens.system.padding.xs,
+        paddingInlineEnd: forwardFitTokens.system.padding.sm,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: forwardFitTokens.system.padding.sm,
+        paddingInlineEnd: forwardFitTokens.system.padding.xs,
       },
     },
   ],

package/button/lib/DeleteButton.tsx

@@ -1,5 +1,5 @@
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
@@ -17,7 +17,7 @@ const deleteButtonStencil = createStencil({
   base: {
     // Base Styles
     [buttonStencil.vars.background]: brand.error.base,
-    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.label]: brand.error.accent,
     [systemIconStencil.vars.color]: cssVar(buttonColorPropVars.default.icon, brand.error.accent),
     // Focus Styles

package/button/lib/ExternalHyperlink.tsx

@@ -1,9 +1,8 @@
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {extLinkIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {HyperlinkProps, hyperlinkStencil} from './Hyperlink';
 import {calc, createStencil, px2rem, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export interface ExternalHyperlinkProps extends HyperlinkProps {
   /**
@@ -24,11 +23,11 @@ export const externalHyperlinkStencil = createStencil({
       [systemIconStencil.vars.color]: 'currentColor',
       [systemIconStencil.vars.size]: '1em',
       width: calc.subtract('1em', px2rem(1)),
-      minWidth: calc.subtract(system.space.x4, px2rem(1)),
-      marginInlineStart: calc.subtract(system.space.x1, px2rem(2)),
+      minWidth: calc.subtract(forwardFitTokens.system.size.xxs, px2rem(1)),
+      marginInlineStart: calc.subtract(forwardFitTokens.system.gap.xs, px2rem(2)),
       '& > svg': {
-        minWidth: system.space.x4,
-        minHeight: system.space.x4,
+        minWidth: forwardFitTokens.system.size.xxs,
+        minHeight: forwardFitTokens.system.size.xxs,
       },
       ':dir(rtl)': {
         transform: 'rotate(270deg)',

package/button/lib/Hyperlink.tsx

@@ -24,7 +24,7 @@ export const hyperlinkStencil = createStencil({
     textDecoration: 'underline',
     color: system.color.text.primary.default,
     cursor: 'pointer',
-    borderRadius: system.shape.half,
+    borderRadius: px2rem(2),
     padding: `0 ${px2rem(2)} `,
     margin: '0 -2px',
     transition: 'color 0.15s,background-color 0.15s',

package/button/lib/PrimaryButton.tsx

@@ -1,4 +1,4 @@
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, forwardFitTokens} 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';
@@ -22,7 +22,7 @@ const primaryButtonStencil = createStencil({
   base: {
     // Base Styles
     [buttonStencil.vars.background]: cssVar(brand.action.base, brand.primary.base),
-    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.label]: cssVar(brand.action.accent, brand.primary.accent),
     [systemIconStencil.vars.color]: 'currentColor',
     // Focus Styles

package/button/lib/SecondaryButton.tsx

@@ -1,5 +1,5 @@
 import {buttonStencil} from './BaseButton';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
@@ -22,7 +22,7 @@ const secondaryButtonStencil = createStencil({
   base: {
     // Base Styles
     [buttonStencil.vars.background]: system.color.bg.transparent.default,
-    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.border]: system.color.border.input.default,
     [buttonStencil.vars.label]: system.color.fg.strong,
     [systemIconStencil.vars.color]: 'currentColor',

package/button/lib/TertiaryButton.tsx

@@ -1,6 +1,6 @@
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
-import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
-import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {createComponent, focusRing, forwardFitTokens} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system, brand} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
@@ -21,10 +21,10 @@ const tertiaryButtonStencil = createStencil({
   extends: buttonStencil,
   // Base Styles
   base: {
-    paddingInline: system.space.x2,
+    paddingInline: forwardFitTokens.system.padding.xs,
     minWidth: 'auto',
     borderWidth: px2rem(2),
-    [buttonStencil.vars.borderRadius]: system.shape.round,
+    [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.full,
     [buttonStencil.vars.background]: system.color.bg.transparent.default,
     [buttonStencil.vars.label]: brand.primary.base,
     [systemIconStencil.vars.color]: 'currentColor',
@@ -66,7 +66,7 @@ const tertiaryButtonStencil = createStencil({
     // IconPosition Styles
     iconPosition: {
       only: {
-        padding: 0,
+        padding: forwardFitTokens.system.padding.none,
         [systemIconStencil.vars.color]: system.color.fg.default,
         [systemIconStencil.vars.color]: cssVar(
           buttonColorPropVars.default.icon,
@@ -143,81 +143,81 @@ const tertiaryButtonStencil = createStencil({
     {
       modifiers: {size: 'large', iconPosition: 'only'},
       styles: {
-        minWidth: calc.multiply(system.space.x4, 3),
+        minWidth: forwardFitTokens.system.size.xl,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: forwardFitTokens.system.padding.xs,
+        paddingInlineEnd: forwardFitTokens.system.padding.sm,
       },
     },
     {
       modifiers: {size: 'large', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: forwardFitTokens.system.padding.sm,
+        paddingInlineEnd: forwardFitTokens.system.padding.xs,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x10,
+        minWidth: forwardFitTokens.system.size.lg,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: forwardFitTokens.system.padding.xs,
+        paddingInlineEnd: forwardFitTokens.system.padding.sm,
       },
     },
     {
       modifiers: {size: 'medium', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: forwardFitTokens.system.padding.sm,
+        paddingInlineEnd: forwardFitTokens.system.padding.xs,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x8,
+        minWidth: forwardFitTokens.system.size.md,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x3,
+        paddingInlineStart: forwardFitTokens.system.padding.xs,
+        paddingInlineEnd: forwardFitTokens.system.padding.sm,
       },
     },
     {
       modifiers: {size: 'small', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x3,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: forwardFitTokens.system.padding.sm,
+        paddingInlineEnd: forwardFitTokens.system.padding.xs,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'only'},
       styles: {
-        minWidth: system.space.x6,
+        minWidth: forwardFitTokens.system.size.sm,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'start'},
       styles: {
-        paddingInlineStart: system.space.x1,
-        paddingInlineEnd: system.space.x2,
+        paddingInlineStart: forwardFitTokens.system.padding.xxs,
+        paddingInlineEnd: forwardFitTokens.system.padding.xs,
       },
     },
     {
       modifiers: {size: 'extraSmall', iconPosition: 'end'},
       styles: {
-        paddingInlineStart: system.space.x2,
-        paddingInlineEnd: system.space.x1,
+        paddingInlineStart: forwardFitTokens.system.padding.xs,
+        paddingInlineEnd: forwardFitTokens.system.padding.xxs,
       },
     },
   ],

package/button/lib/ToolbarDropdownButton.tsx

@@ -1,7 +1,7 @@
 import {brand, system} from '@workday/canvas-tokens-web';
 import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {focusRing, createComponent} from '@workday/canvas-kit-react/common';
+import {focusRing, createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 import {BaseButton, buttonStencil} from './BaseButton';
@@ -17,10 +17,10 @@ export const toolbarDropdownButtonStencil = createStencil({
     customIcon: 'toolbar-dropdown-btn-custom-icon',
   },
   base: ({chevronPart, customIconPart}) => ({
-    padding: system.space.zero,
-    minWidth: system.space.x8,
-    gap: system.space.zero,
-    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    padding: forwardFitTokens.system.padding.none,
+    minWidth: forwardFitTokens.system.size.md,
+    gap: forwardFitTokens.system.gap.none,
+    [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.xs,
     [systemIconStencil.vars.color]: system.color.fg.muted.soft,
 
     '&:focus-visible, &.focus': {
@@ -50,7 +50,7 @@ export const toolbarDropdownButtonStencil = createStencil({
     },
 
     [customIconPart]: {
-      marginInlineStart: system.space.x1,
+      marginInlineStart: forwardFitTokens.system.gap.xs,
       marginInlineEnd: calc.negate(px2rem(2)),
     },
 

package/button/lib/ToolbarIconButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {focusRing, createComponent} from '@workday/canvas-kit-react/common';
+import {focusRing, createComponent, forwardFitTokens} from '@workday/canvas-kit-react/common';
 import {BaseButton, buttonStencil} from './BaseButton';
 import {TertiaryButtonProps} from './TertiaryButton';
 import {brand, system} from '@workday/canvas-tokens-web';
@@ -16,10 +16,10 @@ export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size'
 export const toolbarIconButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
-    minWidth: system.space.x8,
-    padding: system.space.zero,
-    height: system.space.x8,
-    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    minWidth: forwardFitTokens.system.size.md,
+    padding: forwardFitTokens.system.padding.none,
+    height: forwardFitTokens.system.size.md,
+    [buttonStencil.vars.borderRadius]: forwardFitTokens.system.shape.xs,
     [systemIconStencil.vars.color]: system.color.fg.muted.soft,
 
     '&:focus-visible, &.focus': {

package/common/lib/forwardFitTokens.ts

@@ -1,5 +1,5 @@
 import {cssVar} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {system, base} from '@workday/canvas-tokens-web';
 
 /**
  * This file is NOT INTENDED to be used by consumers, only internally by Canvas Kit.
@@ -7,8 +7,66 @@ import {system} from '@workday/canvas-tokens-web';
 export const forwardFitTokens = {
   system: {
     shape: {
-      //TODO: in v4 Tokens and v15, we should replace this forward fit token with the actual token value
-      sm: cssVar('--cnvs-sys-shape-sm', system.shape.x1Half),
+      xs: cssVar(system.shape.xs, system.shape.x1),
+      sm: cssVar(system.shape.sm, system.shape.x1Half),
+      full: cssVar(system.shape.full, system.shape.round),
+    },
+    size: {
+      xxs: cssVar(system.size.xxs, system.space.x4),
+      sm: cssVar(system.size.sm, system.space.x6),
+      md: cssVar(system.size.md, system.space.x8),
+      lg: cssVar(system.size.lg, system.space.x10),
+      xl: cssVar(system.size.xl, '3rem'),
+    },
+    padding: {
+      none: cssVar(system.padding.none, system.space.zero),
+      xxs: cssVar(system.padding.xxs, system.space.x1),
+      xs: cssVar(system.padding.xs, system.space.x2),
+      sm: cssVar(system.padding.sm, system.space.x3),
+      md: cssVar(system.padding.md, system.space.x4),
+      lg: cssVar(system.padding.lg, '1.25rem'),
+      xl: cssVar(system.padding.xl, system.space.x6),
+      xxl: cssVar(system.padding.xxl, system.space.x8),
+    },
+    fontSize: {
+      subtext: {
+        lg: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+        md: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
+        sm: cssVar(system.fontSize.subtext.sm, system.fontSize.subtext.small),
+      },
+    },
+    gap: {
+      none: cssVar(system.gap.none, system.space.zero),
+      xs: cssVar(system.gap.xs, system.space.x1),
+      sm: cssVar(system.gap.sm, system.space.x2),
+      md: cssVar(system.gap.md, system.space.x4),
+    },
+    type: {
+      subtext: {
+        lg: {
+          fontFamily: cssVar(system.fontFamily.default, system.fontFamily.default),
+          fontWeight: cssVar(system.fontWeight.normal, system.fontWeight.normal),
+          lineHeight: cssVar(system.lineHeight.subtext.lg, system.lineHeight.subtext.large),
+          fontSize: cssVar(system.fontSize.subtext.lg, system.fontSize.subtext.large),
+          letterSpacing: cssVar(system.letterSpacing.subtext.lg, base.letterSpacing50),
+        },
+        md: {
+          fontFamily: cssVar(system.fontFamily.default, system.fontFamily.default),
+          fontWeight: cssVar(system.fontWeight.normal, system.fontWeight.normal),
+          lineHeight: cssVar(system.lineHeight.subtext.md, system.lineHeight.subtext.medium),
+          fontSize: cssVar(system.fontSize.subtext.md, system.fontSize.subtext.medium),
+          letterSpacing: cssVar(system.letterSpacing.subtext.md, base.letterSpacing100),
+        },
+      },
+      body: {
+        sm: {
+          fontFamily: system.fontFamily.default,
+          fontWeight: system.fontWeight.normal,
+          lineHeight: cssVar(system.lineHeight.body.sm, system.lineHeight.body.small),
+          fontSize: cssVar(system.fontSize.body.sm, system.fontSize.body.small),
+          letterSpacing: cssVar(system.letterSpacing.body.sm, base.letterSpacing200),
+        },
+      },
     },
   },
 } as const;

package/dist/commonjs/action-bar/lib/ActionBarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAmB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWxB,CAAC"}
+{"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,YAAY,EAAmB,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAMnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1D;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,iJAmB/B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWxB,CAAC"}

package/dist/commonjs/action-bar/lib/ActionBarList.js

@@ -9,8 +9,8 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
 const useActionBarModel_1 = require("./useActionBarModel");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3tnfh5", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-space-x4);background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-space-x4);> *{flex:1;}}" }
-}, "action-bar-list-887890");
+    base: { name: "xl287", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-1);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4));background:var(--cnvs-sys-color-bg-default);border-block-start:solid 1px var(--cnvs-sys-color-border-divider);padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4)) var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8)) ;position:fixed;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;@media (max-width: 767.5px){padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4));> *{flex:1;}}" }
+}, "action-bar-list-0c9a57");
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = (0, common_1.createSubcomponent)('div')({
     displayName: 'ActionBar.List',