frutjam 0.3.0-alpha.3 → 0.4.0-alpha.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/package.json +1 -1
- package/src/base/preflight.css +1 -1
- package/src/components/accordion.css +1 -1
- package/src/components/button copy.css +469 -0
- package/src/components/button.css +80 -415
- package/src/components/checkbox.css +8 -8
- package/src/components/drawer.css +2 -2
- package/src/components/input.css +15 -0
- package/src/components/modal.css +2 -2
- package/src/components/popover.css +2 -2
- package/src/main.css +1 -0
- package/src/themes/styles/base.css +42 -0
- package/src/themes/styles/dark.css +36 -0
- package/src/themes/styles/light.css +37 -0
- package/src/utilities/headings.css +1 -0
- package/src/themes/colors/base.css +0 -39
- package/src/themes/colors/dark.css +0 -31
- package/src/themes/colors/light.css +0 -32
|
@@ -1,469 +1,134 @@
|
|
|
1
|
-
@import "../themes/
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
2
|
@import "../themes/animation/wiggle.css";
|
|
3
3
|
|
|
4
|
-
/* default button */
|
|
5
|
-
@utility btn {
|
|
6
|
-
@layer components {
|
|
7
|
-
@apply text-[buttonFace] bg-neutral-200 text-black relative inline-flex shrink-0 cursor-pointer flex-nowrap items-center justify-center gap-1.5 text-center align-middle rounded-lg font-medium cursor-pointer relative overflow-hidden text-xs transition duration-300 text-center leading-4;
|
|
8
|
-
|
|
9
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
10
|
-
@apply bg-gradient-to-br from-neutral-200 via-neutral-200/95 to-neutral-200 ring-[0.5px] ring-neutral-300;
|
|
11
4
|
|
|
12
|
-
|
|
13
|
-
&:hover {
|
|
14
|
-
@apply ring-2 bg-gradient-to-tr via-neutral-200/90;
|
|
15
|
-
&::before {
|
|
16
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@utility btn-dashed {
|
|
5
|
+
@utility btn-* {
|
|
25
6
|
@layer components {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
@media (hover: hover) {
|
|
30
|
-
&:hover {
|
|
31
|
-
@apply ring-2 text-surface bg-primary bg-gradient-to-br from-primary via-primary/95 to-primary;
|
|
32
|
-
&::before {
|
|
33
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
&:is(.btn-secondary) {
|
|
39
|
-
@apply text-secondary bg-transparent border border-dashed border-secondary;
|
|
7
|
+
@apply relative inline-flex shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle font-medium relative overflow-hidden text-xs transition duration-300 text-center leading-4;
|
|
8
|
+
@apply rounded-[var(--radius-size)];
|
|
9
|
+
&:is(.btn-default, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
|
|
40
10
|
|
|
11
|
+
/* global */
|
|
41
12
|
@media (hover: hover) {
|
|
42
13
|
&:hover {
|
|
43
|
-
@apply ring-2 text-surface bg-secondary bg-gradient-to-br from-secondary via-secondary/95 to-secondary;
|
|
44
14
|
&::before {
|
|
45
15
|
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
46
16
|
}
|
|
47
17
|
}
|
|
48
18
|
}
|
|
49
|
-
}
|
|
50
|
-
&:is(.btn-success) {
|
|
51
|
-
@apply text-success bg-transparent border border-dashed border-success;
|
|
52
19
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
20
|
+
/* button for checkbox and radio button */
|
|
21
|
+
&:is(input[type="checkbox"], input[type="radio"]) {
|
|
22
|
+
@apply appearance-none;
|
|
23
|
+
|
|
24
|
+
&::after {
|
|
25
|
+
content: attr(aria-label);
|
|
59
26
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
@apply text-error bg-transparent border border-dashed border-error;
|
|
64
|
-
|
|
65
|
-
@media (hover: hover) {
|
|
66
|
-
&:hover {
|
|
67
|
-
@apply ring-2 text-surface bg-error bg-gradient-to-br from-error via-error/95 to-error;
|
|
68
|
-
&::before {
|
|
69
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
70
|
-
}
|
|
27
|
+
|
|
28
|
+
&:checked {
|
|
29
|
+
@apply ring-2 bg-gradient-to-tr via-[--value(--color-*)]/90 isolate;
|
|
71
30
|
}
|
|
72
31
|
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&:is(.btn-warning) {
|
|
76
|
-
@apply text-warning bg-transparent border border-dashed border-warning;
|
|
77
32
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
&::before {
|
|
82
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
83
|
-
}
|
|
84
|
-
}
|
|
33
|
+
/* disabled buttons */
|
|
34
|
+
&:is(:disabled, [disabled], .btn-disabled) {
|
|
35
|
+
@apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none;
|
|
85
36
|
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
&:is(.btn-info) {
|
|
89
|
-
@apply text-info bg-transparent border border-dashed border-info;
|
|
90
37
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
96
|
-
}
|
|
38
|
+
/* buttons colors */
|
|
39
|
+
&:not(.btn-dashed, .btn-outline, .btn-soft, :disabled, [disabled], .btn-disabled) {
|
|
40
|
+
&:not(.btn-ghost, .btn-link) {
|
|
41
|
+
@apply text-[--value(--color-*-fore)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)] ring-[0.5px] ring-[--value(--color-*)]/50
|
|
97
42
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
&:is(.btn-accent) {
|
|
102
|
-
@apply text-accent bg-transparent border border-dashed border-accent;
|
|
103
|
-
|
|
104
|
-
@media (hover: hover) {
|
|
105
|
-
&:hover {
|
|
106
|
-
@apply ring-2 text-surface bg-accent bg-gradient-to-br from-accent via-accent/95 to-accent;
|
|
107
|
-
&::before {
|
|
108
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
109
|
-
}
|
|
43
|
+
&:is(.btn-ghost) {
|
|
44
|
+
@apply text-[--value(--color-*)];
|
|
110
45
|
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@utility btn-outline {
|
|
117
|
-
@layer components {
|
|
118
|
-
&:is(.btn-primary) {
|
|
119
|
-
@apply text-primary bg-transparent ring-1 ring-primary;
|
|
120
46
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
@media (hover: hover) {
|
|
134
|
-
&:hover {
|
|
135
|
-
@apply ring-2 text-surface bg-secondary bg-gradient-to-br from-secondary via-secondary/95 to-secondary;
|
|
136
|
-
&::before {
|
|
137
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
&:is(.btn-success) {
|
|
143
|
-
@apply text-success bg-transparent ring-1 ring-success;
|
|
144
|
-
|
|
145
|
-
@media (hover: hover) {
|
|
146
|
-
&:hover {
|
|
147
|
-
@apply ring-2 text-surface bg-success bg-gradient-to-br from-success via-success/95 to-success;
|
|
148
|
-
&::before {
|
|
149
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
&:is(.btn-error) {
|
|
155
|
-
@apply text-error bg-transparent ring-1 ring-error;
|
|
156
|
-
|
|
157
|
-
@media (hover: hover) {
|
|
158
|
-
&:hover {
|
|
159
|
-
@apply ring-2 text-surface bg-error bg-gradient-to-br from-error via-error/95 to-error;
|
|
160
|
-
&::before {
|
|
161
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
&:is(.btn-warning) {
|
|
168
|
-
@apply text-warning bg-transparent ring-1 ring-warning;
|
|
169
|
-
|
|
170
|
-
@media (hover: hover) {
|
|
171
|
-
&:hover {
|
|
172
|
-
@apply ring-2 text-surface bg-warning bg-gradient-to-br from-warning via-warning/95 to-warning;
|
|
173
|
-
&::before {
|
|
174
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
&:is(.btn-info) {
|
|
181
|
-
@apply text-info bg-transparent ring-1 ring-info;
|
|
182
|
-
|
|
183
|
-
@media (hover: hover) {
|
|
184
|
-
&:hover {
|
|
185
|
-
@apply ring-2 text-surface bg-info bg-gradient-to-br from-info via-info/95 to-info;
|
|
186
|
-
&::before {
|
|
187
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
&:is(.btn-accent) {
|
|
194
|
-
@apply text-accent bg-transparent ring-1 ring-accent;
|
|
195
|
-
|
|
196
|
-
@media (hover: hover) {
|
|
197
|
-
&:hover {
|
|
198
|
-
@apply ring-2 text-surface bg-accent bg-gradient-to-br from-accent via-accent/95 to-accent;
|
|
199
|
-
&::before {
|
|
200
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
@utility btn-soft {
|
|
209
|
-
@layer components {
|
|
210
|
-
&:is(.btn-primary) {
|
|
211
|
-
@apply text-primary bg-primary/20 ring-[0.5px] ring-primary/20;
|
|
212
|
-
|
|
213
|
-
@media (hover: hover) {
|
|
214
|
-
&:hover {
|
|
215
|
-
@apply ring-2;
|
|
216
|
-
&::before {
|
|
217
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
47
|
+
@media (hover: hover) {
|
|
48
|
+
&:hover {
|
|
49
|
+
&:is(.btn-ghost) {
|
|
50
|
+
@apply text-[--value(--color-*-fore)] from-[--value(--color-*)] to-[--value(--color-*)] ring-[--value(--color-*)]/50 duration-500;
|
|
51
|
+
}
|
|
52
|
+
&:not(.btn-link) {
|
|
53
|
+
@apply ring-2 bg-gradient-to-tr via-[--value(--color-*)]/90;
|
|
54
|
+
}
|
|
55
|
+
&:is(.btn-link) {
|
|
56
|
+
@apply text-[--value(--color-*)] underline underline-offset-4 cursor-pointer;
|
|
57
|
+
}
|
|
218
58
|
}
|
|
219
59
|
}
|
|
220
60
|
}
|
|
221
|
-
}
|
|
222
61
|
|
|
223
|
-
|
|
224
|
-
|
|
62
|
+
/* button dashed */
|
|
63
|
+
&:is(.btn-dashed) {
|
|
64
|
+
@apply text-[--value(--color-*)] bg-transparent border border-dashed border-[--value(--color-*)];
|
|
225
65
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
&::before {
|
|
230
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
66
|
+
@media (hover: hover) {
|
|
67
|
+
&:hover {
|
|
68
|
+
@apply ring-2 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
|
|
231
69
|
}
|
|
232
70
|
}
|
|
233
71
|
}
|
|
234
|
-
}
|
|
235
72
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
73
|
+
/* button outline */
|
|
74
|
+
&:is(.btn-outline) {
|
|
75
|
+
@apply text-[--value(--color-*)] bg-transparent ring-1 ring-[--value(--color-*)];
|
|
76
|
+
|
|
77
|
+
@media (hover: hover) {
|
|
78
|
+
&:hover {
|
|
79
|
+
@apply ring-2 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
|
|
244
80
|
}
|
|
245
81
|
}
|
|
246
82
|
}
|
|
247
|
-
}
|
|
248
83
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
84
|
+
/* button soft */
|
|
85
|
+
&:is(.btn-soft) {
|
|
86
|
+
@apply text-[--value(--color-*)] bg-[--value(--color-*)]/20 ring-[0.5px] ring-[--value(--color-*)]/20;
|
|
87
|
+
|
|
88
|
+
@media (hover: hover) {
|
|
89
|
+
&:hover {
|
|
90
|
+
@apply ring-2;
|
|
257
91
|
}
|
|
258
92
|
}
|
|
259
93
|
}
|
|
260
94
|
}
|
|
261
95
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
&:hover {
|
|
267
|
-
@apply ring-2;
|
|
268
|
-
&::before {
|
|
269
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
270
|
-
}
|
|
271
|
-
}
|
|
96
|
+
/* button sizes */
|
|
97
|
+
&:is(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
|
|
98
|
+
&:is(.btn-xs) {
|
|
99
|
+
@apply px-2.5 py-1.5 text-xs;
|
|
272
100
|
}
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
&:is(.btn-info) {
|
|
276
|
-
@apply text-info bg-info/20 ring-[0.5px] ring-info/20;
|
|
277
|
-
|
|
278
|
-
@media (hover: hover) {
|
|
279
|
-
&:hover {
|
|
280
|
-
@apply ring-2;
|
|
281
|
-
&::before {
|
|
282
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
283
|
-
}
|
|
284
|
-
}
|
|
101
|
+
&:is(.btn-sm) {
|
|
102
|
+
@apply px-3 py-2 text-sm;
|
|
285
103
|
}
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
&:is(.btn-accent) {
|
|
289
|
-
@apply text-accent bg-accent/20 ring-[0.5px] ring-accent/20;
|
|
290
|
-
|
|
291
|
-
@media (hover: hover) {
|
|
292
|
-
&:hover {
|
|
293
|
-
@apply ring-2;
|
|
294
|
-
&::before {
|
|
295
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
296
|
-
}
|
|
297
|
-
}
|
|
104
|
+
&:is(.btn-md) {
|
|
105
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
298
106
|
}
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
@utility btn-xs {
|
|
304
|
-
@layer components {
|
|
305
|
-
@apply px-2.5 py-1.5 text-xs;
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
@utility btn-sm {
|
|
310
|
-
@layer components {
|
|
311
|
-
@apply px-3 py-2 text-sm;
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
@utility btn-md {
|
|
316
|
-
@layer components {
|
|
317
|
-
@apply px-3.5 py-2.5 text-sm;
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
@utility btn-lg {
|
|
322
|
-
@layer components {
|
|
323
|
-
@apply px-4 py-3 text-base;
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
@utility btn-xl {
|
|
328
|
-
@layer components {
|
|
329
|
-
@apply px-4.5 py-3.5 text-base;
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
@utility btn-2xl {
|
|
334
|
-
@layer components {
|
|
335
|
-
@apply px-5 py-4 text-base;
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
@utility btn-circle {
|
|
340
|
-
@layer components {
|
|
341
|
-
@apply rounded-full size-auto aspect-square;
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
@utility btn-square {
|
|
346
|
-
@layer components {
|
|
347
|
-
@apply size-auto aspect-square;
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
/* buttons colors */
|
|
352
|
-
@utility btn-primary {
|
|
353
|
-
@layer components {
|
|
354
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
355
|
-
@apply text-primary-content bg-gradient-to-br from-primary via-primary/95 to-primary ring-[0.5px] ring-primary/50;
|
|
356
|
-
|
|
357
|
-
@media (hover: hover) {
|
|
358
|
-
&:hover {
|
|
359
|
-
@apply ring-2 bg-gradient-to-tr via-primary/90;
|
|
360
|
-
&::before {
|
|
361
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
362
|
-
}
|
|
363
|
-
}
|
|
107
|
+
&:is(.btn-lg) {
|
|
108
|
+
@apply px-4 py-3 text-base;
|
|
364
109
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
@utility btn-secondary {
|
|
370
|
-
@layer components {
|
|
371
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
372
|
-
@apply text-secondary-content bg-gradient-to-br from-secondary via-secondary/95 to-secondary ring-[0.5px] ring-secondary/50;
|
|
373
|
-
|
|
374
|
-
@media (hover: hover) {
|
|
375
|
-
&:hover {
|
|
376
|
-
@apply ring-2 bg-gradient-to-tr via-secondary/90;
|
|
377
|
-
&::before {
|
|
378
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
379
|
-
}
|
|
380
|
-
}
|
|
110
|
+
&:is(.btn-xl) {
|
|
111
|
+
@apply px-4.5 py-3.5 text-base;
|
|
381
112
|
}
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
@utility btn-success {
|
|
387
|
-
@layer components {
|
|
388
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
389
|
-
@apply text-success-content bg-gradient-to-br from-success via-success/95 to-success ring-[0.5px] ring-success/50;
|
|
390
|
-
|
|
391
|
-
@media (hover: hover) {
|
|
392
|
-
&:hover {
|
|
393
|
-
@apply ring-2 bg-gradient-to-tr via-success/90;
|
|
394
|
-
&::before {
|
|
395
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
396
|
-
}
|
|
397
|
-
}
|
|
113
|
+
&:is(.btn-2xl) {
|
|
114
|
+
@apply px-5 py-4 text-base;
|
|
398
115
|
}
|
|
399
116
|
}
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
117
|
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
@media (hover: hover) {
|
|
409
|
-
&:hover {
|
|
410
|
-
@apply ring-2 bg-gradient-to-tr via-error/90;
|
|
411
|
-
&::before {
|
|
412
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
413
|
-
}
|
|
414
|
-
}
|
|
118
|
+
/* button modifier */
|
|
119
|
+
&:is(.btn-circle, .btn-sqaure, .btn-wide, .btn-block) {
|
|
120
|
+
&:is(.btn-circle) {
|
|
121
|
+
@apply rounded-full size-auto aspect-square;
|
|
415
122
|
}
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
@utility btn-warning {
|
|
421
|
-
@layer components {
|
|
422
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
423
|
-
@apply text-warning-content bg-gradient-to-br from-warning via-warning/95 to-warning ring-[0.5px] ring-warning/50;
|
|
424
|
-
|
|
425
|
-
@media (hover: hover) {
|
|
426
|
-
&:hover {
|
|
427
|
-
@apply ring-2 bg-gradient-to-tr via-warning/90;
|
|
428
|
-
&::before {
|
|
429
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
430
|
-
}
|
|
431
|
-
}
|
|
123
|
+
&:is(.btn-square) {
|
|
124
|
+
@apply size-auto aspect-square;
|
|
432
125
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
@utility btn-info {
|
|
438
|
-
@layer components {
|
|
439
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
440
|
-
@apply text-info-content bg-gradient-to-br from-info via-info/95 to-info ring-[0.5px] ring-info/50;
|
|
441
|
-
|
|
442
|
-
@media (hover: hover) {
|
|
443
|
-
&:hover {
|
|
444
|
-
@apply ring-2 bg-gradient-to-tr via-info/90;
|
|
445
|
-
&::before {
|
|
446
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
447
|
-
}
|
|
448
|
-
}
|
|
126
|
+
&:is(.btn-wide) {
|
|
127
|
+
@apply w-full max-w-64;
|
|
449
128
|
}
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
@utility btn-accent {
|
|
455
|
-
@layer components {
|
|
456
|
-
&:not(.btn-dashed, .btn-outline, .btn-soft) {
|
|
457
|
-
@apply text-accent-content bg-gradient-to-br from-accent via-accent/95 to-accent ring-[0.5px] ring-accent/50;
|
|
458
|
-
|
|
459
|
-
@media (hover: hover) {
|
|
460
|
-
&:hover {
|
|
461
|
-
@apply ring-2 bg-gradient-to-tr via-accent/90;
|
|
462
|
-
&::before {
|
|
463
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
464
|
-
}
|
|
465
|
-
}
|
|
129
|
+
&:is(.btn-block) {
|
|
130
|
+
@apply w-full;
|
|
466
131
|
}
|
|
467
132
|
}
|
|
468
133
|
}
|
|
469
|
-
}
|
|
134
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import '../themes/
|
|
1
|
+
@import '../themes/styles/base.css';
|
|
2
2
|
@utility checkbox {
|
|
3
3
|
@apply size-4 rounded-md relative shrink-0 cursor-pointer appearance-none p-1 align-middle shadow ring duration-150;
|
|
4
4
|
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
@utility checkbox-primary {
|
|
43
|
-
@apply bg-primary/20 text-primary-
|
|
43
|
+
@apply bg-primary/20 text-primary-fore ring-primary;
|
|
44
44
|
&:checked,
|
|
45
45
|
&[aria-checked="true"] {
|
|
46
46
|
@apply bg-primary;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
@utility checkbox-secondary {
|
|
51
|
-
@apply bg-secondary/20 text-secondary-
|
|
51
|
+
@apply bg-secondary/20 text-secondary-fore ring-secondary;
|
|
52
52
|
&:checked,
|
|
53
53
|
&[aria-checked="true"] {
|
|
54
54
|
@apply bg-secondary;
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
@utility checkbox-accent {
|
|
59
|
-
@apply bg-accent/20 text-accent-
|
|
59
|
+
@apply bg-accent/20 text-accent-fore ring-accent;
|
|
60
60
|
&:checked,
|
|
61
61
|
&[aria-checked="true"] {
|
|
62
62
|
@apply bg-accent;
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
|
|
66
66
|
|
|
67
67
|
@utility checkbox-info {
|
|
68
|
-
@apply bg-info/20 text-info-
|
|
68
|
+
@apply bg-info/20 text-info-fore ring-info;
|
|
69
69
|
&:checked,
|
|
70
70
|
&[aria-checked="true"] {
|
|
71
71
|
@apply bg-info;
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@utility checkbox-success {
|
|
76
|
-
@apply bg-success/20 text-success-
|
|
76
|
+
@apply bg-success/20 text-success-fore ring-success;
|
|
77
77
|
&:checked,
|
|
78
78
|
&[aria-checked="true"] {
|
|
79
79
|
@apply bg-success;
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
@utility checkbox-warning {
|
|
84
|
-
@apply bg-warning/20 text-warning-
|
|
84
|
+
@apply bg-warning/20 text-warning-fore ring-warning;
|
|
85
85
|
&:checked,
|
|
86
86
|
&[aria-checked="true"] {
|
|
87
87
|
@apply bg-warning;
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
@utility checkbox-error {
|
|
92
|
-
@apply bg-error/20 text-error-
|
|
92
|
+
@apply bg-error/20 text-error-fore ring-error;
|
|
93
93
|
&:checked,
|
|
94
94
|
&[aria-checked="true"] {
|
|
95
95
|
@apply bg-error;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "../themes/
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
2
|
@utility drawer {
|
|
3
3
|
@layer components {
|
|
4
4
|
@apply pointer-events-none invisible absolute inset-0 m-0 grid h-full max-h-none w-full max-w-none place-items-start bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
@utility drawer-body {
|
|
33
33
|
@layer components {
|
|
34
|
-
@apply bg-surface text-surface-
|
|
34
|
+
@apply bg-surface text-surface-fore rounded-none border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 h-screen max-h-none w-11/12 w-auto max-w-none p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
35
35
|
translate: -100% 0;
|
|
36
36
|
scale: 1;
|
|
37
37
|
}
|
package/src/components/input.css
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
|
+
|
|
3
|
+
@utility input-* {
|
|
4
|
+
@layer components {
|
|
5
|
+
@apply border border-[--value(--color-*-fore)]/20 rounded-[var(--radius-size)] transition duration-300 outline-0 px-1 py-0.5;
|
|
6
|
+
&:focus, &:focus-within {
|
|
7
|
+
@apply border-[--value(--color-*-fore)];
|
|
8
|
+
}
|
|
9
|
+
@media (hover: hover) {
|
|
10
|
+
&:hover {
|
|
11
|
+
@apply border-[--value(--color-*-fore)]/40
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
package/src/components/modal.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "../themes/
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
2
|
@import "../themes/placement.css";
|
|
3
3
|
@import "../themes/animation/slide.css";
|
|
4
4
|
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
@utility modal-body {
|
|
36
36
|
@layer components {
|
|
37
|
-
@apply bg-surface text-surface-
|
|
37
|
+
@apply bg-surface text-surface-fore rounded-[calc(var(--radius-size)*2)] border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "../themes/
|
|
1
|
+
@import "../themes/styles/base.css";
|
|
2
2
|
@utility modal {
|
|
3
3
|
@layer components {
|
|
4
4
|
@apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
@utility modal-body {
|
|
33
33
|
@layer components {
|
|
34
|
-
@apply bg-surface text-surface-
|
|
34
|
+
@apply bg-surface text-surface-fore rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|