From 070809e4bfc437a7aa1d596b6b22165a1d774c93 Mon Sep 17 00:00:00 2001
From: "josh.bagwell" <josh.bagwell@workday.com>
Date: Mon, 6 May 2024 17:44:25 -0600
Subject: [PATCH] chore: Updated examples to remove style props

---
 .../form-field/stories/examples/AllFields.tsx | 18 +++++----
 .../stories/examples/RefForwarding.tsx        | 10 ++++-
 .../stories/examples/ThemedErrors.tsx         | 10 ++++-
 .../radio/stories/examples/Basic.tsx          |  7 +++-
 .../radio/stories/examples/Custom.tsx         | 25 +++++++++++--
 .../radio/stories/examples/Inverse.tsx        |  9 ++++-
 .../stories/examples/Emphasis.tsx             |  8 +++-
 .../stories/examples/Icon.tsx                 |  8 +++-
 .../stories/examples/Overflow.tsx             |  8 +++-
 .../stories/examples/Variants.tsx             | 18 +++++++--
 .../button/stories/button/examples/Delete.tsx |  9 ++++-
 .../examples/ExternalHyperlinkInverse.tsx     |  9 ++++-
 .../button/examples/HyperlinkInverse.tsx      |  9 ++++-
 .../stories/button/examples/Primary.tsx       |  9 ++++-
 .../button/examples/PrimaryInverse.tsx        | 10 ++++-
 .../stories/button/examples/Secondary.tsx     |  9 ++++-
 .../button/examples/SecondaryInverse.tsx      | 10 ++++-
 .../stories/button/examples/Tertiary.tsx      |  9 ++++-
 .../button/examples/TertiaryInverse.tsx       | 10 ++++-
 .../stories/examples/Indeterminate.tsx        |  9 ++++-
 .../checkbox/stories/examples/Inverse.tsx     | 10 ++++-
 .../stories/examples/Autocomplete.tsx         | 23 ++++++++++--
 .../icon/stories/examples/AccentIconList.tsx  | 33 ++++++++++++-----
 .../icon/stories/examples/AppletIconList.tsx  | 33 ++++++++++++-----
 .../react/icon/stories/examples/IconList.tsx  | 34 ++++++++++++-----
 .../react/icon/stories/examples/Overview.tsx  | 17 ++++++++-
 .../stories/examples/Accessible.tsx           | 17 ++++++---
 .../react/select/stories/examples/Alert.tsx   |  7 +++-
 .../react/select/stories/examples/Basic.tsx   |  7 +++-
 .../react/select/stories/examples/Complex.tsx |  7 +++-
 .../select/stories/examples/Disabled.tsx      |  7 +++-
 .../stories/examples/DisabledOption.tsx       |  7 +++-
 .../react/select/stories/examples/Error.tsx   |  7 +++-
 .../stories/examples/FetchingDynamicItems.tsx |  8 +++-
 .../stories/examples/InitialSelectedItem.tsx  |  7 +++-
 .../select/stories/examples/MenuHeight.tsx    |  7 +++-
 .../select/stories/examples/Placeholder.tsx   |  7 +++-
 .../select/stories/examples/Required.tsx      |  7 +++-
 .../select/stories/examples/WithIcons.tsx     | 14 ++++++-
 .../react/table/stories/examples/Basic.tsx    | 10 ++++-
 .../stories/examples/BasicWithHeading.tsx     | 17 +++++++--
 .../table/stories/examples/FixedColumn.tsx    | 37 +++++++++++--------
 .../table/stories/examples/RightToLeft.tsx    | 10 ++++-
 43 files changed, 436 insertions(+), 111 deletions(-)

diff --git a/modules/preview-react/form-field/stories/examples/AllFields.tsx b/modules/preview-react/form-field/stories/examples/AllFields.tsx
index fb8376c5f2..6251291a48 100644
--- a/modules/preview-react/form-field/stories/examples/AllFields.tsx
+++ b/modules/preview-react/form-field/stories/examples/AllFields.tsx
@@ -7,17 +7,19 @@ import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Select} from '@workday/canvas-kit-react/select';
 import {TextArea} from '@workday/canvas-kit-react/text-area';
 import {Switch} from '@workday/canvas-kit-react/switch';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  gap: calc.subtract(system.space.x6, system.space.x1),
