@removify/tailwind-preset 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +23 -30
  2. package/tailwind-dist/index.css +351 -0
  3. package/tailwind-dist/tailwindcss-animate.css +578 -0
package/package.json CHANGED
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "name": "@removify/tailwind-preset",
3
3
  "type": "module",
4
- "version": "1.0.0",
5
- "packageManager": "pnpm@10.13.1",
4
+ "version": "1.0.2",
6
5
  "description": "Tailwind CSS preset for Removify",
7
6
  "keywords": [
8
7
  "tailwind"
@@ -14,6 +13,7 @@
14
13
  "require": "./dist/index.cjs"
15
14
  },
16
15
  "./index.css": {
16
+ "style": "./tailwind-dist/index.css",
17
17
  "import": "./tailwind-dist/index.css",
18
18
  "require": "./tailwind-dist/index.css"
19
19
  },
@@ -26,30 +26,11 @@
26
26
  "types": "./dist/index.d.ts",
27
27
  "files": [
28
28
  "dist",
29
- "index.css",
30
- "tailwindcss-animate.css"
29
+ "tailwind-dist"
31
30
  ],
32
31
  "engines": {
33
32
  "node": ">=22"
34
33
  },
35
- "scripts": {
36
- "start": "pnpm exec tsx ./src/index.ts",
37
- "build": "rimraf dist && tsup src/index.ts --format esm,cjs --clean --dts && pnpm generate:tailwind-v4",
38
- "generate:tailwind-v4": "tsx ./scripts/generate-tailwind-v4.ts",
39
- "update-animation:v4": "curl https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css > ./tailwind-dist/tailwindcss-animate.css",
40
- "typecheck": "tsc --noEmit",
41
- "prepack": "pnpm build",
42
- "watch": "tsup --format esm,cjs --watch",
43
- "dev": "tsx watch ./src/index.ts",
44
- "dev:playground": "pnpm --filter playground dev",
45
- "test": "vitest",
46
- "lint": "eslint .",
47
- "lint:fix": "eslint --fix .",
48
- "husky:install": "husky",
49
- "release": "bumpp && pnpm publish --access=public",
50
- "tailwind-config-viewer": "tailwind-config-viewer -o -c tailwind.config.js",
51
- "tailwind-config-viewer:build": "pnpm build && tailwind-config-viewer export tailwind-dist -c tailwind.config.js"
52
- },
53
34
  "peerDependencies": {
54
35
  "tailwindcss": "^3.0.0 || ^4.0.0"
55
36
  },
@@ -61,7 +42,6 @@
61
42
  "@commitlint/cli": "^19.8.1",
62
43
  "@commitlint/config-conventional": "^19.8.1",
63
44
  "@removify/eslint-config": "^3.1.2",
64
- "@removify/tailwind-preset": "workspace:*",
65
45
  "@types/node": "^22.16.5",
66
46
  "bumpp": "^10.2.0",
67
47
  "eslint": "^9.31.0",
@@ -73,16 +53,29 @@
73
53
  "tsup": "^8.5.0",
74
54
  "tsx": "^4.20.3",
75
55
  "typescript": "^5.8.3",
76
- "vitest": "^3.2.4"
77
- },
78
- "pnpm": {
79
- "overrides": {
80
- "koa": ">=3.0.1"
81
- }
56
+ "vitest": "^3.2.4",
57
+ "@removify/tailwind-preset": "1.0.2"
82
58
  },
83
59
  "lint-staged": {
84
60
  "**/*.{js,ts,vue,html}": [
85
61
  "pnpm lint:fix"
86
62
  ]
63
+ },
64
+ "scripts": {
65
+ "start": "pnpm exec tsx ./src/index.ts",
66
+ "build": "rimraf dist && tsup src/index.ts --format esm,cjs --clean --dts && pnpm generate:tailwind-v4",
67
+ "generate:tailwind-v4": "tsx ./scripts/generate-tailwind-v4.ts",
68
+ "update-animation:v4": "curl https://raw.githubusercontent.com/Wombosvideo/tw-animate-css/refs/heads/main/src/tw-animate.css > ./tailwind-dist/tailwindcss-animate.css",
69
+ "typecheck": "tsc --noEmit",
70
+ "watch": "tsup --format esm,cjs --watch",
71
+ "dev": "tsx watch ./src/index.ts",
72
+ "dev:playground": "pnpm --filter playground dev",
73
+ "test": "vitest",
74
+ "lint": "eslint .",
75
+ "lint:fix": "eslint --fix .",
76
+ "husky:install": "husky",
77
+ "release": "bumpp && pnpm publish --access=public",
78
+ "tailwind-config-viewer": "tailwind-config-viewer -o -c tailwind.config.js",
79
+ "tailwind-config-viewer:build": "pnpm build && tailwind-config-viewer export tailwind-dist -c tailwind.config.js"
87
80
  }
