@codecademy/gamut-styles 17.6.0-alpha.4fa030.0 → 17.6.1-alpha.63a3d2.0

package/dist/themes/lxStudio.js

@@ -0,0 +1,54 @@
+import { createTheme } from '@codecademy/variance';
+import { fontBase, fontMonospace, fontSystem, lxStudioPalette } from '../variables';
+import { coreTheme } from './core';
+
+/**
+ * @description This is an extended theme for the lx studio with an expanded set of tokens
+ * That are not needed for the rest of the application.
+ */
+
+const lxStudioFontFamily = {
+  accent: fontBase,
+  base: fontBase,
+  monospace: fontMonospace,
+  system: fontSystem
+};
+export const lxStudioBorderRadii = {
+  none: '0px',
+  sm: '4px',
+  md: '8px',
+  lg: '12px',
+  xl: '16px',
+  full: '999px'
+};
+export const lxStudioTheme = createTheme({
+  ...coreTheme,
+  borderRadii: lxStudioBorderRadii,
+  fontFamily: lxStudioFontFamily
+}).addColors(lxStudioPalette).addColorModes('light', {
+  // these are just the overrides, the rest of the tokens are inherited from coreTheme
+  light: {
+    feedback: {
+      success: 'lxStudioSuccess'
+    },
+    background: {
+      primary: 'lxStudioBgPrimary'
+    },
+    shadow: {
+      primary: 'navy-200'
+    },
+    primary: {
+      _: 'lxStudioPurple',
+      hover: 'lxStudioPurpleHover'
+    },
+    interface: {
+      _: 'hyper-500',
+      hover: 'hyper-400'
+    },
+    border: {
+      primary: 'navy-400',
+      tertiary: 'navy-800',
+      disabled: 'navy-300'
+    }
+  }
+}).build();

package/dist/themes/platform.d.ts

