@codecademy/gamut-styles 17.9.1-alpha.2ea313.0 → 17.9.1-alpha.3e8b72.0

package/dist/themes/platform.js

@@ -1,78 +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 const platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
-  light: {
-    background: {
-      primary: 'blue-0'
-    },
-    editor: {
-      attribute: 'green-700',
-      annotation: 'red-500',
-      atom: 'pink-800',
-      basic: 'navy-800',
-      comment: 'comment-light',
-      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': 'indent-active-light',
-        'indent-inactive': 'indent-inactive-light',
-        'line-number-active': 'line-number-active-light',
-        'line-number-inactive': 'line-number-inactive-light'
-      }
-    }
-  },
-  dark: {
-    editor: {
-      attribute: 'green-400',
-      annotation: 'red-300',
-      atom: 'pink-400',
-      basic: 'white',
-      comment: 'comment-dark',
-      constant: 'orange-500',
-      decoration: 'red-300',
-      invalid: 'red-300',
-      key: 'blue-300',
-      keyword: 'purple-300',
-      number: 'red-300',
-      operator: 'red-300',
-      predefined: 'white',
-      property: 'red-300',
-      regexp: 'green-400',
-      string: 'yellow-500',
-      tag: 'red-300',
-      text: 'orange-500',
-      value: 'yellow-500',
-      variable: 'green-400',
-      ui: {
-        background: 'navy-900',
-        text: 'white',
-        'indent-active': 'indent-active-dark',
-        'indent-inactive': 'indent-inactive-dark',
-        'line-number-active': 'line-number-active-dark',
-        'line-number-inactive': 'line-number-inactive-dark'
-      }
-    }
-  }
-}).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 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,16 +0,0 @@
-import get from 'lodash/get';
-
-/**
- * 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 ({
-    theme
-  }) => get(theme, path);
-}

package/dist/variables/borderRadii.d.ts

@@ -1,8 +0,0 @@
-export declare const borderRadii: {
-    none: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    full: string;
-};

package/dist/variables/borderRadii.js

@@ -1,8 +0,0 @@
-export const borderRadii = {
-  none: '0px',
-  sm: '2px',
-  md: '4px',
-  lg: '8px',
-  xl: '16px',
-  full: '999px'
-};

package/dist/variables/colors.d.ts

@@ -1,310 +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 '900': "#151C07";
-    };
-    readonly yellow: {
-        readonly '0': "#FFFAE5";
-        readonly '400': "#CCA900";
-        readonly '500': "#FFD300";
-        readonly '900': "#211B00";
-    };
-    readonly pink: {
-        readonly '0': "#FFF5FF";
-        readonly '400': "#F966FF";
-    };
-    readonly red: {
-        readonly '0': "#FBF1F0";
-        readonly '300': "#E85D7F";
-        readonly '400': "#DC5879";
-        readonly '500': "#E91C11";
-        readonly '600': "#BE1809";
-        readonly '900': "#280503";
-    };
-    readonly orange: {
-        readonly '100': "#FFE8CC";
-        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 "beige-100": "#FFF0E5";
-    readonly "blue-0": "#F5FCFF";
-    readonly "blue-100": "#D3F2FF";
-    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-0": "#F5FFE3";
-    readonly "green-100": "#EAFDC6";
-    readonly "green-400": "#AEE938";
-    readonly "green-700": "#008A27";
-    readonly "green-900": "#151C07";
-    readonly "yellow-0": "#FFFAE5";
-    readonly "yellow-400": "#CCA900";
-    readonly "yellow-500": "#FFD300";
-    readonly "yellow-900": "#211B00";
-    readonly "pink-0": "#FFF5FF";
-    readonly "pink-400": "#F966FF";
-    readonly "red-0": "#FBF1F0";
-    readonly "red-300": "#E85D7F";
-    readonly "red-400": "#DC5879";
-    readonly "red-500": "#E91C11";
-    readonly "red-600": "#BE1809";
-    readonly "red-900": "#280503";
-    readonly "orange-100": "#FFE8CC";
-    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': "#006D82";
-    };
-    readonly purple: {
-        readonly '300': "#B3CCFF";
-    };
-};
-export declare const truePlatformColors: {
-    readonly lightBeige: "#FFFBF8";
-    readonly gold: "#8A7300";
-    readonly teal: "#006D82";
-    readonly purple: "#B3CCFF";
-};
-export declare const platformEditorColors: {
-    readonly 'comment-light': "#686C7B";
-    readonly 'comment-dark': "#84868D";
-    readonly 'indent-active-light': "#BCBDC4";
-    readonly 'indent-active-dark': "#3B3D49";
-    readonly 'indent-inactive-light': "#8E919D";
-    readonly 'indent-inactive-dark': "#5F616B";
-    readonly 'line-number-active-light': "#31374C";
-    readonly 'line-number-active-dark': "#CECFD2";
-    readonly 'line-number-inactive-light': "#686C7B";
-    readonly 'line-number-inactive-dark': "#84868D";
-};
-export declare const platformPalette: {
-    readonly lightBeige: "#FFFBF8";
-    readonly gold: "#8A7300";
-    readonly teal: "#006D82";
-    readonly purple: "#B3CCFF";
-    readonly 'comment-light': "#686C7B";
-    readonly 'comment-dark': "#84868D";
-    readonly 'indent-active-light': "#BCBDC4";
-    readonly 'indent-active-dark': "#3B3D49";
-    readonly 'indent-inactive-light': "#8E919D";
-    readonly 'indent-inactive-dark': "#5F616B";
-    readonly 'line-number-active-light': "#31374C";
-    readonly 'line-number-active-dark': "#CECFD2";
-    readonly 'line-number-inactive-light': "#686C7B";
-    readonly 'line-number-inactive-dark': "#84868D";
-    readonly "beige-0": "#FFFBF8";
-    readonly "pink-800": "#CA00D1";
-    readonly "orange-800": "#D14900";
-    readonly "gold-800": "#8A7300";
-    readonly "teal-500": "#006D82";
-    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";
-    "green-900": "#151C07";
-    "yellow-0": "#FFFAE5";
-    "yellow-400": "#CCA900";
-    "yellow-500": "#FFD300";
-    "yellow-900": "#211B00";
-    "pink-0": "#FFF5FF";
-    "pink-400": "#F966FF";
-    "red-0": "#FBF1F0";
-    "red-300": "#E85D7F";
-    "red-400": "#DC5879";
-    "red-500": "#E91C11";
-    "red-600": "#BE1809";
-    "red-900": "#280503";
-    "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

@@ -1,170 +0,0 @@
-import { flattenScale } from '@codecademy/variance';
-import { rgba } from 'polished';
-/**
- * Core Colors
- */
-
-const black = '#000000';
-const white = '#ffffff';
-const navy = '#10162F';
-export const 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.47),
-    '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',
-    '900': '#151C07'
-  },
-  yellow: {
-    '0': '#FFFAE5',
-    '400': '#CCA900',
-    '500': '#FFD300',
-    '900': '#211B00'
-  },
-  pink: {
-    '0': '#FFF5FF',
-    '400': '#F966FF'
-  },
-  red: {
-    '0': '#FBF1F0',
-    '300': '#E85D7F',
-    '400': '#DC5879',
-    '500': '#E91C11',
-    '600': '#BE1809',
-    '900': '#280503'
-  },
-  orange: {
-    '100': '#FFE8CC',
-    '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.35),
-    '500': rgba(white, 0.5),
-    '600': rgba(white, 0.65),
-    '700': rgba(white, 0.8)
-  }
-};
-export const 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[400],
-  red: coreSwatches.red[500],
-  yellow: coreSwatches.yellow[500],
-  black,
-  white
-};
-export const corePalette = {
-  ...flattenScale(coreSwatches),
-  ...trueColors
-};
-
-/**
- * Platform Colors
- */
-
-export const platformSwatches = {
-  beige: {
-    '0': '#FFFBF8'
-  },
-  gold: {
-    '800': '#8A7300'
-  },
-  orange: {
-    '800': '#D14900'
-  },
-  pink: {
-    '800': '#CA00D1'
-  },
-  teal: {
-    '500': '#006D82'
-  },
-  purple: {
-    '300': '#B3CCFF'
-  }
-};
-export const truePlatformColors = {
-  lightBeige: platformSwatches.beige[0],
-  gold: platformSwatches.gold[800],
-  teal: platformSwatches.teal[500],
-  purple: platformSwatches.purple[300]
-};
-export const platformEditorColors = {
-  'comment-light': '#686C7B',
-  'comment-dark': '#84868D',
-  'indent-active-light': '#BCBDC4',
-  'indent-active-dark': '#3B3D49',
-  'indent-inactive-light': '#8E919D',
-  'indent-inactive-dark': '#5F616B',
-  'line-number-active-light': '#31374C',
-  'line-number-active-dark': '#CECFD2',
-  'line-number-inactive-light': '#686C7B',
-  'line-number-inactive-dark': '#84868D'
-};
-export const platformPalette = {
-  ...flattenScale(platformSwatches),
-  ...platformEditorColors,
-  ...truePlatformColors
-};
-
-/**
- * LX Studio Colors
- */
-
-export const lxStudioColors = {
-  lxStudioSuccess: '#06844F',
-  lxStudioBgPrimary: '#FAFBFC',
-  lxStudioPurple: '#5628FE',
-  lxStudioPurpleHover: '#7955FC'
-};
-export const lxStudioPalette = {
-  ...corePalette,
-  ...lxStudioColors
-};