@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

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,14 +454,16 @@ export declare const light: {
         };
     };
     readonly text: {
+        readonly affirmative: "#0f834a";
+        readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
-        readonly secondary: "#888888";
+        readonly secondary: "#5b5b5b";
     };
 };
 export declare const dark: {
     readonly background: {
-        readonly brand: "#996cda";
+        readonly brand: "#7a42c8";
         readonly primary: "#191917";
         readonly secondary: "#232323";
     };
@@ -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";
             };
         };
     };
@@ -537,7 +539,7 @@ export declare const dark: {
     readonly interactive: {
         readonly affirmative: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly foreground: {
@@ -573,7 +575,7 @@ export declare const dark: {
         };
         readonly destructive: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly foreground: {
@@ -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,15 +615,15 @@ export declare const dark: {
                     readonly active: "#4c4c4c";
                     readonly hover: "#3a3837";
                     readonly inverted: {
-                        readonly active: "#d3d3d3";
-                        readonly hover: "#ebebeb";
+                        readonly active: "#3a3837";
+                        readonly hover: "#3f3f3f";
                     };
                 };
             };
         };
         readonly highlight: {
             readonly border: {
-                readonly strong: "#f7f7f7";
+                readonly strong: "#101010";
             };
             readonly foreground: {
                 readonly strong: "#101010";
@@ -699,7 +701,9 @@ export declare const dark: {
         };
     };
     readonly text: {
-        readonly inverted: "#191917";
+        readonly affirmative: "#58ca93";
+        readonly brand: "#af90de";
+        readonly inverted: "#fcfbf2";
         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,14 +1162,16 @@ declare const color: {
             };
         };
         readonly text: {
+            readonly affirmative: "#0f834a";
+            readonly brand: "#7a42c8";
             readonly inverted: "#fcfbf2";
             readonly primary: "#101010";
-            readonly secondary: "#888888";
+            readonly secondary: "#5b5b5b";
         };
     };
     readonly dark: {
         readonly background: {
-            readonly brand: "#996cda";
+            readonly brand: "#7a42c8";
             readonly primary: "#191917";
             readonly secondary: "#232323";
         };
@@ -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";
                 };
             };
         };
@@ -1241,7 +1247,7 @@ declare const color: {
         readonly interactive: {
             readonly affirmative: {
                 readonly border: {
-                    readonly strong: "#ebebeb";
+                    readonly strong: "#101010";
                     readonly subtle: "#58ca93";
                 };
                 readonly foreground: {
@@ -1277,7 +1283,7 @@ declare const color: {
             };
             readonly destructive: {
                 readonly border: {
-                    readonly strong: "#ebebeb";
+                    readonly strong: "#101010";
                     readonly subtle: "#ff7964";
                 };
                 readonly foreground: {
@@ -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,15 +1323,15 @@ declare const color: {
                         readonly active: "#4c4c4c";
                         readonly hover: "#3a3837";
                         readonly inverted: {
-                            readonly active: "#d3d3d3";
-                            readonly hover: "#ebebeb";
+                            readonly active: "#3a3837";
+                            readonly hover: "#3f3f3f";
                         };
                     };
                 };
             };
             readonly highlight: {
                 readonly border: {
-                    readonly strong: "#f7f7f7";
+                    readonly strong: "#101010";
                 };
                 readonly foreground: {
                     readonly strong: "#101010";
@@ -1403,7 +1409,9 @@ declare const color: {
             };
         };
         readonly text: {
-            readonly inverted: "#191917";
+            readonly affirmative: "#58ca93";
+            readonly brand: "#af90de";
+            readonly inverted: "#fcfbf2";
             readonly primary: "#ebebeb";
             readonly secondary: "#b2afae";
         };