@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

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

@@ -2,24 +2,253 @@
  * 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: "#101010";
+                readonly subtle: "#ff7964";
+            };
+            readonly surface: {
+                readonly default: "#ff634a";
+                readonly subtle: "#ffa89d";
+            };
+        };
+        readonly functional: {
+            readonly border: "#b2afae";
+            readonly foreground: {
+                readonly default: "#101010";
+                readonly subtle: "#b2afae";
+            };
+            readonly surface: {
+                readonly default: "#919191";
+                readonly subtle: "#d3d3d3";
+            };
+        };
+        readonly info: {
+            readonly border: "#6bb0ff";
+            readonly foreground: {
+                readonly default: "#101010";
+                readonly subtle: "#6bb0ff";
+            };
+            readonly surface: {
+                readonly default: "#6bb0ff";
+                readonly subtle: "#bcddff";
+            };
+        };
+        readonly positive: {
+            readonly border: "#58ca93";
+            readonly foreground: {
+                readonly default: "#101010";
+                readonly subtle: "#58ca93";
+            };
+            readonly surface: {
+                readonly default: "#36bf7d";
+                readonly subtle: "#a2e2c3";
+            };
+        };
+        readonly warning: {
+            readonly border: "#ff9639";
+            readonly foreground: {
+                readonly default: "#101010";
+                readonly subtle: "#ff9639";
+            };
+            readonly surface: {
+                readonly default: "#ff8010";
+                readonly subtle: "#ffcca8";
+            };
+        };
+    };
+    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 inverted: "#f7f7f7";
+                readonly strong: "#ebebeb";
+                readonly subtle: "#ebebeb";
+            };
+            readonly foreground: {
+                readonly inverted: "#f7f7f7";
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#ebebeb";
+            };
+            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: "#3a3837";
+                        readonly hover: "#3f3f3f";
+                    };
+                };
+            };
+        };
+        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 affirmative: "#58ca93";
+        readonly brand: "#af90de";
+        readonly inverted: "#191917";
+        readonly primary: "#ebebeb";
+        readonly secondary: "#b2afae";
     };
 };
 export default _default;

package/build/tokens/semantic-dark.js

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