@utilitywarehouse/hearth-react-native 0.1.0

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

@@ -0,0 +1,104 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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 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

@@ -0,0 +1,103 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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',
+        },
+    },
+    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

@@ -0,0 +1,63 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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;
+    };
+    readonly mobile: {
+        readonly padding: 16;
+        readonly paddingNone: 0;
+    };
+    readonly tablet: {
+        readonly padding: 24;
+        readonly paddingNone: 0;
+    };
+    readonly desktop: {
+        readonly padding: 24;
+        readonly paddingNone: 0;
+    };
+};
+export default _default;

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

@@ -0,0 +1,62 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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,
+    },
+    mobile: {
+        padding: 16,
+        paddingNone: 0,
+    },
+    tablet: {
+        padding: 24,
+        paddingNone: 0,
+    },
+    desktop: {
+        padding: 24,
+        paddingNone: 0,
+    },
+};

package/build/tokens/components/dark/carousel-control.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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;
+};
+export default _default;

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

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderRadius: 4;
+    readonly borderWidth: 2;
+    readonly checked: {
+        readonly backgroundColor: "#e7e6e6";
+        readonly borderColor: "#e7e6e6";
+        readonly iconColor: "#191917";
+    };
+    readonly gap: 8;
+    readonly group: {
+        readonly gap: 16;
+        readonly stack: {
+            readonly gap: 32;
+        };
+    };
+    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;
+        readonly gap: 8;
+        readonly group: {
+            readonly gap: 12;
+            readonly stack: {
+                readonly gap: 12;
+            };
+        };
+        readonly maxWidth: 504;
+        readonly minWidth: 200;
+        readonly padding: 12;
+    };
+    readonly unchecked: {
+        readonly backgroundColor: "#222222";
+        readonly borderColor: "#8a8686";
+    };
+};
+export default _default;

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

@@ -0,0 +1,44 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderRadius: 4,
+    borderWidth: 2,
+    checked: {
+        backgroundColor: '#e7e6e6',
+        borderColor: '#e7e6e6',
+        iconColor: '#191917',
+    },
+    gap: 8,
+    group: {
+        gap: 16,
+        stack: {
+            gap: 32,
+        },
+    },
+    outlineColorActive: '#4c473d',
+    outlineColorHover: '#30302c',
+    outlineWidth: 3,
+    tile: {
+        backgroundColor: '#222222',
+        borderColor: '#4c473d',
+        borderColorSelected: '#e7e6e6',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderWidthSelected: 2,
+        gap: 8,
+        group: {
+            gap: 12,
+            stack: {
+                gap: 12,
+            },
+        },
+        maxWidth: 504,
+        minWidth: 200,
+        padding: 12,
+    },
+    unchecked: {
+        backgroundColor: '#222222',
+        borderColor: '#8a8686',
+    },
+};

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

@@ -0,0 +1,55 @@
+/**
+ * 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;
+        readonly footer: {
+            readonly gap: 8;
+        };
+        readonly gap: 16;
+        readonly header: {
+            readonly controlGap: 28;
+            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;
+        };
+        readonly maxWidth: 420;
+        readonly minWidth: 320;
+        readonly padding: 16;
+        readonly rowGap: 2;
+    };
+    readonly gap: 6;
+    readonly gapContainer: 4;
+    readonly header: {
+        readonly controlGap: 28;
+    };
+    readonly height: 48;
+    readonly maxWidth: 504;
+    readonly minWidth: 288;
+    readonly paddingHorizontal: 16;
+    readonly paddingVertical: 12;
+};
+export default _default;

package/build/tokens/components/dark/date-picker.js

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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,
+        footer: {
+            gap: 8,
+        },
+        gap: 16,
+        header: {
+            controlGap: 28,
+            dateGap: 8,
+        },
+        item: {
+            backgroundColorActive: '#464444',
+            backgroundColorHover: '#3e3c3b',
+            backgroundColorRange: '#3e3c3b',
+            backgroundColorSelected: '#7a42c8',
+            borderRadius: 8,
+            minWidth: 32,
+            roundelBackgroundColor: '#a782db',
+            roundelBackgroundColorInverted: '#fcfbf2',
+            roundelHeight: 6,
+            roundelWidth: 6,
+        },
+        maxWidth: 420,
+        minWidth: 320,
+        padding: 16,
+        rowGap: 2,
+    },
+    gap: 6,
+    gapContainer: 4,
+    header: {
+        controlGap: 28,
+    },
+    height: 48,
+    maxWidth: 504,
+    minWidth: 288,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly action: {
+        readonly gap: 12;
+    };
+    readonly backgroundColor: "#222222";
+    readonly borderRadius: 16;
+    readonly content: {
+        readonly gap: 12;
+    };
+    readonly gap: 24;
+    readonly padding: 24;
+    readonly mobile: {
+        readonly width: 360;
+    };
+    readonly tablet: {
+        readonly width: 504;
+    };
+    readonly desktop: {
+        readonly width: 680;
+    };
+};
+export default _default;

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    action: {
+        gap: 12,
+    },
+    backgroundColor: '#222222',
+    borderRadius: 16,
+    content: {
+        gap: 12,
+    },
+    gap: 24,
+    padding: 24,
+    mobile: {
+        width: 360,
+    },
+    tablet: {
+        width: 504,
+    },
+    desktop: {
+        width: 680,
+    },
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderWidth: 1;
+    readonly color: "#4c473d";
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderWidth: 1,
+    color: '#4c473d',
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly border: "#e7e6e6";
+    readonly borderInverted: "#fcfbf2";
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    border: '#e7e6e6',
+    borderInverted: '#fcfbf2',
+};

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly calendar: {
+        readonly footer: {
+            readonly gap: 8;
+        };
+    };
+    readonly backgroundColor: "#fcfbf2";
+};
+export default _default;

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

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    calendar: {
+        footer: {
+            gap: 8,
+        },
+    },
+    backgroundColor: '#fcfbf2',
+};