@codecademy/gamut-styles 16.1.2 → 16.1.3-alpha.187436.0

package/dist/themes/platform.js

@@ -1,73 +0,0 @@
-import { createTheme } from '@codecademy/variance';
-import { platformPalette } from '../variables';
-import { coreTheme } from './core';
-
-/**
- * @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 var platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
-  light: {
-    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: {
-    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'
-      }
-    }
-  }
-}).build();

package/dist/typings/theme.d.ts

@@ -1,6 +0,0 @@
-import '@emotion/react';
-import { CoreTheme } from '../themes';
-
-declare module '@emotion/react' {
-  export interface Theme extends CoreTheme {}
-}

package/dist/utilities/index.d.ts

@@ -1 +0,0 @@
-export * from './themed';

package/dist/utilities/index.js

@@ -1 +0,0 @@
-export * from './themed';

package/dist/utilities/themed.d.ts

@@ -1,14 +0,0 @@
-import { Path, PathValue } from '@codecademy/variance';
-import { Theme } from '@emotion/react';
-/**
- * Creates a function that will look up the a design token from the `theme` context of a
- * tyled component or a component that accepts theme as a prop.
- *
- * @param path Valid path for current theme
- * @returns A function that accepts an object with a keyof `theme` and looks up the
- *  value at supplied path parameter
- */
-export declare type SafeThemeValues = Omit<Theme, '_variables' | '_tokens' | '_getColorValue' | 'modes'>;
-export declare function themed<P extends Path<SafeThemeValues>>(path: P): (props: {
-    theme: Theme;
-}) => PathValue<SafeThemeValues, P>;

package/dist/utilities/themed.js

@@ -1,17 +0,0 @@
-import { get } from 'lodash';
-
-/**
- * Creates a function that will look up the a design token from the `theme` context of a
- * tyled component or a component that accepts theme as a prop.
- *
- * @param path Valid path for current theme
- * @returns A function that accepts an object with a keyof `theme` and looks up the
- *  value at supplied path parameter
- */
-
-export function themed(path) {
-  return function (_ref) {
-    var theme = _ref.theme;
-    return get(theme, path);
-  };
-}

package/dist/variables/colors.d.ts

@@ -1,193 +0,0 @@
-export declare const coreSwatches: {
-    readonly beige: {
-        readonly '100': "#FFF0E5";
-    };
-    readonly blue: {
-        readonly '0': "#F5FCFF";
-        readonly '100': "#D3F2FF";
-        readonly '300': "#66C4FF";
-        readonly '400': "#3388FF";
-        readonly '500': "#1557FF";
-        readonly '800': "#1D2340";
-    };
-    readonly navy: {
-        readonly '100': string;
-        readonly '200': string;
-        readonly '300': string;
-        readonly '400': string;
-        readonly '500': string;
-        readonly '600': string;
-        readonly '700': string;
-        readonly '800': "#10162F";
-        readonly '900': "#0A0D1C";
-    };
-    readonly green: {
-        readonly '0': "#F5FFE3";
-        readonly '100': "#EAFDC6";
-        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 '0': "#E85D7F";
-        readonly '100': "#DC5879";
-        readonly '500': "#E91C11";
-        readonly '600': "#BE1809";
-    };
-    readonly orange: {
-        readonly '500': "#FF8C00";
-    };
-    readonly hyper: {
-        readonly '400': "#5533FF";
-        readonly '500': "#3A10E5";
-    };
-    readonly gray: {
-        readonly '100': "#F5F5F5";
-        readonly '200': "#EEEEEE";
-        readonly '300': "#E0E0E0";
-        readonly '600': "#9E9E9E";
-        readonly '800': "#616161";
-        readonly '900': "#424242";
-    };
-    readonly white: {
-        readonly '100': string;
-        readonly '200': string;
-        readonly '300': string;
-        readonly '400': string;
-        readonly '500': string;
-        readonly '600': string;
-        readonly '700': string;
-    };
-};
-export declare const trueColors: {
-    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";
-};
-export declare const corePalette: {
-    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-white-slight": string;
-    readonly "shadow-white-heavy": string;
-    readonly "shadow-black-slight": string;
-    readonly "shadow-black-heavy": string;
-    readonly "beige-100": "#FFF0E5";
-    readonly "blue-100": "#D3F2FF";
-    readonly "blue-0": "#F5FCFF";
-    readonly "blue-300": "#66C4FF";
-    readonly "blue-400": "#3388FF";
-    readonly "blue-500": "#1557FF";
-    readonly "blue-800": "#1D2340";
-    readonly "navy-100": string;
-    readonly "navy-300": string;
-    readonly "navy-400": string;
-    readonly "navy-500": string;
-    readonly "navy-800": "#10162F";
-    readonly "navy-200": string;
-    readonly "navy-600": string;
-    readonly "navy-700": string;
-    readonly "navy-900": "#0A0D1C";
-    readonly "green-100": "#EAFDC6";
-    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";
-    readonly "white-100": string;
-    readonly "white-300": string;
-    readonly "white-400": string;
-    readonly "white-500": string;
-    readonly "white-200": string;
-    readonly "white-600": string;
-    readonly "white-700": string;
-};
-/**
- * Platform Colors
- */
-export declare const platformSwatches: {
-    readonly beige: {
-        readonly '0': "#FFFBF8";
-    };
-    readonly gold: {
-        readonly '800': "#8A7300";
-    };
-    readonly orange: {
-        readonly '800': "#D14900";
-    };
-    readonly pink: {
-        readonly '800': "#CA00D1";
-    };
-    readonly teal: {
-        readonly '500': "#027E97";
-    };
-    readonly purple: {
-        readonly '300': "#B3CCFF";
-    };
-};
-export declare const platformPalette: {
-    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";
-};

