@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/tokens/semantic-dark.ts

@@ -3,23 +3,250 @@
  */
 
 export default {
-  color: {
-    background: '#191917',
-    background1: '#222222',
-    backgroundPurple: '#7a42c8',
-    invalidText: '#ff7964',
+  background: {
+    brand: '#996cda',
+    primary: '#191917',
+    secondary: '#232323',
+  },
+  border: {
+    strong: '#ebebeb',
+    subtle: '#4c473d',
+  },
+  feedback: {
+    danger: {
+      border: '#ff7964',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#ff7964',
+      },
+      surface: {
+        default: '#de2612',
+        subtle: '#521a16',
+      },
+    },
+    functional: {
+      border: '#b2afae',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#b2afae',
+      },
+      surface: {
+        default: '#888888',
+        subtle: '#232323',
+      },
+    },
+    info: {
+      border: '#6bb0ff',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#6bb0ff',
+      },
+      surface: {
+        default: '#1c6cd4',
+        subtle: '#042455',
+      },
+    },
+    positive: {
+      border: '#58ca93',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#58ca93',
+      },
+      surface: {
+        default: '#0f834a',
+        subtle: '#033d21',
+      },
+    },
+    warning: {
+      border: '#ff9639',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#ff9639',
+      },
+      surface: {
+        default: '#cb5b00',
+        subtle: '#6b2d00',
+      },
+    },
+  },
+  focus: {
+    inverted: '#fcfbf2',
+    primary: '#ebebeb',
+  },
+  icon: {
+    inverted: '#fcfbf2',
+    primary: '#ebebeb',
+  },
+  interactive: {
+    affirmative: {
+      border: {
+        strong: '#ebebeb',
+        subtle: '#58ca93',
+      },
+      foreground: {
+        strong: '#191917',
+        subtle: '#58ca93',
+      },
+      surface: {
+        strong: {
+          active: '#58ca93',
+          default: '#19a660',
+          hover: '#36bf7d',
+        },
+        subtle: {
+          active: '#033d21',
+          hover: '#002e18',
+        },
+      },
+    },
+    brand: {
+      border: {
+        strong: '#ebebeb',
+      },
+      foreground: {
+        strong: '#191917',
+      },
+      surface: {
+        strong: {
+          active: '#c6b5e2',
+          default: '#996cda',
+          hover: '#af90de',
+        },
+      },
+    },
+    destructive: {
+      border: {
+        strong: '#ebebeb',
+        subtle: '#ff7964',
+      },
+      foreground: {
+        strong: '#191917',
+        subtle: '#ff7964',
+      },
+      surface: {
+        strong: {
+          active: '#ff7964',
+          default: '#f4412a',
+          hover: '#ff634a',
+        },
+        subtle: {
+          active: '#521a16',
+          hover: '#3b1512',
+        },
+      },
+    },
+    functional: {
+      border: {
+        strong: '#ebebeb',
+        subtle: '#ebebeb',
+        inverted: '#f7f7f7',
+      },
+      foreground: {
+        strong: '#fcfbf2',
+        subtle: '#ebebeb',
+        inverted: '#f7f7f7',
+      },
+      surface: {
+        strong: {
+          active: '#d3d3d3',
+          default: '#919191',
+          hover: '#b2afae',
+        },
+        subtle: {
+          active: '#4c4c4c',
+          hover: '#3a3837',
+          inverted: {
+            active: '#d3d3d3',
+            hover: '#ebebeb',
+          },
+        },
+      },
+    },
+    highlight: {
+      border: {
+        strong: '#f7f7f7',
+      },
+      foreground: {
+        strong: '#101010',
+      },
+      surface: {
+        strong: {
+          active: '#ffd885',
+          default: '#ffb921',
+          hover: '#ffc852',
+        },
+      },
+    },
+    neutral: {
+      border: {
+        subtle: '#ebebeb',
+      },
+      foreground: {
+        subtle: '#ebebeb',
+      },
+      surface: {
+        subtle: {
+          active: '#30302c',
+          hover: '#282825',
+        },
+      },
+    },
   },
   opacity: {
     disabled: 50,
   },
   shadow: {
-    broadbandGreenColor: '#506c21',
-    cashbackLilacColor: '#8b2bc9',
-    defaultColor: '#e7e6e6',
-    energyBlueColor: '#326e7a',
-    insuranceOrangeColor: '#9b4c0e',
-    mobileRoseColor: '#a7266d',
-    piggyPinkColor: '#8f358f',
-    purpleColor: '#7a42c8',
+    brand: '#7a42c8',
+    broadband: '#506c21',
+    cashback: '#8b2bc9',
+    default: '#f7f7f7',
+    energy: '#326e7a',
+    insurance: '#9b4c0e',
+    mobile: '#a7266d',
+    pig: '#8f358f',
+  },
+  surface: {
+    brand: {
+      default: '#996cda',
+      strong: '#26164f',
+      subtle: '#442484',
+    },
+    broadband: {
+      default: '#506c21',
+      subtle: '#35421c',
+    },
+    cashback: {
+      default: '#8b2bc9',
+      subtle: '#522270',
+    },
+    energy: {
+      default: '#326e7a',
+      subtle: '#254348',
+    },
+    highlight: {
+      default: '#ffb921',
+      subtle: '#756230',
+    },
+    insurance: {
+      default: '#9b4c0e',
+      subtle: '#5a3213',
+    },
+    mobile: {
+      default: '#a7266d',
+      subtle: '#601f42',
+    },
+    neutral: {
+      strong: '#232323',
+      subtle: '#191917',
+    },
+    pig: {
+      default: '#8f358f',
+      subtle: '#5d2167',
+    },
+  },
+  text: {
+    inverted: '#191917',
+    primary: '#ebebeb',
+    secondary: '#b2afae',
   },
 } as const;

