npm - @workday/canvas-kit-docs - Versions diffs - 15.0.3 → 15.0.5 - Mend

@workday/canvas-kit-docs 15.0.3 → 15.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/dist/mdx/react/layout/examples/Flex/Basic.tsx CHANGED Viewed

@@ -1,48 +1,37 @@
-import * as React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
-const baseStyles = {
-  color: 'blackPepper500',
-  minHeight: 'xl',
-  minWidth: '2rem',
-  padding: 'xs',
-};
+const baseStyles = createStencil({
+  vars: {
+    backgroundColor: '',
+  },
+  base: ({backgroundColor}) => ({
+    color: system.color.fg.default,
+    minHeight: system.size.xl,
+    minWidth: system.size.sm,
+    padding: system.padding.sm,
+    textAlign: 'center',
+    backgroundColor,
+  }),
+});
 export default () => (
-  <Flex columnGap="xs">
-    <Flex flexDirection="column" rowGap="xs" flex={1}>
-      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
-        1
-      </Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
-        1
-      </Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
-        1
-      </Flex.Item>
+  <Flex cs={{columnGap: system.gap.sm}}>
+    <Flex cs={{flexDirection: 'column', rowGap: system.gap.md, flex: 1}}>
+      <Flex.Item cs={baseStyles({backgroundColor: base.amber400})}>1</Flex.Item>
+      <Flex.Item cs={baseStyles({backgroundColor: base.green400})}>1</Flex.Item>
+      <Flex.Item cs={baseStyles({backgroundColor: base.indigo400})}>1</Flex.Item>
     </Flex>
-    <Flex flexDirection="column" rowGap="xs" flex={2}>
-      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
-        2
-      </Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
-        2
-      </Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
-        2
-      </Flex.Item>
+    <Flex cs={{flexDirection: 'column', rowGap: system.gap.md, flex: 2}}>
+      <Flex.Item cs={baseStyles({backgroundColor: base.amber400})}>2</Flex.Item>
+      <Flex.Item cs={baseStyles({backgroundColor: base.green400})}>2</Flex.Item>
+      <Flex.Item cs={baseStyles({backgroundColor: base.indigo400})}>2</Flex.Item>
     </Flex>
-    <Flex flexDirection="column" rowGap="xs" flex={1}>
-      <Flex.Item backgroundColor="cinnamon300" textAlign="center" {...baseStyles}>
-        1
-      </Flex.Item>
-      <Flex.Item backgroundColor="sourLemon300" textAlign="center" {...baseStyles}>
-        1
-      </Flex.Item>
-      <Flex.Item backgroundColor="blueberry300" textAlign="center" {...baseStyles}>
-        1
-      </Flex.Item>
+    <Flex cs={{flexDirection: 'column', rowGap: system.gap.md, flex: 1}}>
+      <Flex.Item cs={baseStyles({backgroundColor: base.amber400})}>1</Flex.Item>
+      <Flex.Item cs={baseStyles({backgroundColor: base.green400})}>1</Flex.Item>
+      <Flex.Item cs={baseStyles({backgroundColor: base.indigo400})}>1</Flex.Item>
     </Flex>
   </Flex>
 );

package/dist/mdx/react/layout/examples/Grid/GridCard.tsx CHANGED Viewed

