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