@utilitywarehouse/hearth-react-native 0.33.1 → 0.34.0

package/build/tokens/letter-spacing.js

@@ -2,9 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    '0': 0,
-    '50': -0.30000001192092896,
-    '75': -0.36000001430511475,
     '90': -0.41999998688697815,
     '100': -0.47999998927116394,
     '150': -0.5400000214576721,
@@ -12,10 +9,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,
 };

package/build/tokens/line-height.d.ts

@@ -2,9 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly '50': 12;
-    readonly '75': 14;
-    readonly '100': 16;
     readonly '200': 18;
     readonly '300': 20;
     readonly '400': 22;
@@ -12,12 +9,8 @@ declare const _default: {
     readonly '600': 28;
     readonly '700': 32;
     readonly '800': 36;
-    readonly '900': 40;
     readonly '950': 48;
     readonly '975': 52;
-    readonly '1000': 56;
     readonly '1050': 62;
-    readonly '1100': 72;
-    readonly '1200': 90;
 };
 export default _default;

package/build/tokens/line-height.js

@@ -2,9 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    '50': 12,
-    '75': 14,
-    '100': 16,
     '200': 18,
     '300': 20,
     '400': 22,
@@ -12,11 +9,7 @@ export default {
     '600': 28,
     '700': 32,
     '800': 36,
-    '900': 40,
     '950': 48,
     '975': 52,
-    '1000': 56,
     '1050': 62,
-    '1100': 72,
-    '1200': 90,
 };

package/build/tokens/primitive.d.ts

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

package/build/tokens/primitive.js

