blockstack-ui/dist/common/theme.js

Blockstack UI components built with css-in-js and styled-system.

"use strict";

exports.__esModule = true;
exports.theme = void 0;

require("core-js/modules/es6.object.assign");

var _polished = require("polished");

var colors = {
  blue: Object.assign('#3700FF', {
    very_light: 'hsl(202, 40%, 97%)',
    // canvas
    light: 'hsl(202, 40%, 96%)',
    // canvas
    mid: 'hsl(202, 40%, 83%)',
    // borders / labels on white
    neutral: '#403F83',
    // text
    dark: '#211F6D',
    // large fills
    darker: '#1A1959',
    // fills on blue.dark
    accent: '#01FEFE' // cyan / accents / links

  }),
  red: '#F27D66',
  borders: {
    dark: Object.assign('#2F2C88', {
      focus: (0, _polished.lighten)(0.12, '#403F83')
    }),
    // borders on dark,
    light: 'hsl(202, 40%, 83%)'
  } // hsl(241, 30%, 55%)

};
var breakpoints = ['40em', '52em', '64em', '72em', '85em'];
var fontSizes = [12, 14, 16, 20, 24, 28, 32, 36, 48, 64, 96, 128];
var space = [0, 4, 8, 12, 16, 24, 32, 48, 64, 96];
var lineHeights = [1, 1.125, 1.25, 1.5, 1.75];
var fontWeights = {
  light: 300,
  normal: 400,
  semibold: 600,
  bold: 700
};
var fonts = {
  brand: "'IBM Plex Mono', 'Fira Mono', monospace",
  default: "-apple-system,system-ui,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif"
};
var radii = [0, 2, 4, 8];
var borders = [0, '1px solid', '2px solid'];
var transition = [undefined, '0.5s all cubic-bezier(.19,1,.22,1)'];
var shadows = {
  button: Object.assign('0px 2px 6px rgba(37, 0, 105, 0.22)', {
    hover: '0px 5px 9px rgba(37,0,105,0.28)',
    active: '0px 2px 2px rgba(37, 0, 105, 0.42)'
  }),
  card: Object.assign('0px 4px 4px rgba(0, 0, 0, 0.05)', {}),
  general: Object.assign('0px 4px 4px rgba(0, 0, 0, 0.05)', {}),
  focused: Object.assign((0, _polished.rgba)(colors.blue.accent, 0.14) + " 0px 0px 0px 4px", {
    marketing: 'rgba(16, 112, 202, 0.14) 0px 0px 0px 4px',
    light: "hsl(205,30%,95%) 0 0 0 3px"
  })
};
var theme = {
  breakpoints: breakpoints,
  colors: colors,
  space: space,
  fontSizes: fontSizes,
  lineHeights: lineHeights,
  fontWeights: fontWeights,
  radii: radii,
  borders: borders,
  shadows: shadows,
  transition: transition,
  fonts: fonts
};
exports.theme = theme;