@@ -109,10 +109,6 @@ export declare const platformTheme: Record<"breakpoints", {
     readonly yellow: "#FFD300";
     readonly black: "#000000";
     readonly white: "#ffffff";
-    readonly "shadow-white-slight": string;
-    readonly "shadow-white-heavy": string;
-    readonly "shadow-black-slight": string;
-    readonly "shadow-black-heavy": string;
     readonly "beige-100": "#FFF0E5";
     readonly "blue-0": "#F5FCFF";
     readonly "blue-100": "#D3F2FF";
@@ -182,8 +178,8 @@ export declare const platformTheme: Record<"breakpoints", {
             hover: "navy-200";
         };
         shadow: {
-            opaque: "shadow-white-heavy";
-            solid: "gray-200";
+            primary: "navy-800";
+            secondary: "navy-600";
         };
         primary: {
             _: "hyper-500";
@@ -230,8 +226,8 @@ export declare const platformTheme: Record<"breakpoints", {
             hover: "white-200";
         };
         shadow: {
-            opaque: "shadow-black-heavy";
-            solid: "black";
+            primary: "white";
+            secondary: "white-600";
         };
         primary: {
             _: "yellow-500";
@@ -275,10 +271,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly yellow: "#FFD300";
         readonly black: "#000000";
         readonly white: "#ffffff";
-        readonly "shadow-white-slight": string;
-        readonly "shadow-white-heavy": string;
-        readonly "shadow-black-slight": string;
-        readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
         readonly "blue-0": "#F5FCFF";
         readonly "blue-100": "#D3F2FF";
@@ -349,8 +341,8 @@ export declare const platformTheme: Record<"breakpoints", {
                 hover: "navy-200";
             };
             shadow: {
-                opaque: "shadow-white-heavy";
-                solid: "gray-200";
+                primary: "navy-800";
+                secondary: "navy-600";
             };
             primary: {
                 _: "hyper-500";
@@ -398,8 +390,8 @@ export declare const platformTheme: Record<"breakpoints", {
                 hover: "white-200";
             };
             shadow: {
-                opaque: "shadow-black-heavy";
-                solid: "black";
+                primary: "white";
+                secondary: "white-600";
             };
             primary: {
                 _: "yellow-500";
@@ -446,10 +438,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly yellow: "#FFD300";
         readonly black: "#000000";
         readonly white: "#ffffff";
-        readonly "shadow-white-slight": string;
-        readonly "shadow-white-heavy": string;
-        readonly "shadow-black-slight": string;
-        readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
         readonly "blue-0": "#F5FCFF";
         readonly "blue-100": "#D3F2FF";
@@ -591,10 +579,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly yellow: "#FFD300";
         readonly black: "#000000";
         readonly white: "#ffffff";
-        readonly "shadow-white-slight": string;
-        readonly "shadow-white-heavy": string;
-        readonly "shadow-black-slight": string;
-        readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
         readonly "blue-0": "#F5FCFF";
         readonly "blue-100": "#D3F2FF";
@@ -663,8 +647,8 @@ export declare const platformTheme: Record<"breakpoints", {
             hover: "navy-200";
         };
         shadow: {
-            opaque: "shadow-white-heavy";
-            solid: "gray-200";
+            primary: "navy-800";
+            secondary: "navy-600";
         };
         primary: {
             _: "hyper-500";
@@ -711,8 +695,8 @@ export declare const platformTheme: Record<"breakpoints", {
             hover: "white-200";
         };
         shadow: {
-            opaque: "shadow-black-heavy";
-            solid: "black";
+            primary: "white";
+            secondary: "white-600";
         };
         primary: {
             _: "yellow-500";
@@ -756,10 +740,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly yellow: "#FFD300";
         readonly black: "#000000";
         readonly white: "#ffffff";
-        readonly "shadow-white-slight": string;
-        readonly "shadow-white-heavy": string;
-        readonly "shadow-black-slight": string;
-        readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
         readonly "blue-0": "#F5FCFF";
         readonly "blue-100": "#D3F2FF";
@@ -841,8 +821,8 @@ export declare const platformTheme: Record<"breakpoints", {
                 hover: "navy-200";
             };
             shadow: {
-                opaque: "shadow-white-heavy";
-                solid: "gray-200";
+                primary: "navy-800";
+                secondary: "navy-600";
             };
             primary: {
                 _: "hyper-500";
@@ -890,8 +870,8 @@ export declare const platformTheme: Record<"breakpoints", {
                 hover: "white-200";
             };
             shadow: {
-                opaque: "shadow-black-heavy";
-                solid: "black";
+                primary: "white";
+                secondary: "white-600";
             };
             primary: {
                 _: "yellow-500";
@@ -1001,10 +981,6 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly yellow: "#FFD300";
         readonly black: "#000000";
         readonly white: "#ffffff";
-        readonly "shadow-white-slight": string;
-        readonly "shadow-white-heavy": string;
-        readonly "shadow-black-slight": string;
-        readonly "shadow-black-heavy": string;
         readonly "beige-100": "#FFF0E5";
         readonly "blue-0": "#F5FCFF";
         readonly "blue-100": "#D3F2FF";
@@ -1051,7 +1027,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "shadow-opaque" | "shadow-solid" | "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" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-primary" | "border-tertiary" | import("@codecademy/variance").Path<{
+    }, "-"> | "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" | import("@codecademy/variance").Path<{
         readonly lightBeige: "#FFFBF8";
         readonly gold: "#8A7300";
         readonly teal: "#027E97";

package/dist/variables/colors.d.ts

@@ -107,10 +107,6 @@ export declare const corePalette: {
     readonly yellow: "#FFD300";
     readonly black: "#000000";
     readonly white: "#ffffff";
-    readonly "shadow-white-slight": string;
-    readonly "shadow-white-heavy": string;
-    readonly "shadow-black-slight": string;
-    readonly "shadow-black-heavy": string;
     readonly "beige-100": "#FFF0E5";
     readonly "blue-0": "#F5FCFF";
     readonly "blue-100": "#D3F2FF";
@@ -181,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";
@@ -193,3 +195,82 @@ export declare const platformPalette: {
     readonly "teal-500": "#027E97";
     readonly "purple-300": "#B3CCFF";
 };
+/**
+ * LX Studio Colors
+ */
+export declare const lxStudioColors: {
+    readonly lxStudioSuccess: "#06844F";
+    readonly lxStudioBgPrimary: "#FAFBFC";
+    readonly lxStudioPurple: "#5628FE";
+    readonly lxStudioPurpleHover: "#7955FC";
+};
+export declare const lxStudioPalette: {
+    lxStudioSuccess: "#06844F";
+    lxStudioBgPrimary: "#FAFBFC";
+    lxStudioPurple: "#5628FE";
+    lxStudioPurpleHover: "#7955FC";
+    beige: "#FFF0E5";
+    blue: "#1557FF";
+    green: "#008A27";
+    hyper: "#3A10E5";
+    lightBlue: "#66C4FF";
+    lightGreen: "#AEE938";
+    navy: "#10162F";
+    orange: "#FF8C00";
+    paleBlue: "#F5FCFF";
+    paleGreen: "#F5FFE3";
+    palePink: "#FFF5FF";
+    paleYellow: "#FFFAE5";
+    pink: "#F966FF";
+    paleRed: "#DC5879";
+    red: "#E91C11";
+    yellow: "#FFD300";
+    black: "#000000";
+    white: "#ffffff";
+    "beige-100": "#FFF0E5";
+    "blue-0": "#F5FCFF";
+    "blue-100": "#D3F2FF";
+    "blue-300": "#66C4FF";
+    "blue-400": "#3388FF";
+    "blue-500": "#1557FF";
+    "blue-800": "#1D2340";
+    "navy-100": string;
+    "navy-300": string;
+    "navy-400": string;
+    "navy-500": string;
+    "navy-800": "#10162F";
+    "navy-200": string;
+    "navy-600": string;
+    "navy-700": string;
+    "navy-900": "#0A0D1C";
+    "green-0": "#F5FFE3";
+    "green-100": "#EAFDC6";
+    "green-400": "#AEE938";
+    "green-700": "#008A27";
+    "yellow-0": "#FFFAE5";
+    "yellow-400": "#CCA900";
+    "yellow-500": "#FFD300";
+    "pink-0": "#FFF5FF";
+    "pink-400": "#F966FF";
+    "red-0": "#E85D7F";
+    "red-100": "#DC5879";
+    "red-500": "#E91C11";
+    "red-600": "#BE1809";
+    "orange-100": "#FFE8CC";
+    "orange-500": "#FF8C00";
+    "hyper-400": "#5533FF";
+    "hyper-500": "#3A10E5";
+    "gray-100": "#F5F5F5";
+    "gray-300": "#E0E0E0";
+    "gray-800": "#616161";
+    "gray-200": "#EEEEEE";
+    "gray-600": "#9E9E9E";
+    "gray-900": "#424242";
+    "white-100": string;
+    "white-300": string;
+    "white-400": string;
+    "white-500": string;
+    "white-200": string;
+    "white-600": string;
+    "white-700": string;
+};

package/dist/variables/colors.js

@@ -7,18 +7,6 @@ import { rgba } from 'polished';
 const black = '#000000';
 const white = '#ffffff';
 const navy = '#10162F';
-const effects = {
-  shadow: {
-    black: {
-      slight: rgba(black, 0.15),
-      heavy: rgba(black, 0.75)
-    },
-    white: {
-      slight: rgba(white, 0.15),
-      heavy: rgba(white, 0.95)
-    }
-  }
-};
 export const coreSwatches = {
   beige: {
     '100': '#FFF0E5'
@@ -35,7 +23,7 @@ export const coreSwatches = {
     '100': rgba(navy, 0.04),
     '200': rgba(navy, 0.12),
     '300': rgba(navy, 0.28),
-    '400': rgba(navy, 0.45),
+    '400': rgba(navy, 0.47),
     '500': rgba(navy, 0.63),
     '600': rgba(navy, 0.75),
     '700': rgba(navy, 0.86),
@@ -83,7 +71,7 @@ export const coreSwatches = {
     '100': rgba(white, 0.04),
     '200': rgba(white, 0.09),
     '300': rgba(white, 0.2),
-    '400': rgba(white, 0.33),
+    '400': rgba(white, 0.35),
     '500': rgba(white, 0.5),
     '600': rgba(white, 0.65),
     '700': rgba(white, 0.8)
@@ -111,7 +99,6 @@ export const trueColors = {
 };
 export const corePalette = {
   ...flattenScale(coreSwatches),
-  ...flattenScale(effects),
   ...trueColors
 };
 
@@ -139,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],
@@ -148,4 +135,19 @@ const truePlatformColors = {
 export const platformPalette = {
   ...flattenScale(platformSwatches),
   ...truePlatformColors
+};
+
+/**
+ * LX Studio Colors
+ */
+
+export const lxStudioColors = {
+  lxStudioSuccess: '#06844F',
+  lxStudioBgPrimary: '#FAFBFC',
+  lxStudioPurple: '#5628FE',
+  lxStudioPurpleHover: '#7955FC'
+};
+export const lxStudioPalette = {
+  ...corePalette,
+  ...lxStudioColors
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.6.0-alpha.4fa030.0",
+  "version": "17.6.1-alpha.63a3d2.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.22.1",
@@ -25,6 +25,7 @@
     "@emotion/styled": "^11.3.0",
     "lodash": "^4.17.5",
     "react": "^17.0.2 || ^18.2.0",
+    "sass-embedded": "^1.83.4",
     "stylis": "^4.0.7"
   },
   "publishConfig": {
@@ -34,5 +35,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "846f035d72af2c3e1299f65cd8e7987e3a2354ab"
+  "gitHead": "b6c5147bd65a47d50b1b6b39a1237e14b41f5402"
 }