1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = responsiveFontSizes;
|
9 |
|
10 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11 |
|
12 | var _utils = require("@material-ui/utils");
|
13 |
|
14 | var _cssUtils = require("./cssUtils");
|
15 |
|
16 | function responsiveFontSizes(themeInput) {
|
17 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
18 | var _options$breakpoints = options.breakpoints,
|
19 | breakpoints = _options$breakpoints === void 0 ? ['sm', 'md', 'lg'] : _options$breakpoints,
|
20 | _options$disableAlign = options.disableAlign,
|
21 | disableAlign = _options$disableAlign === void 0 ? false : _options$disableAlign,
|
22 | _options$factor = options.factor,
|
23 | factor = _options$factor === void 0 ? 2 : _options$factor,
|
24 | _options$variants = options.variants,
|
25 | variants = _options$variants === void 0 ? ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline'] : _options$variants;
|
26 | var theme = (0, _extends2.default)({}, themeInput);
|
27 | theme.typography = (0, _extends2.default)({}, theme.typography);
|
28 | var typography = theme.typography;
|
29 |
|
30 |
|
31 | var convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);
|
32 | var breakpointValues = breakpoints.map(function (x) {
|
33 | return theme.breakpoints.values[x];
|
34 | });
|
35 | variants.forEach(function (variant) {
|
36 | var style = typography[variant];
|
37 | var remFontSize = parseFloat(convert(style.fontSize, 'rem'));
|
38 |
|
39 | if (remFontSize <= 1) {
|
40 | return;
|
41 | }
|
42 |
|
43 | var maxFontSize = remFontSize;
|
44 | var minFontSize = 1 + (maxFontSize - 1) / factor;
|
45 | var lineHeight = style.lineHeight;
|
46 |
|
47 | if (!(0, _cssUtils.isUnitless)(lineHeight) && !disableAlign) {
|
48 | throw new Error(process.env.NODE_ENV !== "production" ? "Material-UI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead." : (0, _utils.formatMuiErrorMessage)(6));
|
49 | }
|
50 |
|
51 | if (!(0, _cssUtils.isUnitless)(lineHeight)) {
|
52 |
|
53 | lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
|
54 | }
|
55 |
|
56 | var transform = null;
|
57 |
|
58 | if (!disableAlign) {
|
59 | transform = function transform(value) {
|
60 | return (0, _cssUtils.alignProperty)({
|
61 | size: value,
|
62 | grid: (0, _cssUtils.fontGrid)({
|
63 | pixels: 4,
|
64 | lineHeight: lineHeight,
|
65 | htmlFontSize: typography.htmlFontSize
|
66 | })
|
67 | });
|
68 | };
|
69 | }
|
70 |
|
71 | typography[variant] = (0, _extends2.default)({}, style, (0, _cssUtils.responsiveProperty)({
|
72 | cssProperty: 'fontSize',
|
73 | min: minFontSize,
|
74 | max: maxFontSize,
|
75 | unit: 'rem',
|
76 | breakpoints: breakpointValues,
|
77 | transform: transform
|
78 | }));
|
79 | });
|
80 | return theme;
|
81 | } |
\ | No newline at end of file |