@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

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

@@ -3,24 +3,19 @@
  */
 
 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',
+      colorActive: '#996cda',
     },
     label: {
-      colorActive: '#7a42c8',
-      colorDefault: '#e7e6e6',
+      colorActive: '#996cda',
     },
     paddingBottom: 2,
     paddingHorizontal: 0,

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

@@ -3,12 +3,11 @@
  */
 
 export default {
-  backgroundColor: '#222222',
   borderTopLeftRadius: 16,
   borderTopRightRadius: 16,
   gap: 6,
   handle: {
-    backgroundColor: '#555352',
+    backgroundColor: '#4c4c4c',
     borderRadius: 6,
     height: 5,
     width: 36,

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

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

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

@@ -5,100 +5,15 @@
 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',
-    },
-  },
+  shadowColor: '#101010',
   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

@@ -6,44 +6,16 @@ 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,

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

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

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

@@ -6,24 +6,19 @@ export default {
   borderRadius: 4,
   borderWidth: 2,
   checked: {
-    backgroundColor: '#e7e6e6',
-    borderColor: '#e7e6e6',
-    iconColor: '#191917',
+    backgroundColor: '#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,
@@ -38,8 +33,4 @@ export default {
     minWidth: 200,
     padding: 12,
   },
-  unchecked: {
-    backgroundColor: '#222222',
-    borderColor: '#8a8686',
-  },
 } as const;

package/src/tokens/components/dark/date-picker.ts

@@ -3,17 +3,10 @@
  */
 
 export default {
-  backgroundColor: '#222222',
-  borderColor: '#e7e6e6',
-  borderColorInvalid: '#ff7964',
-  borderColorReadOnly: '#464444',
-  borderColorValid: '#58ca93',
   borderRadius: 8,
   borderWidth: 1,
   borderWidthFocused: 2,
   calendar: {
-    backgroundColor: '#222222',
-    borderColor: '#4c473d',
     borderRadius: 8,
     borderWidth: 1,
     columnGap: 4,
@@ -26,13 +19,8 @@ export default {
       dateGap: 8,
     },
     item: {
-      backgroundColorActive: '#464444',
-      backgroundColorHover: '#3e3c3b',
-      backgroundColorRange: '#3e3c3b',
-      backgroundColorSelected: '#7a42c8',
       borderRadius: 8,
       minWidth: 32,
-      roundelBackgroundColor: '#a782db',
       roundelBackgroundColorInverted: '#fcfbf2',
       roundelHeight: 6,
       roundelWidth: 6,

package/src/tokens/components/dark/description-list.ts

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 12,
+  item: {
+    column: {
+      gap: 2,
+    },
+    gap: 16,
+    row: {
+      gap: 8,
+      headingWidth: 180,
+    },
+  },
+  stack: {
+    gap: 16,
+  },
+} as const;

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

@@ -6,7 +6,6 @@ export default {
   action: {
     gap: 12,
   },
-  backgroundColor: '#222222',
   borderRadius: 16,
   content: {
     gap: 12,

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

@@ -4,5 +4,8 @@
 
 export default {
   borderWidth: 1,
-  color: '#4c473d',
+  divider: {
+    borderWidth: 2,
+    color: '#ebebeb',
+  },
 } as const;

package/src/tokens/components/{light/footer.ts → dark/expandable-card.ts}

@@ -3,10 +3,9 @@
  */
 
 export default {
-  calendar: {
-    footer: {
-      gap: 8,
-    },
+  gapHorizontal: 12,
+  gapVertical: 2,
+  group: {
+    gap: 12,
   },
-  backgroundColor: '#fcfbf2',
 } as const;

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

@@ -17,13 +17,13 @@ export default {
     width: 32,
   },
   unstyled: {
-    foregroundColor: '#e7e6e6',
+    foregroundColor: '#f7f7f7',
     foregroundColorActive: '#b2afae',
-    foregroundColorHover: '#d1d0d0',
+    foregroundColorHover: '#d3d3d3',
     inverted: {
-      foregroundColor: '#fcfbf2',
-      foregroundColorActive: '#f1efe4',
-      foregroundColorHover: '#f7f6eb',
+      foregroundColor: '#f7f7f7',
+      foregroundColorActive: '#b2afae',
+      foregroundColorHover: '#d3d3d3',
     },
     md: {
       height: 24,

package/src/tokens/components/dark/icon-container.ts

@@ -3,14 +3,6 @@
  */
 
 export default {
-  emphasis: {
-    broadbandGreenBackground: '#506c21',
-    cashbackLilacBackground: '#8b2bc9',
-    energyBlueBackground: '#326e7a',
-    insuranceOrangeBackground: '#9b4c0e',
-    mobileRoseBackground: '#a7266d',
-    piggyPinkBackground: '#8f358f',
-  },
   lg: {
     borderRadiusNone: 0,
     borderRadiusRounded: 8,
@@ -30,13 +22,4 @@ export default {
     padding: 6,
     width: 32,
   },
-  subtle: {
-    broadbandGreenBackground: '#35421c',
-    cashbackLilacBackground: '#522270',
-    energyBlueBackground: '#254348',
-    insuranceOrangeBackground: '#5a3213',
-    mobileRoseBackground: '#601f42',
-    piggyPinkBackground: '#5d2167',
-    yellowBackground: '#756230',
-  },
 } as const;

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

@@ -4,6 +4,7 @@
 
 export { default as accordion } from './accordion';
 export { default as alert } from './alert';
+export { default as avatar } from './avatar';
 export { default as badge } from './badge';
 export { default as banner } from './banner';
 export { default as bottomNavigation } from './bottom-navigation';
@@ -14,14 +15,14 @@ export { default as card } from './card';
 export { default as carouselControl } from './carousel-control';
 export { default as checkbox } from './checkbox';
 export { default as datePicker } from './date-picker';
+export { default as descriptionList } from './description-list';
 export { default as dialog } from './dialog';
 export { default as divider } from './divider';
-export { default as focus } from './focus';
-export { default as footer } from './footer';
+export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
-export { default as icon } from './icon';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';
 export { default as link } from './link';
@@ -30,15 +31,20 @@ export { default as menu } from './menu';
 export { default as modal } from './modal';
 export { default as navigation } from './navigation';
 export { default as overlay } from './overlay';
+export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
+export { default as sectionHeader } from './section-header';
 export { default as segmentedControl } from './segmented-control';
 export { default as select } from './select';
 export { default as skeleton } from './skeleton';
 export { default as spinner } from './spinner';
 export { default as switch } from './switch';
-export { default as text } from './text';
+export { default as table } from './table';
+export { default as tabs } from './tabs';
+export { default as toast } from './toast';
 export { default as toggleButton } from './toggle-button';
+export { default as tooltip } from './tooltip';
 export { default as topNavigation } from './top-navigation';

package/src/tokens/components/dark/{footer.ts → indicator-icon-button.ts}

@@ -3,10 +3,9 @@
  */
 
 export default {
-  calendar: {
-    footer: {
-      gap: 8,
-    },
+  indicator: {
+    height: 8,
+    radius: 9999,
+    width: 8,
   },
-  backgroundColor: '#fcfbf2',
 } as const;

package/src/tokens/components/dark/inline-link.ts

@@ -4,7 +4,7 @@
 
 export default {
   color: '#6bb0ff',
-  colorVisited: '#a782db',
+  colorVisited: '#996cda',
   inverted: {
     color: '#fcfbf2',
     colorActive: '#f1efe4',

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

@@ -3,15 +3,9 @@
  */
 
 export default {
-  backgroundColor: '#222222',
-  borderColor: '#e7e6e6',
-  borderColorInvalid: '#ff7964',
-  borderColorReadOnly: '#5f5c5b',
-  borderColorValid: '#58ca93',
   borderRadius: 8,
   borderWidth: 1,
   borderWidthFocused: 2,
-  color: '#e7e6e6',
   currency: {
     gap: 2,
     height: 60,
@@ -25,13 +19,11 @@ export default {
     gap: 6,
   },
   maxWidth: 504,
-  minWidth: 200,
+  minWidth: 152,
   paddingHorizontal: 16,
   paddingVertical: 12,
-  placeholderColor: '#6f6c6b',
   textArea: {
     height: 96,
-    resizeIconColor: '#d1d0d0',
   },
   validation: {
     gap: 2,

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

@@ -3,9 +3,9 @@
  */
 
 export default {
-  color: '#e7e6e6',
+  color: '#ebebeb',
   colorActive: '#b2afae',
-  colorHover: '#d1d0d0',
+  colorHover: '#d3d3d3',
   gap: 2,
   inverted: {
     color: '#fcfbf2',

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

@@ -3,26 +3,7 @@
  */
 
 export default {
-  gap: 12,
-  heading: {
-    gap: 12,
-    textContentGap: 2,
-  },
-  item: {
-    backgroundColorActive: '#4c473d',
-    backgroundColorHover: '#30302c',
-    borderWidth: 1,
-    contentGap: 2,
-    emphasis: {
-      borderColor: '#e7e6e6',
-    },
-    gap: 12,
-    padding: 16,
-    subtle: {
-      borderColor: '#4c473d',
-    },
-  },
-  listContainer: {
+  container: {
     emphasisWarmWhite: {
       borderRadius: 16,
     },
@@ -31,6 +12,9 @@ export default {
     },
     none: {
       borderRadius: 0,
+      item: {
+        paddingHorizontal: 0,
+      },
     },
     subtleWarmWhite: {
       borderRadius: 16,
@@ -39,6 +23,22 @@ export default {
       borderRadius: 16,
     },
   },
+  gap: 12,
+  item: {
+    contentGap: 2,
+    functional: {
+      borderWidth: 1,
+      padding: 16,
+      paddingNone: 0,
+    },
+    gap: 12,
+    stylised: {
+      borderWidth: 2,
+      height: 72,
+      paddingLeft: 0,
+      paddingRight: 16,
+    },
+  },
   list: {
     gap: 4,
   },

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

@@ -3,24 +3,12 @@
  */
 
 export default {
-  backgroundColor: '#222222',
-  borderColor: '#4c473d',
   borderWidth: 1,
   gap: 4,
   item: {
     borderRadius: 8,
     gap: 6,
-    grey: {
-      backgroundColorActive: '#464444',
-      backgroundColorHover: '#3e3c3b',
-      foregroundColor: '#e7e6e6',
-    },
     padding: 12,
-    red: {
-      backgroundColorActive: '#3b1512',
-      backgroundColorHover: '#521a16',
-      foregroundColor: '#ff7964',
-    },
   },
   list: {
     gap: 4,

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

@@ -6,7 +6,6 @@ export default {
   action: {
     gap: 12,
   },
-  backgroundColor: '#222222',
   borderRadius: 16,
   content: {
     gap: 12,

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

@@ -3,11 +3,7 @@
  */
 
 export default {
-  backgroundColor: '#7a42c8',
-  backgroundColorActive: '#5a3285',
-  backgroundColorHover: '#6538b8',
   bar: {
-    backgroundColorActive: '#ffb921',
     borderRadiusNone: 0,
     borderRadiusRounded: 4,
   },
@@ -15,10 +11,9 @@ export default {
   desktop: {
     height: 88,
   },
-  foregroundColor: '#fcfbf2',
+  dividerBorderColor: '#5c2ca9',
   gap: 4,
   mobile: {
-    dividerBorderColor: '#6538b8',
     height: 64,
   },
 } as const;

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gap: 8,
+  item: {
+    height: 40,
+    radius: 8,
+    width: 40,
+  },
+} as const;

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

@@ -9,15 +9,25 @@ export default {
   },
   modalStack: {
     backgroundColor: '#101010',
-    backgroundColorCardBottom: '#222222',
-    backgroundColorCardTop: '#3e3c3b',
+    backgroundColorCardBottom: '#232323',
+    backgroundColorCardTop: '#3a3837',
   },
   placeholder: {
-    borderColor: '#e7e6e6',
+    borderColor: '#ebebeb',
+  },
+  roundel: {
+    borderRadius: 9999,
+    pending: {
+      borderWidth: 2,
+    },
+  },
+  scrollBar: {
+    backgroundColor: '#4c473d',
+    borderRadius: 9999,
   },
   statusBar: {
     foregroundColor: '#ffffff',
-    foregroundColorInverted: '#ffffff',
+    foregroundColorInverted: '#000000',
     notch: '#000000',
   },
 } as const;