@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly divider: {
+        readonly borderWidth: 2;
+        readonly color: "#101010";
+    };
+    readonly gap: 12;
+    readonly item: {
+        readonly gap: 6;
+        readonly selected: {
+            readonly borderBottomRadius: 0;
+            readonly borderTopRadius: 4;
+        };
+    };
+    readonly lg: {
+        readonly height: 64;
+    };
+    readonly md: {
+        readonly height: 56;
+    };
+};
+export default _default;

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

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    divider: {
+        borderWidth: 2,
+        color: '#101010',
+    },
+    gap: 12,
+    item: {
+        gap: 6,
+        selected: {
+            borderBottomRadius: 0,
+            borderTopRadius: 4,
+        },
+    },
+    lg: {
+        height: 64,
+    },
+    md: {
+        height: 56,
+    },
+};

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly backgroundColor: "#101010";
+    readonly borderRadius: 8;
+    readonly gapHorizontal: 8;
+    readonly padding: 14;
+};
+export default _default;

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

@@ -0,0 +1,9 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    backgroundColor: '#101010',
+    borderRadius: 8,
+    gapHorizontal: 8,
+    padding: 14,
+};

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

@@ -2,23 +2,12 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly backgroundColorActive: "#f1efe4";
-    readonly backgroundColorHover: "#f7f6eb";
-    readonly borderColor: "#101010";
     readonly borderRadius: 8;
     readonly borderWidth: 2;
-    readonly foregroundColor: "#101010";
     readonly gap: 6;
     readonly height: 48;
     readonly minWidth: 80;
     readonly paddingHorizontal: 20;
     readonly paddingVertical: 12;
-    readonly selected: {
-        readonly backgroundColor: "#7a42c8";
-        readonly backgroundColorActive: "#5a3285";
-        readonly backgroundColorHover: "#6538b8";
-        readonly borderColor: "#101010";
-        readonly foregroundColor: "#fcfbf2";
-    };
 };
 export default _default;

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

@@ -2,22 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    backgroundColorActive: '#f1efe4',
-    backgroundColorHover: '#f7f6eb',
-    borderColor: '#101010',
     borderRadius: 8,
     borderWidth: 2,
-    foregroundColor: '#101010',
     gap: 6,
     height: 48,
     minWidth: 80,
     paddingHorizontal: 20,
     paddingVertical: 12,
-    selected: {
-        backgroundColor: '#7a42c8',
-        backgroundColorActive: '#5a3285',
-        backgroundColorHover: '#6538b8',
-        borderColor: '#101010',
-        foregroundColor: '#fcfbf2',
-    },
 };

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    readonly backgroundColor: "#101010";
+    readonly borderRadius: 8;
+    readonly gapHorizontal: 8;
+    readonly gapVertical: 2;
+    readonly paddingHorizontal: 12;
+    readonly paddingVertical: 8;
+};
+export default _default;

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

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export default {
+    backgroundColor: '#101010',
+    borderRadius: 8,
+    gapHorizontal: 8,
+    gapVertical: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+};

package/build/tokens/components/light/top-navigation.d.ts

@@ -2,14 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly emphasis: {
-        readonly backgroundColor: "#7a42c8";
-    };
     readonly gap: 0;
     readonly largeTitle: {
-        readonly gap: 2;
         readonly paddingBottom: 16;
-        readonly paddingHorizontal: 16;
         readonly paddingTop: 0;
     };
     readonly navigationBar: {
@@ -19,8 +14,5 @@ declare const _default: {
     };
     readonly paddingHorizontal: 0;
     readonly paddingVertical: 0;
-    readonly subtle: {
-        readonly backgroundColor: "#fcfbf2";
-    };
 };
 export default _default;

package/build/tokens/components/light/top-navigation.js

