import _extends from "@babel/runtime/helpers/esm/extends"; import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage"; import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils'; export default function responsiveFontSizes(themeInput) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var _options$breakpoints = options.breakpoints, breakpoints = _options$breakpoints === void 0 ? ['sm', 'md', 'lg'] : _options$breakpoints, _options$disableAlign = options.disableAlign, disableAlign = _options$disableAlign === void 0 ? false : _options$disableAlign, _options$factor = options.factor, factor = _options$factor === void 0 ? 2 : _options$factor, _options$variants = options.variants, variants = _options$variants === void 0 ? ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline'] : _options$variants; var theme = _extends({}, themeInput); theme.typography = _extends({}, theme.typography); var typography = theme.typography; // Convert between CSS lengths e.g. em->px or px->rem // Set the baseFontSize for your project. Defaults to 16px (also the browser default). var convert = convertLength(typography.htmlFontSize); var breakpointValues = breakpoints.map(function (x) { return theme.breakpoints.values[x]; }); variants.forEach(function (variant) { var style = typography[variant]; var remFontSize = parseFloat(convert(style.fontSize, 'rem')); if (remFontSize <= 1) { return; } var maxFontSize = remFontSize; var minFontSize = 1 + (maxFontSize - 1) / factor; var lineHeight = style.lineHeight; if (!isUnitless(lineHeight) && !disableAlign) { throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead." : _formatMuiErrorMessage(6)); } if (!isUnitless(lineHeight)) { // make it unitless lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize); } var transform = null; if (!disableAlign) { transform = function transform(value) { return alignProperty({ size: value, grid: fontGrid({ pixels: 4, lineHeight: lineHeight, htmlFontSize: typography.htmlFontSize }) }); }; } typography[variant] = _extends({}, style, responsiveProperty({ cssProperty: 'fontSize', min: minFontSize, max: maxFontSize, unit: 'rem', breakpoints: breakpointValues, transform: transform })); }); return theme; }