@@ -44,7 +44,7 @@ export default () => {
         <Body>Complete this task when you have a functional understanding of Grid.</Body>
       </Box>
       <Grid cs={{gridTemplate: 'auto / 1fr auto', justifyItems: 'end'}}>
-        <Box cs={{marginRight: system.gap.sm}}>
+        <Box cs={{marginInlineEnd: system.gap.sm}}>
           <PrimaryButton onClick={() => setIsComplete(true)}>Complete</PrimaryButton>
         </Box>
         <SecondaryButton onClick={() => setIsComplete(false)}>Cancel</SecondaryButton>

package/dist/mdx/react/layout/examples/Grid/GridLayout.tsx CHANGED Viewed

@@ -1,57 +1,67 @@
 import * as React from 'react';
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+const baseStyles = createStyles({
+  alignContent: 'center',
+  padding: system.padding.sm,
+  justifyContent: 'center',
+  backgroundColor: system.color.surface.alt.default,
+  color: system.color.fg.default,
+  borderRadius: system.shape.md,
+});
 const Cell = (props: {children: React.ReactNode}) => {
-  return (
-    <Grid
-      alignContent="center"
-      padding="xs"
-      justifyContent="center"
-      backgroundColor="soap500"
-      color="blackPepper500"
-      borderRadius="m"
-    >
-      {props.children}
-    </Grid>
-  );
+  return <Grid cs={baseStyles}>{props.children}</Grid>;
 };
+const cellItemStyles = createStyles({
+  alignContent: 'center',
+  gridAutoColumns: 'max-content',
+  height: '100%',
+  gridAutoFlow: 'column',
+  padding: system.padding.sm,
+  justifyContent: 'center',
+  backgroundColor: system.color.surface.alt.default,
+  color: system.color.fg.default,
+  borderRadius: system.shape.md,
+});
 const CellItem = (props: {children: React.ReactNode}) => {
-  return (
-    <Grid
-      alignContent="center"
-      gridAutoColumns="max-content"
-      height="100%"
-      gridAutoFlow="column"
-      padding="xs"
-      justifyContent="center"
-      backgroundColor="peach300"
-      color="blackPepper500"
-      borderRadius="m"
-    >
-      {props.children}
-    </Grid>
-  );
+  return <Grid cs={cellItemStyles}>{props.children}</Grid>;
 };
 export default () => {
   return (
-    <Box padding="xs">
+    <Box cs={{padding: system.padding.sm}}>
       <Grid
-        gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))"
-        padding="xxs"
-        border="5px solid #c860d1"
-        gridGap="xs"
+        cs={{
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+          gridGap: system.gap.sm,
+          border: `${px2rem(5)} solid ${base.magenta600}`,
+          padding: system.padding.sm,
+        }}
       >
-        <Grid.Item gridRowStart="2">
-          <Grid gridTemplateColumns="repeat(auto-fit, minmax(300px, 1fr))" gridGap="xxs">
+        <Grid.Item cs={{gridRowStart: '2'}}>
+          <Grid
+            cs={{
+              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+              gridGap: system.gap.sm,
+            }}
+          >
             <Cell>1</Cell>
             <Cell>2</Cell>
           </Grid>
         </Grid.Item>
-        <Grid.Item gridRowStart="1">
-          <Grid gridTemplateColumns="repeat(auto-fit, minmax(100px, 1fr))" gridGap="xxs">
+        <Grid.Item cs={{gridRowStart: '1'}}>
+          <Grid
+            cs={{
+              gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+              gridGap: system.gap.sm,
+            }}
+          >
             <CellItem>3</CellItem>
             <CellItem>4</CellItem>
             <CellItem>5</CellItem>

package/dist/mdx/react/layout/examples/Grid/GridLayoutInteractive.tsx CHANGED Viewed

@@ -2,45 +2,42 @@ import React, {useEffect, useRef, useState} from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Grid} from '@workday/canvas-kit-react/layout';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {
   arrowDownIcon,
   arrowLeftIcon,
   arrowRightIcon,
   arrowUpIcon,
 } from '@workday/canvas-system-icons-web';
+import {base, system} from '@workday/canvas-tokens-web';
+const baseStyles = createStyles({
+  padding: system.padding.sm,
+  backgroundColor: system.color.surface.alt.default,
+  color: system.color.fg.default,
+  borderRadius: system.shape.md,
+  alignContent: 'center',
+  justifyContent: 'center',
+});
 const Cell = (props: {children: React.ReactNode}) => {
-  return (
-    <Grid
-      alignContent="center"
-      padding="xs"
-      justifyContent="center"
-      backgroundColor="soap500"
-      color="blackPepper500"
-      borderRadius="m"
-    >
-      {props.children}
-    </Grid>
-  );
+  return <Grid cs={baseStyles}>{props.children}</Grid>;
 };
