@workday/canvas-kit-docs 11.0.0-alpha.790-next.0 → 11.0.0-alpha.793-next.0

package/dist/es6/lib/docs.js

@@ -37072,7 +37072,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     "type": {
       "kind": "enhancedComponent",
       "componentType": "regular",
-      "displayName": "NewCountBadge",
+      "displayName": "CountBadge",
       "props": [
         {
           "kind": "property",
@@ -100994,8 +100994,45 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "name": "aria-haspopup",
                 "required": true,
                 "type": {
-                  "kind": "boolean",
-                  "value": true
+                  "kind": "union",
+                  "value": [
+                    {
+                      "kind": "primitive",
+                      "value": "boolean"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "listbox"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "grid"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "menu"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "false"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "true"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "dialog"
+                    },
+                    {
+                      "kind": "string",
+                      "value": "tree"
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "undefined"
+                    }
+                  ]
                 },
                 "description": "",
                 "tags": {},
@@ -195325,6 +195362,18 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "description": "",
                 "tags": {},
                 "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "aria-haspopup",
+                "required": true,
+                "type": {
+                  "kind": "string",
+                  "value": "menu"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
               }
             ]
           }

package/dist/mdx/preview-react/_examples/examples/TextInputWithReactHookForm.tsx

@@ -59,7 +59,11 @@ const validationSchema: SchemaOf<LoginSchema> = object({
   role: string().required(roleRequired),
 });
 
-const options = ['Developer', 'Designer', 'Product Manager'];
+const options = [
+  {id: '1', label: 'Developer'},
+  {id: '2', label: 'Designer'},
+  {id: '3', label: 'Product Manager'},
+];
 
 export default () => {
   const {
@@ -70,7 +74,7 @@ export default () => {
     defaultValues: {
       email: 'example@baz.com',
       password: 'foobarbaz',
-      role: 'Designer',
+      role: '',
     },
     resolver: useYupValidationResolver(validationSchema),
     mode: 'onTouched',
@@ -93,21 +97,21 @@ export default () => {
     passwordRef.current = ref;
   };
   return (
-    <form onSubmit={onSubmit} action=".">
+    <form onSubmit={onSubmit} action="." noValidate={true}>
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
         <FormField
           orientation="vertical"
           isRequired={true}
           error={!!errors.role ? 'error' : undefined}
         >
-          <Select items={options}>
+          <Select items={options} getTextValue={item => item.label}>
             <FormField.Label>What is your role?</FormField.Label>
             <FormField.Input as={Select.Input} {...register('role')} width="280px" />
             <Select.Popper>
               <Select.Card>
                 <Select.List maxHeight={200}>
                   {item => {
-                    return <Select.Item>{item}</Select.Item>;
+                    return <Select.Item>{item.label}</Select.Item>;
                   }}
                 </Select.List>
               </Select.Card>

package/dist/mdx/preview-react/form-field/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 default () => {
   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} />

package/dist/mdx/preview-react/form-field/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 default () => {
   const [value, setValue] = React.useState('');
@@ -18,7 +26,7 @@ export default () => {
   };
 
   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} />

package/dist/mdx/preview-react/form-field/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 default () => {
   const [value, setValue] = React.useState('');
@@ -29,7 +35,9 @@ export default () => {
       <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>
   );

package/dist/mdx/preview-react/radio/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, px2rem} from '@workday/canvas-kit-styling';
+
+const formfieldInputStyles = createStyles({
+  width: px2rem(200),
+});
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -18,10 +23,10 @@ export default () => {
       <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>

package/dist/mdx/preview-react/radio/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, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const styleOverrides = {
+  formfieldInputStyles: createStyles({
+    width: px2rem(200),
+  }),
+  radioGroupLabelTextStyles: createStyles({
+    color: base.berrySmoothie400,
+  }),
+};
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -21,20 +32,26 @@ export default () => {
           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>

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

@@ -2,14 +2,20 @@ import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 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 {system} from '@workday/canvas-tokens-web';
 
-const StyledFormField = styled(FormField)<StyledType>({
-  legend: {
-    color: colors.frenchVanilla100,
-  },
-});
+const styleOverrides = {
+  containerStyles: createStyles({
+    backgroundColor: system.color.bg.primary.default,
+    padding: system.space.x4,
+  }),
+  formFieldStyles: createStyles({
+    legend: {
+      color: system.color.text.inverse,
+    },
+  }),
+};
 
 export default () => {
   const [value, setValue] = React.useState<string | number>('deep-dish');
@@ -22,8 +28,8 @@ export default () => {
   };
 
   return (
-    <Box backgroundColor="blueberry400" padding="s">
-      <StyledFormField as="fieldset">
+    <Box cs={styleOverrides.containerStyles}>
+      <FormField cs={styleOverrides.formFieldStyles} as="fieldset">
         <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
         <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>
           <RadioGroup.RadioButton variant="inverse" value="deep-dish">
@@ -39,7 +45,7 @@ export default () => {
             Cauliflower
           </RadioGroup.RadioButton>
         </FormField.Input>
-      </StyledFormField>
+      </FormField>
     </Box>
   );
 };

package/dist/mdx/preview-react/status-indicator/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 default () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator emphasis="high">
         <StatusIndicator.Icon icon={uploadCloudIcon} />
         <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>

package/dist/mdx/preview-react/status-indicator/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 default () => {
   return (
-    <Flex gap="s">
+    <Flex cs={parentContainerStyles}>
       <StatusIndicator>
         <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>

package/dist/mdx/preview-react/status-indicator/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 default () => {
   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

package/dist/mdx/preview-react/status-indicator/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 default () => {
   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 default () => {
           <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} />

package/dist/mdx/react/button/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 default () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <DeleteButton>Delete</DeleteButton>
     <DeleteButton icon={trashIcon} iconPosition="start">
       Delete

package/dist/mdx/react/button/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 {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export default () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <ExternalHyperlink href="https://workday.com" variant="inverse">
       Hyperlink
     </ExternalHyperlink>

package/dist/mdx/react/button/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 {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export default () => (
-  <Box backgroundColor="blueberry400" padding="s">
+  <Box cs={parentContainerStyles}>
     <Hyperlink href="#hyperlink" variant="inverse">
       Hyperlink
     </Hyperlink>

package/dist/mdx/react/button/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 default () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton>Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start">
       Primary

package/dist/mdx/react/button/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 {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export default () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <PrimaryButton variant="inverse">Primary</PrimaryButton>
     <PrimaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Primary

package/dist/mdx/react/button/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 default () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton>Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} iconPosition="start">
       Secondary

package/dist/mdx/react/button/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 {system} from '@workday/canvas-tokens-web';
+
+const parentContainerStyles = createStyles({
+  gap: system.space.x4,
+  padding: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+});
 
 export default () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <SecondaryButton variant="inverse">Secondary</SecondaryButton>
     <SecondaryButton icon={plusIcon} variant="inverse">
       Secondary

package/dist/mdx/react/button/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 default () => (
-  <Flex gap="s" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton>Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start">
       Tertiary

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

@@ -5,12 +5,19 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   plusIcon,
   relatedActionsVerticalIcon,
-  arrowRightIcon,
   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,
+  backgroundColor: system.color.bg.primary.default,
+});
 
 export default () => (
-  <Flex gap="s" backgroundColor="blueberry400" padding="s">
+  <Flex cs={parentContainerStyles}>
     <TertiaryButton variant="inverse">Tertiary</TertiaryButton>
     <TertiaryButton icon={plusIcon} iconPosition="start" variant="inverse">
       Tertiary

package/dist/mdx/react/checkbox/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({
+  marginInlineLeft: system.space.x8,
+  marginTop: system.space.x2,
+});
 
 export default () => {
   const [pizzaChecked, setPizzaChecked] = React.useState(false);
@@ -58,7 +65,7 @@ export default () => {
         label="Supreme Pizza Toppings"
         onChange={handlePizzaChange}
       />
-      <Box marginLeft="l" marginTop="xxs">
+      <Box cs={styleOverrides}>
         {toppings.map((topping, index) => (
           <Checkbox
             checked={topping.checked}

package/dist/mdx/react/checkbox/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 {system} from '@workday/canvas-tokens-web';
+
+const styleOverrides = createStyles({
+  gap: system.space.x4,
+  backgroundColor: system.color.bg.primary.default,
+  padding: system.space.x4,
+});
 
 export default () => {
   const [checked, setChecked] = React.useState(false);
@@ -10,7 +18,7 @@ export default () => {
   };
 
   return (
-    <Flex gap="s" backgroundColor="blueberry400" padding="s">
+    <Flex cs={styleOverrides}>
       <Checkbox
         variant="inverse"
         checked={checked}