@workday/canvas-kit-docs 15.0.4 → 15.0.6

package/dist/mdx/react/modal/examples/StackedModals.tsx

@@ -1,6 +1,7 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const model = useModalModel();
@@ -18,7 +19,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>
                 <Modal.Target as={DeleteButton}>Yes, Delete</Modal.Target>
                 <Modal.Overlay>
@@ -29,7 +30,7 @@ export default () => {
                       <p>
                         Are you <em>really</em> sure you want to delete the item?
                       </p>
-                      <Flex gap="s">
+                      <Flex cs={{gap: system.gap.md}}>
                         <Modal.CloseButton
                           as={DeleteButton}
                           onClick={event => {

package/dist/mdx/react/modal/examples/WithRadioButtons.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
 
+// TODO: Use a not deprecated radio button
 export default () => {
   const [value, setValue] = React.useState('');
 

package/dist/mdx/react/modal/examples/WithTooltips.tsx

@@ -4,6 +4,7 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const modal = useModalModel();
@@ -18,12 +19,12 @@ export default () => {
       <Modal model={modal}>
         <Modal.Target>Open Modal</Modal.Target>
         <Modal.Overlay>
-          <Modal.Card width={'auto'}>
+          <Modal.Card cs={{width: 'auto'}}>
             <Modal.CloseIcon aria-label="Close" />
             <Modal.Heading>Open Modal</Modal.Heading>
             <Modal.Body>
               <p>Open a hidable and non-hidable popups</p>
-              <Flex gap="s">
+              <Flex cs={{gap: system.gap.md}}>
                 <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
                 <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
                 <Tooltip title="Not so sure" type="muted">

package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx

@@ -42,7 +42,7 @@ export default () => {
               Are you sure you want to delete the item?
             </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 ref={cancelBtnRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete

package/dist/mdx/react/popup/examples/CloseOnTargetHiddenTest.tsx

@@ -4,6 +4,33 @@ import {
   useCloseOnTargetHidden,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  width: px2rem(400),
+  height: px2rem(400),
+  overflow: 'scroll',
+  padding: system.padding.xxs,
+  position: 'relative',
+  '& > div': {
+    width: px2rem(950),
+    height: px2rem(950),
+    '& > p:first-child': {
+      marginBlockEnd: px2rem(400),
+    },
+  },
+});
+
+const popupInnerStyles = createStyles({
+  position: 'absolute',
+  width: px2rem(950),
+  height: px2rem(950),
+  display: 'flex',
+  top: 0,
+  left: 0,
+  justifyContent: 'center',
+});
 
 export default () => {
   const model = usePopupModel();
@@ -12,25 +39,12 @@ export default () => {
   useCloseOnTargetHidden(model);
 
   return (
-    <div
-      style={{width: 400, height: 400, overflow: 'scroll', padding: 4, position: 'relative'}}
-      data-testid="scroll-area"
-    >
-      <div style={{width: 950, height: 950}}>
-        <p style={{marginBottom: 400}}>Scroll down</p>
+    <div className={containerStyles} data-testid="scroll-area">
+      <div>
+        <p>Scroll down</p>
         <p>Scroll right and click on the button</p>
         <Popup model={model}>
-          <div
-            style={{
-              position: 'absolute',
-              width: 950,
-              height: 950,
-              display: 'flex',
-              top: 0,
-              left: 0,
-              justifyContent: 'center',
-            }}
-          >
+          <div className={popupInnerStyles}>
             <Popup.Target data-testid="target" style={{alignSelf: 'center'}}>
               Open Popup
             </Popup.Target>

package/dist/mdx/react/popup/examples/FullScreen.tsx

@@ -16,6 +16,8 @@ import {
   useTransferOnFullscreenEnter,
   useTransferOnFullscreenExit,
 } from '@workday/canvas-kit-react/popup';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const SelfClosePopup = () => {
   const model = usePopupModel();
@@ -31,7 +33,7 @@ const SelfClosePopup = () => {
     <Popup model={model}>
       <Popup.Target>Open Self-close Popup</Popup.Target>
       <Popup.Popper>
-        <Popup.Card width={400} padding="s">
+        <Popup.Card cs={{width: px2rem(400), padding: system.padding.md}}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Self-close Popup</Popup.Heading>
           <Popup.Body>
@@ -62,7 +64,7 @@ const TransferClosePopup = () => {
     <Popup model={model}>
       <Popup.Target>Open Transfer Popup</Popup.Target>
       <Popup.Popper>
-        <Popup.Card width={400} padding="s">
+        <Popup.Card cs={{width: px2rem(400), padding: system.padding.md}}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Transfer Popup</Popup.Heading>
           <Popup.Body>
@@ -98,11 +100,9 @@ export default () => {
       <SecondaryButton onClick={enterFullScreen}>Open Fullscreen</SecondaryButton>
       <Flex
         ref={fullscreenElementRef}
-        alignItems="center"
-        justifyContent="center"
-        background="white"
+        cs={{alignItems: 'center', justifyContent: 'center', background: system.color.bg.default}}
       >
-        <Flex gap="s">
+        <Flex cs={{gap: system.gap.md}}>
           <SelfClosePopup />
           <TransferClosePopup />
           {isFullscreen ? (

package/dist/mdx/react/popup/examples/InlinePopup.tsx

@@ -16,7 +16,7 @@ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const headingStyles = createStyles({
-  marginTop: '0',
+  marginBlockStart: '0',
 });
 
 const cardStyles = createStyles({
@@ -56,7 +56,7 @@ const comparisonLayoutStyles = createStyles({
   display: 'grid',
   gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
   gap: system.gap.lg,
-  marginBottom: system.gap.lg,
+  marginBlockEnd: system.gap.lg,
 });
 
 function SingleInlinePopup({

package/dist/mdx/react/popup/examples/MixedPopupTypes.tsx

@@ -14,6 +14,8 @@ import {
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 interface WindowProps {
   top: number;
@@ -42,7 +44,7 @@ const Window = ({children, heading, relativeNode, top, left}: WindowProps) => {
 
   return ReactDOM.createPortal(
     <Popup model={model}>
-      <Popup.Card width={500}>
+      <Popup.Card cs={{width: px2rem(500)}}>
         <Popup.Heading>{heading}</Popup.Heading>
         <Popup.Body>{children}</Popup.Body>
       </Popup.Card>
@@ -69,11 +71,11 @@ const TempPopup = ({
 
   return (
     <Popup model={model}>
-      <Popup.Target as={DeleteButton} style={{marginRight: '16px'}}>
+      <Popup.Target as={DeleteButton} cs={{marginInlineEnd: system.gap.md}}>
         {deleteText}
       </Popup.Target>
       <Popup.Popper>
-        <Popup.Card width={400} padding="s">
+        <Popup.Card cs={{width: px2rem(400), padding: system.padding.md}}>
           <Popup.Heading>{heading}</Popup.Heading>
           <Popup.Body>{children({onClose: model.events.hide})}</Popup.Body>
         </Popup.Card>
@@ -115,17 +117,17 @@ export default () => {
             <TempPopup heading="Delete Item" deleteText="Delete Item">
               {({onClose}) => (
                 <>
-                  <div style={{marginBottom: '24px'}}>
+                  <div style={{marginBlockEnd: cssVar(system.gap.xl)}}>
                     Are you sure you'd like to delete the item titled 'My Item'?
                   </div>
                   <TempPopup heading="Really Delete Item" deleteText="Delete">
                     {({onClose}) => (
                       <>
-                        <div style={{marginBottom: '24px'}}>
+                        <div style={{marginBlockEnd: cssVar(system.gap.xl)}}>
                           Are you REALLY sure you'd like to delete the item titled 'My Item'?
                         </div>
 
-                        <DeleteButton style={{marginRight: '16px'}} onClick={onClose}>
+                        <DeleteButton cs={{marginInlineEnd: system.gap.md}} onClick={onClose}>
                           Really Delete
                         </DeleteButton>
                         <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>

package/dist/mdx/react/popup/examples/NestedPopups.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {
@@ -11,6 +9,7 @@ import {
   usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const popup1 = usePopupModel();
@@ -36,18 +35,18 @@ export default () => {
           <Popup.Card aria-label="Popup 1">
             <Popup.CloseIcon aria-label="Close" size="small" />
             <Popup.Body>
-              <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>
+              <p style={{marginBlockStart: 0, marginBlockEnd: 0}}>Contents of Popup 1</p>
             </Popup.Body>
-            <Flex gap="s" padding="xxs">
+            <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
               <Popup model={popup2}>
                 <Popup.Target>Open Popup 2</Popup.Target>
                 <Popup.Popper>
                   <Popup.Card aria-label="Popup 2">
                     <Popup.CloseIcon aria-label="Close" size="small" />
                     <Popup.Body>
-                      <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>
+                      <p style={{marginBlockStart: 0, marginBlockEnd: 0}}>Contents of Popup 2</p>
                     </Popup.Body>
-                    <Flex gap="s" padding="xxs">
+                    <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
                       <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
                         Close Both (as)
                       </Popup.CloseButton>

package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx

@@ -59,7 +59,7 @@ export default () => {
           <Popup.Popper placement="top">
             <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+              <Popup.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
@@ -79,7 +79,7 @@ export default () => {
           <Popup.Popper placement="left">
             <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+              <Popup.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
@@ -99,11 +99,11 @@ export default () => {
           <Popup.Popper placement="right">
             <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+              <Popup.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
+              <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -119,11 +119,11 @@ export default () => {
           <Popup.Popper placement="bottom">
             <Popup.Card cs={{width: 400}}>
               <Popup.CloseIcon aria-label="Close" />
-              <Popup.Heading cs={{paddingTop: system.padding.md}}>
+              <Popup.Heading cs={{paddingBlockStart: system.padding.md}}>
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
+              <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>

package/dist/mdx/react/popup/examples/PopupWithNonHidablePopup.tsx

@@ -5,6 +5,7 @@ import {
   useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const popup1 = usePopupModel();
@@ -14,7 +15,7 @@ export default () => {
   useCloseOnEscape(popup1);
 
   return (
-    <Flex gap="s">
+    <Flex cs={{gap: system.gap.md}}>
       <Popup model={popup1}>
         <Popup.Target>Open Popup 1</Popup.Target>
         <Popup.Popper>

package/dist/mdx/react/popup/examples/ReturnFocusTest.tsx

@@ -10,6 +10,21 @@ import {
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  width: px2rem(400),
+  height: px2rem(400),
+  overflow: 'scroll',
+  padding: system.padding.xxs,
+  '& > div': {
+    width: px2rem(950),
+    '& > p:first-child': {
+      marginBlockEnd: px2rem(400),
+    },
+  },
+});
 
 export default () => {
   const model = usePopupModel();
@@ -20,19 +35,16 @@ export default () => {
   useReturnFocus(model);
 
   return (
-    <div
-      style={{width: 400, height: 400, overflow: 'scroll', padding: 4}}
-      data-testid="scroll-area"
-    >
-      <div style={{width: 950}}>
-        <p style={{marginBottom: 400}}>Scroll down</p>
+    <div className={containerStyles} data-testid="scroll-area">
+      <div>
+        <p>Scroll down</p>
         <p>Scroll right and click on the button</p>
         <Popup model={model}>
-          <FormField id="return-focus-text-input" cs={{marginLeft: 400}}>
+          <FormField id="return-focus-text-input" cs={{marginInlineStart: px2rem(400)}}>
             <FormField.Label>Name</FormField.Label>
             <FormField.Input as={TextInput} />
           </FormField>
-          <Flex style={{marginBottom: 400, marginLeft: 410}}>
+          <Flex cs={{marginBlockEnd: px2rem(400), marginInlineStart: px2rem(410)}}>
             <SecondaryButton id="return-focus-button-tabindex" tabIndex={-1}>
               Button with TabIndex=-1
             </SecondaryButton>

package/dist/mdx/react/radio/examples/Inverse.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -12,7 +13,7 @@ export default () => {
   };
 
   return (
-    <Box backgroundColor="blueberry400" padding="s">
+    <Box cs={{padding: system.padding.md, backgroundColor: system.color.accent.info}}>
       <RadioGroup name={useUniqueId()} onChange={handleChange} value={value}>
         <Radio variant="inverse" label="Deep dish" value="deep-dish" />
         <Radio variant="inverse" label="Thin" value="thin" />

package/dist/mdx/react/segmented-control/examples/Basic.tsx

@@ -8,6 +8,7 @@ import {
   listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const [viewType, setViewType] = React.useState('table');
@@ -34,7 +35,7 @@ export default () => {
           />
         </SegmentedControl.List>
       </SegmentedControl>
-      <BodyText size="small" marginTop="s">
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
         Selected: {viewType}
       </BodyText>
     </>

package/dist/mdx/react/segmented-control/examples/Sizes.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {Box} from '@workday/canvas-kit-react/layout';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {BodyText} from '@workday/canvas-kit-react/text';
@@ -9,11 +7,12 @@ import {
   listViewIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <>
     <Box>
-      <BodyText size="medium" fontWeight="bold" marginTop={0}>
+      <BodyText size="medium" cs={{marginBlockStart: 0, fontWeight: system.fontWeight.bold}}>
         Small
       </BodyText>
       <SegmentedControl size="small">

package/dist/mdx/react/select/examples/Controlled.tsx

@@ -5,6 +5,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const parentContainerStyles = createStyles({
   flexDirection: 'column',
@@ -53,7 +54,7 @@ export default () => {
       </FormField>
       <p>Id: {value}</p>
       <p>Label: {label}</p>
-      <Flex gap="s">
+      <Flex cs={{gap: system.gap.md}}>
         <SecondaryButton
           onClick={e => {
             setValue('fax');

package/dist/mdx/react/skeleton/examples/Basic.tsx

@@ -10,7 +10,7 @@ export default () => {
         <Skeleton.Shape
           cs={{width: system.size.md, height: system.size.md, borderRadius: system.shape.full}}
         />
-        <Box cs={{flex: 1, marginLeft: calc.add(system.gap.sm, system.gap.xs)}}>
+        <Box cs={{flex: 1, marginInlineStart: calc.add(system.gap.sm, system.gap.xs)}}>
           <Skeleton.Header />
         </Box>
       </Flex>

package/dist/mdx/react/skeleton/examples/Color.tsx

@@ -15,7 +15,7 @@ export default () => {
             backgroundColor: base.indigo50,
           }}
         />
-        <Box cs={{flex: 1, marginLeft: calc.add(system.gap.sm, system.gap.xs)}}>
+        <Box cs={{flex: 1, marginInlineStart: calc.add(system.gap.sm, system.gap.xs)}}>
           <Skeleton.Header cs={{backgroundColor: base.amber50}} />
         </Box>
       </Flex>

package/dist/mdx/react/skeleton/examples/Simulation.tsx

@@ -76,7 +76,7 @@ export default () => {
 
   return (
     <Box>
-      <Box cs={{marginBottom: system.gap.xl}}>
+      <Box cs={{marginBlockEnd: system.gap.xl}}>
         <FormField orientation="horizontalStart">
           <FormField.Label>Load Time</FormField.Label>
           <FormField.Input as={TextInput} onChange={onChangeLoadTime} value={loadTime} />
@@ -101,7 +101,7 @@ export default () => {
                         borderRadius: system.shape.full,
                       }}
                     />
-                    <Box cs={{flex: 1, marginLeft: calc.add(system.gap.sm, system.gap.xs)}}>
+                    <Box cs={{flex: 1, marginInlineStart: calc.add(system.gap.sm, system.gap.xs)}}>
                       <Skeleton.Header />
                     </Box>
                   </Flex>
@@ -112,7 +112,7 @@ export default () => {
               <Box>
                 <Flex
                   cs={{
-                    marginBottom: calc.add(system.gap.sm, system.gap.xs),
+                    marginBlockEnd: calc.add(system.gap.sm, system.gap.xs),
                     display: 'inline-flex',
                     alignItems: 'center',
                   }}

package/dist/mdx/react/table/examples/BasicWithHeading.tsx

@@ -6,7 +6,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainerStyles: createStyles({
-    marginBottom: system.gap.md,
+    marginBlockEnd: system.gap.md,
   }),
   tableHeaderStyles: createStyles({
     backgroundColor: system.color.surface.raised,

package/dist/mdx/react/table/examples/FixedColumn.tsx

@@ -8,7 +8,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 const styleOverrides = {
   parentContainerStyles: createStyles({
-    marginBottom: system.gap.md,
+    marginBlockEnd: system.gap.md,
   }),
   tableStyles: createStyles({
     width: px2rem(690),
@@ -17,7 +17,7 @@ const styleOverrides = {
     position: 'sticky',
     left: '0',
     backgroundColor: system.color.surface.raised,
-    borderRight: `${px2rem(2)} solid ${system.color.border.default}`,
+    borderInlineEnd: `${px2rem(2)} solid ${system.color.border.default}`,
   }),
 };
 

package/dist/mdx/react/tabs/examples/AlternativeTabStop.tsx

@@ -10,7 +10,7 @@ export default () => {
         <Tabs.Item>Second Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: cssVar(system.gap.lg)}}>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
         <Tabs.Panel tabIndex={undefined}>
           <button>Focusable button</button>
           <br />

package/dist/mdx/react/tabs/examples/Basic.tsx

@@ -12,7 +12,7 @@ export default () => {
         <Tabs.Item>Fourth Tab</Tabs.Item>
         <Tabs.Item>Fifth Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: cssVar(system.gap.lg)}}>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
         <Tabs.Panel>Contents of First Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/DisabledTab.tsx

@@ -10,7 +10,7 @@ export default () => {
         <Tabs.Item aria-disabled>Disabled Tab</Tabs.Item>
         <Tabs.Item>Third Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: cssVar(system.gap.lg)}}>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
         <Tabs.Panel>Contents of First Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Disabled Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/DynamicTabs.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {isCursor} from '@workday/canvas-kit-react/collection';
 import {slugify} from '@workday/canvas-kit-react/common';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 type Tab = {
   tab: string;
@@ -87,14 +89,16 @@ export default () => {
         )}
       </Tabs.List>
       <Tabs.Menu.Popper>
-        <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+        <Tabs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
           <Tabs.Menu.List>
             {(item: Tab) => <Tabs.Menu.Item>{item.tab}</Tabs.Menu.Item>}
           </Tabs.Menu.List>
         </Tabs.Menu.Card>
       </Tabs.Menu.Popper>
       <Tabs.Panels>
-        {(item: Tab) => <Tabs.Panel marginTop="m">Contents of {item.tab}</Tabs.Panel>}
+        {(item: Tab) => (
+          <Tabs.Panel cs={{marginBlockStart: system.gap.lg}}>Contents of {item.tab}</Tabs.Panel>
+        )}
       </Tabs.Panels>
     </Tabs>
   );

package/dist/mdx/react/tabs/examples/HoistedModel.tsx

@@ -18,7 +18,7 @@ export default () => {
           <Tabs.Item data-id="second">Second Tab</Tabs.Item>
           <Tabs.Item data-id="third">Third Tab</Tabs.Item>
         </Tabs.List>
-        <div style={{marginTop: cssVar(system.gap.lg)}}>
+        <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
           <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
           <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
           <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -24,7 +24,7 @@ export default () => {
           <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
         </Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: cssVar(system.gap.lg)}}>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
         <Tabs.Panel>Contents of First Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
         <Tabs.Panel>Contents of Third Tab</Tabs.Panel>

package/dist/mdx/react/tabs/examples/NamedTabs.tsx

@@ -12,7 +12,7 @@ export default () => {
         <Tabs.Item data-id="fourth">Fourth Tab</Tabs.Item>
         <Tabs.Item data-id="fifth">Fifth Tab</Tabs.Item>
       </Tabs.List>
-      <div style={{marginTop: cssVar(system.gap.lg)}}>
+      <div style={{marginBlockStart: cssVar(system.gap.lg)}}>
         <Tabs.Panel data-id="first">Contents of First Tab</Tabs.Panel>
         <Tabs.Panel data-id="second">Contents of Second Tab</Tabs.Panel>
         <Tabs.Panel data-id="third">Contents of Third Tab</Tabs.Panel>