@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/src/components/Heading/Heading.tsx

@@ -1,9 +1,7 @@
-import { useMemo } from 'react';
 import { Text, TextStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import type { ColorValue } from '../../types';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 import type HeadingProps from './Heading.props';
 
 const Heading = ({
@@ -23,26 +21,19 @@ const Heading = ({
   inverted,
   ...props
 }: HeadingProps) => {
+  // Extract margin utility props from remaining props
+  const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
+
   styles.useVariants({
     size,
     underline,
     strikeThrough,
     inverted,
   });
-  const { color: themeColor, colorMode } = useTheme();
-  const colorValue: ColorValue = useMemo(
-    () => getFlattenedColorValue(color, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]
-  );
-  const decorationColor = useMemo(
-    () => getFlattenedColorValue(textDecorationColor, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]
-  );
+
   return (
     <Text
-      {...props}
+      {...remainingProps}
       {...(truncated
         ? {
             numberOfLines: 1,
@@ -51,16 +42,16 @@ const Heading = ({
         : {})}
       style={[
         styles.text,
+        utilityStyles,
         {
-          ...(colorValue ? { color: colorValue } : {}),
           ...(textTransform ? { textTransform } : {}),
           ...(textAlign ? { textAlign } : {}),
           ...(textAlignVertical ? { textAlignVertical } : {}),
-          ...(decorationColor && { textDecorationColor: decorationColor }),
           ...(textDecorationLine && { textDecorationLine }),
           ...(textDecorationStyle && { textDecorationStyle }),
           ...(userSelect && { userSelect }),
         },
+        styles.getColours(color, textDecorationColor),
         props.style,
       ]}
     >
@@ -147,6 +138,23 @@ const styles = StyleSheet.create(theme => ({
             lg: theme.typography.desktop.heading.xl.lineHeight,
           },
         },
+        '2xl': {
+          fontSize: {
+            base: theme.typography.mobile.heading['2xl'].fontSize,
+            md: theme.typography.tablet.heading['2xl'].fontSize,
+            lg: theme.typography.desktop.heading['2xl'].fontSize,
+          },
+          fontWeight: {
+            base: theme.typography.mobile.heading['2xl'].fontWeight,
+            md: theme.typography.tablet.heading['2xl'].fontWeight,
+            lg: theme.typography.desktop.heading['2xl'].fontWeight,
+          },
+          lineHeight: {
+            base: theme.typography.mobile.heading['2xl'].lineHeight,
+            md: theme.typography.tablet.heading['2xl'].lineHeight,
+            lg: theme.typography.desktop.heading['2xl'].lineHeight,
+          },
+        },
       },
       underline: {
         true: {
@@ -165,6 +173,20 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
+  getColours: (color?: string, textDecorationColor?: string) => ({
+    ...(color
+      ? {
+          color: resolveThemeValueWithFallback(
+            color,
+            theme.helpers.semanticColor.text,
+            theme.color
+          ),
+        }
+      : {}),
+    ...(textDecorationColor
+      ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+      : {}),
+  }),
 }));
 
 export default Heading;

package/src/components/Toast/ToastItem.figma.tsx

@@ -1,13 +1,6 @@
 import figma from '@figma/code-connect';
 import ToastItem from './ToastItem';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
 
 figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7072%3A913', {
   props: {
@@ -18,5 +11,5 @@ figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?no
     // "icon24": figma.instance('Icon-24'),
     // "dismiss": figma.boolean('Dismiss?')
   },
-  example: props => <ToastItem toast={null} onClose={null} />,
+  example: props => <ToastItem  />,
 });

package/src/core/themes.ts

@@ -306,9 +306,18 @@ export const lightTheme = {
     white: '#ffffff',
     black: '#000000',
   } as const,
+
   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,
+    },
+  },
 } as const;
 
 const darkHelpers = {
@@ -364,7 +373,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,
+    },
+  },
 } as const;
 
 export const themes = {

package/src/hooks/useStyleProps.ts

@@ -1,6 +1,14 @@
 import { useMemo } from 'react';
 import { ViewStyle } from 'react-native';
-import { propStyleMapping, resolveThemeValue, themeStyleMapping, viewStyleProps } from '../utils';
+import {
+  propStyleMapping,
+  resolveThemeKey,
+  resolveThemeValueWithFallback,
+  semanticPropMapping,
+  themeStyleFallbackMapping,
+  themeStyleMapping,
+  viewStyleProps,
+} from '../utils';
 import useTheme from './useTheme';
 
 /**
@@ -28,8 +36,23 @@ export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
     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: keyof ViewStyle | undefined;
-      let themeKey: keyof typeof theme | undefined;
 
       // Handle shorthand props
       if (propStyleMapping[propName]) {
@@ -42,10 +65,22 @@ export const useStyleProps = (props: Record<string, any>): StylePropsResult => {
 
       if (stylePropName) {
         // Resolve theme value if needed
-        themeKey = themeStyleMapping[stylePropName] as keyof typeof theme;
+        const themeKey = themeStyleMapping[stylePropName as string];
+
+        if (themeKey) {
+          const themeObj = resolveThemeKey(theme, themeKey);
+          const fallbackKey = themeStyleFallbackMapping[themeKey];
+          const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
 
-        if (themeKey && theme[themeKey]) {
-          computedStyles[stylePropName] = resolveThemeValue(propValue, theme[themeKey]);
+          if (themeObj) {
+            computedStyles[stylePropName] = resolveThemeValueWithFallback(
+              propValue,
+              themeObj,
+              fallbackMapping
+            );
+          } else {
+            computedStyles[stylePropName] = propValue;
+          }
         } else {
           computedStyles[stylePropName] = propValue;
         }

package/src/tokens/color.ts

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

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

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

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

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

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

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

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

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

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

@@ -3,5 +3,5 @@
  */
 
 export default {
-  loadingColor: '#f7f6eb',
+  loadingColor: '#f1efe4',
 } as const;

package/src/tokens/font.ts

@@ -19,7 +19,9 @@ export default {
     '400': 30,
     '500': 36,
     '550': 40,
+    '575': 44,
     '600': 48,
+    '650': 54,
     '700': 60,
     '800': 72,
     '900': 96,

package/src/tokens/line-height.ts

@@ -15,7 +15,9 @@ export default {
   '800': 36,
   '900': 40,
   '950': 48,
+  '975': 52,
   '1000': 56,
+  '1050': 62,
   '1100': 72,
   '1200': 90,
 } as const;

package/src/tokens/primitive.ts

@@ -33,7 +33,9 @@ export default {
       '400': 30,
       '500': 36,
       '550': 40,
+      '575': 44,
       '600': 48,
+      '650': 54,
       '700': 60,
       '800': 72,
       '900': 96,
@@ -78,7 +80,9 @@ export default {
     '800': 36,
     '900': 40,
     '950': 48,
+    '975': 52,
     '1000': 56,
+    '1050': 62,
     '1100': 72,
     '1200': 90,
   },

package/src/tokens/semantic-dark.ts

@@ -5,6 +5,7 @@
 export default {
   background: {
     brand: '#7a42c8',
+    loading: '#30302c',
     primary: '#191917',
     secondary: '#232323',
   },

package/src/tokens/semantic-light.ts

@@ -5,6 +5,7 @@
 export default {
   background: {
     brand: '#7a42c8',
+    loading: '#f1efe4',
     primary: '#fcfbf2',
     secondary: '#ffffff',
   },

package/src/tokens/typography.ts

@@ -64,6 +64,11 @@ export const mobile = {
     },
   },
   heading: {
+    '2xl': {
+      fontSize: 44,
+      fontWeight: 700,
+      lineHeight: 52,
+    },
     fontFamily: 'Comic Hams',
     lg: {
       fontSize: 24,
@@ -151,6 +156,11 @@ export const tablet = {
     },
   },
   heading: {
+    '2xl': {
+      fontSize: 44,
+      fontWeight: 700,
+      lineHeight: 52,
+    },
     fontFamily: 'Comic Hams',
     lg: {
       fontSize: 24,
@@ -238,6 +248,11 @@ export const desktop = {
     },
   },
   heading: {
+    '2xl': {
+      fontSize: 54,
+      fontWeight: 700,
+      lineHeight: 62,
+    },
     fontFamily: 'Comic Hams',
     lg: {
       fontSize: 30,

package/src/types/index.ts

@@ -1,4 +1,6 @@
-export * from './states';
 export * from './refs';
-export * from './values';
+export * from './semanticColorValues';
+export * from './states';
 export * from './unistyles';
+export * from './utilityProps';
+export * from './values';

package/src/types/semanticColorValues.ts

@@ -0,0 +1,26 @@
+import type semanticLight from '../tokens/semantic-light';
+
+/**
+ * Simplified background color values derived from the semantic token `background` keys.
+ * e.g., 'brand' | 'primary' | 'secondary'
+ */
+export type BackgroundColorValue = keyof typeof semanticLight.background;
+
+/**
+ * Simplified border color values derived from the semantic token `border` keys.
+ * e.g., 'strong' | 'subtle'
+ */
+export type BorderColorValue = keyof typeof semanticLight.border;
+
+/**
+ * Simplified text color values derived from the semantic token `text` keys.
+ * e.g., 'affirmative' | 'brand' | 'inverted' | 'primary' | 'secondary'
+ * Also accepts any raw color value or undefined.
+ */
+export type TextColorValue = keyof typeof semanticLight.text;
+
+/**
+ * Simplified icon color values derived from the semantic token `icon` keys.
+ * e.g., 'inverted' | 'primary'
+ */
+export type IconColorValue = keyof typeof semanticLight.icon;