Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
1@import 'tailwindcss';
2
3@theme {
4 --text-*: initial;
5 --text-base-100: 10px;
6 --text-base-100--line-height: 14px;
7 --text-base-200: 12px;
8 --text-base-200--line-height: 16px;
9 --text-base-300: 14px;
10 --text-base-300--line-height: 20px;
11 --text-base-400: 16px;
12 --text-base-400--line-height: 22px;
13 --text-base-500: 20px;
14 --text-base-500--line-height: 28px;
15 --text-base-600: 24px;
16 --text-base-600--line-height: 32px;
17 --text-hero-700: 28px;
18 --text-hero-700--line-height: 36px;
19 --text-hero-800: 32px;
20 --text-hero-800--line-height: 40px;
21 --text-hero-900: 40px;
22 --text-hero-900--line-height: 52px;
23 --text-hero-1000: 68px;
24 --text-hero-1000--line-height: 92px;
25}
26
27@theme inline {
28 --color-*: initial;
29
30 --color-background-overlay: var(--color-background-overlay);
31 --color-brand-background: var(--color-brand-background);
32 --color-brand-background-2: var(--color-brand-background-2);
33 --color-brand-background-2-hover: var(--color-brand-background-2-hover);
34 --color-brand-background-2-pressed: var(--color-brand-background-2-pressed);
35 --color-brand-background-3-static: var(--color-brand-background-3-static);
36 --color-brand-background-4-static: var(--color-brand-background-4-static);
37 --color-brand-background-hover: var(--color-brand-background-hover);
38 --color-brand-background-inverted: var(--color-brand-background-inverted);
39 --color-brand-background-inverted-hover: var(--color-brand-background-inverted-hover);
40 --color-brand-background-inverted-pressed: var(--color-brand-background-inverted-pressed);
41 --color-brand-background-inverted-selected: var(--color-brand-background-inverted-selected);
42 --color-brand-background-pressed: var(--color-brand-background-pressed);
43 --color-brand-background-selected: var(--color-brand-background-selected);
44 --color-brand-background-static: var(--color-brand-background-static);
45 --color-brand-foreground-1: var(--color-brand-foreground-1);
46 --color-brand-foreground-2: var(--color-brand-foreground-2);
47 --color-brand-foreground-2-hover: var(--color-brand-foreground-2-hover);
48 --color-brand-foreground-2-pressed: var(--color-brand-foreground-2-pressed);
49 --color-brand-foreground-inverted: var(--color-brand-foreground-inverted);
50 --color-brand-foreground-inverted-hover: var(--color-brand-foreground-inverted-hover);
51 --color-brand-foreground-inverted-pressed: var(--color-brand-foreground-inverted-pressed);
52 --color-brand-foreground-link: var(--color-brand-foreground-link);
53 --color-brand-foreground-link-hover: var(--color-brand-foreground-link-hover);
54 --color-brand-foreground-link-pressed: var(--color-brand-foreground-link-pressed);
55 --color-brand-foreground-link-selected: var(--color-brand-foreground-link-selected);
56 --color-brand-foreground-on-light: var(--color-brand-foreground-on-light);
57 --color-brand-foreground-on-light-hover: var(--color-brand-foreground-on-light-hover);
58 --color-brand-foreground-on-light-pressed: var(--color-brand-foreground-on-light-pressed);
59 --color-brand-foreground-on-light-selected: var(--color-brand-foreground-on-light-selected);
60 --color-brand-stroke-1: var(--color-brand-stroke-1);
61 --color-brand-stroke-2: var(--color-brand-stroke-2);
62 --color-brand-stroke-2-contrast: var(--color-brand-stroke-2-contrast);
63 --color-brand-stroke-2-hover: var(--color-brand-stroke-2-hover);
64 --color-brand-stroke-2-pressed: var(--color-brand-stroke-2-pressed);
65 --color-compound-brand-background: var(--color-compound-brand-background);
66 --color-compound-brand-background-hover: var(--color-compound-brand-background-hover);
67 --color-compound-brand-background-pressed: var(--color-compound-brand-background-pressed);
68 --color-compound-brand-foreground-1: var(--color-compound-brand-foreground-1);
69 --color-compound-brand-foreground-1-hover: var(--color-compound-brand-foreground-1-hover);
70 --color-compound-brand-foreground-1-pressed: var(--color-compound-brand-foreground-1-pressed);
71 --color-compound-brand-stroke: var(--color-compound-brand-stroke);
72 --color-compound-brand-stroke-hover: var(--color-compound-brand-stroke-hover);
73 --color-compound-brand-stroke-pressed: var(--color-compound-brand-stroke-pressed);
74 --color-neutral-background-1: var(--color-neutral-background-1);
75 --color-neutral-background-1-hover: var(--color-neutral-background-1-hover);
76 --color-neutral-background-1-pressed: var(--color-neutral-background-1-pressed);
77 --color-neutral-background-1-selected: var(--color-neutral-background-1-selected);
78 --color-neutral-background-2: var(--color-neutral-background-2);
79 --color-neutral-background-2-hover: var(--color-neutral-background-2-hover);
80 --color-neutral-background-2-pressed: var(--color-neutral-background-2-pressed);
81 --color-neutral-background-2-selected: var(--color-neutral-background-2-selected);
82 --color-neutral-background-3: var(--color-neutral-background-3);
83 --color-neutral-background-3-hover: var(--color-neutral-background-3-hover);
84 --color-neutral-background-3-pressed: var(--color-neutral-background-3-pressed);
85 --color-neutral-background-3-selected: var(--color-neutral-background-3-selected);
86 --color-neutral-background-4: var(--color-neutral-background-4);
87 --color-neutral-background-4-hover: var(--color-neutral-background-4-hover);
88 --color-neutral-background-4-pressed: var(--color-neutral-background-4-pressed);
89 --color-neutral-background-4-selected: var(--color-neutral-background-4-selected);
90 --color-neutral-background-5: var(--color-neutral-background-5);
91 --color-neutral-background-5-hover: var(--color-neutral-background-5-hover);
92 --color-neutral-background-5-pressed: var(--color-neutral-background-5-pressed);
93 --color-neutral-background-5-selected: var(--color-neutral-background-5-selected);
94 --color-neutral-background-6: var(--color-neutral-background-6);
95 --color-neutral-background-alpha: var(--color-neutral-background-alpha);
96 --color-neutral-background-alpha-2: var(--color-neutral-background-alpha-2);
97 --color-neutral-background-disabled: var(--color-neutral-background-disabled);
98 --color-neutral-background-inverted: var(--color-neutral-background-inverted);
99 --color-neutral-background-inverted-hover: var(--color-neutral-background-inverted-hover);
100 --color-neutral-background-inverted-pressed: var(--color-neutral-background-inverted-pressed);
101 --color-neutral-background-inverted-selected: var(--color-neutral-background-inverted-selected);
102 --color-neutral-background-static: var(--color-neutral-background-static);
103 --color-neutral-foreground-1: var(--color-neutral-foreground-1);
104 --color-neutral-foreground-1-hover: var(--color-neutral-foreground-1-hover);
105 --color-neutral-foreground-1-pressed: var(--color-neutral-foreground-1-pressed);
106 --color-neutral-foreground-1-selected: var(--color-neutral-foreground-1-selected);
107 --color-neutral-foreground-1-static: var(--color-neutral-foreground-1-static);
108 --color-neutral-foreground-2: var(--color-neutral-foreground-2);
109 --color-neutral-foreground-2-brand-hover: var(--color-neutral-foreground-2-brand-hover);
110 --color-neutral-foreground-2-brand-pressed: var(--color-neutral-foreground-2-brand-pressed);
111 --color-neutral-foreground-2-brand-selected: var(--color-neutral-foreground-2-brand-selected);
112 --color-neutral-foreground-2-hover: var(--color-neutral-foreground-2-hover);
113 --color-neutral-foreground-2-pressed: var(--color-neutral-foreground-2-pressed);
114 --color-neutral-foreground-2-selected: var(--color-neutral-foreground-2-selected);
115 --color-neutral-foreground-3: var(--color-neutral-foreground-3);
116 --color-neutral-foreground-3-hover: var(--color-neutral-foreground-3-hover);
117 --color-neutral-foreground-3-pressed: var(--color-neutral-foreground-3-pressed);
118 --color-neutral-foreground-3-selected: var(--color-neutral-foreground-3-selected);
119 --color-neutral-foreground-4: var(--color-neutral-foreground-4);
120 --color-neutral-foreground-5: var(--color-neutral-foreground-5);
121 --color-neutral-foreground-5-hover: var(--color-neutral-foreground-5-hover);
122 --color-neutral-foreground-5-pressed: var(--color-neutral-foreground-5-pressed);
123 --color-neutral-foreground-5-selected: var(--color-neutral-foreground-5-selected);
124 --color-neutral-foreground-disabled: var(--color-neutral-foreground-disabled);
125 --color-neutral-foreground-inverted: var(--color-neutral-foreground-inverted);
126 --color-neutral-foreground-inverted-2: var(--color-neutral-foreground-inverted-2);
127 --color-neutral-foreground-inverted-hover: var(--color-neutral-foreground-inverted-hover);
128 --color-neutral-foreground-inverted-pressed: var(--color-neutral-foreground-inverted-pressed);
129 --color-neutral-foreground-inverted-selected: var(--color-neutral-foreground-inverted-selected);
130 --color-neutral-foreground-on-brand: var(--color-neutral-foreground-on-brand);
131 --color-neutral-foreground-static-inverted: var(--color-neutral-foreground-static-inverted);
132 --color-neutral-shadow-ambient: var(--color-neutral-shadow-ambient);
133 --color-neutral-shadow-ambient-darker: var(--color-neutral-shadow-ambient-darker);
134 --color-neutral-shadow-ambient-lighter: var(--color-neutral-shadow-ambient-lighter);
135 --color-neutral-shadow-key: var(--color-neutral-shadow-key);
136 --color-neutral-shadow-key-darker: var(--color-neutral-shadow-key-darker);
137 --color-neutral-shadow-key-lighter: var(--color-neutral-shadow-key-lighter);
138 --color-neutral-stroke-1: var(--color-neutral-stroke-1);
139 --color-neutral-stroke-1-hover: var(--color-neutral-stroke-1-hover);
140 --color-neutral-stroke-1-pressed: var(--color-neutral-stroke-1-pressed);
141 --color-neutral-stroke-1-selected: var(--color-neutral-stroke-1-selected);
142 --color-neutral-stroke-2: var(--color-neutral-stroke-2);
143 --color-neutral-stroke-3: var(--color-neutral-stroke-3);
144 --color-neutral-stroke-accessible: var(--color-neutral-stroke-accessible);
145 --color-neutral-stroke-accessible-hover: var(--color-neutral-stroke-accessible-hover);
146 --color-neutral-stroke-accessible-pressed: var(--color-neutral-stroke-accessible-pressed);
147 --color-neutral-stroke-accessible-selected: var(--color-neutral-stroke-accessible-selected);
148 --color-neutral-stroke-alpha: var(--color-neutral-stroke-alpha);
149 --color-neutral-stroke-alpha-2: var(--color-neutral-stroke-alpha-2);
150 --color-neutral-stroke-disabled: var(--color-neutral-stroke-disabled);
151 --color-neutral-stroke-inverted-disabled: var(--color-neutral-stroke-inverted-disabled);
152 --color-neutral-stroke-on-brand: var(--color-neutral-stroke-on-brand);
153 --color-neutral-stroke-on-brand-2: var(--color-neutral-stroke-on-brand-2);
154 --color-neutral-stroke-on-brand-2-hover: var(--color-neutral-stroke-on-brand-2-hover);
155 --color-neutral-stroke-on-brand-2-pressed: var(--color-neutral-stroke-on-brand-2-pressed);
156 --color-neutral-stroke-on-brand-2-selected: var(--color-neutral-stroke-on-brand-2-selected);
157 --color-neutral-stroke-subtle: var(--color-neutral-stroke-subtle);
158 --color-scrollbar-overlay: var(--color-scrollbar-overlay);
159 --color-status-danger-background-1: var(--color-status-danger-background-1);
160 --color-status-danger-background-2: var(--color-status-danger-background-2);
161 --color-status-danger-background-3: var(--color-status-danger-background-3);
162 --color-status-danger-background-3-hover: var(--color-status-danger-background-3-hover);
163 --color-status-danger-background-3-pressed: var(--color-status-danger-background-3-pressed);
164 --color-status-danger-border-1: var(--color-status-danger-border-1);
165 --color-status-danger-border-2: var(--color-status-danger-border-2);
166 --color-status-danger-border-active: var(--color-status-danger-border-active);
167 --color-status-danger-foreground-1: var(--color-status-danger-foreground-1);
168 --color-status-danger-foreground-2: var(--color-status-danger-foreground-2);
169 --color-status-danger-foreground-3: var(--color-status-danger-foreground-3);
170 --color-status-danger-foreground-inverted: var(--color-status-danger-foreground-inverted);
171 --color-status-success-background-1: var(--color-status-success-background-1);
172 --color-status-success-background-2: var(--color-status-success-background-2);
173 --color-status-success-background-3: var(--color-status-success-background-3);
174 --color-status-success-border-1: var(--color-status-success-border-1);
175 --color-status-success-border-2: var(--color-status-success-border-2);
176 --color-status-success-border-active: var(--color-status-success-border-active);
177 --color-status-success-foreground-1: var(--color-status-success-foreground-1);
178 --color-status-success-foreground-2: var(--color-status-success-foreground-2);
179 --color-status-success-foreground-3: var(--color-status-success-foreground-3);
180 --color-status-success-foreground-inverted: var(--color-status-success-foreground-inverted);
181 --color-status-warning-background-1: var(--color-status-warning-background-1);
182 --color-status-warning-background-2: var(--color-status-warning-background-2);
183 --color-status-warning-background-3: var(--color-status-warning-background-3);
184 --color-status-warning-border-1: var(--color-status-warning-border-1);
185 --color-status-warning-border-2: var(--color-status-warning-border-2);
186 --color-status-warning-border-active: var(--color-status-warning-border-active);
187 --color-status-warning-foreground-1: var(--color-status-warning-foreground-1);
188 --color-status-warning-foreground-2: var(--color-status-warning-foreground-2);
189 --color-status-warning-foreground-3: var(--color-status-warning-foreground-3);
190 --color-status-warning-foreground-inverted: var(--color-status-warning-foreground-inverted);
191 --color-stroke-focus-1: var(--color-stroke-focus-1);
192 --color-stroke-focus-2: var(--color-stroke-focus-2);
193 --color-subtle-background: var(--color-subtle-background);
194 --color-subtle-background-hover: var(--color-subtle-background-hover);
195 --color-subtle-background-inverted: var(--color-subtle-background-inverted);
196 --color-subtle-background-inverted-hover: var(--color-subtle-background-inverted-hover);
197 --color-subtle-background-inverted-pressed: var(--color-subtle-background-inverted-pressed);
198 --color-subtle-background-inverted-selected: var(--color-subtle-background-inverted-selected);
199 --color-subtle-background-light-alpha-hover: var(--color-subtle-background-light-alpha-hover);
200 --color-subtle-background-light-alpha-pressed: var(--color-subtle-background-light-alpha-pressed);
201 --color-subtle-background-light-alpha-selected: var(--color-subtle-background-light-alpha-selected);
202 --color-subtle-background-pressed: var(--color-subtle-background-pressed);
203 --color-subtle-background-selected: var(--color-subtle-background-selected);
204 --color-transparent-background: var(--color-transparent-background);
205 --color-transparent-background-hover: var(--color-transparent-background-hover);
206 --color-transparent-background-pressed: var(--color-transparent-background-pressed);
207 --color-transparent-background-selected: var(--color-transparent-background-selected);
208 --color-transparent-stroke: var(--color-transparent-stroke);
209 --color-transparent-stroke-disabled: var(--color-transparent-stroke-disabled);
210 --color-transparent-stroke-interactive: var(--color-transparent-stroke-interactive);
211
212 --ease-*: initial;
213 --ease-fluent: cubic-bezier(0.33, 0, 0.67, 1);
214 --ease-accelerate-min: cubic-bezier(0.8, 0, 0.78, 1);
215 --ease-decelerate-mid: cubic-bezier(0, 0, 0, 1);
216
217 --duration-*: initial;
218 --duration-faster: 100ms;
219 --duration-fast: 150ms;
220 --duration-normal: 200ms;
221 --duration-gentle: 250ms;
222 --duration-slow: 300ms;
223 --duration-slower: 400ms;
224
225 --animate-*: initial;
226 --animate-spin-linear: spin-linear 1.5s linear infinite;
227 --animate-spin-swing: spin-swing 1.5s var(--ease-fluent) infinite;
228 --animate-spin-start: spin-start 1.5s var(--ease-fluent) infinite;
229 --animate-spin-end: spin-end 1.5s var(--ease-fluent) infinite;
230
231 --radius-*: initial;
232 --radius-none: 0;
233 --radius-sm: 2px;
234 --radius-md: 4px;
235 --radius-lg: 6px;
236 --radius-xl: 8px;
237 --radius-full: 10000px;
238
239 --shadow-*: initial;
240 --shadow-2: var(--shadow-2);
241 --shadow-4: var(--shadow-4);
242 --shadow-8: var(--shadow-8);
243 --shadow-16: var(--shadow-16);
244 --shadow-28: var(--shadow-28);
245 --shadow-64: var(--shadow-64);
246}
247
248@keyframes spin-linear {
249 100% {
250 transform: rotate(360deg);
251 }
252}
253
254@keyframes spin-swing {
255 0% {
256 transform: rotate(-135deg);
257 }
258 50% {
259 transform: rotate(0deg);
260 }
261 100% {
262 transform: rotate(225deg);
263 }
264}
265
266@keyframes spin-start {
267 0%,
268 100% {
269 transform: rotate(0deg);
270 }
271 50% {
272 transform: rotate(-80deg);
273 }
274}
275
276@keyframes spin-end {
277 0%,
278 100% {
279 transform: rotate(0deg);
280 }
281 50% {
282 transform: rotate(70deg);
283 }
284}
285
286:root {
287 & {
288 --color-background-overlay: rgba(0, 0, 0, 0.4);
289 --color-brand-background: #ad46ff;
290 --color-brand-background-2: #fcf8ff;
291 --color-brand-background-2-hover: #f2e2ff;
292 --color-brand-background-2-pressed: #d8a8ff;
293 --color-brand-background-3-static: #8335c7;
294 --color-brand-background-4-static: #53227e;
295 --color-brand-background-hover: #983ee6;
296 --color-brand-background-inverted: #ffffff;
297 --color-brand-background-inverted-hover: #fcf8ff;
298 --color-brand-background-inverted-pressed: #e5c5ff;
299 --color-brand-background-inverted-selected: #f2e2ff;
300 --color-brand-background-pressed: #53227e;
301 --color-brand-background-selected: #8335c7;
302 --color-brand-background-static: #ad46ff;
303 --color-brand-foreground-1: #ad46ff;
304 --color-brand-foreground-2: #983ee6;
305 --color-brand-foreground-2-hover: #8335c7;
306 --color-brand-foreground-2-pressed: #34154f;
307 --color-brand-foreground-inverted: #ba65ff;
308 --color-brand-foreground-inverted-hover: #c47bff;
309 --color-brand-foreground-inverted-pressed: #ba65ff;
310 --color-brand-foreground-link: #983ee6;
311 --color-brand-foreground-link-hover: #8335c7;
312 --color-brand-foreground-link-pressed: #53227e;
313 --color-brand-foreground-link-selected: #983ee6;
314 --color-brand-foreground-on-light: #ad46ff;
315 --color-brand-foreground-on-light-hover: #983ee6;
316 --color-brand-foreground-on-light-pressed: #6f2da8;
317 --color-brand-foreground-on-light-selected: #8335c7;
318 --color-brand-stroke-1: #ad46ff;
319 --color-brand-stroke-2: #e5c5ff;
320 --color-brand-stroke-2-contrast: #e5c5ff;
321 --color-brand-stroke-2-hover: #ce91ff;
322 --color-brand-stroke-2-pressed: #ad46ff;
323 --color-compound-brand-background: #ad46ff;
324 --color-compound-brand-background-hover: #983ee6;
325 --color-compound-brand-background-pressed: #8335c7;
326 --color-compound-brand-foreground-1: #ad46ff;
327 --color-compound-brand-foreground-1-hover: #983ee6;
328 --color-compound-brand-foreground-1-pressed: #8335c7;
329 --color-compound-brand-stroke: #ad46ff;
330 --color-compound-brand-stroke-hover: #983ee6;
331 --color-compound-brand-stroke-pressed: #8335c7;
332 --color-neutral-background-1: #ffffff;
333 --color-neutral-background-1-hover: #f5f5f5;
334 --color-neutral-background-1-pressed: #e0e0e0;
335 --color-neutral-background-1-selected: #ebebeb;
336 --color-neutral-background-2: #fafafa;
337 --color-neutral-background-2-hover: #f0f0f0;
338 --color-neutral-background-2-pressed: #dbdbdb;
339 --color-neutral-background-2-selected: #e6e6e6;
340 --color-neutral-background-3: #f5f5f5;
341 --color-neutral-background-3-hover: #ebebeb;
342 --color-neutral-background-3-pressed: #d6d6d6;
343 --color-neutral-background-3-selected: #e0e0e0;
344 --color-neutral-background-4: #f0f0f0;
345 --color-neutral-background-4-hover: #fafafa;
346 --color-neutral-background-4-pressed: #f5f5f5;
347 --color-neutral-background-4-selected: #ffffff;
348 --color-neutral-background-5: #ebebeb;
349 --color-neutral-background-5-hover: #f5f5f5;
350 --color-neutral-background-5-pressed: #f0f0f0;
351 --color-neutral-background-5-selected: #fafafa;
352 --color-neutral-background-6: #e6e6e6;
353 --color-neutral-background-alpha: rgba(255, 255, 255, 0.5);
354 --color-neutral-background-alpha-2: rgba(255, 255, 255, 0.8);
355 --color-neutral-background-disabled: #f0f0f0;
356 --color-neutral-background-inverted: #292929;
357 --color-neutral-background-inverted-hover: #3d3d3d;
358 --color-neutral-background-inverted-pressed: #1f1f1f;
359 --color-neutral-background-inverted-selected: #383838;
360 --color-neutral-background-static: #333333;
361 --color-neutral-foreground-1: #242424;
362 --color-neutral-foreground-1-hover: #242424;
363 --color-neutral-foreground-1-pressed: #242424;
364 --color-neutral-foreground-1-selected: #242424;
365 --color-neutral-foreground-1-static: #242424;
366 --color-neutral-foreground-2: #424242;
367 --color-neutral-foreground-2-brand-hover: #ad46ff;
368 --color-neutral-foreground-2-brand-pressed: #983ee6;
369 --color-neutral-foreground-2-brand-selected: #ad46ff;
370 --color-neutral-foreground-2-hover: #242424;
371 --color-neutral-foreground-2-pressed: #242424;
372 --color-neutral-foreground-2-selected: #242424;
373 --color-neutral-foreground-3: #616161;
374 --color-neutral-foreground-3-hover: #424242;
375 --color-neutral-foreground-3-pressed: #424242;
376 --color-neutral-foreground-3-selected: #424242;
377 --color-neutral-foreground-4: #707070;
378 --color-neutral-foreground-5: #616161;
379 --color-neutral-foreground-5-hover: #242424;
380 --color-neutral-foreground-5-pressed: #242424;
381 --color-neutral-foreground-5-selected: #242424;
382 --color-neutral-foreground-disabled: #bdbdbd;
383 --color-neutral-foreground-inverted: #ffffff;
384 --color-neutral-foreground-inverted-2: #ffffff;
385 --color-neutral-foreground-inverted-hover: #ffffff;
386 --color-neutral-foreground-inverted-pressed: #ffffff;
387 --color-neutral-foreground-inverted-selected: #ffffff;
388 --color-neutral-foreground-on-brand: #ffffff;
389 --color-neutral-foreground-static-inverted: #ffffff;
390 --color-neutral-shadow-ambient: rgba(0, 0, 0, 0.12);
391 --color-neutral-shadow-ambient-darker: rgba(0, 0, 0, 0.2);
392 --color-neutral-shadow-ambient-lighter: rgba(0, 0, 0, 0.06);
393 --color-neutral-shadow-key: rgba(0, 0, 0, 0.14);
394 --color-neutral-shadow-key-darker: rgba(0, 0, 0, 0.24);
395 --color-neutral-shadow-key-lighter: rgba(0, 0, 0, 0.07);
396 --color-neutral-stroke-1: #d1d1d1;
397 --color-neutral-stroke-1-hover: #c7c7c7;
398 --color-neutral-stroke-1-pressed: #b3b3b3;
399 --color-neutral-stroke-1-selected: #bdbdbd;
400 --color-neutral-stroke-2: #e0e0e0;
401 --color-neutral-stroke-3: #f0f0f0;
402 --color-neutral-stroke-accessible: #616161;
403 --color-neutral-stroke-accessible-hover: #575757;
404 --color-neutral-stroke-accessible-pressed: #4d4d4d;
405 --color-neutral-stroke-accessible-selected: #ad46ff;
406 --color-neutral-stroke-alpha: rgba(0, 0, 0, 0.05);
407 --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2);
408 --color-neutral-stroke-disabled: #e0e0e0;
409 --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4);
410 --color-neutral-stroke-on-brand: #ffffff;
411 --color-neutral-stroke-on-brand-2: #ffffff;
412 --color-neutral-stroke-on-brand-2-hover: #ffffff;
413 --color-neutral-stroke-on-brand-2-pressed: #ffffff;
414 --color-neutral-stroke-on-brand-2-selected: #ffffff;
415 --color-neutral-stroke-subtle: #e0e0e0;
416 --color-scrollbar-overlay: rgba(0, 0, 0, 0.5);
417 --color-status-danger-background-1: #fdf3f4;
418 --color-status-danger-background-2: #eeacb2;
419 --color-status-danger-background-3: #c50f1f;
420 --color-status-danger-background-3-hover: #b10e1c;
421 --color-status-danger-background-3-pressed: #960b18;
422 --color-status-danger-border-1: #eeacb2;
423 --color-status-danger-border-2: #c50f1f;
424 --color-status-danger-border-active: #c50f1f;
425 --color-status-danger-foreground-1: #6e0811;
426 --color-status-danger-foreground-2: #b10e1c;
427 --color-status-danger-foreground-3: #c50f1f;
428 --color-status-danger-foreground-inverted: #dc626d;
429 --color-status-success-background-1: #f1faf1;
430 --color-status-success-background-2: #9fd89f;
431 --color-status-success-background-3: #107c10;
432 --color-status-success-border-1: #9fd89f;
433 --color-status-success-border-2: #359b35;
434 --color-status-success-border-active: #107c10;
435 --color-status-success-foreground-1: #094509;
436 --color-status-success-foreground-2: #0e700e;
437 --color-status-success-foreground-3: #359b35;
438 --color-status-success-foreground-inverted: #54b054;
439 --color-status-warning-background-1: #fff9f5;
440 --color-status-warning-background-2: #fdcfb5;
441 --color-status-warning-background-3: #f7630c;
442 --color-status-warning-border-1: #fdcfb5;
443 --color-status-warning-border-2: #8a3707;
444 --color-status-warning-border-active: #f7630c;
445 --color-status-warning-foreground-1: #8a3707;
446 --color-status-warning-foreground-2: #de590b;
447 --color-status-warning-foreground-3: #8a3707;
448 --color-status-warning-foreground-inverted: #faa06b;
449 --color-stroke-focus-1: #ffffff;
450 --color-stroke-focus-2: #000000;
451 --color-subtle-background: transparent;
452 --color-subtle-background-hover: #f5f5f5;
453 --color-subtle-background-inverted: transparent;
454 --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1);
455 --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3);
456 --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2);
457 --color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7);
458 --color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5);
459 --color-subtle-background-light-alpha-selected: transparent;
460 --color-subtle-background-pressed: #e0e0e0;
461 --color-subtle-background-selected: #ebebeb;
462 --color-transparent-background: transparent;
463 --color-transparent-background-hover: transparent;
464 --color-transparent-background-pressed: transparent;
465 --color-transparent-background-selected: transparent;
466 --color-transparent-stroke: transparent;
467 --color-transparent-stroke-disabled: transparent;
468 --color-transparent-stroke-interactive: transparent;
469
470 --shadow-2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
471 --shadow-4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
472 --shadow-8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
473 --shadow-16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
474 --shadow-28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
475 --shadow-64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
476 }
477
478 @media (prefers-color-scheme: dark) {
479 --color-background-overlay: rgba(0, 0, 0, 0.5);
480 --color-brand-background: #983ee6;
481 --color-brand-background-2: #1c0b2a;
482 --color-brand-background-2-hover: #53227e;
483 --color-brand-background-2-pressed: #07030a;
484 --color-brand-background-3-static: #8335c7;
485 --color-brand-background-4-static: #53227e;
486 --color-brand-background-hover: #ad46ff;
487 --color-brand-background-inverted: #ffffff;
488 --color-brand-background-inverted-hover: #fcf8ff;
489 --color-brand-background-inverted-pressed: #e5c5ff;
490 --color-brand-background-inverted-selected: #f2e2ff;
491 --color-brand-background-pressed: #53227e;
492 --color-brand-background-selected: #8335c7;
493 --color-brand-background-static: #ad46ff;
494 --color-brand-foreground-1: #ba65ff;
495 --color-brand-foreground-2: #c47bff;
496 --color-brand-foreground-2-hover: #d8a8ff;
497 --color-brand-foreground-2-pressed: #fcf8ff;
498 --color-brand-foreground-inverted: #ad46ff;
499 --color-brand-foreground-inverted-hover: #983ee6;
500 --color-brand-foreground-inverted-pressed: #8335c7;
501 --color-brand-foreground-link: #ba65ff;
502 --color-brand-foreground-link-hover: #c47bff;
503 --color-brand-foreground-link-pressed: #b456ff;
504 --color-brand-foreground-link-selected: #ba65ff;
505 --color-brand-foreground-on-light: #ad46ff;
506 --color-brand-foreground-on-light-hover: #983ee6;
507 --color-brand-foreground-on-light-pressed: #6f2da8;
508 --color-brand-foreground-on-light-selected: #8335c7;
509 --color-brand-stroke-1: #ba65ff;
510 --color-brand-stroke-2: #6f2da8;
511 --color-brand-stroke-2-contrast: #6f2da8;
512 --color-brand-stroke-2-hover: #6f2da8;
513 --color-brand-stroke-2-pressed: #34154f;
514 --color-compound-brand-background: #ba65ff;
515 --color-compound-brand-background-hover: #c47bff;
516 --color-compound-brand-background-pressed: #b456ff;
517 --color-compound-brand-foreground-1: #ba65ff;
518 --color-compound-brand-foreground-1-hover: #c47bff;
519 --color-compound-brand-foreground-1-pressed: #b456ff;
520 --color-compound-brand-stroke: #ba65ff;
521 --color-compound-brand-stroke-hover: #c47bff;
522 --color-compound-brand-stroke-pressed: #b456ff;
523 --color-neutral-background-1: #292929;
524 --color-neutral-background-1-hover: #3d3d3d;
525 --color-neutral-background-1-pressed: #1f1f1f;
526 --color-neutral-background-1-selected: #383838;
527 --color-neutral-background-2: #1f1f1f;
528 --color-neutral-background-2-hover: #333333;
529 --color-neutral-background-2-pressed: #141414;
530 --color-neutral-background-2-selected: #2e2e2e;
531 --color-neutral-background-3: #141414;
532 --color-neutral-background-3-hover: #292929;
533 --color-neutral-background-3-pressed: #0a0a0a;
534 --color-neutral-background-3-selected: #242424;
535 --color-neutral-background-4: #0a0a0a;
536 --color-neutral-background-4-hover: #1f1f1f;
537 --color-neutral-background-4-pressed: #000000;
538 --color-neutral-background-4-selected: #1a1a1a;
539 --color-neutral-background-5: #000000;
540 --color-neutral-background-5-hover: #141414;
541 --color-neutral-background-5-pressed: #050505;
542 --color-neutral-background-5-selected: #0f0f0f;
543 --color-neutral-background-6: #333333;
544 --color-neutral-background-alpha: rgba(26, 26, 26, 0.5);
545 --color-neutral-background-alpha-2: rgba(26, 26, 26, 0.7);
546 --color-neutral-background-disabled: #141414;
547 --color-neutral-background-inverted: #ffffff;
548 --color-neutral-background-inverted-hover: #f5f5f5;
549 --color-neutral-background-inverted-pressed: #e0e0e0;
550 --color-neutral-background-inverted-selected: #ebebeb;
551 --color-neutral-background-static: #3d3d3d;
552 --color-neutral-foreground-1: #ffffff;
553 --color-neutral-foreground-1-hover: #ffffff;
554 --color-neutral-foreground-1-pressed: #ffffff;
555 --color-neutral-foreground-1-selected: #ffffff;
556 --color-neutral-foreground-1-static: #242424;
557 --color-neutral-foreground-2: #d6d6d6;
558 --color-neutral-foreground-2-brand-hover: #ba65ff;
559 --color-neutral-foreground-2-brand-pressed: #b456ff;
560 --color-neutral-foreground-2-brand-selected: #ba65ff;
561 --color-neutral-foreground-2-hover: #ffffff;
562 --color-neutral-foreground-2-pressed: #ffffff;
563 --color-neutral-foreground-2-selected: #ffffff;
564 --color-neutral-foreground-3: #adadad;
565 --color-neutral-foreground-3-hover: #d6d6d6;
566 --color-neutral-foreground-3-pressed: #d6d6d6;
567 --color-neutral-foreground-3-selected: #d6d6d6;
568 --color-neutral-foreground-4: #999999;
569 --color-neutral-foreground-5: #adadad;
570 --color-neutral-foreground-5-hover: #ffffff;
571 --color-neutral-foreground-5-pressed: #ffffff;
572 --color-neutral-foreground-5-selected: #ffffff;
573 --color-neutral-foreground-disabled: #5c5c5c;
574 --color-neutral-foreground-inverted: #242424;
575 --color-neutral-foreground-inverted-2: #242424;
576 --color-neutral-foreground-inverted-hover: #242424;
577 --color-neutral-foreground-inverted-pressed: #242424;
578 --color-neutral-foreground-inverted-selected: #242424;
579 --color-neutral-foreground-on-brand: #ffffff;
580 --color-neutral-foreground-static-inverted: #ffffff;
581 --color-neutral-shadow-ambient: rgba(0, 0, 0, 0.24);
582 --color-neutral-shadow-ambient-darker: rgba(0, 0, 0, 0.4);
583 --color-neutral-shadow-ambient-lighter: rgba(0, 0, 0, 0.12);
584 --color-neutral-shadow-key: rgba(0, 0, 0, 0.28);
585 --color-neutral-shadow-key-darker: rgba(0, 0, 0, 0.48);
586 --color-neutral-shadow-key-lighter: rgba(0, 0, 0, 0.14);
587 --color-neutral-stroke-1: #666666;
588 --color-neutral-stroke-1-hover: #757575;
589 --color-neutral-stroke-1-pressed: #6b6b6b;
590 --color-neutral-stroke-1-selected: #707070;
591 --color-neutral-stroke-2: #525252;
592 --color-neutral-stroke-3: #3d3d3d;
593 --color-neutral-stroke-accessible: #adadad;
594 --color-neutral-stroke-accessible-hover: #bdbdbd;
595 --color-neutral-stroke-accessible-pressed: #b3b3b3;
596 --color-neutral-stroke-accessible-selected: #ba65ff;
597 --color-neutral-stroke-alpha: rgba(255, 255, 255, 0.1);
598 --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2);
599 --color-neutral-stroke-disabled: #424242;
600 --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4);
601 --color-neutral-stroke-on-brand: #292929;
602 --color-neutral-stroke-on-brand-2: #ffffff;
603 --color-neutral-stroke-on-brand-2-hover: #ffffff;
604 --color-neutral-stroke-on-brand-2-pressed: #ffffff;
605 --color-neutral-stroke-on-brand-2-selected: #ffffff;
606 --color-neutral-stroke-subtle: #0a0a0a;
607 --color-scrollbar-overlay: rgba(255, 255, 255, 0.6);
608 --color-status-danger-background-1: #3b0509;
609 --color-status-danger-background-2: #6e0811;
610 --color-status-danger-background-3: #c50f1f;
611 --color-status-danger-background-3-hover: #b10e1c;
612 --color-status-danger-background-3-pressed: #960b18;
613 --color-status-danger-border-1: #c50f1f;
614 --color-status-danger-border-2: #dc626d;
615 --color-status-danger-border-active: #dc626d;
616 --color-status-danger-foreground-1: #dc626d;
617 --color-status-danger-foreground-2: #eeacb2;
618 --color-status-danger-foreground-3: #eeacb2;
619 --color-status-danger-foreground-inverted: #cc2635;
620 --color-status-success-background-1: #052505;
621 --color-status-success-background-2: #094509;
622 --color-status-success-background-3: #107c10;
623 --color-status-success-border-1: #107c10;
624 --color-status-success-border-2: #359b35;
625 --color-status-success-border-active: #54b054;
626 --color-status-success-foreground-1: #54b054;
627 --color-status-success-foreground-2: #9fd89f;
628 --color-status-success-foreground-3: #359b35;
629 --color-status-success-foreground-inverted: #0e700e;
630 --color-status-warning-background-1: #4a1e04;
631 --color-status-warning-background-2: #8a3707;
632 --color-status-warning-background-3: #f7630c;
633 --color-status-warning-border-1: #f7630c;
634 --color-status-warning-border-2: #f98845;
635 --color-status-warning-border-active: #faa06b;
636 --color-status-warning-foreground-1: #faa06b;
637 --color-status-warning-foreground-2: #fdcfb5;
638 --color-status-warning-foreground-3: #fdcfb5;
639 --color-status-warning-foreground-inverted: #8a3707;
640 --color-stroke-focus-1: #000000;
641 --color-stroke-focus-2: #ffffff;
642 --color-subtle-background: transparent;
643 --color-subtle-background-hover: #383838;
644 --color-subtle-background-inverted: transparent;
645 --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1);
646 --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3);
647 --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2);
648 --color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.1);
649 --color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.05);
650 --color-subtle-background-light-alpha-selected: transparent;
651 --color-subtle-background-pressed: #2e2e2e;
652 --color-subtle-background-selected: #333333;
653 --color-transparent-background: transparent;
654 --color-transparent-background-hover: transparent;
655 --color-transparent-background-pressed: transparent;
656 --color-transparent-background-selected: transparent;
657 --color-transparent-stroke: transparent;
658 --color-transparent-stroke-disabled: transparent;
659 --color-transparent-stroke-interactive: transparent;
660
661 --shadow-2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
662 --shadow-4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
663 --shadow-8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
664 --shadow-16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
665 --shadow-28: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28);
666 --shadow-64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
667 }
668}
669
670@layer base {
671 :where(body) {
672 background: var(--color-neutral-background-2);
673 color: var(--color-neutral-foreground-1);
674 color-scheme: light dark;
675 }
676
677 /* prevent body scroll when modal dialog is open */
678 :where(body:has(dialog:modal)) {
679 overflow: hidden;
680 }
681}
682
683/* #region anchor positioning */
684
685/* anchor-name: set via --anchor CSS variable */
686@utility anchor {
687 anchor-name: var(--anchor);
688}
689
690/* position-anchor: attach to anchor via --anchor CSS variable */
691@utility anchored {
692 position-anchor: var(--anchor);
693 :where(&) {
694 position: absolute;
695 }
696}
697
698/* position-area: position relative to anchor */
699@utility anchored-top {
700 position-area: top;
701}
702@utility anchored-top-center {
703 position-area: top center;
704}
705@utility anchored-top-left {
706 position-area: top left;
707}
708@utility anchored-top-right {
709 position-area: top right;
710}
711@utility anchored-top-span-left {
712 position-area: top span-left;
713}
714@utility anchored-top-span-right {
715 position-area: top span-right;
716}
717@utility anchored-bottom {
718 position-area: bottom;
719}
720@utility anchored-bottom-center {
721 position-area: bottom center;
722}
723@utility anchored-bottom-left {
724 position-area: bottom left;
725}
726@utility anchored-bottom-right {
727 position-area: bottom right;
728}
729@utility anchored-bottom-span-left {
730 position-area: bottom span-left;
731}
732@utility anchored-bottom-span-right {
733 position-area: bottom span-right;
734}
735@utility anchored-left {
736 position-area: left;
737}
738@utility anchored-left-center {
739 position-area: left center;
740}
741@utility anchored-left-span-top {
742 position-area: left span-top;
743}
744@utility anchored-left-span-bottom {
745 position-area: left span-bottom;
746}
747@utility anchored-right {
748 position-area: right;
749}
750@utility anchored-right-center {
751 position-area: right center;
752}
753@utility anchored-right-span-top {
754 position-area: right span-top;
755}
756@utility anchored-right-span-bottom {
757 position-area: right span-bottom;
758}
759
760/* position-try-fallbacks: fallback positions */
761@utility try-none {
762 position-try-fallbacks: none;
763}
764@utility try-flip-x {
765 position-try-fallbacks: flip-inline;
766}
767@utility try-flip-y {
768 position-try-fallbacks: flip-block;
769}
770@utility try-flip-all {
771 position-try-fallbacks:
772 flip-block,
773 flip-inline,
774 flip-block flip-inline;
775}
776@utility try-flip-start {
777 position-try-fallbacks: flip-start;
778}
779
780/* position-try-order: fallback ordering */
781@utility try-order-normal {
782 position-try-order: normal;
783}
784@utility try-order-width {
785 position-try-order: most-width;
786}
787@utility try-order-height {
788 position-try-order: most-height;
789}
790
791/* position-visibility: conditional visibility */
792@utility anchored-visible-always {
793 position-visibility: always;
794}
795@utility anchored-visible-anchor {
796 position-visibility: anchors-visible;
797}
798@utility anchored-visible-no-overflow {
799 position-visibility: no-overflow;
800}
801
802/* #endregion */
803
804/* #region dialog animations */
805
806/*
807 * dialog entry/exit animations using @starting-style
808 * inspired by FluentUI's Dialog motion: scale + fade with decelerate/accelerate easing
809 */
810
811@utility dialog-animate {
812 /* transition properties for both dialog surface and backdrop */
813 transition-property: opacity, scale, overlay, display;
814 transition-duration: var(--duration-faster);
815 transition-timing-function: var(--ease-decelerate-mid);
816 transition-behavior: allow-discrete;
817
818 /* final open state */
819 &[open] {
820 opacity: 1;
821 scale: 1;
822 }
823
824 /* exit state (dialog closing) */
825 &:not([open]) {
826 opacity: 0;
827 scale: 0.95;
828 transition-timing-function: var(--ease-accelerate-min);
829 }
830
831 /* entry starting state */
832 @starting-style {
833 &[open] {
834 opacity: 0;
835 scale: 0.95;
836 }
837 }
838}
839
840/* backdrop animation (fade only, no scale) */
841@utility dialog-backdrop-animate {
842 &::backdrop {
843 transition-property: opacity, overlay, display;
844 transition-duration: var(--duration-faster);
845 transition-timing-function: var(--ease-decelerate-mid);
846 transition-behavior: allow-discrete;
847 opacity: 1;
848 }
849
850 &:not([open])::backdrop {
851 opacity: 0;
852 transition-timing-function: var(--ease-accelerate-min);
853 }
854
855 @starting-style {
856 &[open]::backdrop {
857 opacity: 0;
858 }
859 }
860}
861
862/* #endregion */
863
864/* #region popover animations */
865
866/*
867 * popover entry/exit animations using @starting-style
868 * inspired by FluentUI's Menu motion: slide + fade based on placement
869 */
870
871@utility popover-animate {
872 --_slide-x: 0;
873 --_slide-y: 8px;
874
875 transition-property: opacity, translate, overlay, display;
876 transition-duration: var(--duration-faster);
877 transition-timing-function: var(--ease-decelerate-mid);
878 transition-behavior: allow-discrete;
879
880 /* final open state */
881 &:popover-open {
882 opacity: 1;
883 translate: 0 0;
884 }
885
886 /* exit state */
887 &:not(:popover-open) {
888 opacity: 0;
889 translate: var(--_slide-x) var(--_slide-y);
890 transition-timing-function: var(--ease-accelerate-min);
891 }
892
893 /* entry starting state */
894 @starting-style {
895 &:popover-open {
896 opacity: 0;
897 translate: var(--_slide-x) var(--_slide-y);
898 }
899 }
900}
901
902/* slide direction variants based on anchor position */
903@utility popover-slide-down {
904 --_slide-x: 0;
905 --_slide-y: -8px;
906}
907@utility popover-slide-up {
908 --_slide-x: 0;
909 --_slide-y: 8px;
910}
911@utility popover-slide-left {
912 --_slide-x: 8px;
913 --_slide-y: 0;
914}
915@utility popover-slide-right {
916 --_slide-x: -8px;
917 --_slide-y: 0;
918}
919
920/* #endregion */