package/dist/variables/colors.js

@@ -1,149 +0,0 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import { flattenScale } from '@codecademy/variance';
-import { rgba } from 'polished';
-/**
- * Core Colors
- */
-
-var black = '#000000';
-var white = '#ffffff';
-var navy = '#10162F';
-var 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 var coreSwatches = {
-  beige: {
-    '100': '#FFF0E5'
-  },
-  blue: {
-    '0': '#F5FCFF',
-    '100': '#D3F2FF',
-    '300': '#66C4FF',
-    '400': '#3388FF',
-    '500': '#1557FF',
-    '800': '#1D2340'
-  },
-  navy: {
-    '100': rgba(navy, 0.04),
-    '200': rgba(navy, 0.12),
-    '300': rgba(navy, 0.28),
-    '400': rgba(navy, 0.45),
-    '500': rgba(navy, 0.63),
-    '600': rgba(navy, 0.75),
-    '700': rgba(navy, 0.86),
-    '800': navy,
-    '900': '#0A0D1C'
-  },
-  green: {
-    '0': '#F5FFE3',
-    '100': '#EAFDC6',
-    '400': '#AEE938',
-    '700': '#008A27'
-  },
-  yellow: {
-    '0': '#FFFAE5',
-    '400': '#CCA900',
-    '500': '#FFD300'
-  },
-  pink: {
-    '0': '#FFF5FF',
-    '400': '#F966FF'
-  },
-  red: {
-    '0': '#E85D7F',
-    '100': '#DC5879',
-    '500': '#E91C11',
-    '600': '#BE1809'
-  },
-  orange: {
-    '500': '#FF8C00'
-  },
-  hyper: {
-    '400': '#5533FF',
-    '500': '#3A10E5'
-  },
-  gray: {
-    '100': '#F5F5F5',
-    '200': '#EEEEEE',
-    '300': '#E0E0E0',
-    '600': '#9E9E9E',
-    '800': '#616161',
-    '900': '#424242'
-  },
-  white: {
-    '100': rgba(white, 0.04),
-    '200': rgba(white, 0.09),
-    '300': rgba(white, 0.2),
-    '400': rgba(white, 0.33),
-    '500': rgba(white, 0.5),
-    '600': rgba(white, 0.65),
-    '700': rgba(white, 0.8)
-  }
-};
-export var trueColors = {
-  beige: coreSwatches.beige[100],
-  blue: coreSwatches.blue[500],
-  green: coreSwatches.green[700],
-  hyper: coreSwatches.hyper[500],
-  lightBlue: coreSwatches.blue[300],
-  lightGreen: coreSwatches.green[400],
-  navy: coreSwatches.navy[800],
-  orange: coreSwatches.orange[500],
-  paleBlue: coreSwatches.blue[0],
-  paleGreen: coreSwatches.green[0],
-  palePink: coreSwatches.pink[0],
-  paleYellow: coreSwatches.yellow[0],
-  pink: coreSwatches.pink[400],
-  paleRed: coreSwatches.red[100],
-  red: coreSwatches.red[500],
-  yellow: coreSwatches.yellow[500],
-  black: black,
-  white: white
-};
-export var corePalette = _objectSpread(_objectSpread(_objectSpread({}, flattenScale(coreSwatches)), flattenScale(effects)), trueColors);
-
-/**
- * Platform Colors
- */
-
-export var platformSwatches = {
-  beige: {
-    '0': '#FFFBF8'
-  },
-  gold: {
-    '800': '#8A7300'
-  },
-  orange: {
-    '800': '#D14900'
-  },
-  pink: {
-    '800': '#CA00D1'
-  },
-  teal: {
-    '500': '#027E97'
-  },
-  purple: {
-    '300': '#B3CCFF'
-  }
-};
-var truePlatformColors = {
-  lightBeige: platformSwatches.beige[0],
-  gold: platformSwatches.gold[800],
-  teal: platformSwatches.teal[500],
-  purple: platformSwatches.purple[300]
-};
-export var platformPalette = _objectSpread(_objectSpread({}, flattenScale(platformSwatches)), truePlatformColors);

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

@@ -1,156 +0,0 @@
-/**
- * @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";
-};