zu 0.3.3

Yew web components, implementing Material Design
Documentation 
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.


/* Typography variables */

$zu-typography-htmlFontSize: 16 !default;
$zu-typography-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-fontSize: 14 !default;
$zu-typography-fontWeightLight: 300 !default;
$zu-typography-fontWeightRegular: 400 !default;
$zu-typography-fontWeightMedium: 500 !default;
$zu-typography-fontWeightBold: 700 !default;

// For h1
$zu-typography-h1-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-h1-fontWeight: 300 !default;
$zu-typography-h1-fontSize: 6rem !default;
$zu-typography-h1-lineHeight: 1.167 !default;
$zu-typography-h1-letterSpacing: -0.01562em !default;
@mixin zu-typography-h1 {
  font-family: $zu-typography-h1-fontFamily;
  font-weight: $zu-typography-h1-fontWeight;
  font-size: $zu-typography-h1-fontSize;
  line-height: $zu-typography-h1-lineHeight;
  letter-spacing: $zu-typography-h1-letterSpacing;
}

// For h2
$zu-typography-h2-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-h2-fontWeight: 300 !default;
$zu-typography-h2-fontSize: 3.75rem !default;
$zu-typography-h2-lineHeight: 1.2 !default;
$zu-typography-h2-letterSpacing: -0.00833em !default;
@mixin zu-typography-h2 {
  font-family: $zu-typography-h2-fontFamily;
  font-weight: $zu-typography-h2-fontWeight;
  font-size: $zu-typography-h2-fontSize;
  line-height: $zu-typography-h2-lineHeight;
  letter-spacing: $zu-typography-h2-letterSpacing;
}

// For h3
$zu-typography-h3-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-h3-fontWeight: 400 !default;
$zu-typography-h3-fontSize: 3rem !default;
$zu-typography-h3-lineHeight: 1.168 !default;
$zu-typography-h3-letterSpacing: 0 !default;
@mixin zu-typography-h3 {
  font-family: $zu-typography-h3-fontFamily;
  font-weight: $zu-typography-h3-fontWeight;
  font-size: $zu-typography-h3-fontSize;
  line-height: $zu-typography-h3-lineHeight;
  letter-spacing: $zu-typography-h3-letterSpacing;
}

// For h4
$zu-typography-h4-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-h4-fontWeight: 400 !default;
$zu-typography-h4-fontSize: 2.125rem !default;
$zu-typography-h4-lineHeight: 1.235 !default;
$zu-typography-h4-letterSpacing: 0.00735em !default;
@mixin zu-typography-h4 {
  font-family: $zu-typography-h4-fontFamily;
  font-weight: $zu-typography-h4-fontWeight;
  font-size: $zu-typography-h4-fontSize;
  line-height: $zu-typography-h4-lineHeight;
  letter-spacing: $zu-typography-h4-letterSpacing;
}

// For h5
$zu-typography-h5-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-h5-fontWeight: 400 !default;
$zu-typography-h5-fontSize: 1.5rem !default;
$zu-typography-h5-lineHeight: 1.334 !default;
$zu-typography-h5-letterSpacing: 0 !default;
@mixin zu-typography-h5 {
  font-family: $zu-typography-h5-fontFamily;
  font-weight: $zu-typography-h5-fontWeight;
  font-size: $zu-typography-h5-fontSize;
  line-height: $zu-typography-h5-lineHeight;
  letter-spacing: $zu-typography-h5-letterSpacing;
}

// For h6
$zu-typography-h6-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-h6-fontWeight: 500 !default;
$zu-typography-h6-fontSize: 1.25rem !default;
$zu-typography-h6-lineHeight: 1.6 !default;
$zu-typography-h6-letterSpacing: 0.0075em !default;
@mixin zu-typography-h6 {
  font-family: $zu-typography-h6-fontFamily;
  font-weight: $zu-typography-h6-fontWeight;
  font-size: $zu-typography-h6-fontSize;
  line-height: $zu-typography-h6-lineHeight;
  letter-spacing: $zu-typography-h6-letterSpacing;
}

