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

package/dist/mdx/styling/mdx/Utilities.mdx

@@ -1,4 +1,5 @@
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+
 import CreateStyles from './examples/CreateStyles';
 import CreateVars from './examples/CreateVars';
 
@@ -15,7 +16,6 @@ tricky mental division or write irrational numbers.
 
 ```ts
 import {px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
   // returns '0.0625rem'
@@ -37,8 +37,8 @@ import {calc} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
-  // returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
-  padding: calc.add(system.space.x1, '0.125rem'),
+  // returns 'calc(var(--cnvs-sys-padding-xxs) + 0.125rem)'
+  padding: calc.add(system.padding.xxs, '0.125rem'),
 };
 ```
 
@@ -51,8 +51,8 @@ import {calc} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
-  // returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
-  padding: calc.subtract(system.space.x1, '0.125rem'),
+  // returns 'calc(var(--cnvs-sys-padding-xxs) - 0.125rem)'
+  padding: calc.subtract(system.padding.xxs, '0.125rem'),
 };
 ```
 
@@ -65,8 +65,8 @@ import {calc} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
-  // returns 'calc(var(--cnvs-sys-space-x1) * 3)'
-  padding: calc.multiply(system.space.x1, 3),
+  // returns 'calc(var(--cnvs-sys-padding-xxs) * 3)'
+  padding: calc.multiply(system.padding.xxs, 3),
 };
 ```
 
@@ -79,8 +79,8 @@ import {calc} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
-  // returns 'calc(var(--cnvs-sys-space-x1) / 2)'
-  padding: calc.divide(system.space.x1, 2),
+  // returns 'calc(var(--cnvs-sys-padding-xxs) / 2)'
+  padding: calc.divide(system.padding.xxs, 2),
 };
 ```
 
@@ -94,11 +94,116 @@ import {calc} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = {
-  // returns 'calc(var(--cnvs-sys-space-x4) * -1)'
-  margin: calc.negate(system.space.x4),
+  // returns 'calc(var(--cnvs-sys-gap-md) * -1)'
+  margin: calc.negate(system.gap.md),
 };
 ```
 
