@codecademy/gamut-styles 12.1.2-alpha.a809e8.0 → 12.1.2-alpha.da878e.0

package/dist/themes/platform.d.ts

@@ -0,0 +1,940 @@
+/**
+ * @description This is an extended theme for the learning environment with an expanded set of tokens
+ * That are not needed for the rest of the application.
+ */
+export declare const platformTheme: Record<"breakpoints", {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
+    readonly headerHeight: {
+        readonly base: "4rem";
+        readonly md: "5rem";
+    };
+    readonly headerZ: 15;
+}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<{
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fontSize: {
+        readonly 64: string;
+        readonly 44: string;
+        readonly 34: string;
+        readonly 26: string;
+        readonly 22: string;
+        readonly 20: string;
+        readonly 18: string;
+        readonly 16: string;
+        readonly 14: string;
+    };
+    fontFamily: {
+        readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
+        readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
+        readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
+        readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
+    };
+    lineHeight: {
+        readonly base: 1.5;
+        readonly title: 1.1;
+    };
+    fontWeight: {
+        readonly base: 400;
+        readonly title: 700;
+        readonly 700: 700;
+        readonly 400: 400;
+    };
+    spacing: {
+        readonly 0: 0;
+        readonly 4: string;
+        readonly 8: string;
+        readonly 12: string;
+        readonly 16: string;
+        readonly 24: string;
+        readonly 32: string;
+        readonly 40: string;
+        readonly 48: string;
+        readonly 64: string;
+        readonly 96: string;
+    };
+    elements: {
+        readonly headerHeight: {
+            readonly base: "4rem";
+            readonly md: "5rem";
+        };
+        readonly headerZ: 15;
+    };
+} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    readonly beige: "#FFF0E5";
+    readonly blue: "#1557FF";
+    readonly green: "#008A27";
+    readonly hyper: "#3A10E5";
+    readonly lightBlue: "#66C4FF";
+    readonly lightGreen: "#AEE938";
+    readonly navy: "#10162F";
+    readonly orange: "#FF8C00";
+    readonly paleBlue: "#F5FCFF";
+    readonly paleGreen: "#F5FFE3";
+    readonly palePink: "#FFF5FF";
+    readonly paleYellow: "#FFFAE5";
+    readonly pink: "#F966FF";
+    readonly paleRed: "#DC5879";
+    readonly red: "#E91C11";
+    readonly yellow: "#FFD300";
+    readonly black: "#000000";
+    readonly white: "#ffffff";
+    readonly "shadow-black-slight": string;
+    readonly "shadow-black-heavy": string;
+    readonly "shadow-white-slight": string;
+    readonly "shadow-white-heavy": string;
+    readonly "beige-100": "#FFF0E5";
+    readonly "blue-0": "#F5FCFF";
+    readonly "blue-300": "#66C4FF";
+    readonly "blue-400": "#3388FF";
+    readonly "blue-500": "#1557FF";
+    readonly "blue-800": "#1D2340";
+    readonly "navy-100": "#F3F3F5";
+    readonly "navy-300": "#C3C5CB";
+    readonly "navy-400": "#9FA2AC";
+    readonly "navy-500": "#707382";
+    readonly "navy-800": "#10162F";
+    readonly "navy-200": "#DBDCE0";
+    readonly "navy-600": "#585C6D";
+    readonly "navy-700": "#34394C";
+    readonly "navy-900": "#0A0D1C";
+    readonly "green-0": "#F5FFE3";
+    readonly "green-400": "#AEE938";
+    readonly "green-700": "#008A27";
+    readonly "yellow-0": "#FFFAE5";
+    readonly "yellow-400": "#CCA900";
+    readonly "yellow-500": "#FFD300";
+    readonly "pink-0": "#FFF5FF";
+    readonly "pink-400": "#F966FF";
+    readonly "red-100": "#DC5879";
+    readonly "red-0": "#E85D7F";
+    readonly "red-500": "#E91C11";
+    readonly "red-600": "#BE1809";
+    readonly "orange-500": "#FF8C00";
+    readonly "hyper-400": "#5533FF";
+    readonly "hyper-500": "#3A10E5";
+    readonly "gray-100": "#F5F5F5";
+    readonly "gray-300": "#E0E0E0";
+    readonly "gray-800": "#616161";
+    readonly "gray-200": "#EEEEEE";
+    readonly "gray-600": "#9E9E9E";
+    readonly "gray-900": "#424242";
+}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+    colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        text: {
+            _: "navy-800";
+            accent: "navy-900";
+            disabled: "navy-500";
+        };
+        feedback: {
+            error: "red-600";
+            success: "green-700";
+            warning: "yellow";
+        };
+        background: {
+            _: "white";
+            current: "white";
+            primary: "beige";
+            selected: "navy-100";
+            disabled: "navy-200";
+            hover: "navy-200";
+        };
+        shadow: {
+            opaque: "shadow-white-heavy";
+            solid: "gray-200";
+        };
+        primary: {
+            _: "hyper-500";
+            hover: "hyper-400";
+        };
+        secondary: {
+            _: "navy-800";
+            hover: "navy-700";
+        };
+        danger: {
+            _: "red-500";
+            hover: "red-600";
+        };
+        interface: {
+            _: "hyper-500";
+            hover: "hyper-400";
+        };
+    } | {
+        text: {
+            _: "white";
+            accent: "beige";
+            disabled: "navy-200";
+        };
+        feedback: {
+            error: "red-0";
+            success: "green-0";
+            warning: "yellow";
+        };
+        background: {
+            _: "navy-800";
+            current: "navy-800";
+            primary: "navy-900";
+            selected: "navy-700";
+            disabled: "navy-500";
+            hover: "navy-900";
+        };
+        shadow: {
+            opaque: "shadow-black-heavy";
+            solid: "black";
+        };
+        primary: {
+            _: "yellow-500";
+            hover: "yellow-400";
+        };
+        secondary: {
+            _: "white";
+            hover: "navy-200";
+        };
+        danger: {
+            _: "red-0";
+            hover: "red-100";
+        };
+        interface: {
+            _: "yellow-500";
+            hover: "yellow-400";
+        };
+    }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        readonly beige: "#FFF0E5";
+        readonly blue: "#1557FF";
+        readonly green: "#008A27";
+        readonly hyper: "#3A10E5";
+        readonly lightBlue: "#66C4FF";
+        readonly lightGreen: "#AEE938";
+        readonly navy: "#10162F";
+        readonly orange: "#FF8C00";
+        readonly paleBlue: "#F5FCFF";
+        readonly paleGreen: "#F5FFE3";
+        readonly palePink: "#FFF5FF";
+        readonly paleYellow: "#FFFAE5";
+        readonly pink: "#F966FF";
+        readonly paleRed: "#DC5879";
+        readonly red: "#E91C11";
+        readonly yellow: "#FFD300";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly "shadow-black-slight": string;
+        readonly "shadow-black-heavy": string;
+        readonly "shadow-white-slight": string;
+        readonly "shadow-white-heavy": string;
+        readonly "beige-100": "#FFF0E5";
+        readonly "blue-0": "#F5FCFF";
+        readonly "blue-300": "#66C4FF";
+        readonly "blue-400": "#3388FF";
+        readonly "blue-500": "#1557FF";
+        readonly "blue-800": "#1D2340";
+        readonly "navy-100": "#F3F3F5";
+        readonly "navy-300": "#C3C5CB";
+        readonly "navy-400": "#9FA2AC";
+        readonly "navy-500": "#707382";
+        readonly "navy-800": "#10162F";
+        readonly "navy-200": "#DBDCE0";
+        readonly "navy-600": "#585C6D";
+        readonly "navy-700": "#34394C";
+        readonly "navy-900": "#0A0D1C";
+        readonly "green-0": "#F5FFE3";
+        readonly "green-400": "#AEE938";
+        readonly "green-700": "#008A27";
+        readonly "yellow-0": "#FFFAE5";
+        readonly "yellow-400": "#CCA900";
+        readonly "yellow-500": "#FFD300";
+        readonly "pink-0": "#FFF5FF";
+        readonly "pink-400": "#F966FF";
+        readonly "red-100": "#DC5879";
+        readonly "red-0": "#E85D7F";
+        readonly "red-500": "#E91C11";
+        readonly "red-600": "#BE1809";
+        readonly "orange-500": "#FF8C00";
+        readonly "hyper-400": "#5533FF";
+        readonly "hyper-500": "#3A10E5";
+        readonly "gray-100": "#F5F5F5";
+        readonly "gray-300": "#E0E0E0";
+        readonly "gray-800": "#616161";
+        readonly "gray-200": "#EEEEEE";
+        readonly "gray-600": "#9E9E9E";
+        readonly "gray-900": "#424242";
+    }, "-", "">, "color">;
+    modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+        light: import("@codecademy/variance").LiteralPaths<{
+            text: {
+                _: "navy-800";
+                accent: "navy-900";
+                disabled: "navy-500";
+            };
+            feedback: {
+                error: "red-600";
+                success: "green-700";
+                warning: "yellow";
+            };
+            background: {
+                _: "white";
+                current: "white";
+                primary: "beige";
+                selected: "navy-100";
+                disabled: "navy-200";
+                hover: "navy-200";
+            };
+            shadow: {
+                opaque: "shadow-white-heavy";
+                solid: "gray-200";
+            };
+            primary: {
+                _: "hyper-500";
+                hover: "hyper-400";
+            };
+            secondary: {
+                _: "navy-800";
+                hover: "navy-700";
+            };
+            danger: {
+                _: "red-500";
+                hover: "red-600";
+            };
+            interface: {
+                _: "hyper-500";
+                hover: "hyper-400";
+            };
+        }, "-", "_">;
+        dark: import("@codecademy/variance").LiteralPaths<{
+            text: {
+                _: "white";
+                accent: "beige";
+                disabled: "navy-200";
+            };
+            feedback: {
+                error: "red-0";
+                success: "green-0";
+                warning: "yellow";
+            };
+            background: {
+                _: "navy-800";
+                current: "navy-800";
+                primary: "navy-900";
+                selected: "navy-700";
+                disabled: "navy-500";
+                hover: "navy-900";
+            };
+            shadow: {
+                opaque: "shadow-black-heavy";
+                solid: "black";
+            };
+            primary: {
+                _: "yellow-500";
+                hover: "yellow-400";
+            };
+            secondary: {
+                _: "white";
+                hover: "navy-200";
+            };
+            danger: {
+                _: "red-0";
+                hover: "red-100";
+            };
+            interface: {
+                _: "yellow-500";
+                hover: "yellow-400";
+            };
+        }, "-", "_">;
+    }>;
+    mode: "light" | "dark";
+    _getColorValue: (color: import("@codecademy/variance").Path<{
+        readonly beige: "#FFF0E5";
+        readonly blue: "#1557FF";
+        readonly green: "#008A27";
+        readonly hyper: "#3A10E5";
+        readonly lightBlue: "#66C4FF";
+        readonly lightGreen: "#AEE938";
+        readonly navy: "#10162F";
+        readonly orange: "#FF8C00";
+        readonly paleBlue: "#F5FCFF";
+        readonly paleGreen: "#F5FFE3";
+        readonly palePink: "#FFF5FF";
+        readonly paleYellow: "#FFFAE5";
+        readonly pink: "#F966FF";
+        readonly paleRed: "#DC5879";
+        readonly red: "#E91C11";
+        readonly yellow: "#FFD300";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly "shadow-black-slight": string;
+        readonly "shadow-black-heavy": string;
+        readonly "shadow-white-slight": string;
+        readonly "shadow-white-heavy": string;
+        readonly "beige-100": "#FFF0E5";
+        readonly "blue-0": "#F5FCFF";
+        readonly "blue-300": "#66C4FF";
+        readonly "blue-400": "#3388FF";
+        readonly "blue-500": "#1557FF";
+        readonly "blue-800": "#1D2340";
+        readonly "navy-100": "#F3F3F5";
+        readonly "navy-300": "#C3C5CB";
+        readonly "navy-400": "#9FA2AC";
+        readonly "navy-500": "#707382";
+        readonly "navy-800": "#10162F";
+        readonly "navy-200": "#DBDCE0";
+        readonly "navy-600": "#585C6D";
+        readonly "navy-700": "#34394C";
+        readonly "navy-900": "#0A0D1C";
+        readonly "green-0": "#F5FFE3";
+        readonly "green-400": "#AEE938";
+        readonly "green-700": "#008A27";
+        readonly "yellow-0": "#FFFAE5";
+        readonly "yellow-400": "#CCA900";
+        readonly "yellow-500": "#FFD300";
+        readonly "pink-0": "#FFF5FF";
+        readonly "pink-400": "#F966FF";
+        readonly "red-100": "#DC5879";
+        readonly "red-0": "#E85D7F";
+        readonly "red-500": "#E91C11";
+        readonly "red-600": "#BE1809";
+        readonly "orange-500": "#FF8C00";
+        readonly "hyper-400": "#5533FF";
+        readonly "hyper-500": "#3A10E5";
+        readonly "gray-100": "#F5F5F5";
+        readonly "gray-300": "#E0E0E0";
+        readonly "gray-800": "#616161";
+        readonly "gray-200": "#EEEEEE";
+        readonly "gray-600": "#9E9E9E";
+        readonly "gray-900": "#424242";
+    }, "-">) => string;
+}, Record<"breakpoints", {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}>>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
+    1: string;
+    2: string;
+}, "-", "">>, Record<"breakpoints", {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+    readonly lightBeige: "#FFFBF8";
+    readonly gold: "#8A7300";
+    readonly teal: "#027E97";
+    readonly purple: "#B3CCFF";
+    readonly "beige-0": "#FFFBF8";
+    readonly "pink-800": "#CA00D1";
+    readonly "orange-800": "#D14900";
+    readonly "gold-800": "#8A7300";
+    readonly "teal-500": "#027E97";
+    readonly "purple-300": "#B3CCFF";
+}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
+    colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        editor: {
+            attribute: "green-700";
+            annotation: "red-500";
+            atom: "pink-800";
+            basic: "navy-800";
+            comment: "navy-300";
+            constant: "orange-800";
+            decoration: "red-500";
+            invalid: "red-500";
+            key: "teal-500";
+            keyword: "blue-500";
+            number: "red-500";
+            operator: "red-500";
+            predefined: "navy-800";
+            property: "red-500";
+            regexp: "green-700";
+            string: "gold-800";
+            tag: "red-500";
+            text: "orange-800";
+            value: "gold-800";
+            variable: "green-700";
+            ui: {
+                background: "white";
+                text: "navy-800";
+                'indent-active': "navy-900";
+                'indent-inactive': "navy-600";
+                'line-number': "navy-300";
+            };
+        };
+    } | {
+        editor: {
+            attribute: "green-400";
+            annotation: "red-0";
+            atom: "pink-400";
+            basic: "white";
+            comment: "gray-600";
+            constant: "orange-500";
+            decoration: "red-0";
+            invalid: "red-0";
+            key: "blue-300";
+            keyword: "purple-300";
+            number: "red-0";
+            operator: "red-0";
+            predefined: "white";
+            property: "red-0";
+            regexp: "green-400";
+            string: "yellow-500";
+            tag: "red-0";
+            text: "orange-500";
+            value: "yellow-500";
+            variable: "green-400";
+            ui: {
+                background: "navy-900";
+                text: "white";
+                'indent-active': "gray-900";
+                'indent-inactive': "gray-800";
+                'line-number': "gray-600";
+            };
+        };
+    }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        readonly beige: "#FFF0E5";
+        readonly blue: "#1557FF";
+        readonly green: "#008A27";
+        readonly hyper: "#3A10E5";
+        readonly lightBlue: "#66C4FF";
+        readonly lightGreen: "#AEE938";
+        readonly navy: "#10162F";
+        readonly orange: "#FF8C00";
+        readonly paleBlue: "#F5FCFF";
+        readonly paleGreen: "#F5FFE3";
+        readonly palePink: "#FFF5FF";
+        readonly paleYellow: "#FFFAE5";
+        readonly pink: "#F966FF";
+        readonly paleRed: "#DC5879";
+        readonly red: "#E91C11";
+        readonly yellow: "#FFD300";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly "shadow-black-slight": string;
+        readonly "shadow-black-heavy": string;
+        readonly "shadow-white-slight": string;
+        readonly "shadow-white-heavy": string;
+        readonly "beige-100": "#FFF0E5";
+        readonly "blue-0": "#F5FCFF";
+        readonly "blue-300": "#66C4FF";
+        readonly "blue-400": "#3388FF";
+        readonly "blue-500": "#1557FF";
+        readonly "blue-800": "#1D2340";
+        readonly "navy-100": "#F3F3F5";
+        readonly "navy-300": "#C3C5CB";
+        readonly "navy-400": "#9FA2AC";
+        readonly "navy-500": "#707382";
+        readonly "navy-800": "#10162F";
+        readonly "navy-200": "#DBDCE0";
+        readonly "navy-600": "#585C6D";
+        readonly "navy-700": "#34394C";
+        readonly "navy-900": "#0A0D1C";
+        readonly "green-0": "#F5FFE3";
+        readonly "green-400": "#AEE938";
+        readonly "green-700": "#008A27";
+        readonly "yellow-0": "#FFFAE5";
+        readonly "yellow-400": "#CCA900";
+        readonly "yellow-500": "#FFD300";
+        readonly "pink-0": "#FFF5FF";
+        readonly "pink-400": "#F966FF";
+        readonly "red-100": "#DC5879";
+        readonly "red-0": "#E85D7F";
+        readonly "red-500": "#E91C11";
+        readonly "red-600": "#BE1809";
+        readonly "orange-500": "#FF8C00";
+        readonly "hyper-400": "#5533FF";
+        readonly "hyper-500": "#3A10E5";
+        readonly "gray-100": "#F5F5F5";
+        readonly "gray-300": "#E0E0E0";
+        readonly "gray-800": "#616161";
+        readonly "gray-200": "#EEEEEE";
+        readonly "gray-600": "#9E9E9E";
+        readonly "gray-900": "#424242";
+    }, "-", "">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        text: {
+            _: "navy-800";
+            accent: "navy-900";
+            disabled: "navy-500";
+        };
+        feedback: {
+            error: "red-600";
+            success: "green-700";
+            warning: "yellow";
+        };
+        background: {
+            _: "white";
+            current: "white";
+            primary: "beige";
+            selected: "navy-100";
+            disabled: "navy-200";
+            hover: "navy-200";
+        };
+        shadow: {
+            opaque: "shadow-white-heavy";
+            solid: "gray-200";
+        };
+        primary: {
+            _: "hyper-500";
+            hover: "hyper-400";
+        };
+        secondary: {
+            _: "navy-800";
+            hover: "navy-700";
+        };
+        danger: {
+            _: "red-500";
+            hover: "red-600";
+        };
+        interface: {
+            _: "hyper-500";
+            hover: "hyper-400";
+        };
+    } | {
+        text: {
+            _: "white";
+            accent: "beige";
+            disabled: "navy-200";
+        };
+        feedback: {
+            error: "red-0";
+            success: "green-0";
+            warning: "yellow";
+        };
+        background: {
+            _: "navy-800";
+            current: "navy-800";
+            primary: "navy-900";
+            selected: "navy-700";
+            disabled: "navy-500";
+            hover: "navy-900";
+        };
+        shadow: {
+            opaque: "shadow-black-heavy";
+            solid: "black";
+        };
+        primary: {
+            _: "yellow-500";
+            hover: "yellow-400";
+        };
+        secondary: {
+            _: "white";
+            hover: "navy-200";
+        };
+        danger: {
+            _: "red-0";
+            hover: "red-100";
+        };
+        interface: {
+            _: "yellow-500";
+            hover: "yellow-400";
+        };
+    }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        readonly beige: "#FFF0E5";
+        readonly blue: "#1557FF";
+        readonly green: "#008A27";
+        readonly hyper: "#3A10E5";
+        readonly lightBlue: "#66C4FF";
+        readonly lightGreen: "#AEE938";
+        readonly navy: "#10162F";
+        readonly orange: "#FF8C00";
+        readonly paleBlue: "#F5FCFF";
+        readonly paleGreen: "#F5FFE3";
+        readonly palePink: "#FFF5FF";
+        readonly paleYellow: "#FFFAE5";
+        readonly pink: "#F966FF";
+        readonly paleRed: "#DC5879";
+        readonly red: "#E91C11";
+        readonly yellow: "#FFD300";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly "shadow-black-slight": string;
+        readonly "shadow-black-heavy": string;
+        readonly "shadow-white-slight": string;
+        readonly "shadow-white-heavy": string;
+        readonly "beige-100": "#FFF0E5";
+        readonly "blue-0": "#F5FCFF";
+        readonly "blue-300": "#66C4FF";
+        readonly "blue-400": "#3388FF";
+        readonly "blue-500": "#1557FF";
+        readonly "blue-800": "#1D2340";
+        readonly "navy-100": "#F3F3F5";
+        readonly "navy-300": "#C3C5CB";
+        readonly "navy-400": "#9FA2AC";
+        readonly "navy-500": "#707382";
+        readonly "navy-800": "#10162F";
+        readonly "navy-200": "#DBDCE0";
+        readonly "navy-600": "#585C6D";
+        readonly "navy-700": "#34394C";
+        readonly "navy-900": "#0A0D1C";
+        readonly "green-0": "#F5FFE3";
+        readonly "green-400": "#AEE938";
+        readonly "green-700": "#008A27";
+        readonly "yellow-0": "#FFFAE5";
+        readonly "yellow-400": "#CCA900";
+        readonly "yellow-500": "#FFD300";
+        readonly "pink-0": "#FFF5FF";
+        readonly "pink-400": "#F966FF";
+        readonly "red-100": "#DC5879";
+        readonly "red-0": "#E85D7F";
+        readonly "red-500": "#E91C11";
+        readonly "red-600": "#BE1809";
+        readonly "orange-500": "#FF8C00";
+        readonly "hyper-400": "#5533FF";
+        readonly "hyper-500": "#3A10E5";
+        readonly "gray-100": "#F5F5F5";
+        readonly "gray-300": "#E0E0E0";
+        readonly "gray-800": "#616161";
+        readonly "gray-200": "#EEEEEE";
+        readonly "gray-600": "#9E9E9E";
+        readonly "gray-900": "#424242";
+    }, "-", "">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
+        readonly lightBeige: "#FFFBF8";
+        readonly gold: "#8A7300";
+        readonly teal: "#027E97";
+        readonly purple: "#B3CCFF";
+        readonly "beige-0": "#FFFBF8";
+        readonly "pink-800": "#CA00D1";
+        readonly "orange-800": "#D14900";
+        readonly "gold-800": "#8A7300";
+        readonly "teal-500": "#027E97";
+        readonly "purple-300": "#B3CCFF";
+    }, "-", "">, "color">>;
+    modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
+        light: import("@codecademy/variance").LiteralPaths<{
+            text: {
+                _: "navy-800";
+                accent: "navy-900";
+                disabled: "navy-500";
+            };
+            feedback: {
+                error: "red-600";
+                success: "green-700";
+                warning: "yellow";
+            };
+            background: {
+                _: "white";
+                current: "white";
+                primary: "beige";
+                selected: "navy-100";
+                disabled: "navy-200";
+                hover: "navy-200";
+            };
+            shadow: {
+                opaque: "shadow-white-heavy";
+                solid: "gray-200";
+            };
+            primary: {
+                _: "hyper-500";
+                hover: "hyper-400";
+            };
+            secondary: {
+                _: "navy-800";
+                hover: "navy-700";
+            };
+            danger: {
+                _: "red-500";
+                hover: "red-600";
+            };
+            interface: {
+                _: "hyper-500";
+                hover: "hyper-400";
+            };
+        }, "-", "_">;
+        dark: import("@codecademy/variance").LiteralPaths<{
+            text: {
+                _: "white";
+                accent: "beige";
+                disabled: "navy-200";
+            };
+            feedback: {
+                error: "red-0";
+                success: "green-0";
+                warning: "yellow";
+            };
+            background: {
+                _: "navy-800";
+                current: "navy-800";
+                primary: "navy-900";
+                selected: "navy-700";
+                disabled: "navy-500";
+                hover: "navy-900";
+            };
+            shadow: {
+                opaque: "shadow-black-heavy";
+                solid: "black";
+            };
+            primary: {
+                _: "yellow-500";
+                hover: "yellow-400";
+            };
+            secondary: {
+                _: "white";
+                hover: "navy-200";
+            };
+            danger: {
+                _: "red-0";
+                hover: "red-100";
+            };
+            interface: {
+                _: "yellow-500";
+                hover: "yellow-400";
+            };
+        }, "-", "_">;
+    }>, {
+        light: import("@codecademy/variance").LiteralPaths<{
+            editor: {
+                attribute: "green-700";
+                annotation: "red-500";
+                atom: "pink-800";
+                basic: "navy-800";
+                comment: "navy-300";
+                constant: "orange-800";
+                decoration: "red-500";
+                invalid: "red-500";
+                key: "teal-500";
+                keyword: "blue-500";
+                number: "red-500";
+                operator: "red-500";
+                predefined: "navy-800";
+                property: "red-500";
+                regexp: "green-700";
+                string: "gold-800";
+                tag: "red-500";
+                text: "orange-800";
+                value: "gold-800";
+                variable: "green-700";
+                ui: {
+                    background: "white";
+                    text: "navy-800";
+                    'indent-active': "navy-900";
+                    'indent-inactive': "navy-600";
+                    'line-number': "navy-300";
+                };
+            };
+        }, "-", "_">;
+        dark: import("@codecademy/variance").LiteralPaths<{
+            editor: {
+                attribute: "green-400";
+                annotation: "red-0";
+                atom: "pink-400";
+                basic: "white";
+                comment: "gray-600";
+                constant: "orange-500";
+                decoration: "red-0";
+                invalid: "red-0";
+                key: "blue-300";
+                keyword: "purple-300";
+                number: "red-0";
+                operator: "red-0";
+                predefined: "white";
+                property: "red-0";
+                regexp: "green-400";
+                string: "yellow-500";
+                tag: "red-0";
+                text: "orange-500";
+                value: "yellow-500";
+                variable: "green-400";
+                ui: {
+                    background: "navy-900";
+                    text: "white";
+                    'indent-active': "gray-900";
+                    'indent-inactive': "gray-800";
+                    'line-number': "gray-600";
+                };
+            };
+        }, "-", "_">;
+    }>;
+    mode: "light" | "dark";
+    _getColorValue: (color: import("@codecademy/variance").Path<{
+        readonly beige: "#FFF0E5";
+        readonly blue: "#1557FF";
+        readonly green: "#008A27";
+        readonly hyper: "#3A10E5";
+        readonly lightBlue: "#66C4FF";
+        readonly lightGreen: "#AEE938";
+        readonly navy: "#10162F";
+        readonly orange: "#FF8C00";
+        readonly paleBlue: "#F5FCFF";
+        readonly paleGreen: "#F5FFE3";
+        readonly palePink: "#FFF5FF";
+        readonly paleYellow: "#FFFAE5";
+        readonly pink: "#F966FF";
+        readonly paleRed: "#DC5879";
+        readonly red: "#E91C11";
+        readonly yellow: "#FFD300";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly "shadow-black-slight": string;
+        readonly "shadow-black-heavy": string;
+        readonly "shadow-white-slight": string;
+        readonly "shadow-white-heavy": string;
+        readonly "beige-100": "#FFF0E5";
+        readonly "blue-0": "#F5FCFF";
+        readonly "blue-300": "#66C4FF";
+        readonly "blue-400": "#3388FF";
+        readonly "blue-500": "#1557FF";
+        readonly "blue-800": "#1D2340";
+        readonly "navy-100": "#F3F3F5";
+        readonly "navy-300": "#C3C5CB";
+        readonly "navy-400": "#9FA2AC";
+        readonly "navy-500": "#707382";
+        readonly "navy-800": "#10162F";
+        readonly "navy-200": "#DBDCE0";
+        readonly "navy-600": "#585C6D";
+        readonly "navy-700": "#34394C";
+        readonly "navy-900": "#0A0D1C";
+        readonly "green-0": "#F5FFE3";
+        readonly "green-400": "#AEE938";
+        readonly "green-700": "#008A27";
+        readonly "yellow-0": "#FFFAE5";
+        readonly "yellow-400": "#CCA900";
+        readonly "yellow-500": "#FFD300";
+        readonly "pink-0": "#FFF5FF";
+        readonly "pink-400": "#F966FF";
+        readonly "red-100": "#DC5879";
+        readonly "red-0": "#E85D7F";
+        readonly "red-500": "#E91C11";
+        readonly "red-600": "#BE1809";
+        readonly "orange-500": "#FF8C00";
+        readonly "hyper-400": "#5533FF";
+        readonly "hyper-500": "#3A10E5";
+        readonly "gray-100": "#F5F5F5";
+        readonly "gray-300": "#E0E0E0";
+        readonly "gray-800": "#616161";
+        readonly "gray-200": "#EEEEEE";
+        readonly "gray-600": "#9E9E9E";
+        readonly "gray-900": "#424242";
+    }, "-"> | "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "shadow-opaque" | "shadow-solid" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "secondary-hover" | "danger-hover" | "interface-hover" | import("@codecademy/variance").Path<{
+        readonly lightBeige: "#FFFBF8";
+        readonly gold: "#8A7300";
+        readonly teal: "#027E97";
+        readonly purple: "#B3CCFF";
+        readonly "beige-0": "#FFFBF8";
+        readonly "pink-800": "#CA00D1";
+        readonly "orange-800": "#D14900";
+        readonly "gold-800": "#8A7300";
+        readonly "teal-500": "#027E97";
+        readonly "purple-300": "#B3CCFF";
+    }, "-">) => string;
+}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
+export declare type PlatformThemeShape = typeof platformTheme;
+export interface PlatformTheme extends PlatformThemeShape {
+}