@material-ui/core
Version:
React components that implement Google's Material Design.
178 lines (168 loc) • 6.29 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
import warning from 'warning';
import { ponyfillGlobal } from '@material-ui/utils';
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
const caseAllCaps = {
textTransform: 'uppercase'
};
const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
/**
* @see @link{https://material.io/design/typography/the-type-system.html}
* @see @link{https://material.io/design/typography/understanding-typography.html}
*/
export default function createTypography(palette, typography) {
const _ref = typeof typography === 'function' ? typography(palette) : typography,
{
fontFamily = defaultFontFamily,
// The default font size of the Material Specification.
fontSize = 14,
// px
fontWeightLight = 300,
fontWeightRegular = 400,
fontWeightMedium = 500,
// Tell Material-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
htmlFontSize = 16,
// eslint-disable-next-line no-underscore-dangle
useNextVariants = Boolean(ponyfillGlobal.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__),
// Private option to prevent noise in the console from the default theme.
suppressWarning = false,
// Apply the CSS properties to all the variants.
allVariants
} = _ref,
other = _objectWithoutPropertiesLoose(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "htmlFontSize", "useNextVariants", "suppressWarning", "allVariants"]);
process.env.NODE_ENV !== "production" ? warning(useNextVariants || suppressWarning, 'Material-UI: you are using the deprecated typography variants ' + 'that will be removed in the next major release.' + '\nPlease read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2') : void 0;
const coef = fontSize / 14;
const pxToRem = size => `${size / htmlFontSize * coef}rem`;
const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
color: palette.text.primary,
fontFamily,
fontWeight,
fontSize: pxToRem(size),
// Unitless following http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
lineHeight
}, fontFamily === defaultFontFamily ? {
letterSpacing: `${round(letterSpacing / size)}em`
} : {}, casing, allVariants);
const nextVariants = {
h1: buildVariant(fontWeightLight, 96, 1, -1.5),
h2: buildVariant(fontWeightLight, 60, 1, -0.5),
h3: buildVariant(fontWeightRegular, 48, 1.04, 0),
h4: buildVariant(fontWeightRegular, 34, 1.17, 0.25),
h5: buildVariant(fontWeightRegular, 24, 1.33, 0),
h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
body1Next: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
body2Next: buildVariant(fontWeightRegular, 14, 1.5, 0.15),
buttonNext: buildVariant(fontWeightMedium, 14, 1.5, 0.4, caseAllCaps),
captionNext: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
}; // To remove in v4
const oldVariants = {
display4: _extends({
fontSize: pxToRem(112),
fontWeight: fontWeightLight,
fontFamily,
letterSpacing: '-.04em',
lineHeight: `${round(128 / 112)}em`,
marginLeft: '-.04em',
color: palette.text.secondary
}, allVariants),
display3: _extends({
fontSize: pxToRem(56),
fontWeight: fontWeightRegular,
fontFamily,
letterSpacing: '-.02em',
lineHeight: `${round(73 / 56)}em`,
marginLeft: '-.02em',
color: palette.text.secondary
}, allVariants),
display2: _extends({
fontSize: pxToRem(45),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(51 / 45)}em`,
marginLeft: '-.02em',
color: palette.text.secondary
}, allVariants),
display1: _extends({
fontSize: pxToRem(34),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(41 / 34)}em`,
color: palette.text.secondary
}, allVariants),
headline: _extends({
fontSize: pxToRem(24),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(32.5 / 24)}em`,
color: palette.text.primary
}, allVariants),
title: _extends({
fontSize: pxToRem(21),
fontWeight: fontWeightMedium,
fontFamily,
lineHeight: `${round(24.5 / 21)}em`,
color: palette.text.primary
}, allVariants),
subheading: _extends({
fontSize: pxToRem(16),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(24 / 16)}em`,
color: palette.text.primary
}, allVariants),
body2: _extends({
fontSize: pxToRem(14),
fontWeight: fontWeightMedium,
fontFamily,
lineHeight: `${round(24 / 14)}em`,
color: palette.text.primary
}, allVariants),
body1: _extends({
fontSize: pxToRem(14),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(20.5 / 14)}em`,
color: palette.text.primary
}, allVariants),
caption: _extends({
fontSize: pxToRem(12),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(16.5 / 12)}em`,
color: palette.text.secondary
}, allVariants),
button: _extends({
fontSize: pxToRem(14),
textTransform: 'uppercase',
fontWeight: fontWeightMedium,
fontFamily,
color: palette.text.primary
}, allVariants)
};
return deepmerge(_extends({
pxToRem,
round,
fontFamily,
fontSize,
fontWeightLight,
fontWeightRegular,
fontWeightMedium
}, oldVariants, nextVariants, useNextVariants ? {
body1: nextVariants.body1Next,
body2: nextVariants.body2Next,
button: nextVariants.buttonNext,
caption: nextVariants.captionNext
} : {}, {
useNextVariants
}), other, {
clone: false // No need to clone deep
});
}