ASCII text
1
// generic drawing of more complex things
2
@use "../../theme";
4
@use "../../theme-color";
5
@use "../../st-theme";
6
// provide font size in pt, with px fallback
8
@function pt($size: st-theme.$font-size) {
9
@return ($size * 0.75 / 1px) * 1pt;
10
}
11
// provide icon size in em, with px fallback
13
@function em($size: 16px) {
14
@return ($size / st-theme.$font-size) * 1em;
15
}
16
// Typography
18
// based on:
19
// https://material.io/design/typography/the-type-system.html
20
@mixin type($style) {
22
@if $style == headline1 {
23
// font-family: $font-family-large;
24
font-size: 96px;
25
font-weight: 300;
26
// line-height: 1;
27
}
28
@if $style == headline2 {
30
// font-family: $font-family-large;
31
font-size: 60px;
32
font-weight: 300;
33
// line-height: 1;
34
}
35
@if $style == headline3 {
37
// font-family: $font-family-large;
38
font-size: 48px;
39
font-weight: 400;
40
// line-height: 50px;
41
}
42
@if $style == headline4 {
44
// font-family: $font-family-large;
45
font-size: 34px;
46
font-weight: 400;
47
// line-height: 40px;
48
}
49
@if $style == headline5 {
51
font-size: pt(24px);
52
font-weight: 400;
53
// line-height: 32px;
54
}
55
@if $style == headline6 {
57
font-size: pt(20px);
58
font-weight: 500;
59
// line-height: 32px;
60
}
61
@if $style == subtitle1 {
63
font-size: pt(st-theme.$font-size-subheading);
64
font-weight: 400;
65
// line-height: 28px;
66
}
67
@if $style == subtitle2 {
69
font-size: pt(st-theme.$font-size);
70
font-weight: 500;
71
// line-height: 22px;
72
}
73
@if $style == body1 {
75
font-size: pt(st-theme.$font-size-subheading);
76
font-weight: 400;
77
// line-height: 24px;
78
}
79
@if $style == body2 {
81
font-size: pt(st-theme.$font-size);
82
font-weight: 400;
83
// line-height: 20px;
84
}
85
@if $style == caption {
87
font-size: pt(12px);
88
font-weight: 400;
89
// line-height: 20px;
90
}
91
@if $style == button {
93
font-size: pt(st-theme.$font-size);
94
font-weight: 500;
95
// line-height: 36px;
96
}
97
@if $style == overline {
99
font-size: pt(12px);
100
font-weight: 400;
101
// line-height: 32px;
102
}
103
}
104
@mixin entry($t, $fc: theme-color.$primary) {
107
//
108
// entry
109
//
110
// $t: entry type
111
// $fc: focus color
112
//
113
@if $t == normal {
115
transition-duration: st-theme.$duration;
116
background-color: if($fc == theme-color.$primary, theme-color.entry-fill(theme-color.$on-surface), theme-color.entry-fill(theme-color.$on-dark));
117
border-color: transparent;
118
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.stroke(theme-color.$on-surface), $fc);
119
}
120
@if $t == focus {
122
border-color: transparent;
123
box-shadow: inset 0 -2px $fc;
124
}
125
@if $t == hover {
127
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.$on-surface, $fc);
128
}
129
@if $t == insensitive {
131
color: theme-color.disabled(theme-color.$on-surface);
132
border-color: transparent;
133
box-shadow: inset 0 -1px if($fc == theme-color.$primary, theme-color.disabled-stroke(theme-color.$on-surface), $fc);
134
}
135
}
136
@mixin button($t, $c: theme-color.$surface-z8, $tc: theme-color.$on-surface) {
139
//
140
// button
141
//
142
// $t: button type
143
// $c: base color
144
// $tc: text color
145
//
146
@if $t == normal {
148
color: $tc;
149
background-color: $c;
150
border-color: transparent;
151
box-shadow: theme.$shadow-z2;
152
text-shadow: none;
153
icon-shadow: none;
154
transition-duration: st-theme.$duration;
155
}
156
@if $t == focus {
158
color: $tc;
159
background-color: theme-color.focus-overlay($tc, $on: $c);
160
text-shadow: none;
161
icon-shadow: none;
162
box-shadow: theme.$shadow-z4;
163
}
164
@if $t == hover {
166
color: $tc;
167
background-color: theme-color.hover-overlay($tc, $on: $c);
168
border-color: transparent;
169
box-shadow: theme.$shadow-z4;
170
text-shadow: none;
171
icon-shadow: none;
172
}
173
@if $t == active {
175
color: $tc;
176
background-color: theme-color.pressed-overlay($tc, $on: $c);
177
border-color: transparent;
178
box-shadow: theme.$shadow-z8;
179
text-shadow: none;
180
icon-shadow: none;
181
transition-duration: st-theme.$duration-ripple;
182
}
183
@if $t == insensitive {
185
color: if($tc == theme-color.$on-surface, theme-color.disabled(theme-color.$on-surface), $tc);
186
background-color: if($c == theme-color.$surface-z8, theme-color.fill(theme-color.$on-surface), $c);
187
border-color: transparent;
188
box-shadow: st-theme.$shadow-z0;
189
text-shadow: none;
190
icon-shadow: none;
191
}
192
@if $t == flat-normal {
194
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
195
background-color: transparent;
196
border-color: transparent;
197
box-shadow: st-theme.$shadow-z0;
198
text-shadow: none;
199
icon-shadow: none;
200
transition-duration: st-theme.$duration;
201
}
202
@if $t == flat-focus {
204
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
205
background-color: theme-color.focus-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
206
text-shadow: none;
207
icon-shadow: none;
208
box-shadow: st-theme.$shadow-z0;
209
}
210
@if $t == flat-hover {
212
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
213
background-color: theme-color.hover-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
214
border-color: transparent;
215
box-shadow: st-theme.$shadow-z0;
216
text-shadow: none;
217
icon-shadow: none;
218
}
219
@if $t == flat-active {
221
color: if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.hint(theme-color.$on-dark));
222
background-color: theme-color.pressed-overlay(if($tc != theme-color.$on-dark, theme-color.$primary, theme-color.$on-dark));
223
border-color: transparent;
224
box-shadow: st-theme.$shadow-z0;
225
text-shadow: none;
226
icon-shadow: none;
227
transition-duration: st-theme.$duration-ripple;
228
}
229
@if $t == flat-insensitive {
231
color: if($tc != theme-color.$on-dark, theme-color.disabled-hint(theme-color.$on-surface), theme-color.disabled-hint(theme-color.$on-dark));
232
background-color: transparent;
233
border-color: transparent;
234
box-shadow: st-theme.$shadow-z0;
235
text-shadow: none;
236
icon-shadow: none;
237
}
238
}
239