@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
271 lines (264 loc) • 6.21 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_10 = require('./anchor-chunk-925bd1f9.js');
var skeleton = require('./skeleton.js');
var polished = require('polished');
var __chunk_7 = require('./anchor-chunk-eb382a51.js');
require('./anchor-chunk-9d9a5df6.js');
require('./anchor-chunk-1efd6395.js');
require('./anchor-chunk-598e53e1.js');
require('react');
require('classnames');
require('@xstyled/styled-components');
require('@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: polished.transparentize(0.4, colors.red.dark),
success: polished.transparentize(0.4, colors.green.base),
info: polished.transparentize(0.4, colors.blue.light),
warning: polished.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: polished.transparentize(0.75, colors.red.dark),
success: polished.transparentize(0.75, colors.green.base),
info: polished.transparentize(0.75, colors.blue.light),
warning: polished.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'
}
}, __chunk_1._defineProperty(_RootTheme, __chunk_7.BUTTON_KEY, __chunk_7.BUTTON_THEME), __chunk_1._defineProperty(_RootTheme, __chunk_10.INPUT_KEY, __chunk_10.INPUT_THEME), __chunk_1._defineProperty(_RootTheme, "colors", ColorsTheme), __chunk_1._defineProperty(_RootTheme, "fonts", {
base: 'Avenir Next, Segoe UI, Helvetica Neue, Helvetica, Roboto, sans-serif',
mono: "'SFMono-Regular', Consolas, Liberation Mono, Menlo, Courier, monospace"
}), __chunk_1._defineProperty(_RootTheme, "breakpoints", {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1600
}), __chunk_1._defineProperty(_RootTheme, "borders", {
light: "thin solid ".concat(ColorsTheme.borders.light),
base: "thin solid ".concat(ColorsTheme.borders.base),
dark: "thin solid ".concat(ColorsTheme.borders.dark)
}), __chunk_1._defineProperty(_RootTheme, skeleton.SKELETON_KEY, skeleton.SKELETON_THEME), _RootTheme);
exports.RootTheme = RootTheme;
//# sourceMappingURL=theme.js.map