@utilitywarehouse/hearth-react-native 0.1.0

package/src/tokens/color.ts

@@ -0,0 +1,285 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const blue = {
+  '0': '#f8fbff',
+  '50': '#eef7ff',
+  '100': '#d9ecff',
+  '200': '#bcddff',
+  '300': '#93c1ff',
+  '400': '#6bb0ff',
+  '500': '#41a0ff',
+  '600': '#2786f1',
+  '700': '#1c6cd4',
+  '800': '#2354a4',
+  '900': '#0b3375',
+  '950': '#042455',
+  '1000': '#001433',
+} as const;
+
+export const broadbandGreen = {
+  '0': '#f8faf6',
+  '50': '#f2f6ed',
+  '100': '#e7efdc',
+  '200': '#d2e6b0',
+  '300': '#8cba3b',
+  '400': '#7aa031',
+  '500': '#6e932b',
+  '600': '#64862a',
+  '700': '#5a7926',
+  '800': '#506c21',
+  '900': '#4f6b20',
+  '950': '#35421c',
+  '1000': '#252d16',
+} as const;
+
+export const cashbackLilac = {
+  '0': '#f7f5f8',
+  '50': '#f5f2f6',
+  '100': '#ebdef5',
+  '200': '#e4caf5',
+  '300': '#dfbdf5',
+  '400': '#ce9cf0',
+  '500': '#be7aeb',
+  '600': '#9f3be2',
+  '700': '#8b2bc9',
+  '800': '#7821b8',
+  '900': '#7429b5',
+  '950': '#522270',
+  '1000': '#3a1f52',
+} as const;
+
+export const energyBlue = {
+  '0': '#f7f9fa',
+  '50': '#edf4f6',
+  '100': '#d4e5e9',
+  '200': '#bddee4',
+  '300': '#6db5c3',
+  '400': '#579daa',
+  '500': '#4c8a97',
+  '600': '#367683',
+  '700': '#326e7a',
+  '800': '#2d6571',
+  '900': '#2c6370',
+  '950': '#254348',
+  '1000': '#1a2f35',
+} as const;
+
+export const green = {
+  '0': '#f8fdf9',
+  '50': '#e7f9f0',
+  '100': '#c5edda',
+  '200': '#a2e2c3',
+  '300': '#74d6a0',
+  '400': '#58ca93',
+  '500': '#36bf7d',
+  '600': '#19a660',
+  '700': '#0f834a',
+  '800': '#04663a',
+  '900': '#074b2a',
+  '950': '#033d21',
+  '1000': '#002e18',
+} as const;
+
+export const grey = {
+  '0': '#ffffff',
+  '50': '#f6f5f5',
+  '100': '#e7e6e6',
+  '200': '#d1d0d0',
+  '300': '#b2afae',
+  '400': '#8a8686',
+  '500': '#6f6c6b',
+  '600': '#5f5c5b',
+  '700': '#555352',
+  '800': '#464444',
+  '900': '#3e3c3b',
+  '950': '#222222',
+  '975': '#191919',
+  '1000': '#101010',
+} as const;
+
+export const insuranceOrange = {
+  '0': '#fefcf9',
+  '50': '#fdf5eb',
+  '100': '#fcecd6',
+  '200': '#ffcda0',
+  '300': '#ffb46d',
+  '400': '#ff7b00',
+  '500': '#f06b00',
+  '600': '#e26400',
+  '700': '#cb5b00',
+  '800': '#9b4c0e',
+  '900': '#7f4518',
+  '950': '#5a3213',
+  '1000': '#3f2616',
+} as const;
+
+export const mobileRose = {
+  '0': '#fffaf9',
+  '50': '#fdf2f6',
+  '100': '#faeaf2',
+  '200': '#fad0e9',
+  '300': '#f49fd2',
+  '400': '#ee6dbb',
+  '500': '#e652aa',
+  '600': '#de379a',
+  '700': '#d61c89',
+  '800': '#a7266d',
+  '900': '#8a3260',
+  '950': '#601f42',
+  '1000': '#421a32',
+} as const;
+
+export const orange = {
+  '0': '#fffdf8',
+  '50': '#fff5ed',
+  '100': '#ffe6d4',
+  '200': '#ffcca8',
+  '300': '#ffab70',
+  '400': '#ff9639',
+  '500': '#ff8010',
+  '600': '#f56e00',
+  '700': '#cf5d00',
+  '750': '#be5400',
+  '800': '#ad4b00',
+  '900': '#893900',
+  '950': '#6b2d00',
+  '1000': '#4a1f00',
+} as const;
+
+export const piggyPink = {
+  '0': '#faf5fa',
+  '50': '#f6f1f7',
+  '100': '#f9eafa',
+  '200': '#f9ceff',
+  '300': '#f295ff',
+  '400': '#ed66ff',
+  '500': '#d052c8',
+  '600': '#bc48b4',
+  '700': '#a53fa5',
+  '800': '#8f358f',
+  '900': '#7a1f7e',
+  '950': '#5d2167',
+  '1000': '#3f1448',
+} as const;
+
+export const purple = {
+  '0': '#f7f6f9',
+  '50': '#eeebf4',
+  '100': '#e6dff1',
+  '200': '#ddd2ef',
+  '300': '#d5c3ee',
+  '400': '#a782db',
+  '500': '#926fd1',
+  '600': '#8850cf',
+  '700': '#7a42c8',
+  '800': '#6538b8',
+  '900': '#5a3285',
+  '950': '#492d6f',
+  '1000': '#26164f',
+} as const;
+
+export const red = {
+  '0': '#fffaf9',
+  '50': '#fff3f1',
+  '100': '#ffe3df',
+  '200': '#ffccc5',
+  '300': '#ffa89d',
+  '400': '#ff7964',
+  '500': '#ff634a',
+  '600': '#f4412a',
+  '700': '#de2612',
+  '800': '#a4281e',
+  '900': '#6b1f1a',
+  '950': '#521a16',
+  '1000': '#3b1512',
+} as const;
+
+export const warmWhite = {
+  '0': '#fdfcfa',
+  '50': '#fcfbf2',
+  '100': '#f7f6eb',
+  '200': '#f1efe4',
+  '300': '#d4d2c0',
+  '400': '#bfb9a9',
+  '500': '#a99f8b',
+  '600': '#89816e',
+  '700': '#6a6354',
+  '800': '#4c473d',
+  '900': '#30302c',
+  '950': '#282825',
+  '975': '#20201d',
+  '1000': '#191917',
+} as const;
+
+export const yellow = {
+  '0': '#fffef9',
+  '50': '#fff8ea',
+  '100': '#ffe8b8',
+  '200': '#ffd885',
+  '300': '#ffc852',
+  '400': '#ffb921',
+  '500': '#eba400',
+  '600': '#d1950b',
+  '700': '#b78715',
+  '800': '#9c7820',
+  '900': '#82692b',
+  '950': '#756230',
+  '1000': '#4c401f',
+} as const;
+
+export const light = {
+  background: '#fcfbf2',
+  background1: '#ffffff',
+  backgroundPurple: '#7a42c8',
+  invalidText: '#de2612',
+  shadow: {
+    broadbandGreenColor: '#8cba3b',
+    cashbackLilacColor: '#be7aeb',
+    defaultColor: '#101010',
+    energyBlueColor: '#6db5c3',
+    insuranceOrangeColor: '#ff7b00',
+    mobileRoseColor: '#ee6dbb',
+    piggyPinkColor: '#f295ff',
+    purpleColor: '#7a42c8',
+  },
+} as const;
+
+export const dark = {
+  background: '#191917',
+  background1: '#222222',
+  backgroundPurple: '#7a42c8',
+  invalidText: '#ff7964',
+  shadow: {
+    broadbandGreenColor: '#506c21',
+    cashbackLilacColor: '#8b2bc9',
+    defaultColor: '#e7e6e6',
+    energyBlueColor: '#326e7a',
+    insuranceOrangeColor: '#9b4c0e',
+    mobileRoseColor: '#a7266d',
+    piggyPinkColor: '#8f358f',
+    purpleColor: '#7a42c8',
+  },
+} as const;
+
+const color = {
+  blue,
+  broadbandGreen,
+  cashbackLilac,
+  energyBlue,
+  green,
+  grey,
+  insuranceOrange,
+  mobileRose,
+  orange,
+  piggyPink,
+  purple,
+  red,
+  warmWhite,
+  yellow,
+  light,
+  dark,
+} as const;
+
+export default color;

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

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 12,
+  heading: {
+    gap: 2,
+  },
+  item: {
+    backgroundColorActive: '#30302c',
+    backgroundColorHover: '#282825',
+    content: {
+      gap: 16,
+      paddingBottom: 16,
+      paddingHorizontal: 4,
+      paddingTop: 4,
+    },
+    gap: 0,
+    heading: {
+      gap: 16,
+      paddingHorizontal: 4,
+      paddingVertical: 16,
+    },
+  },
+  maxWidth: 680,
+  minWidth: 288,
+  padding: 0,
+} as const;

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

