@blockstack/ui/dist/theme/theme.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
import colors from './colors.esm.js';
import { sizes } from './sizes.esm.js';
import typography from './typography.esm.js';

var space = sizes;
var shadows = {
  low: '0px 1px 2px rgba(0, 0, 0, 0.04)',
  mid: '0px 1px 2px rgba(27, 39, 51, 0.04), 0px 4px 8px rgba(27, 39, 51, 0.04)',
  high: '0px 8px 16px rgba(27, 39, 51, 0.08)',
  inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
  none: 'none',
  focus: '0 0 0 3px rgba(170, 179, 255, 0.75)',
  'button.secondary': '0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.08)'
};
var breakpoints = ['30em', '48em', '62em', '80em'];
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3];
var zIndices = {
  hide: -1,
  auto: 'auto',
  '0': 0,
  '10': 10,
  '20': 20,
  '30': 30,
  '40': 40,
  '50': 50,
  '60': 60,
  '70': 70,
  '80': 80
};
var radii = {
  none: '0',
  sm: '0.125rem',
  md: '0.25rem',
  lg: '0.5rem',
  full: '9999px'
};
var opacity = {
  '0': '0',
  '20%': '0.2',
  '40%': '0.4',
  '60%': '0.6',
  '80%': '0.8',
  '100%': '1'
};
var borders = {
  none: 0,
  '1px': '1px solid',
  '2px': '2px solid',
  '4px': '4px solid'
};

var theme = /*#__PURE__*/_objectSpread2({
  breakpoints: breakpoints,
  zIndices: zIndices,
  radii: radii,
  opacity: opacity,
  borders: borders,
  colors: colors
}, typography, {
  sizes: sizes,
  shadows: shadows,
  space: space
});

var transition = 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)';

export { shadows, theme, transition };
//# sourceMappingURL=theme.esm.js.map