@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/build/utils/styleUtils.d.ts

@@ -6,10 +6,34 @@ export declare const propStyleMapping: {
     [key: string]: keyof ViewStyle;
 };
 /**
- * Mapping of style props to their theme category
+ * Mapping of style props to their theme category.
+ *
+ * - `backgroundColor` maps to `theme.helpers.semanticColor.background` (simplified semantic background tokens)
+ *   with fallback to `theme.color` for full color values
+ * - `borderColor` (and variants) maps to `theme.helpers.semanticColor.border` (simplified semantic border tokens)
+ *   with fallback to `theme.color` for full color values
+ * - Other color props (shadowColor, outlineColor) still map to the full `theme.color` object
  */
 export declare const themeStyleMapping: {
-    [key in keyof ViewStyle]?: string;
+    [key: string]: string;
+};
+/**
+ * Mapping of theme categories to their fallback categories.
+ * When a value isn't found in the primary theme category, the fallback is tried.
+ * This ensures backward compatibility with full color values.
+ */
+export declare const themeStyleFallbackMapping: {
+    [key: string]: string;
+};
+/**
+ * Mapping of custom semantic prop names to their style prop + theme category.
+ * These are props that don't correspond 1:1 with ViewStyle keys.
+ */
+export declare const semanticPropMapping: {
+    [key: string]: {
+        styleProp: string;
+        themeKey: string;
+    };
 };
 /**
  * Set of all possible ViewStyle property names

package/build/utils/styleUtils.js

@@ -31,7 +31,13 @@ export const propStyleMapping = {
     space: 'gap',
 };
 /**
- * Mapping of style props to their theme category
+ * Mapping of style props to their theme category.
+ *
+ * - `backgroundColor` maps to `theme.helpers.semanticColor.background` (simplified semantic background tokens)
+ *   with fallback to `theme.color` for full color values
+ * - `borderColor` (and variants) maps to `theme.helpers.semanticColor.border` (simplified semantic border tokens)
+ *   with fallback to `theme.color` for full color values
+ * - Other color props (shadowColor, outlineColor) still map to the full `theme.color` object
  */
 export const themeStyleMapping = {
     // Space related
@@ -68,18 +74,20 @@ export const themeStyleMapping = {
     maxHeight: 'space',
     start: 'space',
     end: 'space',
-    // Colors
-    backgroundColor: 'color',
-    borderColor: 'color',
-    borderBottomColor: 'color',
-    borderLeftColor: 'color',
-    borderRightColor: 'color',
-    borderTopColor: 'color',
-    borderBlockColor: 'color',
-    borderBlockEndColor: 'color',
-    borderBlockStartColor: 'color',
-    borderEndColor: 'color',
-    borderStartColor: 'color',
+    // Semantic background color (simplified keys: 'brand', 'primary', 'secondary')
+    backgroundColor: 'helpers.semanticColor.background',
+    // Semantic border colors (simplified keys: 'strong', 'subtle')
+    borderColor: 'helpers.semanticColor.border',
+    borderBottomColor: 'helpers.semanticColor.border',
+    borderLeftColor: 'helpers.semanticColor.border',
+    borderRightColor: 'helpers.semanticColor.border',
+    borderTopColor: 'helpers.semanticColor.border',
+    borderBlockColor: 'helpers.semanticColor.border',
+    borderBlockEndColor: 'helpers.semanticColor.border',
+    borderBlockStartColor: 'helpers.semanticColor.border',
+    borderEndColor: 'helpers.semanticColor.border',
+    borderStartColor: 'helpers.semanticColor.border',
+    // Other colors (still use the full color object for flexibility)
     outlineColor: 'color',
     shadowColor: 'color',
     // Border radii
@@ -105,6 +113,27 @@ export const themeStyleMapping = {
     borderTopWidth: 'borderWidth',
     borderWidth: 'borderWidth',
 };
+/**
+ * Mapping of theme categories to their fallback categories.
+ * When a value isn't found in the primary theme category, the fallback is tried.
+ * This ensures backward compatibility with full color values.
+ */
+export const themeStyleFallbackMapping = {
+    'helpers.semanticColor.background': 'color',
+    'helpers.semanticColor.border': 'color',
+    'helpers.semanticColor.text': 'color',
+    'helpers.semanticColor.icon': 'color',
+};
+/**
+ * Mapping of custom semantic prop names to their style prop + theme category.
+ * These are props that don't correspond 1:1 with ViewStyle keys.
+ */
+export const semanticPropMapping = {
+    /** Maps iconColor prop -> resolves against theme.helpers.semanticColor.icon (semantic icon tokens) */
+    iconColor: { styleProp: 'color', themeKey: 'helpers.semanticColor.icon' },
+    /** Maps color prop -> resolves against theme.helpers.semanticColor.text (semantic text tokens) */
+    color: { styleProp: 'color', themeKey: 'helpers.semanticColor.text' },
+};
 /**
  * Set of all possible ViewStyle property names
  */

package/build/utils/themeValueHelpers.d.ts

@@ -15,3 +15,16 @@ export declare const getNestedValue: (obj: any, path: string[]) => any;
  * - Numeric suffix pattern (broadbandBlue100 -> themeMapping.broadbandBlue[100])
  */
 export declare const resolveThemeValue: (value: any, themeMapping: any) => any;
+/**
+ * Resolve a dot-notation key against the theme object.
+ * e.g., 'semanticColor.text' -> theme.semanticColor.text
+ * Simple keys like 'space' are resolved via direct bracket access.
+ */
+export declare const resolveThemeKey: (theme: Record<string, any>, key: string) => any;
+/**
+ * Resolve a theme value with a fallback theme mapping.
+ * First tries the primary mapping (e.g., theme.semanticColor.background for simplified tokens).
+ * If not found, falls back to the secondary mapping (e.g., theme.color for full color values).
+ * This ensures backward compatibility while supporting simplified token names.
+ */
+export declare const resolveThemeValueWithFallback: (value: any, primaryMapping: any, fallbackMapping?: any) => any;

package/build/utils/themeValueHelpers.js

@@ -52,3 +52,32 @@ export const resolveThemeValue = (value, themeMapping) => {
     // If none of the approaches work, return the original value
     return value;
 };
+/**
+ * Resolve a dot-notation key against the theme object.
+ * e.g., 'semanticColor.text' -> theme.semanticColor.text
+ * Simple keys like 'space' are resolved via direct bracket access.
+ */
+export const resolveThemeKey = (theme, key) => {
+    if (key.includes('.')) {
+        return key.split('.').reduce((obj, k) => obj?.[k], theme);
+    }
+    return theme[key];
+};
+/**
+ * Resolve a theme value with a fallback theme mapping.
+ * First tries the primary mapping (e.g., theme.semanticColor.background for simplified tokens).
+ * If not found, falls back to the secondary mapping (e.g., theme.color for full color values).
+ * This ensures backward compatibility while supporting simplified token names.
+ */
+export const resolveThemeValueWithFallback = (value, primaryMapping, fallbackMapping) => {
+    const resolved = resolveThemeValue(value, primaryMapping);
+    // If the value was resolved (changed from input), return it
+    if (resolved !== value) {
+        return resolved;
+    }
+    // If we have a fallback mapping and the primary didn't resolve, try the fallback
+    if (fallbackMapping) {
+        return resolveThemeValue(value, fallbackMapping);
+    }
+    return resolved;
+};

package/docs/changelog.mdx

@@ -9,6 +9,78 @@ import { BackToTopButton } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.20.0
+
+### Minor Changes
+
+- [#898](https://github.com/utilitywarehouse/hearth/pull/898) [`d32a188`](https://github.com/utilitywarehouse/hearth/commit/d32a18840c04222b7b1348133137dc5e56745fe3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add validation and helper text props to `Select` component
+
+  The `Select` component now supports built-in validation messages and helper text through new props: `invalidText`, `validText`, `helperText`, and `helperIcon`. This provides a more integrated validation experience without needing to wrap the component in FormField.
+
+  **Components affected**:
+  - `Select`
+
+  **Developer changes**:
+
+  You can now add helper text and validation messages directly to Select:
+
+  ```tsx
+  import { Select } from '@utilitywarehouse/hearth-react-native';
+
+  <Select
+    label="Choose an option"
+    placeholder="Select an option"
+    helperText="This is some helper text for the select component."
+    validationStatus="invalid"
+    invalidText="Please select a valid option"
+    options={[
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ]}
+    value={value}
+    onValueChange={setValue}
+  />;
+  ```
+
+  The component now also supports a `labelVariant` prop to control label styling:
+
+  ```tsx
+  <Select
+    label="Choose an option"
+    labelVariant="heading"
+    // ... other props
+  />
+  ```
+
+  These new props work seamlessly alongside the existing FormField wrapper if you prefer that approach. No changes are required to existing Select implementations.
+
+## 0.19.1
+
+### Patch Changes
+
+- [#886](https://github.com/utilitywarehouse/hearth/pull/886) [`7a948de`](https://github.com/utilitywarehouse/hearth/commit/7a948dea0d15ce7ca34e4d405e86984213c96196) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add `loadingHeading` prop to `Modal` component
+
+  The `Modal` component now supports a `loadingHeading` prop to customise the heading text displayed during loading states. If not provided, it defaults to 'Loading...'.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes required. To customise the loading heading text, use the new `loadingHeading` prop:
+
+  ```tsx
+  <Modal
+    loading={isLoading}
+    loadingHeading="Processing your request..."
+    heading="Confirm Action"
+    description="Please wait while we process your request"
+  />
+  ```
+
+- [#888](https://github.com/utilitywarehouse/hearth/pull/888) [`9b3e172`](https://github.com/utilitywarehouse/hearth/commit/9b3e172f9964026f4f3ba140731432ac63550256) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Align `Toast` icon and dismiss button to the top
+
 ## 0.19.0
 
 ### Minor Changes
@@ -126,7 +198,7 @@ The changelog for the Hearth React Native library. Here you can find all the cha
 
   **Developer changes**:
 
-  You can now customize `IconButton` colors for service-specific branding:
+  You can now customise `IconButton` colors for service-specific branding:
 
   ```tsx
   import { IconButton } from '@utilitywarehouse/hearth-react-native';
@@ -147,7 +219,7 @@ The changelog for the Hearth React Native library. Here you can find all the cha
   - `activeBackgroundColor` - Sets the background color when pressed or in an active state
   - `shadowColor` - Sets the shadow/elevation color
 
-  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customizing colors for specific branding requirements.
+  These overrides work alongside the existing `variant` and `colorScheme` props, allowing you to maintain structural styling while customising colors for specific branding requirements.
 
 ### Patch Changes
 

package/docs/components/AllComponents.web.tsx

@@ -17,6 +17,7 @@ import {
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
 // @ts-expect-error - Module missing type declarations
 import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
+import { color } from '@utilitywarehouse/hearth-tokens';
 import { Pressable, ScrollView, View, ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import {
@@ -248,8 +249,8 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Box" link="/?path=/docs/primitives-box--docs">
             <Center flex={1}>
-              <Box backgroundColor="grey900" padding="300" width={200} height={100}>
-                <BodyText color={isDark ? 'grey100' : 'white'} weight="semibold">
+              <Box backgroundColor={color.grey[900]} padding="300" width={200} height={100}>
+                <BodyText color={isDark ? 'primary' : 'inverted'} weight="semibold">
                   This is a Box
                 </BodyText>
               </Box>
@@ -275,14 +276,14 @@ const AllComponents: React.FC = () => {
               <Carousel itemWidth={150} centered width={150}>
                 <CarouselItem>
                   <Box
-                    backgroundColor="blue700"
+                    backgroundColor={color.blue[700]}
                     width={150}
                     height={100}
                     px="100"
                     borderRadius="md"
                   >
                     <Center flex={1}>
-                      <BodyText color="white" textAlign="center">
+                      <BodyText color="inverted" textAlign="center">
                         I'm a carousel item
                       </BodyText>
                     </Center>
@@ -290,14 +291,14 @@ const AllComponents: React.FC = () => {
                 </CarouselItem>
                 <CarouselItem>
                   <Box
-                    backgroundColor="purple700"
+                    backgroundColor={color.purple[700]}
                     width={150}
                     height={100}
                     px="100"
                     borderRadius="md"
                   >
                     <Center flex={1}>
-                      <BodyText color="white" textAlign="center">
+                      <BodyText color="inverted" textAlign="center">
                         I'm another carousel item
                       </BodyText>
                     </Center>
@@ -305,14 +306,14 @@ const AllComponents: React.FC = () => {
                 </CarouselItem>
                 <CarouselItem>
                   <Box
-                    backgroundColor="green700"
+                    backgroundColor={color.green[700]}
                     width={150}
                     height={100}
                     px="100"
                     borderRadius="md"
                   >
                     <Center flex={1}>
-                      <BodyText color="white" textAlign="center">
+                      <BodyText color="inverted" textAlign="center">
                         I'm also a carousel item
                       </BodyText>
                     </Center>
@@ -323,8 +324,8 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Center" link="/?path=/docs/primitives-center--docs">
             <Center flex={1}>
-              <Center backgroundColor="red400" padding="300" width={200} height={100}>
-                <BodyText color={isDark ? 'grey1000' : 'white'} weight="semibold">
+              <Center backgroundColor={color.red[400]} padding="300" width={200} height={100}>
+                <BodyText color={isDark ? 'primary' : 'inverted'} weight="semibold">
                   I am in the Center
                 </BodyText>
               </Center>
@@ -339,10 +340,10 @@ const AllComponents: React.FC = () => {
             </Center>
           </ComponentWrapper>
           <ComponentWrapper name="Container" link="/?path=/docs/primitives-container--docs">
-            <Container spacing="md" backgroundColor="backgroundSecondary">
-              <Box h={20} bg="blue300" />
-              <Box h={20} bg="blue400" />
-              <Box h={20} bg="blue500" />
+            <Container spacing="md" backgroundColor="secondary">
+              <Box h={20} bg={color.blue[300]} />
+              <Box h={20} bg={color.blue[400]} />
+              <Box h={20} bg={color.blue[500]} />
             </Container>
           </ComponentWrapper>
           <ComponentWrapper name="Currency Input" link="/?path=/docs/forms-currency-input--docs">
@@ -445,10 +446,10 @@ const AllComponents: React.FC = () => {
           <ComponentWrapper name="Flex" link="/?path=/docs/primitives-flex--docs">
             <Center flex={1}>
               <Flex direction="row" spacing="md">
-                <Box w={40} h={40} bg="blue300" />
-                <Box w={40} h={40} bg="blue400" />
-                <Box w={40} h={40} bg="blue500" />
-                <Box w={40} h={40} bg="blue600" />
+                <Box w={40} h={40} bg={color.blue[300]} />
+                <Box w={40} h={40} bg={color.blue[400]} />
+                <Box w={40} h={40} bg={color.blue[500]} />
+                <Box w={40} h={40} bg={color.blue[600]} />
               </Flex>
             </Center>
           </ComponentWrapper>
@@ -468,10 +469,10 @@ const AllComponents: React.FC = () => {
             <Center flex={1}>
               <Box width={100}>
                 <Grid columns={2} spacing="md">
-                  <Box w={40} h={40} bg="blue300" />
-                  <Box w={40} h={40} bg="blue400" />
-                  <Box w={40} h={40} bg="blue500" />
-                  <Box w={40} h={40} bg="blue600" />
+                  <Box w={40} h={40} bg={color.blue[300]} />
+                  <Box w={40} h={40} bg={color.blue[400]} />
+                  <Box w={40} h={40} bg={color.blue[500]} />
+                  <Box w={40} h={40} bg={color.blue[600]} />
                 </Grid>
               </Box>
             </Center>
@@ -649,7 +650,6 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Pill Group" link="/?path=/docs/components-pill-group--docs">
             <Center flex={1} p="200">
-              (
               <PillGroup
                 value={pillValue}
                 onChange={v => setPillValue(v as string[])}
@@ -661,7 +661,6 @@ const AllComponents: React.FC = () => {
                 <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />
                 <Pill value="mobile" label="Mobile" icon={MobileMediumIcon} />
               </PillGroup>
-              );
             </Center>
           </ComponentWrapper>
           <ComponentWrapper

package/docs/components/UsageWrap.tsx

@@ -6,10 +6,10 @@ const UsageWrap: FC<PropsWithChildren> = ({ children }) => (
     <Box
       mt="300"
       p="200"
-      bg="backgroundPrimary"
+      bg="primary"
       borderRadius="md"
       borderWidth="1"
-      borderColor="borderSubtle"
+      borderColor="subtle"
       width="100%"
       position="relative"
     >

package/docs/introduction.mdx

@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/addon-docs/blocks';
-import pig from '../../../shared/storybook/assets/images/react-native-pig.png';
 import { version } from '../package.json';
 import { Box } from '../src';
 import { BackToTopButton, NextPrevPage } from './components';
@@ -8,17 +7,11 @@ import { BackToTopButton, NextPrevPage } from './components';
 
 <BackToTopButton />
 
-<Box alignItems='center' style={{textAlign:"center"}}>
-
-<img src={pig} alt="React Native Package" width={240} height={240} />
-
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
 Current version: v{version}
 
-</Box>
-
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.
 
 - [Installation](#installation)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,10 +56,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-tokens": "^0.2.2",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.3.0"
+    "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
+    "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
@@ -85,7 +85,9 @@
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "npm run copyChangelog && storybook dev -p 6006",
+    "dev:docs": "storybook dev -p 6002 --no-open --docs",
     "build:storybook": "npm run copyChangelog && storybook build",
+    "build:storybook:docs": "npm run copyChangelog && storybook build --docs",
     "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
   }
 }

package/src/components/BodyText/BodyText.props.ts

@@ -1,24 +1,10 @@
-import { Ref } from 'react';
-import type { TextProps as RNTextProps, Text, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { CommonTextProps } from '../../types';
 
-interface TextProps extends RNTextProps {
+interface BodyTextProps extends CommonTextProps {
+  /** Text size variant. */
   size?: 'sm' | 'md' | 'lg';
-  strikeThrough?: boolean;
-  underline?: boolean;
-  truncated?: boolean;
+  /** Font weight variant. */
   weight?: 'regular' | 'semibold' | 'bold';
-  italic?: boolean;
-  color?: ColorValue;
-  textTransform?: TextStyle['textTransform'];
-  textAlign?: TextStyle['textAlign'];
-  textAlignVertical?: TextStyle['textAlignVertical'];
-  textDecorationLine?: TextStyle['textDecorationLine'];
-  textDecorationStyle?: TextStyle['textDecorationStyle'];
-  textDecorationColor?: ColorValue;
-  userSelect?: TextStyle['userSelect'];
-  inverted?: boolean;
-  ref?: Ref<Text>;
 }
 
-export default TextProps;
+export default BodyTextProps;

package/src/components/BodyText/BodyText.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { BodyText } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { coloursAsArray } from '../../utils';
+import { textColorKeys } from '../../utils/coloursAsArray';
 import { Box } from '../Box';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -45,7 +46,7 @@ const meta = {
       description: 'Strike through the text.',
     },
     color: {
-      options: coloursAsArray(),
+      options: textColorKeys,
       control: 'select',
       description: 'Color of the text. Use the color name from the theme.',
     },

package/src/components/BodyText/BodyText.tsx

@@ -1,8 +1,9 @@
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
 import type BodyTextProps from './BodyText.props';
 
-import { getFlattenedColorValue } from '../../utils';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 
 const BodyText = ({
   children,
@@ -23,6 +24,9 @@ const BodyText = ({
   inverted,
   ...props
 }: BodyTextProps) => {
+  // Extract margin utility props from remaining props
+  const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
+
   styles.useVariants({
     size,
     weight,
@@ -34,7 +38,7 @@ const BodyText = ({
 
   return (
     <Text
-      {...props}
+      {...remainingProps}
       {...(truncated
         ? {
             numberOfLines: 1,
@@ -43,7 +47,7 @@ const BodyText = ({
         : {})}
       style={[
         styles.text,
-        props.style,
+        utilityStyles,
         {
           ...(textTransform && { textTransform }),
           ...(textAlign && { textAlign }),
@@ -54,6 +58,7 @@ const BodyText = ({
           ...(textAlignVertical && { textAlignVertical }),
         },
         styles.getColours(color, textDecorationColor),
+        props.style,
       ]}
     >
       {children}
@@ -117,13 +122,19 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   getColours: (color?: string, textDecorationColor?: string) => ({
-    ...(color ? { color: getFlattenedColorValue(color, theme.color) } : {}),
+    ...(color
+      ? {
+          color: resolveThemeValueWithFallback(
+            color,
+            theme.helpers.semanticColor.text,
+            theme.color
+          ),
+        }
+      : {}),
     ...(textDecorationColor
       ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
       : {}),
   }),
 }));
 
-BodyText.displayName = 'BodyText';
-
 export default BodyText;

package/src/components/Box/Box.docs.mdx

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