@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/core/themes.d.ts

@@ -552,7 +552,7 @@ export declare const lightTheme: {
         readonly variants: {
             readonly hardShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: -2;
                         readonly height: 2;
@@ -562,7 +562,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -572,7 +572,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 2;
                         readonly height: 2;
@@ -582,7 +582,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: -3;
@@ -592,7 +592,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '5': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -604,7 +604,7 @@ export declare const lightTheme: {
             };
             readonly softShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -612,13 +612,13 @@ export declare const lightTheme: {
                     readonly shadowRadius: 10;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 5;
                         readonly shadowOpacity: 0.05;
                     };
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -627,13 +627,13 @@ export declare const lightTheme: {
                     readonly elevation: 3;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 10;
                         readonly shadowOpacity: 0.1;
                     };
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -642,13 +642,13 @@ export declare const lightTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 4;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 15;
                         readonly shadowOpacity: 0.15;
                     };
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -657,7 +657,7 @@ export declare const lightTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 10;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 20;
                         readonly shadowOpacity: 0.2;
                     };
@@ -709,19 +709,248 @@ export declare const lightTheme: {
     readonly color: {
         readonly white: "#ffffff";
         readonly black: "#000000";
-        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 blue: {
             readonly '0': "#f8fbff";
@@ -800,17 +1029,17 @@ export declare const lightTheme: {
         };
         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";
         };
@@ -878,16 +1107,16 @@ export declare const lightTheme: {
         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: {
@@ -944,7 +1173,7 @@ export declare const darkTheme: {
         focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
-            outlineColor: "#e7e6e6";
+            outlineColor: "#ebebeb";
             outlineOffset: number;
         };
     };
@@ -1491,7 +1720,7 @@ export declare const darkTheme: {
         readonly variants: {
             readonly hardShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: -2;
                         readonly height: 2;
@@ -1501,7 +1730,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -1511,7 +1740,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 2;
                         readonly height: 2;
@@ -1521,7 +1750,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: -3;
@@ -1531,7 +1760,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '5': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -1543,7 +1772,7 @@ export declare const darkTheme: {
             };
             readonly softShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1551,13 +1780,13 @@ export declare const darkTheme: {
                     readonly shadowRadius: 10;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 5;
                         readonly shadowOpacity: 0.05;
                     };
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1566,13 +1795,13 @@ export declare const darkTheme: {
                     readonly elevation: 3;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 10;
                         readonly shadowOpacity: 0.1;
                     };
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1581,13 +1810,13 @@ export declare const darkTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 4;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 15;
                         readonly shadowOpacity: 0.15;
                     };
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1596,7 +1825,7 @@ export declare const darkTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 10;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 20;
                         readonly shadowOpacity: 0.2;
                     };
@@ -1648,19 +1877,248 @@ export declare const darkTheme: {
     readonly color: {
         readonly white: "#ffffff";
         readonly black: "#000000";
-        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";
         };
         readonly blue: {
             readonly '0': "#f8fbff";
@@ -1739,17 +2197,17 @@ export declare const darkTheme: {
         };
         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";
         };
@@ -1817,16 +2275,16 @@ export declare const darkTheme: {
         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: {
@@ -2431,7 +2889,7 @@ export declare const themes: {
             readonly variants: {
                 readonly hardShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: -2;
                             readonly height: 2;
@@ -2441,7 +2899,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -2451,7 +2909,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 2;
                             readonly height: 2;
@@ -2461,7 +2919,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: -3;
@@ -2471,7 +2929,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '5': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -2483,7 +2941,7 @@ export declare const themes: {
                 };
                 readonly softShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2491,13 +2949,13 @@ export declare const themes: {
                         readonly shadowRadius: 10;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 5;
                             readonly shadowOpacity: 0.05;
                         };
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2506,13 +2964,13 @@ export declare const themes: {
                         readonly elevation: 3;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 10;
                             readonly shadowOpacity: 0.1;
                         };
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2521,13 +2979,13 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 4;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 15;
                             readonly shadowOpacity: 0.15;
                         };
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2536,7 +2994,7 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 10;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 20;
                             readonly shadowOpacity: 0.2;
                         };
@@ -2588,19 +3046,248 @@ export declare const themes: {
         readonly color: {
             readonly white: "#ffffff";
             readonly black: "#000000";
-            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 blue: {
                 readonly '0': "#f8fbff";
@@ -2679,17 +3366,17 @@ export declare const themes: {
             };
             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";
             };
@@ -2757,16 +3444,16 @@ export declare const themes: {
             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: {
@@ -2823,7 +3510,7 @@ export declare const themes: {
             focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;
-                outlineColor: "#e7e6e6";
+                outlineColor: "#ebebeb";
                 outlineOffset: number;
             };
         };
@@ -3370,7 +4057,7 @@ export declare const themes: {
             readonly variants: {
                 readonly hardShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: -2;
                             readonly height: 2;
@@ -3380,7 +4067,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -3390,7 +4077,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 2;
                             readonly height: 2;
@@ -3400,7 +4087,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: -3;
@@ -3410,7 +4097,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '5': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -3422,7 +4109,7 @@ export declare const themes: {
                 };
                 readonly softShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3430,13 +4117,13 @@ export declare const themes: {
                         readonly shadowRadius: 10;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 5;
                             readonly shadowOpacity: 0.05;
                         };
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3445,13 +4132,13 @@ export declare const themes: {
                         readonly elevation: 3;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 10;
                             readonly shadowOpacity: 0.1;
                         };
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3460,13 +4147,13 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 4;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 15;
                             readonly shadowOpacity: 0.15;
                         };
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3475,7 +4162,7 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 10;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 20;
                             readonly shadowOpacity: 0.2;
                         };
@@ -3527,19 +4214,248 @@ export declare const themes: {
         readonly color: {
             readonly white: "#ffffff";
             readonly black: "#000000";
-            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";
             };
             readonly blue: {
                 readonly '0': "#f8fbff";
@@ -3618,17 +4534,17 @@ export declare const themes: {
             };
             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";
             };
@@ -3696,16 +4612,16 @@ export declare const themes: {
             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: {