@utilitywarehouse/hearth-react-native 0.32.5 → 0.33.0

package/build/tokens/components/light/navigation.d.ts

@@ -9,12 +9,53 @@ declare const _default: {
     readonly borderBottom: "#5c2ca9";
     readonly borderRadius: 6;
     readonly desktop: {
+        readonly customer: {
+            readonly gap: 12;
+        };
         readonly height: 88;
+        readonly partner: {
+            readonly gap: 4;
+            readonly header: {
+                readonly gap: 24;
+            };
+            readonly padding: 24;
+        };
     };
     readonly dividerBorderColor: "#5c2ca9";
-    readonly gap: 4;
+    readonly item: {
+        readonly customer: {
+            readonly container: {
+                readonly gap: 4;
+                readonly paddingHorizontal: 4;
+                readonly paddingVertical: 8;
+            };
+            readonly mobile: {
+                readonly container: {
+                    readonly paddingHorizontal: 8;
+                    readonly paddingVertical: 8;
+                };
+                readonly paddingHorizontal: 4;
+                readonly paddingVertical: 24;
+            };
+            readonly paddingHorizontal: 4;
+            readonly paddingVertical: 24;
+        };
+        readonly partner: {
+            readonly container: {
+                readonly gap: 4;
+                readonly padding: 8;
+            };
+            readonly paddingHorizontal: 16;
+            readonly sub: {
+                readonly paddingLeft: 32;
+                readonly paddingRight: 16;
+            };
+        };
+    };
     readonly mobile: {
+        readonly gap: 12;
         readonly height: 64;
+        readonly padding: 16;
     };
 };
 export default _default;

package/build/tokens/components/light/navigation.js

@@ -9,11 +9,52 @@ export default {
     borderBottom: '#5c2ca9',
     borderRadius: 6,
     desktop: {
+        customer: {
+            gap: 12,
+        },
         height: 88,
+        partner: {
+            gap: 4,
+            header: {
+                gap: 24,
+            },
+            padding: 24,
+        },
     },
     dividerBorderColor: '#5c2ca9',
-    gap: 4,
+    item: {
+        customer: {
+            container: {
+                gap: 4,
+                paddingHorizontal: 4,
+                paddingVertical: 8,
+            },
+            mobile: {
+                container: {
+                    paddingHorizontal: 8,
+                    paddingVertical: 8,
+                },
+                paddingHorizontal: 4,
+                paddingVertical: 24,
+            },
+            paddingHorizontal: 4,
+            paddingVertical: 24,
+        },
+        partner: {
+            container: {
+                gap: 4,
+                padding: 8,
+            },
+            paddingHorizontal: 16,
+            sub: {
+                paddingLeft: 32,
+                paddingRight: 16,
+            },
+        },
+    },
     mobile: {
+        gap: 12,
         height: 64,
+        padding: 16,
     },
 };

package/build/tokens/components/light/pagination.d.ts

