@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/src/components/Carousel/Carousel.docs.mdx

@@ -8,6 +8,7 @@ import {
 } from '../../../docs/components';
 import { Carousel, CarouselControls, CarouselItem } from './';
 import * as Stories from './Carousel.stories';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 <Meta title="Components / Carousel" />
 
@@ -53,13 +54,13 @@ Carousel Controls are used to clearly indicate multiple pieces of content and to
   <Center flex={1}>
     <Carousel width={300}>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-          <BodyText color="white">I'm a Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+          <BodyText color="inverted">I'm a Carousel item!</BodyText>
         </Box>
       </CarouselItem>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-          <BodyText color="white">I'm another Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+          <BodyText color="inverted">I'm another Carousel item!</BodyText>
         </Box>
       </CarouselItem>
     </Carousel>
@@ -68,17 +69,18 @@ Carousel Controls are used to clearly indicate multiple pieces of content and to
 
 ```jsx
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Carousel width={300}>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-        <BodyText color="white">I'm a Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+        <BodyText color="inverted">I'm a Carousel item!</BodyText>
       </Box>
     </CarouselItem>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-        <BodyText color="white">I'm another Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+        <BodyText color="inverted">I'm another Carousel item!</BodyText>
       </Box>
     </CarouselItem>
   </Carousel>
@@ -93,13 +95,13 @@ The `Carousel` component includes built-in pagination controls by default. You c
   <Center flex={1}>
     <Carousel width={300}>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-          <BodyText color="white">I'm a Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+          <BodyText color="inverted">I'm a Carousel item!</BodyText>
         </Box>
       </CarouselItem>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-          <BodyText color="white">I'm another Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+          <BodyText color="inverted">I'm another Carousel item!</BodyText>
         </Box>
       </CarouselItem>
     </Carousel>
@@ -108,17 +110,18 @@ The `Carousel` component includes built-in pagination controls by default. You c
 
 ```jsx
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Carousel width={300}>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-        <BodyText color="white">I'm a Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+        <BodyText color="inverted">I'm a Carousel item!</BodyText>
       </Box>
     </CarouselItem>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-        <BodyText color="white">I'm another Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+        <BodyText color="inverted">I'm another Carousel item!</BodyText>
       </Box>
     </CarouselItem>
   </Carousel>
@@ -133,13 +136,13 @@ Add previous and next navigation buttons to the controls by setting `showNavigat
   <Center flex={1}>
     <Carousel width={300} showNavigation>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-          <BodyText color="white">I'm a Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+          <BodyText color="inverted">I'm a Carousel item!</BodyText>
         </Box>
       </CarouselItem>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-          <BodyText color="white">I'm another Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+          <BodyText color="inverted">I'm another Carousel item!</BodyText>
         </Box>
       </CarouselItem>
     </Carousel>
@@ -148,17 +151,18 @@ Add previous and next navigation buttons to the controls by setting `showNavigat
 
 ```jsx
 import { BodyText, Box, Carousel, CarouselItem } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Carousel width={300} showNavigation>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-        <BodyText color="white">I'm a Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+        <BodyText color="inverted">I'm a Carousel item!</BodyText>
       </Box>
     </CarouselItem>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-        <BodyText color="white">I'm another Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+        <BodyText color="inverted">I'm another Carousel item!</BodyText>
       </Box>
     </CarouselItem>
   </Carousel>
@@ -173,13 +177,13 @@ The `CarouselControls` component is to be used in conjunction with the `Carousel
   <Center flex={1}>
     <Carousel width={300}>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-          <BodyText color="white">I'm a Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+          <BodyText color="inverted">I'm a Carousel item!</BodyText>
         </Box>
       </CarouselItem>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-          <BodyText color="white">I'm another Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+          <BodyText color="inverted">I'm another Carousel item!</BodyText>
         </Box>
       </CarouselItem>
       <CarouselControls style={{ marginTop: 16 }} />
