File size: 9,052 Bytes
2f08c82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
function filterDefault(values) {
    return Object.fromEntries(
        Object.entries(values).filter(([key]) => key !== "DEFAULT"),
    );
}

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: ["selector"],
    content: [
        "./**/*.py",
        "./.venv/lib/python3.12/site-packages/shad4fast/**/*.{py,js}",
    ],
    theme: {
        container: {
            center: true,
            padding: "2rem",
            screens: {
                "2xl": "1400px",
            },
        },
        extend: {
            animation: {
                "accordion-down": "accordion-down 0.2s ease-out",
                "accordion-up": "accordion-up 0.2s ease-out",
            },
            animationDelay: ({theme}) => ({
                ...theme("transitionDelay"),
            }),
            animationDuration: ({theme}) => ({
                0: "0ms",
                ...theme("transitionDuration"),
            }),
            animationTimingFunction: ({theme}) => ({
                ...theme("transitionTimingFunction"),
            }),
            animationFillMode: {
                none: "none",
                forwards: "forwards",
                backwards: "backwards",
                both: "both",
            },
            animationDirection: {
                normal: "normal",
                reverse: "reverse",
                alternate: "alternate",
                "alternate-reverse": "alternate-reverse",
            },
            animationOpacity: ({theme}) => ({
                DEFAULT: 0,
                ...theme("opacity"),
            }),
            animationTranslate: ({theme}) => ({
                DEFAULT: "100%",
                ...theme("translate"),
            }),
            animationScale: ({theme}) => ({
                DEFAULT: 0,
                ...theme("scale"),
            }),
            animationRotate: ({theme}) => ({
                DEFAULT: "30deg",
                ...theme("rotate"),
            }),
            animationRepeat: {
                0: "0",
                1: "1",
                infinite: "infinite",
            },
            keyframes: {
                enter: {
                    from: {
                        opacity: "var(--tw-enter-opacity, 1)",
                        transform:
                            "translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))",
                    },
                },
                exit: {
                    to: {
                        opacity: "var(--tw-exit-opacity, 1)",
                        transform:
                            "translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))",
                    },
                },
            },
            colors: {
                border: "hsl(var(--border))",
                input: "hsl(var(--input))",
                ring: "hsl(var(--ring))",
                background: "hsl(var(--background))",
                foreground: "hsl(var(--foreground))",
                primary: {
                    DEFAULT: "hsl(var(--primary))",
                    foreground: "hsl(var(--primary-foreground))",
                },
                secondary: {
                    DEFAULT: "hsl(var(--secondary))",
                    foreground: "hsl(var(--secondary-foreground))",
                },
                destructive: {
                    DEFAULT: "hsl(var(--destructive))",
                    foreground: "hsl(var(--destructive-foreground))",
                },
                muted: {
                    DEFAULT: "hsl(var(--muted))",
                    foreground: "hsl(var(--muted-foreground))",
                },
                accent: {
                    DEFAULT: "hsl(var(--accent))",
                    foreground: "hsl(var(--accent-foreground))",
                },
                popover: {
                    DEFAULT: "hsl(var(--popover))",
                    foreground: "hsl(var(--popover-foreground))",
                },
                card: {
                    DEFAULT: "hsl(var(--card))",
                    foreground: "hsl(var(--card-foreground))",
                },
            },
            borderRadius: {
                lg: `var(--radius)`,
                md: `calc(var(--radius) - 2px)`,
                sm: "calc(var(--radius) - 4px)",
            },
        },
    },
    plugins: [
        function ({addUtilities, matchUtilities, theme}) {
            addUtilities({
                "@keyframes enter": theme("keyframes.enter"),
                "@keyframes exit": theme("keyframes.exit"),
                ".animate-in": {
                    animationName: "enter",
                    animationDuration: theme("animationDuration.DEFAULT"),
                    "--tw-enter-opacity": "initial",
                    "--tw-enter-scale": "initial",
                    "--tw-enter-rotate": "initial",
                    "--tw-enter-translate-x": "initial",
                    "--tw-enter-translate-y": "initial",
                },
                ".animate-out": {
                    animationName: "exit",
                    animationDuration: theme("animationDuration.DEFAULT"),
                    "--tw-exit-opacity": "initial",
                    "--tw-exit-scale": "initial",
                    "--tw-exit-rotate": "initial",
                    "--tw-exit-translate-x": "initial",
                    "--tw-exit-translate-y": "initial",
                },
            });

            matchUtilities(
                {
                    "fade-in": (value) => ({"--tw-enter-opacity": value}),
                    "fade-out": (value) => ({"--tw-exit-opacity": value}),
                },
                {values: theme("animationOpacity")},
            );

            matchUtilities(
                {
                    "zoom-in": (value) => ({"--tw-enter-scale": value}),
                    "zoom-out": (value) => ({"--tw-exit-scale": value}),
                },
                {values: theme("animationScale")},
            );

            matchUtilities(
                {
                    "spin-in": (value) => ({"--tw-enter-rotate": value}),
                    "spin-out": (value) => ({"--tw-exit-rotate": value}),
                },
                {values: theme("animationRotate")},
            );

            matchUtilities(
                {
                    "slide-in-from-top": (value) => ({
                        "--tw-enter-translate-y": `-${value}`,
                    }),
                    "slide-in-from-bottom": (value) => ({
                        "--tw-enter-translate-y": value,
                    }),
                    "slide-in-from-left": (value) => ({
                        "--tw-enter-translate-x": `-${value}`,
                    }),
                    "slide-in-from-right": (value) => ({
                        "--tw-enter-translate-x": value,
                    }),
                    "slide-out-to-top": (value) => ({
                        "--tw-exit-translate-y": `-${value}`,
                    }),
                    "slide-out-to-bottom": (value) => ({
                        "--tw-exit-translate-y": value,
                    }),
                    "slide-out-to-left": (value) => ({
                        "--tw-exit-translate-x": `-${value}`,
                    }),
                    "slide-out-to-right": (value) => ({
                        "--tw-exit-translate-x": value,
                    }),
                },
                {values: theme("animationTranslate")},
            );

            matchUtilities(
                {duration: (value) => ({animationDuration: value})},
                {values: filterDefault(theme("animationDuration"))},
            );

            matchUtilities(
                {delay: (value) => ({animationDelay: value})},
                {values: theme("animationDelay")},
            );

            matchUtilities(
                {ease: (value) => ({animationTimingFunction: value})},
                {values: filterDefault(theme("animationTimingFunction"))},
            );

            addUtilities({
                ".running": {animationPlayState: "running"},
                ".paused": {animationPlayState: "paused"},
            });

            matchUtilities(
                {"fill-mode": (value) => ({animationFillMode: value})},
                {values: theme("animationFillMode")},
            );

            matchUtilities(
                {direction: (value) => ({animationDirection: value})},
                {values: theme("animationDirection")},
            );

            matchUtilities(
                {repeat: (value) => ({animationIterationCount: value})},
                {values: theme("animationRepeat")},
            );
        },
    ],
};