@@ -4,6 +4,7 @@
 declare const _default: {
     readonly gap: 8;
     readonly item: {
+        readonly gap: 2;
         readonly height: 40;
         readonly radius: 8;
         readonly width: 40;

package/build/tokens/components/light/pagination.js

@@ -4,6 +4,7 @@
 export default {
     gap: 8,
     item: {
+        gap: 2,
         height: 40,
         radius: 8,
         width: 40,

package/build/tokens/components/light/segmented-control.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly height: 48;
-        readonly padding: 4;
+        readonly padding: 2;
     };
     readonly height: 40;
     readonly minWidth: 66;

package/build/tokens/components/light/segmented-control.js

@@ -9,7 +9,7 @@ export default {
         borderWidth: 1,
         gap: 4,
         height: 48,
-        padding: 4,
+        padding: 2,
     },
     height: 40,
     minWidth: 66,

package/build/tokens/components/light/tabs.d.ts

@@ -4,7 +4,6 @@
 declare const _default: {
     readonly divider: {
         readonly borderWidth: 2;
-        readonly color: "#101010";
     };
     readonly gap: 12;
     readonly item: {

package/build/tokens/components/light/tabs.js

@@ -4,7 +4,6 @@
 export default {
     divider: {
         borderWidth: 2,
-        color: '#101010',
     },
     gap: 12,
     item: {

package/build/tokens/components/light/tooltip.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly gapHorizontal: 8;
     readonly gapVertical: 2;
+    readonly maxWidth: 680;
     readonly paddingHorizontal: 12;
     readonly paddingVertical: 8;
 };

package/build/tokens/components/light/tooltip.js

@@ -6,6 +6,7 @@ export default {
     borderRadius: 8,
     gapHorizontal: 8,
     gapVertical: 2,
+    maxWidth: 680,
     paddingHorizontal: 12,
     paddingVertical: 8,
 };

package/docs/changelog.mdx

@@ -9,6 +9,16 @@ 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.33.0
+
+### Minor Changes
+
+- [#1298](https://github.com/utilitywarehouse/hearth/pull/1298) [`43bf936`](https://github.com/utilitywarehouse/hearth/commit/43bf936fa03db109c669369cac6d0483877ae49a) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Remove component color tokens in favour of semantic tokens
+
+  Updated `TabsList` to use `theme.color.border.strong` and removed the
+  `tabs.divider.color` component token (and other unused component color tokens)
+  in favour of semantic tokens.
+
 ## 0.32.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.5",
+  "version": "0.33.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -28,8 +28,6 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@figma/code-connect": "^1.3.12",
     "@gorhom/bottom-sheet": "5.2.6",
     "@storybook/addon-a11y": "^10.2.1",
     "@storybook/addon-docs": "^10.2.1",
@@ -41,7 +39,6 @@
     "@types/react-native": "^0.72.8",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "chromatic": "^13.3.0",
     "globals": "^15.15.0",
     "playwright": "^1.59.1",
     "prismjs": "^1.30.0",
@@ -58,16 +55,15 @@
     "react-native-web": "^0.20.0",
     "react-native-worklets": "^0.5.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.2.1",
-    "typescript": "^5.7.3",
+    "storybook": "^10.4.1",
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
-    "vitest": "^3.2.4",
+    "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-svg-assets": "^0.6.2",
-    "@utilitywarehouse/hearth-tokens": "^0.3.0"
+    "@utilitywarehouse/hearth-tokens": "^0.3.1"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/src/components/Tabs/TabsList.tsx

@@ -148,7 +148,7 @@ const styles = StyleSheet.create(theme => ({
     position: 'relative',
     width: '100%',
     borderBottomWidth: theme.components.tabs.divider.borderWidth,
-    borderColor: theme.components.tabs.divider.color,
+    borderColor: theme.color.border.strong,
   },
   scrollContent: {
     paddingBottom: 0,

package/src/tokens/color.ts

@@ -182,7 +182,7 @@ export const purple = {
 } as const;
 
 export const red = {
-  '0': '#fffaf9',
+  '0': '#fff6f5',
   '50': '#fff3f1',
   '100': '#ffe3df',
   '200': '#ffccc5',

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

@@ -6,7 +6,6 @@ export default {
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
-  focus: '#101010',
   gap: 8,
   iconButton: {
     unstyled: {

package/src/tokens/components/dark/bottom-navigation.ts

@@ -3,7 +3,7 @@
  */
 
 export default {
-  borderTopWidth: 2,
+  borderTop: 2,
   gap: 0,
   indicator: {
     borderRadius: 4,

package/src/tokens/components/dark/card-accordion.ts

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  buttonGroup: {
+    gap: 12,
+  },
+  gap: 24,
+  item: {
+    gap: 20,
+  },
+} as const;

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

@@ -19,6 +19,9 @@ export default {
     borderWidth: 1,
     borderWidthSelected: 2,
     gap: 16,
+    label: {
+      gap: 12,
+    },
   },
   mobile: {
     padding: 16,

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

@@ -13,7 +13,7 @@ export default {
   },
   gap: 8,
   group: {
-    gap: 16,
+    gap: 12,
     stack: {
       gap: 20,
     },

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

@@ -6,6 +6,5 @@ export default {
   borderWidth: 1,
   divider: {
     borderWidth: 2,
-    color: '#ebebeb',
   },
 } as const;

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

@@ -12,6 +12,7 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAccordion } from './card-accordion';
 export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';

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

@@ -24,6 +24,9 @@ export default {
     },
   },
   gap: 12,
+  indicator: {
+    padding: 8,
+  },
   item: {
     contentGap: 2,
     functional: {

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

@@ -10,11 +10,52 @@ export default {
   borderBottom: '#996cda',
   borderRadius: 6,
   desktop: {
+    customer: {
+      gap: 12,
+    },
     height: 88,
+    partner: {
+      gap: 4,
+      header: {
+        gap: 24,
+      },
+      padding: 24,
+    },
   },
   dividerBorderColor: '#996cda',
-  gap: 4,
+  item: {
+    customer: {
+      container: {
+        gap: 4,
+        paddingHorizontal: 4,
+        paddingVertical: 8,
+      },
+      mobile: {
+        container: {
+          paddingHorizontal: 8,
+          paddingVertical: 8,
+        },
+        paddingHorizontal: 4,
+        paddingVertical: 24,
+      },
+      paddingHorizontal: 4,
+      paddingVertical: 24,
+    },
+    partner: {
+      container: {
+        gap: 4,
+        padding: 8,
+      },
+      paddingHorizontal: 16,
+      sub: {
+        paddingLeft: 32,
+        paddingRight: 16,
+      },
+    },
+  },
   mobile: {
+    gap: 12,
     height: 64,
+    padding: 16,
   },
 } as const;

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

@@ -5,6 +5,7 @@
 export default {
   gap: 8,
   item: {
+    gap: 2,
     height: 40,
     radius: 8,
     width: 40,

package/src/tokens/components/dark/segmented-control.ts

@@ -10,7 +10,7 @@ export default {
     borderWidth: 1,
     gap: 4,
     height: 48,
-    padding: 4,
+    padding: 2,
   },
   height: 40,
   minWidth: 66,

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

@@ -5,7 +5,6 @@
 export default {
   divider: {
     borderWidth: 2,
-    color: '#ebebeb',
   },
   gap: 12,
   item: {

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

@@ -7,6 +7,7 @@ export default {
   borderRadius: 8,
   gapHorizontal: 8,
   gapVertical: 2,
+  maxWidth: 680,
   paddingHorizontal: 12,
   paddingVertical: 8,
 } as const;

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

@@ -6,7 +6,6 @@ export default {
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
-  focus: '#101010',
   gap: 8,
   iconButton: {
     unstyled: {

package/src/tokens/components/light/bottom-navigation.ts

@@ -3,7 +3,7 @@
  */
 
 export default {
-  borderTopWidth: 2,
+  borderTop: 2,
   gap: 0,
   indicator: {
     borderRadius: 4,

package/src/tokens/components/light/card-accordion.ts

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  buttonGroup: {
+    gap: 12,
+  },
+  gap: 24,
+  item: {
+    gap: 20,
+  },
+} as const;

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

@@ -19,6 +19,9 @@ export default {
     borderWidth: 1,
     borderWidthSelected: 2,
     gap: 16,
+    label: {
+      gap: 12,
+    },
   },
   mobile: {
     padding: 16,

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

@@ -13,7 +13,7 @@ export default {
   },
   gap: 8,
   group: {
-    gap: 16,
+    gap: 12,
     stack: {
       gap: 20,
     },

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

@@ -6,6 +6,5 @@ export default {
   borderWidth: 1,
   divider: {
     borderWidth: 2,
-    color: '#101010',
   },
 } as const;

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

@@ -12,6 +12,7 @@ export { default as bottomSheet } from './bottom-sheet';
 export { default as breadcrumb } from './breadcrumb';
 export { default as button } from './button';
 export { default as card } from './card';
+export { default as cardAccordion } from './card-accordion';
 export { default as cardAction } from './card-action';
 export { default as cardContent } from './card-content';
 export { default as carouselControl } from './carousel-control';

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

@@ -24,6 +24,9 @@ export default {
     },
   },
   gap: 12,
+  indicator: {
+    padding: 8,
+  },
   item: {
     contentGap: 2,
     functional: {

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

@@ -10,11 +10,52 @@ export default {
   borderBottom: '#5c2ca9',
   borderRadius: 6,
   desktop: {
+    customer: {
+      gap: 12,
+    },
     height: 88,
+    partner: {
+      gap: 4,
+      header: {
+        gap: 24,
+      },
+      padding: 24,
+    },
   },
   dividerBorderColor: '#5c2ca9',
-  gap: 4,
+  item: {
+    customer: {
+      container: {
+        gap: 4,
+        paddingHorizontal: 4,
+        paddingVertical: 8,
+      },
+      mobile: {
+        container: {
+          paddingHorizontal: 8,
+          paddingVertical: 8,
+        },
+        paddingHorizontal: 4,
+        paddingVertical: 24,
+      },
+      paddingHorizontal: 4,
+      paddingVertical: 24,
+    },
+    partner: {
+      container: {
+        gap: 4,
+        padding: 8,
+      },
+      paddingHorizontal: 16,
+      sub: {
+        paddingLeft: 32,
+        paddingRight: 16,
+      },
+    },
+  },
   mobile: {
+    gap: 12,
     height: 64,
+    padding: 16,
   },
 } as const;

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

@@ -5,6 +5,7 @@
 export default {
   gap: 8,
   item: {
+    gap: 2,
     height: 40,
     radius: 8,
     width: 40,

package/src/tokens/components/light/segmented-control.ts

@@ -10,7 +10,7 @@ export default {
     borderWidth: 1,
     gap: 4,
     height: 48,
-    padding: 4,
+    padding: 2,
   },
   height: 40,
   minWidth: 66,

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

@@ -5,7 +5,6 @@
 export default {
   divider: {
     borderWidth: 2,
-    color: '#101010',
   },
   gap: 12,
   item: {

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

@@ -7,6 +7,7 @@ export default {
   borderRadius: 8,
   gapHorizontal: 8,
   gapVertical: 2,
+  maxWidth: 680,
   paddingHorizontal: 12,
   paddingVertical: 8,
 } as const;

package/vitest.config.js

@@ -2,6 +2,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vitest/config';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
 
 const dirname =
   typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
@@ -25,7 +26,7 @@ export default defineConfig({
           browser: {
             enabled: true,
             headless: true,
-            provider: 'playwright',
+            provider: playwright(),
             instances: [{ browser: 'chromium' }],
           },
           setupFiles: ['.storybook/vitest.setup.ts'],