@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

package/build/core/themes.js

@@ -22,6 +22,42 @@ const shared = {
         '4/6': '66.666%',
         '5/6': '83.333%',
         full: '100%',
+        none: 0,
+        '2xs': {
+            base: layout.mobile.spacing['2xs'],
+            md: layout.tablet.spacing['2xs'],
+            lg: layout.desktop.spacing['2xs'],
+        },
+        xs: {
+            base: layout.mobile.spacing.xs,
+            md: layout.tablet.spacing.xs,
+            lg: layout.desktop.spacing.xs,
+        },
+        sm: {
+            base: layout.mobile.spacing.sm,
+            md: layout.tablet.spacing.sm,
+            lg: layout.desktop.spacing.sm,
+        },
+        md: {
+            base: layout.mobile.spacing.md,
+            md: layout.tablet.spacing.md,
+            lg: layout.desktop.spacing.md,
+        },
+        lg: {
+            base: layout.mobile.spacing.lg,
+            md: layout.tablet.spacing.lg,
+            lg: layout.desktop.spacing.lg,
+        },
+        xl: {
+            base: layout.mobile.spacing.xl,
+            md: layout.tablet.spacing.xl,
+            lg: layout.desktop.spacing.xl,
+        },
+        '2xl': {
+            base: layout.mobile.spacing['2xl'],
+            md: layout.tablet.spacing['2xl'],
+            lg: layout.desktop.spacing['2xl'],
+        },
     },
     borderWidth,
     borderRadius,
@@ -155,7 +191,20 @@ const shared = {
                 },
             },
             space: {
-                none: {},
+                none: {
+                    gap: {
+                        base: layout.mobile.spacing.none,
+                        md: layout.tablet.spacing.none,
+                        lg: layout.desktop.spacing.none,
+                    },
+                },
+                '2xs': {
+                    gap: {
+                        base: layout.mobile.spacing['2xs'],
+                        md: layout.tablet.spacing['2xs'],
+                        lg: layout.desktop.spacing['2xs'],
+                    },
+                },
                 xs: {
                     gap: {
                         base: layout.mobile.spacing.xs,
@@ -191,6 +240,13 @@ const shared = {
                         lg: layout.desktop.spacing.xl,
                     },
                 },
+                '2xl': {
+                    gap: {
+                        base: layout.mobile.spacing['2xl'],
+                        md: layout.tablet.spacing['2xl'],
+                        lg: layout.desktop.spacing['2xl'],
+                    },
+                },
             },
         },
     },

package/build/tokens/color.d.ts

@@ -228,55 +228,55 @@ export declare const light: {
         readonly danger: {
             readonly border: "#de2612";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#de2612";
             };
             readonly surface: {
-                readonly default: "#de2612";
-                readonly subtle: "#ffccc5";
+                readonly default: "#ff634a";
+                readonly subtle: "#ffa89d";
             };
         };
         readonly functional: {
-            readonly border: "#888888";
+            readonly border: "#5b5b5b";
             readonly foreground: {
-                readonly default: "#fcfbf2";
-                readonly subtle: "#888888";
+                readonly default: "#101010";
+                readonly subtle: "#5b5b5b";
             };
             readonly surface: {
-                readonly default: "#888888";
+                readonly default: "#919191";
                 readonly subtle: "#d3d3d3";
             };
         };
         readonly info: {
             readonly border: "#1c6cd4";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#1c6cd4";
             };
             readonly surface: {
-                readonly default: "#1c6cd4";
+                readonly default: "#6bb0ff";
                 readonly subtle: "#bcddff";
             };
         };
         readonly positive: {
             readonly border: "#0f834a";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#0f834a";
             };
             readonly surface: {
-                readonly default: "#0f834a";
+                readonly default: "#36bf7d";
                 readonly subtle: "#a2e2c3";
             };
         };
         readonly warning: {
             readonly border: "#be5400";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#be5400";
             };
             readonly surface: {
-                readonly default: "#be5400";
+                readonly default: "#ff8010";
                 readonly subtle: "#ffcca8";
             };
         };
@@ -349,14 +349,14 @@ export declare const light: {
         };
         readonly functional: {
             readonly border: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#101010";
                 readonly subtle: "#101010";
-                readonly inverted: "#f7f7f7";
             };
             readonly foreground: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#fcfbf2";
                 readonly subtle: "#101010";