+  padding: calc.subtract(system.space.x10, system.space.x1),
+  borderRadius: system.space.x1,
+});
 
 export const AllFields = () => {
   return (
-    <Flex
-      cs={{
-        flexDirection: 'column',
-        gap: '20px',
-        padding: '36px',
-        borderRadius: '4px',
-      }}
-    >
+    <Flex cs={parentContainerStyles}>
       <FormField grow>
         <FormField.Label>First Name</FormField.Label>
         <FormField.Input as={TextInput} />
diff --git a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
index f86bd9fe38..e8be6a685f 100644
--- a/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
+++ b/modules/preview-react/form-field/stories/examples/RefForwarding.tsx
@@ -4,6 +4,14 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x1,
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+});
 
 export const RefForwarding = () => {
   const [value, setValue] = React.useState('');
@@ -18,7 +26,7 @@ export const RefForwarding = () => {
   };
 
   return (
-    <Flex gap="xxxs" alignItems="flex-start" flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <FormField>
         <FormField.Label>Email</FormField.Label>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} ref={ref} />
diff --git a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
index 1e15ab38a4..5a4ecc0ef4 100644
--- a/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
+++ b/modules/preview-react/form-field/stories/examples/ThemedErrors.tsx
@@ -3,6 +3,12 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const formFieldHintStyles = createStyles({
+  paddingTop: system.space.x2,
+});
 
 export const ThemedError = () => {
   const [value, setValue] = React.useState('');
@@ -29,7 +35,9 @@ export const ThemedError = () => {
       <FormField error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
         <FormField.Label>Email</FormField.Label>
         <FormField.Input as={TextInput} onChange={handleChange} value={value} />
-        <FormField.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</FormField.Hint>
+        <FormField.Hint cs={formFieldHintStyles}>
+          {!value && 'Please enter an email.'}
+        </FormField.Hint>
       </FormField>
     </CanvasProvider>
   );
diff --git a/modules/preview-react/radio/stories/examples/Basic.tsx b/modules/preview-react/radio/stories/examples/Basic.tsx
index e09b4be6f8..a0b1e2d331 100644
--- a/modules/preview-react/radio/stories/examples/Basic.tsx
+++ b/modules/preview-react/radio/stories/examples/Basic.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const formfieldInputStyles = createStyles({
+  width: '200px',
+});
 
 export const Basic = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -18,10 +23,10 @@ export const Basic = () => {
       <FormField as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input
+          cs={formfieldInputStyles}
           as={RadioGroup}
           name="pizza-crust"
           onChange={handleChange}
-          width="200px"
           value={value}
         >
           <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
diff --git a/modules/preview-react/radio/stories/examples/Custom.tsx b/modules/preview-react/radio/stories/examples/Custom.tsx
index 74df7932ca..e8748131d2 100644
--- a/modules/preview-react/radio/stories/examples/Custom.tsx
+++ b/modules/preview-react/radio/stories/examples/Custom.tsx
@@ -2,6 +2,17 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: '200px',
+  }),
+  radioGroupLabelTextStyles: createStyles({
+    color: base.berrySmoothie400,
+  }),
+};
 
 export const Custom = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -21,20 +32,26 @@ export const Custom = () => {
           as={RadioGroup}
           name="pizza-crust-custom"
           onChange={handleChange}
-          width="200px"
+          cs={styleOverrides.formfieldInputStyles}
           value={value}
         >
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="deep-dish" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Deep dish</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Deep dish
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="gluten-free" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Gluten free</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Gluten free
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
           <RadioGroup.Label>
             <RadioGroup.Label.Input value="cauliflower" />
-            <RadioGroup.Label.Text color="berrySmoothie400">Cauliflower</RadioGroup.Label.Text>
+            <RadioGroup.Label.Text cs={styleOverrides.radioGroupLabelTextStyles}>
+              Cauliflower
+            </RadioGroup.Label.Text>
           </RadioGroup.Label>
         </FormField.Input>
       </FormField>
diff --git a/modules/preview-react/radio/stories/examples/Inverse.tsx b/modules/preview-react/radio/stories/examples/Inverse.tsx
index 2405e731a3..9eff7afe82 100644
--- a/modules/preview-react/radio/stories/examples/Inverse.tsx
+++ b/modules/preview-react/radio/stories/examples/Inverse.tsx
@@ -4,6 +4,8 @@ import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {styled, StyledType} from '@workday/canvas-kit-react/common';
 import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const StyledFormField = styled(FormField)<StyledType>({
   legend: {
@@ -11,6 +13,11 @@ const StyledFormField = styled(FormField)<StyledType>({
   },
 });
 
+const parentContainerStyles = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
+
 export const Inverse = () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
 
@@ -22,7 +29,7 @@ export const Inverse = () => {
   };
 
   return (
-    <Box backgroundColor="blueberry400" padding="s">
+    <Box cs={parentContainerStyles}>
       <StyledFormField as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>
diff --git a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
index 7a1774afb0..4baedca4a9 100644
--- a/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Emphasis.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Emphasis = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator emphasis="high">
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>
diff --git a/modules/preview-react/status-indicator/stories/examples/Icon.tsx b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
index 8c79898e11..84f599f862 100644
--- a/modules/preview-react/status-indicator/stories/examples/Icon.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Icon.tsx
@@ -3,10 +3,16 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+});
 
 export const Icon = () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator>
         <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
diff --git a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
index d54e3b9cfa..9704e43beb 100644
--- a/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Overflow.tsx
@@ -3,11 +3,17 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {calc, createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const statusIndicatorStyles = createStyles({
+  maxWidth: calc.add(system.space.x20, system.space.x4),
+});
 
 export const Overflow = () => {
   return (
     <OverflowTooltip>
-      <StatusIndicator tabIndex={0} style={{maxWidth: '6rem'}}>
+      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>
           Your workbook is currently in process of saving
diff --git a/modules/preview-react/status-indicator/stories/examples/Variants.tsx b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
index 962a6b5c0c..1c52e9eeaa 100644
--- a/modules/preview-react/status-indicator/stories/examples/Variants.tsx
+++ b/modules/preview-react/status-indicator/stories/examples/Variants.tsx
@@ -3,11 +3,23 @@ import React from 'react';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 import {uploadCloudIcon} from '@workday/canvas-system-icons-web';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    gap: system.space.x4,
+    flexDirection: 'column',
+  }),
+  innerContainerStyles: createStyles({
+    gap: system.space.x4,
+  }),
+};
 
 export const Variants = () => {
   return (
-    <Flex gap="s" flexDirection="column">
-      <Flex gap="s">
+    <Flex cs={styleOverrides.parentContainerStyles}>
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator>
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
@@ -33,7 +45,7 @@ export const Variants = () => {
           <StatusIndicator.Icon icon={uploadCloudIcon} />
         </StatusIndicator>
       </Flex>
-      <Flex gap="s">
+      <Flex cs={styleOverrides.innerContainerStyles}>
         <StatusIndicator emphasis="high">
           <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
           <StatusIndicator.Icon icon={uploadCloudIcon} />
diff --git a/modules/react/button/stories/button/examples/Delete.tsx b/modules/react/button/stories/button/examples/Delete.tsx
index 1d11e34ed8..0d71a82204 100644
--- a/modules/react/button/stories/button/examples/Delete.tsx
+++ b/modules/react/button/stories/button/examples/Delete.tsx
@@ -3,9 +3,16 @@ import React from 'react';
 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 {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Delete = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <DeleteButton>Delete</DeleteButton>
     <DeleteButton icon={trashIcon} iconPosition="start">
       Delete
diff --git a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
index 7ee9aef6f0..ce11a6c5fc 100644
--- a/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
+++ b/modules/react/button/stories/button/examples/ExternalHyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const ExternalLinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <ExternalHyperlink href="https://workday.com" variant="inverse">
       Hyperlink
     </ExternalHyperlink>
diff --git a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
index af0790264a..6de3cab294 100644
--- a/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
+++ b/modules/react/button/stories/button/examples/HyperlinkInverse.tsx
@@ -2,9 +2,16 @@ import React from 'react';
 
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const LinkInverse = () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>
diff --git a/modules/react/button/stories/button/examples/Primary.tsx b/modules/react/button/stories/button/examples/Primary.tsx
index ede4ef219f..f7597c68d0 100644
--- a/modules/react/button/stories/button/examples/Primary.tsx
+++ b/modules/react/button/stories/button/examples/Primary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Primary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton>Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start">
       Primary
diff --git a/modules/react/button/stories/button/examples/PrimaryInverse.tsx b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
index c0589600b7..f91b81f897 100644
--- a/modules/react/button/stories/button/examples/PrimaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/PrimaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const PrimaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton variant="inverse">Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Primary
diff --git a/modules/react/button/stories/button/examples/Secondary.tsx b/modules/react/button/stories/button/examples/Secondary.tsx
index cdeafc8c8c..466454826a 100644
--- a/modules/react/button/stories/button/examples/Secondary.tsx
+++ b/modules/react/button/stories/button/examples/Secondary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Secondary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton>Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} iconPosition="start">
       Secondary
diff --git a/modules/react/button/stories/button/examples/SecondaryInverse.tsx b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
index 4fa8bbc4fd..2a87814939 100644
--- a/modules/react/button/stories/button/examples/SecondaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/SecondaryInverse.tsx
@@ -7,9 +7,17 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: base.blueberry400,
+});
 
 export const SecondaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton variant="inverse">Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} variant="inverse">
       Secondary
diff --git a/modules/react/button/stories/button/examples/Tertiary.tsx b/modules/react/button/stories/button/examples/Tertiary.tsx
index 40504b4dfd..f2f8c3e7c2 100644
--- a/modules/react/button/stories/button/examples/Tertiary.tsx
+++ b/modules/react/button/stories/button/examples/Tertiary.tsx
@@ -7,9 +7,16 @@ import {
   relatedActionsVerticalIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+});
 
 export const Tertiary = () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton>Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start">
       Tertiary
diff --git a/modules/react/button/stories/button/examples/TertiaryInverse.tsx b/modules/react/button/stories/button/examples/TertiaryInverse.tsx
index d82dfc0e80..a8a2996d72 100644
--- a/modules/react/button/stories/button/examples/TertiaryInverse.tsx
+++ b/modules/react/button/stories/button/examples/TertiaryInverse.tsx
@@ -8,9 +8,17 @@ import {
   arrowRightIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: base.blueberry400,
+});
 
 export const TertiaryInverse = () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Tertiary
