@utilitywarehouse/hearth-react-native 0.33.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -59,11 +59,12 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.2",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.1",
+    "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
+    "@utilitywarehouse/hearth-fonts": "^0.1.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.3",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.2",
     "@utilitywarehouse/hearth-svg-assets": "^0.6.2",
-    "@utilitywarehouse/hearth-tokens": "^0.3.1"
+    "@utilitywarehouse/hearth-tokens": "^0.4.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/src/components/Accordion/AccordionItemRoot.tsx

@@ -19,8 +19,8 @@ AccordionItem.displayName = 'AccordionItemRoot';
 
 const styles = StyleSheet.create(theme => ({
   item: {
-    borderBottomWidth: theme.components.divider.borderWidth,
-    borderBottomColor: theme.color.border.subtle,
+    borderBottomWidth: theme.components.divider.size,
+    borderBottomColor: theme.components.divider.color,
   },
 }));
 

package/src/components/Carousel/Carousel.stories.tsx

@@ -117,12 +117,12 @@ const items = [
     title: '3333',
   },
   {
-    color: color.blue['800'],
+    color: color.blue['700'],
     key: 4,
     title: '4444',
   },
   {
-    color: color.piggyPink['700'],
+    color: color.piggyPink['800'],
     key: 5,
     title: '5555',
   },

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