-                readonly inverted: "#f7f7f7";
             };
             readonly surface: {
                 readonly strong: {
@@ -454,6 +454,8 @@ export declare const light: {
         };
     };
     readonly text: {
+        readonly affirmative: "#0f834a";
+        readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
         readonly secondary: "#888888";
@@ -473,56 +475,56 @@ export declare const dark: {
         readonly danger: {
             readonly border: "#ff7964";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly surface: {
-                readonly default: "#de2612";
-                readonly subtle: "#521a16";
+                readonly default: "#ff634a";
+                readonly subtle: "#ffa89d";
             };
         };
         readonly functional: {
             readonly border: "#b2afae";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#b2afae";
             };
             readonly surface: {
-                readonly default: "#888888";
-                readonly subtle: "#232323";
+                readonly default: "#919191";
+                readonly subtle: "#d3d3d3";
             };
         };
         readonly info: {
             readonly border: "#6bb0ff";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#6bb0ff";
             };
             readonly surface: {
-                readonly default: "#1c6cd4";
-                readonly subtle: "#042455";
+                readonly default: "#6bb0ff";
+                readonly subtle: "#bcddff";
             };
         };
         readonly positive: {
             readonly border: "#58ca93";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly surface: {
-                readonly default: "#0f834a";
-                readonly subtle: "#033d21";
+                readonly default: "#36bf7d";
+                readonly subtle: "#a2e2c3";
             };
         };
         readonly warning: {
             readonly border: "#ff9639";
             readonly foreground: {
-                readonly default: "#fcfbf2";
+                readonly default: "#101010";
                 readonly subtle: "#ff9639";
             };
             readonly surface: {
-                readonly default: "#cb5b00";
-                readonly subtle: "#6b2d00";
+                readonly default: "#ff8010";
+                readonly subtle: "#ffcca8";
             };
         };
     };
@@ -594,14 +596,14 @@ export declare const dark: {
         };
         readonly functional: {
             readonly border: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#ebebeb";
                 readonly subtle: "#ebebeb";
-                readonly inverted: "#f7f7f7";
             };
             readonly foreground: {
+                readonly inverted: "#f7f7f7";
                 readonly strong: "#fcfbf2";
                 readonly subtle: "#ebebeb";
-                readonly inverted: "#f7f7f7";
             };
             readonly surface: {
                 readonly strong: {
@@ -613,8 +615,8 @@ export declare const dark: {
                     readonly active: "#4c4c4c";
                     readonly hover: "#3a3837";
                     readonly inverted: {
-                        readonly active: "#d3d3d3";
-                        readonly hover: "#ebebeb";
+                        readonly active: "#3a3837";
+                        readonly hover: "#3f3f3f";
                     };
                 };
             };
@@ -699,6 +701,8 @@ export declare const dark: {
         };
     };
     readonly text: {
+        readonly affirmative: "#58ca93";
+        readonly brand: "#af90de";
         readonly inverted: "#191917";
         readonly primary: "#ebebeb";
         readonly secondary: "#b2afae";
@@ -932,55 +936,55 @@ declare const color: {
             readonly danger: {
                 readonly border: "#de2612";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#de2612";
                 };
                 readonly surface: {
-                    readonly default: "#de2612";
-                    readonly subtle: "#ffccc5";
+                    readonly default: "#ff634a";
+                    readonly subtle: "#ffa89d";
                 };
             };
             readonly functional: {
-                readonly border: "#888888";
+                readonly border: "#5b5b5b";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
-                    readonly subtle: "#888888";
+                    readonly default: "#101010";
+                    readonly subtle: "#5b5b5b";
                 };
                 readonly surface: {
-                    readonly default: "#888888";
+                    readonly default: "#919191";
                     readonly subtle: "#d3d3d3";
                 };
             };
             readonly info: {
                 readonly border: "#1c6cd4";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#1c6cd4";
                 };
                 readonly surface: {
-                    readonly default: "#1c6cd4";
+                    readonly default: "#6bb0ff";
                     readonly subtle: "#bcddff";
                 };
             };
             readonly positive: {
                 readonly border: "#0f834a";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#0f834a";
                 };
                 readonly surface: {
-                    readonly default: "#0f834a";
+                    readonly default: "#36bf7d";
                     readonly subtle: "#a2e2c3";
                 };
             };
             readonly warning: {
                 readonly border: "#be5400";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#be5400";
                 };
                 readonly surface: {
-                    readonly default: "#be5400";
+                    readonly default: "#ff8010";
                     readonly subtle: "#ffcca8";
                 };
             };
