@workday/canvas-kit-docs 15.0.3 → 15.0.5

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusRedirect.tsx

@@ -57,12 +57,18 @@ export function ContextualHelpDialogFocusRedirect() {
             <Dialog.Popper placement="right">
               <Dialog.Card>
                 <Dialog.CloseIcon aria-label="Close" />
-                <Dialog.Heading cs={{paddingTop: system.padding.xxl}}>Information</Dialog.Heading>
+                <Dialog.Heading cs={{paddingBlockStart: system.padding.xxl}}>
+                  Information
+                </Dialog.Heading>
                 <Dialog.Body>
                   This dialog does not trap focus, so tabbing out of it will cause it to close
                 </Dialog.Body>
                 <Flex
-                  cs={{gap: system.gap.md, padding: system.padding.xs, marginTop: system.gap.sm}}
+                  cs={{
+                    gap: system.gap.md,
+                    padding: system.padding.xs,
+                    marginBlockStart: system.gap.sm,
+                  }}
                 >
                   <Hyperlink href="/">Link</Hyperlink>
                 </Flex>

package/dist/mdx/react/_examples/mdx/examples/ContextualHelp/ContextualHelpDialogFocusTrap.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
@@ -56,13 +58,19 @@ export function ContextualHelpDialogFocusTrap() {
             <Dialog.Popper placement="right">
               <Dialog.Card>
                 <Dialog.CloseIcon aria-label="Close" />
-                <Dialog.Heading cs={{paddingTop: system.padding.xl}}>Information</Dialog.Heading>
+                <Dialog.Heading cs={{paddingBlockStart: system.padding.xl}}>
+                  Information
+                </Dialog.Heading>
                 <Dialog.Body>
                   This dialog traps focus. Focus will only return to the rest of the page when the
                   dialog is closed
                 </Dialog.Body>
                 <Flex
-                  cs={{gap: system.gap.md, padding: system.padding.xs, marginTop: system.gap.sm}}
+                  cs={{
+                    gap: system.gap.md,
+                    padding: system.padding.xs,
+                    marginBlockStart: system.gap.sm,
+                  }}
                 >
                   <Hyperlink href="/">Link</Hyperlink>
                 </Flex>

package/dist/mdx/react/_examples/mdx/examples/CookieBanner.tsx

@@ -1,40 +1,17 @@
 import * as React from 'react';
 
 import {PrimaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {StyledType, createComponent, styled} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {
+  CSProps,
+  createStencil,
+  createStyles,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
-const CookieBannerItem = createComponent('div')({
-  displayName: 'CookieBanner.Item',
-  Component: ({isRow, ...elProps}: ItemProps, ref) => (
-    <BannerItem ref={ref} isRow={isRow} {...elProps} />
-  ),
-});
-
-const CookieBanner = createComponent('div')({
-  displayName: 'CookieBanner',
-  Component: (props: BannerProps, ref, Element) => <Banner ref={ref} as={Element} {...props} />,
-  subComponents: {Item: CookieBannerItem},
-});
-
-export default () => {
-  const DefaultNotice = `We use cookies to ensure that we give you the best experience on our website. 
-    If you continue without changing your settings, we'll assume that you are willing to receive cookies.`;
-
-  return (
-    <ExampleContainer>
-      <CookieBanner isClosed={false}>
-        <CookieBanner.Item>{DefaultNotice}</CookieBanner.Item>
-        <CookieBanner.Item isRow>
-          <TertiaryButton>Settings</TertiaryButton>
-          <PrimaryButton>Continue</PrimaryButton>
-        </CookieBanner.Item>
-      </CookieBanner>
-    </ExampleContainer>
-  );
-};
-
-interface BannerProps {
+interface BannerProps extends CSProps {
   isClosed?: boolean;
 }
 
@@ -42,20 +19,20 @@ interface ItemProps {
   isRow?: boolean;
 }
 
-const ExampleContainer = styled('div')({
-  minHeight: 84,
-  margin: space.xs,
+const exampleContainerStyles = createStyles({
+  minHeight: px2rem(84),
+  margin: px2rem(12),
   position: 'relative',
 });
 
-const Banner = styled('div')<BannerProps & StyledType>(
-  type.levels.subtext.medium,
-  {
-    backgroundColor: commonColors.background,
-    borderTop: `1px solid ${colors.soap400}`,
+const bannerStyles = createStencil({
+  base: {
+    ...system.type.subtext.md,
+    backgroundColor: system.color.surface.default,
+    borderBlockStart: `1px solid ${system.color.border.default}`,
     display: 'flex',
-    ...depth[1],
-    padding: space.m,
+    boxShadow: system.depth[1],
+    padding: system.padding.lg,
     alignItems: 'center',
     justifyContent: 'space-between',
     position: 'absolute',
@@ -68,30 +45,70 @@ const Banner = styled('div')<BannerProps & StyledType>(
       flexDirection: 'column',
       alignItems: 'stretch',
       textAlign: 'center',
-      padding: `${space.s} 0`,
+      padding: `${system.padding.md} 0`,
     },
   },
-  ({isClosed}) => isClosed && {transform: 'translateY(100%)'}
-);
+  modifiers: {
+    isClosed: {
+      true: {
+        transform: 'translateY(100%)',
+      },
+    },
+  },
+});
 
-const BannerItem = styled('div')<ItemProps & StyledType>(
-  {
-    marginLeft: space.s,
-    marginRight: space.s,
+const bannerItemStyles = createStencil({
+  base: {
+    marginInline: system.gap.md,
     '@media (max-width: 450px)': {
       '&:not(:first-of-type)': {
-        marginTop: space.s,
+        marginBlockStart: system.gap.md,
         '> *': {
           flex: 1,
         },
       },
     },
   },
-  ({isRow}) =>
-    isRow && {
-      display: 'flex',
-      '> *': {
-        marginLeft: space.s,
+  modifiers: {
+    isRow: {
+      true: {
+        display: 'flex',
+        '> *': {
+          marginInlineStart: system.gap.md,
+        },
       },
-    }
-);
+    },
+  },
+});
+
+const CookieBannerItem = createComponent('div')({
+  displayName: 'CookieBanner.Item',
+  Component: ({isRow, ...elProps}: ItemProps, ref, Element) => (
+    <Element ref={ref} {...handleCsProp(elProps, bannerItemStyles({isRow}))} />
+  ),
+});
+
+const CookieBanner = createComponent('div')({
+  displayName: 'CookieBanner',
+  Component: ({isClosed, ...props}: BannerProps, ref, Element) => (
+    <Element ref={ref} {...handleCsProp(props, bannerStyles({isClosed}))} />
+  ),
+  subComponents: {Item: CookieBannerItem},
+});
+
+export default () => {
+  const DefaultNotice = `We use cookies to ensure that we give you the best experience on our website. 
+    If you continue without changing your settings, we'll assume that you are willing to receive cookies.`;
+
+  return (
+    <div className={exampleContainerStyles}>
+      <CookieBanner isClosed={false}>
+        <CookieBanner.Item>{DefaultNotice}</CookieBanner.Item>
+        <CookieBanner.Item isRow>
+          <TertiaryButton>Settings</TertiaryButton>
+          <PrimaryButton>Continue</PrimaryButton>
+        </CookieBanner.Item>
+      </CookieBanner>
+    </div>
+  );
+};

package/dist/mdx/react/_examples/mdx/examples/ListOfUploadedFiles.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
-
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Text} from '@workday/canvas-kit-react/text';
 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';
 
 const files = ['Cover Letter.docx', 'Resume.docx', 'Portfolio.pptx', 'Portrait.png'];
 
-const listStyles = {
+const listStyles = createStyles({
   alignItems: 'center',
   width: '35rem',
-};
+});
 
-const deleteBtnStyle = {
-  marginLeft: 'auto',
-};
+const deleteBtnStyle = createStyles({
+  marginInlineStart: 'auto',
+});
 
 export default () => {
   return (
     <>
       <Heading size="medium">Uploaded Files:</Heading>
-      <Flex as="ul" gap="1rem" flexDirection="column">
+      <Flex as="ul" cs={{gap: system.gap.md, flexDirection: 'column'}}>
         {files.map(i => (
-          <Flex as="li" style={listStyles}>
+          <Flex as="li" cs={listStyles}>
             <Text>{i}</Text>
             <Tooltip type="description" title={i}>
-              <DeleteButton icon={trashIcon} style={deleteBtnStyle}>
+              <DeleteButton icon={trashIcon} cs={deleteBtnStyle}>
                 Delete
               </DeleteButton>
             </Tooltip>

package/dist/mdx/react/_examples/mdx/examples/MediaModal.tsx

@@ -5,7 +5,26 @@ import {createComponent} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps, Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {Text} from '@workday/canvas-kit-react/text';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {calc, createStencil, createStyles, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const mediaImageStencil = createStencil({
+  base: {
+    backgroundColor: system.color.bg.default,
+    transition: 'opacity ease 200ms',
+    display: 'block',
+    width: '100%',
+    height: 293,
+    opacity: 0,
+  },
+  modifiers: {
+    loaded: {
+      true: {
+        opacity: 1,
+      },
+    },
+  },
+});
 
 const MediaImage = createComponent('img')({
   displayName: 'Media.Image',
@@ -16,33 +35,26 @@ const MediaImage = createComponent('img')({
       <Box
         as={Element}
         ref={ref}
-        display="block"
-        backgroundColor="frenchVanilla200"
-        transition="opacity ease 200ms"
-        width="100%"
-        height={293}
-        style={{opacity: loaded ? 1 : 0}}
         onLoad={() => setLoaded(true)}
-        {...elemProps}
+        {...handleCsProp(elemProps, mediaImageStencil({loaded}))}
       />
     );
   },
 });
 
+const mediaStyles = createStyles({
+  width: calc.add('100%', calc.multiply(system.size.sm, 2)),
+  marginInlineStart: calc.negate(system.gap.xl),
+  marginBlockStart: system.gap.lg,
+  marginBlockEnd: system.gap.md,
+});
+
 const Media = createComponent('div')({
   displayName: 'Media',
   subComponents: {Image: MediaImage},
   Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
     return (
-      <Box
-        as={Element}
-        ref={ref}
-        width={`calc(100% + (${space.l} * 2))`}
-        marginLeft={`calc(-${space.l})`}
-        marginTop="m"
-        marginBottom="s"
-        {...elemProps}
-      >
+      <Box as={Element} ref={ref} {...handleCsProp(elemProps, mediaStyles)}>
         {children}
       </Box>
     );
@@ -64,11 +76,11 @@ export default () => {
           </Media>
           <Modal.Heading>TED's Secret to Public Speaking</Modal.Heading>
           <Modal.Body>
-            <Text as="p" marginTop={0} marginBottom="m">
+            <Text as="p" cs={{marginBlockStart: 0, marginBlockEnd: system.gap.lg}}>
               The secret to great public speaking, according to former actor Martin Danielson, is as
               simple as one, two, three.
             </Text>
-            <Flex gap="s">
+            <Flex cs={{gap: system.gap.md}}>
               <Modal.CloseButton as={PrimaryButton}>Learn More</Modal.CloseButton>
             </Flex>
           </Modal.Body>

package/dist/mdx/react/_examples/mdx/examples/SelectWithFormik.tsx

@@ -1,11 +1,12 @@
 import {useFormik} from 'formik';
-import * as React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
+import {px2rem} from '@workday/canvas-kit-styling';
 import {cloudArrowUpIcon, cloudIcon, commentIcon, userIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export default [
   {
@@ -49,8 +50,8 @@ export default () => {
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
-      <Flex gap="xs" flexDirection="column" alignItems="flex-start">
-        <FormField orientation="vertical" alignSelf="stretch" alignItems="normal">
+      <Flex cs={{gap: system.gap.sm, flexDirection: 'column', alignItems: 'flex-start'}}>
+        <FormField orientation="vertical" cs={{alignSelf: 'stretch', alignItems: 'normal'}}>
           <Select model={selectModel}>
             <FormField.Label>Choose a book</FormField.Label>
             <FormField.Input
@@ -62,7 +63,7 @@ export default () => {
             />
             <Select.Popper>
               <Select.Card>
-                <Select.List maxHeight={200}>
+                <Select.List cs={{maxHeight: px2rem(200)}}>
                   {item => {
                     return (
                       <Select.Item data-id={item.serverId} data-text={item.label}>

package/dist/mdx/react/_examples/mdx/examples/layout/AreaColumnPositioning.tsx

@@ -2,25 +2,44 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const boxStencil = createStencil({
+  vars: {
+    gridArea: '',
+    backgroundColor: '',
+  },
+  base: ({backgroundColor, gridArea}) => ({
+    height: px2rem(120),
+    backgroundColor,
+    gridArea,
+    p: {
+      color: system.color.fg.inverse,
+      fontWeight: system.fontWeight.bold,
+      textAlign: 'center',
+    },
+  }),
+});
+
+const headingStyles = createStyles({
+  gridTemplateColumns: '4fr 8fr',
+  gridTemplateAreas: "'header header' 'side main'",
+  gridGap: system.gap.md,
+});
 
 export default () => (
   <>
     <Heading size="medium">Area Column Positioning</Heading>
-    <Grid gridTemplateColumns="4fr 8fr" gridTemplateAreas="'header header' 'side main'" gridGap="m">
-      <Box height="120px" backgroundColor="blueberry400" gridArea="header">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          "header" area
-        </BodyText>
+    <Grid cs={headingStyles}>
+      <Box cs={boxStencil({backgroundColor: base.blue500, gridArea: 'header'})}>
+        <BodyText size="small">"header" area</BodyText>
       </Box>
-      <Box height="120px" backgroundColor="blueberry500" gridArea="side">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          "side" area
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue600, gridArea: 'side'})}>
+        <BodyText size="small">"side" area</BodyText>
       </Box>
-      <Box height="120px" backgroundColor="blueberry600" gridArea="main">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          "main" area
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue700, gridArea: 'main'})}>
+        <BodyText size="small">"main" area</BodyText>
       </Box>
     </Grid>
   </>

package/dist/mdx/react/_examples/mdx/examples/layout/CustomColumnPositioning.tsx

@@ -2,40 +2,52 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const boxStencil = createStencil({
+  vars: {
+    gridColumn: '',
+    backgroundColor: '',
+  },
+  base: ({backgroundColor, gridColumn}) => ({
+    height: system.size.xxl,
+    backgroundColor,
+    gridColumn,
+    p: {
+      textAlign: 'center',
+      color: system.color.fg.inverse,
+      fontWeight: system.fontWeight.bold,
+    },
+  }),
+});
+
+const gridStyles = createStyles({
+  gridTemplateColumns: 'repeat(12, 1fr)',
+  gridGap: system.gap.md,
+});
 
 export default () => (
   <>
     <Heading size="medium">Custom Column Positioning</Heading>
-    <Grid gridTemplateColumns="repeat(12, 1fr)" gridGap="m">
-      <Box height="60px" gridColumn="span 4" backgroundColor="blueberry100">
-        <BodyText size="small" textAlign="center">
-          4 column width
-        </BodyText>
+    <Grid cs={gridStyles}>
+      <Box cs={boxStencil({backgroundColor: base.blue500, gridColumn: 'span 4'})}>
+        <BodyText size="small">4 column width</BodyText>
       </Box>
-      <Box height="60px" gridColumn="span 3" backgroundColor="blueberry200">
-        <BodyText size="small" textAlign="center">
-          3 column width
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue600, gridColumn: 'span 3'})}>
+        <BodyText size="small">3 column width</BodyText>
       </Box>
-      <Box height="60px" gridColumn="span 5" backgroundColor="blueberry400">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          5 column width
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue700, gridColumn: 'span 5'})}>
+        <BodyText size="small">5 column width</BodyText>
       </Box>
-      <Box height="60px" gridColumn="1 / 6" backgroundColor="blueberry500">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          from 1st to 5th column position
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue800, gridColumn: '1 / 6'})}>
+        <BodyText size="small">from 1st to 5th column position</BodyText>
       </Box>
-      <Box height="60px" gridColumn="7 / 12" backgroundColor="blueberry500">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          from 7th to 11th column position
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue900, gridColumn: '7 / 12'})}>
+        <BodyText size="small">from 7th to 11th column position</BodyText>
       </Box>
-      <Box height="60px" gridColumn="2 / span 10" backgroundColor="blueberry600">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          10 column width starting from 2nd column
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue950, gridColumn: '2 / span 10'})}>
+        <BodyText size="small">10 column width starting from 2nd column</BodyText>
       </Box>
     </Grid>
   </>

package/dist/mdx/react/_examples/mdx/examples/layout/CustomColumnWidth.tsx

@@ -2,25 +2,41 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const boxStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+  },
+  base: ({backgroundColor}) => ({
+    height: px2rem(120),
+    backgroundColor,
+    p: {
+      textAlign: 'center',
+      color: system.color.fg.inverse,
+      fontWeight: system.fontWeight.bold,
+    },
+  }),
+});
+
+const gridStyles = createStyles({
+  gridTemplateColumns: '4fr 2fr 6fr',
+  gridGap: system.gap.md,
+});
 
 export default () => (
   <>
     <Heading size="medium">Custom Column Width</Heading>
-    <Grid gridTemplateColumns="4fr 2fr 6fr" gridGap="m">
-      <Box height="120px" backgroundColor="blueberry400">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          4 column width
-        </BodyText>
+    <Grid cs={gridStyles}>
+      <Box cs={boxStencil({backgroundColor: base.blue500})}>
+        <BodyText size="small">4 column width</BodyText>
       </Box>
-      <Box height="120px" backgroundColor="blueberry500">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          2 column width
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue600})}>
+        <BodyText size="small">2 column width</BodyText>
       </Box>
-      <Box height="120px" backgroundColor="blueberry600">
-        <BodyText size="small" textAlign="center" color="frenchVanilla100">
-          6 column width
-        </BodyText>
+      <Box cs={boxStencil({backgroundColor: base.blue700})}>
+        <BodyText size="small">6 column width</BodyText>
       </Box>
     </Grid>
   </>

package/dist/mdx/react/_examples/mdx/examples/layout/FullWidthWith3Columns.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import {Box, Grid} from '@workday/canvas-kit-react/layout';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
-import {colors} from '@workday/canvas-kit-react/tokens';
 import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -40,19 +39,19 @@ export default () => (
     <Box cs={boxHeadingStyles({gridArea: 'Heading'})}>
       <Heading size="medium">Full Width With 3 Columns</Heading>
     </Box>
-    <FormSkeleton gridArea="FormLeft" text="Form - Left Third" />
-    <FormSkeleton gridArea="FormCenter" text="Form - Center Third" />
-    <FormSkeleton gridArea="FormRight" text="Form - Right Third" />
+    <FormSkeleton area="FormLeft" text="Form - Left Third" />
+    <FormSkeleton area="FormCenter" text="Form - Center Third" />
+    <FormSkeleton area="FormRight" text="Form - Right Third" />
   </Grid>
 );
 
-const FormSkeleton = ({gridArea, text}) => (
-  <Box cs={boxStyles({gridArea})}>
+const FormSkeleton = ({area, text}) => (
+  <Box cs={boxStyles({gridArea: area})}>
     <BodyText size="small" fontWeight="bold">
       {text}
     </BodyText>
     {Array.from({length: 5}).map(() => (
-      <Grid cs={{gridGap: system.gap.sm, marginBottom: px2rem(20)}}>
+      <Grid cs={{gridGap: system.gap.sm, marginBlockEnd: px2rem(20)}}>
         <Box
           cs={{
             backgroundColor: system.color.surface.default,