@codecademy/gamut-styles 17.5.1 → 17.5.2-alpha.76f80e.0

package/dist/themes/lxStudio.js

@@ -0,0 +1,127 @@
+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', {
+  light: {
+    text: {
+      _: 'navy-800',
+      accent: 'navy-900',
+      disabled: 'navy-500',
+      secondary: 'navy-600'
+    },
+    feedback: {
+      error: 'red-600',
+      success: 'lxStudioSuccess',
+      warning: 'yellow'
+    },
+    background: {
+      _: 'white',
+      contrast: 'white',
+      current: 'white',
+      primary: 'lxStudioBgPrimary',
+      selected: 'navy-100',
+      disabled: 'navy-200',
+      hover: 'navy-200'
+    },
+    shadow: {
+      primary: 'navy-200',
+      secondary: 'navy-600'
+    },
+    primary: {
+      _: 'lxStudioPurple',
+      hover: 'lxStudioPurpleHover',
+      inverse: 'yellow-500'
+    },
+    secondary: {
+      _: 'navy-800',
+      hover: 'navy-700'
+    },
+    danger: {
+      _: 'red-500',
+      hover: 'red-600'
+    },
+    interface: {
+      _: 'hyper-500',
+      hover: 'hyper-400'
+    },
+    border: {
+      primary: 'navy-400',
+      secondary: 'navy-600',
+      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";
@@ -189,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

@@ -23,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),
@@ -71,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)
@@ -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],
@@ -135,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.5.1",
+  "version": "17.5.2-alpha.76f80e.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": "d6cc3657e862a5035076570bf9f29a3a0b936290"
+  "gitHead": "9e89504a1de6e7d245f10d4a6ca1aea0d9717c88"
 }