responsiveFontSizes.js
2.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = responsiveFontSizes;
var _formatMuiErrorMessage = _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 = {
...themeInput
};
theme.typography = {
...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];
if (!style) {
return;
}
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.\n' + 'Use unitless line heights instead.' : (0, _formatMuiErrorMessage.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] = {
...style,
...(0, _cssUtils.responsiveProperty)({
cssProperty: 'fontSize',
min: minFontSize,
max: maxFontSize,
unit: 'rem',
breakpoints: breakpointValues,
transform
})
};
});
return theme;
}