@sandlada/material-design-css 1.0.0 → 1.0.1
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/color.css +222 -221
- package/motion.css +1 -1
- package/package.json +1 -1
package/color.css
CHANGED
|
@@ -1,702 +1,703 @@
|
|
|
1
1
|
@layer material-design-system.color.variable {
|
|
2
2
|
:root {
|
|
3
|
-
--md-sys-color-primary-palette-key-color
|
|
4
|
-
--md-sys-color-secondary-palette-key-color
|
|
5
|
-
--md-sys-color-tertiary-palette-key-color
|
|
6
|
-
--md-sys-color-neutral-palette-key-color
|
|
7
|
-
--md-sys-color-neutral-variant-palette-key-color
|
|
8
|
-
--md-sys-color-background
|
|
9
|
-
--md-sys-color-on-background
|
|
10
|
-
--md-sys-color-surface
|
|
11
|
-
--md-sys-color-surface-dim
|
|
12
|
-
--md-sys-color-surface-bright
|
|
13
|
-
--md-sys-color-surface-container-lowest
|
|
14
|
-
--md-sys-color-surface-container-low
|
|
15
|
-
--md-sys-color-surface-container
|
|
16
|
-
--md-sys-color-surface-container-high
|
|
17
|
-
--md-sys-color-surface-container-highest
|
|
18
|
-
--md-sys-color-on-surface
|
|
19
|
-
--md-sys-color-surface-variant
|
|
20
|
-
--md-sys-color-on-surface-variant
|
|
21
|
-
--md-sys-color-inverse-surface
|
|
22
|
-
--md-sys-color-inverse-on-surface
|
|
23
|
-
--md-sys-color-outline
|
|
24
|
-
--md-sys-color-outline-variant
|
|
25
|
-
--md-sys-color-shadow
|
|
26
|
-
--md-sys-color-scrim
|
|
27
|
-
--md-sys-color-surface-tint
|
|
28
|
-
--md-sys-color-primary
|
|
29
|
-
--md-sys-color-on-primary
|
|
30
|
-
--md-sys-color-primary-container
|
|
31
|
-
--md-sys-color-on-primary-container
|
|
32
|
-
--md-sys-color-inverse-primary
|
|
33
|
-
--md-sys-color-secondary
|
|
34
|
-
--md-sys-color-on-secondary
|
|
35
|
-
--md-sys-color-secondary-container
|
|
36
|
-
--md-sys-color-on-secondary-container
|
|
37
|
-
--md-sys-color-tertiary
|
|
38
|
-
--md-sys-color-on-tertiary
|
|
39
|
-
--md-sys-color-tertiary-container
|
|
40
|
-
--md-sys-color-on-tertiary-container
|
|
41
|
-
--md-sys-color-error
|
|
42
|
-
--md-sys-color-on-error
|
|
43
|
-
--md-sys-color-error-container
|
|
44
|
-
--md-sys-color-on-error-container
|
|
45
|
-
--md-sys-color-primary-fixed
|
|
46
|
-
--md-sys-color-primary-fixed-dim
|
|
47
|
-
--md-sys-color-on-primary-fixed
|
|
48
|
-
--md-sys-color-on-primary-fixed-variant
|
|
49
|
-
--md-sys-color-secondary-fixed
|
|
50
|
-
--md-sys-color-secondary-fixed-dim
|
|
51
|
-
--md-sys-color-on-secondary-fixed
|
|
52
|
-
--md-sys-color-on-secondary-fixed-variant
|
|
53
|
-
--md-sys-color-tertiary-fixed
|
|
54
|
-
--md-sys-color-tertiary-fixed-dim
|
|
55
|
-
--md-sys-color-on-tertiary-fixed
|
|
56
|
-
--md-sys-color-on-tertiary-fixed-variant
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
:root:not([dark]) {
|
|
60
|
-
color-scheme: light;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
:root[dark] {
|
|
64
|
-
color-scheme: dark;
|
|
3
|
+
--_primary-palette-key-color: var(--md-sys-color-primary-palette-key-color, light-dark(#388647, #388647));
|
|
4
|
+
--_secondary-palette-key-color: var(--md-sys-color-secondary-palette-key-color, light-dark(#697c68, #697c68));
|
|
5
|
+
--_tertiary-palette-key-color: var(--md-sys-color-tertiary-palette-key-color, light-dark(#527e86, #527e86));
|
|
6
|
+
--_neutral-palette-key-color: var(--md-sys-color-neutral-palette-key-color, light-dark(#777777, #777777));
|
|
7
|
+
--_neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#777777, #777777));
|
|
8
|
+
--_background: var(--md-sys-color-background, light-dark(#f9f9f9, #131313));
|
|
9
|
+
--_on-background: var(--md-sys-color-on-background, light-dark(#1b1b1b, #e2e2e2));
|
|
10
|
+
--_surface: var(--md-sys-color-surface, light-dark(#f9f9f9, #131313));
|
|
11
|
+
--_surface-dim: var(--md-sys-color-surface-dim, light-dark(#dadada, #131313));
|
|
12
|
+
--_surface-bright: var(--md-sys-color-surface-bright, light-dark(#f9f9f9, #393939));
|
|
13
|
+
--_surface-container-lowest: var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0e0e0e));
|
|
14
|
+
--_surface-container-low: var(--md-sys-color-surface-container-low, light-dark(#f3f3f3, #1b1b1b));
|
|
15
|
+
--_surface-container: var(--md-sys-color-surface-container, light-dark(#eeeeee, #1f1f1f));
|
|
16
|
+
--_surface-container-high: var(--md-sys-color-surface-container-high, light-dark(#e8e8e8, #2a2a2a));
|
|
17
|
+
--_surface-container-highest: var(--md-sys-color-surface-container-highest, light-dark(#e2e2e2, #353535));
|
|
18
|
+
--_on-surface: var(--md-sys-color-on-surface, light-dark(#1b1b1b, #e2e2e2));
|
|
19
|
+
--_surface-variant: var(--md-sys-color-surface-variant, light-dark(#e2e2e2, #474747));
|
|
20
|
+
--_on-surface-variant: var(--md-sys-color-on-surface-variant, light-dark(#474747, #c6c6c6));
|
|
21
|
+
--_inverse-surface: var(--md-sys-color-inverse-surface, light-dark(#303030, #e2e2e2));
|
|
22
|
+
--_inverse-on-surface: var(--md-sys-color-inverse-on-surface, light-dark(#f1f1f1, #303030));
|
|
23
|
+
--_outline: var(--md-sys-color-outline, light-dark(#777777, #919191));
|
|
24
|
+
--_outline-variant: var(--md-sys-color-outline-variant, light-dark(#c6c6c6, #474747));
|
|
25
|
+
--_shadow: var(--md-sys-color-shadow, light-dark(#000000, #000000));
|
|
26
|
+
--_scrim: var(--md-sys-color-scrim, light-dark(#000000, #000000));
|
|
27
|
+
--_surface-tint: var(--md-sys-color-surface-tint, light-dark(#1a6c31, #88d990));
|
|
28
|
+
--_primary: var(--md-sys-color-primary, light-dark(#1a6c31, #88d990));
|
|
29
|
+
--_on-primary: var(--md-sys-color-on-primary, light-dark(#ffffff, #003913));
|
|
30
|
+
--_primary-container: var(--md-sys-color-primary-container, light-dark(#a3f5aa, #00531f));
|
|
31
|
+
--_on-primary-container: var(--md-sys-color-on-primary-container, light-dark(#00531f, #a3f5aa));
|
|
32
|
+
--_inverse-primary: var(--md-sys-color-inverse-primary, light-dark(#88d990, #1a6c31));
|
|
33
|
+
--_secondary: var(--md-sys-color-secondary, light-dark(#516351, #b8ccb5));
|
|
34
|
+
--_on-secondary: var(--md-sys-color-on-secondary, light-dark(#ffffff, #243425));
|
|
35
|
+
--_secondary-container: var(--md-sys-color-secondary-container, light-dark(#d4e8d1, #3a4b3a));
|
|
36
|
+
--_on-secondary-container: var(--md-sys-color-on-secondary-container, light-dark(#3a4b3a, #d4e8d1));
|
|
37
|
+
--_tertiary: var(--md-sys-color-tertiary, light-dark(#39656c, #a1ced6));
|
|
38
|
+
--_on-tertiary: var(--md-sys-color-on-tertiary, light-dark(#ffffff, #00363d));
|
|
39
|
+
--_tertiary-container: var(--md-sys-color-tertiary-container, light-dark(#bdeaf3, #1f4d54));
|
|
40
|
+
--_on-tertiary-container: var(--md-sys-color-on-tertiary-container, light-dark(#1f4d54, #bdeaf3));
|
|
41
|
+
--_error: var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
|
|
42
|
+
--_on-error: var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
|
|
43
|
+
--_error-container: var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
|
|
44
|
+
--_on-error-container: var(--md-sys-color-on-error-container, light-dark(#93000a, #ffdad6));
|
|
45
|
+
--_primary-fixed: var(--md-sys-color-primary-fixed, light-dark(#a3f5aa, #a3f5aa));
|
|
46
|
+
--_primary-fixed-dim: var(--md-sys-color-primary-fixed-dim, light-dark(#88d990, #88d990));
|
|
47
|
+
--_on-primary-fixed: var(--md-sys-color-on-primary-fixed, light-dark(#002108, #002108));
|
|
48
|
+
--_on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant, light-dark(#00531f, #00531f));
|
|
49
|
+
--_secondary-fixed: var(--md-sys-color-secondary-fixed, light-dark(#d4e8d1, #d4e8d1));
|
|
50
|
+
--_secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim, light-dark(#b8ccb5, #b8ccb5));
|
|
51
|
+
--_on-secondary-fixed: var(--md-sys-color-on-secondary-fixed, light-dark(#0f1f11, #0f1f11));
|
|
52
|
+
--_on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant, light-dark(#3a4b3a, #3a4b3a));
|
|
53
|
+
--_tertiary-fixed: var(--md-sys-color-tertiary-fixed, light-dark(#bdeaf3, #bdeaf3));
|
|
54
|
+
--_tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim, light-dark(#a1ced6, #a1ced6));
|
|
55
|
+
--_on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed, light-dark(#001f24, #001f24));
|
|
56
|
+
--_on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#1f4d54, #1f4d54));
|
|
65
57
|
}
|
|
66
58
|
}
|
|
67
59
|
|
|
68
60
|
@layer material-design-system.color.text {
|
|
69
61
|
.text-primary-palette-key-color {
|
|
70
|
-
color: var(--
|
|
62
|
+
color: var(--_primary-palette-key-color);
|
|
71
63
|
}
|
|
72
64
|
|
|
73
65
|
.text-secondary-palette-key-color {
|
|
74
|
-
color: var(--
|
|
66
|
+
color: var(--_secondary-palette-key-color);
|
|
75
67
|
}
|
|
76
68
|
|
|
77
69
|
.text-tertiary-palette-key-color {
|
|
78
|
-
color: var(--
|
|
70
|
+
color: var(--_tertiary-palette-key-color);
|
|
79
71
|
}
|
|
80
72
|
|
|
81
73
|
.text-neutral-palette-key-color {
|
|
82
|
-
color: var(--
|
|
74
|
+
color: var(--_neutral-palette-key-color);
|
|
83
75
|
}
|
|
84
76
|
|
|
85
77
|
.text-neutral-variant-palette-key-color {
|
|
86
|
-
color: var(--
|
|
78
|
+
color: var(--_neutral-variant-palette-key-color);
|
|
87
79
|
}
|
|
88
80
|
|
|
89
81
|
.text-background {
|
|
90
|
-
color: var(--
|
|
82
|
+
color: var(--_background);
|
|
91
83
|
}
|
|
92
84
|
|
|
93
85
|
.text-on-background {
|
|
94
|
-
color: var(--
|
|
86
|
+
color: var(--_on-background);
|
|
95
87
|
}
|
|
96
88
|
|
|
97
89
|
.text-surface {
|
|
98
|
-
color: var(--
|
|
90
|
+
color: var(--_surface);
|
|
99
91
|
}
|
|
100
92
|
|
|
101
93
|
.text-surface-dim {
|
|
102
|
-
color: var(--
|
|
94
|
+
color: var(--_surface-dim);
|
|
103
95
|
}
|
|
104
96
|
|
|
105
97
|
.text-surface-bright {
|
|
106
|
-
color: var(--
|
|
98
|
+
color: var(--_surface-bright);
|
|
107
99
|
}
|
|
108
100
|
|
|
109
101
|
.text-surface-container-lowest {
|
|
110
|
-
color: var(--
|
|
102
|
+
color: var(--_surface-container-lowest);
|
|
111
103
|
}
|
|
112
104
|
|
|
113
105
|
.text-surface-container-low {
|
|
114
|
-
color: var(--
|
|
106
|
+
color: var(--_surface-container-low);
|
|
115
107
|
}
|
|
116
108
|
|
|
117
109
|
.text-surface-container {
|
|
118
|
-
color: var(--
|
|
110
|
+
color: var(--_surface-container);
|
|
119
111
|
}
|
|
120
112
|
|
|
121
113
|
.text-surface-container-high {
|
|
122
|
-
color: var(--
|
|
114
|
+
color: var(--_surface-container-high);
|
|
123
115
|
}
|
|
124
116
|
|
|
125
117
|
.text-surface-container-highest {
|
|
126
|
-
color: var(--
|
|
118
|
+
color: var(--_surface-container-highest);
|
|
127
119
|
}
|
|
128
120
|
|
|
129
121
|
.text-on-surface {
|
|
130
|
-
color: var(--
|
|
122
|
+
color: var(--_on-surface);
|
|
131
123
|
}
|
|
132
124
|
|
|
133
125
|
.text-surface-variant {
|
|
134
|
-
color: var(--
|
|
126
|
+
color: var(--_surface-variant);
|
|
135
127
|
}
|
|
136
128
|
|
|
137
129
|
.text-on-surface-variant {
|
|
138
|
-
color: var(--
|
|
130
|
+
color: var(--_on-surface-variant);
|
|
139
131
|
}
|
|
140
132
|
|
|
141
133
|
.text-inverse-surface {
|
|
142
|
-
color: var(--
|
|
134
|
+
color: var(--_inverse-surface);
|
|
143
135
|
}
|
|
144
136
|
|
|
145
137
|
.text-inverse-on-surface {
|
|
146
|
-
color: var(--
|
|
138
|
+
color: var(--_inverse-on-surface);
|
|
147
139
|
}
|
|
148
140
|
|
|
149
141
|
.text-outline {
|
|
150
|
-
color: var(--
|
|
142
|
+
color: var(--_outline);
|
|
151
143
|
}
|
|
152
144
|
|
|
153
145
|
.text-outline-variant {
|
|
154
|
-
color: var(--
|
|
146
|
+
color: var(--_outline-variant);
|
|
155
147
|
}
|
|
156
148
|
|
|
157
149
|
.text-shadow {
|
|
158
|
-
color: var(--
|
|
150
|
+
color: var(--_shadow);
|
|
159
151
|
}
|
|
160
152
|
|
|
161
153
|
.text-scrim {
|
|
162
|
-
color: var(--
|
|
154
|
+
color: var(--_scrim);
|
|
163
155
|
}
|
|
164
156
|
|
|
165
157
|
.text-surface-tint {
|
|
166
|
-
color: var(--
|
|
158
|
+
color: var(--_surface-tint);
|
|
167
159
|
}
|
|
168
160
|
|
|
169
161
|
.text-primary {
|
|
170
|
-
color: var(--
|
|
162
|
+
color: var(--_primary);
|
|
171
163
|
}
|
|
172
164
|
|
|
173
165
|
.text-on-primary {
|
|
174
|
-
color: var(--
|
|
166
|
+
color: var(--_on-primary);
|
|
175
167
|
}
|
|
176
168
|
|
|
177
169
|
.text-primary-container {
|
|
178
|
-
color: var(--
|
|
170
|
+
color: var(--_primary-container);
|
|
179
171
|
}
|
|
180
172
|
|
|
181
173
|
.text-on-primary-container {
|
|
182
|
-
color: var(--
|
|
174
|
+
color: var(--_on-primary-container);
|
|
183
175
|
}
|
|
184
176
|
|
|
185
177
|
.text-inverse-primary {
|
|
186
|
-
color: var(--
|
|
178
|
+
color: var(--_inverse-primary);
|
|
187
179
|
}
|
|
188
180
|
|
|
189
181
|
.text-secondary {
|
|
190
|
-
color: var(--
|
|
182
|
+
color: var(--_secondary);
|
|
191
183
|
}
|
|
192
184
|
|
|
193
185
|
.text-on-secondary {
|
|
194
|
-
color: var(--
|
|
186
|
+
color: var(--_on-secondary);
|
|
195
187
|
}
|
|
196
188
|
|
|
197
189
|
.text-secondary-container {
|
|
198
|
-
color: var(--
|
|
190
|
+
color: var(--_secondary-container);
|
|
199
191
|
}
|
|
200
192
|
|
|
201
193
|
.text-on-secondary-container {
|
|
202
|
-
color: var(--
|
|
194
|
+
color: var(--_on-secondary-container);
|
|
203
195
|
}
|
|
204
196
|
|
|
205
197
|
.text-tertiary {
|
|
206
|
-
color: var(--
|
|
198
|
+
color: var(--_tertiary);
|
|
207
199
|
}
|
|
208
200
|
|
|
209
201
|
.text-on-tertiary {
|
|
210
|
-
color: var(--
|
|
202
|
+
color: var(--_on-tertiary);
|
|
211
203
|
}
|
|
212
204
|
|
|
213
205
|
.text-tertiary-container {
|
|
214
|
-
color: var(--
|
|
206
|
+
color: var(--_tertiary-container);
|
|
215
207
|
}
|
|
216
208
|
|
|
217
209
|
.text-on-tertiary-container {
|
|
218
|
-
color: var(--
|
|
210
|
+
color: var(--_on-tertiary-container);
|
|
219
211
|
}
|
|
220
212
|
|
|
221
213
|
.text-error {
|
|
222
|
-
color: var(--
|
|
214
|
+
color: var(--_error);
|
|
223
215
|
}
|
|
224
216
|
|
|
225
217
|
.text-on-error {
|
|
226
|
-
color: var(--
|
|
218
|
+
color: var(--_on-error);
|
|
227
219
|
}
|
|
228
220
|
|
|
229
221
|
.text-error-container {
|
|
230
|
-
color: var(--
|
|
222
|
+
color: var(--_error-container);
|
|
231
223
|
}
|
|
232
224
|
|
|
233
225
|
.text-on-error-container {
|
|
234
|
-
color: var(--
|
|
226
|
+
color: var(--_on-error-container);
|
|
235
227
|
}
|
|
236
228
|
|
|
237
229
|
.text-primary-fixed {
|
|
238
|
-
color: var(--
|
|
230
|
+
color: var(--_primary-fixed);
|
|
239
231
|
}
|
|
240
232
|
|
|
241
233
|
.text-primary-fixed-dim {
|
|
242
|
-
color: var(--
|
|
234
|
+
color: var(--_primary-fixed-dim);
|
|
243
235
|
}
|
|
244
236
|
|
|
245
237
|
.text-on-primary-fixed {
|
|
246
|
-
color: var(--
|
|
238
|
+
color: var(--_on-primary-fixed);
|
|
247
239
|
}
|
|
248
240
|
|
|
249
241
|
.text-on-primary-fixed-variant {
|
|
250
|
-
color: var(--
|
|
242
|
+
color: var(--_on-primary-fixed-variant);
|
|
251
243
|
}
|
|
252
244
|
|
|
253
245
|
.text-secondary-fixed {
|
|
254
|
-
color: var(--
|
|
246
|
+
color: var(--_secondary-fixed);
|
|
255
247
|
}
|
|
256
248
|
|
|
257
249
|
.text-secondary-fixed-dim {
|
|
258
|
-
color: var(--
|
|
250
|
+
color: var(--_secondary-fixed-dim);
|
|
259
251
|
}
|
|
260
252
|
|
|
261
253
|
.text-on-secondary-fixed {
|
|
262
|
-
color: var(--
|
|
254
|
+
color: var(--_on-secondary-fixed);
|
|
263
255
|
}
|
|
264
256
|
|
|
265
257
|
.text-on-secondary-fixed-variant {
|
|
266
|
-
color: var(--
|
|
258
|
+
color: var(--_on-secondary-fixed-variant);
|
|
267
259
|
}
|
|
268
260
|
|
|
269
261
|
.text-tertiary-fixed {
|
|
270
|
-
color: var(--
|
|
262
|
+
color: var(--_tertiary-fixed);
|
|
271
263
|
}
|
|
272
264
|
|
|
273
265
|
.text-tertiary-fixed-dim {
|
|
274
|
-
color: var(--
|
|
266
|
+
color: var(--_tertiary-fixed-dim);
|
|
275
267
|
}
|
|
276
268
|
|
|
277
269
|
.text-on-tertiary-fixed {
|
|
278
|
-
color: var(--
|
|
270
|
+
color: var(--_on-tertiary-fixed);
|
|
279
271
|
}
|
|
280
272
|
|
|
281
273
|
.text-on-tertiary-fixed-variant {
|
|
282
|
-
color: var(--
|
|
274
|
+
color: var(--_on-tertiary-fixed-variant);
|
|
283
275
|
}
|
|
284
276
|
}
|
|
285
277
|
|
|
286
278
|
@layer material-design-system.color.background {
|
|
287
279
|
.bg-primary-palette-key-color {
|
|
288
|
-
background: var(--
|
|
280
|
+
background: var(--_primary-palette-key-color);
|
|
289
281
|
}
|
|
290
282
|
|
|
291
283
|
.bg-secondary-palette-key-color {
|
|
292
|
-
background: var(--
|
|
284
|
+
background: var(--_secondary-palette-key-color);
|
|
293
285
|
}
|
|
294
286
|
|
|
295
287
|
.bg-tertiary-palette-key-color {
|
|
296
|
-
background: var(--
|
|
288
|
+
background: var(--_tertiary-palette-key-color);
|
|
297
289
|
}
|
|
298
290
|
|
|
299
291
|
.bg-neutral-palette-key-color {
|
|
300
|
-
background: var(--
|
|
292
|
+
background: var(--_neutral-palette-key-color);
|
|
301
293
|
}
|
|
302
294
|
|
|
303
295
|
.bg-neutral-variant-palette-key-color {
|
|
304
|
-
background: var(--
|
|
296
|
+
background: var(--_neutral-variant-palette-key-color);
|
|
305
297
|
}
|
|
306
298
|
|
|
307
299
|
.bg-background {
|
|
308
|
-
background: var(--
|
|
300
|
+
background: var(--_background);
|
|
309
301
|
}
|
|
310
302
|
|
|
311
303
|
.bg-on-background {
|
|
312
|
-
background: var(--
|
|
304
|
+
background: var(--_on-background);
|
|
313
305
|
}
|
|
314
306
|
|
|
315
307
|
.bg-surface {
|
|
316
|
-
background: var(--
|
|
308
|
+
background: var(--_surface);
|
|
317
309
|
}
|
|
318
310
|
|
|
319
311
|
.bg-surface-dim {
|
|
320
|
-
background: var(--
|
|
312
|
+
background: var(--_surface-dim);
|
|
321
313
|
}
|
|
322
314
|
|
|
323
315
|
.bg-surface-bright {
|
|
324
|
-
background: var(--
|
|
316
|
+
background: var(--_surface-bright);
|
|
325
317
|
}
|
|
326
318
|
|
|
327
319
|
.bg-surface-container-lowest {
|
|
328
|
-
background: var(--
|
|
320
|
+
background: var(--_surface-container-lowest);
|
|
329
321
|
}
|
|
330
322
|
|
|
331
323
|
.bg-surface-container-low {
|
|
332
|
-
background: var(--
|
|
324
|
+
background: var(--_surface-container-low);
|
|
333
325
|
}
|
|
334
326
|
|
|
335
327
|
.bg-surface-container {
|
|
336
|
-
background: var(--
|
|
328
|
+
background: var(--_surface-container);
|
|
337
329
|
}
|
|
338
330
|
|
|
339
331
|
.bg-surface-container-high {
|
|
340
|
-
background: var(--
|
|
332
|
+
background: var(--_surface-container-high);
|
|
341
333
|
}
|
|
342
334
|
|
|
343
335
|
.bg-surface-container-highest {
|
|
344
|
-
background: var(--
|
|
336
|
+
background: var(--_surface-container-highest);
|
|
345
337
|
}
|
|
346
338
|
|
|
347
339
|
.bg-on-surface {
|
|
348
|
-
background: var(--
|
|
340
|
+
background: var(--_on-surface);
|
|
349
341
|
}
|
|
350
342
|
|
|
351
343
|
.bg-surface-variant {
|
|
352
|
-
background: var(--
|
|
344
|
+
background: var(--_surface-variant);
|
|
353
345
|
}
|
|
354
346
|
|
|
355
347
|
.bg-on-surface-variant {
|
|
356
|
-
background: var(--
|
|
348
|
+
background: var(--_on-surface-variant);
|
|
357
349
|
}
|
|
358
350
|
|
|
359
351
|
.bg-inverse-surface {
|
|
360
|
-
background: var(--
|
|
352
|
+
background: var(--_inverse-surface);
|
|
361
353
|
}
|
|
362
354
|
|
|
363
355
|
.bg-inverse-on-surface {
|
|
364
|
-
background: var(--
|
|
356
|
+
background: var(--_inverse-on-surface);
|
|
365
357
|
}
|
|
366
358
|
|
|
367
359
|
.bg-outline {
|
|
368
|
-
background: var(--
|
|
360
|
+
background: var(--_outline);
|
|
369
361
|
}
|
|
370
362
|
|
|
371
363
|
.bg-outline-variant {
|
|
372
|
-
background: var(--
|
|
364
|
+
background: var(--_outline-variant);
|
|
373
365
|
}
|
|
374
366
|
|
|
375
367
|
.bg-shadow {
|
|
376
|
-
background: var(--
|
|
368
|
+
background: var(--_shadow);
|
|
377
369
|
}
|
|
378
370
|
|
|
379
371
|
.bg-scrim {
|
|
380
|
-
background: var(--
|
|
372
|
+
background: var(--_scrim);
|
|
381
373
|
}
|
|
382
374
|
|
|
383
375
|
.bg-surface-tint {
|
|
384
|
-
background: var(--
|
|
376
|
+
background: var(--_surface-tint);
|
|
385
377
|
}
|
|
386
378
|
|
|
387
379
|
.bg-primary {
|
|
388
|
-
background: var(--
|
|
380
|
+
background: var(--_primary);
|
|
389
381
|
}
|
|
390
382
|
|
|
391
383
|
.bg-on-primary {
|
|
392
|
-
background: var(--
|
|
384
|
+
background: var(--_on-primary);
|
|
393
385
|
}
|
|
394
386
|
|
|
395
387
|
.bg-primary-container {
|
|
396
|
-
background: var(--
|
|
388
|
+
background: var(--_primary-container);
|
|
397
389
|
}
|
|
398
390
|
|
|
399
391
|
.bg-on-primary-container {
|
|
400
|
-
background: var(--
|
|
392
|
+
background: var(--_on-primary-container);
|
|
401
393
|
}
|
|
402
394
|
|
|
403
395
|
.bg-inverse-primary {
|
|
404
|
-
background: var(--
|
|
396
|
+
background: var(--_inverse-primary);
|
|
405
397
|
}
|
|
406
398
|
|
|
407
399
|
.bg-secondary {
|
|
408
|
-
background: var(--
|
|
400
|
+
background: var(--_secondary);
|
|
409
401
|
}
|
|
410
402
|
|
|
411
403
|
.bg-on-secondary {
|
|
412
|
-
background: var(--
|
|
404
|
+
background: var(--_on-secondary);
|
|
413
405
|
}
|
|
414
406
|
|
|
415
407
|
.bg-secondary-container {
|
|
416
|
-
background: var(--
|
|
408
|
+
background: var(--_secondary-container);
|
|
417
409
|
}
|
|
418
410
|
|
|
419
411
|
.bg-on-secondary-container {
|
|
420
|
-
background: var(--
|
|
412
|
+
background: var(--_on-secondary-container);
|
|
421
413
|
}
|
|
422
414
|
|
|
423
415
|
.bg-tertiary {
|
|
424
|
-
background: var(--
|
|
416
|
+
background: var(--_tertiary);
|
|
425
417
|
}
|
|
426
418
|
|
|
427
419
|
.bg-on-tertiary {
|
|
428
|
-
background: var(--
|
|
420
|
+
background: var(--_on-tertiary);
|
|
429
421
|
}
|
|
430
422
|
|
|
431
423
|
.bg-tertiary-container {
|
|
432
|
-
background: var(--
|
|
424
|
+
background: var(--_tertiary-container);
|
|
433
425
|
}
|
|
434
426
|
|
|
435
427
|
.bg-on-tertiary-container {
|
|
436
|
-
background: var(--
|
|
428
|
+
background: var(--_on-tertiary-container);
|
|
437
429
|
}
|
|
438
430
|
|
|
439
431
|
.bg-error {
|
|
440
|
-
background: var(--
|
|
432
|
+
background: var(--_error);
|
|
441
433
|
}
|
|
442
434
|
|
|
443
435
|
.bg-on-error {
|
|
444
|
-
background: var(--
|
|
436
|
+
background: var(--_on-error);
|
|
445
437
|
}
|
|
446
438
|
|
|
447
439
|
.bg-error-container {
|
|
448
|
-
background: var(--
|
|
440
|
+
background: var(--_error-container);
|
|
449
441
|
}
|
|
450
442
|
|
|
451
443
|
.bg-on-error-container {
|
|
452
|
-
background: var(--
|
|
444
|
+
background: var(--_on-error-container);
|
|
453
445
|
}
|
|
454
446
|
|
|
455
447
|
.bg-primary-fixed {
|
|
456
|
-
background: var(--
|
|
448
|
+
background: var(--_primary-fixed);
|
|
457
449
|
}
|
|
458
450
|
|
|
459
451
|
.bg-primary-fixed-dim {
|
|
460
|
-
background: var(--
|
|
452
|
+
background: var(--_primary-fixed-dim);
|
|
461
453
|
}
|
|
462
454
|
|
|
463
455
|
.bg-on-primary-fixed {
|
|
464
|
-
background: var(--
|
|
456
|
+
background: var(--_on-primary-fixed);
|
|
465
457
|
}
|
|
466
458
|
|
|
467
459
|
.bg-on-primary-fixed-variant {
|
|
468
|
-
background: var(--
|
|
460
|
+
background: var(--_on-primary-fixed-variant);
|
|
469
461
|
}
|
|
470
462
|
|
|
471
463
|
.bg-secondary-fixed {
|
|
472
|
-
background: var(--
|
|
464
|
+
background: var(--_secondary-fixed);
|
|
473
465
|
}
|
|
474
466
|
|
|
475
467
|
.bg-secondary-fixed-dim {
|
|
476
|
-
background: var(--
|
|
468
|
+
background: var(--_secondary-fixed-dim);
|
|
477
469
|
}
|
|
478
470
|
|
|
479
471
|
.bg-on-secondary-fixed {
|
|
480
|
-
background: var(--
|
|
472
|
+
background: var(--_on-secondary-fixed);
|
|
481
473
|
}
|
|
482
474
|
|
|
483
475
|
.bg-on-secondary-fixed-variant {
|
|
484
|
-
background: var(--
|
|
476
|
+
background: var(--_on-secondary-fixed-variant);
|
|
485
477
|
}
|
|
486
478
|
|
|
487
479
|
.bg-tertiary-fixed {
|
|
488
|
-
background: var(--
|
|
480
|
+
background: var(--_tertiary-fixed);
|
|
489
481
|
}
|
|
490
482
|
|
|
491
483
|
.bg-tertiary-fixed-dim {
|
|
492
|
-
background: var(--
|
|
484
|
+
background: var(--_tertiary-fixed-dim);
|
|
493
485
|
}
|
|
494
486
|
|
|
495
487
|
.bg-on-tertiary-fixed {
|
|
496
|
-
background: var(--
|
|
488
|
+
background: var(--_on-tertiary-fixed);
|
|
497
489
|
}
|
|
498
490
|
|
|
499
491
|
.bg-on-tertiary-fixed-variant {
|
|
500
|
-
background: var(--
|
|
492
|
+
background: var(--_on-tertiary-fixed-variant);
|
|
501
493
|
}
|
|
502
494
|
}
|
|
503
495
|
|
|
504
496
|
@layer material-design-system.color {
|
|
497
|
+
|
|
498
|
+
:root:not([dark]) {
|
|
499
|
+
color-scheme: light;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
:root[dark] {
|
|
503
|
+
color-scheme: dark;
|
|
504
|
+
}
|
|
505
|
+
|
|
505
506
|
.background {
|
|
506
|
-
background: var(--
|
|
507
|
+
background: var(--_background);
|
|
507
508
|
}
|
|
508
509
|
|
|
509
510
|
.on-background {
|
|
510
|
-
color: var(--
|
|
511
|
+
color: var(--_on-background);
|
|
511
512
|
}
|
|
512
513
|
|
|
513
514
|
.surface {
|
|
514
|
-
background: var(--
|
|
515
|
+
background: var(--_surface);
|
|
515
516
|
}
|
|
516
517
|
|
|
517
518
|
.surface-dim {
|
|
518
|
-
background: var(--
|
|
519
|
+
background: var(--_surface-dim);
|
|
519
520
|
}
|
|
520
521
|
|
|
521
522
|
.surface-bright {
|
|
522
|
-
background: var(--
|
|
523
|
+
background: var(--_surface-bright);
|
|
523
524
|
}
|
|
524
525
|
|
|
525
526
|
.surface-container-lowest {
|
|
526
|
-
background: var(--
|
|
527
|
+
background: var(--_surface-container-lowest);
|
|
527
528
|
}
|
|
528
529
|
|
|
529
530
|
.surface-container-low {
|
|
530
|
-
background: var(--
|
|
531
|
+
background: var(--_surface-container-low);
|
|
531
532
|
}
|
|
532
533
|
|
|
533
534
|
.surface-container {
|
|
534
|
-
background: var(--
|
|
535
|
+
background: var(--_surface-container);
|
|
535
536
|
}
|
|
536
537
|
|
|
537
538
|
.surface-container-high {
|
|
538
|
-
background: var(--
|
|
539
|
+
background: var(--_surface-container-high);
|
|
539
540
|
}
|
|
540
541
|
|
|
541
542
|
.surface-container-highest {
|
|
542
|
-
background: var(--
|
|
543
|
+
background: var(--_surface-container-highest);
|
|
543
544
|
}
|
|
544
545
|
|
|
545
546
|
.on-surface {
|
|
546
|
-
color: var(--
|
|
547
|
+
color: var(--_on-surface);
|
|
547
548
|
}
|
|
548
549
|
|
|
549
550
|
.surface-variant {
|
|
550
|
-
background: var(--
|
|
551
|
+
background: var(--_surface-variant);
|
|
551
552
|
}
|
|
552
553
|
|
|
553
554
|
.on-surface-variant {
|
|
554
|
-
color: var(--
|
|
555
|
+
color: var(--_on-surface-variant);
|
|
555
556
|
}
|
|
556
557
|
|
|
557
558
|
.inverse-surface {
|
|
558
|
-
background: var(--
|
|
559
|
+
background: var(--_inverse-surface);
|
|
559
560
|
}
|
|
560
561
|
|
|
561
562
|
.inverse-on-surface {
|
|
562
|
-
color: var(--
|
|
563
|
+
color: var(--_inverse-on-surface);
|
|
563
564
|
}
|
|
564
565
|
|
|
565
566
|
.outline {
|
|
566
|
-
outline-color: var(--
|
|
567
|
-
border-color: var(--
|
|
567
|
+
outline-color: var(--_outline);
|
|
568
|
+
border-color: var(--_outline);
|
|
568
569
|
}
|
|
569
570
|
|
|
570
571
|
.outline-variant {
|
|
571
|
-
outline-color: var(--
|
|
572
|
-
border-color: var(--
|
|
572
|
+
outline-color: var(--_outline-variant);
|
|
573
|
+
border-color: var(--_outline-variant);
|
|
573
574
|
}
|
|
574
575
|
|
|
575
576
|
.shadow {
|
|
576
|
-
background: var(--
|
|
577
|
+
background: var(--_shadow);
|
|
577
578
|
}
|
|
578
579
|
|
|
579
580
|
.scrim {
|
|
580
|
-
background: var(--
|
|
581
|
+
background: var(--_scrim);
|
|
581
582
|
}
|
|
582
583
|
|
|
583
584
|
.surface-tint {
|
|
584
|
-
background: var(--
|
|
585
|
+
background: var(--_surface-tint);
|
|
585
586
|
}
|
|
586
587
|
|
|
587
588
|
.primary {
|
|
588
|
-
background: var(--
|
|
589
|
+
background: var(--_primary);
|
|
589
590
|
}
|
|
590
591
|
|
|
591
592
|
.on-primary {
|
|
592
|
-
color: var(--
|
|
593
|
+
color: var(--_on-primary);
|
|
593
594
|
}
|
|
594
595
|
|
|
595
596
|
.primary-container {
|
|
596
|
-
background: var(--
|
|
597
|
+
background: var(--_primary-container);
|
|
597
598
|
}
|
|
598
599
|
|
|
599
600
|
.on-primary-container {
|
|
600
|
-
color: var(--
|
|
601
|
+
color: var(--_on-primary-container);
|
|
601
602
|
}
|
|
602
603
|
|
|
603
604
|
.inverse-primary {
|
|
604
|
-
background: var(--
|
|
605
|
+
background: var(--_inverse-primary);
|
|
605
606
|
}
|
|
606
607
|
|
|
607
608
|
.secondary {
|
|
608
|
-
background: var(--
|
|
609
|
+
background: var(--_secondary);
|
|
609
610
|
}
|
|
610
611
|
|
|
611
612
|
.on-secondary {
|
|
612
|
-
color: var(--
|
|
613
|
+
color: var(--_on-secondary);
|
|
613
614
|
}
|
|
614
615
|
|
|
615
616
|
.secondary-container {
|
|
616
|
-
background: var(--
|
|
617
|
+
background: var(--_secondary-container);
|
|
617
618
|
}
|
|
618
619
|
|
|
619
620
|
.on-secondary-container {
|
|
620
|
-
color: var(--
|
|
621
|
+
color: var(--_on-secondary-container);
|
|
621
622
|
}
|
|
622
623
|
|
|
623
624
|
.tertiary {
|
|
624
|
-
background: var(--
|
|
625
|
+
background: var(--_tertiary);
|
|
625
626
|
}
|
|
626
627
|
|
|
627
628
|
.on-tertiary {
|
|
628
|
-
color: var(--
|
|
629
|
+
color: var(--_on-tertiary);
|
|
629
630
|
}
|
|
630
631
|
|
|
631
632
|
.tertiary-container {
|
|
632
|
-
background: var(--
|
|
633
|
+
background: var(--_tertiary-container);
|
|
633
634
|
}
|
|
634
635
|
|
|
635
636
|
.on-tertiary-container {
|
|
636
|
-
color: var(--
|
|
637
|
+
color: var(--_on-tertiary-container);
|
|
637
638
|
}
|
|
638
639
|
|
|
639
640
|
.error {
|
|
640
|
-
background: var(--
|
|
641
|
+
background: var(--_error);
|
|
641
642
|
}
|
|
642
643
|
|
|
643
644
|
.on-error {
|
|
644
|
-
color: var(--
|
|
645
|
+
color: var(--_on-error);
|
|
645
646
|
}
|
|
646
647
|
|
|
647
648
|
.error-container {
|
|
648
|
-
background: var(--
|
|
649
|
+
background: var(--_error-container);
|
|
649
650
|
}
|
|
650
651
|
|
|
651
652
|
.on-error-container {
|
|
652
|
-
color: var(--
|
|
653
|
+
color: var(--_on-error-container);
|
|
653
654
|
}
|
|
654
655
|
|
|
655
656
|
.primary-fixed {
|
|
656
|
-
background: var(--
|
|
657
|
+
background: var(--_primary-fixed);
|
|
657
658
|
}
|
|
658
659
|
|
|
659
660
|
.primary-fixed-dim {
|
|
660
|
-
background: var(--
|
|
661
|
+
background: var(--_primary-fixed-dim);
|
|
661
662
|
}
|
|
662
663
|
|
|
663
664
|
.on-primary-fixed {
|
|
664
|
-
color: var(--
|
|
665
|
+
color: var(--_on-primary-fixed);
|
|
665
666
|
}
|
|
666
667
|
|
|
667
668
|
.on-primary-fixed-variant {
|
|
668
|
-
color: var(--
|
|
669
|
+
color: var(--_on-primary-fixed-variant);
|
|
669
670
|
}
|
|
670
671
|
|
|
671
672
|
.secondary-fixed {
|
|
672
|
-
background: var(--
|
|
673
|
+
background: var(--_secondary-fixed);
|
|
673
674
|
}
|
|
674
675
|
|
|
675
676
|
.secondary-fixed-dim {
|
|
676
|
-
background: var(--
|
|
677
|
+
background: var(--_secondary-fixed-dim);
|
|
677
678
|
}
|
|
678
679
|
|
|
679
680
|
.on-secondary-fixed {
|
|
680
|
-
color: var(--
|
|
681
|
+
color: var(--_on-secondary-fixed);
|
|
681
682
|
}
|
|
682
683
|
|
|
683
684
|
.on-secondary-fixed-variant {
|
|
684
|
-
color: var(--
|
|
685
|
+
color: var(--_on-secondary-fixed-variant);
|
|
685
686
|
}
|
|
686
687
|
|
|
687
688
|
.tertiary-fixed {
|
|
688
|
-
background: var(--
|
|
689
|
+
background: var(--_tertiary-fixed);
|
|
689
690
|
}
|
|
690
691
|
|
|
691
692
|
.tertiary-fixed-dim {
|
|
692
|
-
background: var(--
|
|
693
|
+
background: var(--_tertiary-fixed-dim);
|
|
693
694
|
}
|
|
694
695
|
|
|
695
696
|
.on-tertiary-fixed {
|
|
696
|
-
color: var(--
|
|
697
|
+
color: var(--_on-tertiary-fixed);
|
|
697
698
|
}
|
|
698
699
|
|
|
699
700
|
.on-tertiary-fixed-variant {
|
|
700
|
-
color: var(--
|
|
701
|
+
color: var(--_on-tertiary-fixed-variant);
|
|
701
702
|
}
|
|
702
703
|
}
|
package/motion.css
CHANGED
package/package.json
CHANGED