@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/tokens/components/dark/badge.d.ts

@@ -8,44 +8,17 @@ declare const _default: {
         readonly borderBottomRightRadius: 0;
     };
     readonly gap: 4;
+    readonly md: {
+        readonly height: 32;
+        readonly paddingVertical: 4;
+    };
     readonly outline: {
-        readonly blue: {
-            readonly color: "#6bb0ff";
-        };
-        readonly borderColor: "#89816e";
         readonly borderWidth: 1;
-        readonly green: {
-            readonly color: "#58ca93";
-        };
-        readonly grey: {
-            readonly color: "#b2afae";
-        };
-        readonly orange: {
-            readonly color: "#ff9639";
-        };
-        readonly red: {
-            readonly color: "#ff7964";
-        };
     };
     readonly paddingHorizontal: 6;
-    readonly paddingVertical: 2;
-    readonly solid: {
-        readonly blue: {
-            readonly backgroundColor: "#1c6cd4";
-        };
-        readonly color: "#fcfbf2";
-        readonly green: {
-            readonly backgroundColor: "#0f834a";
-        };
-        readonly grey: {
-            readonly backgroundColor: "#6f6c6b";
-        };
-        readonly orange: {
-            readonly backgroundColor: "#be5400";
-        };
-        readonly red: {
-            readonly backgroundColor: "#de2612";
-        };
+    readonly sm: {
+        readonly height: 24;
+        readonly paddingVertical: 0;
     };
 };
 export default _default;

package/build/tokens/components/dark/badge.js

@@ -8,43 +8,16 @@ export default {
         borderBottomRightRadius: 0,
     },
     gap: 4,
+    md: {
+        height: 32,
+        paddingVertical: 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',
-        },
+    sm: {
+        height: 24,
+        paddingVertical: 0,
     },
 };

package/build/tokens/components/dark/banner.d.ts

@@ -27,17 +27,8 @@ declare const _default: {
             readonly gap: 12;
         };
         readonly gap: 0;
-        readonly heading: {
-            readonly broadbandGreenBackgroundColor: "#506c21";
-            readonly cashbackLilacBackgroundColor: "#8b2bc9";
-            readonly energyBlueBackgroundColor: "#326e7a";
-            readonly insuranceOrangeBackgroundColor: "#9b4c0e";
-            readonly mobileRoseBackgroundColor: "#a7266d";
-            readonly piggyPinkBackgroundColor: "#8f358f";
-            readonly yellowBackgroundColor: "#756230";
-        };
         readonly padding: 16;
     };
-    readonly imageContainerBorderColor: "#e7e6e6";
+    readonly imageContainerBorderColor: "#ebebeb";
 };
 export default _default;

package/build/tokens/components/dark/banner.js

@@ -27,16 +27,7 @@ export default {
             gap: 12,
         },
         gap: 0,
-        heading: {
-            broadbandGreenBackgroundColor: '#506c21',
-            cashbackLilacBackgroundColor: '#8b2bc9',
-            energyBlueBackgroundColor: '#326e7a',
-            insuranceOrangeBackgroundColor: '#9b4c0e',
-            mobileRoseBackgroundColor: '#a7266d',
-            piggyPinkBackgroundColor: '#8f358f',
-            yellowBackgroundColor: '#756230',
-        },
         padding: 16,
     },
-    imageContainerBorderColor: '#e7e6e6',
+    imageContainerBorderColor: '#ebebeb',
 };

package/build/tokens/components/dark/bottom-navigation.d.ts