@@ -0,0 +1,27 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  blue: {
+    backgroundColor: '#042455',
+    borderColor: '#6bb0ff',
+  },
+  borderRadius: 8,
+  borderWidth: 2,
+  contentGap: 4,
+  gap: 8,
+  green: {
+    backgroundColor: '#033d21',
+    borderColor: '#58ca93',
+  },
+  orange: {
+    backgroundColor: '#6b2d00',
+    borderColor: '#ff9639',
+  },
+  padding: 14,
+  red: {
+    backgroundColor: '#521a16',
+    borderColor: '#ff7964',
+  },
+} as const;

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

@@ -0,0 +1,51 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderRadius: 4,
+  flatBase: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  gap: 4,
+  outline: {
+    blue: {
+      color: '#6bb0ff',
+    },
+    borderColor: '#89816e',
+    borderWidth: 1,
+    green: {
+      color: '#58ca93',
+    },
+    grey: {
+      color: '#b2afae',
+    },
+    orange: {
+      color: '#ff9639',
+    },
+    red: {
+      color: '#ff7964',
+    },
+  },
+  paddingHorizontal: 6,
+  paddingVertical: 2,
+  solid: {
+    blue: {
+      backgroundColor: '#1c6cd4',
+    },
+    color: '#fcfbf2',
+    green: {
+      backgroundColor: '#0f834a',
+    },
+    grey: {
+      backgroundColor: '#6f6c6b',
+    },
+    orange: {
+      backgroundColor: '#be5400',
+    },
+    red: {
+      backgroundColor: '#de2612',
+    },
+  },
+} as const;

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

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  default: {
+    content: {
+      gap: 12,
+      textGap: 8,
+    },
+    gap: 16,
+    horizontal: {
+      illustrationWidth: 100,
+      imageMaxWidth: 240,
+      imageMinWidth: 160,
+      maxWidth: 680,
+      minWidth: 288,
+    },
+    imageHeight: 160,
+    padding: 16,
+    vertical: {
+      maxWidth: 504,
+      minWidth: 288,
+    },
+  },
+  highlight: {
+    content: {
+      gap: 12,
+    },
+    gap: 0,
+    heading: {
+      broadbandGreenBackgroundColor: '#506c21',
+      cashbackLilacBackgroundColor: '#8b2bc9',
+      energyBlueBackgroundColor: '#326e7a',
+      insuranceOrangeBackgroundColor: '#9b4c0e',
+      mobileRoseBackgroundColor: '#a7266d',
+      piggyPinkBackgroundColor: '#8f358f',
+      yellowBackgroundColor: '#756230',
+    },
+    padding: 16,
+  },
+  imageContainerBorderColor: '#e7e6e6',
+} as const;

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

