@utilitywarehouse/hearth-react-native 0.1.0

package/build/tokens/components/dark/form-field.d.ts

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

package/build/tokens/components/dark/form-field.js

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

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

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly borderRadius: 8;
+    readonly md: {
+        readonly height: 48;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 12;
+        readonly width: 48;
+    };
+    readonly sm: {
+        readonly height: 32;
+        readonly paddingHorizontal: 6;
+        readonly paddingVertical: 6;
+        readonly width: 32;
+    };
+    readonly unstyled: {
+        readonly foregroundColor: "#e7e6e6";
+        readonly foregroundColorActive: "#b2afae";
+        readonly foregroundColorHover: "#d1d0d0";
+        readonly inverted: {
+            readonly foregroundColor: "#fcfbf2";
+            readonly foregroundColorActive: "#f1efe4";
+            readonly foregroundColorHover: "#f7f6eb";
+        };
+        readonly md: {
+            readonly height: 24;
+            readonly width: 24;
+        };
+        readonly paddingHorizontal: 0;
+        readonly paddingVertical: 0;
+        readonly sm: {
+            readonly height: 0;
+            readonly width: 20;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    borderRadius: 8,
+    md: {
+        height: 48,
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        width: 48,
+    },
+    sm: {
+        height: 32,
+        paddingHorizontal: 6,
+        paddingVertical: 6,
+        width: 32,
+    },
+    unstyled: {
+        foregroundColor: '#e7e6e6',
+        foregroundColorActive: '#b2afae',
+        foregroundColorHover: '#d1d0d0',
+        inverted: {
+            foregroundColor: '#fcfbf2',
+            foregroundColorActive: '#f1efe4',
+            foregroundColorHover: '#f7f6eb',
+        },
+        md: {
+            height: 24,
+            width: 24,
+        },
+        paddingHorizontal: 0,
+        paddingVertical: 0,
+        sm: {
+            height: 0,
+            width: 20,
+        },
+    },
+};

package/build/tokens/components/dark/icon-container.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly emphasis: {
+        readonly broadbandGreenBackground: "#506c21";
+        readonly cashbackLilacBackground: "#8b2bc9";
+        readonly energyBlueBackground: "#326e7a";
+        readonly insuranceOrangeBackground: "#9b4c0e";
+        readonly mobileRoseBackground: "#a7266d";
+        readonly piggyPinkBackground: "#8f358f";
+    };
+    readonly lg: {
+        readonly borderRadiusNone: 0;
+        readonly borderRadiusRounded: 8;
+        readonly height: 64;
+        readonly padding: 20;
+        readonly width: 64;
+    };
+    readonly md: {
+        readonly borderRadiusRounded: 8;
+        readonly height: 48;
+        readonly padding: 12;
+        readonly width: 48;
+    };
+    readonly sm: {
+        readonly borderRadiusRounded: 6;
+        readonly height: 32;
+        readonly padding: 6;
+        readonly width: 32;
+    };
+    readonly subtle: {
+        readonly broadbandGreenBackground: "#35421c";
+        readonly cashbackLilacBackground: "#522270";
+        readonly energyBlueBackground: "#254348";
+        readonly insuranceOrangeBackground: "#5a3213";
+        readonly mobileRoseBackground: "#601f42";
+        readonly piggyPinkBackground: "#5d2167";
+        readonly yellowBackground: "#756230";
+    };
+};
+export default _default;

