UNPKG

3.27 kBJavaScriptView Raw
1import _extends from "@babel/runtime/helpers/esm/extends";
2import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
4import { deepmerge } from '@mui/utils';
5
6function round(value) {
7 return Math.round(value * 1e5) / 1e5;
8}
9
10const caseAllCaps = {
11 textTransform: 'uppercase'
12};
13const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
14/**
15 * @see @link{https://material.io/design/typography/the-type-system.html}
16 * @see @link{https://material.io/design/typography/understanding-typography.html}
17 */
18
19export default function createTypography(palette, typography) {
20 const _ref = typeof typography === 'function' ? typography(palette) : typography,
21 {
22 fontFamily = defaultFontFamily,
23 // The default font size of the Material Specification.
24 fontSize = 14,
25 // px
26 fontWeightLight = 300,
27 fontWeightRegular = 400,
28 fontWeightMedium = 500,
29 fontWeightBold = 700,
30 // Tell MUI what's the font-size on the html element.
31 // 16px is the default font-size used by browsers.
32 htmlFontSize = 16,
33 // Apply the CSS properties to all the variants.
34 allVariants,
35 pxToRem: pxToRem2
36 } = _ref,
37 other = _objectWithoutPropertiesLoose(_ref, _excluded);
38
39 if (process.env.NODE_ENV !== 'production') {
40 if (typeof fontSize !== 'number') {
41 console.error('MUI: `fontSize` is required to be a number.');
42 }
43
44 if (typeof htmlFontSize !== 'number') {
45 console.error('MUI: `htmlFontSize` is required to be a number.');
46 }
47 }
48
49 const coef = fontSize / 14;
50
51 const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
52
53 const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => _extends({
54 fontFamily,
55 fontWeight,
56 fontSize: pxToRem(size),
57 // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
58 lineHeight
59 }, fontFamily === defaultFontFamily ? {
60 letterSpacing: `${round(letterSpacing / size)}em`
61 } : {}, casing, allVariants);
62
63 const variants = {
64 h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
65 h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
66 h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
67 h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
68 h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
69 h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
70 subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
71 subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
72 body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
73 body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
74 button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
75 caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
76 overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
77 };
78 return deepmerge(_extends({
79 htmlFontSize,
80 pxToRem,
81 fontFamily,
82 fontSize,
83 fontWeightLight,
84 fontWeightRegular,
85 fontWeightMedium,
86 fontWeightBold
87 }, variants), other, {
88 clone: false // No need to clone deep
89
90 });
91}
\No newline at end of file