@@ -2,24 +2,19 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#191917";
-    readonly borderTopColor: "#4c473d";
     readonly borderTopWidth: 2;
     readonly gap: 0;
     readonly indicator: {
-        readonly backgroundColor: "#7a42c8";
         readonly borderRadius: 4;
         readonly height: 2;
     };
     readonly item: {
         readonly gap: 2;
         readonly icon: {
-            readonly colorActive: "#7a42c8";
-            readonly colorDefault: "#e7e6e6";
+            readonly colorActive: "#996cda";
         };
         readonly label: {
-            readonly colorActive: "#7a42c8";
-            readonly colorDefault: "#e7e6e6";
+            readonly colorActive: "#996cda";
         };
         readonly paddingBottom: 2;
         readonly paddingHorizontal: 0;

package/build/tokens/components/dark/bottom-navigation.js

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

package/build/tokens/components/dark/bottom-sheet.d.ts

@@ -2,12 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#222222";
     readonly borderTopLeftRadius: 16;
     readonly borderTopRightRadius: 16;
     readonly gap: 6;
     readonly handle: {
-        readonly backgroundColor: "#555352";
+        readonly backgroundColor: "#4c4c4c";
         readonly borderRadius: 6;
         readonly height: 5;
         readonly width: 36;

package/build/tokens/components/dark/bottom-sheet.js

@@ -2,12 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColor: '#222222',
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     gap: 6,
     handle: {
-        backgroundColor: '#555352',
+        backgroundColor: '#4c4c4c',
         borderRadius: 6,
         height: 5,
         width: 36,

package/build/tokens/components/dark/breadcrumb.d.ts

@@ -2,7 +2,6 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly color: "#e7e6e6";
     readonly gap: 8;
 };
 export default _default;

package/build/tokens/components/dark/breadcrumb.js

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

package/build/tokens/components/dark/button.d.ts

@@ -4,101 +4,16 @@
 declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
-    readonly emphasis: {
-        readonly borderColor: "#e7e6e6";
-        readonly shadowColor: "#e7e6e6";
-        readonly yellow: {
-            readonly backgroundColor: "#ffb921";
-            readonly backgroundColorActive: "#d1950b";
-            readonly backgroundColorHover: "#eba400";
-            readonly foregroundColor: "#101010";
-        };
-    };
     readonly gap: 6;
-    readonly ghost: {
-        readonly green: {
-            readonly backgroundColorActive: "#002e18";
-            readonly backgroundColorHover: "#033d21";
-            readonly foregroundColor: "#58ca93";
-        };
-        readonly grey: {
-            readonly backgroundColorActive: "#3e3c3b";
-            readonly backgroundColorHover: "#464444";
-            readonly foregroundColor: "#e7e6e6";
-            readonly inverted: {
-                readonly backgroundColorActive: "#3e3c3b";
-                readonly backgroundColorHover: "#464444";
-                readonly foregroundColor: "#fcfbf2";
-            };
-        };
-        readonly red: {
-            readonly backgroundColorActive: "#3b1512";
-            readonly backgroundColorHover: "#521a16";
-            readonly foregroundColor: "#ff7964";
-        };
-    };
     readonly md: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 12;
     };
     readonly minWidth: 80;
-    readonly outline: {
-        readonly green: {
-            readonly backgroundColorActive: "#002e18";
-            readonly backgroundColorHover: "#033d21";
-            readonly borderColor: "#58ca93";
-            readonly foregroundColor: "#58ca93";
-        };
-        readonly grey: {
-            readonly backgroundColorActive: "#464444";
-            readonly backgroundColorHover: "#3e3c3b";
-            readonly borderColor: "#e7e6e6";
-            readonly foregroundColor: "#e7e6e6";
-            readonly inverted: {
-                readonly backgroundColorActive: "#3e3c3b";
-                readonly backgroundColorHover: "#464444";
-                readonly borderColor: "#f6f5f5";
-                readonly foregroundColor: "#f6f5f5";
-            };
-        };
-        readonly red: {
-            readonly backgroundColorActive: "#3b1512";
-            readonly backgroundColorHover: "#521a16";
-            readonly borderColor: "#ff7964";
-            readonly foregroundColor: "#ff7964";
-        };
-    };
+    readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 4;
     };
-    readonly solid: {
-        readonly borderColor: "#e7e6e6";
-        readonly green: {
-            readonly backgroundColor: "#0f834a";
-            readonly backgroundColorActive: "#074b2a";
-            readonly backgroundColorHover: "#04663a";
-            readonly foregroundColor: "#fcfbf2";
-        };
-        readonly red: {
-            readonly backgroundColor: "#de2612";
-            readonly backgroundColorActive: "#6b1f1a";
-            readonly backgroundColorHover: "#a4281e";
-            readonly foregroundColor: "#fcfbf2";
-        };
-        readonly yellow: {
-            readonly backgroundColor: "#ffb921";
-            readonly backgroundColorActive: "#d1950b";
-            readonly backgroundColorHover: "#eba400";
-            readonly foregroundColor: "#101010";
-            readonly inverted: {
-                readonly backgroundColor: "#ffb921";
-                readonly backgroundColorActive: "#d1950b";
-                readonly backgroundColorHover: "#eba400";
-                readonly borderColor: "#101010";
-                readonly foregroundColor: "#101010";
-            };
-        };
-    };
 };
 export default _default;

package/build/tokens/components/dark/button.js

@@ -4,100 +4,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',
-            },
-        },
-    },
 };

package/build/tokens/components/dark/card.d.ts

