@rcarls/rc-theme-material 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -82
- package/bridge.css +446 -298
- package/components/accordion.css +173 -6
- package/components/app-bar.css +8 -4
- package/components/combobox.css +63 -0
- package/components/dialog.css +5 -2
- package/components/disclosure.css +102 -7
- package/components/fab.css +17 -0
- package/components/listbox.css +31 -22
- package/components/menu-button.css +13 -13
- package/components/menu.css +96 -12
- package/components/menubar.css +18 -3
- package/components/search-bar.css +16 -6
- package/components/select.css +62 -0
- package/components/splitter.css +26 -12
- package/components/transfer-list.css +40 -1
- package/components.css +1 -0
- package/defaults.css +858 -87
- package/package.json +6 -7
package/defaults.css
CHANGED
|
@@ -1,101 +1,872 @@
|
|
|
1
1
|
@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
|
|
2
2
|
|
|
3
3
|
@layer rc-theme-material.defaults {
|
|
4
|
-
/*
|
|
5
|
-
*
|
|
4
|
+
/*
|
|
5
|
+
* Bundled Material 3 token defaults for standalone use.
|
|
6
|
+
*
|
|
7
|
+
* Token values are vendored from material-foundation/material-tokens
|
|
8
|
+
* css/*.css and css/theme/*.css, licensed under Apache-2.0.
|
|
9
|
+
* The upstream repository was archived on 2024-10-17 and has no
|
|
10
|
+
* published releases, so this package ships scoped CSS defaults directly.
|
|
6
11
|
*
|
|
7
12
|
* Applications with an existing Material token environment should import only
|
|
8
|
-
* bridge.css so their
|
|
9
|
-
* source of truth.
|
|
13
|
+
* bridge.css so their generated or branded --md-* values remain authoritative.
|
|
10
14
|
*/
|
|
11
|
-
.rc-theme-material,
|
|
12
|
-
:host(.rc-theme-material) {
|
|
13
|
-
|
|
15
|
+
.rc-theme-material,
|
|
16
|
+
:host(.rc-theme-material) {
|
|
17
|
+
color-scheme: light dark;
|
|
14
18
|
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
/* Reference palette tokens */
|
|
20
|
+
/* Error 0 */
|
|
21
|
+
--md-ref-palette-error0: #000000ff;
|
|
22
|
+
/* Error 10 */
|
|
23
|
+
--md-ref-palette-error10: #410e0bff;
|
|
24
|
+
/* Error 20 */
|
|
25
|
+
--md-ref-palette-error20: #601410ff;
|
|
26
|
+
/* Error 30 */
|
|
27
|
+
--md-ref-palette-error30: #8c1d18ff;
|
|
28
|
+
/* Error 40 */
|
|
29
|
+
--md-ref-palette-error40: #b3261eff;
|
|
30
|
+
/* Error 50 */
|
|
31
|
+
--md-ref-palette-error50: #dc362eff;
|
|
32
|
+
/* Error 60 */
|
|
33
|
+
--md-ref-palette-error60: #e46962ff;
|
|
34
|
+
/* Error 70 */
|
|
35
|
+
--md-ref-palette-error70: #ec928eff;
|
|
36
|
+
/* Error 80 */
|
|
37
|
+
--md-ref-palette-error80: #f2b8b5ff;
|
|
38
|
+
/* Error 90 */
|
|
39
|
+
--md-ref-palette-error90: #f9dedcff;
|
|
40
|
+
/* Error 95 */
|
|
41
|
+
--md-ref-palette-error95: #fceeeeff;
|
|
42
|
+
/* Error 99 */
|
|
43
|
+
--md-ref-palette-error99: #fffbf9ff;
|
|
44
|
+
/* Error 100 */
|
|
45
|
+
--md-ref-palette-error100: #ffffffff;
|
|
46
|
+
/* Tertiary 0 */
|
|
47
|
+
--md-ref-palette-tertiary0: #000000ff;
|
|
48
|
+
/* Tertiary 10 */
|
|
49
|
+
--md-ref-palette-tertiary10: #31111dff;
|
|
50
|
+
/* Tertiary 20 */
|
|
51
|
+
--md-ref-palette-tertiary20: #492532ff;
|
|
52
|
+
/* Tertiary 30 */
|
|
53
|
+
--md-ref-palette-tertiary30: #633b48ff;
|
|
54
|
+
/* Tertiary 40 */
|
|
55
|
+
--md-ref-palette-tertiary40: #7d5260ff;
|
|
56
|
+
/* Tertiary 50 */
|
|
57
|
+
--md-ref-palette-tertiary50: #986977ff;
|
|
58
|
+
/* Tertiary 60 */
|
|
59
|
+
--md-ref-palette-tertiary60: #b58392ff;
|
|
60
|
+
/* Tertiary 70 */
|
|
61
|
+
--md-ref-palette-tertiary70: #d29dacff;
|
|
62
|
+
/* Tertiary 80 */
|
|
63
|
+
--md-ref-palette-tertiary80: #efb8c8ff;
|
|
64
|
+
/* Tertiary 90 */
|
|
65
|
+
--md-ref-palette-tertiary90: #ffd8e4ff;
|
|
66
|
+
/* Tertiary 95 */
|
|
67
|
+
--md-ref-palette-tertiary95: #ffecf1ff;
|
|
68
|
+
/* Tertiary 99 */
|
|
69
|
+
--md-ref-palette-tertiary99: #fffbfaff;
|
|
70
|
+
/* Tertiary 100 */
|
|
71
|
+
--md-ref-palette-tertiary100: #ffffffff;
|
|
72
|
+
/* Secondary 0 */
|
|
73
|
+
--md-ref-palette-secondary0: #000000ff;
|
|
74
|
+
/* Secondary 10 */
|
|
75
|
+
--md-ref-palette-secondary10: #1d192bff;
|
|
76
|
+
/* Secondary 20 */
|
|
77
|
+
--md-ref-palette-secondary20: #332d41ff;
|
|
78
|
+
/* Secondary 30 */
|
|
79
|
+
--md-ref-palette-secondary30: #4a4458ff;
|
|
80
|
+
/* Secondary 40 */
|
|
81
|
+
--md-ref-palette-secondary40: #625b71ff;
|
|
82
|
+
/* Secondary 50 */
|
|
83
|
+
--md-ref-palette-secondary50: #7a7289ff;
|
|
84
|
+
/* Secondary 60 */
|
|
85
|
+
--md-ref-palette-secondary60: #958da5ff;
|
|
86
|
+
/* Secondary 70 */
|
|
87
|
+
--md-ref-palette-secondary70: #b0a7c0ff;
|
|
88
|
+
/* Secondary 80 */
|
|
89
|
+
--md-ref-palette-secondary80: #ccc2dcff;
|
|
90
|
+
/* Secondary 90 */
|
|
91
|
+
--md-ref-palette-secondary90: #e8def8ff;
|
|
92
|
+
/* Secondary 95 */
|
|
93
|
+
--md-ref-palette-secondary95: #f6edffff;
|
|
94
|
+
/* Secondary 99 */
|
|
95
|
+
--md-ref-palette-secondary99: #fffbfeff;
|
|
96
|
+
/* Secondary 100 */
|
|
97
|
+
--md-ref-palette-secondary100: #ffffffff;
|
|
98
|
+
/* Primary 0 */
|
|
99
|
+
--md-ref-palette-primary0: #000000ff;
|
|
100
|
+
/* Primary 10 */
|
|
101
|
+
--md-ref-palette-primary10: #21005dff;
|
|
102
|
+
/* Primary 20 */
|
|
103
|
+
--md-ref-palette-primary20: #381e72ff;
|
|
104
|
+
/* Primary 30 */
|
|
105
|
+
--md-ref-palette-primary30: #4f378bff;
|
|
106
|
+
/* Primary 40 */
|
|
107
|
+
--md-ref-palette-primary40: #6750a4ff;
|
|
108
|
+
/* Primary 50 */
|
|
109
|
+
--md-ref-palette-primary50: #7f67beff;
|
|
110
|
+
/* Primary 60 */
|
|
111
|
+
--md-ref-palette-primary60: #9a82dbff;
|
|
112
|
+
/* Primary 70 */
|
|
113
|
+
--md-ref-palette-primary70: #b69df8ff;
|
|
114
|
+
/* Primary 80 */
|
|
115
|
+
--md-ref-palette-primary80: #d0bcffff;
|
|
116
|
+
/* Primary 90 */
|
|
117
|
+
--md-ref-palette-primary90: #eaddffff;
|
|
118
|
+
/* Primary 95 */
|
|
119
|
+
--md-ref-palette-primary95: #f6edffff;
|
|
120
|
+
/* Primary 99 */
|
|
121
|
+
--md-ref-palette-primary99: #fffbfeff;
|
|
122
|
+
/* Primary 100 */
|
|
123
|
+
--md-ref-palette-primary100: #ffffffff;
|
|
124
|
+
/* Neutral Variant 0 */
|
|
125
|
+
--md-ref-palette-neutral-variant0: #000000ff;
|
|
126
|
+
/* Neutral Variant 10 */
|
|
127
|
+
--md-ref-palette-neutral-variant10: #1d1a22ff;
|
|
128
|
+
/* Neutral Variant 20 */
|
|
129
|
+
--md-ref-palette-neutral-variant20: #322f37ff;
|
|
130
|
+
/* Neutral Variant 30 */
|
|
131
|
+
--md-ref-palette-neutral-variant30: #49454fff;
|
|
132
|
+
/* Neutral Variant 40 */
|
|
133
|
+
--md-ref-palette-neutral-variant40: #605d66ff;
|
|
134
|
+
/* Neutral Variant 50 */
|
|
135
|
+
--md-ref-palette-neutral-variant50: #79747eff;
|
|
136
|
+
/* Neutral Variant 60 */
|
|
137
|
+
--md-ref-palette-neutral-variant60: #938f99ff;
|
|
138
|
+
/* Neutral Variant 70 */
|
|
139
|
+
--md-ref-palette-neutral-variant70: #aea9b4ff;
|
|
140
|
+
/* Neutral Variant 80 */
|
|
141
|
+
--md-ref-palette-neutral-variant80: #cac4d0ff;
|
|
142
|
+
/* Neutral Variant 90 */
|
|
143
|
+
--md-ref-palette-neutral-variant90: #e7e0ecff;
|
|
144
|
+
/* Neutral Variant 95 */
|
|
145
|
+
--md-ref-palette-neutral-variant95: #f5eefaff;
|
|
146
|
+
/* Neutral Variant 99 */
|
|
147
|
+
--md-ref-palette-neutral-variant99: #fffbfeff;
|
|
148
|
+
/* Neutral Variant 100 */
|
|
149
|
+
--md-ref-palette-neutral-variant100: #ffffffff;
|
|
150
|
+
/* Neutral 0 */
|
|
151
|
+
--md-ref-palette-neutral0: #000000ff;
|
|
152
|
+
/* Neutral 10 */
|
|
153
|
+
--md-ref-palette-neutral10: #1c1b1fff;
|
|
154
|
+
/* Neutral 20 */
|
|
155
|
+
--md-ref-palette-neutral20: #313033ff;
|
|
156
|
+
/* Neutral 30 */
|
|
157
|
+
--md-ref-palette-neutral30: #484649ff;
|
|
158
|
+
/* Neutral 40 */
|
|
159
|
+
--md-ref-palette-neutral40: #605d62ff;
|
|
160
|
+
/* Neutral 50 */
|
|
161
|
+
--md-ref-palette-neutral50: #787579ff;
|
|
162
|
+
/* Neutral 60 */
|
|
163
|
+
--md-ref-palette-neutral60: #939094ff;
|
|
164
|
+
/* Neutral 70 */
|
|
165
|
+
--md-ref-palette-neutral70: #aeaaaeff;
|
|
166
|
+
/* Neutral 80 */
|
|
167
|
+
--md-ref-palette-neutral80: #c9c5caff;
|
|
168
|
+
/* Neutral 90 */
|
|
169
|
+
--md-ref-palette-neutral90: #e6e1e5ff;
|
|
170
|
+
/* Neutral 95 */
|
|
171
|
+
--md-ref-palette-neutral95: #f4eff4ff;
|
|
172
|
+
/* Neutral 99 */
|
|
173
|
+
--md-ref-palette-neutral99: #fffbfeff;
|
|
174
|
+
/* Neutral 100 */
|
|
175
|
+
--md-ref-palette-neutral100: #ffffffff;
|
|
176
|
+
/* Black */
|
|
177
|
+
--md-ref-palette-black: #000000ff;
|
|
178
|
+
/* White */
|
|
179
|
+
--md-ref-palette-white: #ffffffff;
|
|
17
180
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
181
|
+
/* Typography tokens */
|
|
182
|
+
/* Label Small */
|
|
183
|
+
--md-sys-typescale-label-small-text-transform: unset;
|
|
184
|
+
--md-sys-typescale-label-small-axis-value: unset;
|
|
185
|
+
--md-sys-typescale-label-small-font-style: unset;
|
|
186
|
+
--md-sys-typescale-label-small-text-decoration: unset;
|
|
187
|
+
/* Label Small line height */
|
|
188
|
+
--md-sys-typescale-label-small-line-height-value: 16px;
|
|
189
|
+
--md-sys-typescale-label-small-line-height-unit: 2px;
|
|
190
|
+
--md-sys-typescale-label-small-line-height: 16px;
|
|
191
|
+
/* Label Small font tracking */
|
|
192
|
+
--md-sys-typescale-label-small-tracking-value: 0.5px;
|
|
193
|
+
--md-sys-typescale-label-small-tracking-unit: 2px;
|
|
194
|
+
--md-sys-typescale-label-small-tracking: 0.5px;
|
|
195
|
+
/* Label Small font size */
|
|
196
|
+
--md-sys-typescale-label-small-size-value: 11px;
|
|
197
|
+
--md-sys-typescale-label-small-size-unit: 2px;
|
|
198
|
+
--md-sys-typescale-label-small-size: 11px;
|
|
199
|
+
/* Label Small font weight */
|
|
200
|
+
--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
|
|
201
|
+
/* Label Small font name */
|
|
202
|
+
--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
|
|
203
|
+
/* Label Medium */
|
|
204
|
+
--md-sys-typescale-label-medium-axis-value: unset;
|
|
205
|
+
--md-sys-typescale-label-medium-font-style: unset;
|
|
206
|
+
--md-sys-typescale-label-medium-text-decoration: unset;
|
|
207
|
+
/* Label Medium text transform */
|
|
208
|
+
--md-sys-typescale-label-medium-text-transform: 1;
|
|
209
|
+
/* Label Medium line height */
|
|
210
|
+
--md-sys-typescale-label-medium-line-height-value: 16px;
|
|
211
|
+
--md-sys-typescale-label-medium-line-height-unit: 2px;
|
|
212
|
+
--md-sys-typescale-label-medium-line-height: 16px;
|
|
213
|
+
/* Label Medium font tracking */
|
|
214
|
+
--md-sys-typescale-label-medium-tracking-value: 0.5px;
|
|
215
|
+
--md-sys-typescale-label-medium-tracking-unit: 2px;
|
|
216
|
+
--md-sys-typescale-label-medium-tracking: 0.5px;
|
|
217
|
+
/* Label Medium font size */
|
|
218
|
+
--md-sys-typescale-label-medium-size-value: 12px;
|
|
219
|
+
--md-sys-typescale-label-medium-size-unit: 2px;
|
|
220
|
+
--md-sys-typescale-label-medium-size: 12px;
|
|
221
|
+
/* Label Medium font weight */
|
|
222
|
+
--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
|
|
223
|
+
/* Label Medium font name */
|
|
224
|
+
--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
|
|
225
|
+
/* Label Large */
|
|
226
|
+
--md-sys-typescale-label-large-text-transform: unset;
|
|
227
|
+
--md-sys-typescale-label-large-axis-value: unset;
|
|
228
|
+
--md-sys-typescale-label-large-font-style: unset;
|
|
229
|
+
--md-sys-typescale-label-large-text-decoration: unset;
|
|
230
|
+
/* Label Large line height */
|
|
231
|
+
--md-sys-typescale-label-large-line-height-value: 20px;
|
|
232
|
+
--md-sys-typescale-label-large-line-height-unit: 2px;
|
|
233
|
+
--md-sys-typescale-label-large-line-height: 20px;
|
|
234
|
+
/* Label Large font tracking */
|
|
235
|
+
--md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
|
|
236
|
+
--md-sys-typescale-label-large-tracking-unit: 2px;
|
|
237
|
+
--md-sys-typescale-label-large-tracking: 0.10000000149011612px;
|
|
238
|
+
/* Label Large font size */
|
|
239
|
+
--md-sys-typescale-label-large-size-value: 14px;
|
|
240
|
+
--md-sys-typescale-label-large-size-unit: 2px;
|
|
241
|
+
--md-sys-typescale-label-large-size: 14px;
|
|
242
|
+
/* Label Large font weight */
|
|
243
|
+
--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
|
|
244
|
+
/* Label Large font name */
|
|
245
|
+
--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
|
|
246
|
+
/* Body Small */
|
|
247
|
+
--md-sys-typescale-body-small-text-transform: unset;
|
|
248
|
+
--md-sys-typescale-body-small-axis-value: unset;
|
|
249
|
+
--md-sys-typescale-body-small-font-style: unset;
|
|
250
|
+
--md-sys-typescale-body-small-text-decoration: unset;
|
|
251
|
+
/* Body Small line height */
|
|
252
|
+
--md-sys-typescale-body-small-line-height-value: 16px;
|
|
253
|
+
--md-sys-typescale-body-small-line-height-unit: 2px;
|
|
254
|
+
--md-sys-typescale-body-small-line-height: 16px;
|
|
255
|
+
/* Body Small font tracking */
|
|
256
|
+
--md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
|
|
257
|
+
--md-sys-typescale-body-small-tracking-unit: 2px;
|
|
258
|
+
--md-sys-typescale-body-small-tracking: 0.4000000059604645px;
|
|
259
|
+
/* Body Small font size */
|
|
260
|
+
--md-sys-typescale-body-small-size-value: 12px;
|
|
261
|
+
--md-sys-typescale-body-small-size-unit: 2px;
|
|
262
|
+
--md-sys-typescale-body-small-size: 12px;
|
|
263
|
+
/* Body Small font weight */
|
|
264
|
+
--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
|
|
265
|
+
/* Body Small font name */
|
|
266
|
+
--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
|
|
267
|
+
/* Body Medium */
|
|
268
|
+
--md-sys-typescale-body-medium-text-transform: unset;
|
|
269
|
+
--md-sys-typescale-body-medium-axis-value: unset;
|
|
270
|
+
--md-sys-typescale-body-medium-font-style: unset;
|
|
271
|
+
--md-sys-typescale-body-medium-text-decoration: unset;
|
|
272
|
+
/* Body Medium line height */
|
|
273
|
+
--md-sys-typescale-body-medium-line-height-value: 20px;
|
|
274
|
+
--md-sys-typescale-body-medium-line-height-unit: 2px;
|
|
275
|
+
--md-sys-typescale-body-medium-line-height: 20px;
|
|
276
|
+
/* Body Medium font tracking */
|
|
277
|
+
--md-sys-typescale-body-medium-tracking-value: 0.25px;
|
|
278
|
+
--md-sys-typescale-body-medium-tracking-unit: 2px;
|
|
279
|
+
--md-sys-typescale-body-medium-tracking: 0.25px;
|
|
280
|
+
/* Body Medium font size */
|
|
281
|
+
--md-sys-typescale-body-medium-size-value: 14px;
|
|
282
|
+
--md-sys-typescale-body-medium-size-unit: 2px;
|
|
283
|
+
--md-sys-typescale-body-medium-size: 14px;
|
|
284
|
+
/* Body Medium font weight */
|
|
285
|
+
--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
|
|
286
|
+
/* Body Medium font name */
|
|
287
|
+
--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
|
|
288
|
+
/* Body Large */
|
|
289
|
+
--md-sys-typescale-body-large-text-transform: unset;
|
|
290
|
+
--md-sys-typescale-body-large-axis-value: unset;
|
|
291
|
+
--md-sys-typescale-body-large-font-style: unset;
|
|
292
|
+
--md-sys-typescale-body-large-text-decoration: unset;
|
|
293
|
+
/* Body Large line height */
|
|
294
|
+
--md-sys-typescale-body-large-line-height-value: 24px;
|
|
295
|
+
--md-sys-typescale-body-large-line-height-unit: 2px;
|
|
296
|
+
--md-sys-typescale-body-large-line-height: 24px;
|
|
297
|
+
/* Body Large font tracking */
|
|
298
|
+
--md-sys-typescale-body-large-tracking-value: 0.5px;
|
|
299
|
+
--md-sys-typescale-body-large-tracking-unit: 2px;
|
|
300
|
+
--md-sys-typescale-body-large-tracking: 0.5px;
|
|
301
|
+
/* Body Large font size */
|
|
302
|
+
--md-sys-typescale-body-large-size-value: 16px;
|
|
303
|
+
--md-sys-typescale-body-large-size-unit: 2px;
|
|
304
|
+
--md-sys-typescale-body-large-size: 16px;
|
|
305
|
+
/* Body Large font weight */
|
|
306
|
+
--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
|
|
307
|
+
/* Body Large font name */
|
|
308
|
+
--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
|
|
309
|
+
/* Title Small */
|
|
310
|
+
--md-sys-typescale-title-small-text-transform: unset;
|
|
311
|
+
--md-sys-typescale-title-small-axis-value: unset;
|
|
312
|
+
--md-sys-typescale-title-small-font-style: unset;
|
|
313
|
+
--md-sys-typescale-title-small-text-decoration: unset;
|
|
314
|
+
/* Title Small line height */
|
|
315
|
+
--md-sys-typescale-title-small-line-height-value: 20px;
|
|
316
|
+
--md-sys-typescale-title-small-line-height-unit: 2px;
|
|
317
|
+
--md-sys-typescale-title-small-line-height: 20px;
|
|
318
|
+
/* Title Small font tracking */
|
|
319
|
+
--md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
|
|
320
|
+
--md-sys-typescale-title-small-tracking-unit: 2px;
|
|
321
|
+
--md-sys-typescale-title-small-tracking: 0.10000000149011612px;
|
|
322
|
+
/* Title Small font size */
|
|
323
|
+
--md-sys-typescale-title-small-size-value: 14px;
|
|
324
|
+
--md-sys-typescale-title-small-size-unit: 2px;
|
|
325
|
+
--md-sys-typescale-title-small-size: 14px;
|
|
326
|
+
/* Title Small font weight */
|
|
327
|
+
--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
|
|
328
|
+
/* Title Small font name */
|
|
329
|
+
--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
|
|
330
|
+
/* Title Medium */
|
|
331
|
+
--md-sys-typescale-title-medium-text-transform: unset;
|
|
332
|
+
--md-sys-typescale-title-medium-axis-value: unset;
|
|
333
|
+
--md-sys-typescale-title-medium-font-style: unset;
|
|
334
|
+
--md-sys-typescale-title-medium-text-decoration: unset;
|
|
335
|
+
/* Title Medium line height */
|
|
336
|
+
--md-sys-typescale-title-medium-line-height-value: 24px;
|
|
337
|
+
--md-sys-typescale-title-medium-line-height-unit: 2px;
|
|
338
|
+
--md-sys-typescale-title-medium-line-height: 24px;
|
|
339
|
+
/* Title Medium font tracking */
|
|
340
|
+
--md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
|
|
341
|
+
--md-sys-typescale-title-medium-tracking-unit: 2px;
|
|
342
|
+
--md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
|
|
343
|
+
/* Title Medium font size */
|
|
344
|
+
--md-sys-typescale-title-medium-size-value: 16px;
|
|
345
|
+
--md-sys-typescale-title-medium-size-unit: 2px;
|
|
346
|
+
--md-sys-typescale-title-medium-size: 16px;
|
|
347
|
+
/* Title Medium font weight */
|
|
348
|
+
--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
|
|
349
|
+
/* Title Medium font name */
|
|
350
|
+
--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
|
|
351
|
+
/* Title Large */
|
|
352
|
+
--md-sys-typescale-title-large-text-transform: unset;
|
|
353
|
+
--md-sys-typescale-title-large-axis-value: unset;
|
|
354
|
+
--md-sys-typescale-title-large-font-style: unset;
|
|
355
|
+
--md-sys-typescale-title-large-text-decoration: unset;
|
|
356
|
+
/* Title Large line height */
|
|
357
|
+
--md-sys-typescale-title-large-line-height-value: 28px;
|
|
358
|
+
--md-sys-typescale-title-large-line-height-unit: 2px;
|
|
359
|
+
--md-sys-typescale-title-large-line-height: 28px;
|
|
360
|
+
/* Title Large font tracking */
|
|
361
|
+
--md-sys-typescale-title-large-tracking-value: 0px;
|
|
362
|
+
--md-sys-typescale-title-large-tracking-unit: 2px;
|
|
363
|
+
--md-sys-typescale-title-large-tracking: 0px;
|
|
364
|
+
/* Title Large font size */
|
|
365
|
+
--md-sys-typescale-title-large-size-value: 22px;
|
|
366
|
+
--md-sys-typescale-title-large-size-unit: 2px;
|
|
367
|
+
--md-sys-typescale-title-large-size: 22px;
|
|
368
|
+
/* Title Large font weight */
|
|
369
|
+
--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
|
|
370
|
+
/* Title Large font name */
|
|
371
|
+
--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
|
|
372
|
+
/* Headline Small */
|
|
373
|
+
--md-sys-typescale-headline-small-text-transform: unset;
|
|
374
|
+
--md-sys-typescale-headline-small-axis-value: unset;
|
|
375
|
+
--md-sys-typescale-headline-small-font-style: unset;
|
|
376
|
+
--md-sys-typescale-headline-small-text-decoration: unset;
|
|
377
|
+
/* Headline Small line height */
|
|
378
|
+
--md-sys-typescale-headline-small-line-height-value: 32px;
|
|
379
|
+
--md-sys-typescale-headline-small-line-height-unit: 2px;
|
|
380
|
+
--md-sys-typescale-headline-small-line-height: 32px;
|
|
381
|
+
/* Headline Small font tracking */
|
|
382
|
+
--md-sys-typescale-headline-small-tracking-value: 0px;
|
|
383
|
+
--md-sys-typescale-headline-small-tracking-unit: 2px;
|
|
384
|
+
--md-sys-typescale-headline-small-tracking: 0px;
|
|
385
|
+
/* Headline Small font size */
|
|
386
|
+
--md-sys-typescale-headline-small-size-value: 24px;
|
|
387
|
+
--md-sys-typescale-headline-small-size-unit: 2px;
|
|
388
|
+
--md-sys-typescale-headline-small-size: 24px;
|
|
389
|
+
/* Headline Small font weight */
|
|
390
|
+
--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
|
|
391
|
+
/* Headline Small font name */
|
|
392
|
+
--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
|
|
393
|
+
/* Headline Medium */
|
|
394
|
+
--md-sys-typescale-headline-medium-text-transform: unset;
|
|
395
|
+
--md-sys-typescale-headline-medium-axis-value: unset;
|
|
396
|
+
--md-sys-typescale-headline-medium-font-style: unset;
|
|
397
|
+
--md-sys-typescale-headline-medium-text-decoration: unset;
|
|
398
|
+
/* Headline Medium line height */
|
|
399
|
+
--md-sys-typescale-headline-medium-line-height-value: 36px;
|
|
400
|
+
--md-sys-typescale-headline-medium-line-height-unit: 2px;
|
|
401
|
+
--md-sys-typescale-headline-medium-line-height: 36px;
|
|
402
|
+
/* Headline Medium font tracking */
|
|
403
|
+
--md-sys-typescale-headline-medium-tracking-value: 0px;
|
|
404
|
+
--md-sys-typescale-headline-medium-tracking-unit: 2px;
|
|
405
|
+
--md-sys-typescale-headline-medium-tracking: 0px;
|
|
406
|
+
/* Headline Medium font size */
|
|
407
|
+
--md-sys-typescale-headline-medium-size-value: 28px;
|
|
408
|
+
--md-sys-typescale-headline-medium-size-unit: 2px;
|
|
409
|
+
--md-sys-typescale-headline-medium-size: 28px;
|
|
410
|
+
/* Headline Medium font weight */
|
|
411
|
+
--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
|
|
412
|
+
/* Headline Medium font name */
|
|
413
|
+
--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
|
|
414
|
+
/* Headline Large */
|
|
415
|
+
--md-sys-typescale-headline-large-text-transform: unset;
|
|
416
|
+
--md-sys-typescale-headline-large-axis-value: unset;
|
|
417
|
+
--md-sys-typescale-headline-large-font-style: unset;
|
|
418
|
+
--md-sys-typescale-headline-large-text-decoration: unset;
|
|
419
|
+
/* Headline Large line height */
|
|
420
|
+
--md-sys-typescale-headline-large-line-height-value: 40px;
|
|
421
|
+
--md-sys-typescale-headline-large-line-height-unit: 2px;
|
|
422
|
+
--md-sys-typescale-headline-large-line-height: 40px;
|
|
423
|
+
/* Headline Large font tracking */
|
|
424
|
+
--md-sys-typescale-headline-large-tracking-value: 0px;
|
|
425
|
+
--md-sys-typescale-headline-large-tracking-unit: 2px;
|
|
426
|
+
--md-sys-typescale-headline-large-tracking: 0px;
|
|
427
|
+
/* Headline Large font size */
|
|
428
|
+
--md-sys-typescale-headline-large-size-value: 32px;
|
|
429
|
+
--md-sys-typescale-headline-large-size-unit: 2px;
|
|
430
|
+
--md-sys-typescale-headline-large-size: 32px;
|
|
431
|
+
/* Headline Large font name */
|
|
432
|
+
--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
|
|
433
|
+
/* Headline Large font weight */
|
|
434
|
+
--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
|
|
435
|
+
/* Display Small */
|
|
436
|
+
--md-sys-typescale-display-small-text-transform: unset;
|
|
437
|
+
--md-sys-typescale-display-small-axis-value: unset;
|
|
438
|
+
--md-sys-typescale-display-small-font-style: unset;
|
|
439
|
+
--md-sys-typescale-display-small-text-decoration: unset;
|
|
440
|
+
/* Display Small line height */
|
|
441
|
+
--md-sys-typescale-display-small-line-height-value: 44px;
|
|
442
|
+
--md-sys-typescale-display-small-line-height-unit: 2px;
|
|
443
|
+
--md-sys-typescale-display-small-line-height: 44px;
|
|
444
|
+
/* Display Small font tracking */
|
|
445
|
+
--md-sys-typescale-display-small-tracking-value: 0px;
|
|
446
|
+
--md-sys-typescale-display-small-tracking-unit: 2px;
|
|
447
|
+
--md-sys-typescale-display-small-tracking: 0px;
|
|
448
|
+
/* Display Small font size */
|
|
449
|
+
--md-sys-typescale-display-small-size-value: 36px;
|
|
450
|
+
--md-sys-typescale-display-small-size-unit: 2px;
|
|
451
|
+
--md-sys-typescale-display-small-size: 36px;
|
|
452
|
+
/* Display Small font weight */
|
|
453
|
+
--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
|
|
454
|
+
/* Display Small font name */
|
|
455
|
+
--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
|
|
456
|
+
/* Display Medium */
|
|
457
|
+
--md-sys-typescale-display-medium-text-transform: unset;
|
|
458
|
+
--md-sys-typescale-display-medium-axis-value: unset;
|
|
459
|
+
--md-sys-typescale-display-medium-font-style: unset;
|
|
460
|
+
--md-sys-typescale-display-medium-text-decoration: unset;
|
|
461
|
+
/* Display Medium line height */
|
|
462
|
+
--md-sys-typescale-display-medium-line-height-value: 52px;
|
|
463
|
+
--md-sys-typescale-display-medium-line-height-unit: 2px;
|
|
464
|
+
--md-sys-typescale-display-medium-line-height: 52px;
|
|
465
|
+
/* Display Medium font tracking */
|
|
466
|
+
--md-sys-typescale-display-medium-tracking-value: 0px;
|
|
467
|
+
--md-sys-typescale-display-medium-tracking-unit: 2px;
|
|
468
|
+
--md-sys-typescale-display-medium-tracking: 0px;
|
|
469
|
+
/* Display Medium font size */
|
|
470
|
+
--md-sys-typescale-display-medium-size-value: 45px;
|
|
471
|
+
--md-sys-typescale-display-medium-size-unit: 2px;
|
|
472
|
+
--md-sys-typescale-display-medium-size: 45px;
|
|
473
|
+
/* Display Medium font weight */
|
|
474
|
+
--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
|
|
475
|
+
/* Display Medium font name */
|
|
476
|
+
--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
|
|
477
|
+
/* Display Large */
|
|
478
|
+
--md-sys-typescale-display-large-text-transform: unset;
|
|
479
|
+
--md-sys-typescale-display-large-axis-value: unset;
|
|
480
|
+
--md-sys-typescale-display-large-font-style: unset;
|
|
481
|
+
--md-sys-typescale-display-large-text-decoration: unset;
|
|
482
|
+
/* Display Large line height */
|
|
483
|
+
--md-sys-typescale-display-large-line-height-value: 64px;
|
|
484
|
+
--md-sys-typescale-display-large-line-height-unit: 2px;
|
|
485
|
+
--md-sys-typescale-display-large-line-height: 64px;
|
|
486
|
+
/* Display Large font tracking */
|
|
487
|
+
--md-sys-typescale-display-large-tracking-value: -0.25px;
|
|
488
|
+
--md-sys-typescale-display-large-tracking-unit: 2px;
|
|
489
|
+
--md-sys-typescale-display-large-tracking: -0.25px;
|
|
490
|
+
/* Display Large font size */
|
|
491
|
+
--md-sys-typescale-display-large-size-value: 57px;
|
|
492
|
+
--md-sys-typescale-display-large-size-unit: 2px;
|
|
493
|
+
--md-sys-typescale-display-large-size: 57px;
|
|
494
|
+
/* Display Large font weight */
|
|
495
|
+
--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
|
|
496
|
+
/* Display Large font name */
|
|
497
|
+
--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
|
|
498
|
+
/* Plain typeface */
|
|
499
|
+
--md-ref-typeface-plain: Roboto;
|
|
500
|
+
/* Brand typeface */
|
|
501
|
+
--md-ref-typeface-brand: Roboto;
|
|
502
|
+
/* Bold weight */
|
|
503
|
+
--md-ref-typeface-weight-bold: 700;
|
|
504
|
+
/* Medium weight */
|
|
505
|
+
--md-ref-typeface-weight-medium: 500;
|
|
506
|
+
/* Regular weight */
|
|
507
|
+
--md-ref-typeface-weight-regular: 400;
|
|
38
508
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
509
|
+
/* Shape tokens */
|
|
510
|
+
/* Fully rounded */
|
|
511
|
+
--md-sys-shape-corner-full-family: 3px;
|
|
512
|
+
/* Extra large top rounding */
|
|
513
|
+
--md-sys-shape-corner-extra-large-top-family: 1px;
|
|
514
|
+
--md-sys-shape-corner-extra-large-top-default-size: 0px;
|
|
515
|
+
--md-sys-shape-corner-extra-large-top-top-left: 28px;
|
|
516
|
+
--md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
|
|
517
|
+
--md-sys-shape-corner-extra-large-top-top-right: 28px;
|
|
518
|
+
/* Extra large rounding */
|
|
519
|
+
--md-sys-shape-corner-extra-large-family: 1px;
|
|
520
|
+
--md-sys-shape-corner-extra-large-default-size-unit: 1px;
|
|
521
|
+
--md-sys-shape-corner-extra-large-default-size: 28px;
|
|
522
|
+
/* Large top rounding */
|
|
523
|
+
--md-sys-shape-corner-large-top-family: 1px;
|
|
524
|
+
--md-sys-shape-corner-large-top-default-size-unit: 1px;
|
|
525
|
+
--md-sys-shape-corner-large-top-default-size: 0px;
|
|
526
|
+
--md-sys-shape-corner-large-top-top-left-unit: 1px;
|
|
527
|
+
--md-sys-shape-corner-large-top-top-left: 16px;
|
|
528
|
+
--md-sys-shape-corner-large-top-top-right-unit: 1px;
|
|
529
|
+
--md-sys-shape-corner-large-top-top-right: 16px;
|
|
530
|
+
/* Large end rounding */
|
|
531
|
+
--md-sys-shape-corner-large-end-family: 1px;
|
|
532
|
+
--md-sys-shape-corner-large-end-default-size-unit: 1px;
|
|
533
|
+
--md-sys-shape-corner-large-end-default-size: 0px;
|
|
534
|
+
--md-sys-shape-corner-large-end-top-right-unit: 1px;
|
|
535
|
+
--md-sys-shape-corner-large-end-top-right: 16px;
|
|
536
|
+
--md-sys-shape-corner-large-end-bottom-right-unit: 1px;
|
|
537
|
+
--md-sys-shape-corner-large-end-bottom-right: 16px;
|
|
538
|
+
/* Large rounding */
|
|
539
|
+
--md-sys-shape-corner-large-family: 1px;
|
|
540
|
+
--md-sys-shape-corner-large-default-size-unit: 1px;
|
|
541
|
+
--md-sys-shape-corner-large-default-size: 16px;
|
|
542
|
+
/* Medium rounding */
|
|
543
|
+
--md-sys-shape-corner-medium-family: 1px;
|
|
544
|
+
--md-sys-shape-corner-medium-default-size-unit: 1px;
|
|
545
|
+
--md-sys-shape-corner-medium-default-size: 12px;
|
|
546
|
+
/* Small rounding */
|
|
547
|
+
--md-sys-shape-corner-small-family: 1px;
|
|
548
|
+
--md-sys-shape-corner-small-default-size-unit: 1px;
|
|
549
|
+
--md-sys-shape-corner-small-default-size: 8px;
|
|
550
|
+
/* Extra small top rounding */
|
|
551
|
+
--md-sys-shape-corner-extra-small-top-family: 1px;
|
|
552
|
+
--md-sys-shape-corner-extra-small-top-default-size-unit: 1px;
|
|
553
|
+
--md-sys-shape-corner-extra-small-top-default-size: 0px;
|
|
554
|
+
--md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
|
|
555
|
+
--md-sys-shape-corner-extra-small-top-top-left: 4px;
|
|
556
|
+
--md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
|
|
557
|
+
--md-sys-shape-corner-extra-small-top-top-right: 4px;
|
|
558
|
+
/* Extra small rounding */
|
|
559
|
+
--md-sys-shape-corner-extra-small-family: 1px;
|
|
560
|
+
--md-sys-shape-corner-extra-small-default-size-unit: 1px;
|
|
561
|
+
--md-sys-shape-corner-extra-small-default-size: 4px;
|
|
562
|
+
/* No rounding */
|
|
563
|
+
--md-sys-shape-corner-none-family: 1px;
|
|
564
|
+
--md-sys-shape-corner-none-default-size-unit: 1px;
|
|
565
|
+
--md-sys-shape-corner-none-default-size: 0px;
|
|
566
|
+
--md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);
|
|
567
|
+
--md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);
|
|
568
|
+
--md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);
|
|
569
|
+
--md-sys-shape-corner-none: var(--md-sys-shape-corner-none-default-size);
|
|
570
|
+
--md-sys-shape-corner-extra-small: var(--md-sys-shape-corner-extra-small-default-size);
|
|
571
|
+
--md-sys-shape-corner-small: var(--md-sys-shape-corner-small-default-size);
|
|
572
|
+
--md-sys-shape-corner-medium: var(--md-sys-shape-corner-medium-default-size);
|
|
573
|
+
--md-sys-shape-corner-large: var(--md-sys-shape-corner-large-default-size);
|
|
574
|
+
--md-sys-shape-corner-extra-large: var(--md-sys-shape-corner-extra-large-default-size);
|
|
575
|
+
--md-sys-shape-corner-full: 999px;
|
|
45
576
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
577
|
+
/* Motion tokens */
|
|
578
|
+
/* Emphasized decelerate easing (out) */
|
|
579
|
+
--md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
|
|
580
|
+
--md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
|
|
581
|
+
--md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
|
|
582
|
+
--md-sys-motion-easing-emphasized-decelerate-y1: 1;
|
|
583
|
+
/* Emphasized accelerate easing (in) */
|
|
584
|
+
--md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
|
|
585
|
+
--md-sys-motion-easing-emphasized-accelerate-y0: 0;
|
|
586
|
+
--md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
|
|
587
|
+
--md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
|
|
588
|
+
/* Standard decelerate easing (out) */
|
|
589
|
+
--md-sys-motion-easing-standard-decelerate-x0: 0;
|
|
590
|
+
--md-sys-motion-easing-standard-decelerate-y0: 0;
|
|
591
|
+
--md-sys-motion-easing-standard-decelerate-x1: 0;
|
|
592
|
+
--md-sys-motion-easing-standard-decelerate-y1: 1;
|
|
593
|
+
/* Standard accelerate easing (in) */
|
|
594
|
+
--md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
|
|
595
|
+
--md-sys-motion-easing-standard-accelerate-y0: 0;
|
|
596
|
+
--md-sys-motion-easing-standard-accelerate-x1: 1;
|
|
597
|
+
--md-sys-motion-easing-standard-accelerate-y1: 1;
|
|
598
|
+
/* Duration 1000ms */
|
|
599
|
+
--md-sys-motion-duration-1000: 1000ms;
|
|
600
|
+
/* Duration 900ms */
|
|
601
|
+
--md-sys-motion-duration-900: 900ms;
|
|
602
|
+
/* Duration 800ms */
|
|
603
|
+
--md-sys-motion-duration-800: 800ms;
|
|
604
|
+
/* Duration 700ms */
|
|
605
|
+
--md-sys-motion-duration-700: 700ms;
|
|
606
|
+
/* Duration 600ms */
|
|
607
|
+
--md-sys-motion-duration-600: 600ms;
|
|
608
|
+
/* Duration 550ms */
|
|
609
|
+
--md-sys-motion-duration-550: 550ms;
|
|
610
|
+
/* Duration 500ms */
|
|
611
|
+
--md-sys-motion-duration-500: 500ms;
|
|
612
|
+
/* Duration 450ms */
|
|
613
|
+
--md-sys-motion-duration-450: 450ms;
|
|
614
|
+
/* Duration 400ms */
|
|
615
|
+
--md-sys-motion-duration-400: 400ms;
|
|
616
|
+
/* Duration 350ms */
|
|
617
|
+
--md-sys-motion-duration-350: 350ms;
|
|
618
|
+
/* Duration 300ms */
|
|
619
|
+
--md-sys-motion-duration-300: 300ms;
|
|
620
|
+
/* Duration 250ms */
|
|
621
|
+
--md-sys-motion-duration-250: 250ms;
|
|
622
|
+
/* Duration 200ms */
|
|
623
|
+
--md-sys-motion-duration-200: 200ms;
|
|
624
|
+
/* Duration 150ms */
|
|
625
|
+
--md-sys-motion-duration-150: 150ms;
|
|
626
|
+
/* Duration 100ms */
|
|
627
|
+
--md-sys-motion-duration-100: 100ms;
|
|
628
|
+
/* Duration 50ms */
|
|
629
|
+
--md-sys-motion-duration-50: 50ms;
|
|
630
|
+
/* Standard easing (in and out) */
|
|
631
|
+
--md-sys-motion-easing-standard-x0: 0.20000000298023224;
|
|
632
|
+
--md-sys-motion-easing-standard-y0: 0;
|
|
633
|
+
--md-sys-motion-easing-standard-x1: 0;
|
|
634
|
+
--md-sys-motion-easing-standard-y1: 1;
|
|
635
|
+
/* Linear easing */
|
|
636
|
+
--md-sys-motion-easing-linear-x0: 0;
|
|
637
|
+
--md-sys-motion-easing-linear-y0: 0;
|
|
638
|
+
--md-sys-motion-easing-linear-x1: 1;
|
|
639
|
+
--md-sys-motion-easing-linear-y1: 1;
|
|
640
|
+
/* Emphasized */
|
|
641
|
+
--md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
|
|
642
|
+
--md-sys-motion-easing-emphasized-y0: 0;
|
|
643
|
+
--md-sys-motion-easing-emphasized-x1: 0;
|
|
644
|
+
--md-sys-motion-easing-emphasized-y1: 1;
|
|
645
|
+
/* Motion path */
|
|
646
|
+
--md-sys-motion-path-standard-path: 1;
|
|
59
647
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);
|
|
70
|
-
--md-sys-state-pressed-state-layer-opacity: 0.12;
|
|
71
|
-
--md-sys-state-hover-state-layer-opacity: 0.08;
|
|
72
|
-
--md-sys-state-focus-state-layer-opacity: 0.1;
|
|
73
|
-
--md-sys-state-disabled-state-layer-opacity: 0.38;
|
|
74
|
-
}
|
|
648
|
+
/* State tokens */
|
|
649
|
+
/* Dragged state layer opacity */
|
|
650
|
+
--md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
|
|
651
|
+
/* Pressed state layer opacity */
|
|
652
|
+
--md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
|
|
653
|
+
/* Focus state layer opacity */
|
|
654
|
+
--md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
|
|
655
|
+
/* Hover state layer opacity */
|
|
656
|
+
--md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
|
|
75
657
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--md-sys-
|
|
81
|
-
--md-sys-
|
|
82
|
-
--md-sys-
|
|
83
|
-
|
|
84
|
-
--md-sys-
|
|
85
|
-
--md-sys-
|
|
86
|
-
--md-sys-
|
|
87
|
-
|
|
88
|
-
--md-sys-
|
|
89
|
-
--md-sys-
|
|
90
|
-
--md-sys-
|
|
91
|
-
|
|
92
|
-
--md-sys-
|
|
93
|
-
--md-sys-
|
|
94
|
-
--md-sys-
|
|
95
|
-
|
|
96
|
-
--md-sys-elevation-level1:
|
|
97
|
-
--md-sys-elevation-
|
|
98
|
-
--md-sys-elevation-
|
|
658
|
+
/* Elevation tokens */
|
|
659
|
+
/* Surface tint color */
|
|
660
|
+
--md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
|
|
661
|
+
/* +5 */
|
|
662
|
+
--md-sys-elevation-level5-value: 12px;
|
|
663
|
+
--md-sys-elevation-level5-unit: 1px;
|
|
664
|
+
--md-sys-elevation-level5: 12px;
|
|
665
|
+
/* +4 */
|
|
666
|
+
--md-sys-elevation-level4-value: 8px;
|
|
667
|
+
--md-sys-elevation-level4-unit: 1px;
|
|
668
|
+
--md-sys-elevation-level4: 8px;
|
|
669
|
+
/* +3 */
|
|
670
|
+
--md-sys-elevation-level3-value: 6px;
|
|
671
|
+
--md-sys-elevation-level3-unit: 1px;
|
|
672
|
+
--md-sys-elevation-level3: 6px;
|
|
673
|
+
/* +2 */
|
|
674
|
+
--md-sys-elevation-level2-value: 3px;
|
|
675
|
+
--md-sys-elevation-level2-unit: 1px;
|
|
676
|
+
--md-sys-elevation-level2: 3px;
|
|
677
|
+
/* +1 */
|
|
678
|
+
--md-sys-elevation-level1-value: 1px;
|
|
679
|
+
--md-sys-elevation-level1-unit: 1px;
|
|
680
|
+
--md-sys-elevation-level1: 1px;
|
|
681
|
+
/* 0 */
|
|
682
|
+
--md-sys-elevation-level0-value: 0px;
|
|
683
|
+
--md-sys-elevation-level0-unit: 1px;
|
|
684
|
+
--md-sys-elevation-level0: 0px;
|
|
685
|
+
|
|
686
|
+
/* Light and dark system color tokens */
|
|
687
|
+
/* Surface tint */
|
|
688
|
+
--md-sys-color-surface-tint: var(--md-sys-color-primary);
|
|
689
|
+
/* Surface tint color */
|
|
690
|
+
--md-sys-color-surface-tint-color: var(--md-sys-color-primary);
|
|
691
|
+
/* On error container */
|
|
692
|
+
--md-sys-color-on-error-container: light-dark(
|
|
693
|
+
var(--md-ref-palette-error10),
|
|
694
|
+
var(--md-ref-palette-error80)
|
|
695
|
+
);
|
|
696
|
+
/* On error */
|
|
697
|
+
--md-sys-color-on-error: light-dark(
|
|
698
|
+
var(--md-ref-palette-error100),
|
|
699
|
+
var(--md-ref-palette-error20)
|
|
700
|
+
);
|
|
701
|
+
/* Error container */
|
|
702
|
+
--md-sys-color-error-container: light-dark(
|
|
703
|
+
var(--md-ref-palette-error90),
|
|
704
|
+
var(--md-ref-palette-error30)
|
|
705
|
+
);
|
|
706
|
+
/* On tertiary container */
|
|
707
|
+
--md-sys-color-on-tertiary-container: light-dark(
|
|
708
|
+
var(--md-ref-palette-tertiary10),
|
|
709
|
+
var(--md-ref-palette-tertiary90)
|
|
710
|
+
);
|
|
711
|
+
/* On tertiary */
|
|
712
|
+
--md-sys-color-on-tertiary: light-dark(
|
|
713
|
+
var(--md-ref-palette-tertiary100),
|
|
714
|
+
var(--md-ref-palette-tertiary20)
|
|
715
|
+
);
|
|
716
|
+
/* Tertiary container */
|
|
717
|
+
--md-sys-color-tertiary-container: light-dark(
|
|
718
|
+
var(--md-ref-palette-tertiary90),
|
|
719
|
+
var(--md-ref-palette-tertiary30)
|
|
720
|
+
);
|
|
721
|
+
/* Tertiary */
|
|
722
|
+
--md-sys-color-tertiary: light-dark(
|
|
723
|
+
var(--md-ref-palette-tertiary40),
|
|
724
|
+
var(--md-ref-palette-tertiary80)
|
|
725
|
+
);
|
|
726
|
+
/* Shadow */
|
|
727
|
+
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
|
|
728
|
+
/* Error */
|
|
729
|
+
--md-sys-color-error: light-dark(var(--md-ref-palette-error40), var(--md-ref-palette-error80));
|
|
730
|
+
/* Outline */
|
|
731
|
+
--md-sys-color-outline: light-dark(
|
|
732
|
+
var(--md-ref-palette-neutral-variant50),
|
|
733
|
+
var(--md-ref-palette-neutral-variant60)
|
|
734
|
+
);
|
|
735
|
+
/* On background */
|
|
736
|
+
--md-sys-color-on-background: light-dark(
|
|
737
|
+
var(--md-ref-palette-neutral10),
|
|
738
|
+
var(--md-ref-palette-neutral90)
|
|
739
|
+
);
|
|
740
|
+
/* Background */
|
|
741
|
+
--md-sys-color-background: light-dark(
|
|
742
|
+
var(--md-ref-palette-neutral99),
|
|
743
|
+
var(--md-ref-palette-neutral10)
|
|
744
|
+
);
|
|
745
|
+
/* Inverse on surface */
|
|
746
|
+
--md-sys-color-inverse-on-surface: light-dark(
|
|
747
|
+
var(--md-ref-palette-neutral95),
|
|
748
|
+
var(--md-ref-palette-neutral20)
|
|
749
|
+
);
|
|
750
|
+
/* Inverse surface */
|
|
751
|
+
--md-sys-color-inverse-surface: light-dark(
|
|
752
|
+
var(--md-ref-palette-neutral20),
|
|
753
|
+
var(--md-ref-palette-neutral90)
|
|
754
|
+
);
|
|
755
|
+
/* On surface variant */
|
|
756
|
+
--md-sys-color-on-surface-variant: light-dark(
|
|
757
|
+
var(--md-ref-palette-neutral-variant30),
|
|
758
|
+
var(--md-ref-palette-neutral-variant80)
|
|
759
|
+
);
|
|
760
|
+
/* On surface */
|
|
761
|
+
--md-sys-color-on-surface: light-dark(
|
|
762
|
+
var(--md-ref-palette-neutral10),
|
|
763
|
+
var(--md-ref-palette-neutral90)
|
|
764
|
+
);
|
|
765
|
+
/* Surface Variant */
|
|
766
|
+
--md-sys-color-surface-variant: light-dark(
|
|
767
|
+
var(--md-ref-palette-neutral-variant90),
|
|
768
|
+
var(--md-ref-palette-neutral-variant30)
|
|
769
|
+
);
|
|
770
|
+
/* Surface */
|
|
771
|
+
--md-sys-color-surface: light-dark(
|
|
772
|
+
var(--md-ref-palette-neutral99),
|
|
773
|
+
var(--md-ref-palette-neutral10)
|
|
774
|
+
);
|
|
775
|
+
/* Surface container lowest (near-white / near-black) */
|
|
776
|
+
--md-sys-color-surface-container-lowest: light-dark(
|
|
777
|
+
var(--md-ref-palette-neutral100),
|
|
778
|
+
var(--md-ref-palette-neutral10)
|
|
779
|
+
);
|
|
780
|
+
/* Surface container low */
|
|
781
|
+
--md-sys-color-surface-container-low: light-dark(
|
|
782
|
+
var(--md-ref-palette-neutral99),
|
|
783
|
+
var(--md-ref-palette-neutral10)
|
|
784
|
+
);
|
|
785
|
+
/* Surface container — used for menus, sheets, and elevated surfaces */
|
|
786
|
+
--md-sys-color-surface-container: light-dark(
|
|
787
|
+
var(--md-ref-palette-neutral95),
|
|
788
|
+
var(--md-ref-palette-neutral20)
|
|
789
|
+
);
|
|
790
|
+
/* Surface container high */
|
|
791
|
+
--md-sys-color-surface-container-high: light-dark(
|
|
792
|
+
var(--md-ref-palette-neutral90),
|
|
793
|
+
var(--md-ref-palette-neutral20)
|
|
794
|
+
);
|
|
795
|
+
/* Surface container highest — used for text fields and chips */
|
|
796
|
+
--md-sys-color-surface-container-highest: light-dark(
|
|
797
|
+
var(--md-ref-palette-neutral90),
|
|
798
|
+
var(--md-ref-palette-neutral20)
|
|
799
|
+
);
|
|
800
|
+
/* On secondary container */
|
|
801
|
+
--md-sys-color-on-secondary-container: light-dark(
|
|
802
|
+
var(--md-ref-palette-secondary10),
|
|
803
|
+
var(--md-ref-palette-secondary90)
|
|
804
|
+
);
|
|
805
|
+
/* On secondary */
|
|
806
|
+
--md-sys-color-on-secondary: light-dark(
|
|
807
|
+
var(--md-ref-palette-secondary100),
|
|
808
|
+
var(--md-ref-palette-secondary20)
|
|
809
|
+
);
|
|
810
|
+
/* Secondary container */
|
|
811
|
+
--md-sys-color-secondary-container: light-dark(
|
|
812
|
+
var(--md-ref-palette-secondary90),
|
|
813
|
+
var(--md-ref-palette-secondary30)
|
|
814
|
+
);
|
|
815
|
+
/* Secondary */
|
|
816
|
+
--md-sys-color-secondary: light-dark(
|
|
817
|
+
var(--md-ref-palette-secondary40),
|
|
818
|
+
var(--md-ref-palette-secondary80)
|
|
819
|
+
);
|
|
820
|
+
/* Inverse primary */
|
|
821
|
+
--md-sys-color-inverse-primary: light-dark(
|
|
822
|
+
var(--md-ref-palette-primary80),
|
|
823
|
+
var(--md-ref-palette-primary40)
|
|
824
|
+
);
|
|
825
|
+
/* On primary container */
|
|
826
|
+
--md-sys-color-on-primary-container: light-dark(
|
|
827
|
+
var(--md-ref-palette-primary10),
|
|
828
|
+
var(--md-ref-palette-primary90)
|
|
829
|
+
);
|
|
830
|
+
/* On primary */
|
|
831
|
+
--md-sys-color-on-primary: light-dark(
|
|
832
|
+
var(--md-ref-palette-primary100),
|
|
833
|
+
var(--md-ref-palette-primary20)
|
|
834
|
+
);
|
|
835
|
+
/* Primary container */
|
|
836
|
+
--md-sys-color-primary-container: light-dark(
|
|
837
|
+
var(--md-ref-palette-primary90),
|
|
838
|
+
var(--md-ref-palette-primary30)
|
|
839
|
+
);
|
|
840
|
+
/* Primary */
|
|
841
|
+
--md-sys-color-primary: light-dark(
|
|
842
|
+
var(--md-ref-palette-primary40),
|
|
843
|
+
var(--md-ref-palette-primary80)
|
|
844
|
+
);
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
@media (forced-colors: active) {
|
|
848
|
+
.rc-theme-material,
|
|
849
|
+
:host(.rc-theme-material) {
|
|
850
|
+
--md-sys-color-primary: Highlight;
|
|
851
|
+
--md-sys-color-on-primary: HighlightText;
|
|
852
|
+
--md-sys-color-primary-container: Highlight;
|
|
853
|
+
--md-sys-color-on-primary-container: HighlightText;
|
|
854
|
+
--md-sys-color-secondary-container: ButtonFace;
|
|
855
|
+
--md-sys-color-on-secondary-container: ButtonText;
|
|
856
|
+
--md-sys-color-surface: Canvas;
|
|
857
|
+
--md-sys-color-surface-container-low: Canvas;
|
|
858
|
+
--md-sys-color-surface-container: Canvas;
|
|
859
|
+
--md-sys-color-surface-container-high: Canvas;
|
|
860
|
+
--md-sys-color-surface-container-highest: Field;
|
|
861
|
+
--md-sys-color-on-surface: CanvasText;
|
|
862
|
+
--md-sys-color-on-surface-variant: CanvasText;
|
|
863
|
+
--md-sys-color-inverse-surface: CanvasText;
|
|
864
|
+
--md-sys-color-inverse-on-surface: Canvas;
|
|
865
|
+
--md-sys-color-outline: ButtonBorder;
|
|
866
|
+
--md-sys-color-outline-variant: ButtonBorder;
|
|
867
|
+
--md-sys-elevation-level1: 0px;
|
|
868
|
+
--md-sys-elevation-level2: 0px;
|
|
869
|
+
--md-sys-elevation-level3: 0px;
|
|
870
|
+
}
|
|
99
871
|
}
|
|
100
|
-
}
|
|
101
872
|
}
|