1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@material-ui/utils";
|
3 | import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
|
4 | export default function responsiveFontSizes(themeInput, options = {}) {
|
5 | const {
|
6 | breakpoints = ['sm', 'md', 'lg'],
|
7 | disableAlign = false,
|
8 | factor = 2,
|
9 | variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
|
10 | } = options;
|
11 |
|
12 | const theme = _extends({}, themeInput);
|
13 |
|
14 | theme.typography = _extends({}, theme.typography);
|
15 | const typography = theme.typography;
|
16 |
|
17 |
|
18 | const convert = convertLength(typography.htmlFontSize);
|
19 | const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
|
20 | variants.forEach(variant => {
|
21 | const style = typography[variant];
|
22 | const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
|
23 |
|
24 | if (remFontSize <= 1) {
|
25 | return;
|
26 | }
|
27 |
|
28 | const maxFontSize = remFontSize;
|
29 | const minFontSize = 1 + (maxFontSize - 1) / factor;
|
30 | let {
|
31 | lineHeight
|
32 | } = style;
|
33 |
|
34 | if (!isUnitless(lineHeight) && !disableAlign) {
|
35 | throw new Error(process.env.NODE_ENV !== "production" ? `Material-UI: Unsupported non-unitless line height with grid alignment.
|
36 | Use unitless line heights instead.` : _formatMuiErrorMessage(6));
|
37 | }
|
38 |
|
39 | if (!isUnitless(lineHeight)) {
|
40 |
|
41 | lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
|
42 | }
|
43 |
|
44 | let transform = null;
|
45 |
|
46 | if (!disableAlign) {
|
47 | transform = value => alignProperty({
|
48 | size: value,
|
49 | grid: fontGrid({
|
50 | pixels: 4,
|
51 | lineHeight,
|
52 | htmlFontSize: typography.htmlFontSize
|
53 | })
|
54 | });
|
55 | }
|
56 |
|
57 | typography[variant] = _extends({}, style, responsiveProperty({
|
58 | cssProperty: 'fontSize',
|
59 | min: minFontSize,
|
60 | max: maxFontSize,
|
61 | unit: 'rem',
|
62 | breakpoints: breakpointValues,
|
63 | transform
|
64 | }));
|
65 | });
|
66 | return theme;
|
67 | } |
\ | No newline at end of file |