diff --git a/modules/react/checkbox/stories/examples/Indeterminate.tsx b/modules/react/checkbox/stories/examples/Indeterminate.tsx
index 27e776b163..e731fef97b 100644
--- a/modules/react/checkbox/stories/examples/Indeterminate.tsx
+++ b/modules/react/checkbox/stories/examples/Indeterminate.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  marginLeft: system.space.x8,
+  marginTop: system.space.x2,
+});
 
 export const Indeterminate = () => {
   const [pizzaChecked, setPizzaChecked] = React.useState(false);
@@ -58,7 +65,7 @@ export const Indeterminate = () => {
         label="Supreme Pizza Toppings"
         onChange={handlePizzaChange}
       />
-      <Box marginLeft="l" marginTop="xxs">
+      <Box cs={styleOverrides}>
         {toppings.map((topping, index) => (
           <Checkbox
             checked={topping.checked}
diff --git a/modules/react/checkbox/stories/examples/Inverse.tsx b/modules/react/checkbox/stories/examples/Inverse.tsx
index 339994f8d3..c0a2d1641d 100644
--- a/modules/react/checkbox/stories/examples/Inverse.tsx
+++ b/modules/react/checkbox/stories/examples/Inverse.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  gap: system.space.x4,
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+});
 
 export const Inverse = () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,7 +18,7 @@ export const Inverse = () => {
   };
 
   return (
-    <Flex gap="s" backgroundColor="blueberry400" padding="s">
+    <Flex cs={styleOverrides}>
       <Checkbox
         variant="inverse"
         checked={checked}
diff --git a/modules/react/combobox/stories/examples/Autocomplete.tsx b/modules/react/combobox/stories/examples/Autocomplete.tsx
index 91fdd4a91f..af3ca33dd4 100644
--- a/modules/react/combobox/stories/examples/Autocomplete.tsx
+++ b/modules/react/combobox/stories/examples/Autocomplete.tsx
@@ -17,6 +17,7 @@ import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
 
 const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
 const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
@@ -44,6 +45,20 @@ const AutoCompleteInput = createSubcomponent(TextInput)({
   return <Combobox.Input as={Element} {...elemProps} />;
 });
 
+const styleOverrides = {
+  inputGroupInner: createStyles({
+    width: 20,
+    transition: 'opacity 100ms ease',
+  }),
+  loadingDots: createStyles({
+    display: 'flex',
+    transform: 'scale(0.3)',
+  }),
+  comboboxMenuList: createStyles({
+    maxHeight: 200,
+  }),
+};
+
 export const Autocomplete = () => {
   const {model, loader} = useComboboxLoader(
     {
@@ -95,12 +110,12 @@ export const Autocomplete = () => {
         <InputGroup>
           <InputGroup.Input as={FormField.Input.as(AutoCompleteInput)} />
           <InputGroup.InnerEnd
+            cs={styleOverrides.inputGroupInner}
             pointerEvents="none"
-            style={{opacity: loader.isLoading ? 1 : 0, transition: 'opacity 100ms ease'}}
-            width={20}
+            style={{opacity: loader.isLoading ? 1 : 0}}
             data-loading={loader.isLoading}
           >
-            <LoadingDots style={{display: 'flex', transform: 'scale(0.3)'}} />
+            <LoadingDots cs={styleOverrides.loadingDots} />
           </InputGroup.InnerEnd>
           <InputGroup.InnerEnd>
             <InputGroup.ClearButton data-testid="clear" />
@@ -112,7 +127,7 @@ export const Autocomplete = () => {
               <StyledMenuItem as="span">No Results Found</StyledMenuItem>
             )}
             {model.state.items.length > 0 && (
-              <Combobox.Menu.List maxHeight={200}>
+              <Combobox.Menu.List cs={styleOverrides.comboboxMenuList}>
                 {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
               </Combobox.Menu.List>
             )}
diff --git a/modules/react/icon/stories/examples/AccentIconList.tsx b/modules/react/icon/stories/examples/AccentIconList.tsx
index 20cf7c5fe2..40eb28a833 100644
--- a/modules/react/icon/stories/examples/AccentIconList.tsx
+++ b/modules/react/icon/stories/examples/AccentIconList.tsx
@@ -3,11 +3,31 @@ import * as CanvasAccenttIcons from '@workday/canvas-accent-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAccenttIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAccenttIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const AccentIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export const AccentIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.firstChildContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export const AccentIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
                 <Box>
                   <AccentIcon icon={CanvasAccenttIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/AppletIconList.tsx b/modules/react/icon/stories/examples/AppletIconList.tsx
index f8cac5d872..b14a088b6f 100644
--- a/modules/react/icon/stories/examples/AppletIconList.tsx
+++ b/modules/react/icon/stories/examples/AppletIconList.tsx
@@ -3,11 +3,31 @@ import * as CanvasAppletIcons from '@workday/canvas-applet-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {AppletIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasAppletIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasAppletIcons');
 
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const AppletIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -16,9 +36,9 @@ export const AppletIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.firstChildContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -29,14 +49,7 @@ export const AppletIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
                 <Box>
                   <AppletIcon icon={CanvasAppletIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/IconList.tsx b/modules/react/icon/stories/examples/IconList.tsx
index 041383a6cd..f7cc6265a2 100644
--- a/modules/react/icon/stories/examples/IconList.tsx
+++ b/modules/react/icon/stories/examples/IconList.tsx
@@ -3,10 +3,31 @@ import * as CanvasIcons from '@workday/canvas-system-icons-web';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 const ImportedIcons = Object.keys(CanvasIcons);
 
 const allIcons = ImportedIcons.filter(icon => icon !== 'CanvasSystemIcons');
+
+const styleOverrides = {
+  parentContainer: createStyles({
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: system.space.x6,
+  }),
+  firstChildContainer: createStyles({
+    flexWrap: 'wrap',
+  }),
+  secondChildContainer: createStyles({
+    alignItems: 'center',
+    width: `max(320px,20%)`,
+    flexDirection: 'row',
+    gap: system.space.x3,
+    padding: system.space.x3,
+  }),
+};
+
 export const SystemIconList = () => {
   const [value, setValue] = React.useState('');
 
@@ -15,9 +36,9 @@ export const SystemIconList = () => {
   };
 
   return (
-    <Flex flexDirection="column" alignItems="center" gap="m">
+    <Flex cs={styleOverrides.parentContainer}>
       <TextInput onKeyDown={e => handleSearch(e)} placeholder="Search for an icon" />
-      <Flex flexWrap="wrap">
+      <Flex cs={styleOverrides.firstChildContainer}>
         {allIcons
           .filter(icon => {
             if (value === '') {
@@ -28,14 +49,7 @@ export const SystemIconList = () => {
           })
           .map((singleIcon, index) => {
             return (
-              <Flex
-                alignItems="center"
-                width={'max(320px,20%)'}
-                flexDirection="row"
-                gap="xs"
-                padding="xs"
-                key={index}
-              >
+              <Flex cs={styleOverrides.secondChildContainer} key={index}>
                 <Box>
                   <SystemIcon icon={CanvasIcons[singleIcon]} />
                 </Box>
diff --git a/modules/react/icon/stories/examples/Overview.tsx b/modules/react/icon/stories/examples/Overview.tsx
index 08efeb65ed..3a4c389fce 100644
--- a/modules/react/icon/stories/examples/Overview.tsx
+++ b/modules/react/icon/stories/examples/Overview.tsx
@@ -8,6 +8,8 @@ import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 
 import {AccentIcon, AppletIcon, SystemIcon, SystemIconCircle, Graphic} from '../../index';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 const graphicExample: CanvasGraphic = {
   name: 'badgeAchievement',
@@ -18,11 +20,22 @@ const graphicExample: CanvasGraphic = {
   tags: [],
 };
 
+const styleOverrides = {
+  container: createStyles({
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: system.space.x4,
+  }),
+  systemIconStyles: createStyles({
+    background: base.berrySmoothie100,
+  }),
+};
+
 export const Overview = () => (
-  <Flex flexDirection="row" alignItems="center" gap="s">
+  <Flex cs={styleOverrides.container}>
     <AccentIcon icon={shieldIcon} />
     <AppletIcon icon={benefitsIcon} />
-    <SystemIcon icon={activityStreamIcon} background="berrySmoothie100" />
+    <SystemIcon icon={activityStreamIcon} cs={styleOverrides.systemIconStyles} />
     <SystemIconCircle icon={activityStreamIcon} />
     <Graphic src={graphicExample} />
   </Flex>
diff --git a/modules/react/loading-dots/stories/examples/Accessible.tsx b/modules/react/loading-dots/stories/examples/Accessible.tsx
index 5583647cd6..3417ad3f69 100644
--- a/modules/react/loading-dots/stories/examples/Accessible.tsx
+++ b/modules/react/loading-dots/stories/examples/Accessible.tsx
@@ -6,10 +6,15 @@ import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles, cssVar} from '@workday/canvas-kit-styling';
 import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
 
-const loadingStyles = createStyles({
-  backgroundColor: base.licorice300,
-  padding: system.space.x3,
-});
+const styleOverrides = {
+  parentContainer: createStyles({
+    gap: system.space.x4,
+  }),
+  loadingStyles: createStyles({
+    backgroundColor: base.licorice300,
+    padding: system.space.x3,
+  }),
+};
 
 export const Accessible = () => {
   const [loadingState, setLoadingState] = React.useState('idle');
@@ -31,11 +36,11 @@ export const Accessible = () => {
   };
 
   return (
-    <Flex gap={cssVar(system.space.x4)}>
+    <Flex cs={styleOverrides.parentContainer}>
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>
diff --git a/modules/react/select/stories/examples/Alert.tsx b/modules/react/select/stories/examples/Alert.tsx
index f1b5595254..b1ecd30947 100644
--- a/modules/react/select/stories/examples/Alert.tsx
+++ b/modules/react/select/stories/examples/Alert.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,7 +24,7 @@ export const Alert = () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField error="alert">
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Basic.tsx b/modules/react/select/stories/examples/Basic.tsx
index caca9a31b4..099b70e939 100644
--- a/modules/react/select/stories/examples/Basic.tsx
+++ b/modules/react/select/stories/examples/Basic.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Basic = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Complex.tsx b/modules/react/select/stories/examples/Complex.tsx
index 5fcdfda574..84789ebe5f 100644
--- a/modules/react/select/stories/examples/Complex.tsx
+++ b/modules/react/select/stories/examples/Complex.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {serverId: 'email', label: 'E-mail'},
@@ -25,7 +30,7 @@ export const Complex = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Disabled.tsx b/modules/react/select/stories/examples/Disabled.tsx
index 0c9d760c38..9fe70b1cd9 100644
--- a/modules/react/select/stories/examples/Disabled.tsx
+++ b/modules/react/select/stories/examples/Disabled.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Disabled = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/DisabledOption.tsx b/modules/react/select/stories/examples/DisabledOption.tsx
index 3d00786355..2c4582a720 100644
--- a/modules/react/select/stories/examples/DisabledOption.tsx
+++ b/modules/react/select/stories/examples/DisabledOption.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const DisabledOptions = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
         <FormField>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/Error.tsx b/modules/react/select/stories/examples/Error.tsx
index e87c4c6606..5a5678395d 100644
--- a/modules/react/select/stories/examples/Error.tsx
+++ b/modules/react/select/stories/examples/Error.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -19,7 +24,7 @@ export const Error = () => {
     setValue(event.target.value);
   };
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
         <FormField error="error">
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/FetchingDynamicItems.tsx b/modules/react/select/stories/examples/FetchingDynamicItems.tsx
index ea10fa3815..412c0ade97 100644
--- a/modules/react/select/stories/examples/FetchingDynamicItems.tsx
+++ b/modules/react/select/stories/examples/FetchingDynamicItems.tsx
@@ -4,6 +4,12 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useMount} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+  maxWidth: 300,
+});
 
 const movieListItems = [
   {
@@ -68,7 +74,7 @@ export const FetchingDynamicItems = () => {
   });
 
   return (
-    <Flex flexDirection="column" maxWidth={300}>
+    <Flex cs={parentContainerStyles}>
       <Select model={model}>
         <FormField label="Choose a Film">
           <Select.Input
diff --git a/modules/react/select/stories/examples/InitialSelectedItem.tsx b/modules/react/select/stories/examples/InitialSelectedItem.tsx
index 3a887d287c..b9584e213d 100644
--- a/modules/react/select/stories/examples/InitialSelectedItem.tsx
+++ b/modules/react/select/stories/examples/InitialSelectedItem.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   {
@@ -37,7 +42,7 @@ export const InitialSelectedItem = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select
         items={options}
         initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
diff --git a/modules/react/select/stories/examples/MenuHeight.tsx b/modules/react/select/stories/examples/MenuHeight.tsx
index 901dc714ac..145aece57d 100644
--- a/modules/react/select/stories/examples/MenuHeight.tsx
+++ b/modules/react/select/stories/examples/MenuHeight.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const selectCardStyles = createStyles({
+  maxHeight: 200,
+});
 
 const cities = [
   'Atlanta (United States)',
@@ -43,7 +48,7 @@ export const MenuHeight = () => {
         <Select items={cities}>
           <FormField.Input as={Select.Input} />
           <Select.Popper>
-            <Select.Card maxHeight={200}>
+            <Select.Card cs={selectCardStyles}>
               <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
diff --git a/modules/react/select/stories/examples/Placeholder.tsx b/modules/react/select/stories/examples/Placeholder.tsx
index f1387f751f..0624370cf8 100644
--- a/modules/react/select/stories/examples/Placeholder.tsx
+++ b/modules/react/select/stories/examples/Placeholder.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Placeholder = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <Select items={options}>
         <FormField label="Contact">
           <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
diff --git a/modules/react/select/stories/examples/Required.tsx b/modules/react/select/stories/examples/Required.tsx
index 74ea21d250..ddc12909ed 100644
--- a/modules/react/select/stories/examples/Required.tsx
+++ b/modules/react/select/stories/examples/Required.tsx
@@ -2,6 +2,11 @@ import React from 'react';
 import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const parentContainerStyles = createStyles({
+  flexDirection: 'column',
+});
 
 const options = [
   'E-mail',
@@ -20,7 +25,7 @@ export const Required = () => {
   };
 
   return (
-    <Flex flexDirection="column">
+    <Flex cs={parentContainerStyles}>
       <FormField isRequired>
         <Select items={options}>
           <FormField.Label>Contact</FormField.Label>
diff --git a/modules/react/select/stories/examples/WithIcons.tsx b/modules/react/select/stories/examples/WithIcons.tsx
index a9d66a8f04..16da9b4b1e 100644
--- a/modules/react/select/stories/examples/WithIcons.tsx
+++ b/modules/react/select/stories/examples/WithIcons.tsx
@@ -8,6 +8,16 @@ import {
   uploadCloudIcon,
   userIcon,
 } from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: '300px',
+  }),
+  selectCardStyles: createStyles({
+    maxHeight: '200px',
+  }),
+};
 
 const customOptions = [
   {text: 'Activity Stream', id: 'activity-stream', icon: activityStreamIcon},
@@ -28,11 +38,11 @@ export const WithIcons = () => {
           <FormField.Label>Contact</FormField.Label>
           <FormField.Input
             as={Select.Input}
-            width="300px"
+            cs={styleOverrides.formfieldInputStyles}
             inputStartIcon={selectedItem.value.icon}
           />
           <Select.Popper>
-            <Select.Card maxHeight="200px">
+            <Select.Card cs={styleOverrides.selectCardStyles}>
               {model.state.items.length > 0 && (
                 <Select.List>
                   {item => (
diff --git a/modules/react/table/stories/examples/Basic.tsx b/modules/react/table/stories/examples/Basic.tsx
index 55d9a22976..6d45867830 100644
--- a/modules/react/table/stories/examples/Basic.tsx
+++ b/modules/react/table/stories/examples/Basic.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: base.soap100,
+});
 
 export const Basic = () => {
   return (
@@ -8,10 +14,10 @@ export const Basic = () => {
       <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
       <Table.Head>
         <Table.Row>
-          <Table.Header scope="col" backgroundColor="soap100">
+          <Table.Header scope="col" cs={tableHeaderStyles}>
             Drink
           </Table.Header>
-          <Table.Header scope="col" backgroundColor="soap100">
+          <Table.Header scope="col" cs={tableHeaderStyles}>
             Size
           </Table.Header>
         </Table.Row>
diff --git a/modules/react/table/stories/examples/BasicWithHeading.tsx b/modules/react/table/stories/examples/BasicWithHeading.tsx
index 2367a20cb4..2e99748222 100644
--- a/modules/react/table/stories/examples/BasicWithHeading.tsx
+++ b/modules/react/table/stories/examples/BasicWithHeading.tsx
@@ -3,22 +3,33 @@ import React from 'react';
 import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableHeaderStyles: createStyles({
+    backgroundColor: base.soap100,
+  }),
+};
 
 export const BasicWithHeading = () => {
   const headingID = useUniqueId();
 
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Pizza Toppings
       </Heading>
       <Table aria-labelledby={headingID}>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Toppings
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Amount
             </Table.Header>
           </Table.Row>
diff --git a/modules/react/table/stories/examples/FixedColumn.tsx b/modules/react/table/stories/examples/FixedColumn.tsx
index 7b7e3afd17..64c90d3633 100644
--- a/modules/react/table/stories/examples/FixedColumn.tsx
+++ b/modules/react/table/stories/examples/FixedColumn.tsx
@@ -4,6 +4,23 @@ import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  parentContainerStyles: createStyles({
+    marginBottom: system.space.x4,
+  }),
+  tableStyles: createStyles({
+    width: 690,
+  }),
+  tableHeaderStyles: createStyles({
+    position: 'sticky',
+    left: system.space.zero,
+    backgroundColor: base.soap100,
+    borderRight: `2px solid ${base.soap400}`,
+  }),
+};
 
 export const FixedColumn = () => {
   const headingID = useUniqueId();
@@ -77,19 +94,13 @@ export const FixedColumn = () => {
   ];
   return (
     <>
-      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+      <Heading as="h3" id={headingID} size="small" cs={styleOverrides.parentContainerStyles}>
         Performance Car Specs
       </Heading>
-      <Table width={690} aria-labelledby={headingID} tabIndex={0}>
+      <Table cs={styleOverrides.tableStyles} aria-labelledby={headingID} tabIndex={0}>
         <Table.Head>
           <Table.Row>
-            <Table.Header
-              scope="col"
-              position="sticky"
-              left="0"
-              backgroundColor="soap100"
-              borderRight={`2px solid ${colors.soap400}`}
-            >
+            <Table.Header scope="col" cs={styleOverrides.tableHeaderStyles}>
               Make
             </Table.Header>
             <Table.Header scope="col">Model</Table.Header>
@@ -106,13 +117,7 @@ export const FixedColumn = () => {
           {exampleData.map(item => (
             <>
               <Table.Row>
-                <Table.Header
-                  scope="row"
-                  position="sticky"
-                  left="0"
-                  backgroundColor="soap100"
-                  borderRight={`2px solid ${colors.soap400}`}
-                >
+                <Table.Header scope="row" cs={styleOverrides.tableHeaderStyles}>
                   {item.make}
                 </Table.Header>
                 <Table.Cell>{item.model}</Table.Cell>
diff --git a/modules/react/table/stories/examples/RightToLeft.tsx b/modules/react/table/stories/examples/RightToLeft.tsx
index 7034b87170..7cfd962c7f 100644
--- a/modules/react/table/stories/examples/RightToLeft.tsx
+++ b/modules/react/table/stories/examples/RightToLeft.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const tableHeaderStyles = createStyles({
+  backgroundColor: base.soap100,
+});
 
 export const RightToLeft = () => {
   return (
@@ -10,10 +16,10 @@ export const RightToLeft = () => {
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               מַשׁקֶה
             </Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">
+            <Table.Header scope="col" cs={tableHeaderStyles}>
               גודל
             </Table.Header>
           </Table.Row>