package/build/tokens/components/dark/icon-container.js

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    emphasis: {
+        broadbandGreenBackground: '#506c21',
+        cashbackLilacBackground: '#8b2bc9',
+        energyBlueBackground: '#326e7a',
+        insuranceOrangeBackground: '#9b4c0e',
+        mobileRoseBackground: '#a7266d',
+        piggyPinkBackground: '#8f358f',
+    },
+    lg: {
+        borderRadiusNone: 0,
+        borderRadiusRounded: 8,
+        height: 64,
+        padding: 20,
+        width: 64,
+    },
+    md: {
+        borderRadiusRounded: 8,
+        height: 48,
+        padding: 12,
+        width: 48,
+    },
+    sm: {
+        borderRadiusRounded: 6,
+        height: 32,
+        padding: 6,
+        width: 32,
+    },
+    subtle: {
+        broadbandGreenBackground: '#35421c',
+        cashbackLilacBackground: '#522270',
+        energyBlueBackground: '#254348',
+        insuranceOrangeBackground: '#5a3213',
+        mobileRoseBackground: '#601f42',
+        piggyPinkBackground: '#5d2167',
+        yellowBackground: '#756230',
+    },
+};

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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly item: {
+        readonly icon: {
+            readonly colorActive: "#7a42c8";
+            readonly colorDefault: "#e7e6e6";
+        };
+    };
+    readonly color: "#e7e6e6";
+    readonly colorInvalid: "#ff7964";
+    readonly colorValid: "#58ca93";
+};
+export default _default;

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

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    item: {
+        icon: {
+            colorActive: '#7a42c8',
+            colorDefault: '#e7e6e6',
+        },
+    },
+    color: '#e7e6e6',
+    colorInvalid: '#ff7964',
+    colorValid: '#58ca93',
+};

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

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export { default as accordion } from './accordion';
+export { default as alert } from './alert';
+export { default as badge } from './badge';
+export { default as banner } from './banner';
+export { default as bottomNavigation } from './bottom-navigation';
+export { default as bottomSheet } from './bottom-sheet';
+export { default as breadcrumb } from './breadcrumb';
+export { default as button } from './button';
+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 dialog } from './dialog';
+export { default as divider } from './divider';
+export { default as focus } from './focus';
+export { default as footer } from './footer';
+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 inlineLink } from './inline-link';
+export { default as input } from './input';
+export { default as link } from './link';
+export { default as list } from './list';
+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 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 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 toggleButton } from './toggle-button';
+export { default as topNavigation } from './top-navigation';

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

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export { default as accordion } from './accordion';
+export { default as alert } from './alert';
+export { default as badge } from './badge';
+export { default as banner } from './banner';
+export { default as bottomNavigation } from './bottom-navigation';
+export { default as bottomSheet } from './bottom-sheet';
+export { default as breadcrumb } from './breadcrumb';
+export { default as button } from './button';
+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 dialog } from './dialog';
+export { default as divider } from './divider';
+export { default as focus } from './focus';
+export { default as footer } from './footer';
+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 inlineLink } from './inline-link';
+export { default as input } from './input';
+export { default as link } from './link';
+export { default as list } from './list';
+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 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 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 toggleButton } from './toggle-button';
+export { default as topNavigation } from './top-navigation';

package/build/tokens/components/dark/inline-link.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly color: "#6bb0ff";
+    readonly colorVisited: "#a782db";
+    readonly inverted: {
+        readonly color: "#fcfbf2";
+        readonly colorActive: "#f1efe4";
+        readonly colorHover: "#f7f6eb";
+        readonly colorVisited: "#f1efe4";
+    };
+};
+export default _default;

package/build/tokens/components/dark/inline-link.js

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    color: '#6bb0ff',
+    colorVisited: '#a782db',
+    inverted: {
+        color: '#fcfbf2',
+        colorActive: '#f1efe4',
+        colorHover: '#f7f6eb',
+        colorVisited: '#f1efe4',
+    },
+};

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

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly backgroundColor: "#222222";
+    readonly borderColor: "#e7e6e6";
+    readonly borderColorInvalid: "#ff7964";
+    readonly borderColorReadOnly: "#5f5c5b";
+    readonly borderColorValid: "#58ca93";
+    readonly borderRadius: 8;
+    readonly borderWidth: 1;
+    readonly borderWidthFocused: 2;
+    readonly color: "#e7e6e6";
+    readonly currency: {
+        readonly gap: 2;
+        readonly height: 60;
+    };
+    readonly date: {
+        readonly gap: 8;
+    };
+    readonly gap: 6;
+    readonly height: 48;
+    readonly label: {
+        readonly gap: 6;
+    };
+    readonly maxWidth: 504;
+    readonly minWidth: 200;
+    readonly paddingHorizontal: 16;
+    readonly paddingVertical: 12;
+    readonly placeholderColor: "#6f6c6b";
+    readonly textArea: {
+        readonly height: 96;
+        readonly resizeIconColor: "#d1d0d0";
+    };
+    readonly validation: {
+        readonly gap: 2;
+    };
+    readonly verification: {
+        readonly gap: 8;
+    };
+};
+export default _default;

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

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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,
+    },
+    date: {
+        gap: 8,
+    },
+    gap: 6,
+    height: 48,
+    label: {
+        gap: 6,
+    },
+    maxWidth: 504,
+    minWidth: 200,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    placeholderColor: '#6f6c6b',
+    textArea: {
+        height: 96,
+        resizeIconColor: '#d1d0d0',
+    },
+    validation: {
+        gap: 2,
+    },
+    verification: {
+        gap: 8,
+    },
+};

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

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly color: "#e7e6e6";
+    readonly colorActive: "#b2afae";
+    readonly colorHover: "#d1d0d0";
+    readonly gap: 2;
+    readonly inverted: {
+        readonly color: "#fcfbf2";
+        readonly colorActive: "#f1efe4";
+        readonly colorHover: "#f7f6eb";
+    };
+};
+export default _default;

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

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    color: '#e7e6e6',
+    colorActive: '#b2afae',
+    colorHover: '#d1d0d0',
+    gap: 2,
+    inverted: {
+        color: '#fcfbf2',
+        colorActive: '#f1efe4',
+        colorHover: '#f7f6eb',
+    },
+};

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

