@tinybigui/react 0.3.0 → 0.4.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.
Files changed (10) hide show
  1. package/README.md +91 -28
  2. package/dist/index.cjs +11985 -3204
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +6676 -977
  5. package/dist/index.d.ts +6676 -977
  6. package/dist/index.js +9737 -1079
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +370 -151
  9. package/dist/styles.css.map +1 -1
  10. package/package.json +3 -2
package/dist/styles.css CHANGED
@@ -1,40 +1,208 @@
1
- @import "tailwindcss";
1
+ /* ../tokens/dist/palette.css */
2
+ :root {
3
+ --md-ref-palette-primary0: #000000;
4
+ --md-ref-palette-primary10: #21005d;
5
+ --md-ref-palette-primary20: #381e72;
6
+ --md-ref-palette-primary30: #4f378b;
7
+ --md-ref-palette-primary40: #6750a4;
8
+ --md-ref-palette-primary50: #7f67be;
9
+ --md-ref-palette-primary60: #9a82db;
10
+ --md-ref-palette-primary70: #b69df8;
11
+ --md-ref-palette-primary80: #d0bcff;
12
+ --md-ref-palette-primary90: #eaddff;
13
+ --md-ref-palette-primary95: #f6edff;
14
+ --md-ref-palette-primary99: #fffbfe;
15
+ --md-ref-palette-primary100: #ffffff;
16
+ --md-ref-palette-secondary0: #000000;
17
+ --md-ref-palette-secondary10: #1d192b;
18
+ --md-ref-palette-secondary20: #332d41;
19
+ --md-ref-palette-secondary30: #4a4458;
20
+ --md-ref-palette-secondary40: #625b71;
21
+ --md-ref-palette-secondary50: #7a7289;
22
+ --md-ref-palette-secondary60: #958da5;
23
+ --md-ref-palette-secondary70: #b0a7c0;
24
+ --md-ref-palette-secondary80: #ccc2dc;
25
+ --md-ref-palette-secondary90: #e8def8;
26
+ --md-ref-palette-secondary95: #f6edff;
27
+ --md-ref-palette-secondary99: #fffbfe;
28
+ --md-ref-palette-secondary100: #ffffff;
29
+ --md-ref-palette-tertiary0: #000000;
30
+ --md-ref-palette-tertiary10: #31111d;
31
+ --md-ref-palette-tertiary20: #492532;
32
+ --md-ref-palette-tertiary30: #633b48;
33
+ --md-ref-palette-tertiary40: #7d5260;
34
+ --md-ref-palette-tertiary50: #986977;
35
+ --md-ref-palette-tertiary60: #b58392;
36
+ --md-ref-palette-tertiary70: #d29dac;
37
+ --md-ref-palette-tertiary80: #efb8c8;
38
+ --md-ref-palette-tertiary90: #ffd8e4;
39
+ --md-ref-palette-tertiary95: #ffecf1;
40
+ --md-ref-palette-tertiary99: #fffbfa;
41
+ --md-ref-palette-tertiary100: #ffffff;
42
+ --md-ref-palette-error0: #000000;
43
+ --md-ref-palette-error10: #410e0b;
44
+ --md-ref-palette-error20: #601410;
45
+ --md-ref-palette-error30: #8c1d18;
46
+ --md-ref-palette-error40: #b3261e;
47
+ --md-ref-palette-error50: #dc362e;
48
+ --md-ref-palette-error60: #e46962;
49
+ --md-ref-palette-error70: #ec928e;
50
+ --md-ref-palette-error80: #f2b8b5;
51
+ --md-ref-palette-error90: #f9dedc;
52
+ --md-ref-palette-error95: #fceeee;
53
+ --md-ref-palette-error99: #fffbf9;
54
+ --md-ref-palette-error100: #ffffff;
55
+ --md-ref-palette-neutral0: #000000;
56
+ --md-ref-palette-neutral4: #0f0d13;
57
+ --md-ref-palette-neutral6: #1d1b20;
58
+ --md-ref-palette-neutral10: #1c1b1f;
59
+ --md-ref-palette-neutral12: #211f26;
60
+ --md-ref-palette-neutral17: #2b2930;
61
+ --md-ref-palette-neutral20: #322f35;
62
+ --md-ref-palette-neutral22: #36343b;
63
+ --md-ref-palette-neutral30: #484649;
64
+ --md-ref-palette-neutral40: #605d62;
65
+ --md-ref-palette-neutral50: #787579;
66
+ --md-ref-palette-neutral60: #939094;
67
+ --md-ref-palette-neutral70: #aeaaae;
68
+ --md-ref-palette-neutral80: #c9c5ca;
69
+ --md-ref-palette-neutral90: #e6e1e5;
70
+ --md-ref-palette-neutral95: #f5eff7;
71
+ --md-ref-palette-neutral87: #e6e0e9;
72
+ --md-ref-palette-neutral92: #ece6f0;
73
+ --md-ref-palette-neutral94: #f3edf7;
74
+ --md-ref-palette-neutral96: #f7f2fa;
75
+ --md-ref-palette-neutral98: #fef7ff;
76
+ --md-ref-palette-neutral99: #fffbfe;
77
+ --md-ref-palette-neutral100: #ffffff;
78
+ --md-ref-palette-neutral-variant0: #000000;
79
+ --md-ref-palette-neutral-variant10: #1d1a22;
80
+ --md-ref-palette-neutral-variant20: #322f37;
81
+ --md-ref-palette-neutral-variant30: #49454f;
82
+ --md-ref-palette-neutral-variant40: #605d66;
83
+ --md-ref-palette-neutral-variant50: #79747e;
84
+ --md-ref-palette-neutral-variant60: #938f99;
85
+ --md-ref-palette-neutral-variant70: #aea9b4;
86
+ --md-ref-palette-neutral-variant80: #cac4d0;
87
+ --md-ref-palette-neutral-variant90: #e7e0ec;
88
+ --md-ref-palette-neutral-variant95: #f5eefa;
89
+ --md-ref-palette-neutral-variant99: #fffbfe;
90
+ --md-ref-palette-neutral-variant100: #ffffff;
91
+ --md-ref-palette-black: #000000;
92
+ --md-ref-palette-white: #ffffff;
93
+ }
2
94
 
