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

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

import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';

var typography = {
  letterSpacings: {
    tighter: '-0.02em',
    tight: '-0.01em',
    normal: '0',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em'
  },
  lineHeights: {
    normal: 'normal',
    none: '1',
    shorter: '1.333',
    "short": '1.4',
    base: '1.5',
    tall: '1.625',
    taller: '2'
  },
  fontWeights: {
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900
  },
  fonts: {
    heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
    mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
  },
  fontSizes: [12, 14, 16, 20, 24, 28, 32, 36, 48, 64, 96, 128]
};
var displayLarge = {
  fontWeight: typography.fontWeights.semibold,
  fontSize: typography.fontSizes[4],
  lineHeight: typography.lineHeights.shorter,
  letterSpacing: '-0.02em'
};
var displaySmall = {
  fontWeight: typography.fontWeights.medium,
  fontSize: typography.fontSizes[3],
  lineHeight: typography.lineHeights["short"],
  letterSpacing: '-0.02em'
};
var bodyLarge = {
  fontWeight: typography.fontWeights.normal,
  fontSize: typography.fontSizes[2],
  lineHeight: typography.lineHeights.base,
  letterSpacing: '-0.01em'
};

var bodyLargeMedium = /*#__PURE__*/_objectSpread2({}, bodyLarge, {
  fontWeight: typography.fontWeights.medium
});

var bodySmall = {
  fontWeight: typography.fontWeights.normal,
  fontSize: typography.fontSizes[1],
  lineHeight: typography.lineHeights["short"],
  letterSpacing: '-0.01em'
};

var bodySmallMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
  fontWeight: typography.fontWeights.medium
});

var caption = {
  fontSize: typography.fontSizes[0],
  lineHeight: typography.lineHeights.shorter,
  letterSpacing: '0.00em'
};

var captionMedium = /*#__PURE__*/_objectSpread2({}, bodySmall, {
  fontWeight: typography.fontWeights.medium
});

var textStyles = {
  display: {
    large: displayLarge,
    small: displaySmall
  },
  body: {
    large: /*#__PURE__*/_objectSpread2({}, bodyLarge, {
      medium: bodyLargeMedium
    }),
    small: /*#__PURE__*/_objectSpread2({}, bodySmall, {
      medium: bodySmallMedium
    })
  },
  caption: /*#__PURE__*/_objectSpread2({}, caption, {
    medium: captionMedium
  })
};
var typography$1 = /*#__PURE__*/_objectSpread2({}, typography, {
  textStyles: textStyles
});

export default typography$1;
export { textStyles };
//# sourceMappingURL=typography.esm.js.map