UNPKG

4.7 kBJavaScriptView Raw
1"use strict";
2
3var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5Object.defineProperty(exports, "__esModule", {
6 value: true
7});
8exports.default = createTypography;
9
10var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
12var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
14var _utils = require("@material-ui/utils");
15
16function round(value) {
17 return Math.round(value * 1e5) / 1e5;
18}
19
20var warnedOnce = false;
21
22function roundWithDeprecationWarning(value) {
23 if (process.env.NODE_ENV !== 'production') {
24 if (!warnedOnce) {
25 console.warn(['Material-UI: The `theme.typography.round` helper is deprecated.', 'Head to https://material-ui.com/r/migration-v4/#theme for a migration path.'].join('\n'));
26 warnedOnce = true;
27 }
28 }
29
30 return round(value);
31}
32
33var caseAllCaps = {
34 textTransform: 'uppercase'
35};
36var defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
37/**
38 * @see @link{https://material.io/design/typography/the-type-system.html}
39 * @see @link{https://material.io/design/typography/understanding-typography.html}
40 */
41
42function createTypography(palette, typography) {
43 var _ref = typeof typography === 'function' ? typography(palette) : typography,
44 _ref$fontFamily = _ref.fontFamily,
45 fontFamily = _ref$fontFamily === void 0 ? defaultFontFamily : _ref$fontFamily,
46 _ref$fontSize = _ref.fontSize,
47 fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
48 _ref$fontWeightLight = _ref.fontWeightLight,
49 fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,
50 _ref$fontWeightRegula = _ref.fontWeightRegular,
51 fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,
52 _ref$fontWeightMedium = _ref.fontWeightMedium,
53 fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,
54 _ref$fontWeightBold = _ref.fontWeightBold,
55 fontWeightBold = _ref$fontWeightBold === void 0 ? 700 : _ref$fontWeightBold,
56 _ref$htmlFontSize = _ref.htmlFontSize,
57 htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,
58 allVariants = _ref.allVariants,
59 pxToRem2 = _ref.pxToRem,
60 other = (0, _objectWithoutProperties2.default)(_ref, ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"]);
61
62 if (process.env.NODE_ENV !== 'production') {
63 if (typeof fontSize !== 'number') {
64 console.error('Material-UI: `fontSize` is required to be a number.');
65 }
66
67 if (typeof htmlFontSize !== 'number') {
68 console.error('Material-UI: `htmlFontSize` is required to be a number.');
69 }
70 }
71
72 var coef = fontSize / 14;
73
74 var pxToRem = pxToRem2 || function (size) {
75 return "".concat(size / htmlFontSize * coef, "rem");
76 };
77
78 var buildVariant = function buildVariant(fontWeight, size, lineHeight, letterSpacing, casing) {
79 return (0, _extends2.default)({
80 fontFamily: fontFamily,
81 fontWeight: fontWeight,
82 fontSize: pxToRem(size),
83 // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
84 lineHeight: lineHeight
85 }, fontFamily === defaultFontFamily ? {
86 letterSpacing: "".concat(round(letterSpacing / size), "em")
87 } : {}, casing, allVariants);
88 };
89
90 var variants = {
91 h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
92 h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
93 h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
94 h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
95 h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
96 h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
97 subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
98 subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
99 body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
100 body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
101 button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
102 caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
103 overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
104 };
105 return (0, _utils.deepmerge)((0, _extends2.default)({
106 htmlFontSize: htmlFontSize,
107 pxToRem: pxToRem,
108 round: roundWithDeprecationWarning,
109 // TODO v5: remove
110 fontFamily: fontFamily,
111 fontSize: fontSize,
112 fontWeightLight: fontWeightLight,
113 fontWeightRegular: fontWeightRegular,
114 fontWeightMedium: fontWeightMedium,
115 fontWeightBold: fontWeightBold
116 }, variants), other, {
117 clone: false // No need to clone deep
118
119 });
120}
\No newline at end of file