@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/tokens/components/light/link.js

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

package/build/tokens/components/light/list.d.ts

@@ -2,26 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly gap: 12;
-    readonly heading: {
-        readonly gap: 12;
-        readonly textContentGap: 2;
-    };
-    readonly item: {
-        readonly backgroundColorActive: "#f1efe4";
-        readonly backgroundColorHover: "#f7f6eb";
-        readonly borderWidth: 1;
-        readonly contentGap: 2;
-        readonly emphasis: {
-            readonly borderColor: "#101010";
-        };
-        readonly gap: 12;
-        readonly padding: 16;
-        readonly subtle: {
-            readonly borderColor: "#d4d2c0";
-        };
-    };
-    readonly listContainer: {
+    readonly container: {
         readonly emphasisWarmWhite: {
             readonly borderRadius: 16;
         };
@@ -30,6 +11,9 @@ declare const _default: {
         };
         readonly none: {
             readonly borderRadius: 0;
+            readonly item: {
+                readonly paddingHorizontal: 0;
+            };
         };
         readonly subtleWarmWhite: {
             readonly borderRadius: 16;
@@ -38,6 +22,22 @@ declare const _default: {
             readonly borderRadius: 16;
         };
     };
+    readonly gap: 12;
+    readonly item: {
+        readonly contentGap: 2;
+        readonly functional: {
+            readonly borderWidth: 1;
+            readonly padding: 16;
+            readonly paddingNone: 0;
+        };
+        readonly gap: 12;
+        readonly stylised: {
+            readonly borderWidth: 2;
+            readonly height: 72;
+            readonly paddingLeft: 0;
+            readonly paddingRight: 16;
+        };
+    };
     readonly list: {
         readonly gap: 8;
     };

package/build/tokens/components/light/list.js

@@ -2,26 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 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,
         },
@@ -30,6 +11,9 @@ export default {
         },
         none: {
             borderRadius: 0,
+            item: {
+                paddingHorizontal: 0,
+            },
         },
         subtleWarmWhite: {
             borderRadius: 16,
@@ -38,6 +22,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/build/tokens/components/light/menu.d.ts

@@ -2,24 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#ffffff";
-    readonly borderColor: "#d4d2c0";
     readonly borderWidth: 1;
     readonly gap: 4;
     readonly item: {
         readonly borderRadius: 4;
         readonly gap: 6;
-        readonly grey: {
-            readonly backgroundColorActive: "#d1d0d0";
-            readonly backgroundColorHover: "#e7e6e6";
-            readonly foregroundColor: "#101010";
-        };
         readonly padding: 12;
-        readonly red: {
-            readonly backgroundColorActive: "#ffe3df";
-            readonly backgroundColorHover: "#fff3f1";
-            readonly foregroundColor: "#a4281e";
-        };
     };
     readonly list: {
         readonly gap: 8;

package/build/tokens/components/light/menu.js

@@ -2,24 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 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/build/tokens/components/light/modal.d.ts

@@ -5,7 +5,6 @@ declare const _default: {
     readonly action: {
         readonly gap: 12;
     };
-    readonly backgroundColor: "#ffffff";
     readonly borderRadius: 16;
     readonly content: {
         readonly gap: 12;

package/build/tokens/components/light/modal.js

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

package/build/tokens/components/light/navigation.d.ts

@@ -2,11 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#7a42c8";
-    readonly backgroundColorActive: "#5a3285";
-    readonly backgroundColorHover: "#6538b8";
     readonly bar: {
-        readonly backgroundColorActive: "#ffb921";
         readonly borderRadiusNone: 0;
         readonly borderRadiusRounded: 4;
     };
@@ -14,10 +10,9 @@ declare const _default: {
     readonly desktop: {
         readonly height: 88;
     };
-    readonly foregroundColor: "#fcfbf2";
+    readonly dividerBorderColor: "#5c2ca9";
     readonly gap: 4;
     readonly mobile: {
-        readonly dividerBorderColor: "#6538b8";
         readonly height: 64;
     };
 };

package/build/tokens/components/light/navigation.js

@@ -2,11 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColor: '#7a42c8',
-    backgroundColorActive: '#5a3285',
-    backgroundColorHover: '#6538b8',
     bar: {
-        backgroundColorActive: '#ffb921',
         borderRadiusNone: 0,
         borderRadiusRounded: 4,
     },
@@ -14,10 +10,9 @@ export default {
     desktop: {
         height: 88,
     },
-    foregroundColor: '#fcfbf2',
+    dividerBorderColor: '#5c2ca9',
     gap: 4,
     mobile: {
-        dividerBorderColor: '#6538b8',
         height: 64,
     },
 };

package/build/tokens/components/light/pagination.d.ts

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

package/build/tokens/components/light/pagination.js

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

package/build/tokens/components/light/parts.d.ts

@@ -9,11 +9,21 @@ declare const _default: {
     readonly modalStack: {
         readonly backgroundColor: "#101010";
         readonly backgroundColorCardBottom: "#ffffff";
-        readonly backgroundColorCardTop: "#e7e6e6";
+        readonly backgroundColorCardTop: "#ebebeb";
     };
     readonly placeholder: {
         readonly borderColor: "#101010";
     };
+    readonly roundel: {
+        readonly borderRadius: 9999;
+        readonly pending: {
+            readonly borderWidth: 2;
+        };
+    };
+    readonly scrollBar: {
+        readonly backgroundColor: "#d4d2c0";
+        readonly borderRadius: 9999;
+    };
     readonly statusBar: {
         readonly foregroundColor: "#000000";
         readonly foregroundColorInverted: "#ffffff";

package/build/tokens/components/light/parts.js

@@ -9,11 +9,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/build/tokens/components/light/pill.d.ts

@@ -2,12 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColorActive: "#f1efe4";
-    readonly backgroundColorHover: "#f7f6eb";
-    readonly borderColor: "#101010";
     readonly borderRadius: 9999;
     readonly borderWidth: 1;
-    readonly foregroundColor: "#101010";
     readonly gap: 6;
     readonly group: {
         readonly gap: 8;
@@ -16,11 +12,5 @@ declare const _default: {
     readonly minWidth: 66;
     readonly paddingHorizontal: 20;
     readonly paddingVertical: 12;
-    readonly selected: {
-        readonly backgroundColor: "#7a42c8";
-        readonly backgroundColorActive: "#5a3285";
-        readonly backgroundColorHover: "#6538b8";
-        readonly foregroundColor: "#fcfbf2";
-    };
 };
 export default _default;

package/build/tokens/components/light/pill.js

@@ -2,12 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColorActive: '#f1efe4',
-    backgroundColorHover: '#f7f6eb',
-    borderColor: '#101010',
     borderRadius: 9999,
     borderWidth: 1,
-    foregroundColor: '#101010',
     gap: 6,
     group: {
         gap: 8,
@@ -16,10 +12,4 @@ export default {
     minWidth: 66,
     paddingHorizontal: 20,
     paddingVertical: 12,
-    selected: {
-        backgroundColor: '#7a42c8',
-        backgroundColorActive: '#5a3285',
-        backgroundColorHover: '#6538b8',
-        foregroundColor: '#fcfbf2',
-    },
 };

package/build/tokens/components/light/progress-stepper.d.ts

@@ -6,23 +6,15 @@ declare const _default: {
         readonly complete: {
             readonly backgroundColor: "#7a42c8";
         };
-        readonly future: {
-            readonly backgroundColor: "#d4d2c0";
-        };
         readonly height: 2;
     };
     readonly gapHorizontal: 0;
     readonly gapVertical: 4;
     readonly indicator: {
-        readonly active: {
-            readonly backgroundColorHalo: "#ffffff";
-        };
         readonly complete: {
-            readonly backgroundColor: "#7a42c8";
             readonly iconColor: "#fcfbf2";
         };
         readonly future: {
-            readonly borderColor: "#d4d2c0";
             readonly borderWidth: 2;
         };
         readonly height: 28;

package/build/tokens/components/light/progress-stepper.js

@@ -6,23 +6,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/build/tokens/components/light/radio.d.ts

@@ -7,26 +7,23 @@ declare const _default: {
     readonly checked: {
         readonly color: "#101010";
     };
-    readonly gap: 8;
+    readonly gap: 12;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#d4d2c0";
     readonly outlineColorHover: "#f1efe4";
     readonly outlineWidth: 3;
     readonly tile: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#d4d2c0";
-        readonly borderColorSelected: "#101010";
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
         readonly gap: 8;
         readonly group: {
-            readonly gap: 6;
+            readonly gap: 12;
             readonly stack: {
                 readonly gap: 12;
             };
@@ -35,9 +32,5 @@ declare const _default: {
         readonly minWidth: 80;
         readonly padding: 12;
     };
-    readonly unchecked: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#8a8686";
-    };
 };
 export default _default;

package/build/tokens/components/light/radio.js

@@ -7,26 +7,23 @@ export default {
     checked: {
         color: '#101010',
     },
-    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,
         group: {
-            gap: 6,
+            gap: 12,
             stack: {
                 gap: 12,
             },
@@ -35,8 +32,4 @@ export default {
         minWidth: 80,
         padding: 12,
     },
-    unchecked: {
-        backgroundColor: '#ffffff',
-        borderColor: '#8a8686',
-    },
 };

package/build/tokens/components/light/section-header.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly gap: 12;
+    readonly textContent: {
+        readonly gap: 2;
+    };
+};
+export default _default;

package/build/tokens/components/light/section-header.js

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    gap: 12,
+    textContent: {
+        gap: 2,
+    },
+};

package/build/tokens/components/light/segmented-control.d.ts

@@ -2,13 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColorActive: "#f1efe4";
-    readonly backgroundColorHover: "#f7f6eb";
     readonly borderRadius: 6;
-    readonly foregroundColor: "#101010";
     readonly gap: 6;
     readonly group: {
-        readonly borderColor: "#101010";
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly gap: 4;
@@ -19,9 +15,5 @@ declare const _default: {
     readonly minWidth: 66;
     readonly paddingHorizontal: 16;
     readonly paddingVertical: 8;
-    readonly selected: {
-        readonly backgroundColor: "#7a42c8";
-        readonly foregroundColor: "#fcfbf2";
-    };
 };
 export default _default;

package/build/tokens/components/light/segmented-control.js

@@ -2,13 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColorActive: '#f1efe4',
-    backgroundColorHover: '#f7f6eb',
     borderRadius: 6,
-    foregroundColor: '#101010',
     gap: 6,
     group: {
-        borderColor: '#101010',
         borderRadius: 8,
         borderWidth: 1,
         gap: 4,
@@ -19,8 +15,4 @@ export default {
     minWidth: 66,
     paddingHorizontal: 16,
     paddingVertical: 8,
-    selected: {
-        backgroundColor: '#7a42c8',
-        foregroundColor: '#fcfbf2',
-    },
 };

package/build/tokens/components/light/select.d.ts

@@ -2,25 +2,15 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#ffffff";
-    readonly borderColor: "#101010";
-    readonly borderColorInvalid: "#de2612";
-    readonly borderColorReadOnly: "#d1d0d0";
-    readonly borderColorValid: "#0f834a";
     readonly borderRadius: 8;
     readonly borderWidth: 1;
     readonly borderWidthFocused: 2;
     readonly dropdown: {
-        readonly backgroundColor: "#ffffff";
-        readonly borderColor: "#d4d2c0";
         readonly borderWidth: 1;
         readonly gap: 4;
         readonly gapContent: 8;
         readonly item: {
-            readonly backgroundColorActive: "#d1d0d0";
-            readonly backgroundColorHover: "#e7e6e6";
             readonly borderRadius: 4;
-            readonly foregroundColor: "#101010";
             readonly gap: 6;
             readonly padding: 12;
         };

package/build/tokens/components/light/select.js

@@ -2,25 +2,15 @@
  * Do not edit directly, this file was auto-generated.
  */
 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/build/tokens/components/light/switch.d.ts

@@ -2,14 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly checked: {
-        readonly backgroundColor: "#7a42c8";
-        readonly backgroundColorHover: "#6538b8";
-        readonly iconColor: "#7a42c8";
-    };
-    readonly circle: {
-        readonly backgroundColor: "#ffffff";
-    };
     readonly md: {
         readonly circle: {
             readonly size: 28;
@@ -27,9 +19,7 @@ declare const _default: {
         readonly width: 44;
     };
     readonly unchecked: {
-        readonly backgroundColor: "#8a8686";
-        readonly backgroundColorHover: "#6f6c6b";
-        readonly iconColor: "#8a8686";
+        readonly backgroundColorHover: "#888888";
     };
 };
 export default _default;

package/build/tokens/components/light/switch.js

@@ -2,14 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    checked: {
-        backgroundColor: '#7a42c8',
-        backgroundColorHover: '#6538b8',
-        iconColor: '#7a42c8',
-    },
-    circle: {
-        backgroundColor: '#ffffff',
-    },
     md: {
         circle: {
             size: 28,
@@ -27,8 +19,6 @@ export default {
         width: 44,
     },
     unchecked: {
-        backgroundColor: '#8a8686',
-        backgroundColorHover: '#6f6c6b',
-        iconColor: '#8a8686',
+        backgroundColorHover: '#888888',
     },
 };