ASCII text
1
// Based on:
2
// https://material.io/design/typography/the-type-system.html
3
@use "../../theme";
5
$font-family: "M+ 1c", Roboto, Cantarell, Sans-Serif;
7
$_rem: 14px;
9
$_subtitle-size: 16px;
10
@if theme.$compact {
12
$_rem: 14px; // or should be 13px?
13
$_subtitle-size: 15px;
14
}
15
// provide font size in pt, with px fallback
17
@function _pt($size) {
18
@return ($size * .75 / 1px) * 1pt;
19
}
20
// provide icon size in em, with px fallback
22
@function icon-size($size: 16px) {
23
@return ($size / $_rem) * 1em;
24
}
25
@mixin headline1 {
27
font-size: 96px;
28
font-weight: 300;
29
// line-height: 1;
30
}
31
@mixin headline2 {
33
font-size: 60px;
34
font-weight: 300;
35
// line-height: 1;
36
}
37
@mixin headline3 {
39
font-size: 48px;
40
font-weight: 400;
41
// line-height: 50px;
42
}
43
@mixin headline4 {
45
font-size: 34px;
46
font-weight: 400;
47
// line-height: 40px;
48
}
49
@mixin headline5 {
51
font-size: _pt(24px);
52
font-weight: 400;
53
// line-height: 32px;
54
}
55
@mixin headline6 {
57
font-size: _pt(20px);
58
font-weight: 500;
59
// line-height: 32px;
60
}
61
@mixin subtitle1 {
63
font-size: _pt($_subtitle-size);
64
font-weight: 400;
65
// line-height: 28px;
66
}
67
@mixin subtitle2 {
69
font-size: _pt($_rem);
70
font-weight: 500;
71
// line-height: 22px;
72
}
73
@mixin body1 {
75
font-size: _pt($_subtitle-size);
76
font-weight: 400;
77
// line-height: 24px;
78
}
79
@mixin body2 {
81
font-size: _pt($_rem);
82
font-weight: 400;
83
// line-height: 20px;
84
}
85
@mixin caption {
87
font-size: _pt(12px);
88
font-weight: 400;
89
// line-height: 20px;
90
}
91
@mixin button {
93
font-size: _pt($_rem);
94
font-weight: 500;
95
// line-height: 36px;
96
}
97
@mixin overline {
99
font-size: _pt(12px);
100
font-weight: 400;
101
// line-height: 32px;
102
}
103