+const cellItemStyles = createStyles({
+  alignContent: 'center',
+  gridAutoColumns: 'max-content',
+  height: '100%',
+  gridAutoFlow: 'column',
+  padding: system.padding.sm,
+  justifyContent: 'center',
+  backgroundColor: system.color.surface.alt.default,
+  color: system.color.fg.default,
+  borderRadius: system.shape.md,
+});
 const CellItem = (props: {children: React.ReactNode}) => {
-  return (
-    <Grid
-      alignContent="center"
-      gridAutoColumns="max-content"
-      gridGap="xs"
-      height="100%"
-      gridAutoFlow="column"
-      padding="xs"
-      justifyContent="center"
-      backgroundColor="peach300"
-      color="frenchVanilla100"
-      borderRadius="m"
-    >
-      {props.children}
-    </Grid>
-  );
+  return <Grid cs={cellItemStyles}>{props.children}</Grid>;
 };
 export default () => {
@@ -70,15 +67,17 @@ export default () => {
   };
   return (
-    <Grid gridAutoFlow="row" padding="xs">
+    <Grid cs={{gridAutoFlow: 'row', padding: system.padding.sm}}>
       <Grid
-        gridTemplateColumns="repeat(3, 1fr)"
-        gridTemplateRows="repeat(3, 1fr)"
-        gridGap="xs"
-        padding="xs"
-        border="5px solid #c860d1"
+        cs={{
+          gridTemplateColumns: 'repeat(3, 1fr)',
+          gridTemplateRows: 'repeat(3, 1fr)',
+          gridGap: system.gap.sm,
+          padding: system.padding.sm,
+          border: `${px2rem(5)} solid ${base.magenta600}`,
+        }}
       >
-        <Grid.Item gridRowStart={rowCount} gridColumnStart={colCount}>
+        <Grid.Item cs={{gridRowStart: rowCount, gridColumnStart: colCount}}>
           <CellItem>
             <PrimaryButton
               size="extraSmall"

package/dist/mdx/react/menu/examples/Basic.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const [selected, setSelected] = React.useState('');
@@ -19,7 +20,7 @@ export default () => {
           </Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" marginTop="s">
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

package/dist/mdx/react/menu/examples/ContextMenu.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const [selected, setSelected] = React.useState('');
@@ -18,7 +19,7 @@ export default () => {
           </Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" marginTop="s">
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

package/dist/mdx/react/menu/examples/Grouping.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const [selected, setSelected] = React.useState('');
@@ -23,7 +24,7 @@ export default () => {
             </Menu.List>
           </Menu.Card>
         </Menu.Popper>
-        <BodyText size="small" marginTop="s">
+        <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
           Selected: <span data-testid="output">{selected}</span>
         </BodyText>
       </Menu>

package/dist/mdx/react/menu/examples/Icons.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import {
   configureIcon,
   userIcon,
 } from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const [selected, setSelected] = React.useState('');
@@ -42,7 +43,7 @@ export default () => {
           </Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" marginTop="s">
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

package/dist/mdx/react/menu/examples/MenuWithFallbackPlacements.tsx CHANGED Viewed

@@ -4,6 +4,8 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {Placement} from '@workday/canvas-kit-react/popup';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 import {PopperController} from '../../../../../utils/storybook';
@@ -36,14 +38,16 @@ export default () => {
         onSetMarginRightBtn={handleMarginRightBtn}
       >
         <Flex
-          width="100%"
-          marginTop={240}
-          justifyContent="center"
-          alignItems="center"
-          flexDirection="column"
+          cs={{
+            width: '100%',
+            marginBlockStart: px2rem(240),
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+          }}
         >
           <Menu onSelect={data => setSelected(data.id)}>
-            <Menu.Target style={{marginLeft: marginLeftBtn, marginRight: marginRightBtn}}>
+            <Menu.Target cs={{marginInlineStart: marginLeftBtn, marginInlineEnd: marginRightBtn}}>
               Open Menu
             </Menu.Target>
             <Menu.Popper placement={placement}>
@@ -57,7 +61,10 @@ export default () => {
                 </Menu.List>
               </Menu.Card>
             </Menu.Popper>
-            <BodyText size="small" marginTop="s" marginLeft={20}>
+            <BodyText
+              size="small"
+              cs={{marginBlockStart: system.gap.md, marginInlineStart: px2rem(20)}}
+            >
               Selected: <span data-testid="output">{selected}</span>
             </BodyText>
           </Menu>

package/dist/mdx/react/menu/examples/Nested.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const [selected, setSelected] = React.useState('');
@@ -40,7 +41,7 @@ export default () => {
           </Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" marginTop="s">
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

package/dist/mdx/react/menu/examples/NestedDynamic.tsx CHANGED Viewed

@@ -97,7 +97,7 @@ export default () => {
           <Menu.List>{renderItem}</Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" cs={{marginTop: system.gap.md}}>
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

package/dist/mdx/react/menu/examples/SelectableMenu.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import React from 'react';
 import {Menu} from '@workday/canvas-kit-react/menu';
 import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
 /**
  * The `Menu.Item` renders a `role=menuitem` element, and `aria-selected` is not a valid attribute for
@@ -30,7 +31,7 @@ export default () => {
           </Menu.List>
         </Menu.Card>
       </Menu.Popper>
-      <BodyText size="small" marginTop="s">
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: <span data-testid="output">{selected}</span>
       </BodyText>
     </Menu>

package/dist/mdx/react/modal/examples/Basic.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ export default () => {
               software and associated documentation files (the "Software").
             </Box>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
+          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/BodyOverflow.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
-import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const handleAcknowledge = () => {
@@ -21,7 +20,7 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>MIT License</Modal.Heading>
           <Modal.Body tabIndex={0}>
-            <p style={{marginTop: 0}}>
+            <p style={{marginBlockStart: 0}}>
               Permission is hereby granted, free of charge, to any person obtaining a copy of this
               software and associated documentation files (the "Software"), to deal in the Software
               without restriction, including without limitation the rights to use, copy, modify,
@@ -67,7 +66,7 @@ export default () => {
               suspendisse interdum consectetur libero id faucibus. Morbi tincidunt augue interdum
               velit. Nullam non nisi est sit amet.
             </p>
-            <p style={{marginBottom: 0}}>
+            <p style={{marginBlockEnd: 0}}>
               Aliquet enim tortor at auctor urna nunc id cursus metus. Leo urna molestie at
               elementum eu facilisis. Consectetur purus ut faucibus pulvinar elementum integer.
               Volutpat est velit egestas dui id ornare arcu odio. At consectetur lorem donec massa
@@ -81,7 +80,7 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/CustomFocus.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const longDescID = useUniqueId();
@@ -27,10 +28,10 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Acknowledge License</Modal.Heading>
           <Modal.Body>
-            <Box as="p" id={longDescID} marginTop={0} marginBottom="m">
+            <Box as="p" id={longDescID} cs={{marginBlockStart: 0, marginBlockEnd: system.gap.md}}>
               Enter your initials to acknowledge the license.
             </Box>
-            <FormField cs={{marginBottom: 0}}>
+            <FormField cs={{marginBlockEnd: 0}}>
               <FormField.Label>Initials</FormField.Label>
               <FormField.Input
                 as={TextInput}
@@ -40,7 +41,7 @@ export default () => {
               />
             </FormField>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/FullOverflow.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
-import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const handleAcknowledge = () => {
@@ -17,11 +16,11 @@ export default () => {
     <Modal>
       <Modal.Target as={PrimaryButton}>Open License</Modal.Target>
       <Modal.OverflowOverlay>
-        <Modal.Card maxHeight="inherit" height="inherit">
+        <Modal.Card cs={{maxHeight: 'inherit', height: 'inherit'}}>
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>MIT License</Modal.Heading>
           <Modal.Body tabIndex={0}>
-            <p style={{marginTop: 0}}>
+            <p style={{marginBlockStart: 0}}>
               Permission is hereby granted, free of charge, to any person obtaining a copy of this
               software and associated documentation files (the "Software"), to deal in the Software
               without restriction, including without limitation the rights to use, copy, modify,
@@ -67,7 +66,7 @@ export default () => {
               suspendisse interdum consectetur libero id faucibus. Morbi tincidunt augue interdum
               velit. Nullam non nisi est sit amet.
             </p>
-            <p style={{marginBottom: 0}}>
+            <p style={{marginBlockEnd: 0}}>
               Aliquet enim tortor at auctor urna nunc id cursus metus. Leo urna molestie at
               elementum eu facilisis. Consectetur purus ut faucibus pulvinar elementum integer.
               Volutpat est velit egestas dui id ornare arcu odio. At consectetur lorem donec massa
@@ -81,7 +80,7 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex gap="s" padding="xxs">
+          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/IframeTest.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   return (
@@ -12,7 +13,7 @@ export default () => {
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
             <p>Are you sure you want to delete the item?</p>
-            <Flex gap="s">
+            <Flex cs={{gap: system.gap.md}}>
               <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
               <Modal.CloseButton>Cancel</Modal.CloseButton>
             </Flex>

package/dist/mdx/react/modal/examples/ModalWithPopup.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import {
   useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const modal = useModalModel();
@@ -30,7 +31,7 @@ export default () => {
             <Modal.Body>
               <p>Are you sure you want to delete the item?</p>
               <Popup model={popup}>
-                <Flex gap="s">
+                <Flex cs={{gap: system.gap.md}}>
                   <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
                   <Popup.CloseButton>Cancel</Popup.CloseButton>
                 </Flex>
@@ -40,7 +41,7 @@ export default () => {
                     <Popup.Heading>Really Delete Item</Popup.Heading>
                     <Popup.Body>
                       <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-                      <Flex gap="s">
+                      <Flex cs={{gap: system.gap.md}}>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {

package/dist/mdx/react/modal/examples/ModalWithPopupRTL.tsx CHANGED Viewed

@@ -8,6 +8,7 @@ import {
   useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
+import {system} from '@workday/canvas-tokens-web';
 export default () => {
   const modal = useModalModel();
@@ -31,7 +32,7 @@ export default () => {
             <Modal.Body>
               <p>Are you sure you want to delete the item?</p>
               <Popup model={popup}>
-                <Flex gap="s">
+                <Flex cs={{gap: system.gap.md}}>
                   <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
                   <Popup.CloseButton>Cancel</Popup.CloseButton>
                 </Flex>
@@ -41,7 +42,7 @@ export default () => {
                     <Popup.Heading>Really Delete Item</Popup.Heading>
                     <Popup.Body>
                       <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-                      <Flex gap="s">
+                      <Flex cs={{gap: system.gap.md}}>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {

package/dist/mdx/react/modal/examples/NoTargetRTL.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ export default () => {
                 ("התוכנה").
               </Box>
             </Modal.Body>
-            <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
+            <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
               <Modal.CloseButton
                 as={PrimaryButton}
                 onClick={handleAcknowledge}