UNPKG

86.1 kBJavaScriptView Raw
1const colors = {
2 black: '#000',
3 white: '#fff',
4 rose: {
5 50: '#fff1f2',
6 100: '#ffe4e6',
7 200: '#fecdd3',
8 300: '#fda4af',
9 400: '#fb7185',
10 500: '#f43f5e',
11 600: '#e11d48',
12 700: '#be123c',
13 800: '#9f1239',
14 900: '#881337',
15 },
16 pink: {
17 50: '#fdf2f8',
18 100: '#fce7f3',
19 200: '#fbcfe8',
20 300: '#f9a8d4',
21 400: '#f472b6',
22 500: '#ec4899',
23 600: '#db2777',
24 700: '#be185d',
25 800: '#9d174d',
26 900: '#831843',
27 },
28 fuchsia: {
29 50: '#fdf4ff',
30 100: '#fae8ff',
31 200: '#f5d0fe',
32 300: '#f0abfc',
33 400: '#e879f9',
34 500: '#d946ef',
35 600: '#c026d3',
36 700: '#a21caf',
37 800: '#86198f',
38 900: '#701a75',
39 },
40 purple: {
41 50: '#faf5ff',
42 100: '#f3e8ff',
43 200: '#e9d5ff',
44 300: '#d8b4fe',
45 400: '#c084fc',
46 500: '#a855f7',
47 600: '#9333ea',
48 700: '#7e22ce',
49 800: '#6b21a8',
50 900: '#581c87',
51 },
52 violet: {
53 50: '#f5f3ff',
54 100: '#ede9fe',
55 200: '#ddd6fe',
56 300: '#c4b5fd',
57 400: '#a78bfa',
58 500: '#8b5cf6',
59 600: '#7c3aed',
60 700: '#6d28d9',
61 800: '#5b21b6',
62 900: '#4c1d95',
63 },
64 indigo: {
65 50: '#eef2ff',
66 100: '#e0e7ff',
67 200: '#c7d2fe',
68 300: '#a5b4fc',
69 400: '#818cf8',
70 500: '#6366f1',
71 600: '#4f46e5',
72 700: '#4338ca',
73 800: '#3730a3',
74 900: '#312e81',
75 },
76 blue: {
77 50: '#eff6ff',
78 100: '#dbeafe',
79 200: '#bfdbfe',
80 300: '#93c5fd',
81 400: '#60a5fa',
82 500: '#3b82f6',
83 600: '#2563eb',
84 700: '#1d4ed8',
85 800: '#1e40af',
86 900: '#1e3a8a',
87 },
88 lightBlue: {
89 50: '#f0f9ff',
90 100: '#e0f2fe',
91 200: '#bae6fd',
92 300: '#7dd3fc',
93 400: '#38bdf8',
94 500: '#0ea5e9',
95 600: '#0284c7',
96 700: '#0369a1',
97 800: '#075985',
98 900: '#0c4a6e',
99 },
100 sky: {
101 50: '#f0f9ff',
102 100: '#e0f2fe',
103 200: '#bae6fd',
104 300: '#7dd3fc',
105 400: '#38bdf8',
106 500: '#0ea5e9',
107 600: '#0284c7',
108 700: '#0369a1',
109 800: '#075985',
110 900: '#0c4a6e',
111 },
112 cyan: {
113 50: '#ecfeff',
114 100: '#cffafe',
115 200: '#a5f3fc',
116 300: '#67e8f9',
117 400: '#22d3ee',
118 500: '#06b6d4',
119 600: '#0891b2',
120 700: '#0e7490',
121 800: '#155e75',
122 900: '#164e63',
123 },
124 teal: {
125 50: '#f0fdfa',
126 100: '#ccfbf1',
127 200: '#99f6e4',
128 300: '#5eead4',
129 400: '#2dd4bf',
130 500: '#14b8a6',
131 600: '#0d9488',
132 700: '#0f766e',
133 800: '#115e59',
134 900: '#134e4a',
135 },
136 emerald: {
137 50: '#ecfdf5',
138 100: '#d1fae5',
139 200: '#a7f3d0',
140 300: '#6ee7b7',
141 400: '#34d399',
142 500: '#10b981',
143 600: '#059669',
144 700: '#047857',
145 800: '#065f46',
146 900: '#064e3b',
147 },
148 green: {
149 50: '#f0fdf4',
150 100: '#dcfce7',
151 200: '#bbf7d0',
152 300: '#86efac',
153 400: '#4ade80',
154 500: '#22c55e',
155 600: '#16a34a',
156 700: '#15803d',
157 800: '#166534',
158 900: '#14532d',
159 },
160 lime: {
161 50: '#f7fee7',
162 100: '#ecfccb',
163 200: '#d9f99d',
164 300: '#bef264',
165 400: '#a3e635',
166 500: '#84cc16',
167 600: '#65a30d',
168 700: '#4d7c0f',
169 800: '#3f6212',
170 900: '#365314',
171 },
172 yellow: {
173 50: '#fefce8',
174 100: '#fef9c3',
175 200: '#fef08a',
176 300: '#fde047',
177 400: '#facc15',
178 500: '#eab308',
179 600: '#ca8a04',
180 700: '#a16207',
181 800: '#854d0e',
182 900: '#713f12',
183 },
184 amber: {
185 50: '#fffbeb',
186 100: '#fef3c7',
187 200: '#fde68a',
188 300: '#fcd34d',
189 400: '#fbbf24',
190 500: '#f59e0b',
191 600: '#d97706',
192 700: '#b45309',
193 800: '#92400e',
194 900: '#78350f',
195 },
196 orange: {
197 50: '#fff7ed',
198 100: '#ffedd5',
199 200: '#fed7aa',
200 300: '#fdba74',
201 400: '#fb923c',
202 500: '#f97316',
203 600: '#ea580c',
204 700: '#c2410c',
205 800: '#9a3412',
206 900: '#7c2d12',
207 },
208 red: {
209 50: '#fef2f2',
210 100: '#fee2e2',
211 200: '#fecaca',
212 300: '#fca5a5',
213 400: '#f87171',
214 500: '#ef4444',
215 600: '#dc2626',
216 700: '#b91c1c',
217 800: '#991b1b',
218 900: '#7f1d1d',
219 },
220 warmGray: {
221 50: '#fafaf9',
222 100: '#f5f5f4',
223 200: '#e7e5e4',
224 300: '#d6d3d1',
225 400: '#a8a29e',
226 500: '#78716c',
227 600: '#57534e',
228 700: '#44403c',
229 800: '#292524',
230 900: '#1c1917',
231 },
232 trueGray: {
233 50: '#fafafa',
234 100: '#f5f5f5',
235 200: '#e5e5e5',
236 300: '#d4d4d4',
237 400: '#a3a3a3',
238 500: '#737373',
239 600: '#525252',
240 700: '#404040',
241 800: '#262626',
242 900: '#171717',
243 },
244 gray: {
245 50: '#fafafa',
246 100: '#f4f4f5',
247 200: '#e4e4e7',
248 300: '#d4d4d8',
249 400: '#a1a1aa',
250 500: '#71717a',
251 600: '#52525b',
252 700: '#3f3f46',
253 800: '#27272a',
254 900: '#18181b',
255 },
256 coolGray: {
257 50: '#f9fafb',
258 100: '#f3f4f6',
259 200: '#e5e7eb',
260 300: '#d1d5db',
261 400: '#9ca3af',
262 500: '#6b7280',
263 600: '#4b5563',
264 700: '#374151',
265 800: '#1f2937',
266 900: '#111827',
267 },
268 blueGray: {
269 50: '#f8fafc',
270 100: '#f1f5f9',
271 200: '#e2e8f0',
272 300: '#cbd5e1',
273 400: '#94a3b8',
274 500: '#64748b',
275 600: '#475569',
276 700: '#334155',
277 800: '#1e293b',
278 900: '#0f172a',
279 },
280 light: {
281 50: '#fdfdfd',
282 100: '#fcfcfc',
283 200: '#fafafa',
284 300: '#f8f9fa',
285 400: '#f6f6f6',
286 500: '#f2f2f2',
287 600: '#f1f3f5',
288 700: '#e9ecef',
289 800: '#dee2e6',
290 900: '#dde1e3',
291 },
292 dark: {
293 50: '#4a4a4a',
294 100: '#3c3c3c',
295 200: '#323232',
296 300: '#2d2d2d',
297 400: '#222222',
298 500: '#1f1f1f',
299 600: '#1c1c1e',
300 700: '#1b1b1b',
301 800: '#181818',
302 900: '#0f0f0f',
303 },
304};
305
306const keyframes = {
307 spin: {
308 from: {
309 transform: 'rotate(0deg)',
310 },
311 to: {
312 transform: 'rotate(360deg)',
313 },
314 },
315 ping: {
316 '0%': {
317 transform: 'scale(1)',
318 opacity: '1',
319 },
320 '75%, 100%': {
321 transform: 'scale(2)',
322 opacity: '0',
323 },
324 },
325 pulse: {
326 '0%, 100%': {
327 opacity: '1',
328 },
329 '50%': {
330 opacity: '.5',
331 },
332 },
333 bounce: {
334 '0%, 100%': {
335 transform: 'translateY(-25%)',
336 animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
337 },
338 '50%': {
339 transform: 'translateY(0)',
340 animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
341 },
342 },
343 shock: {
344 'from, 20%, 53%, 80%, to': {
345 animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
346 transform: 'translate3d(0, 0, 0)',
347 },
348 '40%, 43%': {
349 animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
350 transform: 'translate3d(0, -30px, 0)',
351 },
352 '70%': {
353 animationTimingFunction: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
354 transform: 'translate3d(0, -15px, 0)',
355 },
356 '90%': {
357 transform: 'translate3d(0, -4px, 0)',
358 },
359 },
360 flash: {
361 'from, 50%, to': {
362 opacity: '1',
363 },
364 '25%, 75%': {
365 opacity: '0',
366 },
367 },
368 bubble: {
369 'from': {
370 transform: 'scale3d(1, 1, 1)',
371 },
372 '50%': {
373 transform: 'scale3d(1.05, 1.05, 1.05)',
374 },
375 'to': {
376 transform: 'scale3d(1, 1, 1)',
377 },
378 },
379 rubberBand: {
380 'from': {
381 transform: 'scale3d(1, 1, 1)',
382 },
383 '30%': {
384 transform: 'scale3d(1.25, 0.75, 1)',
385 },
386 '40%': {
387 transform: 'scale3d(0.75, 1.25, 1)',
388 },
389 '50%': {
390 transform: 'scale3d(1.15, 0.85, 1)',
391 },
392 '65%': {
393 transform: 'scale3d(0.95, 1.05, 1)',
394 },
395 '75%': {
396 transform: 'scale3d(1.05, 0.95, 1)',
397 },
398 'to': {
399 transform: 'scale3d(1, 1, 1)',
400 },
401 },
402 shakeX: {
403 'from, to': {
404 transform: 'translate3d(0, 0, 0)',
405 },
406 '10%, 30%, 50%, 70%, 90%': {
407 transform: 'translate3d(-10px, 0, 0)',
408 },
409 '20%, 40%, 60%, 80%': {
410 transform: 'translate3d(10px, 0, 0)',
411 },
412 },
413 shakeY: {
414 'from, to': {
415 transform: 'translate3d(0, 0, 0)',
416 },
417 '10%, 30%, 50%, 70%, 90%': {
418 transform: 'translate3d(0, -10px, 0)',
419 },
420 '20%, 40%, 60%, 80%': {
421 transform: 'translate3d(0, 10px, 0)',
422 },
423 },
424 headShake: {
425 '0%': {
426 transform: 'translateX(0)',
427 },
428 '6.5%': {
429 transform: 'translateX(-6px) rotateY(-9deg)',
430 },
431 '18.5%': {
432 transform: 'translateX(5px) rotateY(7deg)',
433 },
434 '31.5%': {
435 transform: 'translateX(-3px) rotateY(-5deg)',
436 },
437 '43.5%': {
438 transform: 'translateX(2px) rotateY(3deg)',
439 },
440 '50%': {
441 transform: 'translateX(0)',
442 },
443 },
444 swing: {
445 '20%': {
446 transform: 'rotate3d(0, 0, 1, 15deg)',
447 },
448 '40%': {
449 transform: 'rotate3d(0, 0, 1, -10deg)',
450 },
451 '60%': {
452 transform: 'rotate3d(0, 0, 1, 5deg)',
453 },
454 '80%': {
455 transform: 'rotate3d(0, 0, 1, -5deg)',
456 },
457 'to': {
458 transform: 'rotate3d(0, 0, 1, 0deg)',
459 },
460 },
461 tada: {
462 'from': {
463 transform: 'scale3d(1, 1, 1)',
464 },
465 '10%, 20%': {
466 transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)',
467 },
468 '30%, 50%, 70%, 90%': {
469 transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)',
470 },
471 '40%, 60%, 80%': {
472 transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)',
473 },
474 'to': {
475 transform: 'scale3d(1, 1, 1)',
476 },
477 },
478 wobble: {
479 'from': {
480 transform: 'translate3d(0, 0, 0)',
481 },
482 '15%': {
483 transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)',
484 },
485 '30%': {
486
487 transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)',
488 },
489 '45%': {
490 transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)',
491 },
492 '60%': {
493 transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)',
494 },
495 '75%': {
496 transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)',
497 },
498 'to': {
499 transform: 'translate3d(0, 0, 0)',
500 },
501 },
502 jello: {
503 'from, 11.1% to': {
504 transform: 'translate3d(0, 0, 0)',
505 },
506 '22.2%': {
507 transform: 'skewX(-12.5deg) skewY(-12.5deg)',
508 },
509 '33.3%': {
510
511 transform: 'skewX(6.25deg) skewY(6.25deg)',
512 },
513 '44.4%': {
514 transform: 'skewX(-3.125deg) skewY(-3.125deg)',
515 },
516 '55.5%': {
517 transform: 'skewX(1.5625deg) skewY(1.5625deg)',
518 },
519 '66.6%': {
520 transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
521 },
522 '77.7%': {
523 transform: 'skewX(0.390625deg) skewY(0.390625deg)',
524 },
525 '88.8%': {
526 transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)',
527 },
528 },
529 heartBeat: {
530 '0%': {
531 transform: 'scale(1)',
532 },
533 '14%': {
534 transform: 'scale(1.3)',
535 },
536 '28%': {
537 transform: 'scale(1)',
538 },
539 '42%': {
540 transform: 'scale(1.3)',
541 },
542 '70%': {
543 transform: 'scale(1)',
544 },
545 },
546 hinge: {
547 '0%': {
548 transformOrigin: 'top left',
549 animationTimingFunction: 'ease-in-out',
550 },
551 '20%, 60%': {
552 transform: 'rotate3d(0, 0, 1, 80deg)',
553 transformOrigin: 'top left',
554 animationTimingFunction: 'ease-in-out',
555 },
556 '40%, 80%': {
557 transform: 'rotate3d(0, 0, 1, 60deg)',
558 transformOrigin: 'top left',
559 animationTimingFunction: 'ease-in-out',
560 },
561 'to': {
562 transform: 'translate3d(0, 700px, 0)',
563 opacity: '0',
564 },
565 },
566 jackInTheBox: {
567 'from': {
568 opacity: '0',
569 transformOrigin: 'center bottom',
570 transform: 'scale(0.1) rotate(30deg)',
571 },
572 '50%': {
573 transform: 'rotate(-10deg)',
574 },
575 '70%': {
576 transform: 'rotate(3deg)',
577 },
578 'to': {
579 transform: 'scale(1)',
580 },
581 },
582
583 // light speed
584 lightSpeedInRight: {
585 'from': {
586 opacity: '0',
587 transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
588 },
589 '60%': {
590 opacity: '1',
591 transform: 'skewX(20deg)',
592 },
593 '80%': {
594 transform: 'skewX(-5deg)',
595 },
596 'to': {
597 transform: 'translate3d(0, 0, 0)',
598 },
599 },
600 lightSpeedInLeft: {
601 'from': {
602 opacity: '0',
603 transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
604 },
605 '60%': {
606 opacity: '1',
607 transform: 'skewX(20deg)',
608 },
609 '80%': {
610 transform: 'skewX(-5deg)',
611 },
612 'to': {
613 transform: 'translate3d(0, 0, 0)',
614 },
615 },
616 lightSpeedOutLeft: {
617 'from': {
618 opacity: '1',
619 },
620 'to': {
621 opacity: '0',
622 transform: 'translate3d(100%, 0, 0) skewX(30deg)',
623 },
624 },
625 lightSpeedOutRight: {
626 'from': {
627 opacity: '1',
628 },
629 'to': {
630 opacity: '0',
631 transform: 'translate3d(100%, 0, 0) skewX(30deg)',
632 },
633 },
634 // flip
635 flip: {
636 'from': {
637 transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)',
638 animationTimingFunction: 'ease-out',
639 },
640 '40%': {
641 transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)',
642 animationTimingFunction: 'ease-out',
643 },
644 '50%': {
645 transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)',
646 animationTimingFunction: 'ease-in',
647 },
648 '80%': {
649 transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)',
650 animationTimingFunction: 'ease-in',
651 },
652 'to': {
653 transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)',
654 animationTimingFunction: 'ease-in',
655 },
656 },
657 flipInX: {
658 'from': {
659 transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
660 animationTimingFunction: 'ease-in',
661 opacity: '0',
662 },
663 '40%': {
664 transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
665 animationTimingFunction: 'ease-in',
666 },
667 '60%': {
668 transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)',
669 opacity: '1',
670 },
671 '80%': {
672 transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)',
673 },
674 'to': {
675 transform: 'perspective(400px)',
676 },
677 },
678 flipInY: {
679 'from': {
680 transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
681 animationTimingFunction: 'ease-in',
682 opacity: '0',
683 },
684 '40%': {
685 transform: 'perspective(400px) rotate3d(0, 1, 0, -20deg)',
686 animationTimingFunction: 'ease-in',
687 },
688 '60%': {
689 transform: 'perspective(400px) rotate3d(0, 1, 0, 10deg)',
690 opacity: '1',
691 },
692 '80%': {
693 transform: 'perspective(400px) rotate3d(0, 1, 0, -5deg)',
694 },
695 'to': {
696 transform: 'perspective(400px)',
697 },
698 },
699 flipOutX: {
700 'from': {
701 transform: 'perspective(400px)',
702 },
703 '30%': {
704 transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)',
705 opacity: '1',
706 },
707 'to': {
708 transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
709 opacity: '0',
710 },
711 },
712 flipOutY: {
713 'from': {
714 transform: 'perspective(400px)',
715 },
716 '30%': {
717 transform: 'perspective(400px) rotate3d(0, 1, 0, -15deg)',
718 opacity: '1',
719 },
720 'to': {
721 transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
722 opacity: '0',
723 },
724 },
725 // rotate in
726 rotateIn: {
727 'from': {
728 transformOrigin: 'center',
729 transform: 'rotate3d(0, 0, 1, -200deg)',
730 opacity: '0',
731 },
732 'to': {
733 transformOrigin: 'center',
734 transform: 'translate3d(0, 0, 0)',
735 opacity: '1',
736 },
737 },
738 rotateInDownLeft: {
739 'from': {
740 transformOrigin: 'left bottom',
741 transform: 'rotate3d(0, 0, 1, -45deg)',
742 opacity: '0',
743 },
744 'to': {
745 transformOrigin: 'left bottom',
746 transform: 'translate3d(0, 0, 0)',
747 opacity: '1',
748 },
749 },
750 rotateInDownRight: {
751 'from': {
752 transformOrigin: 'right bottom',
753 transform: 'rotate3d(0, 0, 1, 45deg)',
754 opacity: '0',
755 },
756 'to': {
757 transformOrigin: 'right bottom',
758 transform: 'translate3d(0, 0, 0)',
759 opacity: '1',
760 },
761 },
762 rotateInUpLeft: {
763 'from': {
764 transformOrigin: 'left top',
765 transform: 'rotate3d(0, 0, 1, 45deg)',
766 opacity: '0',
767 },
768 'to': {
769 transformOrigin: 'left top',
770 transform: 'translate3d(0, 0, 0)',
771 opacity: '1',
772 },
773 },
774 rotateInUpRight: {
775 'from': {
776 transformOrigin: 'right bottom',
777 transform: 'rotate3d(0, 0, 1, -90deg)',
778 opacity: '0',
779 },
780 'to': {
781 transformOrigin: 'right bottom',
782 transform: 'translate3d(0, 0, 0)',
783 opacity: '1',
784 },
785 },
786 rotateOut: {
787 'from': {
788 transformOrigin: 'center',
789 opacity: '1',
790 },
791 'to': {
792 transformOrigin: 'center',
793 transform: 'rotate3d(0, 0, 1, 200deg)',
794 opacity: '0',
795 },
796 },
797 rotateOutDownLeft: {
798 'from': {
799 transformOrigin: 'left bottom',
800 opacity: '1',
801 },
802 'to': {
803 transformOrigin: 'left bottom',
804 transform: 'rotate3d(0, 0, 1, 45deg)',
805 opacity: '0',
806 },
807 },
808 rotateOutDownRight: {
809 'from': {
810 transformOrigin: 'right bottom',
811 opacity: '1',
812 },
813 'to': {
814 transformOrigin: 'right bottom',
815 transform: 'rotate3d(0, 0, 1, -45deg)',
816 opacity: '0',
817 },
818 },
819 rotateOutUpLeft: {
820 'from': {
821 transformOrigin: 'left bottom',
822 opacity: '1',
823 },
824 'to': {
825 transformOrigin: 'left bottom',
826 transform: 'rotate3d(0, 0, 1, -45deg)',
827 opacity: '0',
828 },
829 },
830 rotateOutUpRight: {
831 'from': {
832 transformOrigin: 'right bottom',
833 opacity: '1',
834 },
835 'to': {
836 transformOrigin: 'left bottom',
837 transform: 'rotate3d(0, 0, 1, 90deg)',
838 opacity: '0',
839 },
840 },
841 // roll
842 rollIn: {
843 'from': {
844 opacity: '0',
845 transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)',
846 },
847 'to': {
848 opacity: '1',
849 transform: 'translate3d(0, 0, 0)',
850 },
851 },
852 rollOut: {
853 'from': {
854 opacity: '1',
855 },
856 'to': {
857 opacity: '0',
858 transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)',
859 },
860 },
861 // zoom in
862 zoomIn: {
863 'from': {
864 opacity: '0',
865 transform: 'scale3d(0.3, 0.3, 0.3)',
866 },
867 '50%': {
868 opacity: '1',
869 },
870 },
871 zoomInDown: {
872 'from': {
873 opacity: '0',
874 transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
875 animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
876 },
877 '60%': {
878 opacity: '1',
879 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
880 animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
881 },
882 },
883 zoomInLeft: {
884 'from': {
885 opacity: '0',
886 transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
887 animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
888 },
889 '60%': {
890 opacity: '1',
891 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
892 animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
893 },
894 },
895 zoomInRight: {
896 'from': {
897 opacity: '0',
898 transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
899 animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
900 },
901 '60%': {
902 opacity: '1',
903 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
904 animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
905 },
906 },
907 zoomInUp: {
908 'from': {
909 opacity: '0',
910 transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
911 animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
912 },
913 '60%': {
914 opacity: '1',
915 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
916 animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
917 },
918 },
919 // bounce in
920 bounceIn: {
921 'from, 20%, 40%, 60%, 80%, to': {
922 animationTimingFunction: 'ease-in-out',
923 },
924 '0%': {
925 opacity: '0',
926 transform: 'scale3d(0.3, 0.3, 0.3)',
927 },
928 '20%': {
929 transform: 'scale3d(1.1, 1.1, 1.1)',
930 },
931 '40%': {
932 transform: 'scale3d(0.9, 0.9, 0.9)',
933 },
934 '60%': {
935 transform: 'scale3d(1.03, 1.03, 1.03)',
936 opacity: '1',
937 },
938 '80%': {
939 transform: 'scale3d(0.97, 0.97, 0.97)',
940 },
941 'to': {
942 opacity: '1',
943 transform: 'scale3d(1, 1, 1)',
944 },
945 },
946 bounceInDown: {
947 'from, 60%, 75%, 90%, to': {
948 animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
949 },
950 '0%': {
951 opacity: '0',
952 transform: 'translate3d(0, -3000px, 0)',
953 },
954 '60%': {
955 opacity: '1',
956 transform: 'translate3d(0, 25px, 0)',
957 },
958 '75%': {
959 transform: 'translate3d(0, -10px, 0)',
960 },
961 '90%': {
962 transform: 'translate3d(0, 5px, 0)',
963 },
964 'to': {
965 transform: 'translate3d(0, 0, 0)',
966 },
967 },
968 bounceInLeft: {
969 'from, 60%, 75%, 90%, to': {
970 animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
971 },
972 '0%': {
973 opacity: '0',
974 transform: 'translate3d(-3000px, 0, 0)',
975 },
976 '60%': {
977 opacity: '1',
978 transform: 'translate3d(25px, 0, 0)',
979 },
980 '75%': {
981 transform: 'translate3d(-10px, 0, 0)',
982 },
983 '90%': {
984 transform: 'translate3d(5px, 0, 0)',
985 },
986 'to': {
987 transform: 'translate3d(0, 0, 0)',
988 },
989 },
990 bounceInRight: {
991 'from, 60%, 75%, 90%, to': {
992 animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
993 },
994 '0%': {
995 opacity: '0',
996 transform: 'translate3d(3000px, 0, 0)',
997 },
998 '60%': {
999 opacity: '1',
1000 transform: 'translate3d(-25px, 0, 0)',
1001 },
1002 '75%': {
1003 transform: 'translate3d(10px, 0, 0)',
1004 },
1005 '90%': {
1006 transform: 'translate3d(-5px, 0, 0)',
1007 },
1008 'to': {
1009 transform: 'translate3d(0, 0, 0)',
1010 },
1011 },
1012 bounceInUp: {
1013 'from, 60%, 75%, 90%, to': {
1014 animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
1015 },
1016 '0%': {
1017 opacity: '0',
1018 transform: 'translate3d(0, 3000px, 0)',
1019 },
1020 '60%': {
1021 opacity: '1',
1022 transform: 'translate3d(0, -20px, 0)',
1023 },
1024 '75%': {
1025 transform: 'translate3d(0, 10px, 0)',
1026 },
1027 '90%': {
1028 transform: 'translate3d(0, -5px, 0)',
1029 },
1030 'to': {
1031 transform: 'translate3d(0, 0, 0)',
1032 },
1033 },
1034 // bounce out
1035 bounceOut: {
1036 '20%': {
1037 transform: 'scale3d(0.9, 0.9, 0.9)',
1038 },
1039 '50%, 55%': {
1040 opacity: '1',
1041 transform: 'scale3d(1.1, 1.1, 1.1)',
1042 },
1043 'to': {
1044 opacity: '0',
1045 transform: 'scale3d(0.3, 0.3, 0.3)',
1046 },
1047 },
1048 bounceOutDown: {
1049 '20%': {
1050 transform: 'translate3d(0, 10px, 0)',
1051 },
1052 '40%, 45%': {
1053 opacity: '1',
1054 transform: 'translate3d(0, -20px, 0)',
1055 },
1056 'to': {
1057 opacity: '0',
1058 transform: 'translate3d(0, 2000px, 0)',
1059 },
1060 },
1061 bounceOutLeft: {
1062 '20%': {
1063 opacity: '1',
1064 transform: 'translate3d(20px, 0, 0)',
1065 },
1066 'to': {
1067 opacity: '0',
1068 transform: 'translate3d(-2000px, 0, 0)',
1069 },
1070 },
1071 bounceOutRight: {
1072 '20%': {
1073 opacity: '1',
1074 transform: 'translate3d(-20px, 0, 0)',
1075 },
1076 'to': {
1077 opacity: '0',
1078 transform: 'translate3d(2000px, 0, 0)',
1079 },
1080 },
1081 bounceOutUp: {
1082 '20%': {
1083 transform: 'translate3d(0, -10px, 0)',
1084 },
1085 '40%, 45%': {
1086 opacity: '1',
1087 transform: 'translate3d(0, 20px, 0)',
1088 },
1089 'to': {
1090 opacity: '0',
1091 transform: 'translate3d(0, -2000px, 0)',
1092 },
1093 },
1094 // zoom out
1095 zoomOut: {
1096 'from': {
1097 opacity: '1',
1098 },
1099 '50%': {
1100 opacity: '0',
1101 transform: 'scale3d(0.3, 0.3, 0.3)',
1102 },
1103 'to': {
1104 opacity: '0',
1105 },
1106 },
1107 zoomOutDown: {
1108 '40%': {
1109 opacity: '1',
1110 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
1111 animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
1112 },
1113 'to': {
1114 opacity: '0',
1115 transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
1116 transformOrigin: 'center bottom',
1117 animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
1118 },
1119 },
1120 zoomOutLeft: {
1121 '40%': {
1122 opacity: '1',
1123 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)',
1124 },
1125 'to': {
1126 opacity: '0',
1127 transform: 'scale(0.1) translate3d(-2000px, 0, 0)',
1128 transformOrigin: 'left center',
1129 },
1130 },
1131 zoomOutRight: {
1132 '40%': {
1133 opacity: '1',
1134 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)',
1135 },
1136 'to': {
1137 opacity: '0',
1138 transform: 'scale(0.1) translate3d(2000px, 0, 0)',
1139 transformOrigin: 'right center',
1140 },
1141 },
1142 zoomOutUp: {
1143 '40%': {
1144 opacity: '1',
1145 transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
1146 animationTimingFunction: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
1147 },
1148 'to': {
1149 opacity: '0',
1150 transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)',
1151 transformOrigin: 'center bottom',
1152 animationTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1)',
1153 },
1154 },
1155 // slide in
1156 slideInDown: {
1157 'from': {
1158 transform: 'translate3d(0, -100%, 0)',
1159 visibility: 'visible',
1160 },
1161 'to': {
1162 transform: 'translate3d(0, 0, 0)',
1163 },
1164 },
1165 slideInLeft: {
1166 'from': {
1167 transform: 'translate3d(-100%, 0, 0)',
1168 visibility: 'visible',
1169 },
1170 'to': {
1171 transform: 'translate3d(0, 0, 0)',
1172 },
1173 },
1174 slideInRight: {
1175 'from': {
1176 transform: 'translate3d(100%, 0, 0)',
1177 visibility: 'visible',
1178 },
1179 'to': {
1180 transform: 'translate3d(0, 0, 0)',
1181 },
1182 },
1183 slideInUp: {
1184 'from': {
1185 transform: 'translate3d(0, 100%, 0)',
1186 visibility: 'visible',
1187 },
1188 'to': {
1189 transform: 'translate3d(0, 0, 0)',
1190 },
1191 },
1192 // slide out
1193 slideOutDown: {
1194 'from': {
1195 transform: 'translate3d(0, 0, 0)',
1196 },
1197 'to': {
1198 visibility: 'hidden',
1199 transform: 'translate3d(0, 100%, 0)',
1200 },
1201 },
1202 slideOutLeft: {
1203 'from': {
1204 transform: 'translate3d(0, 0, 0)',
1205 },
1206 'to': {
1207 visibility: 'hidden',
1208 transform: 'translate3d(-100%, 0, 0)',
1209 },
1210 },
1211 slideOutRight: {
1212 'from': {
1213 transform: 'translate3d(0, 0, 0)',
1214 },
1215 'to': {
1216 visibility: 'hidden',
1217 transform: 'translate3d(100%, 0, 0)',
1218 },
1219 },
1220 slideOutUp: {
1221 'from': {
1222 transform: 'translate3d(0, 0, 0)',
1223 },
1224 'to': {
1225 visibility: 'hidden',
1226 transform: 'translate3d(0, -100%, 0)',
1227 },
1228 },
1229 // fade in
1230 fadeIn: {
1231 'from': {
1232 opacity: '0',
1233 },
1234 'to': {
1235 opacity: '1',
1236 },
1237 },
1238 fadeInDown: {
1239 'from': {
1240 opacity: '0',
1241 transform: 'translate3d(0, -100%, 0)',
1242 },
1243 'to': {
1244 opacity: '1',
1245 transform: 'translate3d(0, 0, 0)',
1246 },
1247 },
1248 fadeInDownBig: {
1249 'from': {
1250 opacity: '0',
1251 transform: 'translate3d(0, -2000px, 0)',
1252 },
1253 'to': {
1254 opacity: '1',
1255 transform: 'translate3d(0, 0, 0)',
1256 },
1257 },
1258 fadeInLeft: {
1259 'from': {
1260 opacity: '0',
1261 transform: 'translate3d(-100%, 0, 0)',
1262 },
1263 'to': {
1264 opacity: '1',
1265 transform: 'translate3d(0, 0, 0)',
1266 },
1267 },
1268 fadeInLeftBig: {
1269 'from': {
1270 opacity: '0',
1271 transform: 'translate3d(-2000px, 0, 0)',
1272 },
1273 'to': {
1274 opacity: '1',
1275 transform: 'translate3d(0, 0, 0)',
1276 },
1277 },
1278 fadeInRight: {
1279 'from': {
1280 opacity: '0',
1281 transform: 'translate3d(100%, 0, 0)',
1282 },
1283 'to': {
1284 opacity: '1',
1285 transform: 'translate3d(0, 0, 0)',
1286 },
1287 },
1288 fadeInRightBig: {
1289 'from': {
1290 opacity: '0',
1291 transform: 'translate3d(2000px, 0, 0)',
1292 },
1293 'to': {
1294 opacity: '1',
1295 transform: 'translate3d(0, 0, 0)',
1296 },
1297 },
1298 fadeInUp: {
1299 'from': {
1300 opacity: '0',
1301 transform: 'translate3d(0, 100%, 0)',
1302 },
1303 'to': {
1304 opacity: '1',
1305 transform: 'translate3d(0, 0, 0)',
1306 },
1307 },
1308 fadeInUpBig: {
1309 'from': {
1310 opacity: '0',
1311 transform: 'translate3d(0, 2000px, 0)',
1312 },
1313 'to': {
1314 opacity: '1',
1315 transform: 'translate3d(0, 0, 0)',
1316 },
1317 },
1318 fadeInTopLeft: {
1319 'from': {
1320 opacity: '0',
1321 transform: 'translate3d(-100%, -100%, 0)',
1322 },
1323 'to': {
1324 opacity: '1',
1325 transform: 'translate3d(0, 0, 0)',
1326 },
1327 },
1328 fadeInTopRight: {
1329 'from': {
1330 opacity: '0',
1331 transform: 'translate3d(100%, -100%, 0)',
1332 },
1333 'to': {
1334 opacity: '1',
1335 transform: 'translate3d(0, 0, 0)',
1336 },
1337 },
1338 fadeInBottomLeft: {
1339 'from': {
1340 opacity: '0',
1341 transform: 'translate3d(-100%, 100%, 0)',
1342 },
1343 'to': {
1344 opacity: '1',
1345 transform: 'translate3d(0, 0, 0)',
1346 },
1347 },
1348 fadeInBottomRight: {
1349 'from': {
1350 opacity: '0',
1351 transform: 'translate3d(100%, 100%, 0)',
1352 },
1353 'to': {
1354 opacity: '1',
1355 transform: 'translate3d(0, 0, 0)',
1356 },
1357 },
1358 // fade out
1359 fadeOut: {
1360 'from': {
1361 opacity: '1',
1362 },
1363 'to': {
1364 opacity: '0',
1365 },
1366 },
1367 fadeOutDown: {
1368 'from': {
1369 opacity: '1',
1370 },
1371 'to': {
1372 opacity: '0',
1373 transform: 'translate3d(0, 100%, 0)',
1374 },
1375 },
1376 fadeOutDownBig: {
1377 'from': {
1378 opacity: '1',
1379 },
1380 'to': {
1381 opacity: '0',
1382 transform: 'translate3d(0, 2000px, 0)',
1383 },
1384 },
1385 fadeOutLeft: {
1386 'from': {
1387 opacity: '1',
1388 },
1389 'to': {
1390 opacity: '0',
1391 transform: 'translate3d(-100%, 0, 0)',
1392 },
1393 },
1394 fadeOutLeftBig: {
1395 'from': {
1396 opacity: '1',
1397 },
1398 'to': {
1399 opacity: '0',
1400 transform: 'translate3d(-2000px, 0, 0)',
1401 },
1402 },
1403 fadeOutRight: {
1404 'from': {
1405 opacity: '1',
1406 },
1407 'to': {
1408 opacity: '0',
1409 transform: 'translate3d(100%, 0, 0)',
1410 },
1411 },
1412 fadeOutRightBig: {
1413 'from': {
1414 opacity: '1',
1415
1416 },
1417 'to': {
1418 opacity: '0',
1419 transform: 'translate3d(2000px, 0, 0)',
1420 },
1421 },
1422 fadeOutUp: {
1423 'from': {
1424 opacity: '1',
1425 },
1426 'to': {
1427 opacity: '0',
1428 transform: 'translate3d(0, -100%, 0)',
1429 },
1430 },
1431 fadeOutUpBig: {
1432 'from': {
1433 opacity: '1',
1434
1435 },
1436 'to': {
1437 opacity: '0',
1438 transform: 'translate3d(0, -2000px, 0)',
1439 },
1440 },
1441 fadeOutTopLeft: {
1442 'from': {
1443 opacity: '1',
1444 transform: 'translate3d(0, 0, 0)',
1445
1446 },
1447 'to': {
1448 opacity: '0',
1449 transform: 'translate3d(-100%, -100%, 0)',
1450 },
1451 },
1452 fadeOutTopRight: {
1453 'from': {
1454 opacity: '1',
1455 transform: 'translate3d(0, 0, 0)',
1456
1457 },
1458 'to': {
1459 opacity: '0',
1460 transform: 'translate3d(100%, -100%, 0)',
1461 },
1462 },
1463 fadeOutBottomLeft: {
1464 'from': {
1465 opacity: '1',
1466 transform: 'translate3d(0, 0, 0)',
1467
1468 },
1469 'to': {
1470 opacity: '0',
1471 transform: 'translate3d(-100%, 100%, 0)',
1472 },
1473 },
1474 fadeOutBottomRight: {
1475 'from': {
1476 opacity: '1',
1477 transform: 'translate3d(0, 0, 0)',
1478
1479 },
1480 'to': {
1481 opacity: '0',
1482 transform: 'translate3d(100%, 100%, 0)',
1483 },
1484 },
1485 // back in
1486 backInUp: {
1487 '0%': {
1488 opacity: '0.7',
1489 transform: 'translateY(1200px) scale(0.7)',
1490 },
1491 '80%': {
1492 opacity: '0.7',
1493 transform: 'translateY(0px) scale(0.7)',
1494 },
1495 '100%': {
1496 opacity: '1',
1497 transform: 'scale(1)',
1498 },
1499 },
1500 backInDown: {
1501 '0%': {
1502 opacity: '0.7',
1503 transform: 'translateY(-1200px) scale(0.7)',
1504 },
1505 '80%': {
1506 opacity: '0.7',
1507 transform: 'translateY(0px) scale(0.7)',
1508 },
1509 '100%': {
1510 opacity: '1',
1511 transform: 'scale(1)',
1512 },
1513 },
1514 backInLeft: {
1515 '0%': {
1516 opacity: '0.7',
1517 transform: 'translateX(-2000px) scale(0.7)',
1518 },
1519 '80%': {
1520 opacity: '0.7',
1521 transform: 'translateX(0px) scale(0.7)',
1522 },
1523 '100%': {
1524 opacity: '1',
1525 transform: 'scale(1)',
1526 },
1527 },
1528 backInRight: {
1529 '0%': {
1530 opacity: '0.7',
1531 transform: 'translateX(2000px) scale(0.7)',
1532 },
1533 '80%': {
1534 opacity: '0.7',
1535 transform: 'translateY(0px) scale(0.7)',
1536 },
1537 '100%': {
1538 opacity: '1',
1539 transform: 'scale(1)',
1540 },
1541 },
1542 // back out
1543 backOutUp: {
1544 '0%': {
1545 opacity: '1',
1546 transform: 'scale(1)',
1547 },
1548 '80%': {
1549 opacity: '0.7',
1550 transform: 'translateY(0px) scale(0.7)',
1551 },
1552 '100%': {
1553 opacity: '0.7',
1554 transform: 'translateY(-700px) scale(0.7)',
1555 },
1556 },
1557 backOutDown: {
1558 '0%': {
1559 opacity: '1',
1560 transform: 'scale(1)',
1561 },
1562 '80%': {
1563 opacity: '0.7',
1564 transform: 'translateY(0px) scale(0.7)',
1565 },
1566 '100%': {
1567 opacity: '0.7',
1568 transform: 'translateY(700px) scale(0.7)',
1569 },
1570 },
1571 backOutLeft: {
1572 '0%': {
1573 opacity: '1',
1574 transform: 'scale(1)',
1575 },
1576 '80%': {
1577 opacity: '0.7',
1578 transform: 'translateX(-2000px) scale(0.7)',
1579 },
1580 '100%': {
1581 opacity: '0.7',
1582 transform: 'translateY(-700px) scale(0.7)',
1583 },
1584 },
1585 backOutRight: {
1586 '0%': {
1587 opacity: '1',
1588 transform: 'scale(1)',
1589 },
1590 '80%': {
1591 opacity: '0.7',
1592 transform: 'translateY(0px) scale(0.7)',
1593 },
1594 '100%': {
1595 opacity: '0.7',
1596 transform: 'translateX(2000px) scale(0.7)',
1597 },
1598 },
1599};
1600
1601const variantOrder = [
1602 'hover',
1603 'focus',
1604 'active',
1605 'visited',
1606 'link',
1607 'target',
1608 'focus-visible',
1609 'focus-within',
1610 'checked',
1611 'not-checked',
1612 'default',
1613 'disabled',
1614 'enabled',
1615 'indeterminate',
1616 'invalid',
1617 'valid',
1618 'optional',
1619 'required',
1620 'placeholder-shown',
1621 'read-only',
1622 'read-write',
1623 'not-disabled',
1624 'first-of-type',
1625 'not-first-of-type',
1626 'last-of-type',
1627 'not-last-of-type',
1628 'first',
1629 'last',
1630 'not-first',
1631 'not-last',
1632 'only-child',
1633 'not-only-child',
1634 'only-of-type',
1635 'not-only-of-type',
1636 'even',
1637 'odd',
1638 'even-of-type',
1639 'odd-of-type',
1640 'root',
1641 'empty',
1642 'before',
1643 'after',
1644 'first-letter',
1645 'first-line',
1646 'file-selector-button',
1647 'selection',
1648 'svg',
1649 'all',
1650 'children',
1651 'siblings',
1652 'sibling',
1653 'ltr',
1654 'rtl',
1655 'group-hover',
1656 'group-focus',
1657 'group-active',
1658 'group-visited',
1659 'motion-safe',
1660 'motion-reduce',
1661];
1662
1663
1664
1665var layerOrder; (function (layerOrder) {
1666 const base = 10; layerOrder[layerOrder["base"] = base] = "base";
1667 const components = 150; layerOrder[layerOrder["components"] = components] = "components";
1668 const shortcuts = 160; layerOrder[layerOrder["shortcuts"] = shortcuts] = "shortcuts";
1669 const utilities = 20000; layerOrder[layerOrder["utilities"] = utilities] = "utilities";
1670})(layerOrder || (layerOrder = {}));
1671
1672var pluginOrder; (function (pluginOrder) {
1673 const container = 100; pluginOrder[pluginOrder['container'] = container] = 'container';
1674 const space = 200; pluginOrder[pluginOrder['space'] = space] = 'space';
1675 const divideWidth = 300; pluginOrder[pluginOrder['divideWidth'] = divideWidth] = 'divideWidth';
1676 const divideColor = 400; pluginOrder[pluginOrder['divideColor'] = divideColor] = 'divideColor';
1677 const divideStyle = 500; pluginOrder[pluginOrder['divideStyle'] = divideStyle] = 'divideStyle';
1678 const divideOpacity = 600; pluginOrder[pluginOrder['divideOpacity'] = divideOpacity] = 'divideOpacity';
1679 const accessibility = 700; pluginOrder[pluginOrder['accessibility'] = accessibility] = 'accessibility';
1680 const appearance = 800; pluginOrder[pluginOrder['appearance'] = appearance] = 'appearance';
1681 const backgroundAttachment = 900; pluginOrder[pluginOrder['backgroundAttachment'] = backgroundAttachment] = 'backgroundAttachment';
1682 const backgroundClip = 1000; pluginOrder[pluginOrder['backgroundClip'] = backgroundClip] = 'backgroundClip';
1683 const backgroundColor = 1100; pluginOrder[pluginOrder['backgroundColor'] = backgroundColor] = 'backgroundColor';
1684 const backgroundImage = 1200; pluginOrder[pluginOrder['backgroundImage'] = backgroundImage] = 'backgroundImage';
1685 const gradientColorStops = 1300; pluginOrder[pluginOrder['gradientColorStops'] = gradientColorStops] = 'gradientColorStops';
1686 const backgroundOpacity = 1400; pluginOrder[pluginOrder['backgroundOpacity'] = backgroundOpacity] = 'backgroundOpacity';
1687 const backgroundPosition = 1500; pluginOrder[pluginOrder['backgroundPosition'] = backgroundPosition] = 'backgroundPosition';
1688 const backgroundRepeat = 1600; pluginOrder[pluginOrder['backgroundRepeat'] = backgroundRepeat] = 'backgroundRepeat';
1689 const backgroundSize = 1700; pluginOrder[pluginOrder['backgroundSize'] = backgroundSize] = 'backgroundSize';
1690 const backgroundOrigin = 1750; pluginOrder[pluginOrder['backgroundOrigin'] = backgroundOrigin] = 'backgroundOrigin';
1691 const borderCollapse = 1800; pluginOrder[pluginOrder['borderCollapse'] = borderCollapse] = 'borderCollapse';
1692 const borderColor = 1900; pluginOrder[pluginOrder['borderColor'] = borderColor] = 'borderColor';
1693 const borderOpacity = 2000; pluginOrder[pluginOrder['borderOpacity'] = borderOpacity] = 'borderOpacity';
1694 const borderRadius = 2100; pluginOrder[pluginOrder['borderRadius'] = borderRadius] = 'borderRadius';
1695 const borderStyle = 2200; pluginOrder[pluginOrder['borderStyle'] = borderStyle] = 'borderStyle';
1696 const borderWidth = 2300; pluginOrder[pluginOrder['borderWidth'] = borderWidth] = 'borderWidth';
1697 const boxDecorationBreak = 2350; pluginOrder[pluginOrder['boxDecorationBreak'] = boxDecorationBreak] = 'boxDecorationBreak';
1698 const boxSizing = 2400; pluginOrder[pluginOrder['boxSizing'] = boxSizing] = 'boxSizing';
1699 const cursor = 2500; pluginOrder[pluginOrder['cursor'] = cursor] = 'cursor';
1700 const captionSide = 2550; pluginOrder[pluginOrder['captionSide'] = captionSide] = 'captionSide';
1701 const emptyCells = 2560; pluginOrder[pluginOrder['emptyCells'] = emptyCells] = 'emptyCells';
1702 const display = 2600; pluginOrder[pluginOrder['display'] = display] = 'display';
1703 const flexDirection = 2700; pluginOrder[pluginOrder['flexDirection'] = flexDirection] = 'flexDirection';
1704 const flexWrap = 2800; pluginOrder[pluginOrder['flexWrap'] = flexWrap] = 'flexWrap';
1705 const placeItems = 2900; pluginOrder[pluginOrder['placeItems'] = placeItems] = 'placeItems';
1706 const placeContent = 3000; pluginOrder[pluginOrder['placeContent'] = placeContent] = 'placeContent';
1707 const placeSelf = 3100; pluginOrder[pluginOrder['placeSelf'] = placeSelf] = 'placeSelf';
1708 const alignItems = 3200; pluginOrder[pluginOrder['alignItems'] = alignItems] = 'alignItems';
1709 const alignContent = 3300; pluginOrder[pluginOrder['alignContent'] = alignContent] = 'alignContent';
1710 const alignSelf = 3400; pluginOrder[pluginOrder['alignSelf'] = alignSelf] = 'alignSelf';
1711 const justifyItems = 3500; pluginOrder[pluginOrder['justifyItems'] = justifyItems] = 'justifyItems';
1712 const justifyContent = 3600; pluginOrder[pluginOrder['justifyContent'] = justifyContent] = 'justifyContent';
1713 const justifySelf = 3700; pluginOrder[pluginOrder['justifySelf'] = justifySelf] = 'justifySelf';
1714 const flex = 3800; pluginOrder[pluginOrder['flex'] = flex] = 'flex';
1715 const flexGrow = 3900; pluginOrder[pluginOrder['flexGrow'] = flexGrow] = 'flexGrow';
1716 const flexShrink = 4000; pluginOrder[pluginOrder['flexShrink'] = flexShrink] = 'flexShrink';
1717 const order = 4100; pluginOrder[pluginOrder['order'] = order] = 'order';
1718 const float = 4200; pluginOrder[pluginOrder['float'] = float] = 'float';
1719 const clear = 4300; pluginOrder[pluginOrder['clear'] = clear] = 'clear';
1720 const fontFamily = 4400; pluginOrder[pluginOrder['fontFamily'] = fontFamily] = 'fontFamily';
1721 const fontWeight = 4500; pluginOrder[pluginOrder['fontWeight'] = fontWeight] = 'fontWeight';
1722 const height = 4600; pluginOrder[pluginOrder['height'] = height] = 'height';
1723 const fontSize = 4700; pluginOrder[pluginOrder['fontSize'] = fontSize] = 'fontSize';
1724 const lineHeight = 4800; pluginOrder[pluginOrder['lineHeight'] = lineHeight] = 'lineHeight';
1725 const listStylePosition = 4900; pluginOrder[pluginOrder['listStylePosition'] = listStylePosition] = 'listStylePosition';
1726 const listStyleType = 5000; pluginOrder[pluginOrder['listStyleType'] = listStyleType] = 'listStyleType';
1727 const margin = 5100; pluginOrder[pluginOrder['margin'] = margin] = 'margin';
1728 const maxHeight = 5200; pluginOrder[pluginOrder['maxHeight'] = maxHeight] = 'maxHeight';
1729 const maxWidth = 5300; pluginOrder[pluginOrder['maxWidth'] = maxWidth] = 'maxWidth';
1730 const minHeight = 5400; pluginOrder[pluginOrder['minHeight'] = minHeight] = 'minHeight';
1731 const minWidth = 5500; pluginOrder[pluginOrder['minWidth'] = minWidth] = 'minWidth';
1732 const objectFit = 5600; pluginOrder[pluginOrder['objectFit'] = objectFit] = 'objectFit';
1733 const objectPosition = 5700; pluginOrder[pluginOrder['objectPosition'] = objectPosition] = 'objectPosition';
1734 const opacity = 5800; pluginOrder[pluginOrder['opacity'] = opacity] = 'opacity';
1735 const outline = 5900; pluginOrder[pluginOrder['outline'] = outline] = 'outline';
1736 const overflow = 6000; pluginOrder[pluginOrder['overflow'] = overflow] = 'overflow';
1737 const overscrollBehavior = 6100; pluginOrder[pluginOrder['overscrollBehavior'] = overscrollBehavior] = 'overscrollBehavior';
1738 const padding = 6200; pluginOrder[pluginOrder['padding'] = padding] = 'padding';
1739 const placeholderColor = 6300; pluginOrder[pluginOrder['placeholderColor'] = placeholderColor] = 'placeholderColor';
1740 const placeholderOpacity = 6400; pluginOrder[pluginOrder['placeholderOpacity'] = placeholderOpacity] = 'placeholderOpacity';
1741 const caretColor = 6450; pluginOrder[pluginOrder['caretColor'] = caretColor] = 'caretColor';
1742 const caretOpacity = 6460; pluginOrder[pluginOrder['caretOpacity'] = caretOpacity] = 'caretOpacity';
1743 const tabSize = 6470; pluginOrder[pluginOrder['tabSize'] = tabSize] = 'tabSize';
1744 const pointerEvents = 6500; pluginOrder[pluginOrder['pointerEvents'] = pointerEvents] = 'pointerEvents';
1745 const position = 6600; pluginOrder[pluginOrder['position'] = position] = 'position';
1746 const inset = 6700; pluginOrder[pluginOrder['inset'] = inset] = 'inset';
1747 const resize = 6800; pluginOrder[pluginOrder['resize'] = resize] = 'resize';
1748 const boxShadow = 6900; pluginOrder[pluginOrder['boxShadow'] = boxShadow] = 'boxShadow';
1749 const boxShadowColor = 6950; pluginOrder[pluginOrder['boxShadowColor'] = boxShadowColor] = 'boxShadowColor';
1750 const ringWidth = 7000; pluginOrder[pluginOrder['ringWidth'] = ringWidth] = 'ringWidth';
1751 const ringOffsetColor = 7100; pluginOrder[pluginOrder['ringOffsetColor'] = ringOffsetColor] = 'ringOffsetColor';
1752 const ringOffsetWidth = 7200; pluginOrder[pluginOrder['ringOffsetWidth'] = ringOffsetWidth] = 'ringOffsetWidth';
1753 const ringColor = 7300; pluginOrder[pluginOrder['ringColor'] = ringColor] = 'ringColor';
1754 const ringOpacity = 7400; pluginOrder[pluginOrder['ringOpacity'] = ringOpacity] = 'ringOpacity';
1755 const fill = 7500; pluginOrder[pluginOrder['fill'] = fill] = 'fill';
1756 const stroke = 7600; pluginOrder[pluginOrder['stroke'] = stroke] = 'stroke';
1757 const strokeWidth = 7700; pluginOrder[pluginOrder['strokeWidth'] = strokeWidth] = 'strokeWidth';
1758 const strokeDashArray = 7750; pluginOrder[pluginOrder['strokeDashArray'] = strokeDashArray] = 'strokeDashArray';
1759 const strokeDashOffset = 7760; pluginOrder[pluginOrder['strokeDashOffset'] = strokeDashOffset] = 'strokeDashOffset';
1760 const tableLayout = 7800; pluginOrder[pluginOrder['tableLayout'] = tableLayout] = 'tableLayout';
1761 const textAlign = 7900; pluginOrder[pluginOrder['textAlign'] = textAlign] = 'textAlign';
1762 const textColor = 8000; pluginOrder[pluginOrder['textColor'] = textColor] = 'textColor';
1763 const textOpacity = 8100; pluginOrder[pluginOrder['textOpacity'] = textOpacity] = 'textOpacity';
1764 const textOverflow = 8200; pluginOrder[pluginOrder['textOverflow'] = textOverflow] = 'textOverflow';
1765 const textShadow = 8250; pluginOrder[pluginOrder['textShadow'] = textShadow] = 'textShadow';
1766 const fontStyle = 8300; pluginOrder[pluginOrder['fontStyle'] = fontStyle] = 'fontStyle';
1767 const textTransform = 8400; pluginOrder[pluginOrder['textTransform'] = textTransform] = 'textTransform';
1768 const textDecorationStyle = 8450; pluginOrder[pluginOrder['textDecorationStyle'] = textDecorationStyle] = 'textDecorationStyle';
1769 const textDecorationLength = 8455; pluginOrder[pluginOrder['textDecorationLength'] = textDecorationLength] = 'textDecorationLength';
1770 const textDecorationColor = 8460; pluginOrder[pluginOrder['textDecorationColor'] = textDecorationColor] = 'textDecorationColor';
1771 const textDecorationOpacity = 8470; pluginOrder[pluginOrder['textDecorationOpacity'] = textDecorationOpacity] = 'textDecorationOpacity';
1772 const textDecorationOffset = 8480; pluginOrder[pluginOrder['textDecorationOffset'] = textDecorationOffset] = 'textDecorationOffset';
1773 const textDecoration = 8500; pluginOrder[pluginOrder['textDecoration'] = textDecoration] = 'textDecoration';
1774 const textIndent = 8550; pluginOrder[pluginOrder['textIndent'] = textIndent] = 'textIndent';
1775 const textStrokeColor = 8560; pluginOrder[pluginOrder['textStrokeColor'] = textStrokeColor] = 'textStrokeColor';
1776 const textStrokeWidth = 8570; pluginOrder[pluginOrder['textStrokeWidth'] = textStrokeWidth] = 'textStrokeWidth';
1777 const content = 8580; pluginOrder[pluginOrder['content'] = content] = 'content';
1778 const fontSmoothing = 8600; pluginOrder[pluginOrder['fontSmoothing'] = fontSmoothing] = 'fontSmoothing';
1779 const fontVariantNumeric = 8700; pluginOrder[pluginOrder['fontVariantNumeric'] = fontVariantNumeric] = 'fontVariantNumeric';
1780 const letterSpacing = 8800; pluginOrder[pluginOrder['letterSpacing'] = letterSpacing] = 'letterSpacing';
1781 const userSelect = 8900; pluginOrder[pluginOrder['userSelect'] = userSelect] = 'userSelect';
1782 const verticalAlign = 9000; pluginOrder[pluginOrder['verticalAlign'] = verticalAlign] = 'verticalAlign';
1783 const visibility = 9100; pluginOrder[pluginOrder['visibility'] = visibility] = 'visibility';
1784 const backfaceVisibility = 9150; pluginOrder[pluginOrder['backfaceVisibility'] = backfaceVisibility] = 'backfaceVisibility';
1785 const whitespace = 9200; pluginOrder[pluginOrder['whitespace'] = whitespace] = 'whitespace';
1786 const wordBreak = 9300; pluginOrder[pluginOrder['wordBreak'] = wordBreak] = 'wordBreak';
1787 const writingMode = 9340; pluginOrder[pluginOrder['writingMode'] = writingMode] = 'writingMode';
1788 const hyphens = 9350; pluginOrder[pluginOrder['hyphens'] = hyphens] = 'hyphens';
1789 const width = 9400; pluginOrder[pluginOrder['width'] = width] = 'width';
1790 const zIndex = 9500; pluginOrder[pluginOrder['zIndex'] = zIndex] = 'zIndex';
1791 const isolation = 9550; pluginOrder[pluginOrder['isolation'] = isolation] = 'isolation';
1792 const gap = 9600; pluginOrder[pluginOrder['gap'] = gap] = 'gap';
1793 const gridAutoFlow = 9700; pluginOrder[pluginOrder['gridAutoFlow'] = gridAutoFlow] = 'gridAutoFlow';
1794 const gridTemplateColumns = 9800; pluginOrder[pluginOrder['gridTemplateColumns'] = gridTemplateColumns] = 'gridTemplateColumns';
1795 const gridAutoColumns = 9900; pluginOrder[pluginOrder['gridAutoColumns'] = gridAutoColumns] = 'gridAutoColumns';
1796 const gridColumn = 10000; pluginOrder[pluginOrder['gridColumn'] = gridColumn] = 'gridColumn';
1797 const gridColumnStart = 10100; pluginOrder[pluginOrder['gridColumnStart'] = gridColumnStart] = 'gridColumnStart';
1798 const gridColumnEnd = 10200; pluginOrder[pluginOrder['gridColumnEnd'] = gridColumnEnd] = 'gridColumnEnd';
1799 const gridTemplateRows = 10300; pluginOrder[pluginOrder['gridTemplateRows'] = gridTemplateRows] = 'gridTemplateRows';
1800 const gridAutoRows = 10400; pluginOrder[pluginOrder['gridAutoRows'] = gridAutoRows] = 'gridAutoRows';
1801 const gridRow = 10500; pluginOrder[pluginOrder['gridRow'] = gridRow] = 'gridRow';
1802 const gridRowStart = 10600; pluginOrder[pluginOrder['gridRowStart'] = gridRowStart] = 'gridRowStart';
1803 const gridRowEnd = 10700; pluginOrder[pluginOrder['gridRowEnd'] = gridRowEnd] = 'gridRowEnd';
1804 const transform = 10800; pluginOrder[pluginOrder['transform'] = transform] = 'transform';
1805 const transformOrigin = 10900; pluginOrder[pluginOrder['transformOrigin'] = transformOrigin] = 'transformOrigin';
1806 const scale = 11000; pluginOrder[pluginOrder['scale'] = scale] = 'scale';
1807 const rotate = 11100; pluginOrder[pluginOrder['rotate'] = rotate] = 'rotate';
1808 const translate = 11200; pluginOrder[pluginOrder['translate'] = translate] = 'translate';
1809 const skew = 11300; pluginOrder[pluginOrder['skew'] = skew] = 'skew';
1810 const perspective = 11350; pluginOrder[pluginOrder['perspective'] = perspective] = 'perspective';
1811 const perspectiveOrigin = 11360; pluginOrder[pluginOrder['perspectiveOrigin'] = perspectiveOrigin] = 'perspectiveOrigin';
1812 const transitionProperty = 11400; pluginOrder[pluginOrder['transitionProperty'] = transitionProperty] = 'transitionProperty';
1813 const transitionTimingFunction = 11500; pluginOrder[pluginOrder['transitionTimingFunction'] = transitionTimingFunction] = 'transitionTimingFunction';
1814 const transitionDuration = 11600; pluginOrder[pluginOrder['transitionDuration'] = transitionDuration] = 'transitionDuration';
1815 const transitionDelay = 11700; pluginOrder[pluginOrder['transitionDelay'] = transitionDelay] = 'transitionDelay';
1816 const keyframes = 11800; pluginOrder[pluginOrder['keyframes'] = keyframes] = 'keyframes';
1817 const animation = 11900; pluginOrder[pluginOrder['animation'] = animation] = 'animation';
1818 const imageRendering = 11950; pluginOrder[pluginOrder['imageRendering'] = imageRendering] = 'imageRendering';
1819 const mixBlendMode = 12000; pluginOrder[pluginOrder['mixBlendMode'] = mixBlendMode] = 'mixBlendMode';
1820 const backgroundBlendMode = 12100; pluginOrder[pluginOrder['backgroundBlendMode'] = backgroundBlendMode] = 'backgroundBlendMode';
1821 const filter = 12200; pluginOrder[pluginOrder['filter'] = filter] = 'filter';
1822 const blur = 12300; pluginOrder[pluginOrder['blur'] = blur] = 'blur';
1823 const brightness = 12400; pluginOrder[pluginOrder['brightness'] = brightness] = 'brightness';
1824 const contrast = 12500; pluginOrder[pluginOrder['contrast'] = contrast] = 'contrast';
1825 const dropShadow = 12600; pluginOrder[pluginOrder['dropShadow'] = dropShadow] = 'dropShadow';
1826 const grayscale = 12700; pluginOrder[pluginOrder['grayscale'] = grayscale] = 'grayscale';
1827 const hueRotate = 12800; pluginOrder[pluginOrder['hueRotate'] = hueRotate] = 'hueRotate';
1828 const invert = 12900; pluginOrder[pluginOrder['invert'] = invert] = 'invert';
1829 const saturate = 13000; pluginOrder[pluginOrder['saturate'] = saturate] = 'saturate';
1830 const sepia = 13100; pluginOrder[pluginOrder['sepia'] = sepia] = 'sepia';
1831 const backdropFilter = 13200; pluginOrder[pluginOrder['backdropFilter'] = backdropFilter] = 'backdropFilter';
1832 const backdropBlur = 13300; pluginOrder[pluginOrder['backdropBlur'] = backdropBlur] = 'backdropBlur';
1833 const backdropBrightness = 13400; pluginOrder[pluginOrder['backdropBrightness'] = backdropBrightness] = 'backdropBrightness';
1834 const backdropContrast = 13500; pluginOrder[pluginOrder['backdropContrast'] = backdropContrast] = 'backdropContrast';
1835 const backdropGrayscale = 13600; pluginOrder[pluginOrder['backdropGrayscale'] = backdropGrayscale] = 'backdropGrayscale';
1836 const backdropHueRotate = 13700; pluginOrder[pluginOrder['backdropHueRotate'] = backdropHueRotate] = 'backdropHueRotate';
1837 const backdropInvert = 13800; pluginOrder[pluginOrder['backdropInvert'] = backdropInvert] = 'backdropInvert';
1838 const backdropOpacity = 13900; pluginOrder[pluginOrder['backdropOpacity'] = backdropOpacity] = 'backdropOpacity';
1839 const backdropSaturate = 14000; pluginOrder[pluginOrder['backdropSaturate'] = backdropSaturate] = 'backdropSaturate';
1840 const backdropSepia = 14100; pluginOrder[pluginOrder['backdropSepia'] = backdropSepia] = 'backdropSepia';
1841})(pluginOrder || (pluginOrder = {}));
1842
1843function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
1844
1845const defaultColors = {
1846 transparent: 'transparent',
1847 current: 'currentColor',
1848 light: colors.light,
1849 dark: colors.dark,
1850 black: colors.black,
1851 white: colors.white,
1852 gray: colors.coolGray,
1853 red: colors.red,
1854 yellow: colors.amber,
1855 green: colors.emerald,
1856 blue: colors.blue,
1857 indigo: colors.indigo,
1858 purple: colors.violet,
1859 pink: colors.pink,
1860 rose: colors.rose,
1861 fuchsia: colors.fuchsia,
1862 violet: colors.violet,
1863 cyan: colors.cyan,
1864 teal: colors.teal,
1865 emerald: colors.emerald,
1866 lime: colors.lime,
1867 amber: colors.amber,
1868 orange: colors.orange,
1869 'light-blue': colors.lightBlue,
1870 'warm-gray': colors.warmGray,
1871 'true-gray': colors.trueGray,
1872 'cool-gray': colors.coolGray,
1873 'blue-gray': colors.blueGray,
1874};
1875
1876const baseConfig = {
1877 // purge: [],
1878 presets: [],
1879 prefixer: true,
1880 attributify: false,
1881 darkMode: 'class', // or 'media'
1882 theme: {
1883 screens: {
1884 sm: '640px',
1885 md: '768px',
1886 lg: '1024px',
1887 xl: '1280px',
1888 '2xl': '1536px',
1889 },
1890 colors: defaultColors,
1891 spacing: {
1892 px: '1px',
1893 0: '0px',
1894 0.5: '0.125rem',
1895 1: '0.25rem',
1896 1.5: '0.375rem',
1897 2: '0.5rem',
1898 2.5: '0.625rem',
1899 3: '0.75rem',
1900 3.5: '0.875rem',
1901 4: '1rem',
1902 5: '1.25rem',
1903 6: '1.5rem',
1904 7: '1.75rem',
1905 8: '2rem',
1906 9: '2.25rem',
1907 10: '2.5rem',
1908 11: '2.75rem',
1909 12: '3rem',
1910 14: '3.5rem',
1911 16: '4rem',
1912 20: '5rem',
1913 24: '6rem',
1914 28: '7rem',
1915 32: '8rem',
1916 36: '9rem',
1917 40: '10rem',
1918 44: '11rem',
1919 48: '12rem',
1920 52: '13rem',
1921 56: '14rem',
1922 60: '15rem',
1923 64: '16rem',
1924 72: '18rem',
1925 80: '20rem',
1926 96: '24rem',
1927 // float -> float/4 rem
1928 },
1929 animation: {
1930 none: 'none',
1931 spin: 'spin 1s linear infinite',
1932 ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
1933 pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
1934 bounce: 'bounce 1s infinite',
1935 'shock': {
1936 animation: 'shock',
1937 transformOrigin: 'center bottom',
1938 },
1939 'flash': 'flash',
1940 'bubble': 'bubble',
1941 'rubber-band': 'rubberBand',
1942 'shake-x': 'shakeX',
1943 'shake-y': 'shakeY',
1944 'head-shake': 'headShake 1s ease-in-out',
1945 'swing': {
1946 animation: 'swing',
1947 transformOrigin: 'top center',
1948 },
1949 'tada': 'tada',
1950 'wobble': 'wobble',
1951 'jello': 'jello',
1952 'heart-beat': 'heartBeat 1s ease-in-out',
1953 'hinge': 'hinge 2s',
1954 'jack-in': 'jackInTheBox',
1955 'light-speed-in-left': 'lightSpeedInLeft',
1956 'light-speed-in-right': 'lightSpeedInRight',
1957 'light-speed-out-left': 'lightSpeedOutLeft',
1958 'light-speed-out-right': 'lightSpeedOutRight',
1959 'flip': {
1960 animation: 'flip',
1961 backfaceVisibility: 'visible',
1962 },
1963 'flip-in-x': {
1964 animation: 'flipInX',
1965 backfaceVisibility: 'visible',
1966 },
1967 'flip-in-y': {
1968 animation: 'flipInY',
1969 backfaceVisibility: 'visible',
1970 },
1971 'flip-out-x': {
1972 animation: 'flipOutX',
1973 backfaceVisibility: 'visible',
1974 },
1975 'flip-out-y': {
1976 animation: 'flipOutY',
1977 backfaceVisibility: 'visible',
1978 },
1979 'rotate-in': 'rotateIn',
1980 'rotate-in-down-left': 'rotateInDownLeft',
1981 'rotate-in-down-right': 'rotateInDownRight',
1982 'rotate-in-up-left': 'rotateInUpLeft',
1983 'rotate-in-up-right': 'rotateInUpRight',
1984 'rotate-out': 'rotateOut',
1985 'rotate-out-down-left': 'rotateOutDownLeft',
1986 'rotate-out-down-right': 'rotateOutDownRight',
1987 'rotate-out-up-left': 'rotateOutUpLeft',
1988 'rotate-out-up-right': 'rotateOutUpRight',
1989 'roll-in': 'rollIn',
1990 'roll-out': 'rollOut',
1991 'zoom-in': 'zoomIn',
1992 'zoom-in-down': 'zoomInDown',
1993 'zoom-in-left': 'zoomInLeft',
1994 'zoom-in-right': 'zoomInRight',
1995 'zoom-in-up': 'zoomInUp',
1996 'bounce-in': 'bounceIn 750ms',
1997 'bounce-in-down': 'bounceInDown',
1998 'bounce-in-left': 'bounceInLeft',
1999 'bounce-in-right': 'bounceInRight',
2000 'bounce-in-up': 'bounceInUp',
2001 'bounce-out': 'bounceOut 750ms',
2002 'bounce-out-down': 'bounceOutDown',
2003 'bounce-out-left': 'bounceOutLeft',
2004 'bounce-out-right': 'bounceOutRight',
2005 'bounce-out-up': 'bounceOutUp',
2006 'zoom-out': 'zoomOut',
2007 'zoom-out-down': 'zoomOutDown',
2008 'zoom-out-left': 'zoomOutLeft',
2009 'zoom-out-right': 'zoomOutRight',
2010 'zoom-out-up': 'zoomOutUp',
2011 'slide-in-down': 'slideInDown',
2012 'slide-in-left': 'slideInLeft',
2013 'slide-in-right': 'slideInRight',
2014 'slide-in-up': 'slideInUp',
2015 'slide-out-down': 'slideOutDown',
2016 'slide-out-left': 'slideOutLeft',
2017 'slide-out-right': 'slideOutRight',
2018 'slide-out-up': 'slideOutUp',
2019 'fade-in': 'fadeIn',
2020 'fade-in-down': 'fadeInDown',
2021 'fade-in-down-big': 'fadeInDownBig',
2022 'fade-in-left': 'fadeInLeft',
2023 'fade-in-left-big': 'fadeInLeftBig',
2024 'fade-in-right': 'fadeInRight',
2025 'fade-in-right-big': 'fadeInRightBig',
2026 'fade-in-up': 'fadeInUp',
2027 'fade-in-up-big': 'fadeInUpBig',
2028 'fade-in-top-left': 'fadeInTopLeft',
2029 'fade-in-top-right': 'fadeInTopRight',
2030 'fade-in-bottom-left': 'fadeInBottomLeft',
2031 'fade-in-bottom-right': 'fadeInBottomRight',
2032 'fade-out': 'fadeOut',
2033 'fade-out-down': 'fadeOutDown',
2034 'fade-out-down-big': 'fadeOutDownBig',
2035 'fade-out-left': 'fadeOutLeft',
2036 'fade-out-left-big': 'fadeOutLeftBig',
2037 'fade-out-right': 'fadeOutRight',
2038 'fade-out-right-big': 'fadeOutRightBig',
2039 'fade-out-up': 'fadeOutUp',
2040 'fade-out-up-big': 'fadeOutUpBig',
2041 'back-in-up': 'backInUp',
2042 'back-in-down': 'backInDown',
2043 'back-in-left': 'backInLeft',
2044 'back-in-right': 'backInRight',
2045 'back-out-up': 'backOutUp',
2046 'back-out-down': 'backOutDown',
2047 'back-out-left': 'backOutLeft',
2048 'back-out-right': 'backOutRight',
2049 },
2050 animationDuration: {
2051 DEFAULT: '1000ms',
2052 75: '75ms',
2053 100: '100ms',
2054 150: '150ms',
2055 200: '200ms',
2056 300: '300ms',
2057 500: '500ms',
2058 700: '700ms',
2059 1000: '1000ms',
2060 1500: '1500ms',
2061 2000: '2000ms',
2062 2500: '2500ms',
2063 3000: '3000ms',
2064 // int >=0 -> int ms
2065 },
2066 animationDelay: {
2067 DEFAULT: '500ms',
2068 75: '75ms',
2069 100: '100ms',
2070 150: '150ms',
2071 200: '200ms',
2072 300: '300ms',
2073 500: '500ms',
2074 700: '700ms',
2075 1000: '1000ms',
2076 1500: '1500ms',
2077 2000: '2000ms',
2078 2500: '2500ms',
2079 3000: '3000ms',
2080 // int >=0 -> int ms
2081 },
2082 animationIterationCount: {
2083 DEFAULT: '1',
2084 loop: 'infinite',
2085 'repeat-1': '1',
2086 'repeat-2': '2',
2087 'repeat-3': '3',
2088 'repeat-4': '4',
2089 'repeat-5': '5',
2090 'repeat-6': '6',
2091 'repeat-7': '7',
2092 'repeat-8': '8',
2093 'repeat-9': '9',
2094 'repeat-10': '10',
2095 'repeat-11': '11',
2096 'repeat-12': '12',
2097 },
2098 animationTimingFunction: {
2099 DEFAULT: 'ease',
2100 linear: 'linear',
2101 in: 'ease-in',
2102 out: 'ease-out',
2103 'in-out': 'ease-in-out',
2104 },
2105 backdropBlur: (theme) => theme('blur'),
2106 backdropBrightness: (theme) => theme('brightness'),
2107 backdropContrast: (theme) => theme('contrast'),
2108 backdropGrayscale: (theme) => theme('grayscale'),
2109 backdropHueRotate: (theme) => theme('hueRotate'),
2110 backdropInvert: (theme) => theme('invert'),
2111 backdropOpacity: (theme) => theme('opacity'),
2112 backdropSaturate: (theme) => theme('saturate'),
2113 backdropSepia: (theme) => theme('sepia'),
2114 backgroundColor: (theme) => theme('colors'),
2115 backgroundImage: {
2116 none: 'none',
2117 'gradient-1': 'linear-gradient(135deg, #FDEB71 10%, #F8D800 100%)',
2118 'gradient-2': 'linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%)',
2119 'gradient-3': 'linear-gradient(135deg, #FEB692 10%, #EA5455 100%)',
2120 'gradient-4': 'linear-gradient(135deg, #CE9FFC 10%, #7367F0 100%)',
2121 'gradient-5': 'linear-gradient(135deg, #90F7EC 10%, #32CCBC 100%)',
2122 'gradient-6': 'linear-gradient(135deg, #FFF6B7 10%, #F6416C 100%)',
2123 'gradient-7': 'linear-gradient(135deg, #81FBB8 10%, #28C76F 100%)',
2124 'gradient-8': 'linear-gradient(135deg, #E2B0FF 10%, #9F44D3 100%)',
2125 'gradient-9': 'linear-gradient(135deg, #F97794 10%, #623AA2 100%)',
2126 'gradient-10': 'linear-gradient(135deg, #FCCF31 10%, #F55555 100%)',
2127 'gradient-11': 'linear-gradient(135deg, #F761A1 10%, #8C1BAB 100%)',
2128 'gradient-12': 'linear-gradient(135deg, #43CBFF 10%, #9708CC 100%)',
2129 'gradient-13': 'linear-gradient(135deg, #5EFCE8 10%, #736EFE 100%)',
2130 'gradient-14': 'linear-gradient(135deg, #FAD7A1 10%, #E96D71 100%)',
2131 'gradient-15': 'linear-gradient(135deg, #FFD26F 10%, #3677FF 100%)',
2132 'gradient-16': 'linear-gradient(135deg, #A0FE65 10%, #FA016D 100%)',
2133 'gradient-17': 'linear-gradient(135deg, #FFDB01 10%, #0E197D 100%)',
2134 'gradient-18': 'linear-gradient(135deg, #FEC163 10%, #DE4313 100%)',
2135 'gradient-19': 'linear-gradient(135deg, #92FFC0 10%, #002661 100%)',
2136 'gradient-20': 'linear-gradient(135deg, #EEAD92 10%, #6018DC 100%)',
2137 'gradient-21': 'linear-gradient(135deg, #F6CEEC 10%, #D939CD 100%)',
2138 'gradient-22': 'linear-gradient(135deg, #52E5E7 10%, #130CB7 100%)',
2139 'gradient-23': 'linear-gradient(135deg, #F1CA74 10%, #A64DB6 100%)',
2140 'gradient-24': 'linear-gradient(135deg, #E8D07A 10%, #5312D6 100%)',
2141 'gradient-25': 'linear-gradient(135deg, #EECE13 10%, #B210FF 100%)',
2142 'gradient-26': 'linear-gradient(135deg, #79F1A4 10%, #0E5CAD 100%)',
2143 'gradient-27': 'linear-gradient(135deg, #FDD819 10%, #E80505 100%)',
2144 'gradient-28': 'linear-gradient(135deg, #FFF3B0 10%, #CA26FF 100%)',
2145 'gradient-29': 'linear-gradient(135deg, #FFF5C3 10%, #9452A5 100%)',
2146 'gradient-30': 'linear-gradient(135deg, #F05F57 10%, #360940 100%)',
2147 'gradient-31': 'linear-gradient(135deg, #2AFADF 10%, #4C83FF 100%)',
2148 'gradient-32': 'linear-gradient(135deg, #FFF886 10%, #F072B6 100%)',
2149 'gradient-33': 'linear-gradient(135deg, #97ABFF 10%, #123597 100%)',
2150 'gradient-34': 'linear-gradient(135deg, #F5CBFF 10%, #C346C2 100%)',
2151 'gradient-35': 'linear-gradient(135deg, #FFF720 10%, #3CD500 100%)',
2152 'gradient-36': 'linear-gradient(135deg, #FF6FD8 10%, #3813C2 100%)',
2153 'gradient-37': 'linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%)',
2154 'gradient-38': 'linear-gradient(135deg, #FFD3A5 10%, #FD6585 100%)',
2155 'gradient-39': 'linear-gradient(135deg, #C2FFD8 10%, #465EFB 100%)',
2156 'gradient-40': 'linear-gradient(135deg, #FD6585 10%, #0D25B9 100%)',
2157 'gradient-41': 'linear-gradient(135deg, #FD6E6A 10%, #FFC600 100%)',
2158 'gradient-42': 'linear-gradient(135deg, #65FDF0 10%, #1D6FA3 100%)',
2159 'gradient-43': 'linear-gradient(135deg, #6B73FF 10%, #000DFF 100%)',
2160 'gradient-44': 'linear-gradient(135deg, #FF7AF5 10%, #513162 100%)',
2161 'gradient-45': 'linear-gradient(135deg, #F0FF00 10%, #58CFFB 100%)',
2162 'gradient-46': 'linear-gradient(135deg, #FFE985 10%, #FA742B 100%)',
2163 'gradient-47': 'linear-gradient(135deg, #FFA6B7 10%, #1E2AD2 100%)',
2164 'gradient-48': 'linear-gradient(135deg, #FFAA85 10%, #B3315F 100%)',
2165 'gradient-49': 'linear-gradient(135deg, #72EDF2 10%, #5151E5 100%)',
2166 'gradient-50': 'linear-gradient(135deg, #FF9D6C 10%, #BB4E75 100%)',
2167 'gradient-51': 'linear-gradient(135deg, #F6D242 10%, #FF52E5 100%)',
2168 'gradient-52': 'linear-gradient(135deg, #69FF97 10%, #00E4FF 100%)',
2169 'gradient-53': 'linear-gradient(135deg, #3B2667 10%, #BC78EC 100%)',
2170 'gradient-54': 'linear-gradient(135deg, #70F570 10%, #49C628 100%)',
2171 'gradient-55': 'linear-gradient(135deg, #3C8CE7 10%, #00EAFF 100%)',
2172 'gradient-56': 'linear-gradient(135deg, #FAB2FF 10%, #1904E5 100%)',
2173 'gradient-57': 'linear-gradient(135deg, #81FFEF 10%, #F067B4 100%)',
2174 'gradient-58': 'linear-gradient(135deg, #FFA8A8 10%, #FCFF00 100%)',
2175 'gradient-59': 'linear-gradient(135deg, #FFCF71 10%, #2376DD 100%)',
2176 'gradient-60': 'linear-gradient(135deg, #FF96F9 10%, #C32BAC 100%)',
2177
2178 'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
2179 'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
2180 'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
2181 'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
2182 'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
2183 'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
2184 'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
2185 'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
2186 },
2187 backgroundOpacity: (theme) => theme('opacity'),
2188 backgroundPosition: {
2189 bottom: 'bottom',
2190 center: 'center',
2191 left: 'left',
2192 'left-bottom': 'left bottom',
2193 'left-top': 'left top',
2194 right: 'right',
2195 'right-bottom': 'right bottom',
2196 'right-top': 'right top',
2197 top: 'top',
2198 },
2199 backgroundSize: {
2200 auto: 'auto',
2201 cover: 'cover',
2202 contain: 'contain',
2203 },
2204 blur: {
2205 DEFAULT: '8px',
2206 0: '0',
2207 sm: '4px',
2208 md: '12px',
2209 lg: '16px',
2210 xl: '24px',
2211 '2xl': '40px',
2212 '3xl': '64px',
2213 },
2214 borderColor: (theme) => ({
2215 DEFAULT: theme('colors.gray.200', 'currentColor'),
2216 ...(_nullishCoalesce(theme('colors'), () => ( {}))),
2217 }),
2218 borderOpacity: (theme) => theme('opacity'),
2219 borderRadius: {
2220 DEFAULT: '0.25rem',
2221 none: '0px',
2222 sm: '0.125rem',
2223 md: '0.375rem',
2224 lg: '0.5rem',
2225 xl: '0.75rem',
2226 '2xl': '1rem',
2227 '3xl': '1.5rem',
2228 // nxl
2229 '1': '100%',
2230 full: '9999px',
2231 },
2232 borderWidth: {
2233 DEFAULT: '1px',
2234 0: '0px',
2235 2: '2px',
2236 4: '4px',
2237 8: '8px',
2238 // int >=0 -> int px
2239 },
2240 boxShadow: {
2241 DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
2242 sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
2243 md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
2244 lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
2245 xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
2246 '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
2247 inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
2248 none: 'none',
2249 },
2250 boxShadowColor: (theme) => theme('colors'),
2251 brightness: {
2252 0: '0',
2253 50: '.5',
2254 75: '.75',
2255 90: '.9',
2256 95: '.95',
2257 100: '1',
2258 105: '1.05',
2259 110: '1.1',
2260 125: '1.25',
2261 150: '1.5',
2262 200: '2',
2263 },
2264 caretColor: (theme) => ({
2265 auto: 'auto',
2266 ...(_nullishCoalesce(theme('colors'), () => ( {}))),
2267 }),
2268 caretOpacity: (theme) => theme('opacity'),
2269 container: {},
2270 content: {
2271 DEFAULT: '""',
2272 'open-quote': 'open-quote',
2273 'close-quote': 'close-quote',
2274 'open-square': '"["',
2275 'close-square': '"]"',
2276 'open-curly': '"{"',
2277 'close-curly': '"}"',
2278 'open-bracket': '"("',
2279 'close-bracket': '")"',
2280 },
2281 contrast: {
2282 0: '0',
2283 50: '.5',
2284 75: '.75',
2285 100: '1',
2286 125: '1.25',
2287 150: '1.5',
2288 200: '2',
2289 },
2290 cursor: {
2291 auto: 'auto',
2292 default: 'default',
2293 pointer: 'pointer',
2294 wait: 'wait',
2295 text: 'text',
2296 move: 'move',
2297 help: 'help',
2298 'not-allowed': 'not-allowed',
2299 },
2300 divideColor: (theme) => theme('borderColor'),
2301 divideOpacity: (theme) => theme('borderOpacity'),
2302 divideWidth: (theme) => theme('borderWidth'),
2303 dropShadow: {
2304 DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
2305 sm: '0 1px 1px rgba(0,0,0,0.05)',
2306 md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
2307 lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
2308 xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
2309 '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
2310 none: '0 0 #0000',
2311 },
2312 fill: (theme) => ({
2313 ...(_nullishCoalesce(theme('colors'), () => ( {}))),
2314 none: 'none',
2315 }),
2316 flex: {
2317 1: '1 1 0%',
2318 auto: '1 1 auto',
2319 initial: '0 1 auto',
2320 none: 'none',
2321 },
2322 flexGrow: {
2323 DEFAULT: '1',
2324 0: '0',
2325 },
2326 flexShrink: {
2327 DEFAULT: '1',
2328 0: '0',
2329 },
2330 fontFamily: {
2331 sans: [
2332 'ui-sans-serif',
2333 'system-ui',
2334 '-apple-system',
2335 'BlinkMacSystemFont',
2336 '"Segoe UI"',
2337 'Roboto',
2338 '"Helvetica Neue"',
2339 'Arial',
2340 '"Noto Sans"',
2341 'sans-serif',
2342 '"Apple Color Emoji"',
2343 '"Segoe UI Emoji"',
2344 '"Segoe UI Symbol"',
2345 '"Noto Color Emoji"',
2346 ],
2347 serif: [
2348 'ui-serif',
2349 'Georgia',
2350 'Cambria',
2351 '"Times New Roman"',
2352 'Times',
2353 'serif',
2354 ],
2355 mono: [
2356 'ui-monospace',
2357 'SFMono-Regular',
2358 'Menlo',
2359 'Monaco',
2360 'Consolas',
2361 '"Liberation Mono"',
2362 '"Courier New"',
2363 'monospace',
2364 ],
2365 },
2366 fontSize: {
2367 xs: ['0.75rem', { lineHeight: '1rem' }],
2368 sm: ['0.875rem', { lineHeight: '1.25rem' }],
2369 base: ['1rem', { lineHeight: '1.5rem' }],
2370 lg: ['1.125rem', { lineHeight: '1.75rem' }],
2371 xl: ['1.25rem', { lineHeight: '1.75rem' }],
2372 '2xl': ['1.5rem', { lineHeight: '2rem' }],
2373 '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
2374 '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
2375 '5xl': ['3rem', { lineHeight: '1' }],
2376 '6xl': ['3.75rem', { lineHeight: '1' }],
2377 '7xl': ['4.5rem', { lineHeight: '1' }],
2378 '8xl': ['6rem', { lineHeight: '1' }],
2379 '9xl': ['8rem', { lineHeight: '1' }],
2380 // nxl -> [n rem, lineHeight: 1]
2381 },
2382 fontWeight: {
2383 thin: '100',
2384 extralight: '200',
2385 light: '300',
2386 normal: '400',
2387 medium: '500',
2388 semibold: '600',
2389 bold: '700',
2390 extrabold: '800',
2391 black: '900',
2392 // int[0, 900] -> int
2393 },
2394 gap: (theme) => theme('spacing'),
2395 gradientColorStops: (theme) => theme('colors'),
2396 grayscale: {
2397 DEFAULT: '100%',
2398 0: '0',
2399 },
2400 gridAutoColumns: {
2401 auto: 'auto',
2402 min: 'min-content',
2403 max: 'max-content',
2404 fr: 'minmax(0, 1fr)',
2405 },
2406 gridAutoRows: {
2407 auto: 'auto',
2408 min: 'min-content',
2409 max: 'max-content',
2410 fr: 'minmax(0, 1fr)',
2411 },
2412 gridColumn: {
2413 auto: 'auto',
2414 'span-1': 'span 1 / span 1',
2415 'span-2': 'span 2 / span 2',
2416 'span-3': 'span 3 / span 3',
2417 'span-4': 'span 4 / span 4',
2418 'span-5': 'span 5 / span 5',
2419 'span-6': 'span 6 / span 6',
2420 'span-7': 'span 7 / span 7',
2421 'span-8': 'span 8 / span 8',
2422 'span-9': 'span 9 / span 9',
2423 'span-10': 'span 10 / span 10',
2424 'span-11': 'span 11 / span 11',
2425 'span-12': 'span 12 / span 12',
2426 // span-int(>=1) -> span int / span int
2427 'span-full': '1 / -1',
2428 },
2429 gridColumnEnd: {
2430 auto: 'auto',
2431 1: '1',
2432 2: '2',
2433 3: '3',
2434 4: '4',
2435 5: '5',
2436 6: '6',
2437 7: '7',
2438 8: '8',
2439 9: '9',
2440 10: '10',
2441 11: '11',
2442 12: '12',
2443 13: '13',
2444 // int >=1 -> int
2445 },
2446 gridColumnStart: {
2447 auto: 'auto',
2448 1: '1',
2449 2: '2',
2450 3: '3',
2451 4: '4',
2452 5: '5',
2453 6: '6',
2454 7: '7',
2455 8: '8',
2456 9: '9',
2457 10: '10',
2458 11: '11',
2459 12: '12',
2460 13: '13',
2461 // int >=1 -> int
2462 },
2463 gridRow: {
2464 auto: 'auto',
2465 'span-1': 'span 1 / span 1',
2466 'span-2': 'span 2 / span 2',
2467 'span-3': 'span 3 / span 3',
2468 'span-4': 'span 4 / span 4',
2469 'span-5': 'span 5 / span 5',
2470 'span-6': 'span 6 / span 6',
2471 // span-int(>=1) -> span int / span int
2472 'span-full': '1 / -1',
2473 },
2474 gridRowStart: {
2475 auto: 'auto',
2476 1: '1',
2477 2: '2',
2478 3: '3',
2479 4: '4',
2480 5: '5',
2481 6: '6',
2482 7: '7',
2483 // int >=1 -> int
2484 },
2485 gridRowEnd: {
2486 auto: 'auto',
2487 1: '1',
2488 2: '2',
2489 3: '3',
2490 4: '4',
2491 5: '5',
2492 6: '6',
2493 7: '7',
2494 // int >=1 -> int
2495 },
2496 gridTemplateColumns: {
2497 none: 'none',
2498 1: 'repeat(1, minmax(0, 1fr))',
2499 2: 'repeat(2, minmax(0, 1fr))',
2500 3: 'repeat(3, minmax(0, 1fr))',
2501 4: 'repeat(4, minmax(0, 1fr))',
2502 5: 'repeat(5, minmax(0, 1fr))',
2503 6: 'repeat(6, minmax(0, 1fr))',
2504 7: 'repeat(7, minmax(0, 1fr))',
2505 8: 'repeat(8, minmax(0, 1fr))',
2506 9: 'repeat(9, minmax(0, 1fr))',
2507 10: 'repeat(10, minmax(0, 1fr))',
2508 11: 'repeat(11, minmax(0, 1fr))',
2509 12: 'repeat(12, minmax(0, 1fr))',
2510 // int >=1 -> repeat(int, minmax(0, 1fr))
2511 },
2512 gridTemplateRows: {
2513 none: 'none',
2514 1: 'repeat(1, minmax(0, 1fr))',
2515 2: 'repeat(2, minmax(0, 1fr))',
2516 3: 'repeat(3, minmax(0, 1fr))',
2517 4: 'repeat(4, minmax(0, 1fr))',
2518 5: 'repeat(5, minmax(0, 1fr))',
2519 6: 'repeat(6, minmax(0, 1fr))',
2520 // int >=1 -> repeat(int, minmax(0, 1fr))
2521 },
2522 height: (theme, { breakpoints }) => ({
2523 auto: 'auto',
2524 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2525 '1/2': '50%',
2526 '1/3': '33.333333%',
2527 '2/3': '66.666667%',
2528 '1/4': '25%',
2529 '2/4': '50%',
2530 '3/4': '75%',
2531 '1/5': '20%',
2532 '2/5': '40%',
2533 '3/5': '60%',
2534 '4/5': '80%',
2535 '1/6': '16.666667%',
2536 '2/6': '33.333333%',
2537 '3/6': '50%',
2538 '4/6': '66.666667%',
2539 '5/6': '83.333333%',
2540 // fraction -> percent
2541 xs: '20rem',
2542 sm: '24rem',
2543 md: '28rem',
2544 lg: '32rem',
2545 xl: '36rem',
2546 '2xl': '42rem',
2547 '3xl': '48rem',
2548 '4xl': '56rem',
2549 '5xl': '64rem',
2550 '6xl': '72rem',
2551 '7xl': '80rem',
2552 // nxl
2553 full: '100%',
2554 min: 'min-content',
2555 max: 'max-content',
2556 prose: '65ch',
2557 screen: '100vh',
2558 ...breakpoints(_nullishCoalesce(theme('screens'), () => ( {}))),
2559 }),
2560 hueRotate: {
2561 '-180': '-180deg',
2562 '-90': '-90deg',
2563 '-60': '-60deg',
2564 '-30': '-30deg',
2565 '-15': '-15deg',
2566 0: '0deg',
2567 15: '15deg',
2568 30: '30deg',
2569 60: '60deg',
2570 90: '90deg',
2571 180: '180deg',
2572 },
2573 inset: (theme, { negative }) => ({
2574 auto: 'auto',
2575 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2576 ...negative(theme('spacing')),
2577 '1/2': '50%',
2578 '1/3': '33.333333%',
2579 '2/3': '66.666667%',
2580 '1/4': '25%',
2581 '2/4': '50%',
2582 '3/4': '75%',
2583 full: '100%',
2584 '-1/2': '-50%',
2585 '-1/3': '-33.333333%',
2586 '-2/3': '-66.666667%',
2587 '-1/4': '-25%',
2588 '-2/4': '-50%',
2589 '-3/4': '-75%',
2590 '-full': '-100%',
2591 // fraction -> percent
2592 // ...negative
2593 }),
2594 invert: {
2595 DEFAULT: '100%',
2596 0: '0',
2597 },
2598 keyframes,
2599 letterSpacing: {
2600 tighter: '-0.05em',
2601 tight: '-0.025em',
2602 normal: '0em',
2603 wide: '0.025em',
2604 wider: '0.05em',
2605 widest: '0.1em',
2606 },
2607 lineHeight: {
2608 none: '1',
2609 tight: '1.25',
2610 snug: '1.375',
2611 normal: '1.5',
2612 relaxed: '1.625',
2613 loose: '2',
2614 3: '.75rem',
2615 4: '1rem',
2616 5: '1.25rem',
2617 6: '1.5rem',
2618 7: '1.75rem',
2619 8: '2rem',
2620 9: '2.25rem',
2621 10: '2.5rem',
2622 // int>=0 -> int/4 rem
2623 },
2624 listStyleType: {
2625 none: 'none',
2626 circle: 'circle',
2627 square: 'square',
2628 disc: 'disc',
2629 decimal: 'decimal',
2630 'zero-decimal': 'decimal-leading-zero',
2631 greek: 'lower-greek',
2632 roman: 'lower-roman',
2633 alpha: 'lower-alpha',
2634 'upper-roman': 'upper-roman',
2635 'upper-alpha': 'upper-alpha',
2636 },
2637 margin: (theme, { negative }) => ({
2638 auto: 'auto',
2639 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2640 ...negative(theme('spacing')),
2641 // ...negative
2642 }),
2643 maxHeight: (theme, { breakpoints }) => ({
2644 none: 'none',
2645 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2646 xs: '20rem',
2647 sm: '24rem',
2648 md: '28rem',
2649 lg: '32rem',
2650 xl: '36rem',
2651 '2xl': '42rem',
2652 '3xl': '48rem',
2653 '4xl': '56rem',
2654 '5xl': '64rem',
2655 '6xl': '72rem',
2656 '7xl': '80rem',
2657 // nxl
2658 full: '100%',
2659 min: 'min-content',
2660 max: 'max-content',
2661 prose: '65ch',
2662 screen: '100vh',
2663 ...breakpoints(_nullishCoalesce(theme('screens'), () => ( {}))),
2664 }),
2665 maxWidth: (theme, { breakpoints }) => ({
2666 none: 'none',
2667 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2668 xs: '20rem',
2669 sm: '24rem',
2670 md: '28rem',
2671 lg: '32rem',
2672 xl: '36rem',
2673 '2xl': '42rem',
2674 '3xl': '48rem',
2675 '4xl': '56rem',
2676 '5xl': '64rem',
2677 '6xl': '72rem',
2678 '7xl': '80rem',
2679 // nxl
2680 full: '100%',
2681 min: 'min-content',
2682 max: 'max-content',
2683 prose: '65ch',
2684 screen: '100vw',
2685 ...breakpoints(_nullishCoalesce(theme('screens'), () => ( {}))),
2686 }),
2687 minHeight: (theme) => theme('maxHeight'),
2688 minWidth: (theme) => theme('maxWidth'),
2689 objectPosition: {
2690 bottom: 'bottom',
2691 center: 'center',
2692 left: 'left',
2693 'left-bottom': 'left bottom',
2694 'left-top': 'left top',
2695 right: 'right',
2696 'right-bottom': 'right bottom',
2697 'right-top': 'right top',
2698 top: 'top',
2699 },
2700 opacity: {
2701 0: '0',
2702 5: '0.05',
2703 10: '0.1',
2704 20: '0.2',
2705 25: '0.25',
2706 30: '0.3',
2707 40: '0.4',
2708 50: '0.5',
2709 60: '0.6',
2710 70: '0.7',
2711 75: '0.75',
2712 80: '0.8',
2713 90: '0.9',
2714 95: '0.95',
2715 100: '1',
2716 // float -> float/100
2717 },
2718 order: {
2719 first: '-9999',
2720 last: '9999',
2721 none: '0',
2722 1: '1',
2723 2: '2',
2724 3: '3',
2725 4: '4',
2726 5: '5',
2727 6: '6',
2728 7: '7',
2729 8: '8',
2730 9: '9',
2731 10: '10',
2732 11: '11',
2733 12: '12',
2734 // int[1, 9999]
2735 },
2736 outline: {
2737 none: ['2px solid transparent', '2px'],
2738 // white: ['2px dotted white', '2px'],
2739 // black: ['2px dotted black', '2px'],
2740 },
2741 outlineColor: (theme) => theme('colors'),
2742 padding: (theme) => theme('spacing'),
2743 perspective: (theme) => ({
2744 none: 'none',
2745 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2746 xs: '20rem',
2747 sm: '24rem',
2748 md: '28rem',
2749 lg: '32rem',
2750 xl: '36rem',
2751 '2xl': '42rem',
2752 '3xl': '48rem',
2753 '4xl': '56rem',
2754 '5xl': '64rem',
2755 '6xl': '72rem',
2756 '7xl': '80rem',
2757 }),
2758 perspectiveOrigin: {
2759 center: 'center',
2760 top: 'top',
2761 'top-right': 'top right',
2762 right: 'right',
2763 'bottom-right': 'bottom right',
2764 bottom: 'bottom',
2765 'bottom-left': 'bottom left',
2766 left: 'left',
2767 'top-left': 'top left',
2768 },
2769 placeholderColor: (theme) => theme('colors'),
2770 placeholderOpacity: (theme) => theme('opacity'),
2771 ringColor: (theme) => ({
2772 DEFAULT: theme('colors.blue.500', '#3b82f6'),
2773 ...(_nullishCoalesce(theme('colors'), () => ( {}))),
2774 }),
2775 ringOffsetColor: (theme) => theme('colors'),
2776 ringOffsetWidth: {
2777 0: '0px',
2778 1: '1px',
2779 2: '2px',
2780 4: '4px',
2781 8: '8px',
2782 // float -> float px
2783 },
2784 ringOpacity: (theme) => ({
2785 DEFAULT: '0.5',
2786 ...(_nullishCoalesce(theme('opacity'), () => ( {}))),
2787 }),
2788 ringWidth: {
2789 DEFAULT: '3px',
2790 0: '0px',
2791 1: '1px',
2792 2: '2px',
2793 4: '4px',
2794 8: '8px',
2795 // float -> float px
2796 },
2797 rotate: {
2798 '-180': '-180deg',
2799 '-90': '-90deg',
2800 '-45': '-45deg',
2801 '-12': '-12deg',
2802 '-6': '-6deg',
2803 '-3': '-3deg',
2804 '-2': '-2deg',
2805 '-1': '-1deg',
2806 0: '0deg',
2807 1: '1deg',
2808 2: '2deg',
2809 3: '3deg',
2810 6: '6deg',
2811 12: '12deg',
2812 45: '45deg',
2813 90: '90deg',
2814 180: '180deg',
2815 // float[0, 360] -> float[0deg, 360deg]
2816 // ...negative
2817 },
2818 saturate: {
2819 DEFAULT: '0',
2820 0: '0',
2821 50: '.5',
2822 100: '1',
2823 150: '1.5',
2824 200: '2',
2825 },
2826 scale: {
2827 0: '0',
2828 50: '.5',
2829 75: '.75',
2830 90: '.9',
2831 95: '.95',
2832 100: '1',
2833 105: '1.05',
2834 110: '1.1',
2835 125: '1.25',
2836 150: '1.5',
2837 // int >=0 -> int/100
2838 },
2839 sepia: {
2840 DEFAULT: '100%',
2841 0: '0',
2842 },
2843 skew: {
2844 '-12': '-12deg',
2845 '-6': '-6deg',
2846 '-3': '-3deg',
2847 '-2': '-2deg',
2848 '-1': '-1deg',
2849 0: '0deg',
2850 1: '1deg',
2851 2: '2deg',
2852 3: '3deg',
2853 6: '6deg',
2854 12: '12deg',
2855 // float[0, 360] -> float[0deg, 360deg]
2856 // ...negative
2857 },
2858 space: (theme, { negative }) => ({
2859 ...theme('spacing'),
2860 ...negative(theme('spacing')),
2861 }),
2862 stroke: (theme) => ({
2863 ...(_nullishCoalesce(theme('colors'), () => ( {}))),
2864 none: 'none',
2865 }),
2866 strokeWidth: {
2867 0: '0',
2868 1: '1',
2869 2: '2',
2870 },
2871 strokeDashArray: {
2872 0: '0',
2873 1: '1',
2874 2: '2',
2875 },
2876 strokeDashOffset: {
2877 0: '0',
2878 1: '1',
2879 2: '2',
2880 },
2881 tabSize: {
2882 DEFAULT: '4',
2883 0: '0',
2884 2: '2',
2885 4: '4',
2886 8: '8',
2887 // int >=0 -> int px
2888 },
2889 textColor: (theme) => theme('colors'),
2890 textOpacity: (theme) => theme('opacity'),
2891 textShadow: {
2892 DEFAULT: '0px 0px 1px rgb(0 0 0 / 20%), 0px 0px 1px rgb(1 0 5 / 10%)',
2893 sm: '1px 1px 3px rgb(36 37 47 / 25%)',
2894 md: '0px 1px 2px rgb(30 29 39 / 19%), 1px 2px 4px rgb(54 64 147 / 18%)',
2895 lg: '3px 3px 6px rgb(0 0 0 / 26%), 0 0 5px rgb(15 3 86 / 22%)',
2896 xl: '1px 1px 3px rgb(0 0 0 / 29%), 2px 4px 7px rgb(73 64 125 / 35%)',
2897 none: 'none',
2898 },
2899 textDecorationColor: (theme) => theme('colors'),
2900 textDecorationOpacity: (theme) => theme('opacity'),
2901 textDecorationLength: {
2902 'auto': 'auto',
2903 0: '0px',
2904 2: '2px',
2905 4: '4px',
2906 8: '8px',
2907 },
2908 textDecorationOffset: {
2909 'auto': 'auto',
2910 0: '0px',
2911 1: '1px',
2912 2: '2px',
2913 4: '4px',
2914 8: '8px',
2915 },
2916 textIndent: {
2917 DEFAULT: '1.5rem',
2918 xs: '0.5rem',
2919 sm: '1rem',
2920 md: '1.5rem',
2921 lg: '2rem',
2922 xl: '2.5rem',
2923 '2xl': '3rem',
2924 '3xl': '4rem',
2925 },
2926 textStrokeColor: (theme) => ({
2927 DEFAULT: theme('colors.gray.200', 'currentColor'),
2928 ...(_nullishCoalesce(theme('colors'), () => ( {}))),
2929 }),
2930 textStrokeWidth: {
2931 DEFAULT: 'medium',
2932 'none': '0',
2933 'sm': 'thin',
2934 'md': 'medium',
2935 'lg': 'thick',
2936 },
2937 transformOrigin: {
2938 center: 'center',
2939 top: 'top',
2940 'top-right': 'top right',
2941 right: 'right',
2942 'bottom-right': 'bottom right',
2943 bottom: 'bottom',
2944 'bottom-left': 'bottom left',
2945 left: 'left',
2946 'top-left': 'top left',
2947 },
2948 transitionDuration: {
2949 DEFAULT: '150ms',
2950 75: '75ms',
2951 100: '100ms',
2952 150: '150ms',
2953 200: '200ms',
2954 300: '300ms',
2955 500: '500ms',
2956 700: '700ms',
2957 1000: '1000ms',
2958 // int >=0 -> int ms
2959 },
2960 transitionDelay: {
2961 75: '75ms',
2962 100: '100ms',
2963 150: '150ms',
2964 200: '200ms',
2965 300: '300ms',
2966 500: '500ms',
2967 700: '700ms',
2968 1000: '1000ms',
2969 // int >=0 -> int ms
2970 },
2971 transitionProperty: {
2972 DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
2973 none: 'none',
2974 all: 'all',
2975 colors: 'background-color, border-color, color, fill, stroke',
2976 opacity: 'opacity',
2977 shadow: 'box-shadow',
2978 transform: 'transform',
2979 },
2980 transitionTimingFunction: {
2981 DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
2982 linear: 'linear',
2983 in: 'cubic-bezier(0.4, 0, 1, 1)',
2984 out: 'cubic-bezier(0, 0, 0.2, 1)',
2985 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
2986 },
2987 translate: (theme, { negative }) => ({
2988 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
2989 ...negative(theme('spacing')),
2990 '1/2': '50%',
2991 '1/3': '33.333333%',
2992 '2/3': '66.666667%',
2993 '1/4': '25%',
2994 '2/4': '50%',
2995 '3/4': '75%',
2996 full: '100%',
2997 '-1/2': '-50%',
2998 '-1/3': '-33.333333%',
2999 '-2/3': '-66.666667%',
3000 '-1/4': '-25%',
3001 '-2/4': '-50%',
3002 '-3/4': '-75%',
3003 '-full': '-100%',
3004 // fraction -> percent
3005 // ...negative
3006 }),
3007 width: (theme, { breakpoints }) => ({
3008 auto: 'auto',
3009 ...(_nullishCoalesce(theme('spacing'), () => ( {}))),
3010 // fraction -> percent
3011 '1/2': '50%',
3012 '1/3': '33.333333%',
3013 '2/3': '66.666667%',
3014 '1/4': '25%',
3015 '2/4': '50%',
3016 '3/4': '75%',
3017 '1/5': '20%',
3018 '2/5': '40%',
3019 '3/5': '60%',
3020 '4/5': '80%',
3021 '1/6': '16.666667%',
3022 '2/6': '33.333333%',
3023 '3/6': '50%',
3024 '4/6': '66.666667%',
3025 '5/6': '83.333333%',
3026 '1/12': '8.333333%',
3027 '2/12': '16.666667%',
3028 '3/12': '25%',
3029 '4/12': '33.333333%',
3030 '5/12': '41.666667%',
3031 '6/12': '50%',
3032 '7/12': '58.333333%',
3033 '8/12': '66.666667%',
3034 '9/12': '75%',
3035 '10/12': '83.333333%',
3036 '11/12': '91.666667%',
3037 xs: '20rem',
3038 sm: '24rem',
3039 md: '28rem',
3040 lg: '32rem',
3041 xl: '36rem',
3042 '2xl': '42rem',
3043 '3xl': '48rem',
3044 '4xl': '56rem',
3045 '5xl': '64rem',
3046 '6xl': '72rem',
3047 '7xl': '80rem',
3048 // nxl
3049 full: '100%',
3050 min: 'min-content',
3051 max: 'max-content',
3052 prose: '65ch',
3053 screen: '100vw',
3054 ...breakpoints(_nullishCoalesce(theme('screens'), () => ( {}))),
3055 }),
3056 zIndex: {
3057 auto: 'auto',
3058 0: '0',
3059 10: '10',
3060 20: '20',
3061 30: '30',
3062 40: '40',
3063 50: '50',
3064 // int[0, 99999] -> int[0, 99999]
3065 // ...negative
3066 },
3067 },
3068 variantOrder: variantOrder,
3069 plugins: [],
3070 handlers: {
3071 static : true,
3072 time: true,
3073 color: true,
3074 opacity: true,
3075 number : true,
3076 string: true,
3077 bracket: true,
3078 hex: true,
3079 nxl: true,
3080 fraction: true,
3081 size: true,
3082 variable: true,
3083 negative: true,
3084 },
3085};
3086
3087const twExclude = [
3088 /-hex-/, // disable hex color
3089 /-\$/, // disable variable
3090 /(rem|em|px|rpx|vh|vw|ch|ex)$/, // disable size
3091 /-\d*[13579]$/, // disable odd number
3092 /-([0-9]{1,}[.][0-9]*)$/, // disable float
3093 /^!/, // disable important utility
3094];
3095
3096export { baseConfig, colors, twExclude };