@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/components/Card/Card.docs.mdx

@@ -1,7 +1,7 @@
-import { Meta, Canvas, Story, Primary, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/blocks';
+import { BodyText, Card, Center, DetailText } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Card.stories';
-import { Center, Card, BodyText, DetailText } from '../../';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
 
 <Meta title="Components / Card" />
 
@@ -29,7 +29,7 @@ A Card component serves as a visual container that groups related content and ac
 
 <UsageWrap>
   <Center>
-    <Card colorScheme="white" variant="subtle">
+    <Card colorScheme="neutralStrong" variant="subtle">
       <DetailText size="2xl">Quick Start</DetailText>
       <BodyText>Start building your next project in minutes.</BodyText>
     </Card>
@@ -40,7 +40,7 @@ A Card component serves as a visual container that groups related content and ac
 import { Card, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Card colorScheme="white" variant="subtle">
+  <Card colorScheme="neutralStrong" variant="subtle">
     <DetailText size="2xl">Quick Start</DetailText>
     <BodyText>Start building your next project in minutes.</BodyText>
   </Card>
@@ -49,22 +49,22 @@ const MyComponent = () => (
 
 ## Props
 
-| Property       | Type                                                                                                                                                           | Description                                | Default      |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------ |
-| variant        | `'subtle' \| 'emphasis' `                                                                                                                                      | The variant of the card.                   | `'subtle'`   |
-| colorScheme    | `'white' \| 'warmWhite' \| 'purple' \| 'energyBlue'` <br /> `'broadbandGreen' \| 'mobileRose' \| 'insuranceOrange' \| 'cashbackLilac' \|` <br /> `'piggyPink'` | The color scheme of the card.              | `'white'`    |
-| noPadding      | `boolean`                                                                                                                                                      | Wether or not the card has padding.        | `false`      |
-| selected       | `boolean`                                                                                                                                                      | Whether the card is selected.              | `false`      |
-| onPress        | `() => void`                                                                                                                                                   | Callback function to be called.            | -            |
-| disabled       | `boolean`                                                                                                                                                      | Whether the card is disabled.              | `false`      |
-| space          | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                                                                                                               | The space between the content.             | `none`       |
-| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                                    | The align items of the flex container.     | `flex-start` |
-| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                                       | The justify content of the flex container. | `flex-start` |
-| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                                         | The wrap of the flex container.            | `nowrap`     |
-| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                                       | The direction of the flex container.       | `column`     |
-| gap            | `number`                                                                                                                                                       | The gap between the content.               | `0`          |
-| rowGap         | `number`                                                                                                                                                       | The row gap between the content.           | `0`          |
-| columnGap      | `number`                                                                                                                                                       | The column gap between the content.        | `0`          |
+| Property       | Type                                                                                                                                         | Description                                | Default           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
+| variant        | `'subtle' \| 'emphasis' `                                                                                                                    | The variant of the card.                   | `'subtle'`        |
+| colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'purple' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'pig'` | The color scheme of the card.              | `'neutralStrong'` |
+| noPadding      | `boolean`                                                                                                                                    | Wether or not the card has padding.        | `false`           |
+| selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
+| onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | -                 |
+| disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
+| space          | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                                                                                             | The space between the content.             | `none`            |
+| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                  | The align items of the flex container.     | `flex-start`      |
+| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                     | The justify content of the flex container. | `flex-start`      |
+| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                       | The wrap of the flex container.            | `nowrap`          |
+| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                     | The direction of the flex container.       | `column`          |
+| gap            | `number`                                                                                                                                     | The gap between the content.               | `0`               |
+| rowGap         | `number`                                                                                                                                     | The row gap between the content.           | `0`               |
+| columnGap      | `number`                                                                                                                                     | The column gap between the content.        | `0`               |
 
 ### `CardAction`
 
@@ -94,7 +94,7 @@ See example below for how to use the `CardAction` component:
 import { Card, CardAction, BodyText, Heading, Felx, Button } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => (
-  <Card variant="emphasis" colorScheme="warmWhite">
+  <Card variant="emphasis" colorScheme="neutralSubtle">
     <Flex space="md" direction="column" align="stretch">
       <Heading size="md">Heading</Heading>
       <BodyText>{children as string}</BodyText>

package/src/components/Card/Card.props.ts

@@ -4,15 +4,15 @@ import { SpaceValue } from '../../types';
 interface CardProps extends PressableProps {
   variant?: 'emphasis' | 'subtle';
   colorScheme?:
-    | 'white'
-    | 'warmWhite'
-    | 'purple'
-    | 'energyBlue'
-    | 'broadbandGreen'
-    | 'mobileRose'
-    | 'insuranceOrange'
-    | 'cashbackLilac'
-    | 'piggyPink';
+    | 'neutralStrong'
+    | 'neutralSubtle'
+    | 'brand'
+    | 'energy'
+    | 'broadband'
+    | 'mobile'
+    | 'insurance'
+    | 'cashback'
+    | 'pig';
   noPadding?: boolean;
   disabled?: boolean;
   space?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/src/components/Card/Card.stories.tsx

@@ -1,9 +1,9 @@
-import { Card, CardAction } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { Card, CardAction } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
-import { Flex } from '../Flex';
 import { Button } from '../Button';
+import { Flex } from '../Flex';
 import { Heading } from '../Heading';
 
 const meta = {
@@ -25,15 +25,15 @@ const meta = {
     colorScheme: {
       control: 'select',
       options: [
-        'white',
-        'warmWhite',
-        'purple',
-        'energyBlue',
-        'broadbandGreen',
-        'mobileRose',
-        'insuranceOrange',
-        'cashbackLilac',
-        'piggyPink',
+        'neutralStrong',
+        'neutralSubtle',
+        'brand',
+        'energy',
+        'broadband',
+        'mobile',
+        'insurance',
+        'cashback',
+        'pig',
       ],
       description: 'Use this value to set the Card color scheme.',
     },
@@ -42,7 +42,7 @@ const meta = {
     children: 'This is a card',
     variant: 'subtle',
     noPadding: false,
-    colorScheme: 'white',
+    colorScheme: 'neutralStrong',
   },
 } satisfies Meta<typeof Card>;
 
@@ -67,92 +67,92 @@ export const Variants: Story = {
     return (
       <Flex space="lg">
         <VariantTitle title="Subtle - White">
-          <Card {...props} variant="subtle" colorScheme="white">
+          <Card {...props} variant="subtle" colorScheme="neutralStrong">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Emphasis - White">
-          <Card {...props} variant="emphasis" colorScheme="white">
+          <Card {...props} variant="emphasis" colorScheme="neutralStrong">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Subtle - Warm White">
-          <Card {...props} variant="subtle" colorScheme="warmWhite">
+          <Card {...props} variant="subtle" colorScheme="neutralSubtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Emphasis - Warm White">
-          <Card {...props} variant="emphasis" colorScheme="warmWhite">
+          <Card {...props} variant="emphasis" colorScheme="neutralSubtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Purple - Subtle">
-          <Card {...props} colorScheme="purple" variant="subtle">
+          <Card {...props} colorScheme="brand" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Purple - Emphasis">
-          <Card {...props} colorScheme="purple" variant="emphasis">
+          <Card {...props} colorScheme="brand" variant="emphasis">
             <BodyText inverted>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Energy Blue - Subtle">
-          <Card {...props} colorScheme="energyBlue" variant="subtle">
+          <Card {...props} colorScheme="energy" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Energy Blue - Emphasis">
-          <Card {...props} colorScheme="energyBlue" variant="emphasis">
+          <Card {...props} colorScheme="energy" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Broadband Green - Subtle">
-          <Card {...props} colorScheme="broadbandGreen" variant="subtle">
+          <Card {...props} colorScheme="broadband" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Broadband Green - Emphasis">
-          <Card {...props} colorScheme="broadbandGreen" variant="emphasis">
+          <Card {...props} colorScheme="broadband" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Mobile Rose - Subtle">
-          <Card {...props} colorScheme="mobileRose" variant="subtle">
+          <Card {...props} colorScheme="mobile" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Mobile Rose - Emphasis">
-          <Card {...props} colorScheme="mobileRose" variant="emphasis">
+          <Card {...props} colorScheme="mobile" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Insurance Orange - Subtle">
-          <Card {...props} colorScheme="insuranceOrange" variant="subtle">
+          <Card {...props} colorScheme="insurance" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Insurance Orange - Emphasis">
-          <Card {...props} colorScheme="insuranceOrange" variant="emphasis">
+          <Card {...props} colorScheme="insurance" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Cashback Lilac - Subtle">
-          <Card {...props} colorScheme="cashbackLilac" variant="subtle">
+          <Card {...props} colorScheme="cashback" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Cashback Lilac - Emphasis">
-          <Card {...props} colorScheme="cashbackLilac" variant="emphasis">
+          <Card {...props} colorScheme="cashback" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Piggy Pink - Subtle">
-          <Card {...props} colorScheme="piggyPink" variant="subtle">
+          <Card {...props} colorScheme="pig" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
         <VariantTitle title="Piggy Pink - Emphasis">
-          <Card {...props} colorScheme="piggyPink" variant="emphasis">
+          <Card {...props} colorScheme="pig" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
@@ -173,7 +173,7 @@ export const Interactive: Story = {
             {...props}
             onPress={() => console.log('pressed')}
             variant="subtle"
-            colorScheme="white"
+            colorScheme="neutralStrong"
             space="md"
             flexDirection="column"
             alignItems="stretch"
@@ -188,7 +188,7 @@ export const Interactive: Story = {
             {...props}
             onPress={() => console.log('pressed')}
             variant="emphasis"
-            colorScheme="white"
+            colorScheme="neutralStrong"
             space="md"
             flexDirection="column"
             alignItems="stretch"
@@ -203,7 +203,7 @@ export const Interactive: Story = {
             {...props}
             onPress={() => console.log('pressed')}
             variant="subtle"
-            colorScheme="warmWhite"
+            colorScheme="neutralSubtle"
             space="md"
             flexDirection="column"
             alignItems="stretch"
@@ -217,7 +217,7 @@ export const Interactive: Story = {
           <Card
             {...props}
             variant="emphasis"
-            colorScheme="warmWhite"
+            colorScheme="neutralSubtle"
             space="md"
             flexDirection="column"
             alignItems="stretch"

package/src/components/Card/CardRoot.tsx

@@ -37,7 +37,7 @@ const collectChildActionHandlers = (
 const Card = ({
   children,
   variant = 'subtle',
-  colorScheme = 'white',
+  colorScheme = 'neutralStrong',
   noPadding = false,
   style,
   states,
@@ -104,39 +104,39 @@ const styles = StyleSheet.create(theme => ({
       variant: {
         subtle: {
           borderWidth: theme.components.card.neutral.subtle.borderWidth,
-          borderColor: theme.components.card.neutral.subtle.borderColor,
+          borderColor: theme.color.border.subtle,
         },
         emphasis: {
           borderWidth: theme.components.card.neutral.emphasis.borderWidth,
-          borderColor: theme.components.card.neutral.emphasis.borderColor,
+          borderColor: theme.color.border.strong,
         },
       },
       colorScheme: {
-        white: {
-          backgroundColor: theme.components.card.neutral.whiteBackgroundColor,
+        neutralStrong: {
+          backgroundColor: theme.color.surface.neutral.strong,
         },
-        warmWhite: {
-          backgroundColor: theme.components.card.neutral.warmWhiteBackgroundColor,
+        neutralSubtle: {
+          backgroundColor: theme.color.surface.neutral.subtle,
         },
-        purple: {
+        brand: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
-        energyBlue: {
+        energy: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
-        broadbandGreen: {
+        broadband: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
-        mobileRose: {
+        mobile: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
-        insuranceOrange: {
+        insurance: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
-        cashbackLilac: {
+        cashback: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
-        piggyPink: {
+        pig: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
       },
@@ -171,114 +171,114 @@ const styles = StyleSheet.create(theme => ({
     compoundVariants: [
       {
         variant: 'subtle',
-        colorScheme: 'purple',
+        colorScheme: 'brand',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.purpleBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.brand.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'purple',
+        colorScheme: 'brand',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.purpleBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.brand.default,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'subtle',
-        colorScheme: 'energyBlue',
+        colorScheme: 'energy',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.energyBlueBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.energy.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'energyBlue',
+        colorScheme: 'energy',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.energyBlueBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.energy.default,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'subtle',
-        colorScheme: 'broadbandGreen',
+        colorScheme: 'broadband',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.broadbandGreenBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.broadband.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'broadbandGreen',
+        colorScheme: 'broadband',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.broadbandGreenBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.broadband.default,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'subtle',
-        colorScheme: 'mobileRose',
+        colorScheme: 'mobile',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.mobileRoseBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.mobile.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'mobileRose',
+        colorScheme: 'mobile',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.mobileRoseBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.mobile.default,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'subtle',
-        colorScheme: 'insuranceOrange',
+        colorScheme: 'insurance',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.insuranceOrangeBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.insurance.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'insuranceOrange',
+        colorScheme: 'insurance',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.insuranceOrangeBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.insurance.default,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'subtle',
-        colorScheme: 'cashbackLilac',
+        colorScheme: 'cashback',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.cashbackLilacBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.cashback.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'cashbackLilac',
+        colorScheme: 'cashback',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.cashbackLilacBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.cashback.default,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'subtle',
-        colorScheme: 'piggyPink',
+        colorScheme: 'pig',
         styles: {
-          backgroundColor: theme.components.card.brand.subtle.piggyPinkBackgroundColor,
-          borderColor: theme.components.card.brand.subtle.borderColor,
+          backgroundColor: theme.color.surface.pig.subtle,
+          borderColor: theme.color.border.strong,
         },
       },
       {
         variant: 'emphasis',
-        colorScheme: 'piggyPink',
+        colorScheme: 'pig',
         styles: {
-          backgroundColor: theme.components.card.brand.emphasis.piggyPinkBackgroundColor,
-          borderColor: theme.components.card.brand.emphasis.borderColor,
+          backgroundColor: theme.color.surface.pig.default,
+          borderColor: theme.color.border.strong,
         },
       },
     ],

package/src/components/Checkbox/CheckboxIcon.tsx

@@ -1,8 +1,8 @@
-import { Icon } from '../Icon';
 import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import IconProps from '../Icon/Icon.props';
-import { StyleSheet } from 'react-native-unistyles';
 import { Platform, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import IconProps from '../Icon/Icon.props';
 
 const CheckboxIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -20,7 +20,7 @@ const CheckboxIcon = ({ style, ...props }: IconProps) => {
 
 const styles = StyleSheet.create(theme => ({
   icon: {
-    color: theme.components.checkbox.checked.iconColor,
+    color: theme.color.icon.inverted,
   },
 }));
 

package/src/components/Checkbox/CheckboxIndicator.tsx

@@ -22,8 +22,8 @@ const styles = StyleSheet.create(theme => ({
   container: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: theme.components.checkbox.unchecked.backgroundColor,
-    borderColor: theme.components.checkbox.unchecked.borderColor,
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderColor: theme.color.border.strong,
     borderWidth: theme.components.checkbox.borderWidth,
     borderRadius: theme.components.checkbox.borderRadius,
     width: 24,
@@ -45,7 +45,7 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       checked: {
         true: {
-          borderColor: theme.components.checkbox.checked.borderColor,
+          borderColor: theme.color.border.strong,
           backgroundColor: theme.components.checkbox.checked.backgroundColor,
         },
       },

package/src/components/Checkbox/CheckboxTileRoot.tsx

@@ -19,14 +19,14 @@ const styles = StyleSheet.create(theme => ({
     gap: theme.components.checkbox.gap,
     padding: theme.components.checkbox.tile.padding,
     borderWidth: theme.components.checkbox.tile.borderWidth,
-    borderColor: theme.components.checkbox.tile.borderColor,
+    borderColor: theme.color.border.subtle,
     borderRadius: theme.components.checkbox.tile.borderRadius,
-    backgroundColor: theme.components.checkbox.tile.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     variants: {
       checked: {
         true: {
           borderWidth: theme.components.checkbox.tile.borderWidthSelected,
-          borderColor: theme.components.checkbox.tile.borderColorSelected,
+          borderColor: theme.color.border.strong,
           margin: -theme.components.checkbox.tile.borderWidthSelected / 2,
         },
       },

package/src/components/DetailText/DetailText.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { Text } from 'react-native';
-import type DetailTextProps from './DetailText.props';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { getFlattenedColorValue } from '../../utils';
+import type DetailTextProps from './DetailText.props';
 
 const DetailText = ({
   children,
@@ -74,7 +74,7 @@ DetailText.displayName = 'DetailText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontWeight: theme.fontWeight.regular,
     fontFamily: theme.typography.mobile.detailText.fontFamily,
     fontStyle: 'normal',
@@ -138,7 +138,7 @@ const styles = StyleSheet.create(theme => ({
       },
       inverted: {
         true: {
-          color: theme.components.text.colorInverted,
+          color: theme.color.text.inverted,
         },
       },
     },

package/src/components/Divider/Divider.tsx

@@ -30,7 +30,7 @@ Divider.displayName = 'Divider';
 
 const styles = StyleSheet.create(theme => ({
   divider: {
-    backgroundColor: theme.components.divider.color,
+    backgroundColor: theme.color.border.subtle,
     variants: {
       orientation: {
         horizontal: {

package/src/components/Heading/Heading.props.ts

@@ -1,4 +1,5 @@
-import type { TextProps, TextStyle } from 'react-native';
+import type { Ref } from 'react';
+import type { Text, TextProps, TextStyle } from 'react-native';
 import type { ColorValue } from '../../types';
 
 interface HeadingProps extends TextProps {
@@ -15,6 +16,7 @@ interface HeadingProps extends TextProps {
   textDecorationColor?: ColorValue;
   userSelect?: TextStyle['userSelect'];
   inverted?: boolean;
+  ref?: Ref<Text>;
 }
 
 export default HeadingProps;