@netdata/netdata-ui/dist/components/typography/typography.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports.makeTypography = exports.makeText = exports.makeSmall = exports.makeNano = exports.makeMicro = exports.makeHuge = exports.makeH6 = exports.makeH5 = exports.makeH4 = exports.makeH3 = exports.makeH2 = exports.makeH1 = exports.makeH0 = exports.makeFemto = exports.makeBigger = exports.makeBig = exports.fontColor = exports.fontCode = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _theme = require("../../theme");
var _alignSelf = _interopRequireDefault(require("../../mixins/alignSelf"));
var _margin = _interopRequireDefault(require("../../mixins/margin"));
var _padding = _interopRequireDefault(require("../../mixins/padding"));
var _textTransform = _interopRequireDefault(require("../../mixins/textTransform"));
var _textAlign = _interopRequireDefault(require("./mixins/textAlign"));
var _textDecoration = _interopRequireDefault(require("./mixins/textDecoration"));
var _truncate = _interopRequireDefault(require("./mixins/truncate"));
var _whiteSpace = _interopRequireDefault(require("./mixins/whiteSpace"));
var _wordBreak = _interopRequireDefault(require("./mixins/wordBreak"));
var _opacity = _interopRequireDefault(require("../../mixins/opacity"));
var _cursor = _interopRequireDefault(require("../../mixins/cursor"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var makeFontSize = function makeFontSize(size) {
  return function () {
    return "font-size: " + size + ";";
  };
};
var makeLineHeight = function makeLineHeight(size) {
  return function () {
    return "line-height: " + size + ";";
  };
};
var makeFontWeight = function makeFontWeight(defaultStrong) {
  return function (_ref) {
    var _ref$strong = _ref.strong,
      strong = _ref$strong === void 0 ? defaultStrong : _ref$strong;
    return "font-weight: " + (strong ? "bold" : "normal") + ";";
  };
};
var fontColor = exports.fontColor = function fontColor(_ref2) {
  var theme = _ref2.theme,
    _ref2$color = _ref2.color,
    color = _ref2$color === void 0 ? "text" : _ref2$color;
  return "color: " + (0, _theme.getColor)(color)({
    theme: theme
  }) + ";";
};
var fontCode = exports.fontCode = function fontCode(_ref3) {
  var _ref3$background = _ref3.background,
    background = _ref3$background === void 0 ? "text" : _ref3$background,
    code = _ref3.code,
    _ref3$color = _ref3.color,
    color = _ref3$color === void 0 ? "elementBackground" : _ref3$color,
    theme = _ref3.theme;
  return code && "\n  background-color: " + (0, _theme.getColor)(background)({
    theme: theme
  }) + ";\n  border-radius: 4px;\n  color: " + (0, _theme.getColor)(color)({
    theme: theme
  }) + ";\n  padding: 0 6px;\n  ";
};
var typography = (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " ", " ", " ", "   ", " ", " ", " ", " ", " ", ""], fontColor, fontCode, _alignSelf["default"], _textAlign["default"], _textDecoration["default"], _textTransform["default"], _truncate["default"], _whiteSpace["default"], _wordBreak["default"], _margin["default"], _padding["default"], _opacity["default"], _cursor["default"], function (_ref4) {
  var fontSize = _ref4.fontSize;
  return fontSize && "\n    font-size: " + fontSize + ";\n    line-height: " + fontSize + ";\n  ";
}, function (_ref5) {
  var lineHeight = _ref5.lineHeight;
  return lineHeight && "\n    line-height: " + lineHeight + ";\n  ";
});
var makeTypography = exports.makeTypography = function makeTypography(Component, _ref6) {
  var fontSize = _ref6.fontSize,
    lineHeight = _ref6.lineHeight,
    strong = _ref6.strong;
  return (0, _styledComponents["default"])(Component).withConfig({
    displayName: "typography",
    componentId: "sc-1lwqv72-0"
  })(["font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Ubuntu,\"Helvetica Neue\",sans-serif;font-style:normal;", " ", " ", " ", ""], makeFontSize(fontSize), makeLineHeight(lineHeight), makeFontWeight(strong), typography);
};
var makeH0 = exports.makeH0 = function makeH0(Component) {
  return makeTypography(Component, {
    fontSize: "26px",
    lineHeight: "32px",
    strong: true
  });
};
var makeH1 = exports.makeH1 = function makeH1(Component) {
  return makeTypography(Component, {
    fontSize: "24px",
    lineHeight: "28px",
    strong: true
  });
};
var makeH2 = exports.makeH2 = function makeH2(Component) {
  return makeTypography(Component, {
    fontSize: "22px",
    lineHeight: "24px",
    strong: true
  });
};
var makeH3 = exports.makeH3 = function makeH3(Component) {
  return makeTypography(Component, {
    fontSize: "20px",
    lineHeight: "24px",
    strong: true
  });
};
var makeH4 = exports.makeH4 = function makeH4(Component) {
  return makeTypography(Component, {
    fontSize: "16px",
    lineHeight: "21px",
    strong: true
  });
};
var makeH5 = exports.makeH5 = function makeH5(Component) {
  return makeTypography(Component, {
    fontSize: "14px",
    lineHeight: "18px",
    strong: true
  });
};
var makeH6 = exports.makeH6 = function makeH6(Component) {
  return makeTypography(Component, {
    fontSize: "12px",
    lineHeight: "14px",
    strong: true
  });
};

// Text

var makeFemto = exports.makeFemto = function makeFemto(Component) {
  return makeTypography(Component, {
    fontSize: "7px",
    lineHeight: "8px"
  });
};
var makeNano = exports.makeNano = function makeNano(Component) {
  return makeTypography(Component, {
    fontSize: "8px",
    lineHeight: "10px"
  });
};
var makeMicro = exports.makeMicro = function makeMicro(Component) {
  return makeTypography(Component, {
    fontSize: "10px",
    lineHeight: "13px"
  });
};
var makeSmall = exports.makeSmall = function makeSmall(Component) {
  return makeTypography(Component, {
    fontSize: "11px",
    lineHeight: "14px"
  });
};
var makeText = exports.makeText = function makeText(Component) {
  return makeTypography(Component, {
    fontSize: "12px",
    lineHeight: "16px"
  });
};
var makeBig = exports.makeBig = function makeBig(Component) {
  return makeTypography(Component, {
    fontSize: "14px",
    lineHeight: "20px"
  });
};
var makeBigger = exports.makeBigger = function makeBigger(Component) {
  return makeTypography(Component, {
    fontSize: "16px",
    lineHeight: "18px"
  });
};
var makeHuge = exports.makeHuge = function makeHuge(Component) {
  return makeTypography(Component, {
    fontSize: "24px",
    lineHeight: "32px"
  });
};