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

package/dist/mdx/react/banner/examples/StickyAnimation.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
+import {Banner} from '@workday/canvas-kit-react/banner';
 import {useTheme} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {loopIcon} from '@workday/canvas-system-icons-web';
-import {Banner} from '@workday/canvas-kit-react/banner';
 import {
   createStencil,
   createStyles,
   createVars,
-  keyframes,
-  handleCsProp,
   cssVar,
+  handleCsProp,
+  keyframes,
 } from '@workday/canvas-kit-styling';
+import {loopIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
@@ -31,8 +31,8 @@ const stickAnimationKeyframes = keyframes({
 
 const stickyAnimationStencil = createStencil({
   base: {
-    marginBlock: system.space.x1,
-    marginInlineStart: system.space.x1,
+    marginBlock: system.gap.xs,
+    marginInlineStart: system.gap.xs,
     marginInlineEnd: 0,
     animationName: stickAnimationKeyframes,
     animationDuration: '.3s',
@@ -54,7 +54,7 @@ export default () => {
   }, [theme.canvas.direction, rerun]);
 
   return (
-    <Box height={64}>
+    <Box cs={{height: system.size.xxl}}>
       <div className={containerStyles} ref={containerRef}>
         <div
           key={rerun}

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -1,19 +1,8 @@
 import React from 'react';
 
-import {Box} from '@workday/canvas-kit-react/layout';
-import {
-  CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  styled,
-} from '@workday/canvas-kit-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
-
-const theme: PartialEmotionCanvasTheme = {
-  canvas: {
-    direction: ContentDirection.RTL,
-  },
-};
+import {CanvasProvider, styled} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
 const StyledStickyBanner = styled(Banner)({
   position: 'absolute',
@@ -22,7 +11,7 @@ const StyledStickyBanner = styled(Banner)({
 
 export default () => {
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <Box height={64}>
         <StyledStickyBanner isSticky={true}>
           <Banner.Icon />

package/dist/mdx/react/banner/examples/ThemedAlert.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
-
 import {Banner} from '@workday/canvas-kit-react/banner';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 export default () => {
   const theme: PartialEmotionCanvasTheme = {
     canvas: {
       palette: {
         alert: {
-          main: colors.kiwi200,
-          dark: colors.kiwi300,
+          main: cssVar(base.green600),
+          dark: cssVar(base.green800),
         },
       },
     },

package/dist/mdx/react/banner/examples/ThemedError.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
-
 import {Banner} from '@workday/canvas-kit-react/banner';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-import {colors} from '@workday/canvas-kit-react/tokens';
+import {cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 export default () => {
   const theme: PartialEmotionCanvasTheme = {
     canvas: {
       palette: {
         error: {
-          main: colors.islandPunch500,
-          dark: colors.islandPunch600,
-          contrast: colors.berrySmoothie100,
+          main: cssVar(base.green600),
+          dark: cssVar(base.green800),
+          contrast: cssVar(base.red25),
         },
       },
     },

package/dist/mdx/react/breadcrumbs/Breadcrumbs.mdx

@@ -1,14 +1,15 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import OverflowBreadcrumbs from './examples/Overflow';
-import RTLOverflowList from './examples/RTL';
 import CurrentItemTruncation from './examples/CurrentItemTruncation';
 import LinkTruncation from './examples/LinkTruncation';
+import OverflowBreadcrumbs from './examples/Overflow';
+import RTLOverflowList from './examples/RTL';
+
 
 # Canvas Kit Breadcrumbs
 
 Breadcrumbs is a
-[compound component](/getting-started/for-developers/resources/compound-components/) that allows
+[compound component](/get-started/for-developers/documentation/compound-components/) that allows
 users to keep track and maintain awareness of their location as they navigate through pages,
 folders, files, etc.
 
@@ -130,4 +131,4 @@ return (
 
 ## Specifications
 
-<Specifications file="Breadcrumbs.spec.ts" name="Breadcrumbs" />
+<Specifications file="./cypress/component/Breadcrumbs.spec.tsx" name="Breadcrumbs" />

package/dist/mdx/react/breadcrumbs/examples/CurrentItemTruncation.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 
 export default () => {

package/dist/mdx/react/breadcrumbs/examples/LinkTruncation.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 
 export default () => {

package/dist/mdx/react/breadcrumbs/examples/Overflow.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
+
 import {Breadcrumbs, useBreadcrumbsModel} from '@workday/canvas-kit-react/breadcrumbs';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface Breadcrumb {
   id: string;
@@ -24,7 +27,7 @@ export default ({width = '100%'}) => {
   const [containerWidth, setContainerWidth] = React.useState(width);
   return (
     <div>
-      <Box width={containerWidth} marginBottom="xl">
+      <Box cs={{width: containerWidth, marginBottom: system.gap.lg}}>
         <div style={{display: 'flex', flexDirection: 'column'}}>
           <span>Current Container Width: {containerWidth}</span>
           <span>Overflow visibility: {model.menu.state.visibility}</span>
@@ -43,7 +46,7 @@ export default ({width = '100%'}) => {
             }
           </Breadcrumbs.List>
           <Breadcrumbs.Menu.Popper>
-            <Breadcrumbs.Menu.Card maxWidth={300} maxHeight={200}>
+            <Breadcrumbs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
               <Breadcrumbs.Menu.List>
                 {(item: Breadcrumb) => (
                   <Breadcrumbs.Menu.Item href={item.link}>{item.text}</Breadcrumbs.Menu.Item>

package/dist/mdx/react/breadcrumbs/examples/RTL.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 export interface Breadcrumb {
   id: string;
@@ -10,12 +12,6 @@ export interface Breadcrumb {
 }
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
-
   const [items] = React.useState<Breadcrumb[]>([
     {id: '1', text: 'תנ״ך', link: '/tanakh'},
     {id: '2', text: 'כתובים', link: '/ketuvim'},
@@ -26,8 +22,8 @@ export default () => {
   ]);
 
   return (
-    <CanvasProvider theme={theme}>
-      <Box maxWidth="300px">
+    <CanvasProvider dir="rtl">
+      <Box cs={{maxWidth: px2rem(300)}}>
         <Breadcrumbs items={items} aria-label="Breadcrumbs">
           <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
             {item =>
@@ -43,7 +39,7 @@ export default () => {
             }
           </Breadcrumbs.List>
           <Breadcrumbs.Menu.Popper>
-            <Breadcrumbs.Menu.Card maxWidth={300} maxHeight={200}>
+            <Breadcrumbs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
               <Breadcrumbs.Menu.List>
                 {(item: Breadcrumb) => (
                   <Breadcrumbs.Menu.Item href={item.link}>{item.text}</Breadcrumbs.Menu.Item>

package/dist/mdx/react/button/button/Button.mdx

@@ -1,19 +1,19 @@
 import {
   ExampleCodeBlock,
   Specifications,
-  SymbolDoc,
   SymbolDescription,
+  SymbolDoc,
 } from '@workday/canvas-kit-docs';
 
+import CustomStyles from './examples/CustomStyles';
+import Delete from './examples/Delete';
+import Grow from './examples/Grow';
 import Primary from './examples/Primary';
 import PrimaryInverse from './examples/PrimaryInverse';
 import Secondary from './examples/Secondary';
 import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
 import TertiaryInverse from './examples/TertiaryInverse';
-import Delete from './examples/Delete';
-import Grow from './examples/Grow';
-import CustomStyles from './examples/CustomStyles';
 import ThemeOverrides from './examples/ThemeOverrides';
 
 
@@ -115,13 +115,13 @@ Enter and Space keys for keyboard interactions.
 [Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
 
 - An `aria-label` is only necessary for icon-only buttons in most cases. Using
-  [Canvas Kit's tooltip component](?path=/docs/components-popups-tooltip--docs) will handle this for
-  you, and all users will be able to see the label for the button.
+  [Canvas Kit's tooltip component](/components/popups/tooltip/) will handle this for you, and all
+  users will be able to see the label for the button.
 - When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required
   for screen reader support. For example, see Canvas Kit's
-  [Segmented Control component](?path=/docs/preview-segmented-control--docs).
-- When buttons have an attached menu, an `aria-haspopup=”true”` property is required. Using
-  [Canvas Kit's Menu component](?path=/docs/components-menus-menu--docs) will handle this for you.
+  [Segmented Control component](/components/buttons/segmented-control/).
+- When buttons have an attached menu, an `aria-haspopup="true"` property is required. Using
+  [Canvas Kit's Menu component](/components/popups/menu/) will handle this for you.
 - The icons used in text buttons are decorative in most cases and include ARIA `role="presentation"`
   and `focusable="false"`. In some special cases where an icon does add meaning, you may be required
   to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.
@@ -136,8 +136,7 @@ Enter and Space keys for keyboard interactions.
 - Button text content is announced along with the button role (e.g., "Primary, button").
 - Icon-only buttons announce the `aria-label` value along with the button role.
 - Toggle buttons announce their pressed/unpressed state (e.g., "Activity Stream, toggle button,
-  pressed" and check out the
-  [Segmented Control component](?path=/docs/preview-segmented-control--docs)).
+  pressed" and check out the [Segmented Control component](/components/buttons/segmented-control/)).
 
 ### Touch Target Size
 
@@ -160,4 +159,4 @@ Enter and Space keys for keyboard interactions.
 
 ## Specifications
 
-<Specifications file="Button.spec.tsx" name="Button" />
+<Specifications file="./cypress/component/Button.spec.tsx" name="Button" />

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -1,10 +1,12 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
-import Link from './examples/Hyperlink';
-import LinkInverse from './examples/HyperlinkInverse';
+
 import ExternalLink from './examples/ExternalHyperlink';
 import ExternalLinkInverse from './examples/ExternalHyperlinkInverse';
-import StandaloneLink from './examples/StandaloneHyperlink';
+import ExternalLinkRTL from './examples/ExternalHyperlinkRTL';
+import Link from './examples/Hyperlink';
 import InBodyText from './examples/HyperlinkInBodyText';
+import LinkInverse from './examples/HyperlinkInverse';
+import StandaloneLink from './examples/StandaloneHyperlink';
 
 
 # Canvas Kit Hyperlinks
@@ -87,7 +89,7 @@ links with the Enter key is standard expected behavior, while Space is only expe
 ### ExternalHyperlink
 
 If your link should open in a new tab or window use the `ExternalHyperlink` component. It will let
-users know about the behavior by adding an icon, `extLinkIcon`.
+users know about the behavior by adding an icon, `externalLinkIcon`.
 
 > **Accessibility Note:** Providing a label to the icon via the `iconLabel` prop is required for
 > accessibility because the icon adds meaning to the link text. We recommend keeping the alt text as
@@ -100,6 +102,10 @@ link on a dark or colorful background.
 
 <ExampleCodeBlock code={ExternalLinkInverse} />
 
+`ExternalHyperlink`s will also flip the icon for right-to-left (RTL) languages.
+
+<ExampleCodeBlock code={ExternalLinkRTL} />
+
 ### Component API
 
 <SymbolDoc
@@ -112,4 +118,4 @@ link on a dark or colorful background.
 
 ## Specifications
 
-<Specifications file="Hyperlink.spec.ts" name="Hyperlink" />
+<Specifications file="./cypress/component/Hyperlink.spec.tsx" name="Hyperlink" />

package/dist/mdx/react/button/button/examples/CustomStyles.tsx

@@ -1,37 +1,37 @@
-import {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
-import {Grid} from '@workday/canvas-kit-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
+import {PrimaryButton, PrimaryButtonProps, buttonStencil} from '@workday/canvas-kit-react/button';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Grid} from '@workday/canvas-kit-react/layout';
 import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const customContainer = createStyles({
-  gap: system.space.x4,
+  gap: system.gap.md,
   maxWidth: 'max-content',
 });
 
 const myButtonStencil = createStencil({
   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`,
     '&:focus-visible': {
-      [buttonStencil.vars.background]: system.color.static.green.strong,
-      [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,
-      [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
-      [systemIconStencil.vars.color]: system.color.icon.inverse,
+      [buttonStencil.vars.background]: base.green700,
+      [buttonStencil.vars.boxShadowInner]: base.green100,
+      [buttonStencil.vars.boxShadowOuter]: base.green700,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
     },
     '&: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,
-      [systemIconStencil.vars.color]: system.color.icon.inverse,
+      [buttonStencil.vars.background]: base.green600,
+      border: `${px2rem(3)} dotted ${base.green700}`,
+      [buttonStencil.vars.label]: base.green700,
+      [systemIconStencil.vars.color]: system.color.fg.inverse,
     },
     '&: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,
     },
@@ -47,28 +47,28 @@ const MyCustomButton = createComponent('button')({
 });
 
 const myCustomStyles = createStyles({
-  padding: system.space.x4,
+  padding: system.padding.md,
   textTransform: 'uppercase',
-  [buttonStencil.vars.background]: system.color.static.gray.soft,
-  [buttonStencil.vars.label]: system.color.static.gray.strong,
-  [systemIconStencil.vars.color]: system.color.static.gray.strong,
-  [buttonStencil.vars.borderRadius]: system.shape.x2,
-  [buttonStencil.vars.border]: system.color.static.gray.stronger,
+  [buttonStencil.vars.background]: base.slate200,
+  [buttonStencil.vars.label]: base.slate700,
+  [systemIconStencil.vars.color]: base.slate700,
+  [buttonStencil.vars.borderRadius]: system.shape.md,
+  [buttonStencil.vars.border]: base.slate800,
   '&:focus-visible': {
-    [buttonStencil.vars.background]: system.color.static.gray.strong,
-    [buttonStencil.vars.boxShadowInner]: system.color.static.gray.soft,
-    [buttonStencil.vars.boxShadowOuter]: system.color.static.gray.strong,
-    [systemIconStencil.vars.color]: system.color.icon.inverse,
+    [buttonStencil.vars.background]: base.slate700,
+    [buttonStencil.vars.boxShadowInner]: base.slate200,
+    [buttonStencil.vars.boxShadowOuter]: base.slate700,
+    [systemIconStencil.vars.color]: system.color.fg.inverse,
   },
   '&:hover': {
-    [buttonStencil.vars.background]: system.color.static.gray.default,
-    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,
-    [systemIconStencil.vars.color]: system.color.static.gray.strong,
-    [systemIconStencil.vars.color]: system.color.icon.inverse,
-    border: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,
+    [buttonStencil.vars.background]: base.slate600,
+    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${base.slate700}`,
+    [buttonStencil.vars.label]: base.slate700,
+    [systemIconStencil.vars.color]: system.color.fg.inverse,
+    border: `${px2rem(3)} dotted ${base.slate700}`,
   },
   '&:active': {
-    [buttonStencil.vars.background]: system.color.static.gray.strong,
+    [buttonStencil.vars.background]: base.slate700,
     [buttonStencil.vars.label]: system.color.fg.inverse,
     [systemIconStencil.vars.color]: system.color.fg.inverse,
   },
@@ -76,21 +76,21 @@ const myCustomStyles = createStyles({
 
 const customColors = {
   default: {
-    background: system.color.static.amber.soft,
-    icon: system.color.static.amber.strong,
-    label: system.color.static.amber.strong,
+    background: base.amber100,
+    icon: base.amber500,
+    label: base.amber500,
   },
   focus: {
-    background: system.color.static.amber.strong,
-    boxShadowInner: system.color.static.amber.soft,
-    boxShadowOuter: system.color.static.amber.strong,
+    background: base.amber500,
+    boxShadowInner: base.amber100,
+    boxShadowOuter: base.amber500,
   },
   hover: {
-    background: system.color.static.amber.default,
-    icon: system.color.icon.inverse,
+    background: base.amber400,
+    icon: system.color.fg.inverse,
   },
   active: {
-    background: system.color.static.amber.strong,
+    background: base.amber500,
   },
   disabled: {},
 };

package/dist/mdx/react/button/button/examples/Delete.tsx

@@ -1,13 +1,13 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {trashIcon} from '@workday/canvas-system-icons-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {trashIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
+  gap: system.gap.md,
+  padding: system.padding.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -6,10 +6,10 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  padding: system.space.x4,
+  backgroundColor: system.color.brand.accent.primary,
+  padding: system.padding.md,
   display: 'inline-flex',
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/ExternalHyperlinkRTL.tsx

@@ -0,0 +1,10 @@
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => (
+  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <ExternalHyperlink href="https://workday.com" iconLabel="Opens link in new window">
+      השועל החום המהיר קופץ מעל הכלב העצל
+    </ExternalHyperlink>
+  </CanvasProvider>
+);

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -6,10 +6,10 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
-  backgroundColor: system.color.bg.primary.default,
-  padding: system.space.x4,
+  backgroundColor: system.color.brand.accent.primary,
+  padding: system.padding.md,
   display: 'inline-flex',
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,17 +1,17 @@
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
+  gap: system.gap.md,
+  padding: system.padding.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  backgroundColor: system.color.bg.primary.default,
-  padding: system.space.x4,
+  gap: system.gap.md,
+  backgroundColor: system.color.surface.contrast.default,
+  padding: system.padding.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
+  gap: system.gap.md,
+  padding: system.padding.md,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx

@@ -2,19 +2,19 @@ import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
 import {
+  caretDownIcon,
   plusIcon,
   relatedActionsVerticalIcon,
-  caretDownIcon,
 } from '@workday/canvas-system-icons-web';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
-  gap: system.space.x4,
-  padding: system.space.x4,
-  backgroundColor: system.color.bg.primary.default,
+  gap: system.gap.md,
+  padding: system.padding.md,
+  backgroundColor: system.color.surface.contrast.default,
 });
 
 export default () => (

package/dist/mdx/react/button/button/examples/StandaloneHyperlink.tsx

@@ -1,10 +1,10 @@
-import {Hyperlink, ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {ExternalHyperlink, Hyperlink} from '@workday/canvas-kit-react/button';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
   display: 'inline-flex',
-  gap: system.space.x4,
+  gap: system.gap.md,
 });
 
 export default () => (