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