@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/build/core/themes.d.ts

@@ -2,7 +2,30 @@ import { DimensionValue } from 'react-native';
 import { components } from '../tokens';
 export declare const lightTheme: {
     readonly helpers: {
-        shadow: {
+        readonly semanticColor: {
+            readonly background: {
+                readonly brand: "#7a42c8";
+                readonly loading: "#f1efe4";
+                readonly primary: "#fcfbf2";
+                readonly secondary: "#ffffff";
+            };
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#d4d2c0";
+            };
+            readonly text: {
+                readonly affirmative: "#0f834a";
+                readonly brand: "#7a42c8";
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#101010";
+                readonly secondary: "#5b5b5b";
+            };
+            readonly icon: {
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#101010";
+            };
+        };
+        readonly shadow: {
             functional: string;
             brand: string;
             energy: string;
@@ -12,7 +35,7 @@ export declare const lightTheme: {
             cashback: string;
             pig: string;
         };
-        focusVisible: {
+        readonly focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
             outlineColor: "#101010";
@@ -146,7 +169,9 @@ export declare const lightTheme: {
         readonly '800': 36;
         readonly '900': 40;
         readonly '950': 48;
+        readonly '975': 52;
         readonly '1000': 56;
+        readonly '1050': 62;
         readonly '1100': 72;
         readonly '1200': 90;
     };
@@ -167,7 +192,9 @@ export declare const lightTheme: {
             readonly '400': 30;
             readonly '500': 36;
             readonly '550': 40;
+            readonly '575': 44;
             readonly '600': 48;
+            readonly '650': 54;
             readonly '700': 60;
             readonly '800': 72;
             readonly '900': 96;
@@ -204,7 +231,9 @@ export declare const lightTheme: {
         readonly '400': 30;
         readonly '500': 36;
         readonly '550': 40;
+        readonly '575': 44;
         readonly '600': 48;
+        readonly '650': 54;
         readonly '700': 60;
         readonly '800': 72;
         readonly '900': 96;
@@ -273,6 +302,11 @@ export declare const lightTheme: {
                 };
             };
             readonly heading: {
+                readonly '2xl': {
+                    readonly fontSize: 44;
+                    readonly fontWeight: 700;
+                    readonly lineHeight: 52;
+                };
                 readonly fontFamily: "Comic Hams";
                 readonly lg: {
                     readonly fontSize: 24;
@@ -359,6 +393,11 @@ export declare const lightTheme: {
                 };
             };
             readonly heading: {
+                readonly '2xl': {
+                    readonly fontSize: 44;
+                    readonly fontWeight: 700;
+                    readonly lineHeight: 52;
+                };
                 readonly fontFamily: "Comic Hams";
                 readonly lg: {
                     readonly fontSize: 24;
@@ -445,6 +484,11 @@ export declare const lightTheme: {
                 };
             };
             readonly heading: {
+                readonly '2xl': {
+                    readonly fontSize: 54;
+                    readonly fontWeight: 700;
+                    readonly lineHeight: 62;
+                };
                 readonly fontFamily: "Comic Hams";
                 readonly lg: {
                     readonly fontSize: 30;
@@ -901,6 +945,7 @@ export declare const lightTheme: {
         readonly black: "#000000";
         readonly background: {
             readonly brand: "#7a42c8";
+            readonly loading: "#f1efe4";
             readonly primary: "#fcfbf2";
             readonly secondary: "#ffffff";
         };
@@ -1362,7 +1407,30 @@ export declare const lightTheme: {
 };
 export declare const darkTheme: {
     readonly helpers: {
-        shadow: {
+        readonly semanticColor: {
+            readonly background: {
+                readonly brand: "#7a42c8";
+                readonly loading: "#30302c";
+                readonly primary: "#191917";
+                readonly secondary: "#232323";
+            };
+            readonly border: {
+                readonly strong: "#ebebeb";
+                readonly subtle: "#4c473d";
+            };
+            readonly text: {
+                readonly affirmative: "#58ca93";
+                readonly brand: "#af90de";
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#ebebeb";
+                readonly secondary: "#b2afae";
+            };
+            readonly icon: {
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#ebebeb";
+            };
+        };
+        readonly shadow: {
             functional: string;
             brand: string;
             energy: string;
@@ -1372,7 +1440,7 @@ export declare const darkTheme: {
             cashback: string;
             pig: string;
         };
-        focusVisible: {
+        readonly focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
             outlineColor: "#ebebeb";
@@ -1506,7 +1574,9 @@ export declare const darkTheme: {
         readonly '800': 36;
         readonly '900': 40;
         readonly '950': 48;
+        readonly '975': 52;
         readonly '1000': 56;
+        readonly '1050': 62;
         readonly '1100': 72;
         readonly '1200': 90;
     };
@@ -1527,7 +1597,9 @@ export declare const darkTheme: {
             readonly '400': 30;
             readonly '500': 36;
             readonly '550': 40;
+            readonly '575': 44;
             readonly '600': 48;
+            readonly '650': 54;
             readonly '700': 60;
             readonly '800': 72;
             readonly '900': 96;
@@ -1564,7 +1636,9 @@ export declare const darkTheme: {
         readonly '400': 30;
         readonly '500': 36;
         readonly '550': 40;
+        readonly '575': 44;
         readonly '600': 48;
+        readonly '650': 54;
         readonly '700': 60;
         readonly '800': 72;
         readonly '900': 96;
@@ -1633,6 +1707,11 @@ export declare const darkTheme: {
                 };
             };
             readonly heading: {
+                readonly '2xl': {
+                    readonly fontSize: 44;
+                    readonly fontWeight: 700;
+                    readonly lineHeight: 52;
+                };
                 readonly fontFamily: "Comic Hams";
                 readonly lg: {
                     readonly fontSize: 24;
@@ -1719,6 +1798,11 @@ export declare const darkTheme: {
                 };
             };
             readonly heading: {
+                readonly '2xl': {
+                    readonly fontSize: 44;
+                    readonly fontWeight: 700;
+                    readonly lineHeight: 52;
+                };
                 readonly fontFamily: "Comic Hams";
                 readonly lg: {
                     readonly fontSize: 24;
@@ -1805,6 +1889,11 @@ export declare const darkTheme: {
                 };
             };
             readonly heading: {
+                readonly '2xl': {
+                    readonly fontSize: 54;
+                    readonly fontWeight: 700;
+                    readonly lineHeight: 62;
+                };
                 readonly fontFamily: "Comic Hams";
                 readonly lg: {
                     readonly fontSize: 30;
@@ -2272,6 +2361,7 @@ export declare const darkTheme: {
         readonly black: "#000000";
         readonly background: {
             readonly brand: "#7a42c8";
+            readonly loading: "#30302c";
             readonly primary: "#191917";
             readonly secondary: "#232323";
         };
@@ -2734,7 +2824,30 @@ export declare const darkTheme: {
 export declare const themes: {
     readonly light: {
         readonly helpers: {
-            shadow: {
+            readonly semanticColor: {
+                readonly background: {
+                    readonly brand: "#7a42c8";
+                    readonly loading: "#f1efe4";
+                    readonly primary: "#fcfbf2";
+                    readonly secondary: "#ffffff";
+                };
+                readonly border: {
+                    readonly strong: "#101010";
+                    readonly subtle: "#d4d2c0";
+                };
+                readonly text: {
+                    readonly affirmative: "#0f834a";
+                    readonly brand: "#7a42c8";
+                    readonly inverted: "#fcfbf2";
+                    readonly primary: "#101010";
+                    readonly secondary: "#5b5b5b";
+                };
+                readonly icon: {
+                    readonly inverted: "#fcfbf2";
+                    readonly primary: "#101010";
+                };
+            };
+            readonly shadow: {
                 functional: string;
                 brand: string;
                 energy: string;
@@ -2744,7 +2857,7 @@ export declare const themes: {
                 cashback: string;
                 pig: string;
             };
-            focusVisible: {
+            readonly focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;
                 outlineColor: "#101010";
@@ -2878,7 +2991,9 @@ export declare const themes: {
             readonly '800': 36;
             readonly '900': 40;
             readonly '950': 48;
+            readonly '975': 52;
             readonly '1000': 56;
+            readonly '1050': 62;
             readonly '1100': 72;
             readonly '1200': 90;
         };
@@ -2899,7 +3014,9 @@ export declare const themes: {
                 readonly '400': 30;
                 readonly '500': 36;
                 readonly '550': 40;
+                readonly '575': 44;
                 readonly '600': 48;
+                readonly '650': 54;
                 readonly '700': 60;
                 readonly '800': 72;
                 readonly '900': 96;
@@ -2936,7 +3053,9 @@ export declare const themes: {
             readonly '400': 30;
             readonly '500': 36;
             readonly '550': 40;
+            readonly '575': 44;
             readonly '600': 48;
+            readonly '650': 54;
             readonly '700': 60;
             readonly '800': 72;
             readonly '900': 96;
@@ -3005,6 +3124,11 @@ export declare const themes: {
                     };
                 };
                 readonly heading: {
+                    readonly '2xl': {
+                        readonly fontSize: 44;
+                        readonly fontWeight: 700;
+                        readonly lineHeight: 52;
+                    };
                     readonly fontFamily: "Comic Hams";
                     readonly lg: {
                         readonly fontSize: 24;
@@ -3091,6 +3215,11 @@ export declare const themes: {
                     };
                 };
                 readonly heading: {
+                    readonly '2xl': {
+                        readonly fontSize: 44;
+                        readonly fontWeight: 700;
+                        readonly lineHeight: 52;
+                    };
                     readonly fontFamily: "Comic Hams";
                     readonly lg: {
                         readonly fontSize: 24;
@@ -3177,6 +3306,11 @@ export declare const themes: {
                     };
                 };
                 readonly heading: {
+                    readonly '2xl': {
+                        readonly fontSize: 54;
+                        readonly fontWeight: 700;
+                        readonly lineHeight: 62;
+                    };
                     readonly fontFamily: "Comic Hams";
                     readonly lg: {
                         readonly fontSize: 30;
@@ -3633,6 +3767,7 @@ export declare const themes: {
             readonly black: "#000000";
             readonly background: {
                 readonly brand: "#7a42c8";
+                readonly loading: "#f1efe4";
                 readonly primary: "#fcfbf2";
                 readonly secondary: "#ffffff";
             };
@@ -4094,7 +4229,30 @@ export declare const themes: {
     };
     readonly dark: {
         readonly helpers: {
-            shadow: {
+            readonly semanticColor: {
+                readonly background: {
+                    readonly brand: "#7a42c8";
+                    readonly loading: "#30302c";
+                    readonly primary: "#191917";
+                    readonly secondary: "#232323";
+                };
+                readonly border: {
+                    readonly strong: "#ebebeb";
+                    readonly subtle: "#4c473d";
+                };
+                readonly text: {
+                    readonly affirmative: "#58ca93";
+                    readonly brand: "#af90de";
+                    readonly inverted: "#fcfbf2";
+                    readonly primary: "#ebebeb";
+                    readonly secondary: "#b2afae";
+                };
+                readonly icon: {
+                    readonly inverted: "#fcfbf2";
+                    readonly primary: "#ebebeb";
+                };
+            };
+            readonly shadow: {
                 functional: string;
                 brand: string;
                 energy: string;
@@ -4104,7 +4262,7 @@ export declare const themes: {
                 cashback: string;
                 pig: string;
             };
-            focusVisible: {
+            readonly focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;
                 outlineColor: "#ebebeb";
@@ -4238,7 +4396,9 @@ export declare const themes: {
             readonly '800': 36;
             readonly '900': 40;
             readonly '950': 48;
+            readonly '975': 52;
             readonly '1000': 56;
+            readonly '1050': 62;
             readonly '1100': 72;
             readonly '1200': 90;
         };
@@ -4259,7 +4419,9 @@ export declare const themes: {
                 readonly '400': 30;
                 readonly '500': 36;
                 readonly '550': 40;
+                readonly '575': 44;
                 readonly '600': 48;
+                readonly '650': 54;
                 readonly '700': 60;
                 readonly '800': 72;
                 readonly '900': 96;
@@ -4296,7 +4458,9 @@ export declare const themes: {
             readonly '400': 30;
             readonly '500': 36;
             readonly '550': 40;
+            readonly '575': 44;
             readonly '600': 48;
+            readonly '650': 54;
             readonly '700': 60;
             readonly '800': 72;
             readonly '900': 96;
@@ -4365,6 +4529,11 @@ export declare const themes: {
                     };
                 };
                 readonly heading: {
+                    readonly '2xl': {
+                        readonly fontSize: 44;
+                        readonly fontWeight: 700;
+                        readonly lineHeight: 52;
+                    };
                     readonly fontFamily: "Comic Hams";
                     readonly lg: {
                         readonly fontSize: 24;
@@ -4451,6 +4620,11 @@ export declare const themes: {
                     };
                 };
                 readonly heading: {
+                    readonly '2xl': {
+                        readonly fontSize: 44;
+                        readonly fontWeight: 700;
+                        readonly lineHeight: 52;
+                    };
                     readonly fontFamily: "Comic Hams";
                     readonly lg: {
                         readonly fontSize: 24;
@@ -4537,6 +4711,11 @@ export declare const themes: {
                     };
                 };
                 readonly heading: {
+                    readonly '2xl': {
+                        readonly fontSize: 54;
+                        readonly fontWeight: 700;
+                        readonly lineHeight: 62;
+                    };
                     readonly fontFamily: "Comic Hams";
                     readonly lg: {
                         readonly fontSize: 30;
@@ -5004,6 +5183,7 @@ export declare const themes: {
             readonly black: "#000000";
             readonly background: {
                 readonly brand: "#7a42c8";
+                readonly loading: "#30302c";
                 readonly primary: "#191917";
                 readonly secondary: "#232323";
             };

package/build/core/themes.js

@@ -292,7 +292,15 @@ export const lightTheme = {
     },
     components: components.light,
     ...shared,
-    helpers: lightHelpers,
+    helpers: {
+        ...lightHelpers /** Simplified semantic color tokens grouped by category */,
+        semanticColor: {
+            background: light.background,
+            border: light.border,
+            text: light.text,
+            icon: light.icon,
+        },
+    },
 };
 const darkHelpers = {
     ...shared.helpers,
@@ -346,7 +354,15 @@ export const darkTheme = {
     },
     components: components.dark,
     ...shared,
-    helpers: darkHelpers,
+    helpers: {
+        ...darkHelpers /** Simplified semantic color tokens grouped by category */,
+        semanticColor: {
+            background: dark.background,
+            border: dark.border,
+            text: dark.text,
+            icon: dark.icon,
+        },
+    },
 };
 export const themes = {
     light: lightTheme,

package/build/hooks/useStyleProps.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import { propStyleMapping, resolveThemeKey, resolveThemeValueWithFallback, semanticPropMapping, themeStyleFallbackMapping, themeStyleMapping, viewStyleProps, } from '../utils';
 import useTheme from './useTheme';
 /**
  * Hook to process utility style props and resolve theme values
@@ -14,8 +14,17 @@ export const useStyleProps = (props) => {
         Object.entries(props).forEach(([propName, propValue]) => {
             if (propValue === undefined)
                 return;
+            // Check for semantic prop mappings first (e.g., iconColor, color)
+            const semanticMapping = semanticPropMapping[propName];
+            if (semanticMapping) {
+                const { styleProp, themeKey } = semanticMapping;
+                const themeMapping = resolveThemeKey(theme, themeKey);
+                const fallbackKey = themeStyleFallbackMapping[themeKey];
+                const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
+                computedStyles[styleProp] = resolveThemeValueWithFallback(propValue, themeMapping, fallbackMapping);
+                return;
+            }
             let stylePropName;
-            let themeKey;
             // Handle shorthand props
             if (propStyleMapping[propName]) {
                 stylePropName = propStyleMapping[propName];
@@ -26,9 +35,17 @@ export const useStyleProps = (props) => {
             }
             if (stylePropName) {
                 // Resolve theme value if needed
-                themeKey = themeStyleMapping[stylePropName];
-                if (themeKey && theme[themeKey]) {
-                    computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+                const themeKey = themeStyleMapping[stylePropName];
+                if (themeKey) {
+                    const themeObj = resolveThemeKey(theme, themeKey);
+                    const fallbackKey = themeStyleFallbackMapping[themeKey];
+                    const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
+                    if (themeObj) {
+                        computedStyles[stylePropName] = resolveThemeValueWithFallback(propValue, themeObj, fallbackMapping);
+                    }
+                    else {
+                        computedStyles[stylePropName] = propValue;
+                    }
                 }
                 else {
                     computedStyles[stylePropName] = propValue;

package/build/tokens/color.d.ts

@@ -217,6 +217,7 @@ export declare const yellow: {
 export declare const light: {
     readonly background: {
         readonly brand: "#7a42c8";
+        readonly loading: "#f1efe4";
         readonly primary: "#fcfbf2";
         readonly secondary: "#ffffff";
     };
@@ -464,6 +465,7 @@ export declare const light: {
 export declare const dark: {
     readonly background: {
         readonly brand: "#7a42c8";
+        readonly loading: "#30302c";
         readonly primary: "#191917";
         readonly secondary: "#232323";
     };
@@ -925,6 +927,7 @@ declare const color: {
     readonly light: {
         readonly background: {
             readonly brand: "#7a42c8";
+            readonly loading: "#f1efe4";
             readonly primary: "#fcfbf2";
             readonly secondary: "#ffffff";
         };
@@ -1172,6 +1175,7 @@ declare const color: {
     readonly dark: {
         readonly background: {
             readonly brand: "#7a42c8";
+            readonly loading: "#30302c";
             readonly primary: "#191917";
             readonly secondary: "#232323";
         };

package/build/tokens/color.js

@@ -217,6 +217,7 @@ export const yellow = {
 export const light = {
     background: {
         brand: '#7a42c8',
+        loading: '#f1efe4',
         primary: '#fcfbf2',
         secondary: '#ffffff',
     },
@@ -464,6 +465,7 @@ export const light = {
 export const dark = {
     background: {
         brand: '#7a42c8',
+        loading: '#30302c',
         primary: '#191917',
         secondary: '#232323',
     },

package/build/tokens/components/dark/modal.d.ts

@@ -8,8 +8,14 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly mobile: {
+            readonly paddingBottom: 16;
+        };
     };
     readonly gap: 24;
+    readonly handle: {
+        readonly paddingBottom: 16;
+    };
     readonly heading: {
         readonly gap: 24;
     };

package/build/tokens/components/dark/modal.js

@@ -8,8 +8,14 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        mobile: {
+            paddingBottom: 16,
+        },
     },
     gap: 24,
+    handle: {
+        paddingBottom: 16,
+    },
     heading: {
         gap: 24,
     },

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

@@ -6,6 +6,7 @@ declare const _default: {
         readonly borderRadiusNone: 0;
         readonly borderRadiusRounded: 4;
     };
+    readonly borderBottom: "#5c2ca9";
     readonly borderRadius: 6;
     readonly desktop: {
         readonly height: 88;

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

@@ -6,6 +6,7 @@ export default {
         borderRadiusNone: 0,
         borderRadiusRounded: 4,
     },
+    borderBottom: '#5c2ca9',
     borderRadius: 6,
     desktop: {
         height: 88,

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

@@ -8,8 +8,14 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;
+        readonly mobile: {
+            readonly paddingBottom: 16;
+        };
     };
     readonly gap: 24;
+    readonly handle: {
+        readonly paddingBottom: 16;
+    };
     readonly heading: {
         readonly gap: 24;
     };

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

@@ -8,8 +8,14 @@ export default {
     borderRadius: 16,
     content: {
         gap: 12,
+        mobile: {
+            paddingBottom: 16,
+        },
     },
     gap: 24,
+    handle: {
+        paddingBottom: 16,
+    },
     heading: {
         gap: 24,
     },

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

@@ -6,6 +6,7 @@ declare const _default: {
         readonly borderRadiusNone: 0;
         readonly borderRadiusRounded: 4;
     };
+    readonly borderBottom: "#5c2ca9";
     readonly borderRadius: 6;
     readonly desktop: {
         readonly height: 88;

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

@@ -6,6 +6,7 @@ export default {
         borderRadiusNone: 0,
         borderRadiusRounded: 4,
     },
+    borderBottom: '#5c2ca9',
     borderRadius: 6,
     desktop: {
         height: 88,

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

@@ -2,6 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly loadingColor: "#f7f6eb";
+    readonly loadingColor: "#f1efe4";
 };
 export default _default;