suwa-ui 0.0.0-development → 1.0.0-beta.2

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 (2) hide show
  1. package/dist/styles.css +744 -744
  2. package/package.json +110 -105
package/dist/styles.css CHANGED
@@ -1,744 +1,744 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
2
- @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..700&display=swap");
3
- @import url("https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12");
4
- @import "tailwindcss";
5
- @import "tw-animate-css";
6
-
7
- @theme static {
8
- --color-*: initial;
9
- --color-primary: var(--suwa-primary);
10
- --color-on-primary: var(--suwa-on-primary);
11
- --color-primary-container: var(--suwa-primary-container);
12
- --color-on-primary-container: var(--suwa-on-primary-container);
13
- --color-on-primary-container-variant: var(--suwa-on-primary-container-variant);
14
- --color-secondary: var(--suwa-secondary);
15
- --color-on-secondary: var(--suwa-on-secondary);
16
- --color-secondary-container: var(--suwa-secondary-container);
17
- --color-on-secondary-container: var(--suwa-on-secondary-container);
18
- --color-on-secondary-container-variant: var(--suwa-on-secondary-container-variant);
19
- --color-accent: var(--suwa-accent);
20
- --color-on-accent: var(--suwa-on-accent);
21
- --color-accent-container: var(--suwa-accent-container);
22
- --color-on-accent-container: var(--suwa-on-accent-container);
23
- --color-on-accent-container-variant: var(--suwa-on-accent-container-variant);
24
- --color-error: var(--suwa-error);
25
- --color-on-error: var(--suwa-on-error);
26
- --color-error-container: var(--suwa-error-container);
27
- --color-on-error-container: var(--suwa-on-error-container);
28
- --color-on-error-container-variant: var(--suwa-on-error-container-variant);
29
- --color-warning: var(--suwa-warning);
30
- --color-on-warning: var(--suwa-on-warning);
31
- --color-warning-container: var(--suwa-warning-container);
32
- --color-on-warning-container: var(--suwa-on-warning-container);
33
- --color-on-warning-container-variant: var(--suwa-on-warning-container-variant);
34
- --color-success: var(--suwa-success);
35
- --color-on-success: var(--suwa-on-success);
36
- --color-success-container: var(--suwa-success-container);
37
- --color-on-success-container: var(--suwa-on-success-container);
38
- --color-on-success-container-variant: var(--suwa-on-success-container-variant);
39
- --color-surface: var(--suwa-surface);
40
- --color-surface-dim: var(--suwa-surface-dim);
41
- --color-surface-bright: var(--suwa-surface-bright);
42
- --color-surface-container-lowest: var(--suwa-surface-container-lowest);
43
- --color-surface-container-low: var(--suwa-surface-container-low);
44
- --color-surface-container-mid: var(--suwa-surface-container-mid);
45
- --color-surface-container-high: var(--suwa-surface-container-high);
46
- --color-surface-container-highest: var(--suwa-surface-container-highest);
47
- --color-on-surface: var(--suwa-on-surface);
48
- --color-on-surface-variant: var(--suwa-on-surface-variant);
49
- --color-outline: var(--suwa-outline);
50
- --color-outline-variant: var(--suwa-outline-variant);
51
- --color-scrim: var(--suwa-scrim);
52
- --color-shadow: var(--suwa-shadow);
53
- --color-highlight: var(--suwa-highlight);
54
- --color-glass-fill-lowest: var(--suwa-glass-fill-lowest);
55
- --color-glass-fill-low: var(--suwa-glass-fill-low);
56
- --color-glass-fill-medium: var(--suwa-glass-fill-medium);
57
- --color-glass-fill-high: var(--suwa-glass-fill-high);
58
- --color-glass-fill-highest: var(--suwa-glass-fill-highest);
59
- --color-on-glass: var(--suwa-on-glass);
60
- --color-on-glass-variant: var(--suwa-on-glass-variant);
61
- --color-inverse-glass-fill: var(--suwa-inverse-glass-fill);
62
- --color-inverse-on-glass: var(--suwa-inverse-on-glass);
63
- --color-glass-outline-lowest: var(--suwa-glass-outline-lowest);
64
- --color-glass-outline-low: var(--suwa-glass-outline-low);
65
- --color-glass-outline-medium: var(--suwa-glass-outline-medium);
66
- --color-glass-outline-high: var(--suwa-glass-outline-high);
67
- --color-glass-outline-highest: var(--suwa-glass-outline-highest);
68
-
69
- --spacing-*: initial;
70
- --spacing-3xs: var(--suwa-spacing-3xs);
71
- --spacing-2xs: var(--suwa-spacing-2xs);
72
- --spacing-xs: var(--suwa-spacing-xs);
73
- --spacing-sm: var(--suwa-spacing-sm);
74
- --spacing-md: var(--suwa-spacing-md);
75
- --spacing-lg: var(--suwa-spacing-lg);
76
- --spacing-xl: var(--suwa-spacing-xl);
77
- --spacing-2xl: var(--suwa-spacing-2xl);
78
- --spacing-3xl: var(--suwa-spacing-3xl);
79
-
80
- --font-*: initial;
81
- --font-display: var(--suwa-font-display);
82
- --font-heading: var(--suwa-font-heading);
83
- --font-body: var(--suwa-font-body);
84
-
85
- --text-*: initial;
86
- --text-xs: var(--suwa-text-xs);
87
- --text-sm: var(--suwa-text-sm);
88
- --text-base: var(--suwa-text-base);
89
- --text-lg: var(--suwa-text-lg);
90
- --text-xl: var(--suwa-text-xl);
91
- --text-2xl: var(--suwa-text-2xl);
92
- --text-3xl: var(--suwa-text-3xl);
93
- --text-4xl: var(--suwa-text-4xl);
94
-
95
- --blur-*: initial;
96
- --blur-xs: var(--suwa-blur-xs);
97
- --blur-sm: var(--suwa-blur-sm);
98
- --blur-md: var(--suwa-blur-md);
99
- --blur-lg: var(--suwa-blur-lg);
100
- --blur-xl: var(--suwa-blur-xl);
101
-
102
- --shadow-*: initial;
103
- --shadow-xs: var(--suwa-shadow-xs);
104
- --shadow-sm: var(--suwa-shadow-sm);
105
- --shadow-md: var(--suwa-shadow-md);
106
- --shadow-lg: var(--suwa-shadow-lg);
107
- --shadow-xl: var(--suwa-shadow-xl);
108
-
109
- --drop-shadow-*: initial;
110
- --drop-shadow-xs: var(--suwa-drop-shadow-xs);
111
- --drop-shadow-sm: var(--suwa-drop-shadow-sm);
112
- --drop-shadow-md: var(--suwa-drop-shadow-md);
113
- --drop-shadow-lg: var(--suwa-drop-shadow-lg);
114
- --drop-shadow-xl: var(--suwa-drop-shadow-xl);
115
-
116
- --inset-shadow-*: initial;
117
- --inset-shadow-xs: var(--suwa-inset-shadow-xs);
118
- --inset-shadow-sm: var(--suwa-inset-shadow-sm);
119
- --inset-shadow-md: var(--suwa-inset-shadow-md);
120
- --inset-shadow-lg: var(--suwa-inset-shadow-lg);
121
- --inset-shadow-xl: var(--suwa-inset-shadow-xl);
122
-
123
- --inset-shadow-raised-xs: var(--suwa-inset-raised-xs);
124
- --inset-shadow-raised-sm: var(--suwa-inset-raised-sm);
125
- --inset-shadow-raised-md: var(--suwa-inset-raised-md);
126
- --inset-shadow-raised-lg: var(--suwa-inset-raised-lg);
127
- --inset-shadow-raised-xl: var(--suwa-inset-raised-xl);
128
- }
129
-
130
- :root {
131
- color-scheme: light dark;
132
- --amber-100: #FFEDD4FF;
133
- --amber-200: #FFDCA8FF;
134
- --amber-300: #FFCA7DFF;
135
- --amber-400: #FFB951FF;
136
- --amber-500: #FFA726FF;
137
- --amber-600: #CC861EFF;
138
- --amber-700: #996417FF;
139
- --amber-800: #66430FFF;
140
- --amber-900: #332108FF;
141
- --black-100: #D9D9D9FF;
142
- --black-200: #B3B3B3FF;
143
- --black-300: #8D8D8DFF;
144
- --black-400: #676767FF;
145
- --black-500: #414141FF;
146
- --black-600: #343434FF;
147
- --black-700: #272727FF;
148
- --black-800: #1A1A1AFF;
149
- --black-900: #0D0D0DFF;
150
- --blue-100: #CCE4F5FF;
151
- --blue-200: #99C9EBFF;
152
- --blue-300: #66ADE0FF;
153
- --blue-400: #3392D6FF;
154
- --blue-500: #0077CCFF;
155
- --blue-600: #005FA3FF;
156
- --blue-700: #00477AFF;
157
- --blue-800: #003052FF;
158
- --blue-900: #001829FF;
159
- --dark-blue-100: #CCD6DAFF;
160
- --dark-blue-200: #9AACB5FF;
161
- --dark-blue-300: #678391FF;
162
- --dark-blue-400: #35596CFF;
163
- --dark-blue-500: #023047FF;
164
- --dark-blue-600: #022639FF;
165
- --dark-blue-700: #011D2BFF;
166
- --dark-blue-800: #01131CFF;
167
- --dark-blue-900: #000A0EFF;
168
- --green-100: #DAECDAFF;
169
- --green-200: #B4D8B6FF;
170
- --green-300: #8FC591FF;
171
- --green-400: #69B16DFF;
172
- --green-500: #449E48FF;
173
- --green-600: #367E3AFF;
174
- --green-700: #295F2BFF;
175
- --green-800: #1B3F1DFF;
176
- --green-900: #0E200EFF;
177
- --lime-100: #E7E9D3FF;
178
- --orange-100: #FEE7CCFF;
179
- --orange-200: #FDCE99FF;
180
- --orange-300: #FCB666FF;
181
- --orange-400: #FB9D33FF;
182
- --orange-500: #FA8500FF;
183
- --orange-600: #C86A00FF;
184
- --orange-700: #965000FF;
185
- --orange-800: #643500FF;
186
- --orange-900: #321B00FF;
187
- --lime-200: #CFD4A7FF;
188
- --lime-300: #B7BE7AFF;
189
- --lime-400: #9FA94EFF;
190
- --lime-500: #879322FF;
191
- --lime-600: #6C761BFF;
192
- --lime-700: #515814FF;
193
- --lime-800: #363B0EFF;
194
- --lime-900: #1B1D07FF;
195
- --pink-100: #FED9E9FF;
196
- --pink-200: #FDB2D4FF;
197
- --pink-300: #FB8CBEFF;
198
- --pink-400: #FA65A9FF;
199
- --pink-500: #F93F93FF;
200
- --pink-600: #C73276FF;
201
- --pink-700: #952658FF;
202
- --pink-800: #64193BFF;
203
- --pink-900: #320D1DFF;
204
- --purple-100: #EBD4EFFF;
205
- --red-100: #FDD9D7FF;
206
- --red-200: #FBB4AFFF;
207
- --red-300: #F88E86FF;
208
- --red-400: #F6695EFF;
209
- --red-500: #F44336FF;
210
- --red-600: #C3362BFF;
211
- --red-700: #922820FF;
212
- --red-800: #621B16FF;
213
- --red-900: #310D0BFF;
214
- --purple-200: #D7A9DFFF;
215
- --purple-300: #C47DD0FF;
216
- --purple-400: #B052C0FF;
217
- --purple-500: #9C27B0FF;
218
- --purple-600: #7D1F8DFF;
219
- --purple-700: #5E176AFF;
220
- --purple-800: #3E1046FF;
221
- --purple-900: #1F0823FF;
222
- --rose-100: #FDDCE2FF;
223
- --rose-200: #FBB9C4FF;
224
- --rose-300: #F897A7FF;
225
- --rose-400: #F67489FF;
226
- --rose-500: #F4516CFF;
227
- --rose-600: #C34156FF;
228
- --rose-700: #923141FF;
229
- --rose-800: #62202BFF;
230
- --rose-900: #311016FF;
231
- --sky-blue-100: #D3ECF2FF;
232
- --sky-blue-200: #A6D8E4FF;
233
- --sky-blue-300: #7AC5D7FF;
234
- --sky-blue-400: #4DB1C9FF;
235
- --sky-blue-500: #219EBCFF;
236
- --sky-blue-600: #1A7E96FF;
237
- --sky-blue-700: #145F71FF;
238
- --sky-blue-800: #0D3F4BFF;
239
- --sky-blue-900: #072026FF;
240
- --teal-100: #D0EEEBFF;
241
- --violet-100: #E5DEF7FF;
242
- --violet-200: #CABEEFFF;
243
- --violet-300: #B09DE6FF;
244
- --violet-400: #957DDEFF;
245
- --violet-500: #7B5CD6FF;
246
- --violet-600: #624AABFF;
247
- --violet-700: #4A3780FF;
248
- --violet-800: #312556FF;
249
- --violet-900: #19122BFF;
250
- --teal-200: #A1DCD7FF;
251
- --teal-300: #72CBC3FF;
252
- --teal-400: #43B9AFFF;
253
- --teal-500: #14A89BFF;
254
- --teal-600: #10867CFF;
255
- --teal-700: #0C655DFF;
256
- --teal-800: #08433EFF;
257
- --teal-900: #04221FFF;
258
- --white-100: #FAFAFAFF;
259
- --white-200: #F5F5F5FF;
260
- --white-300: #EEEEEEFF;
261
- --white-400: #E0E0E0FF;
262
- --white-500: #BDBDBDFF;
263
- --white-600: #979797FF;
264
- --white-700: #717171FF;
265
- --white-800: #4C4C4CFF;
266
- --white-900: #262626FF;
267
- --yellow-100: #FFF3CDFF;
268
- --yellow-200: #FFE69CFF;
269
- --yellow-300: #FFDA6AFF;
270
- --yellow-400: #FFCD39FF;
271
- --yellow-500: #FFC107FF;
272
- --yellow-600: #CC9A06FF;
273
- --yellow-700: #997404FF;
274
- --yellow-800: #664D03FF;
275
- --yellow-900: #332701FF;
276
-
277
- /* Primary colors */
278
- --suwa-primary: light-dark(var(--sky-blue-500), var(--sky-blue-400));
279
- --suwa-on-primary: light-dark(var(--white-200), var(--black-700));
280
- --suwa-primary-container: light-dark(var(--sky-blue-200), var(--sky-blue-800));
281
- --suwa-on-primary-container: light-dark(var(--sky-blue-800), var(--sky-blue-300));
282
- --suwa-on-primary-container-variant: light-dark(var(--sky-blue-700), var(--sky-blue-100));
283
-
284
- /* Secondary colors */
285
- --suwa-secondary: light-dark(var(--dark-blue-500), var(--sky-blue-200));
286
- --suwa-on-secondary: light-dark(var(--white-200), var(--black-700));
287
- --suwa-secondary-container: light-dark(var(--dark-blue-100), var(--dark-blue-800));
288
- --suwa-on-secondary-container: light-dark(var(--dark-blue-800), var(--dark-blue-300));
289
- --suwa-on-secondary-container-variant: light-dark(var(--dark-blue-700), var(--dark-blue-100));
290
-
291
- /* Accent colors */
292
- --suwa-accent: light-dark(var(--orange-500), var(--orange-400));
293
- --suwa-on-accent: light-dark(var(--white-200), var(--black-700));
294
- --suwa-accent-container: light-dark(var(--orange-200), var(--orange-800));
295
- --suwa-on-accent-container: light-dark(var(--orange-800), var(--orange-300));
296
- --suwa-on-accent-container-variant: light-dark(var(--orange-700), var(--orange-100));
297
-
298
- /* Error colors */
299
- --suwa-error: var(--red-500);
300
- --suwa-on-error: light-dark(var(--white-200), var(--black-700));
301
- --suwa-error-container: light-dark(var(--red-200), var(--red-800));
302
- --suwa-on-error-container: light-dark(var(--red-800), var(--red-300));
303
- --suwa-on-error-container-variant: light-dark(var(--red-600), var(--red-100));
304
-
305
- /* Success colors */
306
- --suwa-success: light-dark(var(--green-500), var(--green-300));
307
- --suwa-on-success: light-dark(var(--white-200), var(--black-700));
308
- --suwa-success-container: light-dark(var(--green-200), var(--green-700));
309
- --suwa-on-success-container: light-dark(var(--green-800), var(--green-300));
310
- --suwa-on-success-container-variant: light-dark(var(--green-600), var(--green-100));
311
-
312
- /* Warning colors */
313
- --suwa-warning: var(--amber-500);
314
- --suwa-on-warning: light-dark(var(--white-200), var(--black-700));
315
- --suwa-warning-container: light-dark(var(--amber-200), var(--amber-800));
316
- --suwa-on-warning-container: light-dark(var(--amber-800), var(--amber-300));
317
- --suwa-on-warning-container-variant: light-dark(var(--amber-600), var(--amber-100));
318
-
319
- /* Surface colors */
320
- --suwa-surface-dim: light-dark(var(--white-300), var(--black-900));
321
- --suwa-surface: light-dark(var(--white-200), var(--black-800));
322
- --suwa-surface-bright: light-dark(var(--white-100), var(--black-700));
323
- --suwa-surface-container-lowest: light-dark(var(--white-100), var(--black-700));
324
- --suwa-surface-container-low: light-dark(var(--white-100), var(--black-600));
325
- --suwa-surface-container-mid: light-dark(var(--white-100), var(--black-500));
326
- --suwa-surface-container-high: light-dark(var(--white-100), var(--black-400));
327
- --suwa-surface-container-highest: light-dark(var(--white-100), var(--black-300));
328
- --suwa-on-surface: light-dark(var(--black-900), var(--white-100));
329
- --suwa-on-surface-variant: light-dark(var(--black-400), var(--white-600));
330
- --suwa-outline: light-dark(var(--black-300), var(--black-400));
331
- --suwa-outline-variant: light-dark(var(--black-500), var(--black-600));
332
-
333
- /* System colors */
334
- --suwa-scrim: #00000059;
335
- --suwa-shadow: light-dark(#00000040, #00000080);
336
- --suwa-highlight: light-dark(#FFFFFF59, #FFFFFF26);
337
-
338
- /* Glass colors */
339
- --suwa-glass-fill-lowest: light-dark(#FFFFFF14, #19191926);
340
- --suwa-glass-fill-low: light-dark(#FFFFFF1F, #19191933);
341
- --suwa-glass-fill-medium: light-dark(#FFFFFF29, #19191940);
342
- --suwa-glass-fill-high: light-dark(#FFFFFF33, #1919194D);
343
- --suwa-glass-fill-highest: light-dark(#FFFFFF40, #19191959);
344
- --suwa-on-glass: light-dark(var(--black-400), var(--white-400));
345
- --suwa-on-glass-variant: light-dark(var(--black-700), var(--white-700));
346
- --suwa-inverse-glass-fill: light-dark(#1E1E1EFF, #ECEEF0FF);
347
- --suwa-inverse-on-glass: light-dark(var(--white-400), var(--black-400));
348
-
349
- --suwa-glass-outline-lowest: light-dark(#FFFFFF66, #FFFFFF33);
350
- --suwa-glass-outline-low: light-dark(#FFFFFF80, #FFFFFF4D);
351
- --suwa-glass-outline-medium: light-dark(#FFFFFF99, #FFFFFF66);
352
- --suwa-glass-outline-high: light-dark(#FFFFFFB2, #FFFFFF80);
353
- --suwa-glass-outline-highest: light-dark(#FFFFFFCC, #FFFFFF99);
354
-
355
- --suwa-spacing-3xs: clamp(0.1875rem, 0.1619rem + 0.1136vw, 0.25rem);
356
- --suwa-spacing-2xs: clamp(0.375rem, 0.3239rem + 0.2273vw, 0.5rem);
357
- --suwa-spacing-xs: clamp(0.5625rem, 0.4858rem + 0.3409vw, 0.75rem);
358
- --suwa-spacing-sm: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
359
- --suwa-spacing-md: clamp(1.125rem, 0.9716rem + 0.6818vw, 1.5rem);
360
- --suwa-spacing-lg: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
361
- --suwa-spacing-xl: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);
362
- --suwa-spacing-2xl: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);
363
- --suwa-spacing-3xl: clamp(4.5rem, 3.8864rem + 2.7273vw, 6rem);
364
- --suwa-spacing-3xs-2xs: clamp(0.1875rem, 0.0597rem + 0.5682vw, 0.5rem);
365
- --suwa-spacing-2xs-xs: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
366
- --suwa-spacing-xs-s: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
367
- --suwa-spacing-s-m: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
368
- --suwa-spacing-m-l: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
369
- --suwa-spacing-l-xl: clamp(1.5rem, 0.8864rem + 2.7273vw, 3rem);
370
- --suwa-spacing-xl-2xl: clamp(2.25rem, 1.5341rem + 3.1818vw, 4rem);
371
- --suwa-spacing-2xl-3xl: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
372
-
373
- --suwa-font-display: "Sora", sans-serif;
374
- --suwa-font-heading: "Space Grotesk", sans-serif;
375
- --suwa-font-body: "IBM Plex Sans", sans-serif;
376
-
377
- --suwa-text-xs: clamp(0.5926rem, 0.5509rem + 0.1852vw, 0.6944rem);
378
- --suwa-text-sm: clamp(0.6667rem, 0.5985rem + 0.303vw, 0.8333rem);
379
- --suwa-text-base: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
380
- --suwa-text-lg: clamp(0.8438rem, 0.698rem + 0.6477vw, 1.2rem);
381
- --suwa-text-xl: clamp(0.9492rem, 0.7484rem + 0.8923vw, 1.44rem);
382
- --suwa-text-2xl: clamp(1.0679rem, 0.7978rem + 1.2002vw, 1.728rem);
383
- --suwa-text-3xl: clamp(1.2014rem, 0.8445rem + 1.5859vw, 2.0736rem);
384
- --suwa-text-4xl: clamp(1.3515rem, 0.8865rem + 2.0669vw, 2.4883rem);
385
-
386
- --suwa-blur-xs: blur(8px);
387
- --suwa-blur-sm: blur(12px);
388
- --suwa-blur-md: blur(16px);
389
- --suwa-blur-lg: blur(20px);
390
- --suwa-blur-xl: blur(24px);
391
-
392
- --suwa-shadow-xs: 0px 1px 2px 0 theme(--color-shadow);
393
- --suwa-shadow-sm: 0px 2px 4px 0 theme(--color-shadow);
394
- --suwa-shadow-md: 0px 4px 8px 0 theme(--color-shadow);
395
- --suwa-shadow-lg: 0px 8px 16px 0 theme(--color-shadow);
396
- --suwa-shadow-xl: 0px 16px 24px 0 theme(--color-shadow);
397
-
398
- --suwa-drop-shadow-xs: 0px 1px 2px 0 theme(--color-shadow);
399
- --suwa-drop-shadow-sm: 0px 2px 4px 0 theme(--color-shadow);
400
- --suwa-drop-shadow-md: 0px 4px 8px 0 theme(--color-shadow);
401
- --suwa-drop-shadow-lg: 0px 8px 16px 0 theme(--color-shadow);
402
- --suwa-drop-shadow-xl: 0px 16px 24px 0 theme(--color-shadow);
403
-
404
- --suwa-inset-shadow-xs: inset 0 1px 2px 0 theme(--color-shadow);
405
- --suwa-inset-shadow-sm: inset 0 2px 4px 0 theme(--color-shadow);
406
- --suwa-inset-shadow-md: inset 0 4px 8px 0 theme(--color-shadow);
407
- --suwa-inset-shadow-lg: inset 0 6px 12px 0 theme(--color-shadow);
408
- --suwa-inset-shadow-xl: inset 0 8px 16px 0 theme(--color-shadow);
409
-
410
- --suwa-inset-raised-xs: inset 0px -1px 2px theme(--color-shadow), inset 0px 1px 4px theme(--color-highlight), inset 0px 1px 2px theme(--color-highlight);
411
- --suwa-inset-raised-sm: inset 0px -2px 3px theme(--color-shadow), inset 0px 2px 8px theme(--color-highlight), inset 0px 2px 4px theme(--color-highlight);
412
- --suwa-inset-raised-md: inset 0px -3px 4px theme(--color-shadow), inset 0px 3px 12px theme(--color-highlight), inset 0px 3px 6px theme(--color-highlight);
413
- --suwa-inset-raised-lg: inset 0px -4px 6px theme(--color-shadow), inset 0px 4px 16px theme(--color-highlight), inset 0px 4px 8px theme(--color-highlight);
414
- --suwa-inset-raised-xl: inset 0px -6px 8px theme(--color-shadow), inset 0px 6px 20px theme(--color-highlight), inset 0px 6px 8px theme(--color-highlight);
415
- }
416
-
417
- [data-theme="light"] {
418
- color-scheme: light;
419
- }
420
-
421
- [data-theme="dark"] {
422
- color-scheme: dark;
423
- }
424
-
425
- @utility gradient-border-* {
426
- position: relative;
427
-
428
- &::before {
429
- position: absolute;
430
- inset: 0;
431
- padding: 1px;
432
- pointer-events: none;
433
- content: "";
434
- background: linear-gradient(
435
- to bottom right,
436
- --value(--color- *) 0%,
437
- transparent 60%
438
- );
439
- border-radius: inherit;
440
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
441
- linear-gradient(#fff 0 0);
442
- -webkit-mask-composite: xor;
443
- mask-composite: exclude;
444
- }
445
- }
446
-
447
- @utility style-text-* {
448
- font-family: var(--text-font);
449
- font-size: var(--text-size);
450
- font-weight: var(--text-weight);
451
- line-height: var(--text-leading, normal);
452
- letter-spacing: normal;
453
- }
454
-
455
- @utility style-text-default-5 {
456
- --text-font: var(--font-body);
457
- --text-weight: 500;
458
- --text-size: var(--text-4xl);
459
- }
460
-
461
- @utility style-text-default-4 {
462
- --text-font: var(--font-body);
463
- --text-weight: 500;
464
- --text-size: var(--text-3xl);
465
- }
466
-
467
- @utility style-text-default-3 {
468
- --text-font: var(--font-body);
469
- --text-weight: 500;
470
- --text-size: var(--text-2xl);
471
- }
472
-
473
- @utility style-text-default-2 {
474
- --text-font: var(--font-body);
475
- --text-weight: 500;
476
- --text-size: var(--text-xl);
477
- }
478
-
479
- @utility style-text-default-1 {
480
- --text-font: var(--font-body);
481
- --text-weight: 500;
482
- --text-size: var(--text-lg);
483
- }
484
-
485
- @utility style-text-default-0 {
486
- --text-font: var(--font-body);
487
- --text-weight: 500;
488
- --text-size: var(--text-base);
489
- }
490
-
491
- @utility style-text-default--1 {
492
- --text-font: var(--font-body);
493
- --text-weight: 500;
494
- --text-size: var(--text-sm);
495
- }
496
-
497
- @utility style-text-default--2 {
498
- --text-font: var(--font-body);
499
- --text-weight: 500;
500
- --text-size: var(--text-xs);
501
- }
502
-
503
- @utility style-text-prose-5 {
504
- --text-font: var(--font-body);
505
- --text-weight: 400;
506
- --text-size: var(--text-4xl);
507
- --text-leading: 160%;
508
- }
509
-
510
- @utility style-text-prose-4 {
511
- --text-font: var(--font-body);
512
- --text-weight: 400;
513
- --text-size: var(--text-3xl);
514
- --text-leading: 160%;
515
- }
516
-
517
- @utility style-text-prose-3 {
518
- --text-font: var(--font-body);
519
- --text-weight: 400;
520
- --text-size: var(--text-2xl);
521
- --text-leading: 160%;
522
- }
523
-
524
- @utility style-text-prose-2 {
525
- --text-font: var(--font-body);
526
- --text-weight: 400;
527
- --text-size: var(--text-xl);
528
- --text-leading: 160%;
529
- }
530
-
531
- @utility style-text-prose-1 {
532
- --text-font: var(--font-body);
533
- --text-weight: 400;
534
- --text-size: var(--text-lg);
535
- --text-leading: 160%;
536
- }
537
-
538
- @utility style-text-prose-0 {
539
- --text-font: var(--font-body);
540
- --text-weight: 400;
541
- --text-size: var(--text-base);
542
- --text-leading: 160%;
543
- }
544
-
545
- @utility style-text-prose--1 {
546
- --text-font: var(--font-body);
547
- --text-weight: 400;
548
- --text-size: var(--text-sm);
549
- --text-leading: 160%;
550
- }
551
-
552
- @utility style-text-prose--2 {
553
- --text-font: var(--font-body);
554
- --text-weight: 400;
555
- --text-size: var(--text-xs);
556
- --text-leading: 160%;
557
- }
558
-
559
- @utility style-text-strong-5 {
560
- --text-font: var(--font-heading);
561
- --text-weight: 700;
562
- --text-size: var(--text-4xl);
563
- --text-leading: 120%;
564
- }
565
-
566
- @utility style-text-strong-4 {
567
- --text-font: var(--font-heading);
568
- --text-weight: 700;
569
- --text-size: var(--text-3xl);
570
- --text-leading: 120%;
571
- }
572
-
573
- @utility style-text-strong-3 {
574
- --text-font: var(--font-heading);
575
- --text-weight: 700;
576
- --text-size: var(--text-2xl);
577
- --text-leading: 120%;
578
- }
579
-
580
- @utility style-text-strong-2 {
581
- --text-font: var(--font-heading);
582
- --text-weight: 700;
583
- --text-size: var(--text-xl);
584
- --text-leading: 120%;
585
- }
586
-
587
- @utility style-text-strong-1 {
588
- --text-font: var(--font-heading);
589
- --text-weight: 700;
590
- --text-size: var(--text-lg);
591
- --text-leading: 120%;
592
- }
593
-
594
- @utility style-text-strong-0 {
595
- --text-font: var(--font-heading);
596
- --text-weight: 700;
597
- --text-size: var(--text-base);
598
- --text-leading: 120%;
599
- }
600
-
601
- @utility style-text-strong--1 {
602
- --text-font: var(--font-heading);
603
- --text-weight: 700;
604
- --text-size: var(--text-sm);
605
- --text-leading: 120%;
606
- }
607
-
608
- @utility style-text-strong--2 {
609
- --text-font: var(--font-heading);
610
- --text-weight: 700;
611
- --text-size: var(--text-xs);
612
- --text-leading: 120%;
613
- }
614
-
615
- @utility glass-1 {
616
- background-color: var(--glass-fill-lowest);
617
- backdrop-filter: var(--blur-1);
618
- position: relative;
619
- box-shadow: 1px 1px 2px 0 var(--shadow);
620
- color: var(--on-glass);
621
-
622
- &::before {
623
- position: absolute;
624
- inset: 0;
625
- padding: 1px;
626
- pointer-events: none;
627
- content: "";
628
- background: linear-gradient(
629
- to bottom right,
630
- var(--glass-outline-lowest) 0%,
631
- transparent 60%
632
- );
633
- border-radius: inherit;
634
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
635
- linear-gradient(#fff 0 0);
636
- -webkit-mask-composite: xor;
637
- mask-composite: exclude;
638
- }
639
- }
640
-
641
- @utility glass-2 {
642
- background-color: var(--glass-fill-low);
643
- backdrop-filter: var(--blur-2);
644
- position: relative;
645
- box-shadow: 2px 2px 4px 0 var(--shadow);
646
- color: var(--on-glass);
647
-
648
- &::before {
649
- position: absolute;
650
- inset: 0;
651
- padding: 1px;
652
- pointer-events: none;
653
- content: "";
654
- background: linear-gradient(
655
- to bottom right,
656
- var(--glass-outline-low) 0%,
657
- transparent 60%
658
- );
659
- border-radius: inherit;
660
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
661
- linear-gradient(#fff 0 0);
662
- -webkit-mask-composite: xor;
663
- mask-composite: exclude;
664
- }
665
- }
666
-
667
- @utility glass-3 {
668
- background-color: var(--glass-fill-medium);
669
- backdrop-filter: var(--blur-3);
670
- position: relative;
671
- box-shadow: 4px 4px 8px 0 var(--shadow);
672
- color: var(--on-glass);
673
-
674
- &::before {
675
- position: absolute;
676
- inset: 0;
677
- padding: 1px;
678
- pointer-events: none;
679
- content: "";
680
- background: linear-gradient(
681
- to bottom right,
682
- var(--glass-outline-medium) 0%,
683
- transparent 60%
684
- );
685
- border-radius: inherit;
686
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
687
- linear-gradient(#fff 0 0);
688
- -webkit-mask-composite: xor;
689
- mask-composite: exclude;
690
- }
691
- }
692
-
693
- @utility glass-4 {
694
- background-color: var(--glass-fill-high);
695
- backdrop-filter: var(--blur-4);
696
- position: relative;
697
- box-shadow: 8px 8px 16px 0 var(--shadow);
698
- color: var(--on-glass);
699
-
700
- &::before {
701
- position: absolute;
702
- inset: 0;
703
- padding: 1px;
704
- pointer-events: none;
705
- content: "";
706
- background: linear-gradient(
707
- to bottom right,
708
- var(--glass-outline-high) 0%,
709
- transparent 60%
710
- );
711
- border-radius: inherit;
712
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
713
- linear-gradient(#fff 0 0);
714
- -webkit-mask-composite: xor;
715
- mask-composite: exclude;
716
- }
717
- }
718
-
719
- @utility glass-5 {
720
- background-color: var(--glass-fill-highest);
721
- backdrop-filter: var(--blur-5);
722
- position: relative;
723
- box-shadow: 16px 16px 32px 0 var(--shadow);
724
- color: var(--on-glass);
725
-
726
- &::before {
727
- position: absolute;
728
- inset: 0;
729
- padding: 1px;
730
- pointer-events: none;
731
- content: "";
732
- background: linear-gradient(
733
- to bottom right,
734
- var(--glass-outline-highest) 0%,
735
- transparent 60%
736
- );
737
- border-radius: inherit;
738
- -webkit-mask: linear-gradient(#fff 0 0) content-box,
739
- linear-gradient(#fff 0 0);
740
- -webkit-mask-composite: xor;
741
- mask-composite: exclude;
742
- }
743
- }
744
-
1
+ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
2
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..700&display=swap");
3
+ @import url("https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12");
4
+ @import "tailwindcss";
5
+ @import "tw-animate-css";
6
+
7
+ @theme static {
8
+ --color-*: initial;
9
+ --color-primary: var(--suwa-primary);
10
+ --color-on-primary: var(--suwa-on-primary);
11
+ --color-primary-container: var(--suwa-primary-container);
12
+ --color-on-primary-container: var(--suwa-on-primary-container);
13
+ --color-on-primary-container-variant: var(--suwa-on-primary-container-variant);
14
+ --color-secondary: var(--suwa-secondary);
15
+ --color-on-secondary: var(--suwa-on-secondary);
16
+ --color-secondary-container: var(--suwa-secondary-container);
17
+ --color-on-secondary-container: var(--suwa-on-secondary-container);
18
+ --color-on-secondary-container-variant: var(--suwa-on-secondary-container-variant);
19
+ --color-accent: var(--suwa-accent);
20
+ --color-on-accent: var(--suwa-on-accent);
21
+ --color-accent-container: var(--suwa-accent-container);
22
+ --color-on-accent-container: var(--suwa-on-accent-container);
23
+ --color-on-accent-container-variant: var(--suwa-on-accent-container-variant);
24
+ --color-error: var(--suwa-error);
25
+ --color-on-error: var(--suwa-on-error);
26
+ --color-error-container: var(--suwa-error-container);
27
+ --color-on-error-container: var(--suwa-on-error-container);
28
+ --color-on-error-container-variant: var(--suwa-on-error-container-variant);
29
+ --color-warning: var(--suwa-warning);
30
+ --color-on-warning: var(--suwa-on-warning);
31
+ --color-warning-container: var(--suwa-warning-container);
32
+ --color-on-warning-container: var(--suwa-on-warning-container);
33
+ --color-on-warning-container-variant: var(--suwa-on-warning-container-variant);
34
+ --color-success: var(--suwa-success);
35
+ --color-on-success: var(--suwa-on-success);
36
+ --color-success-container: var(--suwa-success-container);
37
+ --color-on-success-container: var(--suwa-on-success-container);
38
+ --color-on-success-container-variant: var(--suwa-on-success-container-variant);
39
+ --color-surface: var(--suwa-surface);
40
+ --color-surface-dim: var(--suwa-surface-dim);
41
+ --color-surface-bright: var(--suwa-surface-bright);
42
+ --color-surface-container-lowest: var(--suwa-surface-container-lowest);
43
+ --color-surface-container-low: var(--suwa-surface-container-low);
44
+ --color-surface-container-mid: var(--suwa-surface-container-mid);
45
+ --color-surface-container-high: var(--suwa-surface-container-high);
46
+ --color-surface-container-highest: var(--suwa-surface-container-highest);
47
+ --color-on-surface: var(--suwa-on-surface);
48
+ --color-on-surface-variant: var(--suwa-on-surface-variant);
49
+ --color-outline: var(--suwa-outline);
50
+ --color-outline-variant: var(--suwa-outline-variant);
51
+ --color-scrim: var(--suwa-scrim);
52
+ --color-shadow: var(--suwa-shadow);
53
+ --color-highlight: var(--suwa-highlight);
54
+ --color-glass-fill-lowest: var(--suwa-glass-fill-lowest);
55
+ --color-glass-fill-low: var(--suwa-glass-fill-low);
56
+ --color-glass-fill-medium: var(--suwa-glass-fill-medium);
57
+ --color-glass-fill-high: var(--suwa-glass-fill-high);
58
+ --color-glass-fill-highest: var(--suwa-glass-fill-highest);
59
+ --color-on-glass: var(--suwa-on-glass);
60
+ --color-on-glass-variant: var(--suwa-on-glass-variant);
61
+ --color-inverse-glass-fill: var(--suwa-inverse-glass-fill);
62
+ --color-inverse-on-glass: var(--suwa-inverse-on-glass);
63
+ --color-glass-outline-lowest: var(--suwa-glass-outline-lowest);
64
+ --color-glass-outline-low: var(--suwa-glass-outline-low);
65
+ --color-glass-outline-medium: var(--suwa-glass-outline-medium);
66
+ --color-glass-outline-high: var(--suwa-glass-outline-high);
67
+ --color-glass-outline-highest: var(--suwa-glass-outline-highest);
68
+
69
+ --spacing-*: initial;
70
+ --spacing-3xs: var(--suwa-spacing-3xs);
71
+ --spacing-2xs: var(--suwa-spacing-2xs);
72
+ --spacing-xs: var(--suwa-spacing-xs);
73
+ --spacing-sm: var(--suwa-spacing-sm);
74
+ --spacing-md: var(--suwa-spacing-md);
75
+ --spacing-lg: var(--suwa-spacing-lg);
76
+ --spacing-xl: var(--suwa-spacing-xl);
77
+ --spacing-2xl: var(--suwa-spacing-2xl);
78
+ --spacing-3xl: var(--suwa-spacing-3xl);
79
+
80
+ --font-*: initial;
81
+ --font-display: var(--suwa-font-display);
82
+ --font-heading: var(--suwa-font-heading);
83
+ --font-body: var(--suwa-font-body);
84
+
85
+ --text-*: initial;
86
+ --text-xs: var(--suwa-text-xs);
87
+ --text-sm: var(--suwa-text-sm);
88
+ --text-base: var(--suwa-text-base);
89
+ --text-lg: var(--suwa-text-lg);
90
+ --text-xl: var(--suwa-text-xl);
91
+ --text-2xl: var(--suwa-text-2xl);
92
+ --text-3xl: var(--suwa-text-3xl);
93
+ --text-4xl: var(--suwa-text-4xl);
94
+
95
+ --blur-*: initial;
96
+ --blur-xs: var(--suwa-blur-xs);
97
+ --blur-sm: var(--suwa-blur-sm);
98
+ --blur-md: var(--suwa-blur-md);
99
+ --blur-lg: var(--suwa-blur-lg);
100
+ --blur-xl: var(--suwa-blur-xl);
101
+
102
+ --shadow-*: initial;
103
+ --shadow-xs: var(--suwa-shadow-xs);
104
+ --shadow-sm: var(--suwa-shadow-sm);
105
+ --shadow-md: var(--suwa-shadow-md);
106
+ --shadow-lg: var(--suwa-shadow-lg);
107
+ --shadow-xl: var(--suwa-shadow-xl);
108
+
109
+ --drop-shadow-*: initial;
110
+ --drop-shadow-xs: var(--suwa-drop-shadow-xs);
111
+ --drop-shadow-sm: var(--suwa-drop-shadow-sm);
112
+ --drop-shadow-md: var(--suwa-drop-shadow-md);
113
+ --drop-shadow-lg: var(--suwa-drop-shadow-lg);
114
+ --drop-shadow-xl: var(--suwa-drop-shadow-xl);
115
+
116
+ --inset-shadow-*: initial;
117
+ --inset-shadow-xs: var(--suwa-inset-shadow-xs);
118
+ --inset-shadow-sm: var(--suwa-inset-shadow-sm);
119
+ --inset-shadow-md: var(--suwa-inset-shadow-md);
120
+ --inset-shadow-lg: var(--suwa-inset-shadow-lg);
121
+ --inset-shadow-xl: var(--suwa-inset-shadow-xl);
122
+
123
+ --inset-shadow-raised-xs: var(--suwa-inset-raised-xs);
124
+ --inset-shadow-raised-sm: var(--suwa-inset-raised-sm);
125
+ --inset-shadow-raised-md: var(--suwa-inset-raised-md);
126
+ --inset-shadow-raised-lg: var(--suwa-inset-raised-lg);
127
+ --inset-shadow-raised-xl: var(--suwa-inset-raised-xl);
128
+ }
129
+
130
+ :root {
131
+ color-scheme: light dark;
132
+ --amber-100: #FFEDD4FF;
133
+ --amber-200: #FFDCA8FF;
134
+ --amber-300: #FFCA7DFF;
135
+ --amber-400: #FFB951FF;
136
+ --amber-500: #FFA726FF;
137
+ --amber-600: #CC861EFF;
138
+ --amber-700: #996417FF;
139
+ --amber-800: #66430FFF;
140
+ --amber-900: #332108FF;
141
+ --black-100: #D9D9D9FF;
142
+ --black-200: #B3B3B3FF;
143
+ --black-300: #8D8D8DFF;
144
+ --black-400: #676767FF;
145
+ --black-500: #414141FF;
146
+ --black-600: #343434FF;
147
+ --black-700: #272727FF;
148
+ --black-800: #1A1A1AFF;
149
+ --black-900: #0D0D0DFF;
150
+ --blue-100: #CCE4F5FF;
151
+ --blue-200: #99C9EBFF;
152
+ --blue-300: #66ADE0FF;
153
+ --blue-400: #3392D6FF;
154
+ --blue-500: #0077CCFF;
155
+ --blue-600: #005FA3FF;
156
+ --blue-700: #00477AFF;
157
+ --blue-800: #003052FF;
158
+ --blue-900: #001829FF;
159
+ --dark-blue-100: #CCD6DAFF;
160
+ --dark-blue-200: #9AACB5FF;
161
+ --dark-blue-300: #678391FF;
162
+ --dark-blue-400: #35596CFF;
163
+ --dark-blue-500: #023047FF;
164
+ --dark-blue-600: #022639FF;
165
+ --dark-blue-700: #011D2BFF;
166
+ --dark-blue-800: #01131CFF;
167
+ --dark-blue-900: #000A0EFF;
168
+ --green-100: #DAECDAFF;
169
+ --green-200: #B4D8B6FF;
170
+ --green-300: #8FC591FF;
171
+ --green-400: #69B16DFF;
172
+ --green-500: #449E48FF;
173
+ --green-600: #367E3AFF;
174
+ --green-700: #295F2BFF;
175
+ --green-800: #1B3F1DFF;
176
+ --green-900: #0E200EFF;
177
+ --lime-100: #E7E9D3FF;
178
+ --orange-100: #FEE7CCFF;
179
+ --orange-200: #FDCE99FF;
180
+ --orange-300: #FCB666FF;
181
+ --orange-400: #FB9D33FF;
182
+ --orange-500: #FA8500FF;
183
+ --orange-600: #C86A00FF;
184
+ --orange-700: #965000FF;
185
+ --orange-800: #643500FF;
186
+ --orange-900: #321B00FF;
187
+ --lime-200: #CFD4A7FF;
188
+ --lime-300: #B7BE7AFF;
189
+ --lime-400: #9FA94EFF;
190
+ --lime-500: #879322FF;
191
+ --lime-600: #6C761BFF;
192
+ --lime-700: #515814FF;
193
+ --lime-800: #363B0EFF;
194
+ --lime-900: #1B1D07FF;
195
+ --pink-100: #FED9E9FF;
196
+ --pink-200: #FDB2D4FF;
197
+ --pink-300: #FB8CBEFF;
198
+ --pink-400: #FA65A9FF;
199
+ --pink-500: #F93F93FF;
200
+ --pink-600: #C73276FF;
201
+ --pink-700: #952658FF;
202
+ --pink-800: #64193BFF;
203
+ --pink-900: #320D1DFF;
204
+ --purple-100: #EBD4EFFF;
205
+ --red-100: #FDD9D7FF;
206
+ --red-200: #FBB4AFFF;
207
+ --red-300: #F88E86FF;
208
+ --red-400: #F6695EFF;
209
+ --red-500: #F44336FF;
210
+ --red-600: #C3362BFF;
211
+ --red-700: #922820FF;
212
+ --red-800: #621B16FF;
213
+ --red-900: #310D0BFF;
214
+ --purple-200: #D7A9DFFF;
215
+ --purple-300: #C47DD0FF;
216
+ --purple-400: #B052C0FF;
217
+ --purple-500: #9C27B0FF;
218
+ --purple-600: #7D1F8DFF;
219
+ --purple-700: #5E176AFF;
220
+ --purple-800: #3E1046FF;
221
+ --purple-900: #1F0823FF;
222
+ --rose-100: #FDDCE2FF;
223
+ --rose-200: #FBB9C4FF;
224
+ --rose-300: #F897A7FF;
225
+ --rose-400: #F67489FF;
226
+ --rose-500: #F4516CFF;
227
+ --rose-600: #C34156FF;
228
+ --rose-700: #923141FF;
229
+ --rose-800: #62202BFF;
230
+ --rose-900: #311016FF;
231
+ --sky-blue-100: #D3ECF2FF;
232
+ --sky-blue-200: #A6D8E4FF;
233
+ --sky-blue-300: #7AC5D7FF;
234
+ --sky-blue-400: #4DB1C9FF;
235
+ --sky-blue-500: #219EBCFF;
236
+ --sky-blue-600: #1A7E96FF;
237
+ --sky-blue-700: #145F71FF;
238
+ --sky-blue-800: #0D3F4BFF;
239
+ --sky-blue-900: #072026FF;
240
+ --teal-100: #D0EEEBFF;
241
+ --violet-100: #E5DEF7FF;
242
+ --violet-200: #CABEEFFF;
243
+ --violet-300: #B09DE6FF;
244
+ --violet-400: #957DDEFF;
245
+ --violet-500: #7B5CD6FF;
246
+ --violet-600: #624AABFF;
247
+ --violet-700: #4A3780FF;
248
+ --violet-800: #312556FF;
249
+ --violet-900: #19122BFF;
250
+ --teal-200: #A1DCD7FF;
251
+ --teal-300: #72CBC3FF;
252
+ --teal-400: #43B9AFFF;
253
+ --teal-500: #14A89BFF;
254
+ --teal-600: #10867CFF;
255
+ --teal-700: #0C655DFF;
256
+ --teal-800: #08433EFF;
257
+ --teal-900: #04221FFF;
258
+ --white-100: #FAFAFAFF;
259
+ --white-200: #F5F5F5FF;
260
+ --white-300: #EEEEEEFF;
261
+ --white-400: #E0E0E0FF;
262
+ --white-500: #BDBDBDFF;
263
+ --white-600: #979797FF;
264
+ --white-700: #717171FF;
265
+ --white-800: #4C4C4CFF;
266
+ --white-900: #262626FF;
267
+ --yellow-100: #FFF3CDFF;
268
+ --yellow-200: #FFE69CFF;
269
+ --yellow-300: #FFDA6AFF;
270
+ --yellow-400: #FFCD39FF;
271
+ --yellow-500: #FFC107FF;
272
+ --yellow-600: #CC9A06FF;
273
+ --yellow-700: #997404FF;
274
+ --yellow-800: #664D03FF;
275
+ --yellow-900: #332701FF;
276
+
277
+ /* Primary colors */
278
+ --suwa-primary: light-dark(var(--sky-blue-500), var(--sky-blue-400));
279
+ --suwa-on-primary: light-dark(var(--white-200), var(--black-700));
280
+ --suwa-primary-container: light-dark(var(--sky-blue-200), var(--sky-blue-800));
281
+ --suwa-on-primary-container: light-dark(var(--sky-blue-800), var(--sky-blue-300));
282
+ --suwa-on-primary-container-variant: light-dark(var(--sky-blue-700), var(--sky-blue-100));
283
+
284
+ /* Secondary colors */
285
+ --suwa-secondary: light-dark(var(--dark-blue-500), var(--sky-blue-200));
286
+ --suwa-on-secondary: light-dark(var(--white-200), var(--black-700));
287
+ --suwa-secondary-container: light-dark(var(--dark-blue-100), var(--dark-blue-800));
288
+ --suwa-on-secondary-container: light-dark(var(--dark-blue-800), var(--dark-blue-300));
289
+ --suwa-on-secondary-container-variant: light-dark(var(--dark-blue-700), var(--dark-blue-100));
290
+
291
+ /* Accent colors */
292
+ --suwa-accent: light-dark(var(--orange-500), var(--orange-400));
293
+ --suwa-on-accent: light-dark(var(--white-200), var(--black-700));
294
+ --suwa-accent-container: light-dark(var(--orange-200), var(--orange-800));
295
+ --suwa-on-accent-container: light-dark(var(--orange-800), var(--orange-300));
296
+ --suwa-on-accent-container-variant: light-dark(var(--orange-700), var(--orange-100));
297
+
298
+ /* Error colors */
299
+ --suwa-error: var(--red-500);
300
+ --suwa-on-error: light-dark(var(--white-200), var(--black-700));
301
+ --suwa-error-container: light-dark(var(--red-200), var(--red-800));
302
+ --suwa-on-error-container: light-dark(var(--red-800), var(--red-300));
303
+ --suwa-on-error-container-variant: light-dark(var(--red-600), var(--red-100));
304
+
305
+ /* Success colors */
306
+ --suwa-success: light-dark(var(--green-500), var(--green-300));
307
+ --suwa-on-success: light-dark(var(--white-200), var(--black-700));
308
+ --suwa-success-container: light-dark(var(--green-200), var(--green-700));
309
+ --suwa-on-success-container: light-dark(var(--green-800), var(--green-300));
310
+ --suwa-on-success-container-variant: light-dark(var(--green-600), var(--green-100));
311
+
312
+ /* Warning colors */
313
+ --suwa-warning: var(--amber-500);
314
+ --suwa-on-warning: light-dark(var(--white-200), var(--black-700));
315
+ --suwa-warning-container: light-dark(var(--amber-200), var(--amber-800));
316
+ --suwa-on-warning-container: light-dark(var(--amber-800), var(--amber-300));
317
+ --suwa-on-warning-container-variant: light-dark(var(--amber-600), var(--amber-100));
318
+
319
+ /* Surface colors */
320
+ --suwa-surface-dim: light-dark(var(--white-300), var(--black-900));
321
+ --suwa-surface: light-dark(var(--white-200), var(--black-800));
322
+ --suwa-surface-bright: light-dark(var(--white-100), var(--black-700));
323
+ --suwa-surface-container-lowest: light-dark(var(--white-100), var(--black-700));
324
+ --suwa-surface-container-low: light-dark(var(--white-100), var(--black-600));
325
+ --suwa-surface-container-mid: light-dark(var(--white-100), var(--black-500));
326
+ --suwa-surface-container-high: light-dark(var(--white-100), var(--black-400));
327
+ --suwa-surface-container-highest: light-dark(var(--white-100), var(--black-300));
328
+ --suwa-on-surface: light-dark(var(--black-900), var(--white-100));
329
+ --suwa-on-surface-variant: light-dark(var(--black-400), var(--white-600));
330
+ --suwa-outline: light-dark(var(--black-300), var(--black-400));
331
+ --suwa-outline-variant: light-dark(var(--black-500), var(--black-600));
332
+
333
+ /* System colors */
334
+ --suwa-scrim: #00000059;
335
+ --suwa-shadow: light-dark(#00000040, #00000080);
336
+ --suwa-highlight: light-dark(#FFFFFF59, #FFFFFF26);
337
+
338
+ /* Glass colors */
339
+ --suwa-glass-fill-lowest: light-dark(#FFFFFF14, #19191926);
340
+ --suwa-glass-fill-low: light-dark(#FFFFFF1F, #19191933);
341
+ --suwa-glass-fill-medium: light-dark(#FFFFFF29, #19191940);
342
+ --suwa-glass-fill-high: light-dark(#FFFFFF33, #1919194D);
343
+ --suwa-glass-fill-highest: light-dark(#FFFFFF40, #19191959);
344
+ --suwa-on-glass: light-dark(var(--black-400), var(--white-400));
345
+ --suwa-on-glass-variant: light-dark(var(--black-700), var(--white-700));
346
+ --suwa-inverse-glass-fill: light-dark(#1E1E1EFF, #ECEEF0FF);
347
+ --suwa-inverse-on-glass: light-dark(var(--white-400), var(--black-400));
348
+
349
+ --suwa-glass-outline-lowest: light-dark(#FFFFFF66, #FFFFFF33);
350
+ --suwa-glass-outline-low: light-dark(#FFFFFF80, #FFFFFF4D);
351
+ --suwa-glass-outline-medium: light-dark(#FFFFFF99, #FFFFFF66);
352
+ --suwa-glass-outline-high: light-dark(#FFFFFFB2, #FFFFFF80);
353
+ --suwa-glass-outline-highest: light-dark(#FFFFFFCC, #FFFFFF99);
354
+
355
+ --suwa-spacing-3xs: clamp(0.1875rem, 0.1619rem + 0.1136vw, 0.25rem);
356
+ --suwa-spacing-2xs: clamp(0.375rem, 0.3239rem + 0.2273vw, 0.5rem);
357
+ --suwa-spacing-xs: clamp(0.5625rem, 0.4858rem + 0.3409vw, 0.75rem);
358
+ --suwa-spacing-sm: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
359
+ --suwa-spacing-md: clamp(1.125rem, 0.9716rem + 0.6818vw, 1.5rem);
360
+ --suwa-spacing-lg: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
361
+ --suwa-spacing-xl: clamp(2.25rem, 1.9432rem + 1.3636vw, 3rem);
362
+ --suwa-spacing-2xl: clamp(3rem, 2.5909rem + 1.8182vw, 4rem);
363
+ --suwa-spacing-3xl: clamp(4.5rem, 3.8864rem + 2.7273vw, 6rem);
364
+ --suwa-spacing-3xs-2xs: clamp(0.1875rem, 0.0597rem + 0.5682vw, 0.5rem);
365
+ --suwa-spacing-2xs-xs: clamp(0.375rem, 0.2216rem + 0.6818vw, 0.75rem);
366
+ --suwa-spacing-xs-s: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
367
+ --suwa-spacing-s-m: clamp(0.75rem, 0.4432rem + 1.3636vw, 1.5rem);
368
+ --suwa-spacing-m-l: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
369
+ --suwa-spacing-l-xl: clamp(1.5rem, 0.8864rem + 2.7273vw, 3rem);
370
+ --suwa-spacing-xl-2xl: clamp(2.25rem, 1.5341rem + 3.1818vw, 4rem);
371
+ --suwa-spacing-2xl-3xl: clamp(3rem, 1.7727rem + 5.4545vw, 6rem);
372
+
373
+ --suwa-font-display: "Sora", sans-serif;
374
+ --suwa-font-heading: "Space Grotesk", sans-serif;
375
+ --suwa-font-body: "IBM Plex Sans", sans-serif;
376
+
377
+ --suwa-text-xs: clamp(0.5926rem, 0.5509rem + 0.1852vw, 0.6944rem);
378
+ --suwa-text-sm: clamp(0.6667rem, 0.5985rem + 0.303vw, 0.8333rem);
379
+ --suwa-text-base: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
380
+ --suwa-text-lg: clamp(0.8438rem, 0.698rem + 0.6477vw, 1.2rem);
381
+ --suwa-text-xl: clamp(0.9492rem, 0.7484rem + 0.8923vw, 1.44rem);
382
+ --suwa-text-2xl: clamp(1.0679rem, 0.7978rem + 1.2002vw, 1.728rem);
383
+ --suwa-text-3xl: clamp(1.2014rem, 0.8445rem + 1.5859vw, 2.0736rem);
384
+ --suwa-text-4xl: clamp(1.3515rem, 0.8865rem + 2.0669vw, 2.4883rem);
385
+
386
+ --suwa-blur-xs: blur(8px);
387
+ --suwa-blur-sm: blur(12px);
388
+ --suwa-blur-md: blur(16px);
389
+ --suwa-blur-lg: blur(20px);
390
+ --suwa-blur-xl: blur(24px);
391
+
392
+ --suwa-shadow-xs: 0px 1px 2px 0 theme(--color-shadow);
393
+ --suwa-shadow-sm: 0px 2px 4px 0 theme(--color-shadow);
394
+ --suwa-shadow-md: 0px 4px 8px 0 theme(--color-shadow);
395
+ --suwa-shadow-lg: 0px 8px 16px 0 theme(--color-shadow);
396
+ --suwa-shadow-xl: 0px 16px 24px 0 theme(--color-shadow);
397
+
398
+ --suwa-drop-shadow-xs: 0px 1px 2px 0 theme(--color-shadow);
399
+ --suwa-drop-shadow-sm: 0px 2px 4px 0 theme(--color-shadow);
400
+ --suwa-drop-shadow-md: 0px 4px 8px 0 theme(--color-shadow);
401
+ --suwa-drop-shadow-lg: 0px 8px 16px 0 theme(--color-shadow);
402
+ --suwa-drop-shadow-xl: 0px 16px 24px 0 theme(--color-shadow);
403
+
404
+ --suwa-inset-shadow-xs: inset 0 1px 2px 0 theme(--color-shadow);
405
+ --suwa-inset-shadow-sm: inset 0 2px 4px 0 theme(--color-shadow);
406
+ --suwa-inset-shadow-md: inset 0 4px 8px 0 theme(--color-shadow);
407
+ --suwa-inset-shadow-lg: inset 0 6px 12px 0 theme(--color-shadow);
408
+ --suwa-inset-shadow-xl: inset 0 8px 16px 0 theme(--color-shadow);
409
+
410
+ --suwa-inset-raised-xs: inset 0px -1px 2px theme(--color-shadow), inset 0px 1px 4px theme(--color-highlight), inset 0px 1px 2px theme(--color-highlight);
411
+ --suwa-inset-raised-sm: inset 0px -2px 3px theme(--color-shadow), inset 0px 2px 8px theme(--color-highlight), inset 0px 2px 4px theme(--color-highlight);
412
+ --suwa-inset-raised-md: inset 0px -3px 4px theme(--color-shadow), inset 0px 3px 12px theme(--color-highlight), inset 0px 3px 6px theme(--color-highlight);
413
+ --suwa-inset-raised-lg: inset 0px -4px 6px theme(--color-shadow), inset 0px 4px 16px theme(--color-highlight), inset 0px 4px 8px theme(--color-highlight);
414
+ --suwa-inset-raised-xl: inset 0px -6px 8px theme(--color-shadow), inset 0px 6px 20px theme(--color-highlight), inset 0px 6px 8px theme(--color-highlight);
415
+ }
416
+
417
+ [data-theme="light"] {
418
+ color-scheme: light;
419
+ }
420
+
421
+ [data-theme="dark"] {
422
+ color-scheme: dark;
423
+ }
424
+
425
+ @utility gradient-border-* {
426
+ position: relative;
427
+
428
+ &::before {
429
+ position: absolute;
430
+ inset: 0;
431
+ padding: 1px;
432
+ pointer-events: none;
433
+ content: "";
434
+ background: linear-gradient(
435
+ to bottom right,
436
+ --value(--color- *) 0%,
437
+ transparent 60%
438
+ );
439
+ border-radius: inherit;
440
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
441
+ linear-gradient(#fff 0 0);
442
+ -webkit-mask-composite: xor;
443
+ mask-composite: exclude;
444
+ }
445
+ }
446
+
447
+ @utility style-text-* {
448
+ font-family: var(--text-font);
449
+ font-size: var(--text-size);
450
+ font-weight: var(--text-weight);
451
+ line-height: var(--text-leading, normal);
452
+ letter-spacing: normal;
453
+ }
454
+
455
+ @utility style-text-default-5 {
456
+ --text-font: var(--font-body);
457
+ --text-weight: 500;
458
+ --text-size: var(--text-4xl);
459
+ }
460
+
461
+ @utility style-text-default-4 {
462
+ --text-font: var(--font-body);
463
+ --text-weight: 500;
464
+ --text-size: var(--text-3xl);
465
+ }
466
+
467
+ @utility style-text-default-3 {
468
+ --text-font: var(--font-body);
469
+ --text-weight: 500;
470
+ --text-size: var(--text-2xl);
471
+ }
472
+
473
+ @utility style-text-default-2 {
474
+ --text-font: var(--font-body);
475
+ --text-weight: 500;
476
+ --text-size: var(--text-xl);
477
+ }
478
+
479
+ @utility style-text-default-1 {
480
+ --text-font: var(--font-body);
481
+ --text-weight: 500;
482
+ --text-size: var(--text-lg);
483
+ }
484
+
485
+ @utility style-text-default-0 {
486
+ --text-font: var(--font-body);
487
+ --text-weight: 500;
488
+ --text-size: var(--text-base);
489
+ }
490
+
491
+ @utility style-text-default--1 {
492
+ --text-font: var(--font-body);
493
+ --text-weight: 500;
494
+ --text-size: var(--text-sm);
495
+ }
496
+
497
+ @utility style-text-default--2 {
498
+ --text-font: var(--font-body);
499
+ --text-weight: 500;
500
+ --text-size: var(--text-xs);
501
+ }
502
+
503
+ @utility style-text-prose-5 {
504
+ --text-font: var(--font-body);
505
+ --text-weight: 400;
506
+ --text-size: var(--text-4xl);
507
+ --text-leading: 160%;
508
+ }
509
+
510
+ @utility style-text-prose-4 {
511
+ --text-font: var(--font-body);
512
+ --text-weight: 400;
513
+ --text-size: var(--text-3xl);
514
+ --text-leading: 160%;
515
+ }
516
+
517
+ @utility style-text-prose-3 {
518
+ --text-font: var(--font-body);
519
+ --text-weight: 400;
520
+ --text-size: var(--text-2xl);
521
+ --text-leading: 160%;
522
+ }
523
+
524
+ @utility style-text-prose-2 {
525
+ --text-font: var(--font-body);
526
+ --text-weight: 400;
527
+ --text-size: var(--text-xl);
528
+ --text-leading: 160%;
529
+ }
530
+
531
+ @utility style-text-prose-1 {
532
+ --text-font: var(--font-body);
533
+ --text-weight: 400;
534
+ --text-size: var(--text-lg);
535
+ --text-leading: 160%;
536
+ }
537
+
538
+ @utility style-text-prose-0 {
539
+ --text-font: var(--font-body);
540
+ --text-weight: 400;
541
+ --text-size: var(--text-base);
542
+ --text-leading: 160%;
543
+ }
544
+
545
+ @utility style-text-prose--1 {
546
+ --text-font: var(--font-body);
547
+ --text-weight: 400;
548
+ --text-size: var(--text-sm);
549
+ --text-leading: 160%;
550
+ }
551
+
552
+ @utility style-text-prose--2 {
553
+ --text-font: var(--font-body);
554
+ --text-weight: 400;
555
+ --text-size: var(--text-xs);
556
+ --text-leading: 160%;
557
+ }
558
+
559
+ @utility style-text-strong-5 {
560
+ --text-font: var(--font-heading);
561
+ --text-weight: 700;
562
+ --text-size: var(--text-4xl);
563
+ --text-leading: 120%;
564
+ }
565
+
566
+ @utility style-text-strong-4 {
567
+ --text-font: var(--font-heading);
568
+ --text-weight: 700;
569
+ --text-size: var(--text-3xl);
570
+ --text-leading: 120%;
571
+ }
572
+
573
+ @utility style-text-strong-3 {
574
+ --text-font: var(--font-heading);
575
+ --text-weight: 700;
576
+ --text-size: var(--text-2xl);
577
+ --text-leading: 120%;
578
+ }
579
+
580
+ @utility style-text-strong-2 {
581
+ --text-font: var(--font-heading);
582
+ --text-weight: 700;
583
+ --text-size: var(--text-xl);
584
+ --text-leading: 120%;
585
+ }
586
+
587
+ @utility style-text-strong-1 {
588
+ --text-font: var(--font-heading);
589
+ --text-weight: 700;
590
+ --text-size: var(--text-lg);
591
+ --text-leading: 120%;
592
+ }
593
+
594
+ @utility style-text-strong-0 {
595
+ --text-font: var(--font-heading);
596
+ --text-weight: 700;
597
+ --text-size: var(--text-base);
598
+ --text-leading: 120%;
599
+ }
600
+
601
+ @utility style-text-strong--1 {
602
+ --text-font: var(--font-heading);
603
+ --text-weight: 700;
604
+ --text-size: var(--text-sm);
605
+ --text-leading: 120%;
606
+ }
607
+
608
+ @utility style-text-strong--2 {
609
+ --text-font: var(--font-heading);
610
+ --text-weight: 700;
611
+ --text-size: var(--text-xs);
612
+ --text-leading: 120%;
613
+ }
614
+
615
+ @utility glass-1 {
616
+ background-color: var(--glass-fill-lowest);
617
+ backdrop-filter: var(--blur-1);
618
+ position: relative;
619
+ box-shadow: 1px 1px 2px 0 var(--shadow);
620
+ color: var(--on-glass);
621
+
622
+ &::before {
623
+ position: absolute;
624
+ inset: 0;
625
+ padding: 1px;
626
+ pointer-events: none;
627
+ content: "";
628
+ background: linear-gradient(
629
+ to bottom right,
630
+ var(--glass-outline-lowest) 0%,
631
+ transparent 60%
632
+ );
633
+ border-radius: inherit;
634
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
635
+ linear-gradient(#fff 0 0);
636
+ -webkit-mask-composite: xor;
637
+ mask-composite: exclude;
638
+ }
639
+ }
640
+
641
+ @utility glass-2 {
642
+ background-color: var(--glass-fill-low);
643
+ backdrop-filter: var(--blur-2);
644
+ position: relative;
645
+ box-shadow: 2px 2px 4px 0 var(--shadow);
646
+ color: var(--on-glass);
647
+
648
+ &::before {
649
+ position: absolute;
650
+ inset: 0;
651
+ padding: 1px;
652
+ pointer-events: none;
653
+ content: "";
654
+ background: linear-gradient(
655
+ to bottom right,
656
+ var(--glass-outline-low) 0%,
657
+ transparent 60%
658
+ );
659
+ border-radius: inherit;
660
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
661
+ linear-gradient(#fff 0 0);
662
+ -webkit-mask-composite: xor;
663
+ mask-composite: exclude;
664
+ }
665
+ }
666
+
667
+ @utility glass-3 {
668
+ background-color: var(--glass-fill-medium);
669
+ backdrop-filter: var(--blur-3);
670
+ position: relative;
671
+ box-shadow: 4px 4px 8px 0 var(--shadow);
672
+ color: var(--on-glass);
673
+
674
+ &::before {
675
+ position: absolute;
676
+ inset: 0;
677
+ padding: 1px;
678
+ pointer-events: none;
679
+ content: "";
680
+ background: linear-gradient(
681
+ to bottom right,
682
+ var(--glass-outline-medium) 0%,
683
+ transparent 60%
684
+ );
685
+ border-radius: inherit;
686
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
687
+ linear-gradient(#fff 0 0);
688
+ -webkit-mask-composite: xor;
689
+ mask-composite: exclude;
690
+ }
691
+ }
692
+
693
+ @utility glass-4 {
694
+ background-color: var(--glass-fill-high);
695
+ backdrop-filter: var(--blur-4);
696
+ position: relative;
697
+ box-shadow: 8px 8px 16px 0 var(--shadow);
698
+ color: var(--on-glass);
699
+
700
+ &::before {
701
+ position: absolute;
702
+ inset: 0;
703
+ padding: 1px;
704
+ pointer-events: none;
705
+ content: "";
706
+ background: linear-gradient(
707
+ to bottom right,
708
+ var(--glass-outline-high) 0%,
709
+ transparent 60%
710
+ );
711
+ border-radius: inherit;
712
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
713
+ linear-gradient(#fff 0 0);
714
+ -webkit-mask-composite: xor;
715
+ mask-composite: exclude;
716
+ }
717
+ }
718
+
719
+ @utility glass-5 {
720
+ background-color: var(--glass-fill-highest);
721
+ backdrop-filter: var(--blur-5);
722
+ position: relative;
723
+ box-shadow: 16px 16px 32px 0 var(--shadow);
724
+ color: var(--on-glass);
725
+
726
+ &::before {
727
+ position: absolute;
728
+ inset: 0;
729
+ padding: 1px;
730
+ pointer-events: none;
731
+ content: "";
732
+ background: linear-gradient(
733
+ to bottom right,
734
+ var(--glass-outline-highest) 0%,
735
+ transparent 60%
736
+ );
737
+ border-radius: inherit;
738
+ -webkit-mask: linear-gradient(#fff 0 0) content-box,
739
+ linear-gradient(#fff 0 0);
740
+ -webkit-mask-composite: xor;
741
+ mask-composite: exclude;
742
+ }
743
+ }
744
+