@procore/core-react/dist/Typography/Typography.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { colors } from '../_styles/colors';
export var typographyWeights = {
  regular: 400,
  semibold: 600,
  bold: 700
};
export var typographyLineHeight = {
  small: 16,
  body: 20,
  h1: 32,
  h2: 28,
  h3: 24,
  label: 20
};
var body = /*#__PURE__*/css(["font-family:inherit;font-size:14px;font-weight:", ";letter-spacing:0.15px;line-height:", "px;"], typographyWeights.regular, typographyLineHeight.body);
var h1 = /*#__PURE__*/css(["font-family:inherit;font-size:24px;font-weight:", ";letter-spacing:0.15px;line-height:", "px;"], typographyWeights.bold, typographyLineHeight.h1);
var h2 = /*#__PURE__*/css(["font-family:inherit;font-size:20px;font-weight:", ";letter-spacing:0.15px;line-height:", "px;"], typographyWeights.semibold, typographyLineHeight.h2);
var h3 = /*#__PURE__*/css(["font-family:inherit;font-size:16px;font-weight:", ";letter-spacing:0.15px;line-height:", "px;"], typographyWeights.semibold, typographyLineHeight.h3);
var small = /*#__PURE__*/css(["font-family:inherit;font-size:12px;font-weight:", ";letter-spacing:0.25px;line-height:", "px;"], typographyWeights.regular, typographyLineHeight.small);
var label = /*#__PURE__*/css(["font-family:inherit;font-size:14px;font-weight:", ";letter-spacing:0.15px;line-height:", "px;"], typographyWeights.semibold, typographyLineHeight.label);
var typographyIntents = {
  body: body,
  h1: h1,
  h2: h2,
  h3: h3,
  small: small,
  label: label
};
export function getTypographyIntent(intent) {
  return typographyIntents[intent];
}
export var semiboldRules = function semiboldRules() {
  return css(["& > strong,> b{font-weight:600;}"]);
};
export var StyledTypography = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledTypography",
  componentId: "core-12_44_0__sc-1c4583t-0"
})(["", " color:", ";font-style:", ";font-weight:", ";", " ", " em,i{font-style:italic;}"], function (_ref) {
  var _ref$$intent = _ref.$intent,
    $intent = _ref$$intent === void 0 ? 'body' : _ref$$intent;
  return typographyIntents[$intent];
}, function (_ref2) {
  var _ref2$$color = _ref2.$color,
    $color = _ref2$$color === void 0 ? 'gray15' : _ref2$$color;
  return colors[$color];
}, function (_ref3) {
  var _ref3$$italic = _ref3.$italic,
    $italic = _ref3$$italic === void 0 ? false : _ref3$$italic;
  return $italic ? 'italic' : 'inherit';
}, function (_ref4) {
  var $weight = _ref4.$weight;
  return $weight && typographyWeights[$weight];
}, semiboldRules, function (_ref5) {
  var $breakWord = _ref5.$breakWord;
  return $breakWord && "\n  word-wrap: break-word;\n  word-break: break-word;\n";
});
//# sourceMappingURL=Typography.styles.js.map