63 lines
2.7 KiB
JavaScript
63 lines
2.7 KiB
JavaScript
|
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;
|
||
|
|
}
|