frutjam 0.7.0-beta.5 → 0.8.0-beta.1

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 (6) hide show
  1. package/package.json +2 -2
  2. package/src/components/button.css +249 -315
  3. package/src/components/divider.css +194 -168
  4. package/src/components/input.css +173 -227
  5. package/src/components/modal.css +44 -41
  6. package/src/utilities/headings.css +5 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frutjam",
3
- "version": "0.7.0-beta.5",
3
+ "version": "0.8.0-beta.1",
4
4
  "description": "A utility-first CSS framework UI Library",
5
5
  "main": "./dist/frutjam.css",
6
6
  "browser": "dist/frutjam.css",
@@ -50,7 +50,7 @@
50
50
  "prettier-plugin-tailwindcss": "^0.6.11",
51
51
  "string-replace-loader": "^3.1.0",
52
52
  "style-loader": "^4.0.0",
53
- "webpack": "^5.99.7",
53
+ "webpack": "^5.99.8",
54
54
  "webpack-cli": "^6.0.1",
55
55
  "webpack-dev-server": "^5.2.1"
56
56
  }
package/src/components/button.css CHANGED
@@ -10,404 +10,338 @@
10
10
  }
11
11
 
12
12
  @utility btn-xs {
13
- @layer components {
14
- @apply btn-size;
15
- }
16
- @layer theme {
17
- --btn-inline: 0.875rem;
18
- --btn-block: 0.375rem;
19
- --btn-text-size: 0.75rem;
20
- /* @apply px-3.5 py-1.5 text-xs; */
21
- }
13
+ --btn-inline: 0.875rem;
14
+ --btn-block: 0.375rem;
15
+ --btn-text-size: 0.75rem;
16
+ @apply btn-size;
22
17
  }
23
18
 
24
19
  @utility btn-sm {
25
- @layer components {
26
- @apply btn-size;
27
- }
28
- @layer theme {
29
- --btn-inline: 1rem;
30
- --btn-block: 0.5rem;
31
- --btn-text-size: 0.875rem;
32
- /* @apply px-4 py-2 text-sm; */
33
- }
20
+ --btn-inline: 1rem;
21
+ --btn-block: 0.5rem;
22
+ --btn-text-size: 0.875rem;
23
+ @apply btn-size;
34
24
  }
35
25
 
36
26
  @utility btn-md {
37
- @layer components {
38
- @apply btn-size;
39
- }
40
- @layer theme {
41
- --btn-inline: 1.125rem;
42
- --btn-block: 0.625rem;
43
- --btn-text-size: 1rem;
44
- /* @apply px-4.5 py-2.5 text-base; */
45
- }
27
+ --btn-inline: 1.125rem;
28
+ --btn-block: 0.625rem;
29
+ --btn-text-size: 1rem;
30
+ @apply btn-size;
46
31
  }
47
32
 
48
33
  @utility btn-lg {
49
- @layer components {
50
- @apply btn-size;
51
- }
52
- @layer theme {
53
- --btn-inline: 1.25rem;
54
- --btn-block: 0.75rem;
55
- --btn-text-size: 1rem;
56
- /* @apply px-5 py-3 text-base; */
57
- }
34
+ --btn-inline: 1.25rem;
35
+ --btn-block: 0.75rem;
36
+ --btn-text-size: 1rem;
37
+ @apply btn-size;
58
38
  }
59
39
 
60
40
  @utility btn-xl {
61
- @layer components {
62
- @apply btn-size;
63
- }
64
- @layer theme {
65
- --btn-inline: 1.375rem;
66
- --btn-block: 0.875rem;
67
- --btn-text-size: 1rem;
68
- /* @apply px-5.5 py-3.5 text-base; */
69
- }
41
+ --btn-inline: 1.375rem;
42
+ --btn-block: 0.875rem;
43
+ --btn-text-size: 1rem;
44
+ @apply btn-size;
70
45
  }
71
46
 
72
47
  @utility btn-2xl {
73
- @layer components {
74
- @apply btn-size;
75
- }
76
- @layer theme {
77
- --btn-inline: 1.5rem;
78
- --btn-block: 1rem;
79
- --btn-text-size: 1.125rem;
80
- /* @apply px-6 py-4 text-lg; */
81
- }
48
+ --btn-inline: 1.5rem;
49
+ --btn-block: 1rem;
50
+ --btn-text-size: 1.125rem;
51
+ @apply btn-size;
82
52
  }
83
53
 
84
54
  @utility btn-square {
85
- @layer components {
86
- /* @apply btn-md; */
87
- padding-inline: var(--btn-block);
88
- padding-block: var(--btn-block);
89
- /* @apply size-auto aspect-square; */
90
- }
55
+ padding-inline: var(--btn-block);
56
+ padding-block: var(--btn-block);
91
57
  }
