@material-ui/core
Version:
React components that implement Google's Material Design.
88 lines (79 loc) • 4.01 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
import warning from 'warning';
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
var caseAllCaps = {
textTransform: 'uppercase'
};
var 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) {
var _ref = typeof typography === 'function' ? typography(palette) : typography,
_ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
_ref$fontSize = _ref.fontSize,
fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
_ref$fontWeightLight = _ref.fontWeightLight,
fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
_ref$fontWeightRegula = _ref.fontWeightRegular,
fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
_ref$fontWeightMedium = _ref.fontWeightMedium,
fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
_ref$fontWeightBold = _ref.fontWeightBold,
fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
_ref$htmlFontSize = _ref.htmlFontSize,
htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
allVariants = _ref.allVariants,
other = _objectWithoutProperties(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants"]);
process.env.NODE_ENV !== "production" ? warning(typeof fontSize === 'number', "Material-UI: 'fontSize' is required to be a number.") : void 0;
process.env.NODE_ENV !== "production" ? warning(typeof htmlFontSize === 'number', "Material-UI: 'htmlFontSize' is required to be a number.") : void 0;
var coef = fontSize / 14;
var pxToRem = function pxToRem(size) {
return "".concat(size / htmlFontSize * coef, "rem");
};
var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
return _extends({
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: pxToRem(size),
// Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
lineHeight: lineHeight
}, fontFamily === defaultFontFamily ? {
letterSpacing: "".concat(round(letterSpacing / size), "em")
} : {}, {}, casing, {}, allVariants);
};
var variants = {
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),
body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
};
return deepmerge(_extends({
htmlFontSize: htmlFontSize,
pxToRem: pxToRem,
round: round,
fontFamily: fontFamily,
fontSize: fontSize,
fontWeightLight: fontWeightLight,
fontWeightRegular: fontWeightRegular,
fontWeightMedium: fontWeightMedium,
fontWeightBold: fontWeightBold
}, variants), other, {
clone: false // No need to clone deep
});
}