// For subtitle1
$zu-typography-subtitle1-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-subtitle1-fontWeight: 400 !default;
$zu-typography-subtitle1-fontSize: 1rem !default;
$zu-typography-subtitle1-lineHeight: 1.75 !default;
$zu-typography-subtitle1-letterSpacing: 0.00938em !default;
@mixin zu-typography-subtitle1 {
  font-family: $zu-typography-subtitle1-fontFamily;
  font-weight: $zu-typography-subtitle1-fontWeight;
  font-size: $zu-typography-subtitle1-fontSize;
  line-height: $zu-typography-subtitle1-lineHeight;
  letter-spacing: $zu-typography-subtitle1-letterSpacing;
}

// For subtitle2
$zu-typography-subtitle2-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-subtitle2-fontWeight: 500 !default;
$zu-typography-subtitle2-fontSize: 0.875rem !default;
$zu-typography-subtitle2-lineHeight: 1.57 !default;
$zu-typography-subtitle2-letterSpacing: 0.00714em !default;
@mixin zu-typography-subtitle2 {
  font-family: $zu-typography-subtitle2-fontFamily;
  font-weight: $zu-typography-subtitle2-fontWeight;
  font-size: $zu-typography-subtitle2-fontSize;
  line-height: $zu-typography-subtitle2-lineHeight;
  letter-spacing: $zu-typography-subtitle2-letterSpacing;
}

// For body1
$zu-typography-body1-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-body1-fontWeight: 400 !default;
$zu-typography-body1-fontSize: 1rem !default;
$zu-typography-body1-lineHeight: 1.5 !default;
$zu-typography-body1-letterSpacing: 0.00938em !default;
@mixin zu-typography-body1 {
  font-family: $zu-typography-body1-fontFamily;
  font-weight: $zu-typography-body1-fontWeight;
  font-size: $zu-typography-body1-fontSize;
  line-height: $zu-typography-body1-lineHeight;
  letter-spacing: $zu-typography-body1-letterSpacing;
}

// For body2
$zu-typography-body2-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-body2-fontWeight: 400 !default;
$zu-typography-body2-fontSize: 0.875rem !default;
$zu-typography-body2-lineHeight: 1.43 !default;
$zu-typography-body2-letterSpacing: 0.01071em !default;
@mixin zu-typography-body2 {
  font-family: $zu-typography-body2-fontFamily;
  font-weight: $zu-typography-body2-fontWeight;
  font-size: $zu-typography-body2-fontSize;
  line-height: $zu-typography-body2-lineHeight;
  letter-spacing: $zu-typography-body2-letterSpacing;
}

// For button
$zu-typography-button-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-button-fontWeight: 500 !default;
$zu-typography-button-fontSize: 0.875rem !default;
$zu-typography-button-lineHeight: 1.75 !default;
$zu-typography-button-letterSpacing: 0.02857em !default;
$zu-typography-button-textTransform: uppercase !default;
@mixin zu-typography-button {
  font-family: $zu-typography-button-fontFamily;
  font-weight: $zu-typography-button-fontWeight;
  font-size: $zu-typography-button-fontSize;
  line-height: $zu-typography-button-lineHeight;
  letter-spacing: $zu-typography-button-letterSpacing;
}

// For caption
$zu-typography-caption-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-caption-fontWeight: 400 !default;
$zu-typography-caption-fontSize: 0.75rem !default;
$zu-typography-caption-lineHeight: 1.66 !default;
$zu-typography-caption-letterSpacing: 0.03333em !default;
@mixin zu-typography-caption {
  font-family: $zu-typography-caption-fontFamily;
  font-weight: $zu-typography-caption-fontWeight;
  font-size: $zu-typography-caption-fontSize;
  line-height: $zu-typography-caption-lineHeight;
  letter-spacing: $zu-typography-caption-letterSpacing;
}

// For overline
$zu-typography-overline-fontFamily: "Roboto", "Helvetica", "Arial", "sans-serif" !default;
$zu-typography-overline-fontWeight: 400 !default;
$zu-typography-overline-fontSize: 0.75rem !default;
$zu-typography-overline-lineHeight: 2.66 !default;
$zu-typography-overline-letterSpacing: 0.03333em !default;
$zu-typography-overline-textTransform: uppercase !default;
@mixin zu-typography-overline {
  font-family: $zu-typography-overline-fontFamily;
  font-weight: $zu-typography-overline-fontWeight;
  font-size: $zu-typography-overline-fontSize;
  line-height: $zu-typography-overline-lineHeight;
  letter-spacing: $zu-typography-overline-letterSpacing;
}

