@gbmtech/aurora-ui 0.0.6 → 0.1.0
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.
- package/dist/cjs/index.css +132 -527
- package/dist/esm/index.css +132 -527
- package/package.json +2 -1
package/dist/cjs/index.css
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "tw-animate-css";
|
|
2
|
+
|
|
1
3
|
@layer base {
|
|
2
4
|
*,
|
|
3
5
|
::after,
|
|
@@ -26,7 +28,7 @@
|
|
|
26
28
|
margin: 0;
|
|
27
29
|
}
|
|
28
30
|
|
|
29
|
-
&[type=
|
|
31
|
+
&[type="number"] {
|
|
30
32
|
-moz-appearance: textfield;
|
|
31
33
|
}
|
|
32
34
|
}
|
|
@@ -39,540 +41,143 @@
|
|
|
39
41
|
* consistency. Each color group serves a specific purpose
|
|
40
42
|
* (e.g., background, border, highlights).
|
|
41
43
|
*/
|
|
42
|
-
|
|
43
|
-
--color-gbm-sky: #
|
|
44
|
-
--color-gbm-ocean: #
|
|
44
|
+
@theme inline {
|
|
45
|
+
--color-gbm-sky: #1154ff;
|
|
46
|
+
--color-gbm-ocean: #0a3ec2;
|
|
45
47
|
--color-gbm-blue: #033278;
|
|
46
48
|
|
|
47
|
-
--color-gbm-dark: #
|
|
49
|
+
--color-gbm-dark: #2e3238;
|
|
48
50
|
--color-gbm-black: #191919;
|
|
49
|
-
--color-gbm-gray: #
|
|
50
|
-
|
|
51
|
-
--color-header: #
|
|
52
|
-
--color-background: #
|
|
53
|
-
--color-stroke: #
|
|
54
|
-
--color-section: #
|
|
55
|
-
|
|
56
|
-
--color-success: #
|
|
57
|
-
--color-success-light: #
|
|
58
|
-
--color-success-dark: #
|
|
59
|
-
|
|
60
|
-
--color-error: #
|
|
61
|
-
--color-error-light: #
|
|
62
|
-
--color-error-dark: #
|
|
63
|
-
|
|
64
|
-
--color-warning: #
|
|
65
|
-
--color-warning-light: #
|
|
66
|
-
--color-warning-dark: #
|
|
67
|
-
|
|
68
|
-
--color-sun: #
|
|
69
|
-
--color-sun-light: #
|
|
70
|
-
--color-sun-dark: #
|
|
71
|
-
|
|
72
|
-
--color-gray-50: #
|
|
73
|
-
--color-gray-100: #
|
|
74
|
-
--color-gray-200: #
|
|
75
|
-
--color-gray-300: #
|
|
76
|
-
--color-gray-400: #
|
|
77
|
-
--color-gray-500: #
|
|
78
|
-
--color-gray-600: #
|
|
79
|
-
--color-gray-700: #
|
|
80
|
-
--color-gray-800: #
|
|
81
|
-
--color-gray-900: #
|
|
82
|
-
|
|
83
|
-
--color-red-50: #
|
|
84
|
-
--color-red-100: #
|
|
85
|
-
--color-red-200: #
|
|
86
|
-
--color-red-300: #
|
|
87
|
-
--color-red-400: #
|
|
88
|
-
--color-red-500: #
|
|
89
|
-
--color-red-600: #
|
|
90
|
-
--color-red-700: #
|
|
91
|
-
--color-red-800: #
|
|
92
|
-
--color-red-900: #
|
|
93
|
-
|
|
94
|
-
--color-orange-50: #
|
|
95
|
-
--color-orange-100: #
|
|
96
|
-
--color-orange-200: #
|
|
97
|
-
--color-orange-300: #
|
|
98
|
-
--color-orange-400: #
|
|
99
|
-
--color-orange-500: #
|
|
100
|
-
--color-orange-600: #
|
|
101
|
-
--color-orange-700: #
|
|
102
|
-
--color-orange-800: #
|
|
103
|
-
--color-orange-900: #
|
|
104
|
-
|
|
105
|
-
--color-yellow-50: #
|
|
106
|
-
--color-yellow-100: #
|
|
107
|
-
--color-yellow-200: #
|
|
108
|
-
--color-yellow-300: #
|
|
109
|
-
--color-yellow-400: #
|
|
110
|
-
--color-yellow-500: #
|
|
111
|
-
--color-yellow-600: #
|
|
112
|
-
--color-yellow-700: #
|
|
113
|
-
--color-yellow-800: #
|
|
114
|
-
--color-yellow-900: #
|
|
115
|
-
|
|
116
|
-
--color-lime-50: #
|
|
117
|
-
--color-lime-100: #
|
|
118
|
-
--color-lime-200: #
|
|
119
|
-
--color-lime-300: #
|
|
120
|
-
--color-lime-400: #
|
|
121
|
-
--color-lime-500: #
|
|
122
|
-
--color-lime-600: #
|
|
51
|
+
--color-gbm-gray: #40464f;
|
|
52
|
+
|
|
53
|
+
--color-header: #fafafb;
|
|
54
|
+
--color-background: #ffffff;
|
|
55
|
+
--color-stroke: #dae0e7;
|
|
56
|
+
--color-section: #cfd7dc;
|
|
57
|
+
|
|
58
|
+
--color-success: #21c561;
|
|
59
|
+
--color-success-light: #87efae;
|
|
60
|
+
--color-success-dark: #0f552e;
|
|
61
|
+
|
|
62
|
+
--color-error: #e6183a;
|
|
63
|
+
--color-error-light: #f6a0ad;
|
|
64
|
+
--color-error-dark: #4e0113;
|
|
65
|
+
|
|
66
|
+
--color-warning: #f68f18;
|
|
67
|
+
--color-warning-light: #f7bc91;
|
|
68
|
+
--color-warning-dark: #542a08;
|
|
69
|
+
|
|
70
|
+
--color-sun: #fdd227;
|
|
71
|
+
--color-sun-light: #fef18f;
|
|
72
|
+
--color-sun-dark: #624a04;
|
|
73
|
+
|
|
74
|
+
--color-gray-50: #f4f5f6;
|
|
75
|
+
--color-gray-100: #edeef1;
|
|
76
|
+
--color-gray-200: #d8dbdf;
|
|
77
|
+
--color-gray-300: #b6bcc3;
|
|
78
|
+
--color-gray-400: #909aa6;
|
|
79
|
+
--color-gray-500: #717c8a;
|
|
80
|
+
--color-gray-600: #5b6571;
|
|
81
|
+
--color-gray-700: #4b535d;
|
|
82
|
+
--color-gray-800: #3b4148;
|
|
83
|
+
--color-gray-900: #333b47;
|
|
84
|
+
|
|
85
|
+
--color-red-50: #f7e4e9;
|
|
86
|
+
--color-red-100: #ffcad9;
|
|
87
|
+
--color-red-200: #f6a0ad;
|
|
88
|
+
--color-red-300: #fb6c80;
|
|
89
|
+
--color-red-400: #f9536c;
|
|
90
|
+
--color-red-500: #e6183a;
|
|
91
|
+
--color-red-600: #c00d32;
|
|
92
|
+
--color-red-700: #a20d2d;
|
|
93
|
+
--color-red-800: #4e0113;
|
|
94
|
+
--color-red-900: #2b0010;
|
|
95
|
+
|
|
96
|
+
--color-orange-50: #ffead9;
|
|
97
|
+
--color-orange-100: #facfb2;
|
|
98
|
+
--color-orange-200: #f8bc91;
|
|
99
|
+
--color-orange-300: #f59059;
|
|
100
|
+
--color-orange-400: #f68f18;
|
|
101
|
+
--color-orange-500: #f78221;
|
|
102
|
+
--color-orange-600: #de6908;
|
|
103
|
+
--color-orange-700: #ac5106;
|
|
104
|
+
--color-orange-800: #542a08;
|
|
105
|
+
--color-orange-900: #3a1a0b;
|
|
106
|
+
|
|
107
|
+
--color-yellow-50: #fefac6;
|
|
108
|
+
--color-yellow-100: #fef18f;
|
|
109
|
+
--color-yellow-200: #fedf4c;
|
|
110
|
+
--color-yellow-300: #fdd227;
|
|
111
|
+
--color-yellow-400: #edbc0a;
|
|
112
|
+
--color-yellow-500: #cc9a06;
|
|
113
|
+
--color-yellow-600: #a47d08;
|
|
114
|
+
--color-yellow-700: #8c6d0f;
|
|
115
|
+
--color-yellow-800: #624a04;
|
|
116
|
+
--color-yellow-900: #4a3a05;
|
|
117
|
+
|
|
118
|
+
--color-lime-50: #ebfbcc;
|
|
119
|
+
--color-lime-100: #ddf7a3;
|
|
120
|
+
--color-lime-200: #c0f36e;
|
|
121
|
+
--color-lime-300: #a3e63d;
|
|
122
|
+
--color-lime-400: #86cc20;
|
|
123
|
+
--color-lime-500: #65a311;
|
|
124
|
+
--color-lime-600: #4b7c18;
|
|
123
125
|
--color-lime-700: #416414;
|
|
124
|
-
--color-lime-800: #
|
|
125
|
-
--color-lime-900: #
|
|
126
|
-
|
|
127
|
-
--color-grass-50: #
|
|
128
|
-
--color-grass-100: #
|
|
129
|
-
--color-grass-200: #
|
|
130
|
-
--color-grass-300: #
|
|
131
|
-
--color-grass-400: #
|
|
132
|
-
--color-grass-500: #
|
|
126
|
+
--color-lime-800: #324d0f;
|
|
127
|
+
--color-lime-900: #293e0c;
|
|
128
|
+
|
|
129
|
+
--color-grass-50: #dbfde6;
|
|
130
|
+
--color-grass-100: #bef8d3;
|
|
131
|
+
--color-grass-200: #87efae;
|
|
132
|
+
--color-grass-300: #4cdd86;
|
|
133
|
+
--color-grass-400: #1fbc5c;
|
|
134
|
+
--color-grass-500: #15a24a;
|
|
133
135
|
--color-grass-600: #138040;
|
|
134
|
-
--color-grass-700: #
|
|
135
|
-
--color-grass-800: #
|
|
136
|
-
--color-grass-900: #
|
|
137
|
-
|
|
138
|
-
--color-turquoise-50: #
|
|
139
|
-
--color-turquoise-100: #
|
|
140
|
-
--color-turquoise-200: #
|
|
141
|
-
--color-turquoise-300: #
|
|
142
|
-
--color-turquoise-400: #
|
|
143
|
-
--color-turquoise-500: #
|
|
144
|
-
--color-turquoise-600: #
|
|
136
|
+
--color-grass-700: #0f552e;
|
|
137
|
+
--color-grass-800: #0b4123;
|
|
138
|
+
--color-grass-900: #082f1b;
|
|
139
|
+
|
|
140
|
+
--color-turquoise-50: #f4fafb;
|
|
141
|
+
--color-turquoise-100: #d3faf9;
|
|
142
|
+
--color-turquoise-200: #a3f6f0;
|
|
143
|
+
--color-turquoise-300: #6fe6f6;
|
|
144
|
+
--color-turquoise-400: #21d1e3;
|
|
145
|
+
--color-turquoise-500: #0ab1cd;
|
|
146
|
+
--color-turquoise-600: #098eaf;
|
|
145
147
|
--color-turquoise-700: #076888;
|
|
146
|
-
--color-turquoise-800: #
|
|
147
|
-
--color-turquoise-900: #
|
|
148
|
-
|
|
149
|
-
--color-azure-50: #
|
|
150
|
-
--color-azure-100: #
|
|
151
|
-
--color-azure-200: #
|
|
152
|
-
--color-azure-300: #
|
|
153
|
-
--color-azure-400: #
|
|
154
|
-
--color-azure-500: #
|
|
155
|
-
--color-azure-600: #
|
|
148
|
+
--color-turquoise-800: #054a61;
|
|
149
|
+
--color-turquoise-900: #043c4c;
|
|
150
|
+
|
|
151
|
+
--color-azure-50: #d7ecff;
|
|
152
|
+
--color-azure-100: #aedaff;
|
|
153
|
+
--color-azure-200: #7bc2ff;
|
|
154
|
+
--color-azure-300: #35a1ff;
|
|
155
|
+
--color-azure-400: #007de9;
|
|
156
|
+
--color-azure-500: #007be5;
|
|
157
|
+
--color-azure-600: #005fb0;
|
|
156
158
|
--color-azure-700: #004988;
|
|
157
159
|
--color-azure-800: #003868;
|
|
158
|
-
--color-azure-900: #
|
|
159
|
-
|
|
160
|
-
--color-royal-50: #
|
|
161
|
-
--color-royal-100: #
|
|
162
|
-
--color-royal-200: #
|
|
163
|
-
--color-royal-300: #
|
|
164
|
-
--color-royal-400: #
|
|
165
|
-
--color-royal-500: #
|
|
160
|
+
--color-azure-900: #002c50;
|
|
161
|
+
|
|
162
|
+
--color-royal-50: #e2eafd;
|
|
163
|
+
--color-royal-100: #c7d8fd;
|
|
164
|
+
--color-royal-200: #a4c0fb;
|
|
165
|
+
--color-royal-300: #819af4;
|
|
166
|
+
--color-royal-400: #6178ea;
|
|
167
|
+
--color-royal-500: #4355de;
|
|
166
168
|
--color-royal-600: #374397;
|
|
167
|
-
--color-royal-700: #
|
|
168
|
-
--color-royal-800: #
|
|
169
|
-
--color-royal-900: #
|
|
170
|
-
|
|
171
|
-
--color-purple-50: #
|
|
172
|
-
--color-purple-100: #
|
|
173
|
-
--color-purple-200: #
|
|
174
|
-
--color-purple-300: #
|
|
175
|
-
--color-purple-400: #
|
|
176
|
-
--color-purple-500: #
|
|
177
|
-
--color-purple-600: #
|
|
178
|
-
--color-purple-700: #
|
|
169
|
+
--color-royal-700: #313a7d;
|
|
170
|
+
--color-royal-800: #0f1557;
|
|
171
|
+
--color-royal-900: #0c0f3e;
|
|
172
|
+
|
|
173
|
+
--color-purple-50: #f0e9fe;
|
|
174
|
+
--color-purple-100: #dfd5fa;
|
|
175
|
+
--color-purple-200: #cfb4f9;
|
|
176
|
+
--color-purple-300: #b184f0;
|
|
177
|
+
--color-purple-400: #9354ed;
|
|
178
|
+
--color-purple-500: #8233e0;
|
|
179
|
+
--color-purple-600: #6624b5;
|
|
180
|
+
--color-purple-700: #4d2180;
|
|
179
181
|
--color-purple-800: #351856;
|
|
180
|
-
--color-purple-900: #
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Keyframe Animations
|
|
185
|
-
* -----------------------------------------------------------------------------
|
|
186
|
-
* Defines basic animations such as cursor blinking effects,
|
|
187
|
-
* expanding/collapsing content effects.
|
|
188
|
-
*/
|
|
189
|
-
@theme inline {
|
|
190
|
-
--animate-caret-blink: caret-blink 1250ms ease-out infinite;
|
|
191
|
-
--animate-collapsible-up: collapsible-up 200ms ease-in;
|
|
192
|
-
--animate-collapsible-down: collapsible-down 200ms ease-out;
|
|
193
|
-
|
|
194
|
-
@keyframes caret-blink {
|
|
195
|
-
0%,
|
|
196
|
-
70%,
|
|
197
|
-
100% {
|
|
198
|
-
opacity: 1;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
20%,
|
|
202
|
-
50% {
|
|
203
|
-
opacity: 0;
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
@keyframes collapsible-up {
|
|
208
|
-
from {
|
|
209
|
-
/*noinspection CssUnresolvedCustomProperty*/
|
|
210
|
-
height: var(--radix-collapsible-content-height);
|
|
211
|
-
}
|
|
212
|
-
to {
|
|
213
|
-
height: 0;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
@keyframes collapsible-down {
|
|
218
|
-
from {
|
|
219
|
-
height: 0;
|
|
220
|
-
}
|
|
221
|
-
to {
|
|
222
|
-
/*noinspection CssUnresolvedCustomProperty*/
|
|
223
|
-
height: var(--radix-collapsible-content-height);
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Animation Timing Functions
|
|
230
|
-
* -----------------------------------------------------------------------------
|
|
231
|
-
* Easing functions used to adjust the speed of animation transitions.
|
|
232
|
-
*/
|
|
233
|
-
@theme inline {
|
|
234
|
-
--animate-fade-in: fadeIn 250ms ease-out;
|
|
235
|
-
--animate-fade-out: fadeOut 250ms ease-in;
|
|
236
|
-
|
|
237
|
-
--animate-in: enter 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
238
|
-
--animate-out: exit 250ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
239
|
-
|
|
240
|
-
@keyframes fadeIn {
|
|
241
|
-
from {
|
|
242
|
-
opacity: var(--tw-enter-opacity, 0);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
@keyframes fadeOut {
|
|
247
|
-
to {
|
|
248
|
-
opacity: var(--tw-exit-opacity, 0);
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
@keyframes enter {
|
|
253
|
-
from {
|
|
254
|
-
opacity: var(--tw-enter-opacity, 1);
|
|
255
|
-
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
|
|
256
|
-
scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
|
|
257
|
-
rotate(var(--tw-enter-rotate, 0));
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
@keyframes exit {
|
|
262
|
-
to {
|
|
263
|
-
opacity: var(--tw-exit-opacity, 1);
|
|
264
|
-
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
|
|
265
|
-
scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
|
|
266
|
-
rotate(var(--tw-exit-rotate, 0));
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
/**
|
|
272
|
-
* Animation Timing Functions
|
|
273
|
-
* -----------------------------------------------------------------------------
|
|
274
|
-
* Defines utilities to adjust animation speed.
|
|
275
|
-
*/
|
|
276
|
-
@utility animation-ease-linear {
|
|
277
|
-
animation-timing-function: linear;
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
@utility animation-ease-in {
|
|
281
|
-
animation-timing-function: var(--ease-in);
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
@utility animation-ease-out {
|
|
285
|
-
animation-timing-function: var(--ease-out);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
@utility animation-ease-in-out {
|
|
289
|
-
animation-timing-function: var(--ease-in-out);
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
@utility animation-ease-initial {
|
|
293
|
-
animation-timing-function: initial;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
@utility animation-ease-* {
|
|
297
|
-
animation-timing-function: --value([*]);
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
/**
|
|
301
|
-
* Animation Play State
|
|
302
|
-
* -----------------------------------------------------------------------------
|
|
303
|
-
* Adjust the playback state of the animation.
|
|
304
|
-
*/
|
|
305
|
-
@utility animation-state-paused {
|
|
306
|
-
animation-play-state: paused;
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
@utility animation-state-running {
|
|
310
|
-
animation-play-state: running;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
@utility animation-state-initial {
|
|
314
|
-
animation-play-state: initial;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
@utility animation-state-* {
|
|
318
|
-
animation-play-state: --value([*]);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
/**
|
|
322
|
-
* Animation Repeat
|
|
323
|
-
* -----------------------------------------------------------------------------
|
|
324
|
-
* Controls the number of repetitions of the animation.
|
|
325
|
-
*/
|
|
326
|
-
@utility animation-repeat-infinite {
|
|
327
|
-
animation-iteration-count: infinite;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
@utility animation-repeat-initial {
|
|
331
|
-
animation-iteration-count: initial;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
@utility animation-repeat-* {
|
|
335
|
-
animation-iteration-count: --value(integer, [integer]);
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
/**
|
|
339
|
-
* Animation Composition
|
|
340
|
-
* -----------------------------------------------------------------------------
|
|
341
|
-
* Defines how animations combine with each other.
|
|
342
|
-
*/
|
|
343
|
-
@utility animation-composition-replace {
|
|
344
|
-
animation-composition: replace;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
@utility animation-composition-add {
|
|
348
|
-
animation-composition: add;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
@utility animation-composition-accumulate {
|
|
352
|
-
animation-composition: accumulate;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
@utility animation-composition-initial {
|
|
356
|
-
animation-composition: initial;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
@utility animation-composition-* {
|
|
360
|
-
animation-composition: --value([*]);
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
/**
|
|
364
|
-
* Animation Delay
|
|
365
|
-
* -----------------------------------------------------------------------------
|
|
366
|
-
* Adjust the delay time before the animation starts.
|
|
367
|
-
*/
|
|
368
|
-
@utility animation-delay-initial {
|
|
369
|
-
animation-delay: initial;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
@utility animation-delay-* {
|
|
373
|
-
animation-delay: calc(--value(integer) * 1ms);
|
|
374
|
-
animation-delay: --value([*]);
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
/**
|
|
378
|
-
* Animation Direction
|
|
379
|
-
* -----------------------------------------------------------------------------
|
|
380
|
-
* Determines the playback direction of the animation.
|
|
381
|
-
*/
|
|
382
|
-
@utility animation-direction-normal {
|
|
383
|
-
animation-direction: normal;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
@utility animation-direction-reverse {
|
|
387
|
-
animation-direction: reverse;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
@utility animation-direction-alternate {
|
|
391
|
-
animation-direction: alternate;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
@utility animation-direction-alternate-reverse {
|
|
395
|
-
animation-direction: alternate-reverse;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
@utility animation-direction-initial {
|
|
399
|
-
animation-direction: initial;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
@utility animation-direction-* {
|
|
403
|
-
animation-direction: --value([*]);
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* Animation Duration
|
|
408
|
-
* -----------------------------------------------------------------------------
|
|
409
|
-
* Defines the duration of the animation execution.
|
|
410
|
-
*/
|
|
411
|
-
@utility animation-duration-initial {
|
|
412
|
-
animation-duration: initial;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
@utility animation-duration-* {
|
|
416
|
-
animation-duration: calc(--value(integer) * 1ms);
|
|
417
|
-
animation-duration: --value([*]);
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
/**
|
|
421
|
-
* Animation Fill Mode
|
|
422
|
-
* -----------------------------------------------------------------------------
|
|
423
|
-
* Defines the state of the element after the animation ends.
|
|
424
|
-
*/
|
|
425
|
-
@utility animation-fill-none {
|
|
426
|
-
animation-fill-mode: none;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
@utility animation-fill-forwards {
|
|
430
|
-
animation-fill-mode: forwards;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
@utility animation-fill-backwards {
|
|
434
|
-
animation-fill-mode: backwards;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
@utility animation-fill-both {
|
|
438
|
-
animation-fill-mode: both;
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
@utility animation-fill-* {
|
|
442
|
-
animation-fill-mode: --value([*]);
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
/**
|
|
446
|
-
* Fade Animations
|
|
447
|
-
* -----------------------------------------------------------------------------
|
|
448
|
-
* Create fade-in and fade-out effects.
|
|
449
|
-
*/
|
|
450
|
-
@utility fade-in-* {
|
|
451
|
-
--tw-enter-opacity: calc(--value(integer) * 1%);
|
|
452
|
-
--tw-enter-opacity: --value(--opacity-*, [percentage]);
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
@utility fade-out-* {
|
|
456
|
-
--tw-exit-opacity: calc(--value(integer) * 1%);
|
|
457
|
-
--tw-exit-opacity: --value(--opacity-*, [percentage]);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
/**
|
|
461
|
-
* Rotate Animations
|
|
462
|
-
* -----------------------------------------------------------------------------
|
|
463
|
-
* Adjust the rotation angle of the element when it appears or disappears.
|
|
464
|
-
*/
|
|
465
|
-
@utility spin-in-* {
|
|
466
|
-
--tw-enter-rotate: calc(1deg * --value(integer));
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
@utility spin-out-* {
|
|
470
|
-
--tw-exit-rotate: calc(1deg * --value(integer));
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
/**
|
|
474
|
-
* Scale Animations
|
|
475
|
-
* -----------------------------------------------------------------------------
|
|
476
|
-
* Adjust the size of the element when it appears or disappears.
|
|
477
|
-
*/
|
|
478
|
-
@utility zoom-in-* {
|
|
479
|
-
--tw-enter-scale: --value([percentage]);
|
|
480
|
-
--tw-enter-scale: calc(--value(integer) * 1%);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
@utility zoom-out-* {
|
|
484
|
-
--tw-exit-scale: --value([percentage]);
|
|
485
|
-
--tw-exit-scale: calc(--value(integer) * 1%);
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
/**
|
|
489
|
-
* Slide Animations - Enter
|
|
490
|
-
* -----------------------------------------------------------------------------
|
|
491
|
-
* Effects for sliding in from directions: left, right, top, bottom.
|
|
492
|
-
*/
|
|
493
|
-
|
|
494
|
-
@utility slide-in-from-top {
|
|
495
|
-
--tw-enter-translate-y: -100%;
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
@utility slide-in-from-top-* {
|
|
499
|
-
--tw-enter-translate-y: calc(var(--spacing) * --value(number) * -1);
|
|
500
|
-
--tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
501
|
-
--tw-enter-translate-y: calc(--value([length], [percentage]) * -1);
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
@utility slide-in-from-left {
|
|
505
|
-
--tw-enter-translate-x: -100%;
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
@utility slide-in-from-left-* {
|
|
509
|
-
--tw-enter-translate-x: calc(var(--spacing) * --value(number) * -1);
|
|
510
|
-
--tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
511
|
-
--tw-enter-translate-x: calc(--value([length], [percentage]) * -1);
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
@utility slide-in-from-bottom {
|
|
515
|
-
--tw-enter-translate-y: 100%;
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
@utility slide-in-from-bottom-* {
|
|
519
|
-
--tw-enter-translate-y: calc(var(--spacing) * --value(number));
|
|
520
|
-
--tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
521
|
-
--tw-enter-translate-y: --value([length], [percentage]);
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
@utility slide-in-from-right {
|
|
525
|
-
--tw-enter-translate-x: 100%;
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
@utility slide-in-from-right-* {
|
|
529
|
-
--tw-enter-translate-x: calc(var(--spacing) * --value(number));
|
|
530
|
-
--tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
531
|
-
--tw-enter-translate-x: --value([length], [percentage]);
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
/**
|
|
535
|
-
* Slide Animations - Exit
|
|
536
|
-
* -----------------------------------------------------------------------------
|
|
537
|
-
* Effects for sliding out of the screen in directions: left, right, top, bottom.
|
|
538
|
-
*/
|
|
539
|
-
|
|
540
|
-
@utility slide-out-to-top {
|
|
541
|
-
--tw-exit-translate-y: -100%;
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
@utility slide-out-to-top-* {
|
|
545
|
-
--tw-exit-translate-y: calc(var(--spacing) * --value(number) * -1);
|
|
546
|
-
--tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
547
|
-
--tw-exit-translate-y: calc(--value([length], [percentage]) * -1);
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
@utility slide-out-to-left {
|
|
551
|
-
--tw-exit-translate-x: -100%;
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
@utility slide-out-to-left-* {
|
|
555
|
-
--tw-exit-translate-x: calc(var(--spacing) * --value(number) * -1);
|
|
556
|
-
--tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
557
|
-
--tw-exit-translate-x: calc(--value([length], [percentage]) * -1);
|
|
558
|
-
}
|
|
559
|
-
|
|
560
|
-
@utility slide-out-to-bottom {
|
|
561
|
-
--tw-exit-translate-y: 100%;
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
@utility slide-out-to-bottom-* {
|
|
565
|
-
--tw-exit-translate-y: calc(var(--spacing) * --value(number));
|
|
566
|
-
--tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
567
|
-
--tw-exit-translate-y: --value([length], [percentage]);
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
@utility slide-out-to-right {
|
|
571
|
-
--tw-exit-translate-x: 100%;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
@utility slide-out-to-right-* {
|
|
575
|
-
--tw-exit-translate-x: calc(var(--spacing) * --value(number));
|
|
576
|
-
--tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
577
|
-
--tw-exit-translate-x: --value([length], [percentage]);
|
|
182
|
+
--color-purple-900: #2a1440;
|
|
578
183
|
}
|
package/dist/esm/index.css
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "tw-animate-css";
|
|
2
|
+
|
|
1
3
|
@layer base {
|
|
2
4
|
*,
|
|
3
5
|
::after,
|
|
@@ -26,7 +28,7 @@
|
|
|
26
28
|
margin: 0;
|
|
27
29
|
}
|
|
28
30
|
|
|
29
|
-
&[type=
|
|
31
|
+
&[type="number"] {
|
|
30
32
|
-moz-appearance: textfield;
|
|
31
33
|
}
|
|
32
34
|
}
|
|
@@ -39,540 +41,143 @@
|
|
|
39
41
|
* consistency. Each color group serves a specific purpose
|
|
40
42
|
* (e.g., background, border, highlights).
|
|
41
43
|
*/
|
|
42
|
-
|
|
43
|
-
--color-gbm-sky: #
|
|
44
|
-
--color-gbm-ocean: #
|
|
44
|
+
@theme inline {
|
|
45
|
+
--color-gbm-sky: #1154ff;
|
|
46
|
+
--color-gbm-ocean: #0a3ec2;
|
|
45
47
|
--color-gbm-blue: #033278;
|
|
46
48
|
|
|
47
|
-
--color-gbm-dark: #
|
|
49
|
+
--color-gbm-dark: #2e3238;
|
|
48
50
|
--color-gbm-black: #191919;
|
|
49
|
-
--color-gbm-gray: #
|
|
50
|
-
|
|
51
|
-
--color-header: #
|
|
52
|
-
--color-background: #
|
|
53
|
-
--color-stroke: #
|
|
54
|
-
--color-section: #
|
|
55
|
-
|
|
56
|
-
--color-success: #
|
|
57
|
-
--color-success-light: #
|
|
58
|
-
--color-success-dark: #
|
|
59
|
-
|
|
60
|
-
--color-error: #
|
|
61
|
-
--color-error-light: #
|
|
62
|
-
--color-error-dark: #
|
|
63
|
-
|
|
64
|
-
--color-warning: #
|
|
65
|
-
--color-warning-light: #
|
|
66
|
-
--color-warning-dark: #
|
|
67
|
-
|
|
68
|
-
--color-sun: #
|
|
69
|
-
--color-sun-light: #
|
|
70
|
-
--color-sun-dark: #
|
|
71
|
-
|
|
72
|
-
--color-gray-50: #
|
|
73
|
-
--color-gray-100: #
|
|
74
|
-
--color-gray-200: #
|
|
75
|
-
--color-gray-300: #
|
|
76
|
-
--color-gray-400: #
|
|
77
|
-
--color-gray-500: #
|
|
78
|
-
--color-gray-600: #
|
|
79
|
-
--color-gray-700: #
|
|
80
|
-
--color-gray-800: #
|
|
81
|
-
--color-gray-900: #
|
|
82
|
-
|
|
83
|
-
--color-red-50: #
|
|
84
|
-
--color-red-100: #
|
|
85
|
-
--color-red-200: #
|
|
86
|
-
--color-red-300: #
|
|
87
|
-
--color-red-400: #
|
|
88
|
-
--color-red-500: #
|
|
89
|
-
--color-red-600: #
|
|
90
|
-
--color-red-700: #
|
|
91
|
-
--color-red-800: #
|
|
92
|
-
--color-red-900: #
|
|
93
|
-
|
|
94
|
-
--color-orange-50: #
|
|
95
|
-
--color-orange-100: #
|
|
96
|
-
--color-orange-200: #
|
|
97
|
-
--color-orange-300: #
|
|
98
|
-
--color-orange-400: #
|
|
99
|
-
--color-orange-500: #
|
|
100
|
-
--color-orange-600: #
|
|
101
|
-
--color-orange-700: #
|
|
102
|
-
--color-orange-800: #
|
|
103
|
-
--color-orange-900: #
|
|
104
|
-
|
|
105
|
-
--color-yellow-50: #
|
|
106
|
-
--color-yellow-100: #
|
|
107
|
-
--color-yellow-200: #
|
|
108
|
-
--color-yellow-300: #
|
|
109
|
-
--color-yellow-400: #
|
|
110
|
-
--color-yellow-500: #
|
|
111
|
-
--color-yellow-600: #
|
|
112
|
-
--color-yellow-700: #
|
|
113
|
-
--color-yellow-800: #
|
|
114
|
-
--color-yellow-900: #
|
|
115
|
-
|
|
116
|
-
--color-lime-50: #
|
|
117
|
-
--color-lime-100: #
|
|
118
|
-
--color-lime-200: #
|
|
119
|
-
--color-lime-300: #
|
|
120
|
-
--color-lime-400: #
|
|
121
|
-
--color-lime-500: #
|
|
122
|
-
--color-lime-600: #
|
|
51
|
+
--color-gbm-gray: #40464f;
|
|
52
|
+
|
|
53
|
+
--color-header: #fafafb;
|
|
54
|
+
--color-background: #ffffff;
|
|
55
|
+
--color-stroke: #dae0e7;
|
|
56
|
+
--color-section: #cfd7dc;
|
|
57
|
+
|
|
58
|
+
--color-success: #21c561;
|
|
59
|
+
--color-success-light: #87efae;
|
|
60
|
+
--color-success-dark: #0f552e;
|
|
61
|
+
|
|
62
|
+
--color-error: #e6183a;
|
|
63
|
+
--color-error-light: #f6a0ad;
|
|
64
|
+
--color-error-dark: #4e0113;
|
|
65
|
+
|
|
66
|
+
--color-warning: #f68f18;
|
|
67
|
+
--color-warning-light: #f7bc91;
|
|
68
|
+
--color-warning-dark: #542a08;
|
|
69
|
+
|
|
70
|
+
--color-sun: #fdd227;
|
|
71
|
+
--color-sun-light: #fef18f;
|
|
72
|
+
--color-sun-dark: #624a04;
|
|
73
|
+
|
|
74
|
+
--color-gray-50: #f4f5f6;
|
|
75
|
+
--color-gray-100: #edeef1;
|
|
76
|
+
--color-gray-200: #d8dbdf;
|
|
77
|
+
--color-gray-300: #b6bcc3;
|
|
78
|
+
--color-gray-400: #909aa6;
|
|
79
|
+
--color-gray-500: #717c8a;
|
|
80
|
+
--color-gray-600: #5b6571;
|
|
81
|
+
--color-gray-700: #4b535d;
|
|
82
|
+
--color-gray-800: #3b4148;
|
|
83
|
+
--color-gray-900: #333b47;
|
|
84
|
+
|
|
85
|
+
--color-red-50: #f7e4e9;
|
|
86
|
+
--color-red-100: #ffcad9;
|
|
87
|
+
--color-red-200: #f6a0ad;
|
|
88
|
+
--color-red-300: #fb6c80;
|
|
89
|
+
--color-red-400: #f9536c;
|
|
90
|
+
--color-red-500: #e6183a;
|
|
91
|
+
--color-red-600: #c00d32;
|
|
92
|
+
--color-red-700: #a20d2d;
|
|
93
|
+
--color-red-800: #4e0113;
|
|
94
|
+
--color-red-900: #2b0010;
|
|
95
|
+
|
|
96
|
+
--color-orange-50: #ffead9;
|
|
97
|
+
--color-orange-100: #facfb2;
|
|
98
|
+
--color-orange-200: #f8bc91;
|
|
99
|
+
--color-orange-300: #f59059;
|
|
100
|
+
--color-orange-400: #f68f18;
|
|
101
|
+
--color-orange-500: #f78221;
|
|
102
|
+
--color-orange-600: #de6908;
|
|
103
|
+
--color-orange-700: #ac5106;
|
|
104
|
+
--color-orange-800: #542a08;
|
|
105
|
+
--color-orange-900: #3a1a0b;
|
|
106
|
+
|
|
107
|
+
--color-yellow-50: #fefac6;
|
|
108
|
+
--color-yellow-100: #fef18f;
|
|
109
|
+
--color-yellow-200: #fedf4c;
|
|
110
|
+
--color-yellow-300: #fdd227;
|
|
111
|
+
--color-yellow-400: #edbc0a;
|
|
112
|
+
--color-yellow-500: #cc9a06;
|
|
113
|
+
--color-yellow-600: #a47d08;
|
|
114
|
+
--color-yellow-700: #8c6d0f;
|
|
115
|
+
--color-yellow-800: #624a04;
|
|
116
|
+
--color-yellow-900: #4a3a05;
|
|
117
|
+
|
|
118
|
+
--color-lime-50: #ebfbcc;
|
|
119
|
+
--color-lime-100: #ddf7a3;
|
|
120
|
+
--color-lime-200: #c0f36e;
|
|
121
|
+
--color-lime-300: #a3e63d;
|
|
122
|
+
--color-lime-400: #86cc20;
|
|
123
|
+
--color-lime-500: #65a311;
|
|
124
|
+
--color-lime-600: #4b7c18;
|
|
123
125
|
--color-lime-700: #416414;
|
|
124
|
-
--color-lime-800: #
|
|
125
|
-
--color-lime-900: #
|
|
126
|
-
|
|
127
|
-
--color-grass-50: #
|
|
128
|
-
--color-grass-100: #
|
|
129
|
-
--color-grass-200: #
|
|
130
|
-
--color-grass-300: #
|
|
131
|
-
--color-grass-400: #
|
|
132
|
-
--color-grass-500: #
|
|
126
|
+
--color-lime-800: #324d0f;
|
|
127
|
+
--color-lime-900: #293e0c;
|
|
128
|
+
|
|
129
|
+
--color-grass-50: #dbfde6;
|
|
130
|
+
--color-grass-100: #bef8d3;
|
|
131
|
+
--color-grass-200: #87efae;
|
|
132
|
+
--color-grass-300: #4cdd86;
|
|
133
|
+
--color-grass-400: #1fbc5c;
|
|
134
|
+
--color-grass-500: #15a24a;
|
|
133
135
|
--color-grass-600: #138040;
|
|
134
|
-
--color-grass-700: #
|
|
135
|
-
--color-grass-800: #
|
|
136
|
-
--color-grass-900: #
|
|
137
|
-
|
|
138
|
-
--color-turquoise-50: #
|
|
139
|
-
--color-turquoise-100: #
|
|
140
|
-
--color-turquoise-200: #
|
|
141
|
-
--color-turquoise-300: #
|
|
142
|
-
--color-turquoise-400: #
|
|
143
|
-
--color-turquoise-500: #
|
|
144
|
-
--color-turquoise-600: #
|
|
136
|
+
--color-grass-700: #0f552e;
|
|
137
|
+
--color-grass-800: #0b4123;
|
|
138
|
+
--color-grass-900: #082f1b;
|
|
139
|
+
|
|
140
|
+
--color-turquoise-50: #f4fafb;
|
|
141
|
+
--color-turquoise-100: #d3faf9;
|
|
142
|
+
--color-turquoise-200: #a3f6f0;
|
|
143
|
+
--color-turquoise-300: #6fe6f6;
|
|
144
|
+
--color-turquoise-400: #21d1e3;
|
|
145
|
+
--color-turquoise-500: #0ab1cd;
|
|
146
|
+
--color-turquoise-600: #098eaf;
|
|
145
147
|
--color-turquoise-700: #076888;
|
|
146
|
-
--color-turquoise-800: #
|
|
147
|
-
--color-turquoise-900: #
|
|
148
|
-
|
|
149
|
-
--color-azure-50: #
|
|
150
|
-
--color-azure-100: #
|
|
151
|
-
--color-azure-200: #
|
|
152
|
-
--color-azure-300: #
|
|
153
|
-
--color-azure-400: #
|
|
154
|
-
--color-azure-500: #
|
|
155
|
-
--color-azure-600: #
|
|
148
|
+
--color-turquoise-800: #054a61;
|
|
149
|
+
--color-turquoise-900: #043c4c;
|
|
150
|
+
|
|
151
|
+
--color-azure-50: #d7ecff;
|
|
152
|
+
--color-azure-100: #aedaff;
|
|
153
|
+
--color-azure-200: #7bc2ff;
|
|
154
|
+
--color-azure-300: #35a1ff;
|
|
155
|
+
--color-azure-400: #007de9;
|
|
156
|
+
--color-azure-500: #007be5;
|
|
157
|
+
--color-azure-600: #005fb0;
|
|
156
158
|
--color-azure-700: #004988;
|
|
157
159
|
--color-azure-800: #003868;
|
|
158
|
-
--color-azure-900: #
|
|
159
|
-
|
|
160
|
-
--color-royal-50: #
|
|
161
|
-
--color-royal-100: #
|
|
162
|
-
--color-royal-200: #
|
|
163
|
-
--color-royal-300: #
|
|
164
|
-
--color-royal-400: #
|
|
165
|
-
--color-royal-500: #
|
|
160
|
+
--color-azure-900: #002c50;
|
|
161
|
+
|
|
162
|
+
--color-royal-50: #e2eafd;
|
|
163
|
+
--color-royal-100: #c7d8fd;
|
|
164
|
+
--color-royal-200: #a4c0fb;
|
|
165
|
+
--color-royal-300: #819af4;
|
|
166
|
+
--color-royal-400: #6178ea;
|
|
167
|
+
--color-royal-500: #4355de;
|
|
166
168
|
--color-royal-600: #374397;
|
|
167
|
-
--color-royal-700: #
|
|
168
|
-
--color-royal-800: #
|
|
169
|
-
--color-royal-900: #
|
|
170
|
-
|
|
171
|
-
--color-purple-50: #
|
|
172
|
-
--color-purple-100: #
|
|
173
|
-
--color-purple-200: #
|
|
174
|
-
--color-purple-300: #
|
|
175
|
-
--color-purple-400: #
|
|
176
|
-
--color-purple-500: #
|
|
177
|
-
--color-purple-600: #
|
|
178
|
-
--color-purple-700: #
|
|
169
|
+
--color-royal-700: #313a7d;
|
|
170
|
+
--color-royal-800: #0f1557;
|
|
171
|
+
--color-royal-900: #0c0f3e;
|
|
172
|
+
|
|
173
|
+
--color-purple-50: #f0e9fe;
|
|
174
|
+
--color-purple-100: #dfd5fa;
|
|
175
|
+
--color-purple-200: #cfb4f9;
|
|
176
|
+
--color-purple-300: #b184f0;
|
|
177
|
+
--color-purple-400: #9354ed;
|
|
178
|
+
--color-purple-500: #8233e0;
|
|
179
|
+
--color-purple-600: #6624b5;
|
|
180
|
+
--color-purple-700: #4d2180;
|
|
179
181
|
--color-purple-800: #351856;
|
|
180
|
-
--color-purple-900: #
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Keyframe Animations
|
|
185
|
-
* -----------------------------------------------------------------------------
|
|
186
|
-
* Defines basic animations such as cursor blinking effects,
|
|
187
|
-
* expanding/collapsing content effects.
|
|
188
|
-
*/
|
|
189
|
-
@theme inline {
|
|
190
|
-
--animate-caret-blink: caret-blink 1250ms ease-out infinite;
|
|
191
|
-
--animate-collapsible-up: collapsible-up 200ms ease-in;
|
|
192
|
-
--animate-collapsible-down: collapsible-down 200ms ease-out;
|
|
193
|
-
|
|
194
|
-
@keyframes caret-blink {
|
|
195
|
-
0%,
|
|
196
|
-
70%,
|
|
197
|
-
100% {
|
|
198
|
-
opacity: 1;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
20%,
|
|
202
|
-
50% {
|
|
203
|
-
opacity: 0;
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
@keyframes collapsible-up {
|
|
208
|
-
from {
|
|
209
|
-
/*noinspection CssUnresolvedCustomProperty*/
|
|
210
|
-
height: var(--radix-collapsible-content-height);
|
|
211
|
-
}
|
|
212
|
-
to {
|
|
213
|
-
height: 0;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
@keyframes collapsible-down {
|
|
218
|
-
from {
|
|
219
|
-
height: 0;
|
|
220
|
-
}
|
|
221
|
-
to {
|
|
222
|
-
/*noinspection CssUnresolvedCustomProperty*/
|
|
223
|
-
height: var(--radix-collapsible-content-height);
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Animation Timing Functions
|
|
230
|
-
* -----------------------------------------------------------------------------
|
|
231
|
-
* Easing functions used to adjust the speed of animation transitions.
|
|
232
|
-
*/
|
|
233
|
-
@theme inline {
|
|
234
|
-
--animate-fade-in: fadeIn 250ms ease-out;
|
|
235
|
-
--animate-fade-out: fadeOut 250ms ease-in;
|
|
236
|
-
|
|
237
|
-
--animate-in: enter 300ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
238
|
-
--animate-out: exit 250ms cubic-bezier(0.32, 0.72, 0, 1);
|
|
239
|
-
|
|
240
|
-
@keyframes fadeIn {
|
|
241
|
-
from {
|
|
242
|
-
opacity: var(--tw-enter-opacity, 0);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
@keyframes fadeOut {
|
|
247
|
-
to {
|
|
248
|
-
opacity: var(--tw-exit-opacity, 0);
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
@keyframes enter {
|
|
253
|
-
from {
|
|
254
|
-
opacity: var(--tw-enter-opacity, 1);
|
|
255
|
-
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
|
|
256
|
-
scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
|
|
257
|
-
rotate(var(--tw-enter-rotate, 0));
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
@keyframes exit {
|
|
262
|
-
to {
|
|
263
|
-
opacity: var(--tw-exit-opacity, 1);
|
|
264
|
-
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
|
|
265
|
-
scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
|
|
266
|
-
rotate(var(--tw-exit-rotate, 0));
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
/**
|
|
272
|
-
* Animation Timing Functions
|
|
273
|
-
* -----------------------------------------------------------------------------
|
|
274
|
-
* Defines utilities to adjust animation speed.
|
|
275
|
-
*/
|
|
276
|
-
@utility animation-ease-linear {
|
|
277
|
-
animation-timing-function: linear;
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
@utility animation-ease-in {
|
|
281
|
-
animation-timing-function: var(--ease-in);
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
@utility animation-ease-out {
|
|
285
|
-
animation-timing-function: var(--ease-out);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
@utility animation-ease-in-out {
|
|
289
|
-
animation-timing-function: var(--ease-in-out);
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
@utility animation-ease-initial {
|
|
293
|
-
animation-timing-function: initial;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
@utility animation-ease-* {
|
|
297
|
-
animation-timing-function: --value([*]);
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
/**
|
|
301
|
-
* Animation Play State
|
|
302
|
-
* -----------------------------------------------------------------------------
|
|
303
|
-
* Adjust the playback state of the animation.
|
|
304
|
-
*/
|
|
305
|
-
@utility animation-state-paused {
|
|
306
|
-
animation-play-state: paused;
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
@utility animation-state-running {
|
|
310
|
-
animation-play-state: running;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
@utility animation-state-initial {
|
|
314
|
-
animation-play-state: initial;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
@utility animation-state-* {
|
|
318
|
-
animation-play-state: --value([*]);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
/**
|
|
322
|
-
* Animation Repeat
|
|
323
|
-
* -----------------------------------------------------------------------------
|
|
324
|
-
* Controls the number of repetitions of the animation.
|
|
325
|
-
*/
|
|
326
|
-
@utility animation-repeat-infinite {
|
|
327
|
-
animation-iteration-count: infinite;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
@utility animation-repeat-initial {
|
|
331
|
-
animation-iteration-count: initial;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
@utility animation-repeat-* {
|
|
335
|
-
animation-iteration-count: --value(integer, [integer]);
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
/**
|
|
339
|
-
* Animation Composition
|
|
340
|
-
* -----------------------------------------------------------------------------
|
|
341
|
-
* Defines how animations combine with each other.
|
|
342
|
-
*/
|
|
343
|
-
@utility animation-composition-replace {
|
|
344
|
-
animation-composition: replace;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
@utility animation-composition-add {
|
|
348
|
-
animation-composition: add;
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
@utility animation-composition-accumulate {
|
|
352
|
-
animation-composition: accumulate;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
@utility animation-composition-initial {
|
|
356
|
-
animation-composition: initial;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
@utility animation-composition-* {
|
|
360
|
-
animation-composition: --value([*]);
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
/**
|
|
364
|
-
* Animation Delay
|
|
365
|
-
* -----------------------------------------------------------------------------
|
|
366
|
-
* Adjust the delay time before the animation starts.
|
|
367
|
-
*/
|
|
368
|
-
@utility animation-delay-initial {
|
|
369
|
-
animation-delay: initial;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
@utility animation-delay-* {
|
|
373
|
-
animation-delay: calc(--value(integer) * 1ms);
|
|
374
|
-
animation-delay: --value([*]);
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
/**
|
|
378
|
-
* Animation Direction
|
|
379
|
-
* -----------------------------------------------------------------------------
|
|
380
|
-
* Determines the playback direction of the animation.
|
|
381
|
-
*/
|
|
382
|
-
@utility animation-direction-normal {
|
|
383
|
-
animation-direction: normal;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
@utility animation-direction-reverse {
|
|
387
|
-
animation-direction: reverse;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
@utility animation-direction-alternate {
|
|
391
|
-
animation-direction: alternate;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
@utility animation-direction-alternate-reverse {
|
|
395
|
-
animation-direction: alternate-reverse;
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
@utility animation-direction-initial {
|
|
399
|
-
animation-direction: initial;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
@utility animation-direction-* {
|
|
403
|
-
animation-direction: --value([*]);
|
|
404
|
-
}
|
|
405
|
-
|
|
406
|
-
/**
|
|
407
|
-
* Animation Duration
|
|
408
|
-
* -----------------------------------------------------------------------------
|
|
409
|
-
* Defines the duration of the animation execution.
|
|
410
|
-
*/
|
|
411
|
-
@utility animation-duration-initial {
|
|
412
|
-
animation-duration: initial;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
@utility animation-duration-* {
|
|
416
|
-
animation-duration: calc(--value(integer) * 1ms);
|
|
417
|
-
animation-duration: --value([*]);
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
/**
|
|
421
|
-
* Animation Fill Mode
|
|
422
|
-
* -----------------------------------------------------------------------------
|
|
423
|
-
* Defines the state of the element after the animation ends.
|
|
424
|
-
*/
|
|
425
|
-
@utility animation-fill-none {
|
|
426
|
-
animation-fill-mode: none;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
@utility animation-fill-forwards {
|
|
430
|
-
animation-fill-mode: forwards;
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
@utility animation-fill-backwards {
|
|
434
|
-
animation-fill-mode: backwards;
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
@utility animation-fill-both {
|
|
438
|
-
animation-fill-mode: both;
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
@utility animation-fill-* {
|
|
442
|
-
animation-fill-mode: --value([*]);
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
/**
|
|
446
|
-
* Fade Animations
|
|
447
|
-
* -----------------------------------------------------------------------------
|
|
448
|
-
* Create fade-in and fade-out effects.
|
|
449
|
-
*/
|
|
450
|
-
@utility fade-in-* {
|
|
451
|
-
--tw-enter-opacity: calc(--value(integer) * 1%);
|
|
452
|
-
--tw-enter-opacity: --value(--opacity-*, [percentage]);
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
@utility fade-out-* {
|
|
456
|
-
--tw-exit-opacity: calc(--value(integer) * 1%);
|
|
457
|
-
--tw-exit-opacity: --value(--opacity-*, [percentage]);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
/**
|
|
461
|
-
* Rotate Animations
|
|
462
|
-
* -----------------------------------------------------------------------------
|
|
463
|
-
* Adjust the rotation angle of the element when it appears or disappears.
|
|
464
|
-
*/
|
|
465
|
-
@utility spin-in-* {
|
|
466
|
-
--tw-enter-rotate: calc(1deg * --value(integer));
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
@utility spin-out-* {
|
|
470
|
-
--tw-exit-rotate: calc(1deg * --value(integer));
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
/**
|
|
474
|
-
* Scale Animations
|
|
475
|
-
* -----------------------------------------------------------------------------
|
|
476
|
-
* Adjust the size of the element when it appears or disappears.
|
|
477
|
-
*/
|
|
478
|
-
@utility zoom-in-* {
|
|
479
|
-
--tw-enter-scale: --value([percentage]);
|
|
480
|
-
--tw-enter-scale: calc(--value(integer) * 1%);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
@utility zoom-out-* {
|
|
484
|
-
--tw-exit-scale: --value([percentage]);
|
|
485
|
-
--tw-exit-scale: calc(--value(integer) * 1%);
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
/**
|
|
489
|
-
* Slide Animations - Enter
|
|
490
|
-
* -----------------------------------------------------------------------------
|
|
491
|
-
* Effects for sliding in from directions: left, right, top, bottom.
|
|
492
|
-
*/
|
|
493
|
-
|
|
494
|
-
@utility slide-in-from-top {
|
|
495
|
-
--tw-enter-translate-y: -100%;
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
@utility slide-in-from-top-* {
|
|
499
|
-
--tw-enter-translate-y: calc(var(--spacing) * --value(number) * -1);
|
|
500
|
-
--tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
501
|
-
--tw-enter-translate-y: calc(--value([length], [percentage]) * -1);
|
|
502
|
-
}
|
|
503
|
-
|
|
504
|
-
@utility slide-in-from-left {
|
|
505
|
-
--tw-enter-translate-x: -100%;
|
|
506
|
-
}
|
|
507
|
-
|
|
508
|
-
@utility slide-in-from-left-* {
|
|
509
|
-
--tw-enter-translate-x: calc(var(--spacing) * --value(number) * -1);
|
|
510
|
-
--tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
511
|
-
--tw-enter-translate-x: calc(--value([length], [percentage]) * -1);
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
@utility slide-in-from-bottom {
|
|
515
|
-
--tw-enter-translate-y: 100%;
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
@utility slide-in-from-bottom-* {
|
|
519
|
-
--tw-enter-translate-y: calc(var(--spacing) * --value(number));
|
|
520
|
-
--tw-enter-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
521
|
-
--tw-enter-translate-y: --value([length], [percentage]);
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
@utility slide-in-from-right {
|
|
525
|
-
--tw-enter-translate-x: 100%;
|
|
526
|
-
}
|
|
527
|
-
|
|
528
|
-
@utility slide-in-from-right-* {
|
|
529
|
-
--tw-enter-translate-x: calc(var(--spacing) * --value(number));
|
|
530
|
-
--tw-enter-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
531
|
-
--tw-enter-translate-x: --value([length], [percentage]);
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
/**
|
|
535
|
-
* Slide Animations - Exit
|
|
536
|
-
* -----------------------------------------------------------------------------
|
|
537
|
-
* Effects for sliding out of the screen in directions: left, right, top, bottom.
|
|
538
|
-
*/
|
|
539
|
-
|
|
540
|
-
@utility slide-out-to-top {
|
|
541
|
-
--tw-exit-translate-y: -100%;
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
@utility slide-out-to-top-* {
|
|
545
|
-
--tw-exit-translate-y: calc(var(--spacing) * --value(number) * -1);
|
|
546
|
-
--tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
547
|
-
--tw-exit-translate-y: calc(--value([length], [percentage]) * -1);
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
@utility slide-out-to-left {
|
|
551
|
-
--tw-exit-translate-x: -100%;
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
@utility slide-out-to-left-* {
|
|
555
|
-
--tw-exit-translate-x: calc(var(--spacing) * --value(number) * -1);
|
|
556
|
-
--tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * -100%);
|
|
557
|
-
--tw-exit-translate-x: calc(--value([length], [percentage]) * -1);
|
|
558
|
-
}
|
|
559
|
-
|
|
560
|
-
@utility slide-out-to-bottom {
|
|
561
|
-
--tw-exit-translate-y: 100%;
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
@utility slide-out-to-bottom-* {
|
|
565
|
-
--tw-exit-translate-y: calc(var(--spacing) * --value(number));
|
|
566
|
-
--tw-exit-translate-y: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
567
|
-
--tw-exit-translate-y: --value([length], [percentage]);
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
@utility slide-out-to-right {
|
|
571
|
-
--tw-exit-translate-x: 100%;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
@utility slide-out-to-right-* {
|
|
575
|
-
--tw-exit-translate-x: calc(var(--spacing) * --value(number));
|
|
576
|
-
--tw-exit-translate-x: calc(--value(--aspect-ratio-*, ratio, [ratio]) * 100%);
|
|
577
|
-
--tw-exit-translate-x: --value([length], [percentage]);
|
|
182
|
+
--color-purple-900: #2a1440;
|
|
578
183
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gbmtech/aurora-ui",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"main": "./dist/cjs/index.cjs",
|
|
5
5
|
"module": "./dist/esm/index.js",
|
|
6
6
|
"types": "./dist/types/index.d.ts",
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"tailwind-merge": "^3.2.0",
|
|
71
71
|
"tailwind-variants": "^1.0.0",
|
|
72
72
|
"tailwindcss-animate": "^1.0.6",
|
|
73
|
+
"tw-animate-css": "^1.2.8",
|
|
73
74
|
"zod": "^3.24.1"
|
|
74
75
|
},
|
|
75
76
|
"peerDependencies": {
|