@codecademy/gamut-styles 17.5.2-alpha.b01287.0 → 17.5.2-alpha.b7b030.0

package/dist/themes/lxStudio.d.ts

@@ -606,6 +606,54 @@ export declare const lxStudioTheme: Record<"breakpoints", {
             tertiary: "navy-800";
             disabled: "navy-300";
         };
+    } | {
+        text: {
+            _: "white";
+            accent: "beige";
+            disabled: "white-500";
+            secondary: "white-600";
+        };
+        feedback: {
+            error: "red-0";
+            success: "green-400";
+            warning: "yellow-0";
+        };
+        background: {
+            _: "navy-800";
+            contrast: "black";
+            current: "navy-800";
+            primary: "navy-900";
+            selected: "white-100";
+            disabled: "white-200";
+            hover: "white-200";
+        };
+        shadow: {
+            primary: "white";
+            secondary: "white-600";
+        };
+        primary: {
+            _: "yellow-500";
+            hover: "yellow-400";
+            inverse: "hyper-500";
+        };
+        secondary: {
+            _: "white";
+            hover: "white-700";
+        };
+        danger: {
+            _: "red-0";
+            hover: "red-100";
+        };
+        interface: {
+            _: "yellow-500";
+            hover: "yellow-400";
+        };
+        border: {
+            primary: "white";
+            secondary: "white-600";
+            tertiary: "white-300";
+            disabled: "white-500";
+        };
     }, "-", "_">, "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";
@@ -1051,8 +1099,57 @@ export declare const lxStudioTheme: Record<"breakpoints", {
                 disabled: "navy-300";
             };
         }, "-", "_">;
+        dark: import("@codecademy/variance").LiteralPaths<{
+            text: {
+                _: "white";
+                accent: "beige";
+                disabled: "white-500";
+                secondary: "white-600";
+            };
+            feedback: {
+                error: "red-0";
+                success: "green-400";
+                warning: "yellow-0";
+            };
+            background: {
+                _: "navy-800";
+                contrast: "black";
+                current: "navy-800";
+                primary: "navy-900";
+                selected: "white-100";
+                disabled: "white-200";
+                hover: "white-200";
+            };
+            shadow: {
+                primary: "white";
+                secondary: "white-600";
+            };
+            primary: {
+                _: "yellow-500";
+                hover: "yellow-400";
+                inverse: "hyper-500";
+            };
+            secondary: {
+                _: "white";
+                hover: "white-700";
+            };
+            danger: {
+                _: "red-0";
+                hover: "red-100";
+            };
+            interface: {
+                _: "yellow-500";
+                hover: "yellow-400";
+            };
+            border: {
+                primary: "white";
+                secondary: "white-600";
+                tertiary: "white-300";
+                disabled: "white-500";
+            };
+        }, "-", "_">;
     }>;
-    mode: "light";
+    mode: "light" | "dark";
     _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "yellow-0" | "yellow-400" | "yellow-500" | "pink-0" | "pink-400" | "red-0" | "red-100" | "red-500" | "red-600" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "lxStudioPurple" | "lxStudioPurpleHover") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type LxStudioThemeShape = typeof lxStudioTheme;

package/dist/themes/lxStudio.js

@@ -74,5 +74,54 @@ export const lxStudioTheme = createTheme({
       tertiary: 'navy-800',
       disabled: 'navy-300'
     }
+  },
+  dark: {
+    text: {
+      _: 'white',
+      accent: 'beige',
+      disabled: 'white-500',
+      secondary: 'white-600'
+    },
+    feedback: {
+      error: 'red-0',
+      success: 'green-400',
+      warning: 'yellow-0'
+    },
+    background: {
+      _: 'navy-800',
+      contrast: 'black',
+      current: 'navy-800',
+      primary: 'navy-900',
+      selected: 'white-100',
+      disabled: 'white-200',
+      hover: 'white-200'
+    },
+    shadow: {
+      primary: 'white',
+      secondary: 'white-600'
+    },
+    primary: {
+      _: 'yellow-500',
+      hover: 'yellow-400',
+      inverse: 'hyper-500'
+    },
+    secondary: {
+      _: 'white',
+      hover: 'white-700'
+    },
+    danger: {
+      _: 'red-0',
+      hover: 'red-100'
+    },
+    interface: {
+      _: 'yellow-500',
+      hover: 'yellow-400'
+    },
+    border: {
+      primary: 'white',
+      secondary: 'white-600',
+      tertiary: 'white-300',
+      disabled: 'white-500'
+    }
   }
 }).build();

package/dist/variables/colors.d.ts

@@ -177,6 +177,12 @@ export declare const platformSwatches: {
         readonly '300': "#B3CCFF";
     };
 };
+export declare const truePlatformColors: {
+    readonly lightBeige: "#FFFBF8";
+    readonly gold: "#8A7300";
+    readonly teal: "#027E97";
+    readonly purple: "#B3CCFF";
+};
 export declare const platformPalette: {
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";

package/dist/variables/colors.js

@@ -126,7 +126,7 @@ export const platformSwatches = {
     '300': '#B3CCFF'
   }
 };
-const truePlatformColors = {
+export const truePlatformColors = {
   lightBeige: platformSwatches.beige[0],
   gold: platformSwatches.gold[800],
   teal: platformSwatches.teal[500],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.5.2-alpha.b01287.0",
+  "version": "17.5.2-alpha.b7b030.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.22.1",
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "17e7f209218378e88ce48d7be7b119373e918418"
+  "gitHead": "d2faba8ebd65d1fac9a69ce59f7eda29dea8fbe7"
 }