@@ -4,7 +4,6 @@
 export default {
     borderRadius: {
         full: 9999,
-        lg: 12,
         md: 8,
         none: 0,
         sm: 6,
@@ -22,8 +21,6 @@ export default {
             heading: 'Comic Hams',
         },
         size: {
-            '50': 10,
-            '75': 12,
             '90': 14,
             '100': 16,
             '150': 18,
@@ -33,25 +30,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,
@@ -59,17 +47,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,
@@ -77,13 +56,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: {
@@ -122,6 +97,5 @@ export default {
         '700': 56,
         '800': 64,
         '900': 72,
-        '1000': 80,
     },
 };

package/build/tokens/space.d.ts

@@ -19,6 +19,5 @@ declare const _default: {
     readonly '700': 56;
     readonly '800': 64;
     readonly '900': 72;
-    readonly '1000': 80;
 };
 export default _default;

package/build/tokens/space.js

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

package/build/tokens/typography.d.ts

@@ -22,6 +22,11 @@ export declare const mobile: {
             readonly lineHeight: 20;
             readonly paragraphSpacing: 14;
         };
+        readonly xl: {
+            readonly fontSize: 20;
+            readonly lineHeight: 28;
+            readonly paragraphSpacing: 20;
+        };
     };
     readonly detailText: {
         readonly '2xl': {
@@ -113,6 +118,11 @@ export declare const tablet: {
             readonly lineHeight: 20;
             readonly paragraphSpacing: 14;
         };
+        readonly xl: {
+            readonly fontSize: 20;
+            readonly lineHeight: 28;
+            readonly paragraphSpacing: 20;
+        };
     };
     readonly detailText: {
         readonly '2xl': {
@@ -204,6 +214,11 @@ export declare const desktop: {
             readonly lineHeight: 20;
             readonly paragraphSpacing: 14;
         };
+        readonly xl: {
+            readonly fontSize: 20;
+            readonly lineHeight: 28;
+            readonly paragraphSpacing: 20;
+        };
     };
     readonly detailText: {
         readonly '2xl': {
@@ -296,6 +311,11 @@ declare const typography: {
                 readonly lineHeight: 20;
                 readonly paragraphSpacing: 14;
             };
+            readonly xl: {
+                readonly fontSize: 20;
+                readonly lineHeight: 28;
+                readonly paragraphSpacing: 20;
+            };
         };
         readonly detailText: {
             readonly '2xl': {
@@ -387,6 +407,11 @@ declare const typography: {
                 readonly lineHeight: 20;
                 readonly paragraphSpacing: 14;
             };
+            readonly xl: {
+                readonly fontSize: 20;
+                readonly lineHeight: 28;
+                readonly paragraphSpacing: 20;
+            };
         };
         readonly detailText: {
             readonly '2xl': {
@@ -478,6 +503,11 @@ declare const typography: {
                 readonly lineHeight: 20;
                 readonly paragraphSpacing: 14;
             };
+            readonly xl: {
+                readonly fontSize: 20;
+                readonly lineHeight: 28;
+                readonly paragraphSpacing: 20;
+            };
         };
         readonly detailText: {
             readonly '2xl': {

package/build/tokens/typography.js

@@ -22,6 +22,11 @@ export const mobile = {
             lineHeight: 20,
             paragraphSpacing: 14,
         },
+        xl: {
+            fontSize: 20,
+            lineHeight: 28,
+            paragraphSpacing: 20,
+        },
     },
     detailText: {
         '2xl': {
@@ -113,6 +118,11 @@ export const tablet = {
             lineHeight: 20,
             paragraphSpacing: 14,
         },
+        xl: {
+            fontSize: 20,
+            lineHeight: 28,
+            paragraphSpacing: 20,
+        },
     },
     detailText: {
         '2xl': {
@@ -204,6 +214,11 @@ export const desktop = {
             lineHeight: 20,
             paragraphSpacing: 14,
         },
+        xl: {
+            fontSize: 20,
+            lineHeight: 28,
+            paragraphSpacing: 20,
+        },
     },
     detailText: {
         '2xl': {

package/docs/changelog.mdx

@@ -9,6 +9,60 @@ import { BackToTopButton, NextPrevPage } 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.34.0
+
+### Minor Changes
+
+- [#1338](https://github.com/utilitywarehouse/hearth/pull/1338) [`fe9767f`](https://github.com/utilitywarehouse/hearth/commit/fe9767f916975ba2e0ba8aea585858d8ea00a147) Thanks [@robphoenix](https://github.com/robphoenix)! - 💔 [BREAKING_CHANGE]: Remove pruned design tokens from React Native token exports
+
+  Several unused design tokens have been removed from the React Native token exports
+  to align with the updated design token set.
+
+  **Tokens removed**:
+
+  - `borderRadius.lg`
+  - `color`: multiple shades pruned across all colour palettes (`blue`, `broadbandGreen`, `cashbackLilac`, `energyBlue`, `green`, `insuranceOrange`, `mobileRose`, `orange`, `piggyPink`, `purple`, `red`, `warmWhite`, `yellow`)
+  - `font.size`: `50`, `75`, `600`, `700`, `800`, `900`, `1000`
+  - `font.weight.heavy`
+  - `letterSpacing`: `0`, `50`, `75`, `550`, `600`, `700`, `800`, `900`, `1000`
+  - `lineHeight`: `50`, `75`, `100`, `900`, `1000`, `1100`, `1200`
+  - `space['1000']`
+
+  **Developer changes**:
+
+  If you are referencing any of the removed tokens directly, replace them with the
+  nearest available equivalent or remove the usage.
+
+  For example:
+
+  ```diff
+  - borderRadius: tokens.borderRadius.lg,
+  + borderRadius: tokens.borderRadius.md,
+  ```
+
+  ```diff
+  - fontSize: tokens.font.size['50'],
+  + fontSize: tokens.font.size['90'],
+  ```
+
+  ```diff
+  - fontWeight: tokens.font.weight.heavy,
+  + fontWeight: tokens.font.weight.bold,
+  ```
+
+### Patch Changes
+
+- [#1338](https://github.com/utilitywarehouse/hearth/pull/1338) [`fe9767f`](https://github.com/utilitywarehouse/hearth/commit/fe9767f916975ba2e0ba8aea585858d8ea00a147) Thanks [@robphoenix](https://github.com/robphoenix)! - 🌟 [FEATURE]: Add `xl` variant to `bodyText` typography tokens
+
+  The `bodyText` typography scale now includes an `xl` variant across mobile,
+  tablet, and desktop breakpoints.
+
+  | Property           | Value |
+  | ------------------ | ----- |
+  | `fontSize`         | `20`  |
+  | `lineHeight`       | `28`  |
+  | `paragraphSpacing` | `20`  |
+
 ## 0.33.1
 
 ### Patch Changes

package/docs/components/AllComponents.web.tsx

@@ -381,9 +381,9 @@ const AllComponents: React.FC = () => {
             </ComponentWrapper>
             <ComponentWrapper name="Container" link="primitives-container">
               <Container spacing="md" backgroundColor="secondary">
-                <Box h={20} bg={color.blue[300]} />
+                <Box h={20} bg={color.blue[200]} />
                 <Box h={20} bg={color.blue[400]} />
-                <Box h={20} bg={color.blue[500]} />
+                <Box h={20} bg={color.blue[600]} />
               </Container>
             </ComponentWrapper>
             <ComponentWrapper name="Currency Input" link="forms-currency-input">
@@ -474,10 +474,10 @@ const AllComponents: React.FC = () => {
             <ComponentWrapper name="Flex" link="primitives-flex">
               <Center flex={1}>
                 <Flex direction="row" spacing="md">
-                  <Box w={40} h={40} bg={color.blue[300]} />
+                  <Box w={40} h={40} bg={color.blue[200]} />
                   <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]} />
+                  <Box w={40} h={40} bg={color.blue[700]} />
                 </Flex>
               </Center>
             </ComponentWrapper>
@@ -497,10 +497,10 @@ const AllComponents: React.FC = () => {
               <Center flex={1}>
                 <Box width={100}>
                   <Grid columns={2} spacing="md">
-                    <Box w={40} h={40} bg={color.blue[300]} />
+                    <Box w={40} h={40} bg={color.blue[200]} />
                     <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]} />
+                    <Box w={40} h={40} bg={color.blue[700]} />
                   </Grid>
                 </Box>
               </Center>

package/docs/introduction.mdx

@@ -140,7 +140,6 @@ import App from './src/App';
 export default () => {
   const [loaded] = useFonts({
     'ComicHams-BoldFlare': require('./assets/fonts/comichams_boldflare.ttf'),
-    'ComicHams-HeavyFlare': require('./assets/fonts/comichams_heavyflare.ttf'),
     'ComicHams-SemiBoldFlare': require('./assets/fonts/comichams_semiboldflare.ttf'),
     'DM Mono': require('./assets/fonts/dmmono_medium.ttf'),
     'DMMono-MediumItalic': require('./assets/fonts/dmmono_mediumitalic.ttf'),

package/docs/styling.mdx

@@ -117,8 +117,8 @@ The theme provides a comprehensive color palette organized by semantic meaning:
 const styles = StyleSheet.create(theme => ({
   // Primary colors
   primaryButton: {
-    backgroundColor: theme.color.purple[500],
-    borderColor: theme.color.purple[600],
+    backgroundColor: theme.color.purple[400],
+    borderColor: theme.color.purple[700],
   },
 
   // Secondary colors
@@ -136,7 +136,7 @@ const styles = StyleSheet.create(theme => ({
 
   errorMessage: {
     backgroundColor: theme.color.red[50],
-    borderColor: theme.color.red[200],
+    borderColor: theme.color.red[300],
     color: theme.color.red[800],
   },
 }));
@@ -226,7 +226,7 @@ const styles = StyleSheet.create(theme => ({
 
   floatingButton: {
     ...theme.shadow.lg,
-    backgroundColor: theme.color.purple[500],
+    backgroundColor: theme.color.purple[400],
   },
 }));
 ```
@@ -379,8 +379,8 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       variant: {
         primary: {
-          backgroundColor: theme.color.purple[500],
-          borderColor: theme.color.purple[600],
+          backgroundColor: theme.color.purple[400],
+          borderColor: theme.color.purple[700],
           borderWidth: 1,
         },
         secondary: {
@@ -425,7 +425,7 @@ const styles = StyleSheet.create(theme => ({
           color: theme.color.grey[700],
         },
         ghost: {
-          color: theme.color.purple[600],
+          color: theme.color.purple[700],
         },
       },
       size: {
@@ -477,11 +477,11 @@ const styles = StyleSheet.create(theme => ({
       isError: {
         true: {
           backgroundColor: theme.color.red[50],
-          borderColor: theme.color.red[200],
+          borderColor: theme.color.red[300],
           borderWidth: 1,
         },
         false: {
-          backgroundColor: theme.color.blue[50],
+          backgroundColor: theme.color.blue[200],
           borderColor: theme.color.blue[200],
           borderWidth: 1,
         },
@@ -502,7 +502,7 @@ const styles = StyleSheet.create(theme => ({
           color: theme.color.red[800],
         },
         false: {
-          color: theme.color.blue[800],
+          color: theme.color.blue[700],
         },
       },
     },
@@ -593,7 +593,7 @@ const styles = StyleSheet.create(theme => ({
         variant: 'solid',
         color: 'purple',
         styles: {
-          backgroundColor: theme.color.purple[500],
+          backgroundColor: theme.color.purple[400],
         },
       },
       {
@@ -616,7 +616,7 @@ const styles = StyleSheet.create(theme => ({
         variant: 'outline',
         color: 'purple',
         styles: {
-          borderColor: theme.color.purple[500],
+          borderColor: theme.color.purple[400],
           backgroundColor: 'transparent',
         },
       },
@@ -706,7 +706,7 @@ const styles = StyleSheet.create(theme => ({
         variant: 'outline',
         color: 'purple',
         styles: {
-          color: theme.color.purple[600],
+          color: theme.color.purple[700],
         },
       },
       {
@@ -749,7 +749,7 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       variant: {
         primary: {
-          backgroundColor: theme.color.purple[500],
+          backgroundColor: theme.color.purple[400],
         },
         secondary: {
           backgroundColor: theme.color.grey[100],

package/docs/theme-tokens.mdx

@@ -592,7 +592,7 @@ Access the full primitive color palette for custom use cases:
 ```tsx
 const styles = StyleSheet.create(theme => ({
   customElement: {
-    backgroundColor: theme.color.purple[500],
+    backgroundColor: theme.color.purple[400],
     borderColor: theme.color.grey[300],
     color: theme.color.grey[900],
   },
@@ -739,9 +739,6 @@ const styles = StyleSheet.create(theme => ({
   bold: {
     fontWeight: theme.font.weight.bold, // 700
   },
-  heavy: {
-    fontWeight: theme.font.weight.heavy, // 900
-  },
 }));
 ```
 

package/eslint.config.js

@@ -25,7 +25,8 @@ export default tseslint.config(
       'react-refresh': reactRefresh,
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       '@typescript-eslint/no-explicit-any': 'off',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -60,11 +60,11 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^4.1.7",
     "@utilitywarehouse/hearth-storybook-utils": "0.0.0",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.2",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.1",
+    "@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/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/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] }} />
 )
 ```