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

netdata UI kit

import styled, { css } from "styled-components";
import { getColor } from "../../theme";
import alignSelf from "../../mixins/alignSelf";
import margin from "../../mixins/margin";
import padding from "../../mixins/padding";
import textTransform from "../../mixins/textTransform";
import textAlign from "./mixins/textAlign";
import textDecoration from "./mixins/textDecoration";
import truncate from "./mixins/truncate";
import whiteSpace from "./mixins/whiteSpace";
import wordBreak from "./mixins/wordBreak";
import opacity from "../../mixins/opacity";
import cursor from "../../mixins/cursor";
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") + ";";
  };
};
export var fontColor = function fontColor(_ref2) {
  var theme = _ref2.theme,
    _ref2$color = _ref2.color,
    color = _ref2$color === void 0 ? "text" : _ref2$color;
  return "color: " + getColor(color)({
    theme: theme
  }) + ";";
};
export var 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: " + getColor(background)({
    theme: theme
  }) + ";\n  border-radius: 4px;\n  color: " + getColor(color)({
    theme: theme
  }) + ";\n  padding: 0 6px;\n  ";
};
var typography = css(["", " ", " ", " ", " ", " ", " ", " ", " ", "   ", " ", " ", " ", " ", " ", ""], fontColor, fontCode, alignSelf, textAlign, textDecoration, textTransform, truncate, whiteSpace, wordBreak, margin, padding, opacity, cursor, 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  ";
});
export var makeTypography = function makeTypography(Component, _ref6) {
  var fontSize = _ref6.fontSize,
    lineHeight = _ref6.lineHeight,
    strong = _ref6.strong;
  return styled(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);
};
export var makeH0 = function makeH0(Component) {
  return makeTypography(Component, {
    fontSize: "26px",
    lineHeight: "32px",
    strong: true
  });
};
export var makeH1 = function makeH1(Component) {
  return makeTypography(Component, {
    fontSize: "24px",
    lineHeight: "28px",
    strong: true
  });
};
export var makeH2 = function makeH2(Component) {
  return makeTypography(Component, {
    fontSize: "22px",
    lineHeight: "24px",
    strong: true
  });
};
export var makeH3 = function makeH3(Component) {
  return makeTypography(Component, {
    fontSize: "20px",
    lineHeight: "24px",
    strong: true
  });
};
export var makeH4 = function makeH4(Component) {
  return makeTypography(Component, {
    fontSize: "16px",
    lineHeight: "21px",
    strong: true
  });
};
export var makeH5 = function makeH5(Component) {
  return makeTypography(Component, {
    fontSize: "14px",
    lineHeight: "18px",
    strong: true
  });
};
export var makeH6 = function makeH6(Component) {
  return makeTypography(Component, {
    fontSize: "12px",
    lineHeight: "14px",
    strong: true
  });
};

// Text

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