@@ -0,0 +1,45 @@
+/**
+ * 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: "#4c473d";
+        readonly backgroundColorHover: "#30302c";
+        readonly borderWidth: 1;
+        readonly contentGap: 2;
+        readonly emphasis: {
+            readonly borderColor: "#e7e6e6";
+        };
+        readonly gap: 12;
+        readonly padding: 16;
+        readonly subtle: {
+            readonly borderColor: "#4c473d";
+        };
+    };
+    readonly listContainer: {
+        readonly emphasisWarmWhite: {
+            readonly borderRadius: 16;
+        };
+        readonly emphasisWhite: {
+            readonly borderRadius: 16;
+        };
+        readonly none: {
+            readonly borderRadius: 0;
+        };
+        readonly subtleWarmWhite: {
+            readonly borderRadius: 16;
+        };
+        readonly subtleWhite: {
+            readonly borderRadius: 16;
+        };
+    };
+    readonly list: {
+        readonly gap: 4;
+    };
+};
+export default _default;

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

@@ -0,0 +1,44 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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: {
+        emphasisWarmWhite: {
+            borderRadius: 16,
+        },
+        emphasisWhite: {
+            borderRadius: 16,
+        },
+        none: {
+            borderRadius: 0,
+        },
+        subtleWarmWhite: {
+            borderRadius: 16,
+        },
+        subtleWhite: {
+            borderRadius: 16,
+        },
+    },
+    list: {
+        gap: 4,
+    },
+};

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

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly backgroundColor: "#222222";
+    readonly borderColor: "#4c473d";
+    readonly borderWidth: 1;
+    readonly gap: 4;
+    readonly item: {
+        readonly borderRadius: 8;
+        readonly gap: 6;
+        readonly grey: {
+            readonly backgroundColorActive: "#464444";
+            readonly backgroundColorHover: "#3e3c3b";
+            readonly foregroundColor: "#e7e6e6";
+        };
+        readonly padding: 12;
+        readonly red: {
+            readonly backgroundColorActive: "#3b1512";
+            readonly backgroundColorHover: "#521a16";
+            readonly foregroundColor: "#ff7964";
+        };
+    };
+    readonly list: {
+        readonly gap: 4;
+    };
+    readonly maxWidth: 504;
+    readonly minWidth: 288;
+    readonly padding: 4;
+    readonly mobile: {
+        readonly item: {
+            readonly padding: 4;
+        };
+    };
+    readonly tablet: {
+        readonly item: {
+            readonly padding: 12;
+        };
+    };
+    readonly desktop: {
+        readonly item: {
+            readonly padding: 12;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+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,
+    },
+    maxWidth: 504,
+    minWidth: 288,
+    padding: 4,
+    mobile: {
+        item: {
+            padding: 4,
+        },
+    },
+    tablet: {
+        item: {
+            padding: 12,
+        },
+    },
+    desktop: {
+        item: {
+            padding: 12,
+        },
+    },
+};

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

@@ -0,0 +1,28 @@
+/**
+ * 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: 48;
+    readonly mobile: {
+        readonly padding: 16;
+        readonly width: 360;
+    };
+    readonly tablet: {
+        readonly padding: 48;
+        readonly width: 504;
+    };
+    readonly desktop: {
+        readonly padding: 48;
+        readonly width: 680;
+    };
+};
+export default _default;