90 lines
3.6 KiB
JavaScript
90 lines
3.6 KiB
JavaScript
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
||
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||
|
|
const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
|
||
|
|
import deepmerge from '@mui/utils/deepmerge';
|
||
|
|
function round(value) {
|
||
|
|
return Math.round(value * 1e5) / 1e5;
|
||
|
|
}
|
||
|
|
const caseAllCaps = {
|
||
|
|
textTransform: 'uppercase'
|
||
|
|
};
|
||
|
|
const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @see @link{https://m2.material.io/design/typography/the-type-system.html}
|
||
|
|
* @see @link{https://m2.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,
|
||
|
|
fontWeightBold = 700,
|
||
|
|
// Tell MUI what's the font-size on the html element.
|
||
|
|
// 16px is the default font-size used by browsers.
|
||
|
|
htmlFontSize = 16,
|
||
|
|
// Apply the CSS properties to all the variants.
|
||
|
|
allVariants,
|
||
|
|
pxToRem: pxToRem2
|
||
|
|
} = _ref,
|
||
|
|
other = _objectWithoutPropertiesLoose(_ref, _excluded);
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
if (typeof fontSize !== 'number') {
|
||
|
|
console.error('MUI: `fontSize` is required to be a number.');
|
||
|
|
}
|
||
|
|
if (typeof htmlFontSize !== 'number') {
|
||
|
|
console.error('MUI: `htmlFontSize` is required to be a number.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const coef = fontSize / 14;
|
||
|
|
const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
|
||
|
|
const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
|
||
|
|
fontFamily,
|
||
|
|
fontWeight,
|
||
|
|
fontSize: pxToRem(size),
|
||
|
|
// Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
|
||
|
|
lineHeight
|
||
|
|
}, fontFamily === defaultFontFamily ? {
|
||
|
|
letterSpacing: `${round(letterSpacing / size)}em`
|
||
|
|
} : {}, casing, allVariants);
|
||
|
|
const variants = {
|
||
|
|
h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
|
||
|
|
h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
|
||
|
|
h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
|
||
|
|
h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
|
||
|
|
h5: buildVariant(fontWeightRegular, 24, 1.334, 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),
|
||
|
|
// TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
|
||
|
|
inherit: {
|
||
|
|
fontFamily: 'inherit',
|
||
|
|
fontWeight: 'inherit',
|
||
|
|
fontSize: 'inherit',
|
||
|
|
lineHeight: 'inherit',
|
||
|
|
letterSpacing: 'inherit'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return deepmerge(_extends({
|
||
|
|
htmlFontSize,
|
||
|
|
pxToRem,
|
||
|
|
fontFamily,
|
||
|
|
fontSize,
|
||
|
|
fontWeightLight,
|
||
|
|
fontWeightRegular,
|
||
|
|
fontWeightMedium,
|
||
|
|
fontWeightBold
|
||
|
|
}, variants), other, {
|
||
|
|
clone: false // No need to clone deep
|
||
|
|
});
|
||
|
|
}
|