@@ -189,17 +193,18 @@ The `CarouselControls` component is to be used in conjunction with the `Carousel
 
 ```jsx
 import { BodyText, Box, Carousel, CarouselControls } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Carousel width={300}>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-        <BodyText color="white">I'm a Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+        <BodyText color="inverted">I'm a Carousel item!</BodyText>
       </Box>
     </CarouselItem>
     <CarouselItem>
-      <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-        <BodyText color="white">I'm another Carousel item!</BodyText>
+      <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+        <BodyText color="inverted">I'm another Carousel item!</BodyText>
       </Box>
     </CarouselItem>
     <CarouselControls style={{ marginTop: 16 }} />
@@ -232,13 +237,13 @@ const MyComponent = () => {
     <>
       <Carousel ref={carouselRef} width={300}>
         <CarouselItem>
-          <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-            <BodyText color="white">Slide 1</BodyText>
+          <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+            <BodyText color="inverted">Slide 1</BodyText>
           </Box>
         </CarouselItem>
         <CarouselItem>
-          <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-            <BodyText color="white">Slide 2</BodyText>
+          <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+            <BodyText color="inverted">Slide 2</BodyText>
           </Box>
         </CarouselItem>
       </Carousel>
@@ -262,13 +267,13 @@ const MyComponent = () => {
   return (
     <Carousel width={carouselWidth} itemWidth={itemWidth} centered showOverflow>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
-          <BodyText color="white">I'm a Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
+          <BodyText color="inverted">I'm a Carousel item!</BodyText>
         </Box>
       </CarouselItem>
       <CarouselItem>
-        <Box p="100" aspectRatio={1.6} backgroundColor="red800">
-          <BodyText color="white">I'm another Carousel item!</BodyText>
+        <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
+          <BodyText color="inverted">I'm another Carousel item!</BodyText>
         </Box>
       </CarouselItem>
     </Carousel>
@@ -345,9 +350,9 @@ When using a screen reader, users will navigate through the carousel items in or
 ```jsx
 <Carousel width={300}>
   <CarouselItem>
-    <Box p="100" aspectRatio={1.6} backgroundColor="purple800">
+    <Box p="100" aspectRatio={1.6} backgroundColor={color.purple[800]}>
       <BodyText
-        color="white"
+        color="inverted"
         accessibilityLabel="Special offer: 20% off your next bill"
         accessibilityHint="Double tap to view offer details"
       >
@@ -356,9 +361,9 @@ When using a screen reader, users will navigate through the carousel items in or
     </Box>
   </CarouselItem>
   <CarouselItem>
-    <Box p="100" aspectRatio={1.6} backgroundColor="red800">
+    <Box p="100" aspectRatio={1.6} backgroundColor={color.red[800]}>
       <BodyText
-        color="white"
+        color="inverted"
         accessibilityLabel="Refer a friend and earn rewards"
         accessibilityHint="Double tap to learn more about referrals"
       >

package/src/components/Center/Center.docs.mdx

@@ -2,6 +2,7 @@ import { Meta, Canvas, Story, Controls, Primary } from '@storybook/addon-docs/bl
 import * as Stories from './Center.stories';
 import { Center, Pressable, Box, BodyText } from '../..';
 import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 <Meta title="Primitives / Center" />
 
@@ -18,18 +19,19 @@ When you need to center-align content, the Center component comes in handy. It i
 
 <UsageWrap>
   <Center>
-    <Center backgroundColor="red400" width={300} height={200} padding="200">
-      <BodyText color="white">It's hard being in the middle of everything.</BodyText>
+    <Center backgroundColor={color.red[400]} width={300} height={200} padding="200">
+      <BodyText color="inverted">It's hard being in the middle of everything.</BodyText>
     </Center>
   </Center>
 </UsageWrap>
 
 ```jsx
 import { Center, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
-  <Center backgroundColor="red400" width={300} height={200} padding="200">
-    <BodyText color="white">It's hard being in the middle of everything.</BodyText>
+  <Center backgroundColor={color.red[400]} width={300} height={200} padding="200">
+    <BodyText color="inverted">It's hard being in the middle of everything.</BodyText>
   </Center>
 );
 ```

package/src/components/Container/Container.docs.mdx

@@ -1,4 +1,5 @@
 import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { color } from '@utilitywarehouse/hearth-tokens';
 import { BodyText, Box, Container } from '../..';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Container.stories';
@@ -33,8 +34,8 @@ The Container component is a layout primitive that provides consistent spacing a
 The Container component uses layout tokens automatically for responsive spacing:
 
 <UsageWrap>
-  <Container backgroundColor="backgroundSecondary">
-    <Box bg="blue400" p="200" borderRadius="md">
+  <Container backgroundColor="secondary">
+    <Box bg={color.blue['400']} p="200" borderRadius="md">
       <BodyText>Container content</BodyText>
     </Box>
   </Container>
@@ -42,10 +43,11 @@ The Container component uses layout tokens automatically for responsive spacing:
 
 ```jsx
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Container>
-    <Box bg="cyan400" p="200" borderRadius="md">
+    <Box bg={color.cyan['400']} p="200" borderRadius="md">
       <BodyText>Container content</BodyText>
     </Box>
   </Container>
@@ -60,10 +62,11 @@ You can override the default padding with custom values using space tokens:
 
 ```jsx
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Container padding="300">
-    <Box bg="cyan400" p="200" borderRadius="md">
+    <Box bg={color.cyan['400']} p="200" borderRadius="md">
       <BodyText>Container with padding</BodyText>
     </Box>
   </Container>
@@ -78,10 +81,11 @@ You can override the default margin with custom values using space tokens:
 
 ```jsx
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Container margin="300">
-    <Box bg="cyan400" p="200" borderRadius="md">
+    <Box bg={color.cyan['400']} p="200" borderRadius="md">
       <BodyText>Container with margin</BodyText>
     </Box>
   </Container>
@@ -96,16 +100,17 @@ The Container component supports a `spacing` prop for controlling gap between ch
 
 ```jsx
 import { Container, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Container spacing="xl" paddingHorizontal="200" paddingVertical="300">
-    <Box bg="cyan400" p="200" borderRadius="md">
+    <Box bg={color.cyan['400']} p="200" borderRadius="md">
       <BodyText>Item 1</BodyText>
     </Box>
-    <Box bg="purple400" p="200" borderRadius="md">
+    <Box bg={color.purple['400']} p="200" borderRadius="md">
       <BodyText>Item 2</BodyText>
     </Box>
-    <Box bg="pink400" p="200" borderRadius="md">
+    <Box bg={color.pink['400']} p="200" borderRadius="md">
       <BodyText>Item 3</BodyText>
     </Box>
   </Container>

package/src/components/Container/Container.props.ts

@@ -1,79 +1,14 @@
 import type { ViewProps } from 'react-native';
-import { SpaceValue, SpacingValues } from '../../types';
+import type {
+  BackgroundColorProps,
+  GapProps,
+  MarginProps,
+  PaddingProps,
+  SpacingValues,
+} from '../../types';
 
-interface ContainerProps extends ViewProps {
-  /**
-   * The padding of the container.
-   */
-  padding?: SpaceValue;
-  /**
-   * The horizontal padding of the container.
-   */
-  paddingHorizontal?: SpaceValue;
-  /**
-   * The vertical padding of the container.
-   */
-  paddingVertical?: SpaceValue;
-  /**
-   * The top padding of the container.
-   */
-  paddingTop?: SpaceValue;
-  /**
-   * The bottom padding of the container.
-   */
-  paddingBottom?: SpaceValue;
-  /**
-   * The left padding of the container.
-   */
-  paddingLeft?: SpaceValue;
-  /**
-   * The right padding of the container.
-   */
-  paddingRight?: SpaceValue;
-  /**
-   * The margin of the container.
-   */
-  margin?: SpaceValue;
-  /**
-   * The horizontal margin of the container.
-   */
-  marginHorizontal?: SpaceValue;
-  /**
-   * The vertical margin of the container.
-   */
-  marginVertical?: SpaceValue;
-  /**
-   * The top margin of the container.
-   */
-  marginTop?: SpaceValue;
-  /**
-   * The bottom margin of the container.
-   */
-  marginBottom?: SpaceValue;
-  /**
-   * The left margin of the container.
-   */
-  marginLeft?: SpaceValue;
-  /**
-   * The right margin of the container.
-   */
-  marginRight?: SpaceValue;
-  // Padding
-  p?: SpaceValue;
-  px?: SpaceValue;
-  py?: SpaceValue;
-  pt?: SpaceValue;
-  pb?: SpaceValue;
-  pl?: SpaceValue;
-  pr?: SpaceValue;
-  // Margin
-  m?: SpaceValue;
-  mx?: SpaceValue;
-  my?: SpaceValue;
-  mt?: SpaceValue;
-  mb?: SpaceValue;
-  ml?: SpaceValue;
-  mr?: SpaceValue;
+interface ContainerProps
+  extends ViewProps, MarginProps, PaddingProps, GapProps, BackgroundColorProps {
   /**
    * The spacing between child elements (gap).
    */
@@ -83,12 +18,6 @@ interface ContainerProps extends ViewProps {
    * @deprecated Use `spacing` instead. The `space` prop will be removed in a future release.
    */
   space?: SpacingValues;
-  /**
-   * The space between child elements.
-   */
-  gap?: SpaceValue;
-  backgroundColor?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
-  bg?: 'backgroundBrand' | 'backgroundPrimary' | 'backgroundSecondary' | 'transparent';
 }
 
 export default ContainerProps;

package/src/components/Container/Container.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Container } from '.';
 import { lightTheme } from '../../core/themes';
+import { useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { Box } from '../Box';
 
@@ -165,12 +166,12 @@ const meta = {
       description: 'The space between child elements.',
     },
     backgroundColor: {
-      options: ['backgroundBrand', 'backgroundPrimary', 'backgroundSecondary', 'transparent'],
+      options: ['brand', 'primary', 'secondary', 'transparent'],
       control: 'select',
       description: 'The background color of the container.',
     },
     bg: {
-      options: ['backgroundBrand', 'backgroundPrimary', 'backgroundSecondary', 'transparent'],
+      options: ['brand', 'primary', 'secondary', 'transparent'],
       control: 'select',
       description: 'The background color of the container.',
     },
@@ -185,51 +186,60 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-  render: args => (
-    <Box backgroundColor="red100">
-      <Container {...args} backgroundColor="backgroundSecondary">
-        <Box bg="blue400" p="200" borderRadius="md">
-          <BodyText>Container content 1</BodyText>
-        </Box>
-        <Box bg="purple400" p="200" borderRadius="md">
-          <BodyText>Container content 2</BodyText>
-        </Box>
-        <Box bg="piggyPink400" p="200" borderRadius="md">
-          <BodyText>Container content 3</BodyText>
-        </Box>
-      </Container>
-    </Box>
-  ),
+  render: args => {
+    const { color } = useTheme();
+    return (
+      <Box backgroundColor={color.red['100']}>
+        <Container {...args} backgroundColor="secondary">
+          <Box bg={color.blue['400']} p="200" borderRadius="md">
+            <BodyText>Container content 1</BodyText>
+          </Box>
+          <Box bg={color.purple['400']} p="200" borderRadius="md">
+            <BodyText>Container content 2</BodyText>
+          </Box>
+          <Box bg={color.piggyPink['400']} p="200" borderRadius="md">
+            <BodyText>Container content 3</BodyText>
+          </Box>
+        </Container>
+      </Box>
+    );
+  },
 };
 
 export const WithPadding: Story = {
   args: {
     padding: '300',
   },
-  render: args => (
-    <Box backgroundColor="red100">
-      <Container {...args} backgroundColor="backgroundSecondary">
-        <Box bg="blue400" p="200" borderRadius="md">
-          <BodyText>Container with padding</BodyText>
-        </Box>
-      </Container>
-    </Box>
-  ),
+  render: args => {
+    const { color } = useTheme();
+    return (
+      <Box backgroundColor={color.red['100']}>
+        <Container {...args} backgroundColor="secondary">
+          <Box bg={color.blue['400']} p="200" borderRadius="md">
+            <BodyText>Container with padding</BodyText>
+          </Box>
+        </Container>
+      </Box>
+    );
+  },
 };
 
 export const WithMargin: Story = {
   args: {
     margin: '300',
   },
-  render: args => (
-    <Box backgroundColor="red100">
-      <Container {...args} backgroundColor="backgroundSecondary">
-        <Box bg="blue400" p="200" borderRadius="md">
-          <BodyText>Container with margin</BodyText>
-        </Box>
-      </Container>
-    </Box>
-  ),
+  render: args => {
+    const { color } = useTheme();
+    return (
+      <Box backgroundColor={color.red['100']}>
+        <Container {...args} backgroundColor="secondary">
+          <Box bg={color.blue['400']} p="200" borderRadius="md">
+            <BodyText>Container with margin</BodyText>
+          </Box>
+        </Container>
+      </Box>
+    );
+  },
 };
 
 export const WithCustomSpacing: Story = {
@@ -238,37 +248,43 @@ export const WithCustomSpacing: Story = {
     paddingHorizontal: '200',
     paddingVertical: '300',
   },
-  render: args => (
-    <Box backgroundColor="red100">
-      <Container {...args} backgroundColor="backgroundSecondary">
-        <Box bg="blue400" p="200" borderRadius="md">
-          <BodyText>Item 1</BodyText>
-        </Box>
-        <Box bg="purple400" p="200" borderRadius="md">
-          <BodyText>Item 2</BodyText>
-        </Box>
-        <Box bg="piggyPink400" p="200" borderRadius="md">
-          <BodyText>Item 3</BodyText>
-        </Box>
-        <Box bg="orange400" p="200" borderRadius="md">
-          <BodyText>Item 4</BodyText>
-        </Box>
-      </Container>
-    </Box>
-  ),
+  render: args => {
+    const { color } = useTheme();
+    return (
+      <Box backgroundColor={color.red['100']}>
+        <Container {...args} backgroundColor="secondary">
+          <Box bg={color.blue['400']} p="200" borderRadius="md">
+            <BodyText>Item 1</BodyText>
+          </Box>
+          <Box bg={color.purple['400']} p="200" borderRadius="md">
+            <BodyText>Item 2</BodyText>
+          </Box>
+          <Box bg={color.piggyPink['400']} p="200" borderRadius="md">
+            <BodyText>Item 3</BodyText>
+          </Box>
+          <Box bg={color.orange['400']} p="200" borderRadius="md">
+            <BodyText>Item 4</BodyText>
+          </Box>
+        </Container>
+      </Box>
+    );
+  },
 };
 
 export const LayoutTokens: Story = {
-  render: () => (
-    <Box backgroundColor="red100">
-      <Container backgroundColor="backgroundSecondary">
-        <Box bg="blue100" p="200" borderRadius="md">
-          <BodyText>
-            This Container uses the responsive layout tokens from the design system. It will
-            automatically adjust margin and padding based on the current breakpoint.
-          </BodyText>
-        </Box>
-      </Container>
-    </Box>
-  ),
+  render: () => {
+    const { color } = useTheme();
+    return (
+      <Box backgroundColor={color.red['100']}>
+        <Container backgroundColor="secondary">
+          <Box bg={color.blue['100']} p="200" borderRadius="md">
+            <BodyText>
+              This Container uses the responsive layout tokens from the design system. It will
+              automatically adjust margin and padding based on the current breakpoint.
+            </BodyText>
+          </Box>
+        </Container>
+      </Box>
+    );
+  },
 };