@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.0

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

@@ -10,6 +10,7 @@ declare const _default: {
         readonly paddingVertical: 12;
     };
     readonly minWidth: 80;
+    readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 4;

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

@@ -10,6 +10,7 @@ export default {
         paddingVertical: 12,
     },
     minWidth: 80,
+    shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,
         paddingVertical: 4,

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

@@ -11,7 +11,7 @@ declare const _default: {
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#4c473d";

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

@@ -11,7 +11,7 @@ export default {
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#4c473d',

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

@@ -20,9 +20,9 @@ declare const _default: {
         readonly foregroundColorActive: "#b2afae";
         readonly foregroundColorHover: "#d3d3d3";
         readonly inverted: {
-            readonly foregroundColor: "#101010";
-            readonly foregroundColorActive: "#3a3837";
-            readonly foregroundColorHover: "#232323";
+            readonly foregroundColor: "#f7f7f7";
+            readonly foregroundColorActive: "#b2afae";
+            readonly foregroundColorHover: "#d3d3d3";
         };
         readonly md: {
             readonly height: 24;

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

@@ -20,9 +20,9 @@ export default {
         foregroundColorActive: '#b2afae',
         foregroundColorHover: '#d3d3d3',
         inverted: {
-            foregroundColor: '#101010',
-            foregroundColorActive: '#3a3837',
-            foregroundColorHover: '#232323',
+            foregroundColor: '#f7f7f7',
+            foregroundColorActive: '#b2afae',
+            foregroundColorHover: '#d3d3d3',
         },
         md: {
             height: 24,

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

@@ -11,7 +11,7 @@ declare const _default: {
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#4c473d";

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

@@ -11,7 +11,7 @@ export default {
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#4c473d',

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

@@ -9,6 +9,8 @@ declare const _default: {
     readonly gap: 12;
     readonly item: {
         readonly gap: 6;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 16;
         readonly selected: {
             readonly borderBottomRadius: 0;
             readonly borderTopRadius: 4;

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

@@ -9,6 +9,8 @@ export default {
     gap: 12,
     item: {
         gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 16,
         selected: {
             borderBottomRadius: 0,
             borderTopRadius: 4,

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

@@ -18,7 +18,7 @@ declare const _default: {
     readonly paddingHorizontal: 6;
     readonly sm: {
         readonly height: 24;
-        readonly paddingVertical: 0;
+        readonly paddingVertical: 2;
     };
 };
 export default _default;

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

@@ -18,6 +18,6 @@ export default {
     paddingHorizontal: 6,
     sm: {
         height: 24,
-        paddingVertical: 0,
+        paddingVertical: 2,
     },
 };

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

@@ -10,6 +10,7 @@ declare const _default: {
         readonly paddingVertical: 12;
     };
     readonly minWidth: 80;
+    readonly shadowColor: "#101010";
     readonly sm: {
         readonly paddingHorizontal: 16;
         readonly paddingVertical: 4;

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

@@ -10,6 +10,7 @@ export default {
         paddingVertical: 12,
     },
     minWidth: 80,
+    shadowColor: '#101010',
     sm: {
         paddingHorizontal: 16,
         paddingVertical: 4,

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

@@ -7,11 +7,11 @@ declare const _default: {
     readonly checked: {
         readonly backgroundColor: "#101010";
     };
-    readonly gap: 8;
+    readonly gap: 12;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#d4d2c0";
@@ -21,7 +21,7 @@ declare const _default: {
         readonly borderRadius: 8;
         readonly borderWidth: 1;
         readonly borderWidthSelected: 2;
-        readonly gap: 8;
+        readonly gap: 12;
         readonly group: {
             readonly gap: 6;
             readonly stack: {

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

@@ -7,11 +7,11 @@ export default {
     checked: {
         backgroundColor: '#101010',
     },
-    gap: 8,
+    gap: 12,
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#d4d2c0',
@@ -21,7 +21,7 @@ export default {
         borderRadius: 8,
         borderWidth: 1,
         borderWidthSelected: 2,
-        gap: 8,
+        gap: 12,
         group: {
             gap: 6,
             stack: {

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

@@ -21,7 +21,7 @@ declare const _default: {
         readonly foregroundColorHover: "#3a3837";
         readonly inverted: {
             readonly foregroundColor: "#f7f7f7";
-            readonly foregroundColorActive: "#d4d2c0";
+            readonly foregroundColorActive: "#b2afae";
             readonly foregroundColorHover: "#d3d3d3";
         };
         readonly md: {

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

@@ -21,7 +21,7 @@ export default {
         foregroundColorHover: '#3a3837',
         inverted: {
             foregroundColor: '#f7f7f7',
-            foregroundColorActive: '#d4d2c0',
+            foregroundColorActive: '#b2afae',
             foregroundColorHover: '#d3d3d3',
         },
         md: {

package/build/tokens/components/light/radio.d.ts

@@ -7,11 +7,11 @@ declare const _default: {
     readonly checked: {
         readonly color: "#101010";
     };
-    readonly gap: 8;
+    readonly gap: 12;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#d4d2c0";
@@ -23,7 +23,7 @@ declare const _default: {
         readonly borderWidthSelected: 2;
         readonly gap: 8;
         readonly group: {
-            readonly gap: 6;
+            readonly gap: 12;
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/light/radio.js

@@ -7,11 +7,11 @@ export default {
     checked: {
         color: '#101010',
     },
-    gap: 8,
+    gap: 12,
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#d4d2c0',
@@ -23,7 +23,7 @@ export default {
         borderWidthSelected: 2,
         gap: 8,
         group: {
-            gap: 6,
+            gap: 12,
             stack: {
                 gap: 12,
             },

package/build/tokens/components/light/tabs.d.ts

@@ -9,6 +9,8 @@ declare const _default: {
     readonly gap: 12;
     readonly item: {
         readonly gap: 6;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 16;
         readonly selected: {
             readonly borderBottomRadius: 0;
             readonly borderTopRadius: 4;

package/build/tokens/components/light/tabs.js

@@ -9,6 +9,8 @@ export default {
     gap: 12,
     item: {
         gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 16,
         selected: {
             borderBottomRadius: 0,
             borderTopRadius: 4,

package/build/tokens/layout.d.ts

@@ -20,11 +20,14 @@ export declare const mobile: {
         readonly margin: 16;
     };
     readonly spacing: {
-        readonly lg: 20;
-        readonly md: 16;
-        readonly sm: 12;
-        readonly xl: 28;
-        readonly xs: 8;
+        readonly '2xl': 28;
+        readonly '2xs': 2;
+        readonly lg: 16;
+        readonly md: 12;
+        readonly none: 0;
+        readonly sm: 8;
+        readonly xl: 20;
+        readonly xs: 4;
     };
 };
 export declare const tablet: {
@@ -46,11 +49,14 @@ export declare const tablet: {
         readonly margin: 32;
     };
     readonly spacing: {
-        readonly lg: 24;
-        readonly md: 16;
-        readonly sm: 12;
-        readonly xl: 28;
-        readonly xs: 8;
+        readonly '2xl': 28;
+        readonly '2xs': 2;
+        readonly lg: 16;
+        readonly md: 12;
+        readonly none: 0;
+        readonly sm: 8;
+        readonly xl: 24;
+        readonly xs: 4;
     };
 };
 export declare const desktop: {
@@ -72,11 +78,14 @@ export declare const desktop: {
         readonly margin: 32;
     };
     readonly spacing: {
-        readonly lg: 24;
-        readonly md: 16;
-        readonly sm: 12;
-        readonly xl: 40;
-        readonly xs: 8;
+        readonly '2xl': 40;
+        readonly '2xs': 2;
+        readonly lg: 16;
+        readonly md: 12;
+        readonly none: 0;
+        readonly sm: 8;
+        readonly xl: 24;
+        readonly xs: 4;
     };
 };
 declare const layout: {
@@ -99,11 +108,14 @@ declare const layout: {
             readonly margin: 16;
         };
         readonly spacing: {
-            readonly lg: 20;
-            readonly md: 16;
-            readonly sm: 12;
-            readonly xl: 28;
-            readonly xs: 8;
+            readonly '2xl': 28;
+            readonly '2xs': 2;
+            readonly lg: 16;
+            readonly md: 12;
+            readonly none: 0;
+            readonly sm: 8;
+            readonly xl: 20;
+            readonly xs: 4;
         };
     };
     readonly tablet: {
@@ -125,11 +137,14 @@ declare const layout: {
             readonly margin: 32;
         };
         readonly spacing: {
-            readonly lg: 24;
-            readonly md: 16;
-            readonly sm: 12;
-            readonly xl: 28;
-            readonly xs: 8;
+            readonly '2xl': 28;
+            readonly '2xs': 2;
+            readonly lg: 16;
+            readonly md: 12;
+            readonly none: 0;
+            readonly sm: 8;
+            readonly xl: 24;
+            readonly xs: 4;
         };
     };
     readonly desktop: {
@@ -151,11 +166,14 @@ declare const layout: {
             readonly margin: 32;
         };
         readonly spacing: {
-            readonly lg: 24;
-            readonly md: 16;
-            readonly sm: 12;
-            readonly xl: 40;
-            readonly xs: 8;
+            readonly '2xl': 40;
+            readonly '2xs': 2;
+            readonly lg: 16;
+            readonly md: 12;
+            readonly none: 0;
+            readonly sm: 8;
+            readonly xl: 24;
+            readonly xs: 4;
         };
     };
 };

package/build/tokens/layout.js

@@ -20,11 +20,14 @@ export const mobile = {
         margin: 16,
     },
     spacing: {
-        lg: 20,
-        md: 16,
-        sm: 12,
-        xl: 28,
-        xs: 8,
+        '2xl': 28,
+        '2xs': 2,
+        lg: 16,
+        md: 12,
+        none: 0,
+        sm: 8,
+        xl: 20,
+        xs: 4,
     },
 };
 export const tablet = {
@@ -46,11 +49,14 @@ export const tablet = {
         margin: 32,
     },
     spacing: {
-        lg: 24,
-        md: 16,
-        sm: 12,
-        xl: 28,
-        xs: 8,
+        '2xl': 28,
+        '2xs': 2,
+        lg: 16,
+        md: 12,
+        none: 0,
+        sm: 8,
+        xl: 24,
+        xs: 4,
     },
 };
 export const desktop = {
@@ -72,11 +78,14 @@ export const desktop = {
         margin: 32,
     },
     spacing: {
-        lg: 24,
-        md: 16,
-        sm: 12,
-        xl: 40,
-        xs: 8,
+        '2xl': 40,
+        '2xs': 2,
+        lg: 16,
+        md: 12,
+        none: 0,
+        sm: 8,
+        xl: 24,
+        xs: 4,
     },
 };
 const layout = { mobile, tablet, desktop };

package/build/tokens/semantic-dark.d.ts

@@ -15,56 +15,56 @@ declare const _default: {
         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";
             };
         };
     };
@@ -136,14 +136,14 @@ declare const _default: {
         };
         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: {
@@ -155,8 +155,8 @@ declare const _default: {
                     readonly active: "#4c4c4c";
                     readonly hover: "#3a3837";
                     readonly inverted: {
-                        readonly active: "#d3d3d3";
-                        readonly hover: "#ebebeb";
+                        readonly active: "#3a3837";
+                        readonly hover: "#3f3f3f";
                     };
                 };
             };
@@ -244,6 +244,8 @@ declare const _default: {
         };
     };
     readonly text: {
+        readonly affirmative: "#58ca93";
+        readonly brand: "#af90de";
         readonly inverted: "#191917";
         readonly primary: "#ebebeb";
         readonly secondary: "#b2afae";