frutjam 0.4.0-alpha.1 → 0.5.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 +3 -3
- package/src/components/button.css +7 -2
- package/src/components/input.css +44 -2
- package/src/main.css +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0-alpha.0",
|
|
4
4
|
"description": "A utility-first CSS framework UI Library",
|
|
5
5
|
"main": "./dist/frutjam.css",
|
|
6
6
|
"browser": "dist/frutjam.css",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"url": "https://github.com/nezanuha/frutjam/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tailwindcss/postcss": "^4.0.
|
|
41
|
-
"tailwindcss": "^4.0.
|
|
40
|
+
"@tailwindcss/postcss": "^4.0.14",
|
|
41
|
+
"tailwindcss": "^4.0.14"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
@utility btn-* {
|
|
6
6
|
@layer components {
|
|
7
|
-
@apply relative inline-flex shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle font-medium
|
|
7
|
+
@apply relative inline-flex self-start shrink-0 flex-nowrap items-center justify-center gap-1.5 text-center align-middle font-medium overflow-hidden text-xs transition duration-300 leading-4;
|
|
8
8
|
@apply rounded-[var(--radius-size)];
|
|
9
9
|
&:is(.btn-default, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
|
|
10
10
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
/* disabled
|
|
33
|
+
/* disabled button */
|
|
34
34
|
&:is(:disabled, [disabled], .btn-disabled) {
|
|
35
35
|
@apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none;
|
|
36
36
|
}
|
|
@@ -93,6 +93,11 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
+
/* If no btn size class is present, apply the default size as btn-md */
|
|
97
|
+
&:not(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
|
|
98
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
99
|
+
}
|
|
100
|
+
|
|
96
101
|
/* button sizes */
|
|
97
102
|
&:is(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
|
|
98
103
|
&:is(.btn-xs) {
|
package/src/components/input.css
CHANGED
|
@@ -2,14 +2,56 @@
|
|
|
2
2
|
|
|
3
3
|
@utility input-* {
|
|
4
4
|
@layer components {
|
|
5
|
-
@apply
|
|
5
|
+
@apply outline outline-[--value(--color-*)]/20 rounded-[var(--radius-size)] transition duration-300 px-2.5 font-medium;
|
|
6
|
+
@apply relative inline-flex self-start shrink-0 appearance-none items-center gap-2 align-middle whitespace-nowrap leading-4;
|
|
6
7
|
&:focus, &:focus-within {
|
|
7
|
-
@apply
|
|
8
|
+
@apply outline-[--value(--color-*)] ring-2 ring-[--value(--color-*)]/10 isolate;
|
|
8
9
|
}
|
|
9
10
|
@media (hover: hover) {
|
|
10
11
|
&:hover {
|
|
11
12
|
@apply border-[--value(--color-*-fore)]/40
|
|
12
13
|
}
|
|
13
14
|
}
|
|
15
|
+
|
|
16
|
+
&:is(.input-ghost) {
|
|
17
|
+
@apply outline-0;
|
|
18
|
+
@media (hover: hover) {
|
|
19
|
+
&:hover {
|
|
20
|
+
@apply outline;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* disabled input */
|
|
26
|
+
&:is(:disabled, [disabled], .input-disabled) {
|
|
27
|
+
@apply bg-[--value(--color-*)]/10 text-[--value(--color-*)]/30 pointer-events-none cursor-not-allowed;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* If no input size class is present, apply the default size as input-md */
|
|
31
|
+
&:not(.input-xs, .input-sm, .input-md, .input-lg, .input-xl, .input-2xl) {
|
|
32
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* input sizes */
|
|
36
|
+
&:is(.input-xs, .input-sm, .input-md, .input-lg, .input-xl, .input-2xl) {
|
|
37
|
+
&:is(.input-xs) {
|
|
38
|
+
@apply px-2.5 py-1.5 text-xs;
|
|
39
|
+
}
|
|
40
|
+
&:is(.input-sm) {
|
|
41
|
+
@apply px-3 py-2 text-xs;
|
|
42
|
+
}
|
|
43
|
+
&:is(.input-md) {
|
|
44
|
+
@apply px-3.5 py-2.5 text-sm;
|
|
45
|
+
}
|
|
46
|
+
&:is(.input-lg) {
|
|
47
|
+
@apply px-4 py-3 text-base;
|
|
48
|
+
}
|
|
49
|
+
&:is(.input-xl) {
|
|
50
|
+
@apply px-4.5 py-3.5 text-base;
|
|
51
|
+
}
|
|
52
|
+
&:is(.input-2xl) {
|
|
53
|
+
@apply px-5 py-4 text-base;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
14
56
|
}
|
|
15
57
|
}
|