@@ -0,0 +1,35 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  backgroundColor: '#191917',
+  borderTopColor: '#4c473d',
+  borderTopWidth: 2,
+  gap: 0,
+  indicator: {
+    backgroundColor: '#7a42c8',
+    borderRadius: 4,
+    height: 2,
+  },
+  item: {
+    gap: 2,
+    icon: {
+      colorActive: '#7a42c8',
+      colorDefault: '#e7e6e6',
+    },
+    label: {
+      colorActive: '#7a42c8',
+      colorDefault: '#e7e6e6',
+    },
+    paddingBottom: 2,
+    paddingHorizontal: 0,
+    paddingTop: 0,
+  },
+  items: {
+    paddingHorizontal: 16,
+    paddingVertical: 0,
+  },
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+} as const;

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

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  backgroundColor: '#222222',
+  borderTopLeftRadius: 16,
+  borderTopRightRadius: 16,
+  gap: 6,
+  handle: {
+    backgroundColor: '#555352',
+    borderRadius: 6,
+    height: 5,
+    width: 36,
+  },
+  padding: 16,
+} as const;

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  color: '#e7e6e6',
+  gap: 8,
+} as const;

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

@@ -0,0 +1,104 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderRadius: 8,
+  borderWidth: 2,
+  emphasis: {
+    borderColor: '#e7e6e6',
+    shadowColor: '#e7e6e6',
+    yellow: {
+      backgroundColor: '#ffb921',
+      backgroundColorActive: '#d1950b',
+      backgroundColorHover: '#eba400',
+      foregroundColor: '#101010',
+    },
+  },
+  gap: 6,
+  ghost: {
+    green: {
+      backgroundColorActive: '#002e18',
+      backgroundColorHover: '#033d21',
+      foregroundColor: '#58ca93',
+    },
+    grey: {
+      backgroundColorActive: '#3e3c3b',
+      backgroundColorHover: '#464444',
+      foregroundColor: '#e7e6e6',
+      inverted: {
+        backgroundColorActive: '#3e3c3b',
+        backgroundColorHover: '#464444',
+        foregroundColor: '#fcfbf2',
+      },
+    },
+    red: {
+      backgroundColorActive: '#3b1512',
+      backgroundColorHover: '#521a16',
+      foregroundColor: '#ff7964',
+    },
+  },
+  md: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  minWidth: 80,
+  outline: {
+    green: {
+      backgroundColorActive: '#002e18',
+      backgroundColorHover: '#033d21',
+      borderColor: '#58ca93',
+      foregroundColor: '#58ca93',
+    },
+    grey: {
+      backgroundColorActive: '#464444',
+      backgroundColorHover: '#3e3c3b',
+      borderColor: '#e7e6e6',
+      foregroundColor: '#e7e6e6',
+      inverted: {
+        backgroundColorActive: '#3e3c3b',
+        backgroundColorHover: '#464444',
+        borderColor: '#f6f5f5',
+        foregroundColor: '#f6f5f5',
+      },
+    },
+    red: {
+      backgroundColorActive: '#3b1512',
+      backgroundColorHover: '#521a16',
+      borderColor: '#ff7964',
+      foregroundColor: '#ff7964',
+    },
+  },
+  sm: {
+    paddingHorizontal: 16,
+    paddingVertical: 4,
+  },
+  solid: {
+    borderColor: '#e7e6e6',
+    green: {
+      backgroundColor: '#0f834a',
+      backgroundColorActive: '#074b2a',
+      backgroundColorHover: '#04663a',
+      foregroundColor: '#fcfbf2',
+    },
+    red: {
+      backgroundColor: '#de2612',
+      backgroundColorActive: '#6b1f1a',
+      backgroundColorHover: '#a4281e',
+      foregroundColor: '#fcfbf2',
+    },
+    yellow: {
+      backgroundColor: '#ffb921',
+      backgroundColorActive: '#d1950b',
+      backgroundColorHover: '#eba400',
+      foregroundColor: '#101010',
+      inverted: {
+        backgroundColor: '#ffb921',
+        backgroundColorActive: '#d1950b',
+        backgroundColorHover: '#eba400',
+        borderColor: '#101010',
+        foregroundColor: '#101010',
+      },
+    },
+  },
+} as const;

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

