frutjam 0.5.0-alpha.1 → 0.6.0-alpha.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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0-alpha.1",
|
|
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.
|
|
41
|
-
"tailwindcss": "^4.
|
|
40
|
+
"@tailwindcss/postcss": "^4.1.3",
|
|
41
|
+
"tailwindcss": "^4.1.3"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
@import "../themes/styles/base.css";
|
|
2
2
|
@import "../themes/animation/wiggle.css";
|
|
3
3
|
|
|
4
|
-
|
|
5
4
|
@utility btn-* {
|
|
6
5
|
@layer components {
|
|
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
|
-
@apply rounded-[var(--radius-size)];
|
|
9
|
-
&:is(.btn-default, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
|
|
10
6
|
|
|
7
|
+
@apply relative inline-flex self-start shrink-0 flex-nowrap items-center
|
|
8
|
+
justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
|
|
9
|
+
text-xs transition duration-300 leading-4 rounded-[var(--radius-size)];
|
|
10
|
+
|
|
11
|
+
&:is(.btn-base, .btn-primary, .btn-secondary, .btn-success, .btn-error, .btn-warning, .btn-info, .btn-accent) {
|
|
11
12
|
/* global */
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
&:not(.btn-link) {
|
|
14
|
+
@media (hover: hover) {
|
|
15
|
+
&:hover {
|
|
16
|
+
&::before {
|
|
17
|
+
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
18
|
+
}
|
|
16
19
|
}
|
|
17
20
|
}
|
|
18
21
|
}
|
|
@@ -26,7 +29,7 @@
|
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
&:checked {
|
|
29
|
-
@apply ring-
|
|
32
|
+
@apply ring-1 bg-gradient-to-tr via-[--value(--color-*)]/90 isolate;
|
|
30
33
|
}
|
|
31
34
|
}
|
|
32
35
|
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
@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
|
|
42
45
|
}
|
|
43
46
|
&:is(.btn-ghost) {
|
|
44
|
-
@apply text-[--value(--color
|
|
47
|
+
@apply text-[--value(--color-*-fore)];
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
@media (hover: hover) {
|
|
@@ -50,10 +53,10 @@
|
|
|
50
53
|
@apply text-[--value(--color-*-fore)] from-[--value(--color-*)] to-[--value(--color-*)] ring-[--value(--color-*)]/50 duration-500;
|
|
51
54
|
}
|
|
52
55
|
&:not(.btn-link) {
|
|
53
|
-
@apply ring-
|
|
56
|
+
@apply ring-1 bg-gradient-to-tr via-[--value(--color-*)]/90;
|
|
54
57
|
}
|
|
55
58
|
&:is(.btn-link) {
|
|
56
|
-
@apply
|
|
59
|
+
@apply underline underline-offset-4 cursor-pointer;
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
}
|
|
@@ -65,7 +68,7 @@
|
|
|
65
68
|
|
|
66
69
|
@media (hover: hover) {
|
|
67
70
|
&:hover {
|
|
68
|
-
@apply ring-
|
|
71
|
+
@apply ring-1 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
|
|
69
72
|
}
|
|
70
73
|
}
|
|
71
74
|
}
|
|
@@ -76,7 +79,7 @@
|
|
|
76
79
|
|
|
77
80
|
@media (hover: hover) {
|
|
78
81
|
&:hover {
|
|
79
|
-
@apply ring-
|
|
82
|
+
@apply ring-1 text-surface bg-[--value(--color-*)] bg-gradient-to-br from-[--value(--color-*)] via-[--value(--color-*)]/95 to-[--value(--color-*)];
|
|
80
83
|
}
|
|
81
84
|
}
|
|
82
85
|
}
|
|
@@ -84,16 +87,15 @@
|
|
|
84
87
|
/* button soft */
|
|
85
88
|
&:is(.btn-soft) {
|
|
86
89
|
@apply text-[--value(--color-*)] bg-[--value(--color-*)]/20 ring-[0.5px] ring-[--value(--color-*)]/20;
|
|
87
|
-
|
|
88
90
|
@media (hover: hover) {
|
|
89
91
|
&:hover {
|
|
90
|
-
@apply ring-
|
|
92
|
+
@apply ring-1;
|
|
91
93
|
}
|
|
92
94
|
}
|
|
93
95
|
}
|
|
94
96
|
}
|
|
95
97
|
|
|
96
|
-
/* If no btn size class is present, apply the
|
|
98
|
+
/* If no btn size class is present, apply the base size as btn-md */
|
|
97
99
|
&:not(.btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-2xl) {
|
|
98
100
|
@apply px-3.5 py-2.5 text-sm;
|
|
99
101
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@utility nav-* {
|
|
2
|
+
@layer components {
|
|
3
|
+
&:is(.nav-list) {
|
|
4
|
+
@apply flex gap-2 w-full;
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* placements */
|
|
10
|
+
|
|
11
|
+
@utility nav-x-* {
|
|
12
|
+
@layer components {
|
|
13
|
+
@apply [justify-self:--value(--x-*)];
|
|
14
|
+
& > :where(.nav-list) {
|
|
15
|
+
@apply [justify-content:--value(--x-*)] flex-row;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@utility nav-y-* {
|
|
21
|
+
@layer components {
|
|
22
|
+
@apply [justify-self:--value(--x-*)];
|
|
23
|
+
& > :where(.nav-list) {
|
|
24
|
+
@apply [justify-content:--value(--y-*)] flex-col;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
package/src/main.css
CHANGED
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
--color-surface: var(--surface-back-color);
|
|
17
17
|
--color-surface-fore: var(--surface-fore-color);
|
|
18
18
|
|
|
19
|
-
--color-
|
|
20
|
-
--color-
|
|
19
|
+
--color-base: var(--base-back-color);
|
|
20
|
+
--color-base-fore: var(--base-fore-color);
|
|
21
21
|
|
|
22
22
|
--color-primary: var(--primary-back-color);
|
|
23
23
|
--color-primary-fore: var(--primary-fore-color);
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
--surface-back-color: oklch(0.216 0.006 56.043);
|
|
10
10
|
--surface-fore-color: oklch(100% 0 0);
|
|
11
11
|
|
|
12
|
-
--
|
|
13
|
-
--
|
|
12
|
+
--base-back-color: oklch(8.15% 0 0);
|
|
13
|
+
--base-fore-color: oklch(92.19% 0 0);
|
|
14
14
|
|
|
15
15
|
--primary-back-color: oklch(15.72% 0.0267 199.35);
|
|
16
16
|
--primary-fore-color: oklch(0.961151 0.003 300.98);
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
--surface-back-color: oklch(100% 0 0);
|
|
10
10
|
--surface-fore-color: oklch(15.72% 0.0267 199.35);
|
|
11
11
|
|
|
12
|
-
--
|
|
13
|
-
--
|
|
12
|
+
--base-back-color: oklch(92.19% 0 0);
|
|
13
|
+
--base-fore-color: oklch(8.15% 0 0);
|
|
14
14
|
|
|
15
15
|
--primary-back-color: oklch(15.72% 0.0267 199.35);
|
|
16
16
|
--primary-fore-color: oklch(0.961151 0.003 300.98);
|
|
@@ -1,43 +1,8 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
font-size: var(--style-h1-size);
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
@utility heading-2 {
|
|
10
|
-
@layer components {
|
|
11
|
-
@apply font-bold;
|
|
12
|
-
font-size: var(--style-h2-size);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@utility heading-3 {
|
|
18
|
-
@layer components {
|
|
19
|
-
@apply font-bold;
|
|
20
|
-
font-size: var(--style-h3-size);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@utility heading-4 {
|
|
25
|
-
@layer components {
|
|
26
|
-
@apply font-bold;
|
|
27
|
-
font-size: var(--style-h4-size);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@utility heading-5 {
|
|
32
|
-
@layer components {
|
|
33
|
-
@apply font-bold;
|
|
34
|
-
font-size: var(--style-h5-size);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
1
|
+
@utility heading-* {
|
|
2
|
+
@layer utilities {
|
|
3
|
+
@apply font-bold text-balance text-surface-fore;
|
|
4
|
+
font-size: --value(--text-*);
|
|
37
5
|
|
|
38
|
-
|
|
39
|
-
@layer components {
|
|
40
|
-
@apply font-bold;
|
|
41
|
-
font-size: var(--style-h6-size);
|
|
6
|
+
/* todo: make it heading-md instead of heading-base */
|
|
42
7
|
}
|
|
43
8
|
}
|