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

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

import { deepMerge } from '../utils';
export const defaultFontFamily = ['Segoe UI', '-apple-system', 'sans-serif', 'Roboto', 'Helvetica', 'Arial'].join(',');
export const defaultFontSize = 14;
export const defaultHtmlFontSize = 16;
export const defaultFontWeightLight = 300;
export const defaultFontWeightRegular = 400;
export const defaultFontWeightMedium = 500;
export const defaultFontWeightBold = 700;
const coef = defaultFontSize / 14;

const pxToRem = size => `${size / defaultHtmlFontSize * coef}rem`;

const buildVariant = (fontWeight, size, lineHeight, fontFamily = defaultFontFamily) => ({
  fontFamily,
  fontWeight: fontWeight,
  fontSize: pxToRem(size),
  lineHeight: lineHeight
});

export const 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)
};

function createTypography(typographies) {
  const {
    fontFamily = defaultFontFamily,
    fontSize = defaultFontSize,
    htmlFontSize = defaultHtmlFontSize,
    fontWeightLight = defaultFontWeightLight,
    fontWeightRegular = defaultFontWeightRegular,
    fontWeightMedium = defaultFontWeightMedium,
    fontWeightBold = defaultFontWeightBold
  } = typographies;
  const 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)
  };
  const defaultTypographies = {
    fontFamily,
    fontSize,
    htmlFontSize,
    fontWeightLight,
    fontWeightRegular,
    fontWeightMedium,
    fontWeightBold,
    variants
  };
  return deepMerge(defaultTypographies, typographies);
}

export default createTypography;