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

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";
-};

package/dist/variables/deprecated-colors.js

@@ -1,156 +0,0 @@
-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/elements.d.ts

@@ -1,11 +0,0 @@
-export declare const elements: {
-    readonly headerHeight: {
-        readonly base: "4rem";
-        readonly md: "5rem";
-    };
-    /**
-     * Semi-arbitrary z-index for global page headers.
-     * @remarks PLEASE talk to web platform before adding new z-index constants!
-     */
-    readonly headerZ: 15;
-};

package/dist/variables/elements.js

@@ -1,11 +0,0 @@
-export const elements = {
-  headerHeight: {
-    base: '4rem',
-    md: '5rem'
-  },
-  /**
-   * Semi-arbitrary z-index for global page headers.
-   * @remarks PLEASE talk to web platform before adding new z-index constants!
-   */
-  headerZ: 15
-};

package/dist/variables/index.d.ts

@@ -1,8 +0,0 @@
-export * from './borderRadii';
-export * from './colors';
-export * from './elements';
-export * from './responsive';
-export * from './spacing';
-export * from './timing';
-export * from './typography';
-export * from './deprecated-colors';

package/dist/variables/index.js

@@ -1,9 +0,0 @@
-export * from './borderRadii';
-export * from './colors';
-export * from './elements';
-export * from './responsive';
-export * from './spacing';
-export * from './timing';
-export * from './typography';
-// Deprecated variables
-export * from './deprecated-colors';

package/dist/variables/responsive.d.ts

@@ -1,28 +0,0 @@
-export declare const breakpoints: {
-    readonly xs: "480px";
-    readonly sm: "768px";
-    readonly md: "1024px";
-    readonly lg: "1200px";
-    readonly xl: "1440px";
-};
-export type MediaSize = keyof typeof breakpoints;
-export type ContainerSize = keyof typeof containerQueries;
-export declare const mediaQueries: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export declare const containerQueries: {
-    c_base: string;
-    c_xs: string;
-    c_sm: string;
-    c_md: string;
-    c_lg: string;
-    c_xl: string;
-};
-export declare const contentWidths: {
-    md: "1200px";
-    max: "1440px";
-};

package/dist/variables/responsive.js

@@ -1,28 +0,0 @@
-export const breakpoints = {
-  xs: '480px',
-  sm: '768px',
-  md: '1024px',
-  lg: '1200px',
-  xl: '1440px'
-};
-const createMediaQuery = (size, direction) => `@media only screen and (${direction}-width: ${breakpoints[size]})`;
-const createContainerQuery = (size, direction) => `@container (${direction}-width: ${breakpoints[size]})`;
-export const mediaQueries = {
-  xs: createMediaQuery('xs', 'min'),
-  sm: createMediaQuery('sm', 'min'),
-  md: createMediaQuery('md', 'min'),
-  lg: createMediaQuery('lg', 'min'),
-  xl: createMediaQuery('xl', 'min')
-};
-export const containerQueries = {
-  c_base: '@container (min-width: 1px)',
-  c_xs: createContainerQuery('xs', 'min'),
-  c_sm: createContainerQuery('sm', 'min'),
-  c_md: createContainerQuery('md', 'min'),
-  c_lg: createContainerQuery('lg', 'min'),
-  c_xl: createContainerQuery('xl', 'min')
-};
-export const contentWidths = {
-  md: breakpoints.lg,
-  max: breakpoints.xl
-};

package/dist/variables/spacing.d.ts

@@ -1,13 +0,0 @@
-export declare const spacing: {
-    readonly 0: 0;
-    readonly 4: string;
-    readonly 8: string;
-    readonly 12: string;
-    readonly 16: string;
-    readonly 24: string;
-    readonly 32: string;
-    readonly 40: string;
-    readonly 48: string;
-    readonly 64: string;
-    readonly 96: string;
-};

package/dist/variables/spacing.js

@@ -1,14 +0,0 @@
-import { pxRem } from '../styles/pxRem';
-export const spacing = {
-  0: 0,
-  4: pxRem(4),
-  8: pxRem(8),
-  12: pxRem(12),
-  16: pxRem(16),
-  24: pxRem(24),
-  32: pxRem(32),
-  40: pxRem(40),
-  48: pxRem(48),
-  64: pxRem(64),
-  96: pxRem(96)
-};

package/dist/variables/timing.d.ts

@@ -1,12 +0,0 @@
-export declare const timingValues: {
-    fast: number;
-    medium: number;
-    base: number;
-    slow: number;
-};
-export declare const timing: {
-    fast: string;
-    medium: string;
-    base: string;
-    slow: string;
-};

package/dist/variables/timing.js

@@ -1,12 +0,0 @@
-export const timingValues = {
-  fast: 150,
-  medium: 200,
-  base: 300,
-  slow: 350
-};
-export const timing = {
-  fast: `${timingValues.fast}ms`,
-  medium: `${timingValues.medium}ms`,
-  base: `${timingValues.base}ms`,
-  slow: `${timingValues.slow}ms`
-};

package/dist/variables/typography.d.ts

@@ -1,32 +0,0 @@
-export declare const fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
-export declare const fontBase = "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
-export declare const fontMonospace = "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
-export declare const fontSystem = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
-export declare const fontFamily: {
-    readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
-    readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
-    readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
-    readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
-};
-export declare const fontSize: {
-    readonly 64: string;
-    readonly 44: string;
-    readonly 34: string;
-    readonly 26: string;
-    readonly 22: string;
-    readonly 20: string;
-    readonly 18: string;
-    readonly 16: string;
-    readonly 14: string;
-};
-export declare const lineHeight: {
-    readonly base: 1.5;
-    readonly spacedTitle: 1.3;
-    readonly title: 1.2;
-};
-export declare const fontWeight: {
-    readonly base: 400;
-    readonly title: 700;
-    readonly 700: 700;
-    readonly 400: 400;
-};

package/dist/variables/typography.js

@@ -1,39 +0,0 @@
-import { pxRem } from '../styles/pxRem';
-export const fontAccent = `"Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
-"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-"Helvetica Neue", sans-serif`;
-export const fontBase = `"Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
-"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-sans-serif`;
-export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas,
-monospace`;
-export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
-"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
-export const fontFamily = {
-  accent: fontAccent,
-  base: fontBase,
-  monospace: fontMonospace,
-  system: fontSystem
-};
-export const fontSize = {
-  64: pxRem(64),
-  44: pxRem(44),
-  34: pxRem(34),
-  26: pxRem(26),
-  22: pxRem(22),
-  20: pxRem(20),
-  18: pxRem(18),
-  16: pxRem(16),
-  14: pxRem(14)
-};
-export const lineHeight = {
-  base: 1.5,
-  spacedTitle: 1.3,
-  title: 1.2
-};
-export const fontWeight = {
-  base: 400,
-  title: 700,
-  700: 700,
-  400: 400
-};