@utilitywarehouse/hearth-react-native 0.2.0 → 0.3.1

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

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

@@ -5,7 +5,20 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
     readonly contentGap: 4;
+    readonly focus: "#101010";
     readonly gap: 8;
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly padding: 14;
 };
 export default _default;

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

@@ -5,6 +5,19 @@ export default {
     borderRadius: 8,
     borderWidth: 2,
     contentGap: 4,
+    focus: '#101010',
     gap: 8,
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     padding: 14,
 };

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

@@ -6,12 +6,15 @@ declare const _default: {
     readonly borderWidth: 2;
     readonly checked: {
         readonly backgroundColor: "#ebebeb";
+        readonly icon: {
+            readonly color: "#101010";
+        };
     };
     readonly gap: 8;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#4c473d";

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

@@ -6,12 +6,15 @@ export default {
     borderWidth: 2,
     checked: {
         backgroundColor: '#ebebeb',
+        icon: {
+            color: '#101010',
+        },
     },
     gap: 8,
     group: {
         gap: 16,
         stack: {
-            gap: 32,
+            gap: 20,
         },
     },
     outlineColorActive: '#4c473d',

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

@@ -2,6 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
     readonly borderRadius: 8;
     readonly md: {
         readonly height: 48;
@@ -20,9 +27,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

@@ -2,6 +2,13 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
     borderRadius: 8,
     md: {
         height: 48,
@@ -20,9 +27,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/index.d.ts

@@ -33,6 +33,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
+export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
 export { default as sectionHeader } from './section-header';

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

@@ -33,6 +33,7 @@ export { default as overlay } from './overlay';
 export { default as pagination } from './pagination';
 export { default as parts } from './parts';
 export { default as pill } from './pill';
+export { default as progressBar } from './progress-bar';
 export { default as progressStepper } from './progress-stepper';
 export { default as radio } from './radio';
 export { default as sectionHeader } from './section-header';

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly color: "#ebebeb";
     readonly colorActive: "#b2afae";
     readonly colorHover: "#d3d3d3";

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

@@ -2,6 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     color: '#ebebeb',
     colorActive: '#b2afae',
     colorHover: '#d3d3d3',

package/build/tokens/components/dark/progress-bar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly barColor: "#4c473d";
+    readonly circular: {
+        readonly md: {
+            readonly bar: {
+                readonly width: 12;
+            };
+            readonly gap: 0;
+            readonly height: 140;
+            readonly label: {
+                readonly fontFamily: "DM Sans";
+                readonly fontSize: 24;
+                readonly fontWeight: 400;
+                readonly lineHeight: 24;
+            };
+        };
+        readonly sm: {
+            readonly barWidth: 8;
+            readonly height: 80;
+        };
+    };
+    readonly linear: {
+        readonly bar: {
+            readonly borderRadius: 9999;
+            readonly height: 12;
+        };
+        readonly gap: 8;
+        readonly label: {
+            readonly gap: 8;
+        };
+    };
+    readonly progress: {
+        readonly dangerColor: "#ff634a";
+        readonly defaultColor: "#c6b5e2";
+        readonly successColor: "#36bf7d";
+    };
+};
+export default _default;

package/build/tokens/components/dark/progress-bar.js

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    barColor: '#4c473d',
+    circular: {
+        md: {
+            bar: {
+                width: 12,
+            },
+            gap: 0,
+            height: 140,
+            label: {
+                fontFamily: 'DM Sans',
+                fontSize: 24,
+                fontWeight: 400,
+                lineHeight: 24,
+            },
+        },
+        sm: {
+            barWidth: 8,
+            height: 80,
+        },
+    },
+    linear: {
+        bar: {
+            borderRadius: 9999,
+            height: 12,
+        },
+        gap: 8,
+        label: {
+            gap: 8,
+        },
+    },
+    progress: {
+        dangerColor: '#ff634a',
+        defaultColor: '#c6b5e2',
+        successColor: '#36bf7d',
+    },
+};

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/alert.d.ts

@@ -5,7 +5,20 @@ declare const _default: {
     readonly borderRadius: 8;
     readonly borderWidth: 2;
     readonly contentGap: 4;
+    readonly focus: "#101010";
     readonly gap: 8;
+    readonly iconButton: {
+        readonly unstyled: {
+            readonly foregroundColor: "#101010";
+            readonly foregroundColorActive: "#3f3f3f";
+            readonly foregroundColorHover: "#3a3837";
+        };
+    };
+    readonly link: {
+        readonly color: "#101010";
+        readonly colorActive: "#3f3f3f";
+        readonly colorHover: "#3a3837";
+    };
     readonly padding: 14;
 };
 export default _default;

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

@@ -5,6 +5,19 @@ export default {
     borderRadius: 8,
     borderWidth: 2,
     contentGap: 4,
+    focus: '#101010',
     gap: 8,
+    iconButton: {
+        unstyled: {
+            foregroundColor: '#101010',
+            foregroundColorActive: '#3f3f3f',
+            foregroundColorHover: '#3a3837',
+        },
+    },
+    link: {
+        color: '#101010',
+        colorActive: '#3f3f3f',
+        colorHover: '#3a3837',
+    },
     padding: 14,
 };

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

@@ -6,12 +6,15 @@ declare const _default: {
     readonly borderWidth: 2;
     readonly checked: {
         readonly backgroundColor: "#101010";
+        readonly icon: {
+            readonly color: "#fcfbf2";
+        };
     };
-    readonly gap: 8;
+    readonly gap: 12;
     readonly group: {
         readonly gap: 16;
         readonly stack: {
-            readonly gap: 32;
+            readonly gap: 20;
         };
     };
     readonly outlineColorActive: "#d4d2c0";
@@ -21,7 +24,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: {