@@ -2,14 +2,9 @@
  * Do not edit directly, this file was auto-generated.
  */
 export default {
-    emphasis: {
-        backgroundColor: '#7a42c8',
-    },
     gap: 0,
     largeTitle: {
-        gap: 2,
         paddingBottom: 16,
-        paddingHorizontal: 16,
         paddingTop: 0,
     },
     navigationBar: {
@@ -19,7 +14,4 @@ export default {
     },
     paddingHorizontal: 0,
     paddingVertical: 0,
-    subtle: {
-        backgroundColor: '#fcfbf2',
-    },
 };

package/build/tokens/index.d.ts

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export { default as color } from './color';
+export { default as semantic } from './semantic';
 export { default as semanticLight } from './semantic-light';
 export { default as semanticDark } from './semantic-dark';
 export { default as layout } from './layout';

package/build/tokens/index.js

@@ -2,6 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 export { default as color } from './color';
+export { default as semantic } from './semantic';
 export { default as semanticLight } from './semantic-light';
 export { default as semanticDark } from './semantic-dark';
 export { default as layout } from './layout';

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

@@ -2,24 +2,251 @@
  * Do not edit directly, this file was auto-generated.
  */
 declare const _default: {
-    readonly color: {
-        readonly background: "#191917";
-        readonly background1: "#222222";
-        readonly backgroundPurple: "#7a42c8";
-        readonly invalidText: "#ff7964";
+    readonly background: {
+        readonly brand: "#996cda";
+        readonly primary: "#191917";
+        readonly secondary: "#232323";
+    };
+    readonly border: {
+        readonly strong: "#ebebeb";
+        readonly subtle: "#4c473d";
+    };
+    readonly feedback: {
+        readonly danger: {
+            readonly border: "#ff7964";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#ff7964";
+            };
+            readonly surface: {
+                readonly default: "#de2612";
+                readonly subtle: "#521a16";
+            };
+        };
+        readonly functional: {
+            readonly border: "#b2afae";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#b2afae";
+            };
+            readonly surface: {
+                readonly default: "#888888";
+                readonly subtle: "#232323";
+            };
+        };
+        readonly info: {
+            readonly border: "#6bb0ff";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#6bb0ff";
+            };
+            readonly surface: {
+                readonly default: "#1c6cd4";
+                readonly subtle: "#042455";
+            };
+        };
+        readonly positive: {
+            readonly border: "#58ca93";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#58ca93";
+            };
+            readonly surface: {
+                readonly default: "#0f834a";
+                readonly subtle: "#033d21";
+            };
+        };
+        readonly warning: {
+            readonly border: "#ff9639";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#ff9639";
+            };
+            readonly surface: {
+                readonly default: "#cb5b00";
+                readonly subtle: "#6b2d00";
+            };
+        };
+    };
+    readonly focus: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#ebebeb";
+    };
+    readonly icon: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#ebebeb";
+    };
+    readonly interactive: {
+        readonly affirmative: {
+            readonly border: {
+                readonly strong: "#ebebeb";
+                readonly subtle: "#58ca93";
+            };
+            readonly foreground: {
+                readonly strong: "#191917";
+                readonly subtle: "#58ca93";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#58ca93";
+                    readonly default: "#19a660";
+                    readonly hover: "#36bf7d";
+                };
+                readonly subtle: {
+                    readonly active: "#033d21";
+                    readonly hover: "#002e18";
+                };
+            };
+        };
+        readonly brand: {
+            readonly border: {
+                readonly strong: "#ebebeb";
+            };
+            readonly foreground: {
+                readonly strong: "#191917";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#c6b5e2";
+                    readonly default: "#996cda";
+                    readonly hover: "#af90de";
+                };
+            };
+        };
+        readonly destructive: {
+            readonly border: {
+                readonly strong: "#ebebeb";
+                readonly subtle: "#ff7964";
+            };
+            readonly foreground: {
+                readonly strong: "#191917";
+                readonly subtle: "#ff7964";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#ff7964";
+                    readonly default: "#f4412a";
+                    readonly hover: "#ff634a";
+                };
+                readonly subtle: {
+                    readonly active: "#521a16";
+                    readonly hover: "#3b1512";
+                };
+            };
+        };
+        readonly functional: {
+            readonly border: {
+                readonly strong: "#ebebeb";
+                readonly subtle: "#ebebeb";
+                readonly inverted: "#f7f7f7";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#ebebeb";
+                readonly inverted: "#f7f7f7";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#d3d3d3";
+                    readonly default: "#919191";
+                    readonly hover: "#b2afae";
+                };
+                readonly subtle: {
+                    readonly active: "#4c4c4c";
+                    readonly hover: "#3a3837";
+                    readonly inverted: {
+                        readonly active: "#d3d3d3";
+                        readonly hover: "#ebebeb";
+                    };
+                };
+            };
+        };
+        readonly highlight: {
+            readonly border: {
+                readonly strong: "#f7f7f7";
+            };
+            readonly foreground: {
+                readonly strong: "#101010";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#ffd885";
+                    readonly default: "#ffb921";
+                    readonly hover: "#ffc852";
+                };
+            };
+        };
+        readonly neutral: {
+            readonly border: {
+                readonly subtle: "#ebebeb";
+            };
+            readonly foreground: {
+                readonly subtle: "#ebebeb";
+            };
+            readonly surface: {
+                readonly subtle: {
+                    readonly active: "#30302c";
+                    readonly hover: "#282825";
+                };
+            };
+        };
     };
     readonly opacity: {
         readonly disabled: 50;
     };
     readonly shadow: {
-        readonly broadbandGreenColor: "#506c21";
-        readonly cashbackLilacColor: "#8b2bc9";
-        readonly defaultColor: "#e7e6e6";
-        readonly energyBlueColor: "#326e7a";
-        readonly insuranceOrangeColor: "#9b4c0e";
-        readonly mobileRoseColor: "#a7266d";
-        readonly piggyPinkColor: "#8f358f";
-        readonly purpleColor: "#7a42c8";
+        readonly brand: "#7a42c8";
+        readonly broadband: "#506c21";
+        readonly cashback: "#8b2bc9";
+        readonly default: "#f7f7f7";
+        readonly energy: "#326e7a";
+        readonly insurance: "#9b4c0e";
+        readonly mobile: "#a7266d";
+        readonly pig: "#8f358f";
+    };
+    readonly surface: {
+        readonly brand: {
+            readonly default: "#996cda";
+            readonly strong: "#26164f";
+            readonly subtle: "#442484";
+        };
+        readonly broadband: {
+            readonly default: "#506c21";
+            readonly subtle: "#35421c";
+        };
+        readonly cashback: {
+            readonly default: "#8b2bc9";
+            readonly subtle: "#522270";
+        };
+        readonly energy: {
+            readonly default: "#326e7a";
+            readonly subtle: "#254348";
+        };
+        readonly highlight: {
+            readonly default: "#ffb921";
+            readonly subtle: "#756230";
+        };
+        readonly insurance: {
+            readonly default: "#9b4c0e";
+            readonly subtle: "#5a3213";
+        };
+        readonly mobile: {
+            readonly default: "#a7266d";
+            readonly subtle: "#601f42";
+        };
+        readonly neutral: {
+            readonly strong: "#232323";
+            readonly subtle: "#191917";
+        };
+        readonly pig: {
+            readonly default: "#8f358f";
+            readonly subtle: "#5d2167";
+        };
+    };
+    readonly text: {
+        readonly inverted: "#191917";
+        readonly primary: "#ebebeb";
+        readonly secondary: "#b2afae";
     };
 };
 export default _default;