@fluent-windows/core/styles/createTypography.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.defaultVariants = exports.defaultFontWeightBold = exports.defaultFontWeightMedium = exports.defaultFontWeightRegular = exports.defaultFontWeightLight = exports.defaultHtmlFontSize = exports.defaultFontSize = exports.defaultFontFamily = void 0;

var _utils = require("../utils");

var defaultFontFamily = ['Segoe UI', '-apple-system', 'sans-serif', 'Roboto', 'Helvetica', 'Arial'].join(',');
exports.defaultFontFamily = defaultFontFamily;
var defaultFontSize = 14;
exports.defaultFontSize = defaultFontSize;
var defaultHtmlFontSize = 16;
exports.defaultHtmlFontSize = defaultHtmlFontSize;
var defaultFontWeightLight = 300;
exports.defaultFontWeightLight = defaultFontWeightLight;
var defaultFontWeightRegular = 400;
exports.defaultFontWeightRegular = defaultFontWeightRegular;
var defaultFontWeightMedium = 500;
exports.defaultFontWeightMedium = defaultFontWeightMedium;
var defaultFontWeightBold = 700;
exports.defaultFontWeightBold = defaultFontWeightBold;
var coef = defaultFontSize / 14;

var pxToRem = function pxToRem(size) {
  return "".concat(size / defaultHtmlFontSize * coef, "rem");
};

var buildVariant = function buildVariant(fontWeight, size, lineHeight) {
  var fontFamily = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : defaultFontFamily;
  return {
    fontFamily: fontFamily,
    fontWeight: fontWeight,
    fontSize: pxToRem(size),
    lineHeight: lineHeight
  };
};

var defaultVariants = {
  h1: buildVariant(defaultFontWeightLight, 96, 1),
  h2: buildVariant(defaultFontWeightLight, 60, 1),
  h3: buildVariant(defaultFontWeightRegular, 48, 1.04),
  h4: buildVariant(defaultFontWeightRegular, 34, 1.17),
  h5: buildVariant(defaultFontWeightRegular, 24, 1.33),
  h6: buildVariant(defaultFontWeightMedium, 20, 1.6),
  subtitle1: buildVariant(defaultFontWeightRegular, 16, 1.75),
  subtitle2: buildVariant(defaultFontWeightMedium, 14, 1.57),
  body1: buildVariant(defaultFontWeightRegular, 16, 1.5),
  body2: buildVariant(defaultFontWeightRegular, 14, 1.43)
};
exports.defaultVariants = defaultVariants;

function createTypography(typographies) {
  var _typographies$fontFam = typographies.fontFamily,
      fontFamily = _typographies$fontFam === void 0 ? defaultFontFamily : _typographies$fontFam,
      _typographies$fontSiz = typographies.fontSize,
      fontSize = _typographies$fontSiz === void 0 ? defaultFontSize : _typographies$fontSiz,
      _typographies$htmlFon = typographies.htmlFontSize,
      htmlFontSize = _typographies$htmlFon === void 0 ? defaultHtmlFontSize : _typographies$htmlFon,
      _typographies$fontWei = typographies.fontWeightLight,
      fontWeightLight = _typographies$fontWei === void 0 ? defaultFontWeightLight : _typographies$fontWei,
      _typographies$fontWei2 = typographies.fontWeightRegular,
      fontWeightRegular = _typographies$fontWei2 === void 0 ? defaultFontWeightRegular : _typographies$fontWei2,
      _typographies$fontWei3 = typographies.fontWeightMedium,
      fontWeightMedium = _typographies$fontWei3 === void 0 ? defaultFontWeightMedium : _typographies$fontWei3,
      _typographies$fontWei4 = typographies.fontWeightBold,
      fontWeightBold = _typographies$fontWei4 === void 0 ? defaultFontWeightBold : _typographies$fontWei4;
  var variants = {
    h1: buildVariant(fontWeightLight, 96, 1, fontFamily),
    h2: buildVariant(fontWeightLight, 60, 1, fontFamily),
    h3: buildVariant(fontWeightRegular, 48, 1.04, fontFamily),
    h4: buildVariant(fontWeightRegular, 34, 1.17, fontFamily),
    h5: buildVariant(fontWeightRegular, 24, 1.33, fontFamily),
    h6: buildVariant(fontWeightMedium, 20, 1.6, fontFamily),
    subtitle1: buildVariant(fontWeightRegular, 16, 1.75, fontFamily),
    subtitle2: buildVariant(fontWeightMedium, 14, 1.57, fontFamily),
    body1: buildVariant(fontWeightRegular, 16, 1.5, fontFamily),
    body2: buildVariant(fontWeightRegular, 14, 1.43, fontFamily)
  };
  var defaultTypographies = {
    fontFamily: fontFamily,
    fontSize: fontSize,
    htmlFontSize: htmlFontSize,
    fontWeightLight: fontWeightLight,
    fontWeightRegular: fontWeightRegular,
    fontWeightMedium: fontWeightMedium,
    fontWeightBold: fontWeightBold,
    variants: variants
  };
  return (0, _utils.deepMerge)(defaultTypographies, typographies);
}

var _default = createTypography;
exports["default"] = _default;