@retailmenot/anchor/esm/theme.js

A React UI Library by RetailMeNot

import { j as _defineProperty } from './anchor-chunk-7b9d8557.js';
import { b as INPUT_KEY, a as INPUT_THEME } from './anchor-chunk-210b63ef.js';
import { SKELETON_KEY, SKELETON_THEME } from './skeleton.js';
import { transparentize } from 'polished';
import { b as BUTTON_KEY, c as BUTTON_THEME } from './anchor-chunk-e1ca097b.js';
import './anchor-chunk-27f34e54.js';
import './anchor-chunk-cd7ef49a.js';
import './anchor-chunk-20e4020f.js';
import 'react';
import 'classnames';
import '@xstyled/styled-components';
import '@xstyled/system';

var typography = {
  fontSize: "16px",
  fontWeight: 'normal',
  lineHeight: '1.5rem',
  scale: {
    62: {
      fontSize: '3.875rem',
      lineHeight: '4.5rem'
    },
    52: {
      fontSize: '3.25rem',
      lineHeight: '4rem'
    },
    44: {
      fontSize: '2.75rem',
      lineHeight: '3rem'
    },
    36: {
      fontSize: '2.25rem',
      lineHeight: '2.5rem'
    },
    32: {
      fontSize: '2rem',
      lineHeight: '2.5rem'
    },
    28: {
      fontSize: '1.75rem',
      lineHeight: '2rem'
    },
    24: {
      fontSize: '1.5rem',
      lineHeight: '2rem'
    },
    20: {
      fontSize: '1.25rem',
      lineHeight: '1.5rem'
    },
    18: {
      fontSize: '1.125rem',
      lineHeight: '1.5rem'
    },
    16: {
      fontSize: '1rem',
      lineHeight: '1.5rem'
    },
    14: {
      fontSize: '0.875rem',
      lineHeight: '1.125rem'
    },
    12: {
      fontSize: '0.75rem',
      lineHeight: '1rem',
      fontWeight: 500
    },
    none: {}
  },
  as: {
    a: {
      fontSize: '1rem',
      lineHeight: '1.5rem',
      textDecoration: 'none',
      transition: 'color 250ms',
      color: 'text.link.base',
      cursor: 'pointer',
      '&:hover': {
        textDecoration: 'underline',
        color: 'text.link.hover'
      },
      '&:focus': {
        color: 'text.link.focus'
      },
      '&:visited': {
        color: 'text.link.visited'
      }
    },
    p: {
      fontSize: '1rem',
      lineHeight: '1.5rem'
    },
    span: {// TODO
    },
    h1: {
      fontSize: '1.75rem',
      lineHeight: '2rem'
    },
    h2: {
      fontSize: '1.5rem',
      lineHeight: '2rem'
    },
    h3: {
      fontSize: '1.25rem',
      lineHeight: '1.5rem'
    },
    h4: {
      fontSize: '1.125rem',
      lineHeight: '1.5rem'
    },
    h5: {
      fontSize: '1rem',
      lineHeight: '1.5rem'
    },
    h6: {
      fontSize: '0.875rem',
      lineHeight: '1.125rem'
    },
    blockquote: {
      margin: '1rem 0',
      padding: '0.5rem 0 0.5rem 1rem',
      borderLeft: 'light',
      borderLeftWidth: '0.25rem',
      fontStyle: 'italic',
      lineHeight: '1.5rem'
    },
    address: {
      margin: 0,
      padding: 0
    },
    code: {
      fontFamily: 'mono',
      backgroundColor: 'text.base',
      display: 'block',
      padding: '1rem',
      borderRadius: 'base',
      margin: '2rem 0',
      color: 'white',
      fontSize: '0.875rem'
    },
    pre: {
      fontFamily: 'mono'
    },
    label: {
      lineHeight: '1.5rem'
    },
    strong: {
      fontWeight: 'bold'
    },
    none: {}
  }
};

// VENDOR
var colors = {
  grayscale: {
    100: '#000000',
    200: '#323232',
    300: '#595959',
    400: '#808080',
    500: '#A6A6A6',
    600: '#D3D3D3',
    700: '#E7E7E7',
    800: '#F1F1F1',
    900: '#FAFAFA'
  },
  purple: {
    base: '#602D6C',
    light: '#91609C',
    dark: '#4B2354'
  },
  blue: {
    base: '#0998D6',
    light: '#66CCFF',
    dark: '#0074A6'
  },
  green: {
    base: '#14A382',
    light: '#00CDAD',
    dark: '#268068'
  },
  yellow: {
    base: '#F5A623',
    light: '#FFC761',
    dark: '#CC861D'
  },
  red: {
    base: '#EA4545',
    light: '#F16667',
    dark: '#CC3B3B'
  }
};
var ColorsTheme = {
  primary: colors.purple,
  secondary: colors.green,
  accent: colors.blue,
  borders: {
    // PRAGMATIC
    light: colors.grayscale[700],
    base: colors.grayscale[600],
    dark: colors.grayscale[400],
    // SEMANTIC
    error: transparentize(0.4, colors.red.dark),
    success: transparentize(0.4, colors.green.base),
    info: transparentize(0.4, colors.blue.light),
    warning: transparentize(0.4, colors.yellow.light)
  },
  text: {
    // PRAGMATIC
    base: colors.grayscale[200],
    light: colors.grayscale[300],
    // SEMANTIC
    link: {
      base: colors.blue.dark,
      hover: colors.blue.dark,
      focus: colors.blue.dark,
      visited: colors.blue.dark
    },
    disabled: colors.grayscale[600],
    placeholder: colors.grayscale[400],
    label: colors.grayscale[400]
  },
  background: {
    // PRAGMATIC
    base: colors.grayscale[800],
    light: colors.grayscale[900],
    content: 'white',
    // SEMANTIC
    error: transparentize(0.75, colors.red.dark),
    success: transparentize(0.75, colors.green.base),
    info: transparentize(0.75, colors.blue.light),
    warning: transparentize(0.75, colors.yellow.light)
  },
  error: colors.red.dark,
  success: colors.green.base,
  info: colors.blue.light,
  warning: colors.yellow.light
};

var _RootTheme;
var RootTheme = (_RootTheme = {
  typography: typography,
  radii: {
    none: '0',
    base: '4px',
    modal: '8px',
    circular: '1000px'
  }
}, _defineProperty(_RootTheme, BUTTON_KEY, BUTTON_THEME), _defineProperty(_RootTheme, INPUT_KEY, INPUT_THEME), _defineProperty(_RootTheme, "colors", ColorsTheme), _defineProperty(_RootTheme, "fonts", {
  base: 'Avenir Next, Segoe UI, Helvetica Neue, Helvetica, Roboto, sans-serif',
  mono: "'SFMono-Regular', Consolas, Liberation Mono, Menlo, Courier, monospace"
}), _defineProperty(_RootTheme, "breakpoints", {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1600
}), _defineProperty(_RootTheme, "borders", {
  light: "thin solid ".concat(ColorsTheme.borders.light),
  base: "thin solid ".concat(ColorsTheme.borders.base),
  dark: "thin solid ".concat(ColorsTheme.borders.dark)
}), _defineProperty(_RootTheme, SKELETON_KEY, SKELETON_THEME), _RootTheme);

export { RootTheme };
//# sourceMappingURL=theme.js.map