3
- /* ../tokens/src/tokens.css */
95
+ /* ../tokens/dist/color.css */
96
+ :root {
97
+ --md-sys-color-primary: var(--md-ref-palette-primary40);
98
+ --md-sys-color-on-primary: var(--md-ref-palette-primary100);
99
+ --md-sys-color-primary-container: var(--md-ref-palette-primary90);
100
+ --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
101
+ --md-sys-color-secondary: var(--md-ref-palette-secondary40);
102
+ --md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
103
+ --md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
104
+ --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
105
+ --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
106
+ --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
107
+ --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
108
+ --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
109
+ --md-sys-color-error: var(--md-ref-palette-error40);
110
+ --md-sys-color-on-error: var(--md-ref-palette-error100);
111
+ --md-sys-color-error-container: var(--md-ref-palette-error90);
112
+ --md-sys-color-on-error-container: var(--md-ref-palette-error10);
113
+ --md-sys-color-surface: var(--md-ref-palette-neutral98);
114
+ --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
115
+ --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
116
+ --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
117
+ --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
118
+ --md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
119
+ --md-sys-color-surface-container: var(--md-ref-palette-neutral94);
120
+ --md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
121
+ --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
122
+ --md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
123
+ --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
124
+ --md-sys-color-background: var(--md-ref-palette-neutral99);
125
+ --md-sys-color-on-background: var(--md-ref-palette-neutral10);
126
+ --md-sys-color-scrim: var(--md-ref-palette-neutral0);
127
+ --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
128
+ --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
129
+ --md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
130
+ }
131
+ .dark {
132
+ --md-sys-color-primary: var(--md-ref-palette-primary80);
133
+ --md-sys-color-on-primary: var(--md-ref-palette-primary20);
134
+ --md-sys-color-primary-container: var(--md-ref-palette-primary30);
135
+ --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
136
+ --md-sys-color-secondary: var(--md-ref-palette-secondary80);
137
+ --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
138
+ --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
139
+ --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
140
+ --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
141
+ --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
142
+ --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
143
+ --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
144
+ --md-sys-color-error: var(--md-ref-palette-error80);
145
+ --md-sys-color-on-error: var(--md-ref-palette-error20);
146
+ --md-sys-color-error-container: var(--md-ref-palette-error30);
147
+ --md-sys-color-on-error-container: var(--md-ref-palette-error90);
148
+ --md-sys-color-surface: var(--md-ref-palette-neutral10);
149
+ --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
150
+ --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
151
+ --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
152
+ --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
153
+ --md-sys-color-surface-container-low: var(--md-ref-palette-neutral6);
154
+ --md-sys-color-surface-container: var(--md-ref-palette-neutral12);
155
+ --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
156
+ --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
157
+ --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
158
+ --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant30);
159
+ --md-sys-color-background: var(--md-ref-palette-neutral10);
160
+ --md-sys-color-on-background: var(--md-ref-palette-neutral90);
161
+ --md-sys-color-scrim: var(--md-ref-palette-neutral0);
162
+ --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
163
+ --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
164
+ --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
165
+ }
166
+ @media (prefers-color-scheme: dark) {
167
+ :root:not(.light) {
168
+ --md-sys-color-primary: var(--md-ref-palette-primary80);
169
+ --md-sys-color-on-primary: var(--md-ref-palette-primary20);
170
+ --md-sys-color-primary-container: var(--md-ref-palette-primary30);
171
+ --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
172
+ --md-sys-color-secondary: var(--md-ref-palette-secondary80);
173
+ --md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
174
+ --md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
175
+ --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
176
+ --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
177
+ --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
178
+ --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
179
+ --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
180
+ --md-sys-color-error: var(--md-ref-palette-error80);
181
+ --md-sys-color-on-error: var(--md-ref-palette-error20);
182
+ --md-sys-color-error-container: var(--md-ref-palette-error30);
183
+ --md-sys-color-on-error-container: var(--md-ref-palette-error90);
184
+ --md-sys-color-surface: var(--md-ref-palette-neutral10);
185
+ --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
186
+ --md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
187
+ --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
188
+ --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral4);
189
+ --md-sys-color-surface-container-low: var(--md-ref-palette-neutral6);
190
+ --md-sys-color-surface-container: var(--md-ref-palette-neutral12);
191
+ --md-sys-color-surface-container-high: var(--md-ref-palette-neutral17);
192
+ --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral22);
193
+ --md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
194
+ --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
195
+ --md-sys-color-background: var(--md-ref-palette-neutral10);
196
+ --md-sys-color-on-background: var(--md-ref-palette-neutral90);
197
+ --md-sys-color-scrim: var(--md-ref-palette-neutral0);
198
+ --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
199
+ --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
200
+ --md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
201
+ }
202
+ }
203
+
204
+ /* ../tokens/dist/typography.css */
4
205
  :root {
5
- --md-sys-color-primary: #6750a4;
6
- --md-sys-color-on-primary: #ffffff;
7
- --md-sys-color-primary-container: #eaddff;
8
- --md-sys-color-on-primary-container: #21005d;
9
- --md-sys-color-secondary: #625b71;
10
- --md-sys-color-on-secondary: #ffffff;
11
- --md-sys-color-secondary-container: #e8def8;
12
- --md-sys-color-on-secondary-container: #1d192b;
13
- --md-sys-color-tertiary: #7d5260;
14
- --md-sys-color-on-tertiary: #ffffff;
15
- --md-sys-color-tertiary-container: #ffd8e4;
16
- --md-sys-color-on-tertiary-container: #31111d;
17
- --md-sys-color-error: #b3261e;
18
- --md-sys-color-on-error: #ffffff;
19
- --md-sys-color-error-container: #f9dedc;
20
- --md-sys-color-on-error-container: #410e0b;
21
- --md-sys-color-surface: #fffbfe;
22
- --md-sys-color-on-surface: #1c1b1f;
23
- --md-sys-color-surface-variant: #e7e0ec;
24
- --md-sys-color-on-surface-variant: #49454f;
25
- --md-sys-color-surface-container-lowest: #ffffff;
26
- --md-sys-color-surface-container-low: #f7f2fa;
27
- --md-sys-color-surface-container: #f3edf7;
28
- --md-sys-color-surface-container-high: #ece6f0;
29
- --md-sys-color-surface-container-highest: #e6e0e9;
30
- --md-sys-color-outline: #79747e;
31
- --md-sys-color-outline-variant: #cac4d0;
32
- --md-sys-color-background: #fffbfe;
33
- --md-sys-color-on-background: #1c1b1f;
34
- --md-sys-color-scrim: #000000;
35
- --md-sys-color-inverse-surface: #313033;
36
- --md-sys-color-inverse-on-surface: #f4eff4;
37
- --md-sys-color-inverse-primary: #d0bcff;
38
206
  --md-sys-typescale-font-family-plain:
39
207
  system-ui,
40
208
  -apple-system,
@@ -104,19 +272,34 @@
104
272
  --md-sys-typescale-label-small-line-height: 1rem;
105
273
  --md-sys-typescale-label-small-weight: 500;
106
274
  --md-sys-typescale-label-small-tracking: 0.5px;
275
+ }
276
+
277
+ /* ../tokens/dist/shape.css */
278
+ :root {
107
279
  --md-sys-shape-corner-none: 0;
108
280
  --md-sys-shape-corner-extra-small: 0.25rem;
109
281
  --md-sys-shape-corner-small: 0.5rem;
110
282
  --md-sys-shape-corner-medium: 0.75rem;
111
283
  --md-sys-shape-corner-large: 1rem;
284
+ --md-sys-shape-corner-large-increased: 1.25rem;
112
285
  --md-sys-shape-corner-extra-large: 1.75rem;
286
+ --md-sys-shape-corner-extra-large-increased: 2rem;
287
+ --md-sys-shape-corner-extra-extra-large: 3rem;
113
288
  --md-sys-shape-corner-full: 624.9375rem;
289
+ }
290
+
291
+ /* ../tokens/dist/elevation.css */
292
+ :root {
114
293
  --md-sys-elevation-level-0: none;
115
294
  --md-sys-elevation-level-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
116
295
  --md-sys-elevation-level-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
117
296
  --md-sys-elevation-level-3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
118
297
  --md-sys-elevation-level-4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
119
298
  --md-sys-elevation-level-5: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
299
+ }
300
+
301
+ /* ../tokens/dist/motion.css */
302
+ :root {
120
303
  --md-sys-motion-duration-short1: 50ms;
121
304
  --md-sys-motion-duration-short2: 100ms;
122
305
  --md-sys-motion-duration-short3: 150ms;
@@ -129,154 +312,189 @@
129
312
  --md-sys-motion-duration-long2: 500ms;
130
313
  --md-sys-motion-duration-long3: 550ms;
131
314
  --md-sys-motion-duration-long4: 600ms;
315
+ --md-sys-motion-duration-extra-long1: 700ms;
316
+ --md-sys-motion-duration-extra-long2: 800ms;
317
+ --md-sys-motion-duration-extra-long3: 900ms;
318
+ --md-sys-motion-duration-extra-long4: 1000ms;
132
319
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
133
320
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
134
321
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
135
322
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
136
323
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
137
324
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
325
+ --md-sys-motion-expressive-fast-spatial-easing: cubic-bezier(0.42, 1.67, 0.21, 0.9);
326
+ --md-sys-motion-expressive-fast-spatial-duration: 350ms;
327
+ --md-sys-motion-expressive-default-spatial-easing: cubic-bezier(0.38, 1.21, 0.22, 1);
328
+ --md-sys-motion-expressive-default-spatial-duration: 500ms;
329
+ --md-sys-motion-expressive-slow-spatial-easing: cubic-bezier(0.39, 1.29, 0.35, 0.98);
330
+ --md-sys-motion-expressive-slow-spatial-duration: 650ms;
331
+ --md-sys-motion-expressive-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1);
332
+ --md-sys-motion-expressive-fast-effects-duration: 150ms;
333
+ --md-sys-motion-expressive-default-effects-easing: cubic-bezier(0.34, 0.8, 0.34, 1);
334
+ --md-sys-motion-expressive-default-effects-duration: 200ms;
335
+ --md-sys-motion-expressive-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1);
336
+ --md-sys-motion-expressive-slow-effects-duration: 300ms;
337
+ --md-sys-motion-standard-fast-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1);
338
+ --md-sys-motion-standard-fast-spatial-duration: 350ms;
339
+ --md-sys-motion-standard-default-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1);
340
+ --md-sys-motion-standard-default-spatial-duration: 500ms;
341
+ --md-sys-motion-standard-slow-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1);
342
+ --md-sys-motion-standard-slow-spatial-duration: 750ms;
343
+ --md-sys-motion-standard-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1);
344
+ --md-sys-motion-standard-fast-effects-duration: 150ms;
345
+ --md-sys-motion-standard-default-effects-easing: cubic-bezier(0.34, 0.8, 0.34, 1);
346
+ --md-sys-motion-standard-default-effects-duration: 200ms;
347
+ --md-sys-motion-standard-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1);
348
+ --md-sys-motion-standard-slow-effects-duration: 300ms;
138
349
  }