92
58
 
93
59
  @utility btn-circle {
94
- @layer components {
95
- @apply btn-md rounded-full;
96
- padding-inline: var(--btn-block);
97
- padding-block: var(--btn-block);
98
- /* @apply rounded-full size-auto aspect-square; */
99
- }
60
+ @apply btn-md rounded-full;
61
+ padding-inline: var(--btn-block);
62
+ padding-block: var(--btn-block);
100
63
  }
101
64
 
102
65
  @utility btn-wide {
103
- @layer components {
104
- @apply w-full max-w-xs;
105
- }
66
+ @apply w-full max-w-xs;
106
67
  }
107
68
 
108
69
  @utility btn-block {
109
- @layer components {
110
- @apply w-full;
111
- }
70
+ @apply w-full;
112
71
  }
113
72
 
114
73
  @utility btn-core {
115
- @layer components {
116
- @apply btn-md text-shadow-xs/5 relative inline-flex self-start shrink-0 flex-nowrap items-center
117
- justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
118
- text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
119
-
120
- border-radius: var(--radius-btn);
121
-
122
- /* for default btn */
123
- &:is(.btn) {
124
- background-color: light-dark(
125
- var(--btn-100),
126
- var(--btn-800)
127
- );
128
- color: var(--btn-900);
74
+ @apply btn-md text-shadow-xs/5 relative inline-flex self-start shrink-0 flex-nowrap items-center
75
+ justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
76
+ text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
77
+
78
+ border-radius: var(--radius-btn);
79
+
80
+ /* for default btn */
81
+ &:is(.btn) {
82
+ background-color: light-dark(
83
+ var(--btn-200),
84
+ var(--btn-800)
85
+ );
86
+ color: light-dark(
87
+ var(--btn-900),
88
+ var(--btn-50)
89
+ );
90
+ }
91
+
92
+ /* for all btn exclude default btn */
93
+ &:not(.btn) {
94
+ background-color: light-dark(
95
+ var(--btn-600),
96
+ var(--btn-800)
97
+ );
98
+ color: var(--btn-50);
99
+ }
100
+
101
+ &:is(:disabled, [disabled], .btn-disabled) {
102
+ @apply opacity-20 cursor-not-allowed;
103
+ }
104
+
105
+ &:is(input[type="checkbox"], input[type="radio"]) {
106
+ @apply appearance-none;
107
+
108
+ &::after {
109
+ content: attr(aria-label);
129
110
  }
130
111
 
131
- /* for all btn exclude default btn */
132
- &:not(.btn) {
133
- background-color: light-dark(
134
- var(--btn-600),
135
- var(--btn-800)
136
- );
137
- color: var(--btn-50);
112
+ &:checked {
113
+ @apply isolate;
138
114
  }
115
+ }
139
116
 
140
- &:is(:disabled, [disabled], .btn-disabled) {
141
- @apply opacity-20 cursor-not-allowed;
117
+ &:is(.btn-active, :hover) {
118
+ &:is(.btn-link) {
119
+ @apply bg-transparent underline underline-offset-4 cursor-pointer;
120
+
121
+ color: light-dark(
122
+ var(--btn-800),
123
+ var(--btn-500)
124
+ );
142
125
  }
126
+ &:not(.btn-link) {
127
+ @apply outline-none;
143
128
 
144
- &:is(input[type="checkbox"], input[type="radio"]) {
145
- @apply appearance-none;
129
+ /* for default btn */
130
+ &:is(.btn) {
131
+ background-color: light-dark(
132
+ var(--btn-300),
133
+ var(--btn-900)
134
+ );
146
135
 
147
- &::after {
148
- content: attr(aria-label);
136
+ color: light-dark(
137
+ var(--btn-950),
138
+ var(--btn-100)
139
+ );
149
140
  }
150
141
 
151
- &:checked {
152
- @apply isolate;
153
- }
154
- }
142
+ /* for all btn exclude default btn */
143
+ &:not(.btn) {
144
+ background-color: light-dark(
145
+ var(--btn-700),
146
+ var(--btn-900)
147
+ );
155
148
 
156
- &:is(.btn-active, :hover) {
157
- &:is(.btn-link) {
158
- @apply bg-transparent underline underline-offset-4 cursor-pointer;
159
-
160
149
  color: light-dark(
161
- var(--btn-800),
162
- var(--btn-500)
150
+ var(--btn-50),
151
+ var(--btn-100)
163
152
  );
164
153
  }
165
- &:not(.btn-link) {
166
- @apply outline-none;
167
-
168
- /* for default btn */
169
- &:is(.btn) {
170
- background-color: light-dark(
171
- var(--btn-200),
172
- var(--btn-800)
173
- );
174
-
175
- color: light-dark(
176
- var(--btn-950),
177
- var(--btn-100)
178
- );
179
- }
180
-
181
- /* for all btn exclude default btn */
182
- &:not(.btn) {
183
- background-color: light-dark(
184
- var(--btn-700),
185
- var(--btn-900)
186
- );
187
-
188
- color: light-dark(
189
- var(--btn-50),
190
- var(--btn-100)
191
- );
192
- }
193
-
194
- &:not(:disabled, [disabled], .btn-disabled) {
195
- &::before {
196
- @apply content-[''] absolute size-full;
197
- }
154
+
155
+ &:not(:disabled, [disabled], .btn-disabled) {
156
+ &::before {
157
+ @apply content-[''] absolute size-full;
198
158
  }
199
159
  }
200
160
  }
161
+ }
201
162
 
202
- &:where(.btn-dashed) {
203
- &:not(.btn-active) {
204
- @apply bg-transparent outline outline-dashed;
205
-
206
- color: light-dark(
207
- var(--btn-700),
208
- var(--btn-500)
209
- );
210
- }
163
+ &:where(.btn-dashed) {
164
+ &:not(.btn-active) {
165
+ @apply bg-transparent;
166
+ outline: 1px dashed light-dark(
167
+ var(--btn-500),
168
+ var(--btn-700)
169
+ );
170
+ color: light-dark(
171
+ var(--btn-700),
172
+ var(--btn-500)
173
+ );
211
174
  }
175
+ }
212
176
 
213
- &:where(.btn-outline) {
214
- &:not(.btn-active) {
215
- @apply bg-transparent outline outline-solid;
216
-
217
- color: light-dark(
218
- var(--btn-700),
219
- var(--btn-500)
220
- );
221
- }
177
+ &:where(.btn-outline) {
178
+ &:not(.btn-active) {
179
+ @apply bg-transparent;
180
+ outline: 1px solid light-dark(
181
+ var(--btn-500),
182
+ var(--btn-800)
183
+ );
184
+ color: light-dark(
185
+ var(--btn-800),
186
+ var(--btn-200)
187
+ );
222
188
  }
189
+ }
223
190
 
224
- &:where(.btn-soft) {
225
- &:not(.btn-active) {
191
+ &:where(.btn-soft) {
192
+ &:not(.btn-active) {
226
193
 
227
- background-color: light-dark(
228
- var(--btn-100),
229
- color-mix(in oklab,var(--btn-900)10%,transparent)
230
- );
194
+ background-color: light-dark(
195
+ var(--btn-100),
196
+ color-mix(in oklab,var(--btn-900)10%,transparent)
197
+ );
231
198
 
232
- color: light-dark(
233
- var(--btn-800),
234
- var(--btn-400)
235
- );
236
- }
199
+ color: light-dark(
200
+ var(--btn-800),
201
+ var(--btn-400)
202
+ );
237
203
  }
204
+ }
238
205
 
239
- &:where(.btn-ghost) {
240
- &:not(.btn-active) {
241
- @apply bg-transparent;
206
+ &:where(.btn-ghost) {
207
+ &:not(.btn-active) {
208
+ @apply bg-transparent;
242
209
 
243
- color: light-dark(
244
- var(--btn-600),
245
- var(--btn-500)
246
- );
247
- }
210
+ color: light-dark(
211
+ var(--btn-600),
212
+ var(--btn-300)
213
+ );
248
214
  }
215
+ }
249
216
 
250
- &:where(.btn-link) {
251
- &:not(.btn-active) {
252
- @apply bg-transparent;
217
+ &:where(.btn-link) {
218
+ &:not(.btn-active) {
219
+ @apply bg-transparent;
253
220
 
254
- color: light-dark(
255
- var(--btn-700),
256
- var(--btn-500)
257
- );
258
- }
221
+ color: light-dark(
222
+ var(--btn-700),
223
+ var(--btn-500)
224
+ );
259
225
  }
260
226
  }
261
227
  }
262
228
 
263
229
  @utility btn {
264
- @layer components {
265
- @apply btn-core;
266
- }
267
- @layer theme {
268
- --btn-50: var(--default-50);
269
- --btn-100: var(--default-100);
270
- --btn-200: var(--default-200);
271
- --btn-300: var(--default-300);
272
- --btn-400: var(--default-400);
273
- --btn-500: var(--default-500);
274
- --btn-600: var(--default-600);
275
- --btn-700: var(--default-700);
276
- --btn-800: var(--default-800);
277
- --btn-900: var(--default-900);
278
- --btn-950: var(--default-950);
279
- }
230
+ --btn-50: var(--default-50);
231
+ --btn-100: var(--default-100);
232
+ --btn-200: var(--default-200);
233
+ --btn-300: var(--default-300);
234
+ --btn-400: var(--default-400);
235
+ --btn-500: var(--default-500);
236
+ --btn-600: var(--default-600);
237
+ --btn-700: var(--default-700);
238
+ --btn-800: var(--default-800);
239
+ --btn-900: var(--default-900);
240
+ --btn-950: var(--default-950);
241
+ @apply btn-core;
280
242
  }
281
243
 
282
244
  @utility btn-primary {
283
- @layer components {
284
- @apply btn-core;
285
- }
286
- @layer theme {
287
- --btn-50: var(--primary-50);
288
- --btn-100: var(--primary-100);
289
- --btn-200: var(--primary-200);
290
- --btn-300: var(--primary-300);
291
- --btn-400: var(--primary-400);
292
- --btn-500: var(--primary-500);
293
- --btn-600: var(--primary-600);
294
- --btn-700: var(--primary-700);
295
- --btn-800: var(--primary-800);
296
- --btn-900: var(--primary-900);
297
- --btn-950: var(--primary-950);
298
- }
245
+ --btn-50: var(--primary-50);
246
+ --btn-100: var(--primary-100);
247
+ --btn-200: var(--primary-200);
248
+ --btn-300: var(--primary-300);
249
+ --btn-400: var(--primary-400);
250
+ --btn-500: var(--primary-500);
251
+ --btn-600: var(--primary-600);
252
+ --btn-700: var(--primary-700);
253
+ --btn-800: var(--primary-800);
254
+ --btn-900: var(--primary-900);
255
+ --btn-950: var(--primary-950);
256
+ @apply btn-core;
299
257
  }
300
258
 
301
259
  @utility btn-secondary {
302
- @layer components {
303
- @apply btn-core;
304
- }
305
- @layer theme {
306
- --btn-50: var(--secondary-50);
307
- --btn-100: var(--secondary-100);
308
- --btn-200: var(--secondary-200);
309
- --btn-300: var(--secondary-300);
310
- --btn-400: var(--secondary-400);
311
- --btn-500: var(--secondary-500);
312
- --btn-600: var(--secondary-600);
313
- --btn-700: var(--secondary-700);
314
- --btn-800: var(--secondary-800);
315
- --btn-900: var(--secondary-900);
316
- --btn-950: var(--secondary-950);
317
- }
260
+ --btn-50: var(--secondary-50);
261
+ --btn-100: var(--secondary-100);
262
+ --btn-200: var(--secondary-200);
263
+ --btn-300: var(--secondary-300);
264
+ --btn-400: var(--secondary-400);
265
+ --btn-500: var(--secondary-500);
266
+ --btn-600: var(--secondary-600);
267
+ --btn-700: var(--secondary-700);
268
+ --btn-800: var(--secondary-800);
269
+ --btn-900: var(--secondary-900);
270
+ --btn-950: var(--secondary-950);
271
+ @apply btn-core;
318
272
  }
319
273
 
320
274
  @utility btn-accent {
321
- @layer components {
322
- @apply btn-core;
323
- }
324
- @layer theme {
325
- --btn-50: var(--accent-50);
326
- --btn-100: var(--accent-100);
327
- --btn-200: var(--accent-200);
328
- --btn-300: var(--accent-300);
329
- --btn-400: var(--accent-400);
330
- --btn-500: var(--accent-500);
331
- --btn-600: var(--accent-600);
332
- --btn-700: var(--accent-700);
333
- --btn-800: var(--accent-800);
334
- --btn-900: var(--accent-900);
335
- --btn-950: var(--accent-950);
336
- }
275
+ --btn-50: var(--accent-50);
276
+ --btn-100: var(--accent-100);
277
+ --btn-200: var(--accent-200);
278
+ --btn-300: var(--accent-300);
279
+ --btn-400: var(--accent-400);
280
+ --btn-500: var(--accent-500);
281
+ --btn-600: var(--accent-600);
282
+ --btn-700: var(--accent-700);
283
+ --btn-800: var(--accent-800);
284
+ --btn-900: var(--accent-900);
285
+ --btn-950: var(--accent-950);
286
+ @apply btn-core;
337
287
  }
338
288
 
339
289
  @utility btn-info {
340
- @layer components {
341
- @apply btn-core;
342
- }
343
- @layer theme {
344
- --btn-50: var(--info-50);
345
- --btn-100: var(--info-100);
346
- --btn-200: var(--info-200);
347
- --btn-300: var(--info-300);
348
- --btn-400: var(--info-400);
349
- --btn-500: var(--info-500);
350
- --btn-600: var(--info-600);
351
- --btn-700: var(--info-700);
352
- --btn-800: var(--info-800);
353
- --btn-900: var(--info-900);
354
- --btn-950: var(--info-950);
355
- }
290
+ --btn-50: var(--info-50);
291
+ --btn-100: var(--info-100);
292
+ --btn-200: var(--info-200);
293
+ --btn-300: var(--info-300);
294
+ --btn-400: var(--info-400);
295
+ --btn-500: var(--info-500);
296
+ --btn-600: var(--info-600);
297
+ --btn-700: var(--info-700);
298
+ --btn-800: var(--info-800);
299
+ --btn-900: var(--info-900);
300
+ --btn-950: var(--info-950);
301
+ @apply btn-core;
356
302
  }
357
303
 
358
304
  @utility btn-success {
359
- @layer components {
360
- @apply btn-core;
361
- }
362
- @layer theme {
363
- --btn-50: var(--success-50);
364
- --btn-100: var(--success-100);
365
- --btn-200: var(--success-200);
366
- --btn-300: var(--success-300);
367
- --btn-400: var(--success-400);
368
- --btn-500: var(--success-500);
369
- --btn-600: var(--success-600);
370
- --btn-700: var(--success-700);
371
- --btn-800: var(--success-800);
372
- --btn-900: var(--success-900);
373
- --btn-950: var(--success-950);
374
- }
305
+ --btn-50: var(--success-50);
306
+ --btn-100: var(--success-100);
307
+ --btn-200: var(--success-200);
308
+ --btn-300: var(--success-300);
309
+ --btn-400: var(--success-400);
310
+ --btn-500: var(--success-500);
311
+ --btn-600: var(--success-600);
312
+ --btn-700: var(--success-700);
313
+ --btn-800: var(--success-800);
314
+ --btn-900: var(--success-900);
315
+ --btn-950: var(--success-950);
316
+ @apply btn-core;
375
317
  }
376
318
 
377
319
  @utility btn-warning {
378
- @layer components {
379
- @apply btn-core;
380
- }
381
- @layer theme {
382
- --btn-50: var(--warning-50);
383
- --btn-100: var(--warning-100);
384
- --btn-200: var(--warning-200);
385
- --btn-300: var(--warning-300);
386
- --btn-400: var(--warning-400);
387
- --btn-500: var(--warning-500);
388
- --btn-600: var(--warning-600);
389
- --btn-700: var(--warning-700);
390
- --btn-800: var(--warning-800);
391
- --btn-900: var(--warning-900);
392
- --btn-950: var(--warning-950);
393
- }
320
+ --btn-50: var(--warning-50);
321
+ --btn-100: var(--warning-100);
322
+ --btn-200: var(--warning-200);
323
+ --btn-300: var(--warning-300);
324
+ --btn-400: var(--warning-400);
325
+ --btn-500: var(--warning-500);
326
+ --btn-600: var(--warning-600);
327
+ --btn-700: var(--warning-700);
328
+ --btn-800: var(--warning-800);
329
+ --btn-900: var(--warning-900);
330
+ --btn-950: var(--warning-950);
331
+ @apply btn-core;
394
332
  }
395
333
 
396
334
  @utility btn-error {
397
- @layer components {
398
- @apply btn-core;
399
- }
400
- @layer theme {
401
- --btn-50: var(--error-50);
402
- --btn-100: var(--error-100);
403
- --btn-200: var(--error-200);
404
- --btn-300: var(--error-300);
405
- --btn-400: var(--error-400);
406
- --btn-500: var(--error-500);
407
- --btn-600: var(--error-600);
408
- --btn-700: var(--error-700);
409
- --btn-800: var(--error-800);
410
- --btn-900: var(--error-900);
411
- --btn-950: var(--error-950);
412
- }
335
+ --btn-50: var(--error-50);
336
+ --btn-100: var(--error-100);
337
+ --btn-200: var(--error-200);
338
+ --btn-300: var(--error-300);
339
+ --btn-400: var(--error-400);
340
+ --btn-500: var(--error-500);
341
+ --btn-600: var(--error-600);
342
+ --btn-700: var(--error-700);
343
+ --btn-800: var(--error-800);
344
+ --btn-900: var(--error-900);
345
+ --btn-950: var(--error-950);
346
+ @apply btn-core;
413
347
  }