@@ -5,44 +5,16 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly brand: {
         readonly borderWidth: 2;
-        readonly emphasis: {
-            readonly borderColor: "#e7e6e6";
-            readonly broadbandGreenBackgroundColor: "#506c21";
-            readonly cashbackLilacBackgroundColor: "#8b2bc9";
-            readonly energyBlueBackgroundColor: "#326e7a";
-            readonly insuranceOrangeBackgroundColor: "#9b4c0e";
-            readonly mobileRoseBackgroundColor: "#a7266d";
-            readonly piggyPinkBackgroundColor: "#8f358f";
-            readonly purpleBackgroundColor: "#7a42c8";
-        };
-        readonly subtle: {
-            readonly borderColor: "#8a8686";
-            readonly broadbandGreenBackgroundColor: "#35421c";
-            readonly cashbackLilacBackgroundColor: "#522270";
-            readonly energyBlueBackgroundColor: "#254348";
-            readonly insuranceOrangeBackgroundColor: "#5a3213";
-            readonly mobileRoseBackgroundColor: "#601f42";
-            readonly piggyPinkBackgroundColor: "#5d2167";
-            readonly purpleBackgroundColor: "#492d6f";
-            readonly yellowBackgroundColor: "#756230";
-        };
     };
     readonly neutral: {
         readonly emphasis: {
-            readonly borderColor: "#e7e6e6";
             readonly borderWidth: 2;
         };
         readonly subtle: {
-            readonly borderColor: "#4c473d";
             readonly borderWidth: 1;
         };
-        readonly warmWhiteBackgroundColor: "#191917";
-        readonly whiteBackgroundColor: "#222222";
     };
     readonly selectable: {
-        readonly backgroundColor: "#222222";
-        readonly borderColor: "#4c473d";
-        readonly borderColorSelected: "#e7e6e6";
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
         readonly gap: 16;

package/build/tokens/components/dark/card.js

@@ -5,44 +5,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/build/tokens/components/dark/carousel-control.d.ts

@@ -4,15 +4,7 @@
 declare const _default: {
     readonly gap: 8;
     readonly item: {
-        readonly backgroundColorActive: "#e7e6e6";
-        readonly borderColor: "#e7e6e6";
-        readonly borderColorHover: "#d1d0d0";
         readonly borderWidth: 2;
-        readonly inverted: {
-            readonly backgroundColorActive: "#fcfbf2";
-            readonly borderColor: "#fcfbf2";
-            readonly borderColorHover: "#f1efe4";
-        };
     };
     readonly size: 12;
 };

package/build/tokens/components/dark/carousel-control.js

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

package/build/tokens/components/dark/checkbox.d.ts

@@ -5,24 +5,19 @@ declare const _default: {
     readonly borderRadius: 4;
     readonly borderWidth: 2;
     readonly checked: {
-        readonly backgroundColor: "#e7e6e6";
-        readonly borderColor: "#e7e6e6";
-        readonly iconColor: "#191917";
+        readonly backgroundColor: "#ebebeb";
     };
     readonly gap: 8;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#4c473d";
     readonly outlineColorHover: "#30302c";
     readonly outlineWidth: 3;
     readonly tile: {
-        readonly backgroundColor: "#222222";
-        readonly borderColor: "#4c473d";
-        readonly borderColorSelected: "#e7e6e6";
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
@@ -37,9 +32,5 @@ declare const _default: {
         readonly minWidth: 200;
         readonly padding: 12;
     };
-    readonly unchecked: {
-        readonly backgroundColor: "#222222";
-        readonly borderColor: "#8a8686";
-    };
 };
 export default _default;

package/build/tokens/components/dark/checkbox.js

@@ -5,24 +5,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,
@@ -37,8 +32,4 @@ export default {
         minWidth: 200,
         padding: 12,
     },
-    unchecked: {
-        backgroundColor: '#222222',
-        borderColor: '#8a8686',
-    },
 };

package/build/tokens/components/dark/date-picker.d.ts

@@ -2,17 +2,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColor: "#222222";
-    readonly borderColor: "#e7e6e6";
-    readonly borderColorInvalid: "#ff7964";
-    readonly borderColorReadOnly: "#464444";
-    readonly borderColorValid: "#58ca93";
     readonly borderRadius: 8;
     readonly borderWidth: 1;
     readonly borderWidthFocused: 2;
     readonly calendar: {
-        readonly backgroundColor: "#222222";
-        readonly borderColor: "#4c473d";
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly columnGap: 4;
@@ -25,13 +18,8 @@ declare const _default: {
             readonly dateGap: 8;
         };
         readonly item: {
-            readonly backgroundColorActive: "#464444";
-            readonly backgroundColorHover: "#3e3c3b";
-            readonly backgroundColorRange: "#3e3c3b";
-            readonly backgroundColorSelected: "#7a42c8";
             readonly borderRadius: 8;
             readonly minWidth: 32;
-            readonly roundelBackgroundColor: "#a782db";
             readonly roundelBackgroundColorInverted: "#fcfbf2";
             readonly roundelHeight: 6;
             readonly roundelWidth: 6;