// For inherit
$zu-typography-inherit-fontFamily: inherit !default;
$zu-typography-inherit-fontWeight: inherit !default;
$zu-typography-inherit-fontSize: inherit !default;
$zu-typography-inherit-lineHeight: inherit !default;
$zu-typography-inherit-letterSpacing: inherit !default;
@mixin zu-typography-inherit {
  font-family: $zu-typography-inherit-fontFamily;
  font-weight: $zu-typography-inherit-fontWeight;
  font-size: $zu-typography-inherit-fontSize;
  line-height: $zu-typography-inherit-lineHeight;
  letter-spacing: $zu-typography-inherit-letterSpacing;
}

:root {
  --zu-typography-htmlFontSize: #{$zu-typography-htmlFontSize};
  --zu-typography-fontFamily: #{$zu-typography-fontFamily};
  --zu-typography-fontSize: #{$zu-typography-fontSize};
  --zu-typography-fontWeightLight: #{$zu-typography-fontWeightLight};
  --zu-typography-fontWeightRegular: #{$zu-typography-fontWeightRegular};
  --zu-typography-fontWeightMedium: #{$zu-typography-fontWeightMedium};
  --zu-typography-fontWeightBold: #{$zu-typography-fontWeightBold};

  --zu-typography-h1-fontFamily: #{$zu-typography-h1-fontFamily};
  --zu-typography-h1-fontWeight: #{$zu-typography-h1-fontWeight};
  --zu-typography-h1-fontSize: #{$zu-typography-h1-fontSize};
  --zu-typography-h1-lineHeight: #{$zu-typography-h1-lineHeight};
  --zu-typography-h1-letterSpacing: #{$zu-typography-h1-letterSpacing};

  --zu-typography-h2-fontFamily: #{$zu-typography-h2-fontFamily};
  --zu-typography-h2-fontWeight: #{$zu-typography-h2-fontWeight};
  --zu-typography-h2-fontSize: #{$zu-typography-h2-fontSize};
  --zu-typography-h2-lineHeight: #{$zu-typography-h2-lineHeight};
  --zu-typography-h2-letterSpacing: #{$zu-typography-h2-letterSpacing};
  
  --zu-typography-h3-fontFamily: #{$zu-typography-h3-fontFamily};
  --zu-typography-h3-fontWeight: #{$zu-typography-h3-fontWeight};
  --zu-typography-h3-fontSize: #{$zu-typography-h3-fontSize};
  --zu-typography-h3-lineHeight: #{$zu-typography-h3-lineHeight};
  --zu-typography-h3-letterSpacing: #{$zu-typography-h3-letterSpacing};

  --zu-typography-h4-fontFamily: #{$zu-typography-h4-fontFamily};
  --zu-typography-h4-fontWeight: #{$zu-typography-h4-fontWeight};
  --zu-typography-h4-fontSize: #{$zu-typography-h4-fontSize};
  --zu-typography-h4-lineHeight: #{$zu-typography-h4-lineHeight};
  --zu-typography-h4-letterSpacing: #{$zu-typography-h4-letterSpacing};

  --zu-typography-h5-fontFamily: #{$zu-typography-h5-fontFamily};
  --zu-typography-h5-fontWeight: #{$zu-typography-h5-fontWeight};
  --zu-typography-h5-fontSize: #{$zu-typography-h5-fontSize};
  --zu-typography-h5-lineHeight: #{$zu-typography-h5-lineHeight};
  --zu-typography-h5-letterSpacing: #{$zu-typography-h5-letterSpacing};

  --zu-typography-h6-fontFamily: #{$zu-typography-h6-fontFamily};
  --zu-typography-h6-fontWeight: #{$zu-typography-h6-fontWeight};
  --zu-typography-h6-fontSize: #{$zu-typography-h6-fontSize};
  --zu-typography-h6-lineHeight: #{$zu-typography-h6-lineHeight};
  --zu-typography-h6-letterSpacing: #{$zu-typography-h6-letterSpacing};

  --zu-typography-subtitle1-fontFamily: #{$zu-typography-subtitle1-fontFamily};
  --zu-typography-subtitle1-fontWeight: #{$zu-typography-subtitle1-fontWeight};
  --zu-typography-subtitle1-fontSize: #{$zu-typography-subtitle1-fontSize};
  --zu-typography-subtitle1-lineHeight: #{$zu-typography-subtitle1-lineHeight};
  --zu-typography-subtitle1-letterSpacing: #{$zu-typography-subtitle1-letterSpacing};

  --zu-typography-subtitle2-fontFamily: #{$zu-typography-subtitle2-fontFamily};
  --zu-typography-subtitle2-fontWeight: #{$zu-typography-subtitle2-fontWeight};
  --zu-typography-subtitle2-fontSize: #{$zu-typography-subtitle2-fontSize};
  --zu-typography-subtitle2-lineHeight: #{$zu-typography-subtitle2-lineHeight};
  --zu-typography-subtitle2-letterSpacing: #{$zu-typography-subtitle2-letterSpacing};

  --zu-typography-body1-fontFamily: #{$zu-typography-body1-fontFamily};
  --zu-typography-body1-fontWeight: #{$zu-typography-body1-fontWeight};
  --zu-typography-body1-fontSize: #{$zu-typography-body1-fontSize};
  --zu-typography-body1-lineHeight: #{$zu-typography-body1-lineHeight};
  --zu-typography-body1-letterSpacing: #{$zu-typography-body1-letterSpacing};

  --zu-typography-body2-fontFamily: #{$zu-typography-body2-fontFamily};
  --zu-typography-body2-fontWeight: #{$zu-typography-body2-fontWeight};
  --zu-typography-body2-fontSize: #{$zu-typography-body2-fontSize};
  --zu-typography-body2-lineHeight: #{$zu-typography-body2-lineHeight};
  --zu-typography-body2-letterSpacing: #{$zu-typography-body2-letterSpacing};

  --zu-typography-button-fontFamily: #{$zu-typography-button-fontFamily};
  --zu-typography-button-fontWeight: #{$zu-typography-button-fontWeight};
  --zu-typography-button-fontSize: #{$zu-typography-button-fontSize};
  --zu-typography-button-lineHeight: #{$zu-typography-button-lineHeight};
  --zu-typography-button-letterSpacing: #{$zu-typography-button-letterSpacing};
  --zu-typography-button-textTransform: #{$zu-typography-button-textTransform};

  --zu-typography-caption-fontFamily: #{$zu-typography-caption-fontFamily};
  --zu-typography-caption-fontWeight: #{$zu-typography-caption-fontWeight};
  --zu-typography-caption-fontSize: #{$zu-typography-caption-fontSize};
  --zu-typography-caption-lineHeight: #{$zu-typography-caption-lineHeight};
  --zu-typography-caption-letterSpacing: #{$zu-typography-caption-letterSpacing};

  --zu-typography-overline-fontFamily: #{$zu-typography-overline-fontFamily};
  --zu-typography-overline-fontWeight: #{$zu-typography-overline-fontWeight};
  --zu-typography-overline-fontSize: #{$zu-typography-overline-fontSize};
  --zu-typography-overline-lineHeight: #{$zu-typography-overline-lineHeight};
  --zu-typography-overline-letterSpacing: #{$zu-typography-overline-letterSpacing};
  --zu-typography-overline-textTransform: #{$zu-typography-overline-textTransform};

  --zu-typography-inherit-fontFamily: #{$zu-typography-inherit-fontFamily};
  --zu-typography-inherit-fontWeight: #{$zu-typography-inherit-fontWeight};
  --zu-typography-inherit-fontSize: #{$zu-typography-inherit-fontSize};
  --zu-typography-inherit-lineHeight: #{$zu-typography-inherit-lineHeight};
  --zu-typography-inherit-letterSpacing: #{$zu-typography-inherit-letterSpacing};
}