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

package/text/lib/Text.tsx

@@ -1,10 +1,10 @@
-import {system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
 
 type TypeSize = 'large' | 'medium' | 'small';
-type TokenName = `${keyof typeof system.type}.${TypeSize}`;
+type TokenName = `${keyof typeof system.legacy.type}.${TypeSize}`;
 
 export interface TextProps extends BoxProps {
   /**
@@ -32,61 +32,103 @@ export const textStencil = createStencil({
     typeLevel: {
       // Title level styles
       'title.large': {
-        ...system.type.title.large,
-        color: system.color.text.strong,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.bold,
+        fontSize: system.legacy.fontSize.title.lg,
+        lineHeight: system.legacy.lineHeight.title.lg,
+        color: system.color.fg.strong,
       },
       'title.medium': {
-        ...system.type.title.medium,
-        color: system.color.text.strong,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.bold,
+        fontSize: system.legacy.fontSize.title.md,
+        lineHeight: system.legacy.lineHeight.title.md,
+        color: system.color.fg.strong,
       },
       'title.small': {
-        ...system.type.title.small,
-        color: system.color.text.strong,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.bold,
+        lineHeight: system.legacy.lineHeight.title.sm,
+        fontSize: system.legacy.fontSize.title.sm,
+        color: system.color.fg.strong,
       },
       // Heading level styles
       'heading.large': {
-        ...system.type.heading.large,
-        color: system.color.text.strong,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.bold,
+        fontSize: system.legacy.fontSize.heading.lg,
+        lineHeight: system.legacy.lineHeight.heading.lg,
+        color: system.color.fg.strong,
       },
       'heading.medium': {
-        ...system.type.heading.medium,
-        color: system.color.text.strong,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.bold,
+        fontSize: system.legacy.fontSize.heading.md,
+        lineHeight: system.legacy.lineHeight.heading.md,
+        color: system.color.fg.strong,
       },
       'heading.small': {
-        ...system.type.heading.small,
-        color: system.color.text.strong,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.bold,
+        fontSize: system.legacy.fontSize.heading.sm,
+        lineHeight: system.legacy.lineHeight.heading.sm,
+        color: system.color.fg.strong,
       },
       // Body level styles
       'body.large': {
-        ...system.type.body.large,
-        color: system.color.text.default,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.normal,
+        fontSize: system.legacy.fontSize.body.lg,
+        lineHeight: system.legacy.lineHeight.body.lg,
+        color: system.color.fg.default,
       },
       'body.medium': {
-        ...system.type.body.medium,
-        color: system.color.text.default,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.normal,
+        fontSize: system.legacy.fontSize.body.md,
+        lineHeight: system.legacy.lineHeight.body.md,
+        color: system.color.fg.default,
       },
       'body.small': {
-        ...system.type.body.small,
-        color: system.color.text.default,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.normal,
+        fontSize: system.legacy.fontSize.body.sm,
+        lineHeight: system.legacy.lineHeight.body.sm,
+        letterSpacing: system.legacy.letterSpacing.body.sm,
+        color: system.color.fg.default,
       },
       // Subtext level styles
       'subtext.large': {
-        ...system.type.subtext.large,
-        color: system.color.text.default,
+        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,
+        color: system.color.fg.default,
       },
       'subtext.medium': {
-        ...system.type.subtext.medium,
-        color: system.color.text.default,
+        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.default,
       },
       'subtext.small': {
-        ...system.type.subtext.small,
-        color: system.color.text.default,
+        fontFamily: system.fontFamily.default,
+        fontWeight: system.fontWeight.normal,
+        fontSize: system.legacy.fontSize.subtext.sm,
+        lineHeight: system.legacy.lineHeight.subtext.sm,
+        letterSpacing: system.legacy.letterSpacing.subtext.sm,
+        color: system.color.fg.default,
       },
     },
     variant: {
-      error: {color: system.color.text.critical.default},
-      hint: {color: system.color.text.hint},
-      inverse: {color: system.color.text.inverse},
+      error: {
+        color: system.legacy.color.brand.fg.critical.default,
+      },
+      hint: {color: system.color.fg.muted.default},
+      inverse: {color: system.color.fg.inverse},
     },
   },
 });

package/text/lib/TypeLevelComponents.tsx

@@ -1,8 +1,9 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {TextProps, textStencil} from './Text';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
 
+import {TextProps, textStencil} from './Text';
+
 type Size = 'large' | 'medium' | 'small';
 
 /**
@@ -90,7 +91,7 @@ export const BodyText = createComponent('p')({
   },
 });
 
-const headingStencil = createStencil({
+export const headingStencil = createStencil({
   extends: textStencil,
   base: {},
 });

package/text-area/lib/TextArea.tsx

@@ -1,7 +1,8 @@
-import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common';
-import {createStencil, calc, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common';
 import {textInputStencil} from '@workday/canvas-kit-react/text-input';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 export type ValueOf<T> = T[keyof T];
 
 export interface TextAreaProps extends GrowthBehavior {
@@ -26,8 +27,8 @@ export const TextAreaResizeDirection = {
 export const textAreaStencil = createStencil({
   extends: textInputStencil,
   base: {
-    minHeight: system.space.x16,
-    minWidth: calc.add(calc.multiply(system.space.x20, 3), system.space.x10),
+    minHeight: system.legacy.size.xxl,
+    minWidth: px2rem(280),
     '&::webkit-resizer': {
       display: 'none',
     },

package/text-input/lib/InputGroup.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
 
-import {createStencil, handleCsProp, wrapProperty} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {
+  ExtractProps,
   createContainer,
   createElemPropsHook,
   createModelHook,
   createSubcomponent,
   dispatchInputEvent,
-  ExtractProps,
   useForkRef,
 } from '@workday/canvas-kit-react/common';
-
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {xSmallIcon} from '@workday/canvas-system-icons-web';
+import {createStencil, handleCsProp, wrapProperty} from '@workday/canvas-kit-styling';
+import {CanvasSystemIcon, xSmallIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {TextInput} from './TextInput';
 
@@ -41,8 +40,8 @@ export const inputGroupInnerStencil = createStencil({
      * on your own.
      */
     insetInlineEnd: 'initial',
-    width: system.space.x10,
-    height: system.space.x10,
+    width: system.legacy.size.md,
+    height: system.legacy.size.md,
     /**
      * Some inner input group elements are decoration only and should not have pointer events
      */
@@ -162,7 +161,7 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
     role: 'presentation',
     // A clear input button doesn't need focus. There's already keyboard keys to clear an input
     tabIndex: -1,
-    icon: xSmallIcon,
+    icon: xSmallIcon as CanvasSystemIcon,
     // "small" is needed to render correctly within a `TextInput`
     size: 'small',
     // prevent a focus change to the button. Focus should stay in the input.
@@ -279,11 +278,11 @@ export const InputGroup = createContainer('div')({
   // `offsetEnd` arrays
   React.Children.forEach(children, child => {
     if (React.isValidElement<any>(child) && child.type === InputGroupInnerStart) {
-      const width = wrapProperty(child.props.width || system.space.x10);
+      const width = wrapProperty(child.props.width || system.legacy.size.md);
       offsetsStart.push(width);
     }
     if (React.isValidElement<any>(child) && child.type === InputGroupInnerEnd) {
-      const width = wrapProperty(child.props.width || system.space.x10);
+      const width = wrapProperty(child.props.width || system.legacy.size.md);
       offsetsEnd.push(width);
     }
   });

package/text-input/lib/TextInput.tsx

@@ -1,12 +1,7 @@
-import {
-  createComponent,
-  GrowthBehavior,
-  ErrorType,
-  forwardFitTokens,
-} from '@workday/canvas-kit-react/common';
-import {createStencil, cssVar, px2rem, calc, CSProps} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+import {ErrorType, GrowthBehavior, createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {CSProps, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface TextInputProps extends GrowthBehavior, CSProps {
   /**
@@ -24,42 +19,42 @@ export const textInputStencil = createStencil({
     width: '',
   },
   base: ({width}) => ({
-    ...system.type.subtext.large,
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    fontWeight: system.fontWeight.normal,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
     display: 'block',
-    border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
-    backgroundColor: system.color.bg.default,
-    //TODO: Replace string with new token in v15/v4
-    borderRadius: forwardFitTokens.system.shape.sm,
-    boxSizing: 'border-box',
-    height: system.space.x10,
+    border: `${px2rem(1)} solid ${system.color.border.input.default}`,
+    backgroundColor: system.legacy.color.surface.default,
+    borderRadius: system.legacy.shape.md,
+    height: system.legacy.size.md,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: system.space.x2, // Compensate for border
-    margin: px2rem(0), // Fix Safari
+    padding: system.legacy.padding.xs, // Compensate for border
+    margin: 0, // Fix Safari
     width,
-    minWidth: cssVar(width, calc.add(calc.multiply(system.space.x20, 3), system.space.x10)),
-    color: system.color.text.default,
+    minWidth: cssVar(width, px2rem(280)),
+    color: system.color.fg.default,
     textOverflow: 'ellipsis', // Always show ellipsis for long text inputs as long as it doesn't have focus
 
     '::-ms-clear': {
       display: 'none',
     },
     '&::placeholder': {
-      color: system.color.text.hint,
+      color: system.color.fg.muted.default,
     },
-    '&:is(:hover, .hover)': {
-      borderColor: system.color.border.input.strong,
+    '&:is(:hover, .hover):where(:not([disabled], .disabled))': {
+      borderColor: system.legacy.color.border.input.hover,
     },
     '&:is(:focus-visible, .focus):where(:not([disabled]))': {
-      borderColor: brand.common.focusOutline,
-      boxShadow: `inset 0 0 0 1px ${cssVar(brand.common.focusOutline)}`,
+      borderColor: system.legacy.color.brand.focus.primary,
+      boxShadow: `inset 0 0 0 1px ${system.legacy.color.brand.focus.primary}`,
       outline: `${px2rem(2)} solid transparent`,
     },
     '&:is(:disabled, .disabled)': {
-      backgroundColor: system.color.bg.alt.softer,
-      borderColor: system.color.border.input.disabled,
-      color: system.color.fg.disabled,
+      opacity: system.opacity.disabled,
       '&::placeholder': {
-        color: system.color.fg.disabled,
+        opacity: system.opacity.disabled,
       },
     },
   }),
@@ -76,30 +71,33 @@ export const textInputStencil = createStencil({
 
     error: {
       error: {
-        borderColor: brand.common.errorInner,
-        borderWidth: px2rem(2),
-        backgroundColor: brand.error.lightest,
+        borderColor: system.legacy.color.brand.border.critical,
+        // borderWidth: px2rem(2),
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
+        backgroundColor: system.legacy.color.brand.surface.critical.default,
         '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
-            borderColor: brand.common.errorInner,
+            borderColor: system.legacy.color.brand.border.critical,
           },
         '&:is(:focus-visible, .focus):not([disabled])': {
-          boxShadow: `0 0 0 2px ${system.color.border.inverse}, 0 0 0 4px ${brand.common.focusOutline}`,
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical},
+        0 0 0 2px ${system.legacy.color.focus.inverse},
+        0 0 0 4px ${system.legacy.color.brand.border.primary}`,
           outlineOffset: px2rem(2),
         },
       },
       caution: {
-        borderColor: brand.common.alertOuter,
-        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner}`,
-        backgroundColor: brand.alert.lightest,
+        borderColor: system.legacy.color.brand.border.caution,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner}`,
+        backgroundColor: system.legacy.color.brand.surface.caution.default,
         '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
           {
-            borderColor: brand.common.alertOuter,
+            borderColor: system.legacy.color.brand.border.caution,
           },
         '&:is(:focus-visible, .focus):not([disabled])': {
-          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner},
-        0 0 0 2px ${system.color.border.inverse},
-        0 0 0 4px ${brand.common.focusOutline}`,
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.focus.caution.inner},
+        0 0 0 2px ${system.legacy.color.focus.inverse},
+        0 0 0 4px ${system.legacy.color.brand.border.primary}`,
         },
         outlineOffset: px2rem(2),
       },

package/toast/lib/Toast.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
-import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createContainer} 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 {system} from '@workday/canvas-tokens-web';
 
+import {ToastBody} from './ToastBody';
 import {ToastCloseIcon} from './ToastCloseIcon';
 import {ToastIcon} from './ToastIcon';
-import {ToastMessage} from './ToastMessage';
 import {ToastLink} from './ToastLink';
-import {ToastBody} from './ToastBody';
+import {ToastMessage} from './ToastMessage';
 import {useToastModel} from './hooks/useToastModel';
-import {calc, createStencil} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastProps extends Omit<ExtractProps<typeof Popup.Card, never>, 'model'> {}
 
@@ -51,9 +51,10 @@ const toastStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'row',
-    width: calc.add(calc.multiply(system.space.x20, 4), system.space.x10),
-    padding: system.space.zero,
-    gap: system.space.x1,
+    width: px2rem(360),
+    padding: 0,
+    gap: system.legacy.gap.xs,
+    borderRadius: system.legacy.shape.xl,
   },
 });
 
@@ -65,7 +66,7 @@ const toastStencil = createStencil({
  *
  * const MyToast = (props: CardProps) => (
  *    <Toast mode="dialog" aria-label="notifcation">
- *      <Toast.Icon icon={checkIcon} color={colors.greenApple400} />
+ *      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
  *      <Toast.Body>
  *        <Toast.Message>Your workbook was successfully processed.</Toast.Message>
  *        <Toast.Link href="#hreflink">Custom Link</Toast.Link>

package/toast/lib/ToastBody.tsx

@@ -1,6 +1,6 @@
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Popup} from '@workday/canvas-kit-react/popup';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -11,10 +11,9 @@ export const toastBodyStencil = createStencil({
     alignItems: 'flex-start',
     flexDirection: 'column',
     justifyContent: 'center',
-    paddingTop: system.space.x4,
-    paddingBottom: system.space.x4,
+    paddingBlock: system.legacy.padding.md,
     flexGrow: 1,
-    gap: system.space.x1,
+    gap: system.legacy.gap.xs,
   },
 });
 

package/toast/lib/ToastCloseIcon.tsx

@@ -1,7 +1,7 @@
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface ToastCloseIconProps extends ExtractProps<typeof Popup.CloseIcon, never> {}
 

package/toast/lib/ToastIcon.tsx

@@ -1,14 +1,14 @@
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export interface ToastIconProps extends Omit<SystemIconProps, 'colorHover'> {}
 
 export const toastIconStencil = createStencil({
   base: {
     alignSelf: 'start',
-    margin: `${system.space.x4} ${system.space.x3}`,
+    margin: `${system.legacy.gap.md} ${base.legacy.size150}`,
   },
 });
 

package/toast/lib/ToastLink.tsx

@@ -1,5 +1,5 @@
-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';
 
 export interface ToastLinkProps extends HyperlinkProps {}
 

package/toast/lib/ToastMessage.tsx

@@ -1,17 +1,16 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {useToastModel} from './hooks/useToastModel';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {Subtext} from '@workday/canvas-kit-react/text';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
+
+import {useToastModel} from './hooks/useToastModel';
 
 export interface ToastMessageProps extends Omit<ExtractProps<typeof Subtext>, 'size'> {}
 
 export const toastMessageStencil = createStencil({
   base: {
     wordBreak: 'break-word',
-    marginBlockStart: system.space.zero,
-    marginBlockEnd: system.space.zero,
+    marginBlock: 0,
   },
 });
 

package/toast/lib/hooks/useToastModel.tsx

@@ -1,4 +1,5 @@
 import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
 export type AriaRoleMode = 'dialog' | 'status' | 'alert';
 
 export const useToastModel = createModelHook({

package/tokens/index.ts

@@ -11,31 +11,31 @@ import {
   typeColors,
 } from '@workday/canvas-colors-web';
 
+import {BrandingColor, CanvasColor} from './lib/colors.types';
+import {CanvasDepth, CanvasDepthValues, depth} from './lib/depth';
 import {
-  borderRadius,
   CanvasBorderRadius,
   CanvasBorderRadiusKeys,
   CanvasBorderRadiusValues,
+  borderRadius,
 } from './lib/radius';
-import {BrandingColor, CanvasColor} from './lib/colors.types';
-import {depth, CanvasDepth, CanvasDepthValues} from './lib/depth';
 import {
-  space,
   CanvasSpace,
   CanvasSpaceKeys,
-  CanvasSpaceValues,
   CanvasSpaceNumberValues,
   CanvasSpaceNumbers,
+  CanvasSpaceValues,
+  space,
   spaceNumbers,
 } from './lib/space';
 import {
-  type,
-  fontFamily,
-  monoFontFamily,
   CanvasType,
+  CanvasTypeHierarchy,
   CanvasTypeProperties,
   CanvasTypeVariants,
-  CanvasTypeHierarchy,
+  fontFamily,
+  monoFontFamily,
+  type,
 } from './lib/type';
 import {CSSProperties} from './lib/types';
 
@@ -167,7 +167,7 @@ export const canvas = {
    * // before
    * import { type } from '@workday/canvas-kit-react/tokens';
    * const styles = css({
-   *   ...type.levels.body.large,
+   *   ...type.levels.body.lg,
    *   fontWeight: type.properties.fontWeights.bold,
    *   color: type.variants.error,
    * })
@@ -176,7 +176,7 @@ export const canvas = {
    * import { system } from '@workday/canvas-tokens-web';
    * import { createStyles } from '@workday/canvas-kit-styling';
    * const styles = createStyles({
-   *   ...system.type.body.large,
+   *   ...system.type.body.lg,
    *   fontWeight: system.fontWeight.bold,
    *   color: system.color.fg.critical.default,
    * })
@@ -396,7 +396,7 @@ export {
    * import { system } from '@workday/canvas-tokens-web';
    * import { createStyles } from '@workday/canvas-kit-styling';
    * const styles = createStyles({
-   *   ...system.type.body.large,
+   *   ...system.type.body.lg,
    *   fontWeight: system.fontWeight.bold,
    *   color: system.color.fg.critical.default,
    * })

package/tokens/lib/type/index.ts

@@ -1,8 +1,8 @@
-import {fontFamilies, CanvasFontFamilies} from './fontFamilies';
-import {fontSizes, CanvasFontSizes} from './fontSizes';
-import {fontWeights, CanvasFontWeights} from './fontWeights';
-import {levels, CanvasTypeHierarchy} from './levels';
-import {variants, CanvasTypeVariants} from './variants';
+import {CanvasFontFamilies, fontFamilies} from './fontFamilies';
+import {CanvasFontSizes, fontSizes} from './fontSizes';
+import {CanvasFontWeights, fontWeights} from './fontWeights';
+import {CanvasTypeHierarchy, levels} from './levels';
+import {CanvasTypeVariants, variants} from './variants';
 
 export {fontFamily, monoFontFamily} from './fontFamilies';
 

package/tokens/lib/type/variants.ts

@@ -1,4 +1,4 @@
-import {typeColors, statusColors} from '@workday/canvas-colors-web';
+import {statusColors, typeColors} from '@workday/canvas-colors-web';
 
 /** ### Canvas Type Variants
  * [View Storybook Docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-system-tokens-type--docs)

package/tokens/lib/types.ts

@@ -1,4 +1,4 @@
-import {CSSProperties as RCP} from 'react';
 import {CSSObject} from '@emotion/styled';
+import {CSSProperties as RCP} from 'react';
 
 export type CSSProperties = RCP & CSSObject;

package/tooltip/lib/OverflowTooltip.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
+import {mergeCallback} from '@workday/canvas-kit-react/common';
 import {
-  getTransformFromPlacement,
   Placement,
   Popper,
   defaultFallbackPlacements,
+  getTransformFromPlacement,
 } from '@workday/canvas-kit-react/popup';
-import {mergeCallback} from '@workday/canvas-kit-react/common';
 
 import {TooltipContainer} from './TooltipContainer';
 import {useTooltip} from './useTooltip';
@@ -96,14 +96,17 @@ function mergeCallbacks<T extends {[key: string]: any}>(
   componentProps: T,
   keys: (keyof T)[] = Object.keys(componentProps)
 ) {
-  return (keys as string[]).reduce((mergedProps, key) => {
-    if (typeof elemProps[key] === 'function') {
-      mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
-    } else {
-      mergedProps[key] = componentProps[key];
-    }
-    return mergedProps;
-  }, {} as {[key: string]: any});
+  return (keys as string[]).reduce(
+    (mergedProps, key) => {
+      if (typeof elemProps[key] === 'function') {
+        mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
+      } else {
+        mergedProps[key] = componentProps[key];
+      }
+      return mergedProps;
+    },
+    {} as {[key: string]: any}
+  );
 }
 
 export const OverflowTooltip = ({