66 lines
2.5 KiB
JavaScript
66 lines
2.5 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = responsiveFontSizes;
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
|
|
var _cssUtils = require("./cssUtils");
|
|
function responsiveFontSizes(themeInput, options = {}) {
|
|
const {
|
|
breakpoints = ['sm', 'md', 'lg'],
|
|
disableAlign = false,
|
|
factor = 2,
|
|
variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
|
|
} = options;
|
|
const theme = (0, _extends2.default)({}, themeInput);
|
|
theme.typography = (0, _extends2.default)({}, theme.typography);
|
|
const 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).
|
|
const convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);
|
|
const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
|
|
variants.forEach(variant => {
|
|
const style = typography[variant];
|
|
const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
|
|
if (remFontSize <= 1) {
|
|
return;
|
|
}
|
|
const maxFontSize = remFontSize;
|
|
const minFontSize = 1 + (maxFontSize - 1) / factor;
|
|
let {
|
|
lineHeight
|
|
} = style;
|
|
if (!(0, _cssUtils.isUnitless)(lineHeight) && !disableAlign) {
|
|
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported non-unitless line height with grid alignment.
|
|
Use unitless line heights instead.` : (0, _formatMuiErrorMessage2.default)(6));
|
|
}
|
|
if (!(0, _cssUtils.isUnitless)(lineHeight)) {
|
|
// make it unitless
|
|
lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
|
|
}
|
|
let transform = null;
|
|
if (!disableAlign) {
|
|
transform = value => (0, _cssUtils.alignProperty)({
|
|
size: value,
|
|
grid: (0, _cssUtils.fontGrid)({
|
|
pixels: 4,
|
|
lineHeight,
|
|
htmlFontSize: typography.htmlFontSize
|
|
})
|
|
});
|
|
}
|
|
typography[variant] = (0, _extends2.default)({}, style, (0, _cssUtils.responsiveProperty)({
|
|
cssProperty: 'fontSize',
|
|
min: minFontSize,
|
|
max: maxFontSize,
|
|
unit: 'rem',
|
|
breakpoints: breakpointValues,
|
|
transform
|
|
}));
|
|
});
|
|
return theme;
|
|
} |