@@ -1053,14 +1057,14 @@ declare const color: {
             };
             readonly functional: {
                 readonly border: {
+                    readonly inverted: "#f7f7f7";
                     readonly strong: "#101010";
                     readonly subtle: "#101010";
-                    readonly inverted: "#f7f7f7";
                 };
                 readonly foreground: {
+                    readonly inverted: "#f7f7f7";
                     readonly strong: "#fcfbf2";
                     readonly subtle: "#101010";
-                    readonly inverted: "#f7f7f7";
                 };
                 readonly surface: {
                     readonly strong: {
@@ -1158,6 +1162,8 @@ declare const color: {
             };
         };
         readonly text: {
+            readonly affirmative: "#0f834a";
+            readonly brand: "#7a42c8";
             readonly inverted: "#fcfbf2";
             readonly primary: "#101010";
             readonly secondary: "#888888";
@@ -1177,56 +1183,56 @@ declare const color: {
             readonly danger: {
                 readonly border: "#ff7964";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#ff7964";
                 };
                 readonly surface: {
-                    readonly default: "#de2612";
-                    readonly subtle: "#521a16";
+                    readonly default: "#ff634a";
+                    readonly subtle: "#ffa89d";
                 };
             };
             readonly functional: {
                 readonly border: "#b2afae";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#b2afae";
                 };
                 readonly surface: {
-                    readonly default: "#888888";
-                    readonly subtle: "#232323";
+                    readonly default: "#919191";
+                    readonly subtle: "#d3d3d3";
                 };
             };
             readonly info: {
                 readonly border: "#6bb0ff";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#6bb0ff";
                 };
                 readonly surface: {
-                    readonly default: "#1c6cd4";
-                    readonly subtle: "#042455";
+                    readonly default: "#6bb0ff";
+                    readonly subtle: "#bcddff";
                 };
             };
             readonly positive: {
                 readonly border: "#58ca93";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#58ca93";
                 };
                 readonly surface: {
-                    readonly default: "#0f834a";
-                    readonly subtle: "#033d21";
+                    readonly default: "#36bf7d";
+                    readonly subtle: "#a2e2c3";
                 };
             };
             readonly warning: {
                 readonly border: "#ff9639";
                 readonly foreground: {
-                    readonly default: "#fcfbf2";
+                    readonly default: "#101010";
                     readonly subtle: "#ff9639";
                 };
                 readonly surface: {
-                    readonly default: "#cb5b00";
-                    readonly subtle: "#6b2d00";
+                    readonly default: "#ff8010";
+                    readonly subtle: "#ffcca8";
                 };
             };
         };
@@ -1298,14 +1304,14 @@ declare const color: {
             };
             readonly functional: {
                 readonly border: {
+                    readonly inverted: "#f7f7f7";
                     readonly strong: "#ebebeb";
                     readonly subtle: "#ebebeb";
-                    readonly inverted: "#f7f7f7";
                 };
                 readonly foreground: {
+                    readonly inverted: "#f7f7f7";
                     readonly strong: "#fcfbf2";
                     readonly subtle: "#ebebeb";
-                    readonly inverted: "#f7f7f7";
                 };
                 readonly surface: {
                     readonly strong: {
@@ -1317,8 +1323,8 @@ declare const color: {
                         readonly active: "#4c4c4c";
                         readonly hover: "#3a3837";
                         readonly inverted: {
-                            readonly active: "#d3d3d3";
-                            readonly hover: "#ebebeb";
+                            readonly active: "#3a3837";
+                            readonly hover: "#3f3f3f";
                         };
                     };
                 };
@@ -1403,6 +1409,8 @@ declare const color: {
             };
         };
         readonly text: {
+            readonly affirmative: "#58ca93";
+            readonly brand: "#af90de";
             readonly inverted: "#191917";
             readonly primary: "#ebebeb";
             readonly secondary: "#b2afae";

package/build/tokens/color.js

@@ -228,55 +228,55 @@ export const light = {
         danger: {
             border: '#de2612',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#de2612',
             },
             surface: {
-                default: '#de2612',
-                subtle: '#ffccc5',
+                default: '#ff634a',
+                subtle: '#ffa89d',
             },
         },
         functional: {
-            border: '#888888',
+            border: '#5b5b5b',
             foreground: {
-                default: '#fcfbf2',
-                subtle: '#888888',
+                default: '#101010',
+                subtle: '#5b5b5b',
             },
             surface: {
-                default: '#888888',
+                default: '#919191',
                 subtle: '#d3d3d3',
             },
         },
         info: {
             border: '#1c6cd4',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#1c6cd4',
             },
             surface: {
-                default: '#1c6cd4',
+                default: '#6bb0ff',
                 subtle: '#bcddff',
             },
         },
         positive: {
             border: '#0f834a',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#0f834a',
             },
             surface: {
-                default: '#0f834a',
+                default: '#36bf7d',
                 subtle: '#a2e2c3',
             },
         },
         warning: {
             border: '#be5400',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#be5400',
             },
             surface: {
-                default: '#be5400',
+                default: '#ff8010',
                 subtle: '#ffcca8',
             },
         },
