@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

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

@@ -3,12 +3,8 @@
  */
 
 export default {
-  backgroundColorActive: '#30302c',
-  backgroundColorHover: '#282825',
-  borderColor: '#e7e6e6',
   borderRadius: 9999,
   borderWidth: 1,
-  foregroundColor: '#e7e6e6',
   gap: 6,
   group: {
     gap: 8,
@@ -17,10 +13,4 @@ export default {
   minWidth: 66,
   paddingHorizontal: 20,
   paddingVertical: 12,
-  selected: {
-    backgroundColor: '#7a42c8',
-    backgroundColorActive: '#5a3285',
-    backgroundColorHover: '#6538b8',
-    foregroundColor: '#fcfbf2',
-  },
 } as const;

package/src/tokens/components/dark/progress-stepper.ts

@@ -7,23 +7,15 @@ export default {
     complete: {
       backgroundColor: '#7a42c8',
     },
-    future: {
-      backgroundColor: '#4c473d',
-    },
     height: 2,
   },
   gapHorizontal: 0,
   gapVertical: 4,
   indicator: {
-    active: {
-      backgroundColorHalo: '#222222',
-    },
     complete: {
-      backgroundColor: '#7a42c8',
       iconColor: '#fcfbf2',
     },
     future: {
-      borderColor: '#4c473d',
       borderWidth: 2,
     },
     height: 28,

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

@@ -6,22 +6,19 @@ export default {
   borderRadius: 9999,
   borderWidth: 2,
   checked: {
-    color: '#e7e6e6',
+    color: '#ebebeb',
   },
   gap: 8,
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#4c473d',
   outlineColorHover: '#30302c',
   outlineWidth: 3,
   tile: {
-    backgroundColor: '#222222',
-    borderColor: '#4c473d',
-    borderColorSelected: '#e7e6e6',
     borderRadius: 8,
     borderWidth: 1,
     borderWidthSelected: 2,
@@ -36,8 +33,4 @@ export default {
     minWidth: 200,
     padding: 12,
   },
-  unchecked: {
-    backgroundColor: '#222222',
-    borderColor: '#8a8686',
-  },
 } as const;

package/src/tokens/components/dark/{focus.ts → section-header.ts}

@@ -3,6 +3,8 @@
  */
 
 export default {
-  border: '#e7e6e6',
-  borderInverted: '#fcfbf2',
+  gap: 12,
+  textContent: {
+    gap: 2,
+  },
 } as const;

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

@@ -3,13 +3,9 @@
  */
 
 export default {
-  backgroundColorActive: '#30302c',
-  backgroundColorHover: '#282825',
   borderRadius: 6,
-  foregroundColor: '#e7e6e6',
   gap: 6,
   group: {
-    borderColor: '#e7e6e6',
     borderRadius: 8,
     borderWidth: 1,
     gap: 4,
@@ -20,8 +16,4 @@ export default {
   minWidth: 66,
   paddingHorizontal: 16,
   paddingVertical: 8,
-  selected: {
-    backgroundColor: '#7a42c8',
-    foregroundColor: '#fcfbf2',
-  },
 } as const;

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

@@ -3,25 +3,15 @@
  */
 
 export default {
-  backgroundColor: '#222222',
-  borderColor: '#e7e6e6',
-  borderColorInvalid: '#ff7964',
-  borderColorReadOnly: '#464444',
-  borderColorValid: '#58ca93',
   borderRadius: 8,
   borderWidth: 1,
   borderWidthFocused: 2,
   dropdown: {
-    backgroundColor: '#222222',
-    borderColor: '#4c473d',
     borderWidth: 1,
     gap: 4,
     gapContent: 8,
     item: {
-      backgroundColorActive: '#464444',
-      backgroundColorHover: '#3e3c3b',
       borderRadius: 8,
-      foregroundColor: '#e7e6e6',
       gap: 6,
       padding: 12,
     },

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

@@ -3,7 +3,7 @@
  */
 
 export default {
-  defaultFill: '#8850cf',
+  defaultFill: '#af90de',
   lg: {
     size: 40,
     strokeWidth: 3,

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

@@ -3,14 +3,6 @@
  */
 
 export default {
-  checked: {
-    backgroundColor: '#8850cf',
-    backgroundColorHover: '#926fd1',
-    iconColor: '#8850cf',
-  },
-  circle: {
-    backgroundColor: '#ffffff',
-  },
   md: {
     circle: {
       size: 28,
@@ -28,8 +20,6 @@ export default {
     width: 44,
   },
   unchecked: {
-    backgroundColor: '#6f6c6b',
-    backgroundColorHover: '#5f5c5b',
-    iconColor: '#6f6c6b',
+    backgroundColorHover: '#5b5b5b',
   },
 } as const;

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

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  borderRadius: 16,
+  cell: {
+    borderWidth: 1,
+    padding: 12,
+  },
+  emphasis: {
+    borderWidth: 2,
+  },
+  headerCell: {
+    borderWidth: 2,
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 16,
+  },
+  subtle: {
+    borderWidth: 1,
+  },
+} as const;

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

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  divider: {
+    borderWidth: 2,
+    color: '#ebebeb',
+  },
+  gap: 12,
+  item: {
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 16,
+    selected: {
+      borderBottomRadius: 0,
+      borderTopRadius: 4,
+    },
+  },
+  lg: {
+    height: 64,
+  },
+  md: {
+    height: 56,
+  },
+} as const;

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  backgroundColor: '#3f3f3f',
+  borderRadius: 8,
+  gapHorizontal: 8,
+  padding: 14,
+} as const;

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

@@ -3,22 +3,11 @@
  */
 
 export default {
-  backgroundColorActive: '#30302c',
-  backgroundColorHover: '#282825',
-  borderColor: '#e7e6e6',
   borderRadius: 8,
   borderWidth: 2,
-  foregroundColor: '#e7e6e6',
   gap: 6,
   height: 48,
   minWidth: 80,
   paddingHorizontal: 20,
   paddingVertical: 12,
-  selected: {
-    backgroundColor: '#7a42c8',
-    backgroundColorActive: '#5a3285',
-    backgroundColorHover: '#6538b8',
-    borderColor: '#e7e6e6',
-    foregroundColor: '#fcfbf2',
-  },
 } as const;

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  backgroundColor: '#3f3f3f',
+  borderRadius: 8,
+  gapHorizontal: 8,
+  gapVertical: 2,
+  paddingHorizontal: 12,
+  paddingVertical: 8,
+} as const;

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

@@ -3,14 +3,9 @@
  */
 
 export default {
-  emphasis: {
-    backgroundColor: '#7a42c8',
-  },
   gap: 0,
   largeTitle: {
-    gap: 2,
     paddingBottom: 16,
-    paddingHorizontal: 16,
     paddingTop: 0,
   },
   navigationBar: {
@@ -20,7 +15,4 @@ export default {
   },
   paddingHorizontal: 0,
   paddingVertical: 0,
-  subtle: {
-    backgroundColor: '#191917',
-  },
 } as const;

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

@@ -8,8 +8,6 @@ export default {
     gap: 2,
   },
   item: {
-    backgroundColorActive: '#f1efe4',
-    backgroundColorHover: '#f7f6eb',
     content: {
       gap: 16,
       paddingBottom: 16,

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

@@ -3,25 +3,9 @@
  */
 
 export default {
-  blue: {
-    backgroundColor: '#bcddff',
-    borderColor: '#1c6cd4',
-  },
   borderRadius: 8,
   borderWidth: 2,
   contentGap: 4,
   gap: 8,
-  green: {
-    backgroundColor: '#a2e2c3',
-    borderColor: '#0f834a',
-  },
-  orange: {
-    backgroundColor: '#ffcca8',
-    borderColor: '#cf5d00',
-  },
   padding: 14,
-  red: {
-    backgroundColor: '#ffccc5',
-    borderColor: '#de2612',
-  },
 } as const;

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

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  image: {
+    borderWidth: 1,
+  },
+  md: {
+    borderRadius: 8,
+    height: 48,
+    width: 48,
+  },
+  sm: {
+    borderRadius: 6,
+    height: 32,
+    width: 32,
+  },
+} as const;

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

@@ -9,43 +9,16 @@ export default {
     borderBottomRightRadius: 0,
   },
   gap: 4,
+  md: {
+    height: 32,
+    paddingVertical: 4,
+  },
   outline: {
-    blue: {
-      color: '#1c6cd4',
-    },
-    borderColor: '#d4d2c0',
     borderWidth: 1,
-    green: {
-      color: '#0f834a',
-    },
-    grey: {
-      color: '#5f5c5b',
-    },
-    orange: {
-      color: '#ad4b00',
-    },
-    red: {
-      color: '#de2612',
-    },
   },
   paddingHorizontal: 6,
-  paddingVertical: 2,
-  solid: {
-    blue: {
-      backgroundColor: '#1c6cd4',
-    },
-    color: '#fcfbf2',
-    green: {
-      backgroundColor: '#0f834a',
-    },
-    grey: {
-      backgroundColor: '#5f5c5b',
-    },
-    orange: {
-      backgroundColor: '#ad4b00',
-    },
-    red: {
-      backgroundColor: '#de2612',
-    },
+  sm: {
+    height: 24,
+    paddingVertical: 2,
   },
 } as const;

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

@@ -14,13 +14,13 @@ export default {
       imageMaxWidth: 240,
       imageMinWidth: 160,
       maxWidth: 680,
-      minWidth: 288,
+      minWidth: 240,
     },
     imageHeight: 160,
     padding: 16,
     vertical: {
       maxWidth: 504,
-      minWidth: 288,
+      minWidth: 240,
     },
   },
   highlight: {
@@ -28,15 +28,6 @@ export default {
       gap: 12,
     },
     gap: 0,
-    heading: {
-      broadbandGreenBackgroundColor: '#8cba3b',
-      cashbackLilacBackgroundColor: '#be7aeb',
-      energyBlueBackgroundColor: '#6db5c3',
-      insuranceOrangeBackgroundColor: '#ff7b00',
-      mobileRoseBackgroundColor: '#ee6dbb',
-      piggyPinkBackgroundColor: '#f295ff',
-      yellowBackgroundColor: '#ffb921',
-    },
     padding: 16,
   },
   imageContainerBorderColor: '#101010',

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

@@ -3,12 +3,9 @@
  */
 
 export default {
-  backgroundColor: '#fcfbf2',
-  borderTopColor: '#d4d2c0',
   borderTopWidth: 2,
   gap: 0,
   indicator: {
-    backgroundColor: '#7a42c8',
     borderRadius: 4,
     height: 2,
   },
@@ -16,11 +13,9 @@ export default {
     gap: 2,
     icon: {
       colorActive: '#7a42c8',
-      colorDefault: '#101010',
     },
     label: {
       colorActive: '#7a42c8',
-      colorDefault: '#101010',
     },
     paddingBottom: 2,
     paddingHorizontal: 0,

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

@@ -3,12 +3,11 @@
  */
 
 export default {
-  backgroundColor: '#ffffff',
   borderTopLeftRadius: 16,
   borderTopRightRadius: 16,
   gap: 6,
   handle: {
-    backgroundColor: '#d1d0d0',
+    backgroundColor: '#d3d3d3',
     borderRadius: 6,
     height: 5,
     width: 36,

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

@@ -3,6 +3,5 @@
  */
 
 export default {
-  color: '#101010',
   gap: 8,
 } as const;

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

@@ -5,100 +5,15 @@
 export default {
   borderRadius: 8,
   borderWidth: 2,
-  emphasis: {
-    borderColor: '#101010',
-    shadowColor: '#101010',
-    yellow: {
-      backgroundColor: '#ffb921',
-      backgroundColorActive: '#d1950b',
-      backgroundColorHover: '#eba400',
-      foregroundColor: '#101010',
-    },
-  },
   gap: 6,
-  ghost: {
-    green: {
-      backgroundColorActive: '#c5edda',
-      backgroundColorHover: '#e7f9f0',
-      foregroundColor: '#04663a',
-    },
-    grey: {
-      backgroundColorActive: '#d1d0d0',
-      backgroundColorHover: '#e7e6e6',
-      foregroundColor: '#101010',
-      inverted: {
-        backgroundColorActive: '#3e3c3b',
-        backgroundColorHover: '#464444',
-        foregroundColor: '#fcfbf2',
-      },
-    },
-    red: {
-      backgroundColorActive: '#ffe3df',
-      backgroundColorHover: '#fff3f1',
-      foregroundColor: '#a4281e',
-    },
-  },
   md: {
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   minWidth: 80,
-  outline: {
-    green: {
-      backgroundColorActive: '#c5edda',
-      backgroundColorHover: '#e7f9f0',
-      borderColor: '#04663a',
-      foregroundColor: '#04663a',
-    },
-    grey: {
-      backgroundColorActive: '#d1d0d0',
-      backgroundColorHover: '#e7e6e6',
-      borderColor: '#101010',
-      foregroundColor: '#101010',
-      inverted: {
-        backgroundColorActive: '#3e3c3b',
-        backgroundColorHover: '#464444',
-        borderColor: '#f6f5f5',
-        foregroundColor: '#f6f5f5',
-      },
-    },
-    red: {
-      backgroundColorActive: '#ffe3df',
-      backgroundColorHover: '#fff3f1',
-      borderColor: '#a4281e',
-      foregroundColor: '#a4281e',
-    },
-  },
+  shadowColor: '#101010',
   sm: {
     paddingHorizontal: 16,
     paddingVertical: 4,
   },
-  solid: {
-    borderColor: '#101010',
-    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/light/card.ts

@@ -6,44 +6,16 @@ export default {
   borderRadius: 16,
   brand: {
     borderWidth: 2,
-    emphasis: {
-      borderColor: '#101010',
-      broadbandGreenBackgroundColor: '#8cba3b',
-      cashbackLilacBackgroundColor: '#be7aeb',
-      energyBlueBackgroundColor: '#6db5c3',
-      insuranceOrangeBackgroundColor: '#ff7b00',
-      mobileRoseBackgroundColor: '#ee6dbb',
-      piggyPinkBackgroundColor: '#f295ff',
-      purpleBackgroundColor: '#7a42c8',
-    },
-    subtle: {
-      borderColor: '#101010',
-      broadbandGreenBackgroundColor: '#d2e6b0',
-      cashbackLilacBackgroundColor: '#dfbdf5',
-      energyBlueBackgroundColor: '#bddee4',
-      insuranceOrangeBackgroundColor: '#ffb46d',
-      mobileRoseBackgroundColor: '#fad0e9',
-      piggyPinkBackgroundColor: '#f9ceff',
-      purpleBackgroundColor: '#d5c3ee',
-      yellowBackgroundColor: '#ffd885',
-    },
   },
   neutral: {
     emphasis: {
-      borderColor: '#101010',
       borderWidth: 2,
     },
     subtle: {
-      borderColor: '#d4d2c0',
       borderWidth: 1,
     },
-    warmWhiteBackgroundColor: '#fcfbf2',
-    whiteBackgroundColor: '#ffffff',
   },
   selectable: {
-    backgroundColor: '#ffffff',
-    borderColor: '#d4d2c0',
-    borderColorSelected: '#101010',
     borderWidth: 1,
     borderWidthSelected: 2,
     gap: 16,

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

@@ -5,15 +5,7 @@
 export default {
   gap: 8,
   item: {
-    backgroundColorActive: '#101010',
-    borderColor: '#101010',
-    borderColorHover: '#3e3c3b',
     borderWidth: 2,
-    inverted: {
-      backgroundColorActive: '#fcfbf2',
-      borderColor: '#fcfbf2',
-      borderColorHover: '#f1efe4',
-    },
   },
   size: 12,
 } as const;

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

@@ -7,27 +7,22 @@ export default {
   borderWidth: 2,
   checked: {
     backgroundColor: '#101010',
-    borderColor: '#101010',
-    iconColor: '#fcfbf2',
   },
-  gap: 8,
+  gap: 12,
   group: {
     gap: 16,
     stack: {
-      gap: 32,
+      gap: 20,
     },
   },
   outlineColorActive: '#d4d2c0',
   outlineColorHover: '#f1efe4',
   outlineWidth: 3,
   tile: {
-    backgroundColor: '#ffffff',
-    borderColor: '#d4d2c0',
-    borderColorSelected: '#101010',
     borderRadius: 8,
     borderWidth: 1,
     borderWidthSelected: 2,
-    gap: 8,
+    gap: 12,
     group: {
       gap: 6,
       stack: {
@@ -38,8 +33,4 @@ export default {
     minWidth: 80,
     padding: 12,
   },
-  unchecked: {
-    backgroundColor: '#ffffff',
-    borderColor: '#8a8686',
-  },
 } as const;