+## colorSpace
+
+### Darken
+
+A utility that should be used for interactive states on buttons and links.
+
+It will return
+[color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix)
+and the result is mixing the first color and the mixin color together in the srgb colorspace by a
+given amount.
+
+It takes a single options object with four properties:
+
+1. `color`: The color that will be darkened (this is typically the "base" color on the given
+   element).
+2. `fallback`: A fallback color if the first color is not valid or not defined.
+3. `mixinColor`: The color that will be mixed in with the first color (or fallback color).
+4. `mixinValue`: The percentage of the mixin color that will be added to the first color (or
+   fallback color).
+
+```tsx
+import {colorSpace, createStyles} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  backgroundColor: system.color.brand.accent.primary,
+  '&:hover': {
+    backgroundColor: colorSpace.darken({
+      color: system.color.brand.accent.primary,
+      fallback: brand.primary.darkest,
+      mixinColor: system.color.accent.overlay.mixin,
+      mixinValue: system.opacity.accent.hover,
+    }),
+  },
+});
+```
+
+### Hover
+
+A utility that should be used for `hover` interactive states on buttons and links.
+
+It will return
+[color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix)
+and the result is mixing the first color and the mixin color together in the srgb colorspace by a
+given amount.
+
+It takes a single options object with three properties:
+
+1. `color`: The color that will be darkened (this is typically the "base" color on the given
+   element).
+2. `fallback`: A fallback color if the first color is not valid or not defined.
+3. `colorType`: A string that will determine where the mixin color and the mixin percentage comes
+   from in tokens (i.e. `system.color.accent....`, `system.color.surface....`,
+   `system.opacity.accent....` or `system.opacity.surface....`).
+
+```tsx
+import {colorSpace, createStyles} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  backgroundColor: system.color.brand.accent.primary,
+  '&:hover': {
+    backgroundColor: colorSpace.hover({
+      color: system.color.brand.accent.primary,
+      fallback: brand.primary800,
+      colorType: 'accent',
+    }),
+  },
+});
+```
+
+### Pressed
+
+A utility that should be used for `active` or `pressed` interactive states on buttons and links.
+
+It will return
+[color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix)
+and the result is mixing the first color and the mixin color together in the srgb colorspace by a
+given amount.
+
+It takes a single options object with three properties:
+
+1. `color`: The color that will be darkened (this is typically the "base" color on the given
+   element).
+2. `fallback`: A fallback color if the first color is not valid or not defined.
+3. `colorType`: A string that will determine where the mixin color and the mixin percentage comes
+   from in tokens (i.e. `system.color.accent....`, `system.color.surface....`,
+   `system.opacity.accent....` or `system.opacity.surface....`).
+
+```tsx
+import {colorSpace, createStyles} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  backgroundColor: system.color.brand.accent.primary,
+  '&:active': {
+    backgroundColor: colorSpace.pressed({
+      color: system.color.brand.accent.primary,
+      fallback: brand.primary800,
+      colorType: 'accent',
+    }),
+  },
+});
+```
+
 ## keyframes
 
 The `keyframes` function re-exports the [Emotion CSS keyframes](https://emotion.sh/docs/keyframes)
@@ -108,16 +213,16 @@ transformer.
 ### Example
 
 ```tsx
-import {system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {
+  CSProps,
+  calc,
+  createStencil,
   handleCsProp,
   keyframes,
-  createStencil,
-  calc,
   px2rem,
-  CSProps,
 } from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 /**
  * Keyframe for the dots loading animation.
@@ -134,12 +239,12 @@ const keyframesLoading = keyframes({
 export const loadingStencil = createStencil({
   base: {
     display: 'inline-flex',
-    gap: system.space.x2,
-    width: system.space.x4,
-    height: system.space.x4,
-    fontSize: system.space.zero,
-    borderRadius: system.shape.round,
-    backgroundColor: system.color.bg.muted.softer,
+    gap: system.gap.sm,
+    width: system.size.xxxs,
+    height: system.size.xxxs,
+    fontSize: '0',
+    borderRadius: system.shape.full,
+    backgroundColor: system.color.accent.muted.soft,
     outline: `${px2rem(2)} solid transparent`,
     transform: 'scale(0)',
     animationName: keyframesLoading,
@@ -165,7 +270,8 @@ export const LoadingDot = createComponent('div')({
 
 The `injectGlobal` function re-exports the
 [Emotion CSS injectGlobal](https://emotion.sh/docs/@emotion/css#global-styles) function, but is
-compatible with a custom Emotion instance and is understood by the Static style transformer. It will also wrap our CSS tokens to ensure you can inject global styles using our CSS variables.
+compatible with a custom Emotion instance and is understood by the Static style transformer. It will
+also wrap our CSS tokens to ensure you can inject global styles using our CSS variables.
 
 ```tsx
 injectGlobal({
@@ -174,7 +280,7 @@ injectGlobal({
     fontFamily: system.fontFamily.default,
     margin: 0,
     minHeight: '100vh',
-    ...system.type.heading.large,
+    ...system.type.heading.lg,
   },
   '#root, #root < div': {
     minHeight: '100vh',
@@ -186,15 +292,17 @@ injectGlobal({
 
 ```tsx
 import {createRoot} from 'react-dom/client';
+
 import {fonts} from '@workday/canvas-kit-react-fonts';
-import {system} from '@workday/canvas-tokens-web';
 import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
-import {App} from './App';
-
+import {system} from '@workday/canvas-tokens-web';
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/component/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
+import {App} from './App';
+
 //@ts-ignore
 injectGlobal({
   ...fonts,
@@ -205,7 +313,7 @@ injectGlobal({
   },
   '#root, #root < div': {
     minHeight: '100vh',
-    ...system.type.body.small,
+    ...system.type.body.sm,
   },
 });
 

package/dist/mdx/styling/mdx/examples/CSProp.tsx

@@ -1,13 +1,11 @@
-import React from 'react';
-
-import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 import {Card} from '@workday/canvas-kit-react/card';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const myStencil = createStencil({
   base: {
     maxWidth: px2rem(400),
-    padding: system.space.zero,
+    padding: '0',
     overflow: 'hidden',
   },
 });
@@ -17,14 +15,14 @@ export default () => {
     <Card cs={myStencil()}>
       <Card.Heading
         cs={{
-          color: cssVar(system.color.text.inverse),
-          background: cssVar(system.color.bg.primary.default),
-          padding: cssVar(system.space.x3),
+          color: system.color.fg.inverse,
+          background: system.color.brand.accent.primary,
+          padding: system.padding.sm,
         }}
       >
         The Future of Styling
       </Card.Heading>
-      <Card.Body cs={{padding: cssVar(system.space.x3)}}>
+      <Card.Body cs={{padding: system.padding.md}}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas blandit consectetur.
         Nam in congue mauris. Ut non metus a arcu rutrum accumsan. Duis luctus, diam vitae iaculis
         semper, nibh nisl varius erat, vitae dapibus velit lacus blandit tellus. Aenean vestibulum

package/dist/mdx/styling/mdx/examples/CreateModifiers.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
+import {createModifiers, createStyles} from '@workday/canvas-kit-styling';
 
 const myModifiers = createModifiers({
   size: {

package/dist/mdx/styling/mdx/examples/CreateStencil.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import {createStencil} from '@workday/canvas-kit-styling';
+
 import {Card} from '@workday/canvas-kit-react/card';
-import {system} from '@workday/canvas-tokens-web';
-import {Switch} from '@workday/canvas-kit-react/switch';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Switch} from '@workday/canvas-kit-react/switch';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const themedCardStencil = createStencil({
   vars: {
@@ -16,10 +17,10 @@ const themedCardStencil = createStencil({
     body: 'themed-card-body',
   },
   base: ({headerPart, headerColor}) => ({
-    padding: system.space.x4,
+    padding: system.padding.md,
     boxShadow: system.depth[2],
     backgroundColor: system.color.bg.default,
-    color: system.color.text.default,
+    color: system.color.fg.default,
     // Targets the header part via [data-part="themed-card-header"]"]
     [headerPart]: {
       color: headerColor,
@@ -29,17 +30,17 @@ const themedCardStencil = createStencil({
     isDarkTheme: {
       // If the prop `isDarkTheme` is true, style the component and it's parts
       true: ({headerPart, bodyPart}) => ({
-        backgroundColor: system.color.bg.contrast.default,
-        color: system.color.text.inverse,
+        backgroundColor: system.color.surface.contrast.default,
+        color: system.color.fg.inverse,
         [`${headerPart}, ${bodyPart}`]: {
-          color: system.color.text.inverse,
+          color: system.color.fg.inverse,
         },
       }),
     },
   },
 });
 
-export default ({isDarkTheme, headerColor, elemProps}) => {
+export default ({headerColor, elemProps}) => {
   const [darkTheme, setIsDarkTheme] = React.useState(false);
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setIsDarkTheme(event.target.checked);

package/dist/mdx/styling/mdx/examples/CreateStyles.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const styles = createStyles({
-  background: system.color.bg.primary.default,
-  color: system.color.text.inverse,
+  background: system.color.brand.accent.primary,
+  color: system.color.fg.inverse,
 });
 
 export default () => {

package/dist/mdx/styling/mdx/examples/CustomButton.tsx

@@ -1,34 +1,27 @@
-import React from 'react';
-
-import {system} from '@workday/canvas-tokens-web';
-import {plusIcon} from '@workday/canvas-system-icons-web';
-import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {PrimaryButtonProps, buttonStencil} from '@workday/canvas-kit-react/button';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {
-  BaseButton,
-  buttonStencil,
-  PrimaryButton,
-  PrimaryButtonProps,
-} from '@workday/canvas-kit-react/button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {Grid} from '@workday/canvas-kit-react/layout';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const myButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
-    [buttonStencil.vars.background]: system.color.static.green.soft,
-    [buttonStencil.vars.label]: system.color.static.green.strong,
-    [systemIconStencil.vars.color]: system.color.static.green.strong,
-    [buttonStencil.vars.borderRadius]: system.shape.half,
+    [buttonStencil.vars.background]: base.green100,
+    [buttonStencil.vars.label]: base.green700,
+    [systemIconStencil.vars.color]: base.green700,
+    [buttonStencil.vars.borderRadius]: px2rem(2),
     border: `${px2rem(3)} solid transparent`,
     width: 'fit-content',
     '&:hover': {
-      [buttonStencil.vars.background]: system.color.static.green.default,
-      border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
-      [systemIconStencil.vars.color]: system.color.static.green.strong,
+      [buttonStencil.vars.background]: base.green600,
+      border: `${px2rem(3)} dotted ${base.green700}`,
+      [systemIconStencil.vars.color]: base.green700,
     },
     '&:active': {
-      [buttonStencil.vars.background]: system.color.static.green.strong,
+      [buttonStencil.vars.background]: base.green700,
       [buttonStencil.vars.label]: system.color.fg.inverse,
       [systemIconStencil.vars.color]: system.color.fg.inverse,
     },
@@ -36,13 +29,13 @@ const myButtonStencil = createStencil({
   modifiers: {
     size: {
       small: {
-        padding: system.space.x4,
+        padding: system.padding.md,
       },
       medium: {
-        padding: system.space.x6,
+        padding: system.padding.xl,
       },
       large: {
-        padding: system.space.x8,
+        padding: system.padding.xxl,
       },
     },
   },
@@ -57,7 +50,7 @@ const MyButton = createComponent('button')({
 });
 
 export default () => (
-  <Grid cs={{gap: px2rem(4), gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
+  <Grid cs={{gap: system.gap.xs, gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
     <MyButton icon={plusIcon}>My Button</MyButton>
     <MyButton size="medium" icon={plusIcon} iconPosition="end">
       Medium My Button

package/dist/mdx/styling/mdx/examples/CustomIcon.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {system} from '@workday/canvas-tokens-web';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {component, system} from '@workday/canvas-tokens-web';
 
 const myIconStencil = createStencil({
   extends: systemIconStencil,
   base: {
-    [systemIconStencil.vars.color]: system.color.icon.primary.default,
-    [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
-    [systemIconStencil.vars.size]: system.space.x4,
+    [systemIconStencil.vars.color]: system.color.brand.fg.primary.default,
+    [systemIconStencil.vars.accentColor]: system.color.brand.fg.critical.default,
+    [systemIconStencil.vars.size]: component.systemIcon.size.xs,
   },
 });
 

package/dist/mdx/styling/mdx/examples/EmotionButton.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React from 'react';
 
 interface ButtonProps {
   variant: 'primary' | 'secondary' | 'danger';

package/dist/mdx/styling/mdx/examples/ManualStylesButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createStyles} from '@workday/canvas-kit-styling';
 
 interface ButtonProps {

package/dist/mdx/styling/mdx/examples/StyledButton.tsx

@@ -1,26 +1,24 @@
-import React from 'react';
-
-import {system} from '@workday/canvas-tokens-web';
-import {caretDownIcon} from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {buttonStencil, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {PrimaryButton, buttonStencil} from '@workday/canvas-kit-react/button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {caretDownIcon} from '@workday/canvas-system-icons-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const varStyles = createStyles({
-  [buttonStencil.vars.background]: system.color.static.gray.soft,
-  [buttonStencil.vars.label]: system.color.static.blue.strong,
+  [buttonStencil.vars.background]: base.slate200,
+  [buttonStencil.vars.label]: base.blue700,
   // Because PrimaryButton uses SystemIcon under the hood,
   // we also can change system icon variable for color
-  [systemIconStencil.vars.color]: system.color.static.blue.strong,
+  [systemIconStencil.vars.color]: base.blue700,
   '&:hover': {
-    [buttonStencil.vars.background]: system.color.static.amber.default,
-    [buttonStencil.vars.label]: system.color.static.white,
-    [systemIconStencil.vars.color]: system.color.static.white,
+    [buttonStencil.vars.background]: base.amber400,
+    [buttonStencil.vars.label]: system.color.fg.inverse,
+    [systemIconStencil.vars.color]: system.color.fg.inverse,
   },
   '&:focus-visible': {
-    [buttonStencil.vars.background]: system.color.static.green.default,
-    [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
-    [buttonStencil.vars.boxShadowInner]: system.color.static.white,
+    [buttonStencil.vars.background]: base.green600,
+    [buttonStencil.vars.boxShadowOuter]: base.green700,
+    [buttonStencil.vars.boxShadowInner]: base.green100,
   },
 });
 

package/dist/mdx/styling/mdx/examples/StylingButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import {createStyles, createModifiers, createVars, cssVar} from '@workday/canvas-kit-styling';
+
+import {createModifiers, createStyles, createVars, cssVar} from '@workday/canvas-kit-styling';
 
 interface ButtonProps {
   variant: 'primary' | 'secondary' | 'danger';

package/dist/mdx/styling/mdx/examples/StylingOverrides.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
 import {jsx} from '@emotion/react';
+import styled from '@emotion/styled';
+import * as React from 'react';
 
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {base} from '@workday/canvas-tokens-web';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 const backgroundColors = {
   cssProp: cssVar(base.orange500),
@@ -89,7 +89,7 @@ export default () => {
           <PrimaryButton cs={styles}>createStyles</PrimaryButton>
           {jsx(PrimaryButton, {...cssProp}, 'CSS Prop')}
           <StyledPrimaryButton>Styled Component</StyledPrimaryButton>
-          <PrimaryButton backgroundColor={backgroundColors.styleProps}>Style Props</PrimaryButton>
+          <PrimaryButton background={backgroundColors.styleProps}>Style Props</PrimaryButton>
         </Flex>
         <div>
           {jsx(
@@ -105,12 +105,12 @@ export default () => {
           <StyledPrimaryButton cs={styles}>createStyles + Styled Component</StyledPrimaryButton>
         </div>
         <div>
-          <PrimaryButton cs={styles} backgroundColor={backgroundColors.styleProps}>
+          <PrimaryButton cs={styles} background={backgroundColors.styleProps}>
             createStyles + Style Props
           </PrimaryButton>
         </div>
         <div>
-          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps} cs={styles}>
+          <StyledPrimaryButton background={backgroundColors.styleProps} cs={styles}>
             createStyles + Styled Component + Style Props
           </StyledPrimaryButton>
         </div>
@@ -119,7 +119,7 @@ export default () => {
             StyledPrimaryButton,
             {
               ...cssProp,
-              backgroundColor: backgroundColors.styleProps,
+              background: backgroundColors.styleProps,
               cs: styles,
             },
             'createStyles + CSS Prop + Styled Component + Style Props'
@@ -131,13 +131,13 @@ export default () => {
             PrimaryButton,
             {
               ...cssProp,
-              backgroundColor: backgroundColors.styleProps,
+              background: backgroundColors.styleProps,
             },
             'CSS Prop + Style Props'
           )}
         </div>
         <div>
-          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps}>
+          <StyledPrimaryButton background={backgroundColors.styleProps}>
             Styled Component + Style Props
           </StyledPrimaryButton>
         </div>

package/dist/mdx/tokens/TokenMigrationCodemod.mdx

@@ -1,5 +1,14 @@
+import {StorybookInformationHighlight} from './StorybookInformationHighlight';
+
+
 # Canvas Kit Tokens Migration Codemod
 
+<StorybookInformationHighlight
+  variant="caution"
+  title="v2 -> v3 Codemod"
+  description="This codemod automates the migration of old Canvas Kit React tokens or @workday/canvas-tokens-web v2 tokens to the new v3 token format. Note: There is currently no codemod available for migration to v4 tokens."
+/>
+
 This codemod helps migrate Canvas Kit tokens from `@workday/canvas-kit-react/tokens` or
 `@workday/canvas-tokens-web` v2 to `@workday/canvas-tokens-web` v3 format. It automatically
 transforms token usage in your codebase to use the new token system.