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

package/dist/variables/deprecated-colors.js

@@ -1,155 +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 { corePalette } from './colors';
-var black = corePalette.black,
-  white = corePalette.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 var 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 var 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 var 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 var 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)
- */
-
-var 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: black,
-  white: 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 var colors = _objectSpread(_objectSpread({}, 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 var 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,7 +0,0 @@
-export * from './colors';
-export * from './responsive';
-export * from './spacing';
-export * from './typography';
-export * from './timing';
-export * from './elements';
-export * from './deprecated-colors';

package/dist/variables/index.js

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

package/dist/variables/responsive.d.ts

@@ -1,19 +0,0 @@
-export declare const breakpoints: {
-    readonly xs: "480px";
-    readonly sm: "768px";
-    readonly md: "1024px";
-    readonly lg: "1200px";
-    readonly xl: "1440px";
-};
-export declare type MediaSize = keyof typeof breakpoints;
-export declare const mediaQueries: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export declare const contentWidths: {
-    md: "1200px";
-    max: "1440px";
-};

package/dist/variables/responsive.js

@@ -1,21 +0,0 @@
-export var breakpoints = {
-  xs: '480px',
-  sm: '768px',
-  md: '1024px',
-  lg: '1200px',
-  xl: '1440px'
-};
-var createMediaQuery = function createMediaQuery(size, direction) {
-  return "@media only screen and (".concat(direction, "-width: ").concat(breakpoints[size], ")");
-};
-export var mediaQueries = {
-  xs: createMediaQuery('xs', 'min'),
-  sm: createMediaQuery('sm', 'min'),
-  md: createMediaQuery('md', 'min'),
-  lg: createMediaQuery('lg', 'min'),
-  xl: createMediaQuery('xl', 'min')
-};
-export var 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 var 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,10 +0,0 @@
-export declare const timingValues: {
-    fast: number;
-    medium: number;
-    slow: number;
-};
-export declare const timing: {
-    fast: string;
-    medium: string;
-    slow: string;
-};

package/dist/variables/timing.js

@@ -1,10 +0,0 @@
-export var timingValues = {
-  fast: 150,
-  medium: 200,
-  slow: 350
-};
-export var timing = {
-  fast: "".concat(timingValues.fast, "ms"),
-  medium: "".concat(timingValues.medium, "ms"),
-  slow: "".concat(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,33 +0,0 @@
-import { pxRem } from '../styles/pxRem';
-export var fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
-export var fontBase = "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
-export var fontMonospace = "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
-export var fontSystem = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
-export var fontFamily = {
-  accent: fontAccent,
-  base: fontBase,
-  monospace: fontMonospace,
-  system: fontSystem
-};
-export var 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 var lineHeight = {
-  base: 1.5,
-  spacedTitle: 1.3,
-  title: 1.2
-};
-export var fontWeight = {
-  base: 400,
-  title: 700,
-  700: 700,
-  400: 400
-};