@@ -349,14 +349,14 @@ export const light = {
         },
         functional: {
             border: {
+                inverted: '#f7f7f7',
                 strong: '#101010',
                 subtle: '#101010',
-                inverted: '#f7f7f7',
             },
             foreground: {
+                inverted: '#f7f7f7',
                 strong: '#fcfbf2',
                 subtle: '#101010',
-                inverted: '#f7f7f7',
             },
             surface: {
                 strong: {
@@ -454,6 +454,8 @@ export const light = {
         },
     },
     text: {
+        affirmative: '#0f834a',
+        brand: '#7a42c8',
         inverted: '#fcfbf2',
         primary: '#101010',
         secondary: '#888888',
@@ -473,56 +475,56 @@ export const dark = {
         danger: {
             border: '#ff7964',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#ff7964',
             },
             surface: {
-                default: '#de2612',
-                subtle: '#521a16',
+                default: '#ff634a',
+                subtle: '#ffa89d',
             },
         },
         functional: {
             border: '#b2afae',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#b2afae',
             },
             surface: {
-                default: '#888888',
-                subtle: '#232323',
+                default: '#919191',
+                subtle: '#d3d3d3',
             },
         },
         info: {
             border: '#6bb0ff',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#6bb0ff',
             },
             surface: {
-                default: '#1c6cd4',
-                subtle: '#042455',
+                default: '#6bb0ff',
+                subtle: '#bcddff',
             },
         },
         positive: {
             border: '#58ca93',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#58ca93',
             },
             surface: {
-                default: '#0f834a',
-                subtle: '#033d21',
+                default: '#36bf7d',
+                subtle: '#a2e2c3',
             },
         },
         warning: {
             border: '#ff9639',
             foreground: {
-                default: '#fcfbf2',
+                default: '#101010',
                 subtle: '#ff9639',
             },
             surface: {
-                default: '#cb5b00',
-                subtle: '#6b2d00',
+                default: '#ff8010',
+                subtle: '#ffcca8',
             },
         },
     },
@@ -594,14 +596,14 @@ export const dark = {
         },
         functional: {
             border: {
+                inverted: '#f7f7f7',
                 strong: '#ebebeb',
                 subtle: '#ebebeb',
-                inverted: '#f7f7f7',
             },
             foreground: {
+                inverted: '#f7f7f7',
                 strong: '#fcfbf2',
                 subtle: '#ebebeb',
-                inverted: '#f7f7f7',
             },
             surface: {
                 strong: {
@@ -613,8 +615,8 @@ export const dark = {
                     active: '#4c4c4c',
                     hover: '#3a3837',
                     inverted: {
-                        active: '#d3d3d3',
-                        hover: '#ebebeb',
+                        active: '#3a3837',
+                        hover: '#3f3f3f',
                     },
                 },
             },
@@ -699,6 +701,8 @@ export const dark = {
         },
     },
     text: {
+        affirmative: '#58ca93',
+        brand: '#af90de',
         inverted: '#191917',
         primary: '#ebebeb',
         secondary: '#b2afae',