package/src/tokens/semantic-light.ts

@@ -3,23 +3,250 @@
  */
 
 export default {
-  color: {
-    background: '#fcfbf2',
-    background1: '#ffffff',
-    backgroundPurple: '#7a42c8',
-    invalidText: '#de2612',
+  background: {
+    brand: '#7a42c8',
+    primary: '#fcfbf2',
+    secondary: '#ffffff',
+  },
+  border: {
+    strong: '#101010',
+    subtle: '#d4d2c0',
+  },
+  feedback: {
+    danger: {
+      border: '#de2612',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#de2612',
+      },
+      surface: {
+        default: '#de2612',
+        subtle: '#ffccc5',
+      },
+    },
+    functional: {
+      border: '#888888',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#888888',
+      },
+      surface: {
+        default: '#888888',
+        subtle: '#d3d3d3',
+      },
+    },
+    info: {
+      border: '#1c6cd4',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#1c6cd4',
+      },
+      surface: {
+        default: '#1c6cd4',
+        subtle: '#bcddff',
+      },
+    },
+    positive: {
+      border: '#0f834a',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#0f834a',
+      },
+      surface: {
+        default: '#0f834a',
+        subtle: '#a2e2c3',
+      },
+    },
+    warning: {
+      border: '#be5400',
+      foreground: {
+        default: '#fcfbf2',
+        subtle: '#be5400',
+      },
+      surface: {
+        default: '#be5400',
+        subtle: '#ffcca8',
+      },
+    },
+  },
+  focus: {
+    inverted: '#fcfbf2',
+    primary: '#101010',
+  },
+  icon: {
+    inverted: '#fcfbf2',
+    primary: '#101010',
+  },
+  interactive: {
+    affirmative: {
+      border: {
+        strong: '#101010',
+        subtle: '#04663a',
+      },
+      foreground: {
+        strong: '#fcfbf2',
+        subtle: '#04663a',
+      },
+      surface: {
+        strong: {
+          active: '#074b2a',
+          default: '#0f834a',
+          hover: '#04663a',
+        },
+        subtle: {
+          active: '#c5edda',
+          hover: '#e7f9f0',
+        },
+      },
+    },
+    brand: {
+      border: {
+        strong: '#101010',
+      },
+      foreground: {
+        strong: '#fcfbf2',
+      },
+      surface: {
+        strong: {
+          active: '#442484',
+          default: '#7a42c8',
+          hover: '#5c2ca9',
+        },
+      },
+    },
+    destructive: {
+      border: {
+        strong: '#101010',
+        subtle: '#a4281e',
+      },
+      foreground: {
+        strong: '#fcfbf2',
+        subtle: '#a4281e',
+      },
+      surface: {
+        strong: {
+          active: '#6b1f1a',
+          default: '#de2612',
+          hover: '#a4281e',
+        },
+        subtle: {
+          active: '#ffe3df',
+          hover: '#fff3f1',
+        },
+      },
+    },
+    functional: {
+      border: {
+        strong: '#101010',
+        subtle: '#101010',
+        inverted: '#f7f7f7',
+      },
+      foreground: {
+        strong: '#fcfbf2',
+        subtle: '#101010',
+        inverted: '#f7f7f7',
+      },
+      surface: {
+        strong: {
+          active: '#4c4c4c',
+          default: '#888888',
+          hover: '#5b5b5b',
+        },
+        subtle: {
+          active: '#d3d3d3',
+          hover: '#ebebeb',
+          inverted: {
+            active: '#3a3837',
+            hover: '#3f3f3f',
+          },
+        },
+      },
+    },
+    highlight: {
+      border: {
+        strong: '#101010',
+      },
+      foreground: {
+        strong: '#101010',
+      },
+      surface: {
+        strong: {
+          active: '#d1950b',
+          default: '#ffb921',
+          hover: '#eba400',
+        },
+      },
+    },
+    neutral: {
+      border: {
+        subtle: '#101010',
+      },
+      foreground: {
+        subtle: '#101010',
+      },
+      surface: {
+        subtle: {
+          active: '#f1efe4',
+          hover: '#f7f6eb',
+        },
+      },
+    },
   },
   opacity: {
     disabled: 50,
   },
   shadow: {
-    broadbandGreenColor: '#8cba3b',
-    cashbackLilacColor: '#be7aeb',
-    defaultColor: '#101010',
-    energyBlueColor: '#6db5c3',
-    insuranceOrangeColor: '#ff7b00',
-    mobileRoseColor: '#ee6dbb',
-    piggyPinkColor: '#f295ff',
-    purpleColor: '#7a42c8',
+    brand: '#7a42c8',
+    broadband: '#8cba3b',
+    cashback: '#be7aeb',
+    default: '#101010',
+    energy: '#6db5c3',
+    insurance: '#ff7b00',
+    mobile: '#ee6dbb',
+    pig: '#f295ff',
+  },
+  surface: {
+    brand: {
+      default: '#7a42c8',
+      strong: '#26164f',
+      subtle: '#af90de',
+    },
+    broadband: {
+      default: '#8cba3b',
+      subtle: '#d2e6b0',
+    },
+    cashback: {
+      default: '#be7aeb',
+      subtle: '#dfbdf5',
+    },
+    energy: {
+      default: '#6db5c3',
+      subtle: '#bddee4',
+    },
+    highlight: {
+      default: '#ffb921',
+      subtle: '#ffd885',
+    },
+    insurance: {
+      default: '#ff7b00',
+      subtle: '#ffb46d',
+    },
+    mobile: {
+      default: '#ee6dbb',
+      subtle: '#fad0e9',
+    },
+    neutral: {
+      strong: '#ffffff',
+      subtle: '#fcfbf2',
+    },
+    pig: {
+      default: '#f295ff',
+      subtle: '#f9ceff',
+    },
+  },
+  text: {
+    inverted: '#fcfbf2',
+    primary: '#101010',
+    secondary: '#888888',
   },
 } as const;

