@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/src/tokens/components/light/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/light/dialog.ts

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

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

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

package/src/tokens/components/light/expandable-card.ts

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  gapHorizontal: 12,
+  gapVertical: 2,
+  group: {
+    gap: 12,
+  },
+} as const;

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

@@ -18,12 +18,12 @@ export default {
   },
   unstyled: {
     foregroundColor: '#101010',
-    foregroundColorActive: '#464444',
-    foregroundColorHover: '#3e3c3b',
+    foregroundColorActive: '#3f3f3f',
+    foregroundColorHover: '#3a3837',
     inverted: {
-      foregroundColor: '#fcfbf2',
-      foregroundColorActive: '#f1efe4',
-      foregroundColorHover: '#f7f6eb',
+      foregroundColor: '#f7f7f7',
+      foregroundColorActive: '#d4d2c0',
+      foregroundColorHover: '#d3d3d3',
     },
     md: {
       height: 24,

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

@@ -3,14 +3,6 @@
  */
 
 export default {
-  emphasis: {
-    broadbandGreenBackground: '#8cba3b',
-    cashbackLilacBackground: '#be7aeb',
-    energyBlueBackground: '#6db5c3',
-    insuranceOrangeBackground: '#ff7b00',
-    mobileRoseBackground: '#ee6dbb',
-    piggyPinkBackground: '#f295ff',
-  },
   lg: {
     borderRadiusNone: 0,
     borderRadiusRounded: 8,
@@ -30,13 +22,4 @@ export default {
     padding: 6,
     width: 32,
   },
-  subtle: {
-    broadbandGreenBackground: '#d2e6b0',
-    cashbackLilacBackground: '#dfbdf5',
-    energyBlueBackground: '#bddee4',
-    insuranceOrangeBackground: '#ffb46d',
-    mobileRoseBackground: '#fad0e9',
-    piggyPinkBackground: '#f9ceff',
-    yellowBackground: '#ffd885',
-  },
 } as const;

package/src/tokens/components/light/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/light/indicator-icon-button.ts

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

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

@@ -3,15 +3,9 @@
  */
 
 export default {
-  backgroundColor: '#ffffff',
-  borderColor: '#101010',
-  borderColorInvalid: '#de2612',
-  borderColorReadOnly: '#d1d0d0',
-  borderColorValid: '#0f834a',
   borderRadius: 8,
   borderWidth: 1,
   borderWidthFocused: 2,
-  color: '#101010',
   currency: {
     gap: 2,
     height: 60,
@@ -25,13 +19,11 @@ export default {
     gap: 2,
   },
   maxWidth: 504,
-  minWidth: 200,
+  minWidth: 120,
   paddingHorizontal: 16,
   paddingVertical: 12,
-  placeholderColor: '#6f6c6b',
   textArea: {
     height: 96,
-    resizeIconColor: '#6f6c6b',
   },
   validation: {
     gap: 2,

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

@@ -4,8 +4,8 @@
 
 export default {
   color: '#101010',
-  colorActive: '#464444',
-  colorHover: '#3e3c3b',
+  colorActive: '#3f3f3f',
+  colorHover: '#3a3837',
   gap: 2,
   inverted: {
     color: '#fcfbf2',

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

@@ -3,26 +3,7 @@
  */
 
 export default {
-  gap: 12,
-  heading: {
-    gap: 12,
-    textContentGap: 2,
-  },
-  item: {
-    backgroundColorActive: '#f1efe4',
-    backgroundColorHover: '#f7f6eb',
-    borderWidth: 1,
-    contentGap: 2,
-    emphasis: {
-      borderColor: '#101010',
-    },
-    gap: 12,
-    padding: 16,
-    subtle: {
-      borderColor: '#d4d2c0',
-    },
-  },
-  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: 8,
   },

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

@@ -3,24 +3,12 @@
  */
 
 export default {
-  backgroundColor: '#ffffff',
-  borderColor: '#d4d2c0',
   borderWidth: 1,
   gap: 4,
   item: {
     borderRadius: 4,
     gap: 6,
-    grey: {
-      backgroundColorActive: '#d1d0d0',
-      backgroundColorHover: '#e7e6e6',
-      foregroundColor: '#101010',
-    },
     padding: 12,
-    red: {
-      backgroundColorActive: '#ffe3df',
-      backgroundColorHover: '#fff3f1',
-      foregroundColor: '#a4281e',
-    },
   },
   list: {
     gap: 8,

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

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

package/src/tokens/components/light/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/light/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/light/parts.ts

@@ -10,11 +10,21 @@ export default {
   modalStack: {
     backgroundColor: '#101010',
     backgroundColorCardBottom: '#ffffff',
-    backgroundColorCardTop: '#e7e6e6',
+    backgroundColorCardTop: '#ebebeb',
   },
   placeholder: {
     borderColor: '#101010',
   },
+  roundel: {
+    borderRadius: 9999,
+    pending: {
+      borderWidth: 2,
+    },
+  },
+  scrollBar: {
+    backgroundColor: '#d4d2c0',
+    borderRadius: 9999,
+  },
   statusBar: {
     foregroundColor: '#000000',
     foregroundColorInverted: '#ffffff',

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

@@ -3,12 +3,8 @@
  */
 
 export default {
-  backgroundColorActive: '#f1efe4',
-  backgroundColorHover: '#f7f6eb',
-  borderColor: '#101010',
   borderRadius: 9999,
   borderWidth: 1,
-  foregroundColor: '#101010',
   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/light/progress-stepper.ts

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

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

@@ -19,9 +19,6 @@ export default {
   outlineColorHover: '#f1efe4',
   outlineWidth: 3,
   tile: {
-    backgroundColor: '#ffffff',
-    borderColor: '#d4d2c0',
-    borderColorSelected: '#101010',
     borderRadius: 8,
     borderWidth: 1,
     borderWidthSelected: 2,
@@ -36,8 +33,4 @@ export default {
     minWidth: 80,
     padding: 12,
   },
-  unchecked: {
-    backgroundColor: '#ffffff',
-    borderColor: '#8a8686',
-  },
 } as const;

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

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

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

@@ -3,13 +3,9 @@
  */
 
 export default {
-  backgroundColorActive: '#f1efe4',
-  backgroundColorHover: '#f7f6eb',
   borderRadius: 6,
-  foregroundColor: '#101010',
   gap: 6,
   group: {
-    borderColor: '#101010',
     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/light/select.ts

@@ -3,25 +3,15 @@
  */
 
 export default {
-  backgroundColor: '#ffffff',
-  borderColor: '#101010',
-  borderColorInvalid: '#de2612',
-  borderColorReadOnly: '#d1d0d0',
-  borderColorValid: '#0f834a',
   borderRadius: 8,
   borderWidth: 1,
   borderWidthFocused: 2,
   dropdown: {
-    backgroundColor: '#ffffff',
-    borderColor: '#d4d2c0',
     borderWidth: 1,
     gap: 4,
     gapContent: 8,
     item: {
-      backgroundColorActive: '#d1d0d0',
-      backgroundColorHover: '#e7e6e6',
       borderRadius: 4,
-      foregroundColor: '#101010',
       gap: 6,
       padding: 12,
     },

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

@@ -3,14 +3,6 @@
  */
 
 export default {
-  checked: {
-    backgroundColor: '#7a42c8',
-    backgroundColorHover: '#6538b8',
-    iconColor: '#7a42c8',
-  },
-  circle: {
-    backgroundColor: '#ffffff',
-  },
   md: {
     circle: {
       size: 28,
@@ -28,8 +20,6 @@ export default {
     width: 44,
   },
   unchecked: {
-    backgroundColor: '#8a8686',
-    backgroundColorHover: '#6f6c6b',
-    iconColor: '#8a8686',
+    backgroundColorHover: '#888888',
   },
 } as const;

package/src/tokens/components/light/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/light/tabs.ts

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

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

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

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

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

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

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

package/src/tokens/components/light/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: '#fcfbf2',
-  },
 } as const;

package/src/tokens/index.ts

@@ -3,6 +3,7 @@
  */
 
 export { default as color } from './color';
+export { default as semantic } from './semantic';
 export { default as semanticLight } from './semantic-light';
 export { default as semanticDark } from './semantic-dark';
 export { default as layout } from './layout';