@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/tokens/color.d.ts

@@ -78,17 +78,17 @@ export declare const green: {
 };
 export declare const grey: {
     readonly '0': "#ffffff";
-    readonly '50': "#f6f5f5";
-    readonly '100': "#e7e6e6";
-    readonly '200': "#d1d0d0";
+    readonly '50': "#f7f7f7";
+    readonly '100': "#ebebeb";
+    readonly '200': "#d3d3d3";
     readonly '300': "#b2afae";
-    readonly '400': "#8a8686";
-    readonly '500': "#6f6c6b";
-    readonly '600': "#5f5c5b";
-    readonly '700': "#555352";
-    readonly '800': "#464444";
-    readonly '900': "#3e3c3b";
-    readonly '950': "#222222";
+    readonly '400': "#919191";
+    readonly '500': "#888888";
+    readonly '600': "#5b5b5b";
+    readonly '700': "#4c4c4c";
+    readonly '800': "#3f3f3f";
+    readonly '900': "#3a3837";
+    readonly '950': "#232323";
     readonly '975': "#191919";
     readonly '1000': "#101010";
 };
@@ -156,16 +156,16 @@ export declare const piggyPink: {
 export declare const purple: {
     readonly '0': "#f7f6f9";
     readonly '50': "#eeebf4";
-    readonly '100': "#e6dff1";
-    readonly '200': "#ddd2ef";
-    readonly '300': "#d5c3ee";
-    readonly '400': "#a782db";
-    readonly '500': "#926fd1";
-    readonly '600': "#8850cf";
+    readonly '100': "#ddd5eb";
+    readonly '200': "#c6b5e2";
+    readonly '300': "#af90de";
+    readonly '400': "#996cda";
+    readonly '500': "#8851d6";
+    readonly '600': "#8149ce";
     readonly '700': "#7a42c8";
-    readonly '800': "#6538b8";
-    readonly '900': "#5a3285";
-    readonly '950': "#492d6f";
+    readonly '800': "#5c2ca9";
+    readonly '900': "#442484";
+    readonly '950': "#331c68";
     readonly '1000': "#26164f";
 };
 export declare const red: {
@@ -215,35 +215,493 @@ export declare const yellow: {
     readonly '1000': "#4c401f";
 };
 export declare const light: {
-    readonly background: "#fcfbf2";
-    readonly background1: "#ffffff";
-    readonly backgroundPurple: "#7a42c8";
-    readonly invalidText: "#de2612";
+    readonly background: {
+        readonly brand: "#7a42c8";
+        readonly primary: "#fcfbf2";
+        readonly secondary: "#ffffff";
+    };
+    readonly border: {
+        readonly strong: "#101010";
+        readonly subtle: "#d4d2c0";
+    };
+    readonly feedback: {
+        readonly danger: {
+            readonly border: "#de2612";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#de2612";
+            };
+            readonly surface: {
+                readonly default: "#de2612";
+                readonly subtle: "#ffccc5";
+            };
+        };
+        readonly functional: {
+            readonly border: "#888888";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#888888";
+            };
+            readonly surface: {
+                readonly default: "#888888";
+                readonly subtle: "#d3d3d3";
+            };
+        };
+        readonly info: {
+            readonly border: "#1c6cd4";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#1c6cd4";
+            };
+            readonly surface: {
+                readonly default: "#1c6cd4";
+                readonly subtle: "#bcddff";
+            };
+        };
+        readonly positive: {
+            readonly border: "#0f834a";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#0f834a";
+            };
+            readonly surface: {
+                readonly default: "#0f834a";
+                readonly subtle: "#a2e2c3";
+            };
+        };
+        readonly warning: {
+            readonly border: "#be5400";
+            readonly foreground: {
+                readonly default: "#fcfbf2";
+                readonly subtle: "#be5400";
+            };
+            readonly surface: {
+                readonly default: "#be5400";
+                readonly subtle: "#ffcca8";
+            };
+        };
+    };
+    readonly focus: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+    };
+    readonly icon: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+    };
+    readonly interactive: {
+        readonly affirmative: {
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#04663a";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#04663a";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#074b2a";
+                    readonly default: "#0f834a";
+                    readonly hover: "#04663a";
+                };
+                readonly subtle: {
+                    readonly active: "#c5edda";
+                    readonly hover: "#e7f9f0";
+                };
+            };
+        };
+        readonly brand: {
+            readonly border: {
+                readonly strong: "#101010";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#442484";
+                    readonly default: "#7a42c8";
+                    readonly hover: "#5c2ca9";
+                };
+            };
+        };
+        readonly destructive: {
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#a4281e";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#a4281e";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#6b1f1a";
+                    readonly default: "#de2612";
+                    readonly hover: "#a4281e";
+                };
+                readonly subtle: {
+                    readonly active: "#ffe3df";
+                    readonly hover: "#fff3f1";
+                };
+            };
+        };
+        readonly functional: {
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#101010";
+                readonly inverted: "#f7f7f7";
+            };
+            readonly foreground: {
+                readonly strong: "#fcfbf2";
+                readonly subtle: "#101010";
+                readonly inverted: "#f7f7f7";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#4c4c4c";
+                    readonly default: "#888888";
+                    readonly hover: "#5b5b5b";
+                };
+                readonly subtle: {
+                    readonly active: "#d3d3d3";
+                    readonly hover: "#ebebeb";
+                    readonly inverted: {
+                        readonly active: "#3a3837";
+                        readonly hover: "#3f3f3f";
+                    };
+                };
+            };
+        };
+        readonly highlight: {
+            readonly border: {
+                readonly strong: "#101010";
+            };
+            readonly foreground: {
+                readonly strong: "#101010";
+            };
+            readonly surface: {
+                readonly strong: {
+                    readonly active: "#d1950b";
+                    readonly default: "#ffb921";
+                    readonly hover: "#eba400";
+                };
+            };
+        };
+        readonly neutral: {
+            readonly border: {
+                readonly subtle: "#101010";
+            };
+            readonly foreground: {
+                readonly subtle: "#101010";
+            };
+            readonly surface: {
+                readonly subtle: {
+                    readonly active: "#f1efe4";
+                    readonly hover: "#f7f6eb";
+                };
+            };
+        };
+    };
     readonly shadow: {
-        readonly broadbandGreenColor: "#8cba3b";
-        readonly cashbackLilacColor: "#be7aeb";
-        readonly defaultColor: "#101010";
-        readonly energyBlueColor: "#6db5c3";
-        readonly insuranceOrangeColor: "#ff7b00";
-        readonly mobileRoseColor: "#ee6dbb";
-        readonly piggyPinkColor: "#f295ff";
-        readonly purpleColor: "#7a42c8";
+        readonly brand: "#7a42c8";
+        readonly broadband: "#8cba3b";
+        readonly cashback: "#be7aeb";
+        readonly default: "#101010";
+        readonly energy: "#6db5c3";
+        readonly insurance: "#ff7b00";
+        readonly mobile: "#ee6dbb";
+        readonly pig: "#f295ff";
+    };
+    readonly surface: {
+        readonly brand: {
+            readonly default: "#7a42c8";
+            readonly strong: "#26164f";
+            readonly subtle: "#af90de";
+        };
+        readonly broadband: {
+            readonly default: "#8cba3b";
+            readonly subtle: "#d2e6b0";
+        };
+        readonly cashback: {
+            readonly default: "#be7aeb";
+            readonly subtle: "#dfbdf5";
+        };
+        readonly energy: {
+            readonly default: "#6db5c3";
+            readonly subtle: "#bddee4";
+        };
+        readonly highlight: {
+            readonly default: "#ffb921";
+            readonly subtle: "#ffd885";
+        };
+        readonly insurance: {
+            readonly default: "#ff7b00";
+            readonly subtle: "#ffb46d";
+        };
+        readonly mobile: {
+            readonly default: "#ee6dbb";
+            readonly subtle: "#fad0e9";
+        };
+        readonly neutral: {
+            readonly strong: "#ffffff";
+            readonly subtle: "#fcfbf2";
+        };
+        readonly pig: {
+            readonly default: "#f295ff";
+            readonly subtle: "#f9ceff";
+        };
+    };
+    readonly text: {
+        readonly inverted: "#fcfbf2";
+        readonly primary: "#101010";
+        readonly secondary: "#888888";
     };
 };
 export declare const dark: {
-    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 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";
     };
 };
 declare const color: {
@@ -324,17 +782,17 @@ declare const color: {
     };
     readonly grey: {
         readonly '0': "#ffffff";
-        readonly '50': "#f6f5f5";
-        readonly '100': "#e7e6e6";
-        readonly '200': "#d1d0d0";
+        readonly '50': "#f7f7f7";
+        readonly '100': "#ebebeb";
+        readonly '200': "#d3d3d3";
         readonly '300': "#b2afae";
-        readonly '400': "#8a8686";
-        readonly '500': "#6f6c6b";
-        readonly '600': "#5f5c5b";
-        readonly '700': "#555352";
-        readonly '800': "#464444";
-        readonly '900': "#3e3c3b";
-        readonly '950': "#222222";
+        readonly '400': "#919191";
+        readonly '500': "#888888";
+        readonly '600': "#5b5b5b";
+        readonly '700': "#4c4c4c";
+        readonly '800': "#3f3f3f";
+        readonly '900': "#3a3837";
+        readonly '950': "#232323";
         readonly '975': "#191919";
         readonly '1000': "#101010";
     };
@@ -402,16 +860,16 @@ declare const color: {
     readonly purple: {
         readonly '0': "#f7f6f9";
         readonly '50': "#eeebf4";
-        readonly '100': "#e6dff1";
-        readonly '200': "#ddd2ef";
-        readonly '300': "#d5c3ee";
-        readonly '400': "#a782db";
-        readonly '500': "#926fd1";
-        readonly '600': "#8850cf";
+        readonly '100': "#ddd5eb";
+        readonly '200': "#c6b5e2";
+        readonly '300': "#af90de";
+        readonly '400': "#996cda";
+        readonly '500': "#8851d6";
+        readonly '600': "#8149ce";
         readonly '700': "#7a42c8";
-        readonly '800': "#6538b8";
-        readonly '900': "#5a3285";
-        readonly '950': "#492d6f";
+        readonly '800': "#5c2ca9";
+        readonly '900': "#442484";
+        readonly '950': "#331c68";
         readonly '1000': "#26164f";
     };
     readonly red: {
@@ -461,35 +919,493 @@ declare const color: {
         readonly '1000': "#4c401f";
     };
     readonly light: {
-        readonly background: "#fcfbf2";
-        readonly background1: "#ffffff";
-        readonly backgroundPurple: "#7a42c8";
-        readonly invalidText: "#de2612";
+        readonly background: {
+            readonly brand: "#7a42c8";
+            readonly primary: "#fcfbf2";
+            readonly secondary: "#ffffff";
+        };
+        readonly border: {
+            readonly strong: "#101010";
+            readonly subtle: "#d4d2c0";
+        };
+        readonly feedback: {
+            readonly danger: {
+                readonly border: "#de2612";
+                readonly foreground: {
+                    readonly default: "#fcfbf2";
+                    readonly subtle: "#de2612";
+                };
+                readonly surface: {
+                    readonly default: "#de2612";
+                    readonly subtle: "#ffccc5";
+                };
+            };
+            readonly functional: {
+                readonly border: "#888888";
+                readonly foreground: {
+                    readonly default: "#fcfbf2";
+                    readonly subtle: "#888888";
+                };
+                readonly surface: {
+                    readonly default: "#888888";
+                    readonly subtle: "#d3d3d3";
+                };
+            };
+            readonly info: {
+                readonly border: "#1c6cd4";
+                readonly foreground: {
+                    readonly default: "#fcfbf2";
+                    readonly subtle: "#1c6cd4";
+                };
+                readonly surface: {
+                    readonly default: "#1c6cd4";
+                    readonly subtle: "#bcddff";
+                };
+            };
+            readonly positive: {
+                readonly border: "#0f834a";
+                readonly foreground: {
+                    readonly default: "#fcfbf2";
+                    readonly subtle: "#0f834a";
+                };
+                readonly surface: {
+                    readonly default: "#0f834a";
+                    readonly subtle: "#a2e2c3";
+                };
+            };
+            readonly warning: {
+                readonly border: "#be5400";
+                readonly foreground: {
+                    readonly default: "#fcfbf2";
+                    readonly subtle: "#be5400";
+                };
+                readonly surface: {
+                    readonly default: "#be5400";
+                    readonly subtle: "#ffcca8";
+                };
+            };
+        };
+        readonly focus: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#101010";
+        };
+        readonly icon: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#101010";
+        };
+        readonly interactive: {
+            readonly affirmative: {
+                readonly border: {
+                    readonly strong: "#101010";
+                    readonly subtle: "#04663a";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#04663a";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#074b2a";
+                        readonly default: "#0f834a";
+                        readonly hover: "#04663a";
+                    };
+                    readonly subtle: {
+                        readonly active: "#c5edda";
+                        readonly hover: "#e7f9f0";
+                    };
+                };
+            };
+            readonly brand: {
+                readonly border: {
+                    readonly strong: "#101010";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#442484";
+                        readonly default: "#7a42c8";
+                        readonly hover: "#5c2ca9";
+                    };
+                };
+            };
+            readonly destructive: {
+                readonly border: {
+                    readonly strong: "#101010";
+                    readonly subtle: "#a4281e";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#a4281e";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#6b1f1a";
+                        readonly default: "#de2612";
+                        readonly hover: "#a4281e";
+                    };
+                    readonly subtle: {
+                        readonly active: "#ffe3df";
+                        readonly hover: "#fff3f1";
+                    };
+                };
+            };
+            readonly functional: {
+                readonly border: {
+                    readonly strong: "#101010";
+                    readonly subtle: "#101010";
+                    readonly inverted: "#f7f7f7";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#101010";
+                    readonly inverted: "#f7f7f7";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#4c4c4c";
+                        readonly default: "#888888";
+                        readonly hover: "#5b5b5b";
+                    };
+                    readonly subtle: {
+                        readonly active: "#d3d3d3";
+                        readonly hover: "#ebebeb";
+                        readonly inverted: {
+                            readonly active: "#3a3837";
+                            readonly hover: "#3f3f3f";
+                        };
+                    };
+                };
+            };
+            readonly highlight: {
+                readonly border: {
+                    readonly strong: "#101010";
+                };
+                readonly foreground: {
+                    readonly strong: "#101010";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#d1950b";
+                        readonly default: "#ffb921";
+                        readonly hover: "#eba400";
+                    };
+                };
+            };
+            readonly neutral: {
+                readonly border: {
+                    readonly subtle: "#101010";
+                };
+                readonly foreground: {
+                    readonly subtle: "#101010";
+                };
+                readonly surface: {
+                    readonly subtle: {
+                        readonly active: "#f1efe4";
+                        readonly hover: "#f7f6eb";
+                    };
+                };
+            };
+        };
         readonly shadow: {
-            readonly broadbandGreenColor: "#8cba3b";
-            readonly cashbackLilacColor: "#be7aeb";
-            readonly defaultColor: "#101010";
-            readonly energyBlueColor: "#6db5c3";
-            readonly insuranceOrangeColor: "#ff7b00";
-            readonly mobileRoseColor: "#ee6dbb";
-            readonly piggyPinkColor: "#f295ff";
-            readonly purpleColor: "#7a42c8";
+            readonly brand: "#7a42c8";
+            readonly broadband: "#8cba3b";
+            readonly cashback: "#be7aeb";
+            readonly default: "#101010";
+            readonly energy: "#6db5c3";
+            readonly insurance: "#ff7b00";
+            readonly mobile: "#ee6dbb";
+            readonly pig: "#f295ff";
+        };
+        readonly surface: {
+            readonly brand: {
+                readonly default: "#7a42c8";
+                readonly strong: "#26164f";
+                readonly subtle: "#af90de";
+            };
+            readonly broadband: {
+                readonly default: "#8cba3b";
+                readonly subtle: "#d2e6b0";
+            };
+            readonly cashback: {
+                readonly default: "#be7aeb";
+                readonly subtle: "#dfbdf5";
+            };
+            readonly energy: {
+                readonly default: "#6db5c3";
+                readonly subtle: "#bddee4";
+            };
+            readonly highlight: {
+                readonly default: "#ffb921";
+                readonly subtle: "#ffd885";
+            };
+            readonly insurance: {
+                readonly default: "#ff7b00";
+                readonly subtle: "#ffb46d";
+            };
+            readonly mobile: {
+                readonly default: "#ee6dbb";
+                readonly subtle: "#fad0e9";
+            };
+            readonly neutral: {
+                readonly strong: "#ffffff";
+                readonly subtle: "#fcfbf2";
+            };
+            readonly pig: {
+                readonly default: "#f295ff";
+                readonly subtle: "#f9ceff";
+            };
+        };
+        readonly text: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#101010";
+            readonly secondary: "#888888";
         };
     };
     readonly dark: {
-        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 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";
         };
     };
 };