@@ -197,7 +197,7 @@ export const Playground: Story = {
           <Box bg={color.purple['400']} p="200" borderRadius="md">
             <BodyText>Container content 2</BodyText>
           </Box>
-          <Box bg={color.piggyPink['400']} p="200" borderRadius="md">
+          <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
             <BodyText>Container content 3</BodyText>
           </Box>
         </Container>
@@ -259,7 +259,7 @@ export const WithCustomSpacing: Story = {
           <Box bg={color.purple['400']} p="200" borderRadius="md">
             <BodyText>Item 2</BodyText>
           </Box>
-          <Box bg={color.piggyPink['400']} p="200" borderRadius="md">
+          <Box bg={color.piggyPink['300']} p="200" borderRadius="md">
             <BodyText>Item 3</BodyText>
           </Box>
           <Box bg={color.orange['400']} p="200" borderRadius="md">
@@ -277,7 +277,7 @@ export const LayoutTokens: Story = {
     return (
       <Box backgroundColor={color.red['100']}>
         <Container backgroundColor="secondary">
-          <Box bg={color.blue['100']} p="200" borderRadius="md">
+          <Box bg={color.blue['200']} 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.

package/src/components/Divider/Divider.tsx

@@ -31,16 +31,16 @@ Divider.displayName = 'Divider';
 
 const styles = StyleSheet.create(theme => ({
   divider: {
-    backgroundColor: theme.color.border.subtle,
+    backgroundColor: theme.components.divider.color,
     variants: {
       orientation: {
         horizontal: {
           width: '100%',
-          height: theme.components.divider.borderWidth,
+          height: theme.components.divider.size,
         },
         vertical: {
           height: '100%',
-          width: theme.components.divider.borderWidth,
+          width: theme.components.divider.size,
         },
       },
       spacing: {

package/src/components/IndicatorIconButton/IndicatorIconButton.docs.mdx

@@ -72,7 +72,7 @@ You can pass color as the iconStyle props:
 const { color } = useTheme();
 
 return (
-  <IndicatorIconButton {...props} iconStyle={{ color: color.energyBlue[500] }} />
+  <IndicatorIconButton {...props} iconStyle={{ color: color.energyBlue[300] }} />
 )
 ```
 

package/src/components/IndicatorIconButton/IndicatorIconButton.stories.tsx

@@ -94,7 +94,7 @@ export const Colourful: Story = {
             <IndicatorIconButton
               {...args}
               icon={icon}
-              iconStyle={{ color: theme.color.energyBlue[500] }}
+              iconStyle={{ color: theme.color.energyBlue[300] }}
             />
           </Box>
           <Box>

package/src/tokens/border-radius.ts

@@ -4,7 +4,6 @@
 
 export default {
   full: 9999,
-  lg: 12,
   md: 8,
   none: 0,
   sm: 6,

package/src/tokens/color.ts

@@ -3,75 +3,38 @@
  */
 
 export const blue = {
-  '0': '#f8fbff',
-  '50': '#eef7ff',
-  '100': '#d9ecff',
   '200': '#bcddff',
-  '300': '#93c1ff',
   '400': '#6bb0ff',
-  '500': '#41a0ff',
   '600': '#2786f1',
   '700': '#1c6cd4',
-  '800': '#2354a4',
   '900': '#0b3375',
-  '950': '#042455',
-  '1000': '#001433',
 } as const;
 
 export const broadbandGreen = {
-  '0': '#f8faf6',
-  '50': '#f2f6ed',
-  '100': '#e7efdc',
   '200': '#d2e6b0',
   '300': '#8cba3b',
-  '400': '#7aa031',
-  '500': '#6e932b',
-  '600': '#64862a',
-  '700': '#5a7926',
   '800': '#506c21',
   '900': '#4f6b20',
-  '950': '#35421c',
-  '1000': '#252d16',
 } as const;
 
 export const cashbackLilac = {
-  '0': '#f7f5f8',
-  '50': '#f5f2f6',
-  '100': '#ebdef5',
-  '200': '#e4caf5',
   '300': '#dfbdf5',
-  '400': '#ce9cf0',
   '500': '#be7aeb',
-  '600': '#9f3be2',
   '700': '#8b2bc9',
-  '800': '#7821b8',
   '900': '#7429b5',
-  '950': '#522270',
-  '1000': '#3a1f52',
 } as const;
 
 export const energyBlue = {
-  '0': '#f7f9fa',
-  '50': '#edf4f6',
-  '100': '#d4e5e9',
   '200': '#bddee4',
   '300': '#6db5c3',
-  '400': '#579daa',
-  '500': '#4c8a97',
-  '600': '#367683',
   '700': '#326e7a',
-  '800': '#2d6571',
   '900': '#2c6370',
-  '950': '#254348',
-  '1000': '#1a2f35',
 } as const;
 
 export const green = {
-  '0': '#f8fdf9',
   '50': '#e7f9f0',
   '100': '#c5edda',
   '200': '#a2e2c3',
-  '300': '#74d6a0',
   '400': '#58ca93',
   '500': '#36bf7d',
   '600': '#19a660',
@@ -101,91 +64,50 @@ export const grey = {
 } as const;
 
 export const insuranceOrange = {
-  '0': '#fefcf9',
-  '50': '#fdf5eb',
-  '100': '#fcecd6',
-  '200': '#ffcda0',
   '300': '#ffb46d',
   '400': '#ff7b00',
-  '500': '#f06b00',
-  '600': '#e26400',
-  '700': '#cb5b00',
   '800': '#9b4c0e',
   '900': '#7f4518',
-  '950': '#5a3213',
-  '1000': '#3f2616',
 } as const;
 
 export const mobileRose = {
-  '0': '#fffaf9',
-  '50': '#fdf2f6',
-  '100': '#faeaf2',
   '200': '#fad0e9',
-  '300': '#f49fd2',
   '400': '#ee6dbb',
-  '500': '#e652aa',
-  '600': '#de379a',
-  '700': '#d61c89',
   '800': '#a7266d',
   '900': '#8a3260',
-  '950': '#601f42',
-  '1000': '#421a32',
 } as const;
 
 export const orange = {
-  '0': '#fffdf8',
-  '50': '#fff5ed',
-  '100': '#ffe6d4',
   '200': '#ffcca8',
-  '300': '#ffab70',
   '400': '#ff9639',
   '500': '#ff8010',
   '600': '#f56e00',
   '700': '#cf5d00',
   '750': '#be5400',
-  '800': '#ad4b00',
   '900': '#893900',
-  '950': '#6b2d00',
-  '1000': '#4a1f00',
 } as const;
 
 export const piggyPink = {
-  '0': '#faf5fa',
-  '50': '#f6f1f7',
-  '100': '#f9eafa',
   '200': '#f9ceff',
   '300': '#f295ff',
-  '400': '#ed66ff',
-  '500': '#d052c8',
-  '600': '#bc48b4',
-  '700': '#a53fa5',
   '800': '#8f358f',
   '900': '#7a1f7e',
-  '950': '#5d2167',
-  '1000': '#3f1448',
 } as const;
 
 export const purple = {
-  '0': '#f7f6f9',
-  '50': '#eeebf4',
   '100': '#ddd5eb',
   '200': '#c6b5e2',
   '300': '#af90de',
   '400': '#996cda',
-  '500': '#8851d6',
-  '600': '#8149ce',
   '700': '#7a42c8',
   '800': '#5c2ca9',
   '900': '#442484',
-  '950': '#331c68',
   '1000': '#26164f',
 } as const;
 
 export const red = {
-  '0': '#fff6f5',
   '50': '#fff3f1',
   '100': '#ffe3df',
-  '200': '#ffccc5',
   '300': '#ffa89d',
   '400': '#ff7964',
   '500': '#ff634a',
@@ -198,36 +120,23 @@ export const red = {
 } as const;
 
 export const warmWhite = {
-  '0': '#fdfcfa',
   '50': '#fcfbf2',
   '100': '#f7f6eb',
   '200': '#f1efe4',
   '300': '#d4d2c0',
-  '400': '#bfb9a9',
-  '500': '#a99f8b',
-  '600': '#89816e',
-  '700': '#6a6354',
   '800': '#4c473d',
   '900': '#30302c',
   '950': '#282825',
-  '975': '#20201d',
   '1000': '#191917',
 } as const;
 
 export const yellow = {
-  '0': '#fffef9',
-  '50': '#fff8ea',
-  '100': '#ffe8b8',
   '200': '#ffd885',
   '300': '#ffc852',
   '400': '#ffb921',
   '500': '#eba400',
   '600': '#d1950b',
-  '700': '#b78715',
-  '800': '#9c7820',
   '900': '#82692b',
-  '950': '#756230',
-  '1000': '#4c401f',
 } as const;
 
 export const light = {

package/src/tokens/components/dark/divider.ts

@@ -3,7 +3,8 @@
  */
 
 export default {
-  borderWidth: 1,
+  color: '#5b5b5b',
+  size: 1,
   divider: {
     borderWidth: 2,
   },

package/src/tokens/components/light/divider.ts

@@ -3,7 +3,8 @@
  */
 
 export default {
-  borderWidth: 1,
+  color: '#d4d2c0',
+  size: 1,
   divider: {
     borderWidth: 2,
   },

package/src/tokens/font.ts

@@ -9,8 +9,6 @@ export default {
     heading: 'Comic Hams',
   },
   size: {
-    '50': 10,
-    '75': 12,
     '90': 14,
     '100': 16,
     '150': 18,
@@ -20,16 +18,10 @@ export default {
     '500': 36,
     '550': 40,
     '575': 44,
-    '600': 48,
     '650': 54,
-    '700': 60,
-    '800': 72,
-    '900': 96,
-    '1000': 128,
   },
   weight: {
     bold: 700,
-    heavy: 900,
     medium: 500,
     regular: 400,
     semibold: 600,

package/src/tokens/letter-spacing.ts

@@ -3,9 +3,6 @@
  */
 
 export default {
-  '0': 0,
-  '50': -0.30000001192092896,
-  '75': -0.36000001430511475,
   '90': -0.41999998688697815,
   '100': -0.47999998927116394,
   '150': -0.5400000214576721,
@@ -13,10 +10,4 @@ export default {
   '300': -0.7200000286102295,
   '400': -0.8999999761581421,
   '500': -1.0800000429153442,
-  '550': -1.2000000476837158,
-  '600': -1.440000057220459,
-  '700': -1.7999999523162842,
-  '800': -2.1600000858306885,
-  '900': -2.880000114440918,
-  '1000': -3.8399999141693115,
 } as const;

package/src/tokens/line-height.ts

@@ -3,9 +3,6 @@
  */
 
 export default {
-  '50': 12,
-  '75': 14,
-  '100': 16,
   '200': 18,
   '300': 20,
   '400': 22,
@@ -13,11 +10,7 @@ export default {
   '600': 28,
   '700': 32,
   '800': 36,
-  '900': 40,
   '950': 48,
   '975': 52,
-  '1000': 56,
   '1050': 62,
-  '1100': 72,
-  '1200': 90,
 } as const;

package/src/tokens/primitive.ts

@@ -5,7 +5,6 @@
 export default {
   borderRadius: {
     full: 9999,
-    lg: 12,
     md: 8,
     none: 0,
     sm: 6,
@@ -23,8 +22,6 @@ export default {
       heading: 'Comic Hams',
     },
     size: {
-      '50': 10,
-      '75': 12,
       '90': 14,
       '100': 16,
       '150': 18,
@@ -34,25 +31,16 @@ export default {
       '500': 36,
       '550': 40,
       '575': 44,
-      '600': 48,
       '650': 54,
-      '700': 60,
-      '800': 72,
-      '900': 96,
-      '1000': 128,
     },
     weight: {
       bold: 700,
-      heavy: 900,
       medium: 500,
       regular: 400,
       semibold: 600,
     },
   },
   letterSpacing: {
-    '0': 0,
-    '50': -0.30000001192092896,
-    '75': -0.36000001430511475,
     '90': -0.41999998688697815,
     '100': -0.47999998927116394,
     '150': -0.5400000214576721,
@@ -60,17 +48,8 @@ export default {
     '300': -0.7200000286102295,
     '400': -0.8999999761581421,
     '500': -1.0800000429153442,
-    '550': -1.2000000476837158,
-    '600': -1.440000057220459,
-    '700': -1.7999999523162842,
-    '800': -2.1600000858306885,
-    '900': -2.880000114440918,
-    '1000': -3.8399999141693115,
   },
   lineHeight: {
-    '50': 12,
-    '75': 14,
-    '100': 16,
     '200': 18,
     '300': 20,
     '400': 22,
@@ -78,13 +57,9 @@ export default {
     '600': 28,
     '700': 32,
     '800': 36,
-    '900': 40,
     '950': 48,
     '975': 52,
-    '1000': 56,
     '1050': 62,
-    '1100': 72,
-    '1200': 90,
   },
   motion: {
     duration: {
@@ -123,6 +98,5 @@ export default {
     '700': 56,
     '800': 64,
     '900': 72,
-    '1000': 80,
   },
 } as const;

package/src/tokens/space.ts

@@ -20,5 +20,4 @@ export default {
   '700': 56,
   '800': 64,
   '900': 72,
-  '1000': 80,
 } as const;

package/src/tokens/typography.ts

@@ -23,6 +23,11 @@ export const mobile = {
       lineHeight: 20,
       paragraphSpacing: 14,
     },
+    xl: {
+      fontSize: 20,
+      lineHeight: 28,
+      paragraphSpacing: 20,
+    },
   },
   detailText: {
     '2xl': {
@@ -115,6 +120,11 @@ export const tablet = {
       lineHeight: 20,
       paragraphSpacing: 14,
     },
+    xl: {
+      fontSize: 20,
+      lineHeight: 28,
+      paragraphSpacing: 20,
+    },
   },
   detailText: {
     '2xl': {
@@ -207,6 +217,11 @@ export const desktop = {
       lineHeight: 20,
       paragraphSpacing: 14,
     },
+    xl: {
+      fontSize: 20,
+      lineHeight: 28,
+      paragraphSpacing: 20,
+    },
   },
   detailText: {
     '2xl': {