88
- }
81
+ }
package/tailwind-dist/index.css ADDED
@@ -0,0 +1,351 @@
1
+ @import "tailwindcss";
2
+ @import "./tailwindcss-animate.css";
3
+
4
+ @theme {
5
+ --color-danger: #EA3529;
6
+ --color-warning: #F97316;
7
+ --color-success: #15A46E;
8
+ --color-info: #3EC2C9;
9
+ --color-special: #686DF4;
10
+ --color-bateau-50: #F2F5F7;
11
+ --color-bateau-100: #E7ECF0;
12
+ --color-bateau-200: #CCD7E1;
13
+ --color-bateau-300: #ADC0D0;
14
+ --color-bateau-400: #6390B0;
15
+ --color-bateau-500: #1C749F;
16
+ --color-bateau-600: #1B6F98;
17
+ --color-bateau-700: #186388;
18
+ --color-bateau-800: #155675;
19
+ --color-bateau-900: #114660;
20
+ --color-bateau-950: #0C3144;
21
+ --color-bateau-DEFAULT: #1C749F;
22
+ --color-pompelmo-50: #FFF4F4;
23
+ --color-pompelmo-100: #FFEBEA;
24
+ --color-pompelmo-200: #FFD4D4;
25
+ --color-pompelmo-300: #FFBCBB;
26
+ --color-pompelmo-400: #FF9F9E;
27
+ --color-pompelmo-500: #FF6663;
28
+ --color-pompelmo-600: #F3615E;
29
+ --color-pompelmo-700: #DA5754;
30
+ --color-pompelmo-800: #BC4B49;
31
+ --color-pompelmo-900: #9A3E3C;
32
+ --color-pompelmo-950: #6D2C2A;
33
+ --color-pompelmo-DEFAULT: #FF6663;
34
+ --color-neutral-50: #F9FAFB;
35
+ --color-neutral-100: #F4F6F7;
36
+ --color-neutral-200: #E9ECEF;
37
+ --color-neutral-300: #DEE2E7;
38
+ --color-neutral-400: #D2D8DE;
39
+ --color-neutral-500: #BEC7D1;
40
+ --color-neutral-600: #B5BEC7;
41
+ --color-neutral-700: #A2AAB2;
42
+ --color-neutral-800: #8C939A;
43
+ --color-neutral-900: #73787E;
44
+ --color-neutral-950: #515559;
45
+ --color-neutral-DEFAULT: #BEC7D1;
46
+ --color-orange-50: #FEF5F2;
47
+ --color-orange-100: #FEECE7;
48
+ --color-orange-200: #FDD7CC;
49
+ --color-orange-300: #FCC0AD;
50
+ --color-orange-400: #FBA586;
51
+ --color-orange-500: #F97316;
52
+ --color-orange-600: #EE6E15;
53
+ --color-orange-700: #D46213;
54
+ --color-orange-800: #B85510;
55
+ --color-orange-900: #96450D;
56
+ --color-orange-950: #6A3109;
57
+ --color-orange-DEFAULT: #F97316;
58
+ --color-amber-50: #FFF9F2;
59
+ --color-amber-100: #FEF5E7;
60
+ --color-amber-200: #FEEACD;
61
+ --color-amber-300: #FDDEAE;
62
+ --color-amber-400: #FCD288;
63
+ --color-amber-500: #FBBF24;
64
+ --color-amber-600: #EFB622;
65
+ --color-amber-700: #D6A31F;
66
+ --color-amber-800: #B98D1B;
67
+ --color-amber-900: #977316;
68
+ --color-amber-950: #6B510F;
69
+ --color-amber-DEFAULT: #FBBF24;
70
+ --color-indigo-50: #F4F4FE;
71
+ --color-indigo-100: #EBEBFD;
72
+ --color-indigo-200: #D5D6FB;
73
+ --color-indigo-300: #BCBEF9;
74
+ --color-indigo-400: #A0A2F7;
75
+ --color-indigo-500: #686DF4;
76
+ --color-indigo-600: #6368E9;
77
+ --color-indigo-700: #595DD0;
78
+ --color-indigo-800: #4D51B4;
79
+ --color-indigo-900: #3F4293;
80
+ --color-indigo-950: #2C2F68;
81
+ --color-indigo-DEFAULT: #686DF4;
82
+ --color-seafoam-50: #F3FAFA;
83
+ --color-seafoam-100: #E8F5F6;
84
+ --color-seafoam-200: #CFEBED;
85
+ --color-seafoam-300: #B2E0E3;
86
+ --color-seafoam-400: #8FD4D9;
87
+ --color-seafoam-500: #3EC2C9;
88
+ --color-seafoam-600: #3BB9C0;
89
+ --color-seafoam-700: #35A6AB;
90
+ --color-seafoam-800: #2E8F95;
91
+ --color-seafoam-900: #257579;
92
+ --color-seafoam-950: #1A5356;
93
+ --color-seafoam-DEFAULT: #3EC2C9;
94
+ --color-green-50: #F2F7F4;
95
+ --color-green-100: #E7F1EB;
96
+ --color-green-200: #CCE2D6;
97
+ --color-green-300: #ADD2BE;
98
+ --color-green-400: #86C1A3;
99
+ --color-green-500: #15A46E;
100
+ --color-green-600: #149C69;
101
+ --color-green-700: #128C5E;
102
+ --color-green-800: #107951;
103
+ --color-green-900: #0D6342;
104
+ --color-green-950: #09462F;
105
+ --color-green-DEFAULT: #15A46E;
106
+ --color-fuchsia-50: #FAF3FD;
107
+ --color-fuchsia-100: #F5E8FB;
108
+ --color-fuchsia-200: #ECCFF7;
109
+ --color-fuchsia-300: #E1B2F2;
110
+ --color-fuchsia-400: #D68FEE;
111
+ --color-fuchsia-500: #C53DE7;
112
+ --color-fuchsia-600: #BC3ADC;
113
+ --color-fuchsia-700: #A834C5;
114
+ --color-fuchsia-800: #922DAB;
115
+ --color-fuchsia-900: #77258B;
116
+ --color-fuchsia-950: #541A63;
117
+ --color-fuchsia-DEFAULT: #C53DE7;
118
+ --color-red-50: #FDF2F2;
119
+ --color-red-100: #FBE8E7;
120
+ --color-red-200: #F8CECD;
121
+ --color-red-300: #F4B0AE;
122
+ --color-red-400: #F08C8A;
123
+ --color-red-500: #EA3529;
124
+ --color-red-600: #DF3327;
125
+ --color-red-700: #C82D23;
126
+ --color-red-800: #AD271E;
127
+ --color-red-900: #8D2019;
128
+ --color-red-950: #641711;
129
+ --color-red-DEFAULT: #EA3529;
130
+ --color-rating-high: #15A46E;
131
+ --color-rating-medium: #EC5818;
132
+ --color-rating-low: #EA3529;
133
+ --color-rating-high-star: #86C1A3;
134
+ --color-rating-medium-star: #FCD288;
135
+ --color-rating-low-star: #F08C8A;
136
+ --color-primary-50: #F2F5F7;
137
+ --color-primary-100: #E7ECF0;
138
+ --color-primary-200: #CCD7E1;
139
+ --color-primary-300: #ADC0D0;
140
+ --color-primary-400: #6390B0;
141
+ --color-primary-500: #1C749F;
142
+ --color-primary-600: #1B6F98;
143
+ --color-primary-700: #186388;
144
+ --color-primary-800: #155675;
145
+ --color-primary-900: #114660;
146
+ --color-primary-950: #0C3144;
147
+ --color-primary-DEFAULT: #1C749F;
148
+ --color-secondary-50: #FFF4F4;
149
+ --color-secondary-100: #FFEBEA;
150
+ --color-secondary-200: #FFD4D4;
151
+ --color-secondary-300: #FFBCBB;
152
+ --color-secondary-400: #FF9F9E;
153
+ --color-secondary-500: #FF6663;
154
+ --color-secondary-600: #F3615E;
155
+ --color-secondary-700: #DA5754;
156
+ --color-secondary-800: #BC4B49;
157
+ --color-secondary-900: #9A3E3C;
158
+ --color-secondary-950: #6D2C2A;
159
+ --color-secondary-DEFAULT: #FF6663;
160
+
161
+ --font-sans: DM Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
162
+
163
+ --text-2xs: 0.6875rem;
164
+ --text-2xs--line-height: 1rem;
165
+ --text-xs: 0.75rem;
166
+ --text-xs--line-height: 1rem;
167
+ --text-sm: 0.875rem;
168
+ --text-sm--line-height: 1.25rem;
169
+ --text-base: 1rem;
170
+ --text-base--line-height: 1.5rem;
171
+ --text-md: 1.125rem;
172
+ --text-md--line-height: 1.5rem;
173
+ --text-lg: 1.25rem;
174
+ --text-lg--line-height: 1.625rem;
175
+ --text-display1: 3.75rem;
176
+ --text-display1--line-height: 5rem;
177
+ --text-display1--letter-spacing: -0.0625rem;
178
+ --text-display1--font-weight: 700;
179
+ --text-display2: 3.25rem;
180
+ --text-display2--line-height: 4.25rem;
181
+ --text-display2--letter-spacing: -0.05rem;
182
+ --text-display2--font-weight: 700;
183
+ --text-display3: 2.75rem;
184
+ --text-display3--line-height: 3.625rem;
185
+ --text-display3--letter-spacing: -0.0375rem;
186
+ --text-display3--font-weight: 700;
187
+ --text-h1: 3rem;
188
+ --text-h1--line-height: 3.75rem;
189
+ --text-h1--letter-spacing: -0.0125rem;
190
+ --text-h1--font-weight: 700;
191
+ --text-h2: 2.5rem;
192
+ --text-h2--line-height: 3.25rem;
193
+ --text-h2--letter-spacing: -0.0125rem;
194
+ --text-h2--font-weight: 700;
195
+ --text-h3: 2.25rem;
196
+ --text-h3--line-height: 3rem;
197
+ --text-h3--letter-spacing: -0.0125rem;
198
+ --text-h3--font-weight: 700;
199
+ --text-h4: 2rem;
200
+ --text-h4--line-height: 2.625rem;
201
+ --text-h4--letter-spacing: -0.0125rem;
202
+ --text-h4--font-weight: 700;
203
+ --text-h5: 1.5rem;
204
+ --text-h5--line-height: 2rem;
205
+ --text-h5--letter-spacing: -0.0125rem;
206
+ --text-h5--font-weight: 700;
207
+ --text-h6: 1.25rem;
208
+ --text-h6--line-height: 1.625rem;
209
+ --text-h6--letter-spacing: -0.0125rem;
210
+ --text-h6--font-weight: 700;
211
+
212
+ --breakpoint-xs: 480px;
213
+ --breakpoint-sm: 640px;
214
+ --breakpoint-md: 768px;
215
+ --breakpoint-lg: 1024px;
216
+ --breakpoint-xl: 1280px;
217
+ --breakpoint-2xl: 1536px;
218
+ --breakpoint-tablet: 640px;
219
+ --breakpoint-tablet-lg: 960px;
220
+ --breakpoint-laptop: 1024px;
221
+ --breakpoint-desktop: 1280px;
222
+
223
+ --shadow-elevation-0: 0 0 0 0 rgba(0, 0, 0, 0.10);
224
+ --shadow-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
225
+ --shadow-elevation-2: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
226
+ --shadow-elevation-3: 0 6px 12px 0 rgba(0, 0, 0, 0.10);
227
+ --shadow-elevation-4: 0 8px 16px 0 rgba(0, 0, 0, 0.10);
228
+ --shadow-elevation-5: 0 12px 24px 0 rgba(0, 0, 0, 0.10);
229
+
230
+ --animate-radix-accordion-down: radix-accordion-down 0.1s ease-out;
231
+ --animate-radix-accordion-up: radix-accordion-up 0.1s ease-out;
232
+ --animate-radix-collapsible-down: radix-collapsible-down 0.1s ease-in-out;
233
+ --animate-radix-collapsible-up: radix-collapsible-up 0.1s ease-in-out;
234
+ --animate-reka-accordion-down: reka-accordion-down 0.1s ease-out;
235
+ --animate-reka-accordion-up: reka-accordion-up 0.1s ease-out;
236
+ --animate-reka-collapsible-down: reka-collapsible-down 0.1s ease-in-out;
237
+ --animate-reka-collapsible-up: reka-collapsible-up 0.1s ease-in-out;
238
+ --animate-accordion-down: accordion-down 0.2s ease-out;
239
+ --animate-accordion-up: accordion-up 0.2s ease-out;
240
+ --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
241
+ --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
242
+ }
243
+
244
+ @keyframes radix-accordion-down {
245
+ from {
246
+ height: 0;
247
+ }
248
+ to {
249
+ height: var(--radix-accordion-content-height);
250
+ }
251
+ }
252
+
253
+ @keyframes radix-accordion-up {
254
+ from {
255
+ height: var(--radix-accordion-content-height);
256
+ }
257
+ to {
258
+ height: 0;
259
+ }
260
+ }
261
+
262
+ @keyframes radix-collapsible-down {
263
+ from {
264
+ height: 0;
265
+ }
266
+ to {
267
+ height: var(--radix-collapsible-content-height);
268
+ }
269
+ }
270
+
271
+ @keyframes radix-collapsible-up {
272
+ from {
273
+ height: var(--radix-collapsible-content-height);
274
+ }
275
+ to {
276
+ height: 0;
277
+ }
278
+ }
279
+
280
+ @keyframes reka-accordion-down {
281
+ from {
282
+ height: 0;
283
+ }
284
+ to {
285
+ height: var(--reka-accordion-content-height);
286
+ }
287
+ }
288
+
289
+ @keyframes reka-accordion-up {
290
+ from {
291
+ height: var(--reka-accordion-content-height);
292
+ }
293
+ to {
294
+ height: 0;
295
+ }
296
+ }
297
+
298
+ @keyframes reka-collapsible-down {
299
+ from {
300
+ height: 0;
301
+ }
302
+ to {
303
+ height: var(--reka-collapsible-content-height);
304
+ }
305
+ }
306
+
307
+ @keyframes reka-collapsible-up {
308
+ from {
309
+ height: var(--reka-collapsible-content-height);
310
+ }
311
+ to {
312
+ height: 0;
313
+ }
314
+ }
315
+
316
+ @keyframes accordion-down {
317
+ from {
318
+ height: 0;
319
+ }
320
+ to {
321
+ height: var(--radix-accordion-content-height);
322
+ }
323
+ }
324
+
325
+ @keyframes accordion-up {
326
+ from {
327
+ height: var(--radix-accordion-content-height);
328
+ }
329
+ to {
330
+ height: 0;
331
+ }
332
+ }
333
+
334
+ @keyframes collapsible-down {
335
+ from {
336
+ height: 0;
337
+ }
338
+ to {
339
+ height: var(--radix-collapsible-content-height);
340
+ }
341
+ }
342
+
343
+ @keyframes collapsible-up {
344
+ from {
345
+ height: var(--radix-collapsible-content-height);
346
+ }
347
+ to {
348
+ height: 0;
349
+ }
350
+ }
351
+
package/tailwind-dist/tailwindcss-animate.css ADDED
@@ -0,0 +1,578 @@
1
+ /**
2
+ * TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.
3
+ *
4
+ * @author Luca Bosin <https://github.com/Wombosvideo>
5
+ * @license MIT
6
+ */
7
+
8
+ :root {
9
+ /* @property declarations for animation variables, to prevent inheritance */
10
+ @property --tw-animation-delay {
11
+ syntax: "*";
12
+ inherits: false;
13
+ initial-value: 0s;
14
+ }
15
+
16
+ @property --tw-animation-direction {
17
+ syntax: "*";
18
+ inherits: false;
19
+ initial-value: normal;
20
+ }
21
+
22
+ @property --tw-animation-duration {
23
+ syntax: "*";
24
+ inherits: false;
25
+ /* does not have an initial value in order for the `--tw-duration` variable to work */
26
+ }
27
+
28
+ @property --tw-animation-fill-mode {
29
+ syntax: "*";
30
+ inherits: false;
31
+ initial-value: none;
32
+ }
33
+
34
+ @property --tw-animation-iteration-count {
35
+ syntax: "*";
36
+ inherits: false;
37
+ initial-value: 1;
38
+ }
39
+
40
+ @property --tw-enter-blur {
41
+ syntax: "*";
42
+ inherits: false;
43
+ initial-value: 0;
44
+ }
45
+
46
+ @property --tw-enter-opacity {
47
+ syntax: "*";
48
+ inherits: false;
49
+ initial-value: 1;
50
+ }
51
+
52
+ @property --tw-enter-rotate {
53
+ syntax: "*";
54
+ inherits: false;
55
+ initial-value: 0;
56
+ }
57
+
58
+ @property --tw-enter-scale {
59
+ syntax: "*";
60
+ inherits: false;
61
+ initial-value: 1;
62
+ }
63
+
64
+ @property --tw-enter-translate-x {
65
+ syntax: "*";
66
+ inherits: false;
67
+ initial-value: 0;
68
+ }
69
+
70
+ @property --tw-enter-translate-y {
71
+ syntax: "*";
72
+ inherits: false;
73
+ initial-value: 0;
74
+ }
75
+
76
+ @property --tw-exit-blur {
77
+ syntax: "*";
78
+ inherits: false;
79
+ initial-value: 0;
80
+ }
81
+
82
+ @property --tw-exit-opacity {
83
+ syntax: "*";
84
+ inherits: false;
85
+ initial-value: 1;
86
+ }
87
+
88
+ @property --tw-exit-rotate {
89
+ syntax: "*";
90
+ inherits: false;
91
+ initial-value: 0;
92
+ }
93
+
94
+ @property --tw-exit-scale {
95
+ syntax: "*";
96
+ inherits: false;
97
+ initial-value: 1;
98
+ }
99
+
100
+ @property --tw-exit-translate-x {
101
+ syntax: "*";
102
+ inherits: false;
103
+ initial-value: 0;
104
+ }
105
+
106
+ @property --tw-exit-translate-y {
107
+ syntax: "*";
108
+ inherits: false;
109
+ initial-value: 0;
110
+ }
111
+ }
112
+
113
+ @theme inline {
114
+ /* Predefined values */
115
+
116
+ --animation-delay-0: 0s;
117
+ --animation-delay-75: 75ms;
118
+ --animation-delay-100: 0.1s;
119
+ --animation-delay-150: 0.15s;
120
+ --animation-delay-200: 0.2s;
121
+ --animation-delay-300: 0.3s;
122
+ --animation-delay-500: 0.5s;
123
+ --animation-delay-700: 0.7s;
124
+ --animation-delay-1000: 1s;
125
+
126
+ --animation-repeat-0: 0;
127
+ --animation-repeat-1: 1;
128
+ --animation-repeat-infinite: infinite;
129
+
130
+ --animation-direction-normal: normal;
131
+ --animation-direction-reverse: reverse;
132
+ --animation-direction-alternate: alternate;
133
+ --animation-direction-alternate-reverse: alternate-reverse;
134
+
135
+ --animation-fill-mode-none: none;
136
+ --animation-fill-mode-forwards: forwards;
137
+ --animation-fill-mode-backwards: backwards;
138
+ --animation-fill-mode-both: both;
139
+
140
+ --percentage-0: 0;
141
+ --percentage-5: 0.05;
142
+ --percentage-10: 0.1;
143
+ --percentage-15: 0.15;
144
+ --percentage-20: 0.2;
145
+ --percentage-25: 0.25;
146
+ --percentage-30: 0.3;
147
+ --percentage-35: 0.35;
148
+ --percentage-40: 0.4;
149
+ --percentage-45: 0.45;
150
+ --percentage-50: 0.5;
151
+ --percentage-55: 0.55;
152
+ --percentage-60: 0.6;
153
+ --percentage-65: 0.65;
154
+ --percentage-70: 0.7;
155
+ --percentage-75: 0.75;
156
+ --percentage-80: 0.8;
157
+ --percentage-85: 0.85;
158
+ --percentage-90: 0.9;
159
+ --percentage-95: 0.95;
160
+ --percentage-100: 1;
161
+ --percentage-translate-full: 1;
162
+
163
+ /* Animations and keyframes */
164
+
165
+ --animate-in: enter var(--tw-animation-duration, var(--tw-duration, 150ms)) var(--tw-ease, ease)
166
+ var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
167
+ var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
168
+ --animate-out: exit var(--tw-animation-duration, var(--tw-duration, 150ms)) var(--tw-ease, ease)
169
+ var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
170
+ var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
171
+
172
+ @keyframes enter {
173
+ from {
174
+ opacity: var(--tw-enter-opacity, 1);
175
+ transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
176
+ scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
177
+ rotate(var(--tw-enter-rotate, 0));
178
+ filter: blur(var(--tw-enter-blur, 0));
179
+ }
180
+ }
181
+
182
+ @keyframes exit {
183
+ to {
184
+ opacity: var(--tw-exit-opacity, 1);
185
+ transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
186
+ scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
187
+ rotate(var(--tw-exit-rotate, 0));
188
+ filter: blur(var(--tw-exit-blur, 0));
189
+ }
190
+ }
191
+
192
+ --animate-accordion-down: accordion-down var(--tw-animation-duration, var(--tw-duration, 200ms))
193
+ var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
194
+ var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
195
+ --animate-accordion-up: accordion-up var(--tw-animation-duration, var(--tw-duration, 200ms))
196
+ var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
197
+ var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
198
+ --animate-collapsible-down: collapsible-down
199
+ var(--tw-animation-duration, var(--tw-duration, 200ms)) var(--tw-ease, ease-out)
200
+ var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
201
+ var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
202
+ --animate-collapsible-up: collapsible-up var(--tw-animation-duration, var(--tw-duration, 200ms))
203
+ var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
204
+ var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
205
+
206
+ @keyframes accordion-down {
207
+ from {
208
+ height: 0;
209
+ }
210
+ to {
211
+ height: var(
212
+ --radix-accordion-content-height,
213
+ var(
214
+ --bits-accordion-content-height,
215
+ var(--reka-accordion-content-height,
216
+ var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))
217
+ )
218
+ );
219
+ }
220
+ }
221
+
222
+ @keyframes accordion-up {
223
+ from {
224
+ height: var(
225
+ --radix-accordion-content-height,
226
+ var(
227
+ --bits-accordion-content-height,
228
+ var(--reka-accordion-content-height,
229
+ var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto)))
230
+ )
231
+ );
232
+ }
233
+ to {
234
+ height: 0;
235
+ }
236
+ }
237
+
238
+ @keyframes collapsible-down {
239
+ from {
240
+ height: 0;
241
+ }
242
+ to {
243
+ height: var(
244
+ --radix-collapsible-content-height,
245
+ var(
246
+ --bits-collapsible-content-height,
247
+ var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
248
+ )
249
+ );
250
+ }
251
+ }
252
+
253
+ @keyframes collapsible-up {
254
+ from {
255
+ height: var(
256
+ --radix-collapsible-content-height,
257
+ var(
258
+ --bits-collapsible-content-height,
259
+ var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
260
+ )
261
+ );
262
+ }
263
+ to {
264
+ height: 0;
265
+ }
266
+ }
267
+
268
+ --animate-caret-blink: caret-blink 1.25s ease-out infinite;
269
+
270
+ @keyframes caret-blink {
271
+ 0%,
272
+ 70%,
273
+ 100% {
274
+ opacity: 1;
275
+ }
276
+ 20%,
277
+ 50% {
278
+ opacity: 0;
279
+ }
280
+ }
281
+ }
282
+
283
+ /* Utility classes */
284
+
285
+ @utility animation-duration-* {
286
+ --tw-animation-duration: calc(--value(number) * 1ms);
287
+ --tw-animation-duration: --value(--animation-duration-*, [duration], "initial", [*]);
288
+ animation-duration: calc(--value(number) * 1ms);
289
+ animation-duration: --value(--animation-duration-*, [duration], "initial", [*]);
290
+ }
291
+
292
+ @utility delay-* {
293
+ animation-delay: calc(--value(number) * 1ms);
294
+ animation-delay: --value(--animation-delay-*, [duration], "initial", [*]);
295
+ --tw-animation-delay: calc(--value(number) * 1ms);
296
+ --tw-animation-delay: --value(--animation-delay-*, [duration], "initial", [*]);
297
+ }
298
+
299
+ @utility repeat-* {
300
+ animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]);
301
+ --tw-animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]);
302
+ }
303
+
304
+ @utility direction-* {
305
+ animation-direction: --value(--animation-direction-*, "initial", [*]);
306
+ --tw-animation-direction: --value(--animation-direction-*, "initial", [*]);
307
+ }
308
+
309
+ @utility fill-mode-* {
310
+ animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]);
311
+ --tw-animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]);
312
+ }
313
+
314
+ @utility running {
315
+ animation-play-state: running;
316
+ }
317
+ @utility paused {
318
+ animation-play-state: paused;
319
+ }
320
+ @utility play-state-* {
321
+ animation-play-state: --value("initial", [*]);
322
+ }
323
+
324
+ @utility blur-in {
325
+ --tw-enter-blur: 20px;
326
+ }
327
+ @utility blur-in-* {
328
+ --tw-enter-blur: calc(--value(number) * 1px);
329
+ --tw-enter-blur: --value(--blur-*, [*]);
330
+ }
331
+
332
+ @utility blur-out {
333
+ --tw-exit-blur: 20px;
334
+ }
335
+ @utility blur-out-* {
336
+ --tw-exit-blur: calc(--value(number) * 1px);
337
+ --tw-exit-blur: --value(--blur-*, [*]);
338
+ }
339
+
340
+ @utility fade-in {
341
+ --tw-enter-opacity: 0;
342
+ }
343
+ @utility fade-in-* {
344
+ --tw-enter-opacity: calc(--value(number) / 100);
345
+ --tw-enter-opacity: --value(--percentage-*, [*]);
346
+ }
347
+
348
+ @utility fade-out {
349
+ --tw-exit-opacity: 0;
350
+ }
351
+ @utility fade-out-* {
352
+ --tw-exit-opacity: calc(--value(number) / 100);
353
+ --tw-exit-opacity: --value(--percentage-*, [*]);
354
+ }
355
+
356
+ @utility zoom-in {
357
+ --tw-enter-scale: 0;
358
+ }
359
+ @utility zoom-in-* {
360
+ --tw-enter-scale: calc(--value(number) * 1%);
361
+ --tw-enter-scale: calc(--value(ratio));
362
+ --tw-enter-scale: --value(--percentage-*, [*]);
363
+ }
364
+ @utility -zoom-in-* {
365
+ --tw-enter-scale: calc(--value(number) * -1%);
366
+ --tw-enter-scale: calc(--value(ratio) * -1);
367
+ --tw-enter-scale: --value(--percentage-*, [*]);
368
+ }
369
+
370
+ @utility zoom-out {
371
+ --tw-exit-scale: 0;
372
+ }
373
+ @utility zoom-out-* {
374
+ --tw-exit-scale: calc(--value(number) * 1%);
375
+ --tw-exit-scale: calc(--value(ratio));
376
+ --tw-exit-scale: --value(--percentage-*, [*]);
377
+ }
378
+ @utility -zoom-out-* {
379
+ --tw-exit-scale: calc(--value(number) * -1%);
380
+ --tw-exit-scale: calc(--value(ratio) * -1);
381
+ --tw-exit-scale: --value(--percentage-*, [*]);
382
+ }
383
+
384
+ @utility spin-in {
385
+ --tw-enter-rotate: 30deg;
386
+ }
387
+ @utility spin-in-* {
388
+ --tw-enter-rotate: calc(--value(number) * 1deg);
389
+ --tw-enter-rotate: calc(--value(ratio) * 360deg);
390
+ --tw-enter-rotate: --value(--rotate-*, [*]);
391
+ }
392
+ @utility -spin-in {
393
+ --tw-enter-rotate: -30deg;
394
+ }
395
+ @utility -spin-in-* {
396
+ --tw-enter-rotate: calc(--value(number) * -1deg);
397
+ --tw-enter-rotate: calc(--value(ratio) * -360deg);
398
+ --tw-enter-rotate: --value(--rotate-*, [*]);
399
+ }
400
+
401
+ @utility spin-out {
402
+ --tw-exit-rotate: 30deg;
403
+ }
404
+ @utility spin-out-* {
405
+ --tw-exit-rotate: calc(--value(number) * 1deg);
406
+ --tw-exit-rotate: calc(--value(ratio) * 360deg);
407
+ --tw-exit-rotate: --value(--rotate-*, [*]);
408
+ }
409
+ @utility -spin-out {
410
+ --tw-exit-rotate: -30deg;
411
+ }
412
+ @utility -spin-out-* {
413
+ --tw-exit-rotate: calc(--value(number) * -1deg);
414
+ --tw-exit-rotate: calc(--value(ratio) * -360deg);
415
+ --tw-exit-rotate: --value(--rotate-*, [*]);
416
+ }
417
+
418
+ @utility slide-in-from-top {
419
+ --tw-enter-translate-y: -100%;
420
+ }
421
+ @utility slide-in-from-top-* {
422
+ --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
423
+ --tw-enter-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
424
+ --tw-enter-translate-y: calc(--value(ratio) * -100%);
425
+ --tw-enter-translate-y: calc(--value(--translate-*, [percentage], [length]) * -1);
426
+ }
427
+ @utility slide-in-from-bottom {
428
+ --tw-enter-translate-y: 100%;
429
+ }
430
+ @utility slide-in-from-bottom-* {
431
+ --tw-enter-translate-y: calc(--value(integer) * var(--spacing));
432
+ --tw-enter-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
433
+ --tw-enter-translate-y: calc(--value(ratio) * 100%);
434
+ --tw-enter-translate-y: --value(--translate-*, [percentage], [length]);
435
+ }
436
+ @utility slide-in-from-left {
437
+ --tw-enter-translate-x: -100%;
438
+ }
439
+ @utility slide-in-from-left-* {
440
+ --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
441
+ --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
442
+ --tw-enter-translate-x: calc(--value(ratio) * -100%);
443
+ --tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
444
+ }
445
+ @utility slide-in-from-right {
446
+ --tw-enter-translate-x: 100%;
447
+ }
448
+ @utility slide-in-from-right-* {
449
+ --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
450
+ --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
451
+ --tw-enter-translate-x: calc(--value(ratio) * 100%);
452
+ --tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
453
+ }
454
+ @utility slide-in-from-start {
455
+ &:dir(ltr) {
456
+ --tw-enter-translate-x: -100%;
457
+ }
458
+ &:dir(rtl) {
459
+ --tw-enter-translate-x: 100%;
460
+ }
461
+ }
462
+ @utility slide-in-from-start-* {
463
+ &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
464
+ --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
465
+ --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
466
+ --tw-enter-translate-x: calc(--value(ratio) * -100%);
467
+ --tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
468
+ }
469
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
470
+ --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
471
+ --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
472
+ --tw-enter-translate-x: calc(--value(ratio) * 100%);
473
+ --tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
474
+ }
475
+ }
476
+ @utility slide-in-from-end {
477
+ &:dir(ltr) {
478
+ --tw-enter-translate-x: 100%;
479
+ }
480
+ &:dir(rtl) {
481
+ --tw-enter-translate-x: -100%;
482
+ }
483
+ }
484
+ @utility slide-in-from-end-* {
485
+ &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
486
+ --tw-enter-translate-x: calc(--value(integer) * var(--spacing));
487
+ --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
488
+ --tw-enter-translate-x: calc(--value(ratio) * 100%);
489
+ --tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
490
+ }
491
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
492
+ --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
493
+ --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
494
+ --tw-enter-translate-x: calc(--value(ratio) * -100%);
495
+ --tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
496
+ }
497
+ }
498
+
499
+ @utility slide-out-to-top {
500
+ --tw-exit-translate-y: -100%;
501
+ }
502
+ @utility slide-out-to-top-* {
503
+ --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
504
+ --tw-exit-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
505
+ --tw-exit-translate-y: calc(--value(ratio) * -100%);
506
+ --tw-exit-translate-y: calc(--value(--translate-*, [percentage], [length]) * -1);
507
+ }
508
+ @utility slide-out-to-bottom {
509
+ --tw-exit-translate-y: 100%;
510
+ }
511
+ @utility slide-out-to-bottom-* {
512
+ --tw-exit-translate-y: calc(--value(integer) * var(--spacing));
513
+ --tw-exit-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
514
+ --tw-exit-translate-y: calc(--value(ratio) * 100%);
515
+ --tw-exit-translate-y: --value(--translate-*, [percentage], [length]);
516
+ }
517
+ @utility slide-out-to-left {
518
+ --tw-exit-translate-x: -100%;
519
+ }
520
+ @utility slide-out-to-left-* {
521
+ --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
522
+ --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
523
+ --tw-exit-translate-x: calc(--value(ratio) * -100%);
524
+ --tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
525
+ }
526
+ @utility slide-out-to-right {
527
+ --tw-exit-translate-x: 100%;
528
+ }
529
+ @utility slide-out-to-right-* {
530
+ --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
531
+ --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
532
+ --tw-exit-translate-x: calc(--value(ratio) * 100%);
533
+ --tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
534
+ }
535
+ @utility slide-out-to-start {
536
+ &:dir(ltr) {
537
+ --tw-exit-translate-x: -100%;
538
+ }
539
+ &:dir(rtl) {
540
+ --tw-exit-translate-x: 100%;
541
+ }
542
+ }
543
+ @utility slide-out-to-start-* {
544
+ &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
545
+ --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
546
+ --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
547
+ --tw-exit-translate-x: calc(--value(ratio) * -100%);
548
+ --tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
549
+ }
550
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
551
+ --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
552
+ --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
553
+ --tw-exit-translate-x: calc(--value(ratio) * 100%);
554
+ --tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
555
+ }
556
+ }
557
+ @utility slide-out-to-end {
558
+ &:dir(ltr) {
559
+ --tw-exit-translate-x: 100%;
560
+ }
561
+ &:dir(rtl) {
562
+ --tw-exit-translate-x: -100%;
563
+ }
564
+ }
565
+ @utility slide-out-to-end-* {
566
+ &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
567
+ --tw-exit-translate-x: calc(--value(integer) * var(--spacing));
568
+ --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
569
+ --tw-exit-translate-x: calc(--value(ratio) * 100%);
570
+ --tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
571
+ }
572
+ &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
573
+ --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
574
+ --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
575
+ --tw-exit-translate-x: calc(--value(ratio) * -100%);
576
+ --tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
577
+ }
578
+ }