@@ -0,0 +1,63 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderRadius: 16,
+  brand: {
+    borderWidth: 2,
+    emphasis: {
+      borderColor: '#e7e6e6',
+      broadbandGreenBackgroundColor: '#506c21',
+      cashbackLilacBackgroundColor: '#8b2bc9',
+      energyBlueBackgroundColor: '#326e7a',
+      insuranceOrangeBackgroundColor: '#9b4c0e',
+      mobileRoseBackgroundColor: '#a7266d',
+      piggyPinkBackgroundColor: '#8f358f',
+      purpleBackgroundColor: '#7a42c8',
+    },
+    subtle: {
+      borderColor: '#8a8686',
+      broadbandGreenBackgroundColor: '#35421c',
+      cashbackLilacBackgroundColor: '#522270',
+      energyBlueBackgroundColor: '#254348',
+      insuranceOrangeBackgroundColor: '#5a3213',
+      mobileRoseBackgroundColor: '#601f42',
+      piggyPinkBackgroundColor: '#5d2167',
+      purpleBackgroundColor: '#492d6f',
+      yellowBackgroundColor: '#756230',
+    },
+  },
+  neutral: {
+    emphasis: {
+      borderColor: '#e7e6e6',
+      borderWidth: 2,
+    },
+    subtle: {
+      borderColor: '#4c473d',
+      borderWidth: 1,
+    },
+    warmWhiteBackgroundColor: '#191917',
+    whiteBackgroundColor: '#222222',
+  },
+  selectable: {
+    backgroundColor: '#222222',
+    borderColor: '#4c473d',
+    borderColorSelected: '#e7e6e6',
+    borderWidth: 1,
+    borderWidthSelected: 2,
+    gap: 16,
+  },
+  mobile: {
+    padding: 16,
+    paddingNone: 0,
+  },
+  tablet: {
+    padding: 24,
+    paddingNone: 0,
+  },
+  desktop: {
+    padding: 24,
+    paddingNone: 0,
+  },
+} as const;

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

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 8,
+  item: {
+    backgroundColorActive: '#e7e6e6',
+    borderColor: '#e7e6e6',
+    borderColorHover: '#d1d0d0',
+    borderWidth: 2,
+    inverted: {
+      backgroundColorActive: '#fcfbf2',
+      borderColor: '#fcfbf2',
+      borderColorHover: '#f1efe4',
+    },
+  },
+  size: 12,
+} as const;