@codecademy/gamut-styles 18.0.1-alpha.c211a2.0 → 18.0.1-alpha.df4bce.0

package/README.md

@@ -5,7 +5,7 @@ Base SCSS for Codecademy
 ## Variables/
 
 This folder houses all shared SCSS style variables.
-TypeScript color tokens and palettes live in `variables/colors.ts` and are exposed on themes as `theme.colors` (see `src/themes/`). Legacy `editorColors`, `platformColors`, `swatches`, and the flat deprecated `colors` map were removed from this package—use `corePalette` / `platformPalette` and theme color modes instead.
+It also contains a JavaScript file with color variables.
 
 ## Core/
 

package/dist/themes/lxStudio.d.ts

@@ -1086,7 +1086,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _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" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "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" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "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" | "sapphire") => string;
+    _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" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "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-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "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" | "sapphire") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type LxStudioThemeShape = typeof lxStudioTheme;
 export type LxStudioTheme = LxStudioThemeShape;

package/dist/themes/percipio.d.ts

@@ -1148,7 +1148,7 @@ export declare const percipioTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light";
-    _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" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "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" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "black" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "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" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
+    _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" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "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-accent" | "text-disabled" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "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" | "sapphire" | "percipioTextPrimary" | "percipioTextSecondary" | "percipioTextDisabled" | "percipioTextAccent" | "percipioBgPrimary" | "percipioBgSuccess" | "percipioBgWarning" | "percipioBgError" | "percipioActionPrimaryHover" | "percipioActionSecondary" | "percipioActionSecondaryHover" | "percipioActionDangerHover" | "percipioFeedbackSuccess" | "percipioFeedbackWarning" | "percipioDanger") => string;
 }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type PercipioThemeShape = typeof percipioTheme;
 export interface PercipioTheme extends PercipioThemeShape {

package/dist/variables/deprecated-colors.d.ts

@@ -0,0 +1,156 @@
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+export declare const interactiveColors: {
+    readonly dark: "#3A10E5";
+    readonly light: "#FFD300";
+};
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+export declare const editorColors: {
+    readonly blue: "#83fff5";
+    readonly deepPurple: "#cc7bc2";
+    readonly gray: "#939598";
+    readonly green: "#b4d353";
+    readonly orange: "#ff8973";
+    readonly purple: "#b3ccff";
+    readonly red: "#ea6c8b";
+    readonly yellow: "#ffe083";
+};
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+export declare const platformColors: {
+    readonly mint: {
+        readonly '500': "#37c3be";
+        readonly '600': "#2c9c98";
+        readonly '700': "#217572";
+    };
+    readonly purple: {
+        readonly '200': "#c3c1d7";
+        readonly '300': "#a5a1c2";
+        readonly '400': "#8782ae";
+        readonly '500': "#69639a";
+        readonly '600': "#544f7b";
+        readonly '700': "#3f3b5c";
+        readonly '800': "#2a283e";
+        readonly '900': "#15141f";
+    };
+};
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+export declare const swatches: {
+    readonly beige: {
+        readonly '0': "#FFF0E5";
+    };
+    readonly blue: {
+        readonly '0': "#F5FCFF";
+        readonly '300': "#66C4FF";
+        readonly '500': "#1557FF";
+        readonly '800': "#1D2340";
+        readonly '900': "#10162f";
+    };
+    readonly green: {
+        readonly '0': "#F5FFE3";
+        readonly '400': "#AEE938";
+        readonly '700': "#008A27";
+    };
+    readonly yellow: {
+        readonly '0': "#FFFAE5";
+        readonly '400': "#CCA900";
+        readonly '500': "#FFD300";
+    };
+    readonly pink: {
+        readonly '0': "#FFF5FF";
+        readonly '400': "#F966FF";
+    };
+    readonly red: {
+        readonly '500': "#E91C11";
+    };
+    readonly orange: {
+        readonly '500': "#FF8C00";
+    };
+    readonly hyper: {
+        readonly '400': "#5533FF";
+        readonly '500': "#3A10E5";
+    };
+    readonly gray: {
+        readonly '0': "#ffffff";
+        readonly '100': "#f6f5fa";
+        readonly '200': "#dddce0";
+        readonly '300': "#c4c3c7";
+        readonly '400': "#a2a2a6";
+        readonly '500': "#828285";
+        readonly '600': "#646466";
+        readonly '700': "#4b4b4d";
+        readonly '800': "#323233";
+        readonly '900': "#19191a";
+    };
+};
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+export declare const colors: {
+    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 red: "#E91C11";
+    readonly yellow: "#FFD300";
+    readonly black: "#000000";
+    readonly white: "#ffffff";
+    readonly "blue-0": "#F5FCFF";
+    readonly "blue-300": "#66C4FF";
+    readonly "blue-500": "#1557FF";
+    readonly "blue-800": "#1D2340";
+    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-500": "#E91C11";
+    readonly "orange-500": "#FF8C00";
+    readonly "hyper-400": "#5533FF";
+    readonly "hyper-500": "#3A10E5";
+    readonly "gray-100": "#f6f5fa";
+    readonly "gray-300": "#c4c3c7";
+    readonly "gray-800": "#323233";
+    readonly "gray-200": "#dddce0";
+    readonly "gray-600": "#646466";
+    readonly "gray-900": "#19191a";
+    readonly "beige-0": "#FFF0E5";
+    readonly "blue-900": "#10162f";
+    readonly "gray-0": "#ffffff";
+    readonly "gray-400": "#a2a2a6";
+    readonly "gray-500": "#828285";
+    readonly "gray-700": "#4b4b4d";
+};

package/dist/variables/deprecated-colors.js

@@ -0,0 +1,156 @@
+import { flattenScale } from '@codecademy/variance';
+import { corePalette } from './colors';
+const {
+  black,
+  white
+} = corePalette;
+
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+
+export const interactiveColors = {
+  dark: corePalette.hyper,
+  light: corePalette.yellow
+};
+
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+
+export const editorColors = {
+  blue: '#83fff5',
+  deepPurple: '#cc7bc2',
+  gray: '#939598',
+  green: '#b4d353',
+  orange: '#ff8973',
+  purple: '#b3ccff',
+  red: '#ea6c8b',
+  yellow: '#ffe083'
+};
+
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+
+export const platformColors = {
+  mint: {
+    '500': '#37c3be',
+    '600': '#2c9c98',
+    '700': '#217572'
+  },
+  purple: {
+    '200': '#c3c1d7',
+    '300': '#a5a1c2',
+    '400': '#8782ae',
+    '500': '#69639a',
+    '600': '#544f7b',
+    '700': '#3f3b5c',
+    '800': '#2a283e',
+    '900': '#15141f'
+  }
+};
+
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+
+export const swatches = {
+  beige: {
+    '0': '#FFF0E5'
+  },
+  blue: {
+    '0': '#F5FCFF',
+    '300': '#66C4FF',
+    '500': '#1557FF',
+    '800': '#1D2340',
+    '900': '#10162f'
+  },
+  green: {
+    '0': '#F5FFE3',
+    '400': '#AEE938',
+    '700': '#008A27'
+  },
+  yellow: {
+    '0': '#FFFAE5',
+    '400': '#CCA900',
+    '500': '#FFD300'
+  },
+  pink: {
+    '0': '#FFF5FF',
+    '400': '#F966FF'
+  },
+  red: {
+    '500': '#E91C11'
+  },
+  orange: {
+    '500': '#FF8C00'
+  },
+  hyper: {
+    '400': '#5533FF',
+    '500': '#3A10E5'
+  },
+  gray: {
+    '0': white,
+    '100': '#f6f5fa',
+    '200': '#dddce0',
+    '300': '#c4c3c7',
+    '400': '#a2a2a6',
+    '500': '#828285',
+    '600': '#646466',
+    '700': '#4b4b4d',
+    '800': '#323233',
+    '900': '#19191a'
+  }
+};
+
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+
+const trueColors = {
+  beige: swatches.beige[0],
+  blue: swatches.blue[500],
+  green: swatches.green[700],
+  hyper: swatches.hyper[500],
+  lightBlue: swatches.blue[300],
+  lightGreen: swatches.green[400],
+  navy: swatches.blue[900],
+  orange: swatches.orange[500],
+  paleBlue: swatches.blue[0],
+  paleGreen: swatches.green[0],
+  palePink: swatches.pink[0],
+  paleYellow: swatches.yellow[0],
+  pink: swatches.pink[400],
+  red: swatches.red[500],
+  yellow: swatches.yellow[500],
+  black,
+  white
+};
+
+/**
+ * @deprecated
+ * Using these variables directly is no longer supported.
+ *
+ * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
+ */
+
+export const colors = {
+  ...flattenScale(swatches),
+  ...trueColors
+};

package/dist/variables/index.d.ts

@@ -5,3 +5,4 @@ export * from './responsive';
 export * from './spacing';
 export * from './timing';
 export * from './typography';
+export * from './deprecated-colors';

package/dist/variables/index.js

@@ -4,4 +4,6 @@ export * from './elements';
 export * from './responsive';
 export * from './spacing';
 export * from './timing';
-export * from './typography';
+export * from './typography';
+// Deprecated variables
+export * from './deprecated-colors';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "18.0.1-alpha.c211a2.0",
+  "version": "18.0.1-alpha.df4bce.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.c211a2.0",
+    "@codecademy/variance": "0.26.2-alpha.df4bce.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",

package/utils/variables/index.js

@@ -0,0 +1,8 @@
+if (process.env.NODE_ENV === 'development') {
+  // eslint-disable-next-line no-console
+  console.warn(
+    'Importing from `gamut-styles/utils/variables` is now deprecated, please import directly from the gamut-styles package'
+  );
+}
+
+export * from '../../dist/variables';