139
- .dark {
140
- --md-sys-color-primary: #d0bcff;
141
- --md-sys-color-on-primary: #381e72;
142
- --md-sys-color-primary-container: #4f378b;
143
- --md-sys-color-on-primary-container: #eaddff;
144
- --md-sys-color-secondary: #ccc2dc;
145
- --md-sys-color-on-secondary: #332d41;
146
- --md-sys-color-secondary-container: #4a4458;
147
- --md-sys-color-on-secondary-container: #e8def8;
148
- --md-sys-color-tertiary: #efb8c8;
149
- --md-sys-color-on-tertiary: #492532;
150
- --md-sys-color-tertiary-container: #633b48;
151
- --md-sys-color-on-tertiary-container: #ffd8e4;
152
- --md-sys-color-error: #f2b8b5;
153
- --md-sys-color-on-error: #601410;
154
- --md-sys-color-error-container: #8c1d18;
155
- --md-sys-color-on-error-container: #f9dedc;
156
- --md-sys-color-surface: #1c1b1f;
157
- --md-sys-color-on-surface: #e6e1e5;
158
- --md-sys-color-surface-variant: #49454f;
159
- --md-sys-color-on-surface-variant: #cac4d0;
160
- --md-sys-color-surface-container-lowest: #0f0d13;
161
- --md-sys-color-surface-container-low: #1d1b20;
162
- --md-sys-color-surface-container: #211f26;
163
- --md-sys-color-surface-container-high: #2b2930;
164
- --md-sys-color-surface-container-highest: #36343b;
165
- --md-sys-color-outline: #938f99;
166
- --md-sys-color-outline-variant: #49454f;
167
- --md-sys-color-background: #1c1b1f;
168
- --md-sys-color-on-background: #e6e1e5;
169
- --md-sys-color-scrim: #000000;
170
- --md-sys-color-inverse-surface: #e6e1e5;
171
- --md-sys-color-inverse-on-surface: #313033;
172
- --md-sys-color-inverse-primary: #6750a4;
350
+
351
+ /* ../tokens/dist/tokens.css */
352
+
353
+ /* ../tokens/dist/theme.css */
354
+ @keyframes md-ripple {
355
+ to {
356
+ transform: translate(-50%, -50%) scale(1);
357
+ opacity: 0;
358
+ }
173
359
  }
174
- @media (prefers-color-scheme: dark) {
175
- :root:not(.light) {
176
- --md-sys-color-primary: #d0bcff;
177
- --md-sys-color-on-primary: #381e72;
178
- --md-sys-color-primary-container: #4f378b;
179
- --md-sys-color-on-primary-container: #eaddff;
180
- --md-sys-color-secondary: #ccc2dc;
181
- --md-sys-color-on-secondary: #332d41;
182
- --md-sys-color-secondary-container: #4a4458;
183
- --md-sys-color-on-secondary-container: #e8def8;
184
- --md-sys-color-tertiary: #efb8c8;
185
- --md-sys-color-on-tertiary: #492532;
186
- --md-sys-color-tertiary-container: #633b48;
187
- --md-sys-color-on-tertiary-container: #ffd8e4;
188
- --md-sys-color-error: #f2b8b5;
189
- --md-sys-color-on-error: #601410;
190
- --md-sys-color-error-container: #8c1d18;
191
- --md-sys-color-on-error-container: #f9dedc;
192
- --md-sys-color-surface: #1c1b1f;
193
- --md-sys-color-on-surface: #e6e1e5;
194
- --md-sys-color-surface-variant: #49454f;
195
- --md-sys-color-on-surface-variant: #cac4d0;
196
- --md-sys-color-surface-container-lowest: #0f0d13;
197
- --md-sys-color-surface-container-low: #1d1b20;
198
- --md-sys-color-surface-container: #211f26;
199
- --md-sys-color-surface-container-high: #2b2930;
200
- --md-sys-color-surface-container-highest: #36343b;
201
- --md-sys-color-outline: #938f99;
202
- --md-sys-color-outline-variant: #49454f;
203
- --md-sys-color-background: #1c1b1f;
204
- --md-sys-color-on-background: #e6e1e5;
205
- --md-sys-color-scrim: #000000;
206
- --md-sys-color-inverse-surface: #e6e1e5;
207
- --md-sys-color-inverse-on-surface: #313033;
208
- --md-sys-color-inverse-primary: #6750a4;
360
+ @keyframes md-fade-in {
361
+ from {
362
+ opacity: 0;
363
+ }
364
+ to {
365
+ opacity: 1;
209
366
  }
210
367
  }
211
- body {
212
- background-color: var(--md-sys-color-surface);
213
- color: var(--md-sys-color-on-surface);
214
- margin: 0;
215
- font-family: var(--md-sys-typescale-font-family-plain);
368
+ @keyframes md-fade-out {
369
+ from {
370
+ opacity: 1;
371
+ }
372
+ to {
373
+ opacity: 0;
374
+ }
216
375
  }
217
- @theme { --color-primary: var(--md-sys-color-primary); --color-on-primary: var(--md-sys-color-on-primary); --color-primary-container: var(--md-sys-color-primary-container); --color-on-primary-container: var(--md-sys-color-on-primary-container); --color-secondary: var(--md-sys-color-secondary); --color-on-secondary: var(--md-sys-color-on-secondary); --color-secondary-container: var(--md-sys-color-secondary-container); --color-on-secondary-container: var(--md-sys-color-on-secondary-container); --color-tertiary: var(--md-sys-color-tertiary); --color-on-tertiary: var(--md-sys-color-on-tertiary); --color-tertiary-container: var(--md-sys-color-tertiary-container); --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container); --color-error: var(--md-sys-color-error); --color-on-error: var(--md-sys-color-on-error); --color-error-container: var(--md-sys-color-error-container); --color-on-error-container: var(--md-sys-color-on-error-container); --color-surface: var(--md-sys-color-surface); --color-on-surface: var(--md-sys-color-on-surface); --color-surface-variant: var(--md-sys-color-surface-variant); --color-on-surface-variant: var(--md-sys-color-on-surface-variant); --color-surface-container-lowest: var(--md-sys-color-surface-container-lowest); --color-surface-container-low: var(--md-sys-color-surface-container-low); --color-surface-container: var(--md-sys-color-surface-container); --color-surface-container-high: var(--md-sys-color-surface-container-high); --color-surface-container-highest: var(--md-sys-color-surface-container-highest); --color-outline: var(--md-sys-color-outline); --color-outline-variant: var(--md-sys-color-outline-variant); --color-background: var(--md-sys-color-background); --color-on-background: var(--md-sys-color-on-background); --color-scrim: var(--md-sys-color-scrim); --color-inverse-surface: var(--md-sys-color-inverse-surface); --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface); --color-inverse-primary: var(--md-sys-color-inverse-primary); --shadow-elevation-0: var(--md-sys-elevation-level-0); --shadow-elevation-1: var(--md-sys-elevation-level-1); --shadow-elevation-2: var(--md-sys-elevation-level-2); --shadow-elevation-3: var(--md-sys-elevation-level-3); --shadow-elevation-4: var(--md-sys-elevation-level-4); --shadow-elevation-5: var(--md-sys-elevation-level-5); }
218
- @keyframes ripple {
376
+ @keyframes md-scale-in {
377
+ from {
378
+ opacity: 0;
379
+ transform: scale(0.85);
380
+ }
381
+ to {
382
+ opacity: 1;
383
+ transform: scale(1);
384
+ }
385
+ }
386
+ @keyframes md-scale-out {
387
+ from {
388
+ opacity: 1;
389
+ transform: scale(1);
390
+ }
219
391
  to {
220
- transform: translate(-50%, -50%) scale(1);
221
392
  opacity: 0;
393
+ transform: scale(0.85);
222
394
  }
223
395
  }
224
- @theme { --animate-ripple: ripple 450ms cubic-bezier(0.2, 0, 0, 1); --opacity-8: 0.08; --opacity-12: 0.12; --opacity-32: 0.32; --opacity-38: 0.38; --font-size-display-large: var(--md-sys-typescale-display-large-size); --line-height-display-large: var(--md-sys-typescale-display-large-line-height); --font-size-display-medium: var(--md-sys-typescale-display-medium-size); --line-height-display-medium: var(--md-sys-typescale-display-medium-line-height); --font-size-display-small: var(--md-sys-typescale-display-small-size); --line-height-display-small: var(--md-sys-typescale-display-small-line-height); --font-size-headline-large: var(--md-sys-typescale-headline-large-size); --line-height-headline-large: var(--md-sys-typescale-headline-large-line-height); --font-size-headline-medium: var(--md-sys-typescale-headline-medium-size); --line-height-headline-medium: var(--md-sys-typescale-headline-medium-line-height); --font-size-headline-small: var(--md-sys-typescale-headline-small-size); --line-height-headline-small: var(--md-sys-typescale-headline-small-line-height); --font-size-title-large: var(--md-sys-typescale-title-large-size); --line-height-title-large: var(--md-sys-typescale-title-large-line-height); --font-size-title-medium: var(--md-sys-typescale-title-medium-size); --line-height-title-medium: var(--md-sys-typescale-title-medium-line-height); --font-size-title-small: var(--md-sys-typescale-title-small-size); --line-height-title-small: var(--md-sys-typescale-title-small-line-height); --font-size-body-large: var(--md-sys-typescale-body-large-size); --line-height-body-large: var(--md-sys-typescale-body-large-line-height); --font-size-body-medium: var(--md-sys-typescale-body-medium-size); --line-height-body-medium: var(--md-sys-typescale-body-medium-line-height); --font-size-body-small: var(--md-sys-typescale-body-small-size); --line-height-body-small: var(--md-sys-typescale-body-small-line-height); --font-size-label-large: var(--md-sys-typescale-label-large-size); --line-height-label-large: var(--md-sys-typescale-label-large-line-height); --font-size-label-medium: var(--md-sys-typescale-label-medium-size); --line-height-label-medium: var(--md-sys-typescale-label-medium-line-height); --font-size-label-small: var(--md-sys-typescale-label-small-size); --line-height-label-small: var(--md-sys-typescale-label-small-line-height); --transition-duration-short1: var(--md-sys-motion-duration-short1); --transition-duration-short2: var(--md-sys-motion-duration-short2); --transition-duration-short3: var(--md-sys-motion-duration-short3); --transition-duration-short4: var(--md-sys-motion-duration-short4); --transition-duration-medium1: var(--md-sys-motion-duration-medium1); --transition-duration-medium2: var(--md-sys-motion-duration-medium2); --transition-duration-medium3: var(--md-sys-motion-duration-medium3); --transition-duration-medium4: var(--md-sys-motion-duration-medium4); --transition-duration-long1: var(--md-sys-motion-duration-long1); --transition-duration-long2: var(--md-sys-motion-duration-long2); --transition-duration-long3: var(--md-sys-motion-duration-long3); --transition-duration-long4: var(--md-sys-motion-duration-long4); --ease-standard: var(--md-sys-motion-easing-standard); --ease-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate); --ease-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate); --ease-emphasized: var(--md-sys-motion-easing-emphasized); --ease-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate); --ease-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate); --spacing-appbar-small: 4rem; --spacing-appbar-medium: 7rem; --spacing-appbar-large: 9.5rem; --spacing-drawer: 22.5rem; --spacing-snackbar-max: 35.5rem; --spacing-dialog-max: 35rem; --radius-xs: var(--md-sys-shape-corner-extra-small); --radius-sm: var(--md-sys-shape-corner-small); --radius-md: var(--md-sys-shape-corner-medium); --radius-lg: var(--md-sys-shape-corner-large); --radius-xl: var(--md-sys-shape-corner-extra-large); --radius-full: var(--md-sys-shape-corner-full); }
225
-
226
- /* src/components/Progress/Progress.css */
227
- @keyframes progress-linear-indeterminate-1 {
228
- 0% {
229
- left: -35%;
230
- right: 100%;
396
+ @keyframes md-slide-in-bottom {
397
+ from {
398
+ opacity: 0;
399
+ transform: translateY(100%);
400
+ }
401
+ to {
402
+ opacity: 1;
403
+ transform: translateY(0);
404
+ }
405
+ }
406
+ @keyframes md-slide-out-bottom {
407
+ from {
408
+ opacity: 1;
409
+ transform: translateY(0);
410
+ }
411
+ to {
412
+ opacity: 0;
413
+ transform: translateY(100%);
414
+ }
415
+ }
416
+ @keyframes md-slide-in-right {
417
+ from {
418
+ opacity: 0;
419
+ transform: translateX(100%);
420
+ }
421
+ to {
422
+ opacity: 1;
423
+ transform: translateX(0);
424
+ }
425
+ }
426
+ @keyframes md-slide-out-right {
427
+ from {
428
+ opacity: 1;
429
+ transform: translateX(0);
430
+ }
431
+ to {
432
+ opacity: 0;
433
+ transform: translateX(100%);
231
434
  }
232
- 60% {
233
- left: 100%;
234
- right: -90%;
435
+ }
436
+ @keyframes md-slide-in-left {
437
+ from {
438
+ opacity: 0;
439
+ transform: translateX(-100%);
235
440
  }
236
- 100% {
237
- left: 100%;
238
- right: -90%;
441
+ to {
442
+ opacity: 1;
443
+ transform: translateX(0);
239
444
  }
240
445
  }
241
- @keyframes progress-linear-indeterminate-2 {
242
- 0% {
243
- left: -200%;
244
- right: 100%;
446
+ @keyframes md-slide-out-left {
447
+ from {
448
+ opacity: 1;
449
+ transform: translateX(0);
450
+ }
451
+ to {
452
+ opacity: 0;
453
+ transform: translateX(-100%);
245
454
  }
246
- 60% {
247
- left: 107%;
248
- right: -8%;
455
+ }
456
+ @keyframes md-slide-in-top {
457
+ from {
458
+ opacity: 0;
459
+ transform: translateY(-100%);
249
460
  }
250
- 100% {
251
- left: 107%;
252
- right: -8%;
461
+ to {
462
+ opacity: 1;
463
+ transform: translateY(0);
253
464
  }
254
465
  }
255
- @keyframes progress-circular-rotate {
256
- 0% {
257
- transform: rotate(0deg);
466
+ @keyframes md-slide-out-top {
467
+ from {
468
+ opacity: 1;
469
+ transform: translateY(0);
258
470
  }
259
- 100% {
260
- transform: rotate(360deg);
471
+ to {
472
+ opacity: 0;
473
+ transform: translateY(-100%);
261
474
  }
262
475
  }
263
- @keyframes progress-circular-dash {
264
- 0% {
265
- stroke-dasharray: 1, 200;
266
- stroke-dashoffset: 0;
476
+ @keyframes md-skeleton-pulse {
477
+ 0%, 100% {
478
+ opacity: 1;
267
479
  }
268
480
  50% {
269
- stroke-dasharray: 89, 200;
270
- stroke-dashoffset: -35px;
271
- }
272
- 100% {
273
- stroke-dasharray: 89, 200;
274
- stroke-dashoffset: -124px;
481
+ opacity: 0.4;
275
482
  }
276
483
  }
277
- @theme { --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4) linear infinite; --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite; }
484
+ @theme { --color-primary: var(--md-sys-color-primary); --color-on-primary: var(--md-sys-color-on-primary); --color-primary-container: var(--md-sys-color-primary-container); --color-on-primary-container: var(--md-sys-color-on-primary-container); --color-secondary: var(--md-sys-color-secondary); --color-on-secondary: var(--md-sys-color-on-secondary); --color-secondary-container: var(--md-sys-color-secondary-container); --color-on-secondary-container: var(--md-sys-color-on-secondary-container); --color-tertiary: var(--md-sys-color-tertiary); --color-on-tertiary: var(--md-sys-color-on-tertiary); --color-tertiary-container: var(--md-sys-color-tertiary-container); --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container); --color-error: var(--md-sys-color-error); --color-on-error: var(--md-sys-color-on-error); --color-error-container: var(--md-sys-color-error-container); --color-on-error-container: var(--md-sys-color-on-error-container); --color-surface: var(--md-sys-color-surface); --color-on-surface: var(--md-sys-color-on-surface); --color-surface-variant: var(--md-sys-color-surface-variant); --color-on-surface-variant: var(--md-sys-color-on-surface-variant); --color-surface-container-lowest: var(--md-sys-color-surface-container-lowest); --color-surface-container-low: var(--md-sys-color-surface-container-low); --color-surface-container: var(--md-sys-color-surface-container); --color-surface-container-high: var(--md-sys-color-surface-container-high); --color-surface-container-highest: var(--md-sys-color-surface-container-highest); --color-outline: var(--md-sys-color-outline); --color-outline-variant: var(--md-sys-color-outline-variant); --color-background: var(--md-sys-color-background); --color-on-background: var(--md-sys-color-on-background); --color-scrim: var(--md-sys-color-scrim); --color-inverse-surface: var(--md-sys-color-inverse-surface); --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface); --color-inverse-primary: var(--md-sys-color-inverse-primary); --shadow-elevation-0: var(--md-sys-elevation-level-0); --shadow-elevation-1: var(--md-sys-elevation-level-1); --shadow-elevation-2: var(--md-sys-elevation-level-2); --shadow-elevation-3: var(--md-sys-elevation-level-3); --shadow-elevation-4: var(--md-sys-elevation-level-4); --shadow-elevation-5: var(--md-sys-elevation-level-5); --text-display-large: var(--md-sys-typescale-display-large-size); --text-display-large--line-height: var(--md-sys-typescale-display-large-line-height); --text-display-medium: var(--md-sys-typescale-display-medium-size); --text-display-medium--line-height: var(--md-sys-typescale-display-medium-line-height); --text-display-small: var(--md-sys-typescale-display-small-size); --text-display-small--line-height: var(--md-sys-typescale-display-small-line-height); --text-headline-large: var(--md-sys-typescale-headline-large-size); --text-headline-large--line-height: var(--md-sys-typescale-headline-large-line-height); --text-headline-medium: var(--md-sys-typescale-headline-medium-size); --text-headline-medium--line-height: var(--md-sys-typescale-headline-medium-line-height); --text-headline-small: var(--md-sys-typescale-headline-small-size); --text-headline-small--line-height: var(--md-sys-typescale-headline-small-line-height); --text-title-large: var(--md-sys-typescale-title-large-size); --text-title-large--line-height: var(--md-sys-typescale-title-large-line-height); --text-title-medium: var(--md-sys-typescale-title-medium-size); --text-title-medium--line-height: var(--md-sys-typescale-title-medium-line-height); --text-title-small: var(--md-sys-typescale-title-small-size); --text-title-small--line-height: var(--md-sys-typescale-title-small-line-height); --text-body-large: var(--md-sys-typescale-body-large-size); --text-body-large--line-height: var(--md-sys-typescale-body-large-line-height); --text-body-medium: var(--md-sys-typescale-body-medium-size); --text-body-medium--line-height: var(--md-sys-typescale-body-medium-line-height); --text-body-small: var(--md-sys-typescale-body-small-size); --text-body-small--line-height: var(--md-sys-typescale-body-small-line-height); --text-label-large: var(--md-sys-typescale-label-large-size); --text-label-large--line-height: var(--md-sys-typescale-label-large-line-height); --text-label-medium: var(--md-sys-typescale-label-medium-size); --text-label-medium--line-height: var(--md-sys-typescale-label-medium-line-height); --text-label-small: var(--md-sys-typescale-label-small-size); --text-label-small--line-height: var(--md-sys-typescale-label-small-line-height); --radius-xs: var(--md-sys-shape-corner-extra-small); --radius-sm: var(--md-sys-shape-corner-small); --radius-md: var(--md-sys-shape-corner-medium); --radius-lg: var(--md-sys-shape-corner-large); --radius-lg-increased: var(--md-sys-shape-corner-large-increased); --radius-xl: var(--md-sys-shape-corner-extra-large); --radius-xl-increased: var(--md-sys-shape-corner-extra-large-increased); --radius-2xl: var(--md-sys-shape-corner-extra-extra-large); --radius-full: var(--md-sys-shape-corner-full); --spacing-appbar-small: 4rem; --spacing-appbar-medium: 7rem; --spacing-appbar-large: 7.5rem; --spacing-drawer: 22.5rem; --spacing-snackbar-max: 35.5rem; --spacing-dialog-max: 35rem; --opacity-8: 0.08; --opacity-10: 0.1; --opacity-12: 0.12; --opacity-16: 0.16; --opacity-32: 0.32; --opacity-38: 0.38; --transition-duration-short1: var(--md-sys-motion-duration-short1); --transition-duration-short2: var(--md-sys-motion-duration-short2); --transition-duration-short3: var(--md-sys-motion-duration-short3); --transition-duration-short4: var(--md-sys-motion-duration-short4); --transition-duration-medium1: var(--md-sys-motion-duration-medium1); --transition-duration-medium2: var(--md-sys-motion-duration-medium2); --transition-duration-medium3: var(--md-sys-motion-duration-medium3); --transition-duration-medium4: var(--md-sys-motion-duration-medium4); --transition-duration-long1: var(--md-sys-motion-duration-long1); --transition-duration-long2: var(--md-sys-motion-duration-long2); --transition-duration-long3: var(--md-sys-motion-duration-long3); --transition-duration-long4: var(--md-sys-motion-duration-long4); --transition-duration-extra-long1: var(--md-sys-motion-duration-extra-long1); --transition-duration-extra-long2: var(--md-sys-motion-duration-extra-long2); --transition-duration-extra-long3: var(--md-sys-motion-duration-extra-long3); --transition-duration-extra-long4: var(--md-sys-motion-duration-extra-long4); --ease-standard: var(--md-sys-motion-easing-standard); --ease-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate); --ease-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate); --ease-emphasized: var(--md-sys-motion-easing-emphasized); --ease-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate); --ease-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate); --ease-expressive-fast-spatial: var(--md-sys-motion-expressive-fast-spatial-easing); --ease-expressive-default-spatial: var(--md-sys-motion-expressive-default-spatial-easing); --ease-expressive-slow-spatial: var(--md-sys-motion-expressive-slow-spatial-easing); --ease-expressive-fast-effects: var(--md-sys-motion-expressive-fast-effects-easing); --ease-expressive-default-effects: var(--md-sys-motion-expressive-default-effects-easing); --ease-expressive-slow-effects: var(--md-sys-motion-expressive-slow-effects-easing); --transition-duration-expressive-fast-spatial: var( --md-sys-motion-expressive-fast-spatial-duration ); --transition-duration-expressive-default-spatial: var( --md-sys-motion-expressive-default-spatial-duration ); --transition-duration-expressive-slow-spatial: var( --md-sys-motion-expressive-slow-spatial-duration ); --transition-duration-expressive-fast-effects: var( --md-sys-motion-expressive-fast-effects-duration ); --transition-duration-expressive-default-effects: var( --md-sys-motion-expressive-default-effects-duration ); --transition-duration-expressive-slow-effects: var( --md-sys-motion-expressive-slow-effects-duration ); --ease-spring-standard-fast-spatial: var(--md-sys-motion-standard-fast-spatial-easing); --ease-spring-standard-default-spatial: var(--md-sys-motion-standard-default-spatial-easing); --ease-spring-standard-slow-spatial: var(--md-sys-motion-standard-slow-spatial-easing); --ease-spring-standard-fast-effects: var(--md-sys-motion-standard-fast-effects-easing); --ease-spring-standard-default-effects: var(--md-sys-motion-standard-default-effects-easing); --ease-spring-standard-slow-effects: var(--md-sys-motion-standard-slow-effects-easing); --transition-duration-spring-standard-fast-spatial: var( --md-sys-motion-standard-fast-spatial-duration ); --transition-duration-spring-standard-default-spatial: var( --md-sys-motion-standard-default-spatial-duration ); --transition-duration-spring-standard-slow-spatial: var( --md-sys-motion-standard-slow-spatial-duration ); --transition-duration-spring-standard-fast-effects: var( --md-sys-motion-standard-fast-effects-duration ); --transition-duration-spring-standard-default-effects: var( --md-sys-motion-standard-default-effects-duration ); --transition-duration-spring-standard-slow-effects: var( --md-sys-motion-standard-slow-effects-duration ); --animate-md-ripple: md-ripple 450ms cubic-bezier(0.2, 0, 0, 1); --animate-md-fade-in: md-fade-in var(--md-sys-motion-expressive-default-effects-duration) var(--md-sys-motion-expressive-default-effects-easing) forwards; --animate-md-fade-out: md-fade-out var(--md-sys-motion-standard-fast-effects-duration) var(--md-sys-motion-standard-fast-effects-easing) forwards; --animate-md-scale-in: md-scale-in var(--md-sys-motion-expressive-fast-spatial-duration) var(--md-sys-motion-expressive-fast-spatial-easing) forwards; --animate-md-scale-out: md-scale-out var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; --animate-md-slide-in-bottom: md-slide-in-bottom var(--md-sys-motion-standard-default-spatial-duration) var(--md-sys-motion-standard-default-spatial-easing) forwards; --animate-md-slide-out-bottom: md-slide-out-bottom var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; --animate-md-slide-in-right: md-slide-in-right var(--md-sys-motion-standard-default-spatial-duration) var(--md-sys-motion-standard-default-spatial-easing) forwards; --animate-md-slide-out-right: md-slide-out-right var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; --animate-md-slide-in-left: md-slide-in-left var(--md-sys-motion-standard-default-spatial-duration) var(--md-sys-motion-standard-default-spatial-easing) forwards; --animate-md-slide-out-left: md-slide-out-left var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; --animate-md-slide-in-top: md-slide-in-top var(--md-sys-motion-standard-default-spatial-duration) var(--md-sys-motion-standard-default-spatial-easing) forwards; --animate-md-slide-out-top: md-slide-out-top var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate) forwards; --animate-md-skeleton-pulse: md-skeleton-pulse 700ms ease-in-out infinite; }
485
+
486
+ /* ../tokens/dist/preset.css */
278
487
 
279
488
  /* src/styles.css */
489
+ @layer base {
490
+ body {
491
+ background-color: var(--md-sys-color-surface);
492
+ color: var(--md-sys-color-on-surface);
493
+ margin: 0;
494
+ font-family: var(--md-sys-typescale-font-family-plain);
495
+ }
496
+ }
497
+ @import "./components/Progress/Progress.css";
280
498
  @keyframes menu-enter {
281
499
  from {
282
500
  opacity: 0;
@@ -295,4 +513,5 @@ body {
295
513
  opacity: 0;
296
514
  }
297
515
  }
516
+ @utility btn-transition { transition: border-radius var(--md-sys-motion-expressive-fast-spatial-duration), color var(--md-sys-motion-standard-fast-effects-duration), background-color var(--md-sys-motion-standard-fast-effects-duration), border-color var(--md-sys-motion-standard-fast-effects-duration), opacity var(--md-sys-motion-standard-fast-effects-duration), box-shadow var(--md-sys-motion-standard-fast-effects-duration), outline-color var(--md-sys-motion-standard-fast-effects-duration); }
298
517
  /*# sourceMappingURL=styles.css.map */