-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
/
createTypography.js
116 lines (112 loc) · 3.18 KB
/
createTypography.js
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
// @flow
import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
export default function createTypography(palette: Object, typography: Object | Function) {
const {
fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif',
fontSize = 14,
fontWeightLight = 300,
fontWeightRegular = 400,
fontWeightMedium = 500,
htmlFontSize = 16, // Assuming browser default, typically `16px`
...other
} =
typeof typography === 'function' ? typography(palette) : typography;
return deepmerge(
{
fontFamily,
fontSize,
fontWeightLight,
fontWeightRegular,
fontWeightMedium,
display4: {
fontSize: `${112 / htmlFontSize}rem`,
fontWeight: fontWeightLight,
fontFamily,
letterSpacing: '-.04em',
lineHeight: `${round(128 / 112)}em`,
marginLeft: '-.06em',
color: palette.text.secondary,
},
display3: {
fontSize: `${56 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
letterSpacing: '-.02em',
lineHeight: `${round(73 / 56)}em`,
marginLeft: '-.04em',
color: palette.text.secondary,
},
display2: {
fontSize: `${45 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(48 / 45)}em`,
marginLeft: '-.04em',
color: palette.text.secondary,
},
display1: {
fontSize: `${34 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(41 / 34)}em`,
marginLeft: '-.04em',
color: palette.text.secondary,
},
headline: {
fontSize: `${24 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(32.5 / 24)}em`,
color: palette.text.primary,
},
title: {
fontSize: `${21 / htmlFontSize}rem`,
fontWeight: fontWeightMedium,
fontFamily,
lineHeight: `${round(24.5 / 21)}em`,
color: palette.text.primary,
},
subheading: {
fontSize: `${16 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(24 / 16)}em`,
color: palette.text.primary,
},
body2: {
fontSize: `${14 / htmlFontSize}rem`,
fontWeight: fontWeightMedium,
fontFamily,
lineHeight: `${round(24 / 14)}em`,
color: palette.text.primary,
},
body1: {
fontSize: `${14 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(20.5 / 14)}em`,
color: palette.text.primary,
},
caption: {
fontSize: `${12 / htmlFontSize}rem`,
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(16.5 / 12)}em`,
color: palette.text.secondary,
},
button: {
fontSize,
textTransform: 'uppercase',
fontWeight: fontWeightMedium,
fontFamily,
},
},
other,
{
clone: false, // No need to clone deep
},
);
}