package/src/tokens/semantic.ts

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  opacity: {
+    disabled: 50,
+  },
+} as const;

package/src/types/values.ts

@@ -1,5 +1,6 @@
 import { AnimatableNumericValue, DimensionValue } from 'react-native';
 import { lightTheme } from '../core/themes';
+import color from '../tokens/color';
 
 export type addPrefixToObject<T, P extends string> = {
   [K in keyof T as K extends string | number ? `${P}${K}` : never]: T[K];
@@ -30,16 +31,37 @@ export type HSL =
   | `hsl(${string})`
   | `hsl(${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace},${OptionalSpace}${number}${OptionalSpace})`;
 
-type FlattenColorKeys<T> = {
-  [K in keyof T]: T[K] extends Record<string, unknown>
-    ? { [K2 in keyof T[K]]: `${K & string}${K2 & string}` }[keyof T[K]]
-    : K;
-}[keyof T];
+// Helper type to convert string to camel case
+type ToCamelCase<S extends string> = S extends `${infer P1}-${infer P2}${infer P3}`
+  ? `${P1}${Uppercase<P2>}${ToCamelCase<P3>}`
+  : S;
+
+// Helper to capitalise first letter
+type Capitalise<S extends string> = S extends `${infer First}${infer Rest}`
+  ? `${Uppercase<First>}${Rest}`
+  : S;
+
+// Recursive function to flatten and camel case color keys
+export type FlattenColorKeys<T> =
+  T extends Record<string, unknown>
+    ? {
+        [K in keyof T]: T[K] extends string
+          ? ToCamelCase<K & string>
+          : T[K] extends Record<string, unknown>
+            ? FlattenColorKeys<T[K]> extends infer Nested
+              ? Nested extends string
+                ? ToCamelCase<`${K & string}${Capitalise<Nested>}`>
+                : never
+              : never
+            : never;
+      }[keyof T]
+    : never;
 
 export type ColorValue =
   | 'currentColor'
   | 'transparent'
-  | FlattenColorKeys<(typeof lightTheme)['color']>
+  | FlattenColorKeys<Omit<typeof color, 'light' | 'dark'> & { white: '#ffffff'; black: '#000000' }>
+  | FlattenColorKeys<(typeof color)['light']>
   | HSLA
   | HSL
   | RGB

package/src/utils/coloursAsArray.ts

@@ -1,7 +1,28 @@
 import { color } from '../tokens';
 
+const { light, dark, ...restOfColors } = color;
+
+/**
+ * Recursively flatten nested color objects into camelCase keys
+ */
+function flattenColorObject(obj: Record<string, any>, prefix = ''): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  Object.entries(obj).forEach(([key, value]) => {
+    const camelKey = prefix ? `${prefix}${key.charAt(0).toUpperCase()}${key.slice(1)}` : key;
+
+    if (typeof value === 'string') {
+      result[camelKey] = value;
+    } else if (value && typeof value === 'object') {
+      Object.assign(result, flattenColorObject(value, camelKey));
+    }
+  });
+
+  return result;
+}
+
 export function extractLightColorValues(): Record<string, string> {
-  return Object.entries(color).reduce(
+  return Object.entries(restOfColors).reduce(
     (acc, [colorName, variants]) => {
       Object.entries(variants).forEach(([variantName, hexValue]) => {
         acc[`${colorName}${variantName}`] = hexValue;
@@ -12,6 +33,27 @@ export function extractLightColorValues(): Record<string, string> {
   );
 }
 
+/**
+ * Extract flattened semantic color values from light theme
+ */
+export function extractSemanticColorValues(): Record<string, string> {
+  return flattenColorObject(light);
+}
+
+/**
+ * Extract all flattened color values (primitive + semantic)
+ */
+export function extractAllColorValues(): Record<string, string> {
+  return {
+    ...extractLightColorValues(),
+    ...extractSemanticColorValues(),
+  };
+}
+
 export default function coloursAsArray(): Array<string> {
-  return [...Object.keys(color), ...Object.keys(extractLightColorValues())];
+  const primitiveColors = Object.keys(restOfColors);
+  const primitiveColorValues = Object.keys(extractLightColorValues());
+  const semanticColorValues = Object.keys(extractSemanticColorValues());
+
+  return [...primitiveColors, ...primitiveColorValues, ...semanticColorValues];
 }

package/src/utils/getFlattenedColorValue.ts

@@ -1,6 +1,6 @@
 import { ColorValue } from '../types';
 
-type ThemeColor = string | Record<string, string>;
+type ThemeColor = string | { [key: string]: string | ThemeColor };
 
 export default function getFlattenedColorValue(
   value?: string,

package/src/utils/hexWithOpacity.ts

@@ -0,0 +1,19 @@
+const hexWithOpacity = (hex: string, opacity: number): string => {
+  'worklet';
+  // Remove # if present
+  const cleanHex = hex.replace('#', '');
+
+  // Validate hex string format
+  if (cleanHex.length !== 6 || !/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error(`Invalid hex color format: ${hex}. Expected format: #RRGGBB or RRGGBB`);
+  }
+
+  // Convert hex to RGB
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+export default hexWithOpacity;

package/src/utils/index.ts

@@ -1,4 +1,5 @@
+export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
-export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as hexWithOpacity } from './hexWithOpacity';
 export * from './styleUtils';