frutjam 0.7.0-alpha.0 → 0.7.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 (4) hide show
  1. package/package.json +4 -4
  2. package/src/components/button.css +54 -30
  3. package/src/components/drawer.css +7 -3
  4. package/src/components/nav.css +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frutjam",
3
- "version": "0.7.0-alpha.0",
3
+ "version": "0.7.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",
@@ -37,8 +37,8 @@
37
37
  "url": "https://github.com/nezanuha/frutjam/issues"
38
38
  },
39
39
  "dependencies": {
40
- "@tailwindcss/postcss": "^4.1.3",
41
- "tailwindcss": "^4.1.3"
40
+ "@tailwindcss/postcss": "^4.1.4",
41
+ "tailwindcss": "^4.1.4"
42
42
  },
43
43
  "devDependencies": {
44
44
  "css-loader": "^7.1.2",
@@ -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.5",
53
+ "webpack": "^5.99.7",
54
54
  "webpack-cli": "^6.0.1",
55
55
  "webpack-dev-server": "^5.2.1"
56
56
  }
package/src/components/button.css CHANGED
@@ -3,37 +3,37 @@
3
3
 
4
4
  @utility btn-xs {
5
5
  @layer components {
6
- @apply px-2.5 py-1.5 text-xs;
6
+ @apply px-3.5 py-1.5 text-xs;
7
7
  }
8
8
  }
9
9
 
10
10
  @utility btn-sm {
11
11
  @layer components {
12
- @apply px-3 py-2 text-sm;
12
+ @apply px-4 py-2 text-sm;
13
13
  }
14
14
  }
15
15
 
16
16
  @utility btn-md {
17
17
  @layer components {
18
- @apply px-3.5 py-2.5 text-base;
18
+ @apply px-4.5 py-2.5 text-base;
19
19
  }
20
20
  }
21
21
 
22
22
  @utility btn-lg {
23
23
  @layer components {
24
- @apply px-4 py-3 text-base;
24
+ @apply px-5 py-3 text-base;
25
25
  }
26
26
  }
27
27
 
28
28
  @utility btn-xl {
29
29
  @layer components {
30
- @apply px-4.5 py-3.5 text-base;
30
+ @apply px-5.5 py-3.5 text-base;
31
31
  }
32
32
  }
33
33
 
34
34
  @utility btn-2xl {
35
35
  @layer components {
36
- @apply px-5 py-4 text-lg;
36
+ @apply px-6 py-4 text-lg;
37
37
  }
38
38
  }
39
39
 
@@ -63,16 +63,29 @@
63
63
 
64
64
  @utility btn-core {
65
65
  @layer components {
66
- @apply btn-md relative inline-flex self-start shrink-0 flex-nowrap items-center
66
+ @apply btn-md text-shadow-xs/5 relative inline-flex self-start shrink-0 flex-nowrap items-center
67
67
  justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
68
- text-xs transition duration-350 ease-in-out leading-4 cursor-pointer;
68
+ text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
69
69
 
70
- color: var(--btn-50);
71
70
  border-radius: var(--radius-btn);
72
- background-color: light-dark(
73
- var(--btn-600),
74
- var(--btn-800)
75
- );
71
+
72
+ /* for default btn */
73
+ &:is(.btn) {
74
+ background-color: light-dark(
75
+ var(--btn-100),
76
+ var(--btn-800)
77
+ );
78
+ color: var(--btn-900);
79
+ }
80
+
81
+ /* for all btn exclude default btn */
82
+ &:not(.btn) {
83
+ background-color: light-dark(
84
+ var(--btn-600),
85
+ var(--btn-800)
86
+ );
87
+ color: var(--btn-50);
88
+ }
76
89
 
77
90
  &:is(:disabled, [disabled], .btn-disabled) {
78
91
  @apply opacity-20 pointer-events-none;
@@ -95,27 +108,38 @@
95
108
  @apply bg-transparent underline underline-offset-4 cursor-pointer;
96
109
 
97
110
  color: light-dark(
98
- var(--btn-600),
111
+ var(--btn-800),
99
112
  var(--btn-500)
100
113
  );
101
114
  }
102
115
  &:not(.btn-link) {
103
- @apply shadow-2xl ring-2 outline-none;
104
-
105
- --tw-ring-color: light-dark(
106
- color-mix(in oklab,var(--btn-700)10%,transparent),
107
- color-mix(in oklab,var(--btn-400)10%,transparent)
108
- );
109
-
110
- background-color: light-dark(
111
- var(--btn-700),
112
- var(--btn-900)
113
- );
116
+ @apply outline-none;
117
+
118
+ /* for default btn */
119
+ &:is(.btn) {
120
+ background-color: light-dark(
121
+ var(--btn-200),
122
+ var(--btn-900)
123
+ );
124
+
125
+ color: light-dark(
126
+ var(--btn-950),
127
+ var(--btn-100)
128
+ );
129
+ }
114
130
 
115
- color: light-dark(
116
- var(--btn-50),
117
- var(--btn-100)
118
- );
131
+ /* for all btn exclude default btn */
132
+ &:not(.btn) {
133
+ background-color: light-dark(
134
+ var(--btn-700),
135
+ var(--btn-900)
136
+ );
137
+
138
+ color: light-dark(
139
+ var(--btn-50),
140
+ var(--btn-100)
141
+ );
142
+ }
119
143
 
120
144
  &:not(:disabled, [disabled], .btn-disabled) {
121
145
  &::before {
@@ -178,7 +202,7 @@
178
202
  @apply bg-transparent;
179
203
 
180
204
  color: light-dark(
181
- var(--btn-600),
205
+ var(--btn-700),
182
206
  var(--btn-500)
183
207
  );
184
208
  }
package/src/components/drawer.css CHANGED
@@ -5,11 +5,15 @@
5
5
 
6
6
  &:not(drawer:not([open]):not(.drawer-open)),
7
7
  &::backdrop {
8
- @apply opacity-100 starting:invisible starting:opacity-0 bg-default-600;
8
+ @apply starting:invisible;
9
+ background: light-dark(
10
+ color-mix(in oklab,var(--color-default-100)30%,var(--color-default-900)20%),
11
+ color-mix(in oklab,var(--color-default-800)50%,transparent)
12
+ );
9
13
  }
10
14
 
11
15
  &[open], &.drawer-open{
12
- @apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
16
+ @apply pointer-events-auto visible starting:invisible;
13
17
 
14
18
  .drawer-body {
15
19
  translate: 0 0;
@@ -31,7 +35,7 @@
31
35
 
32
36
  @utility drawer-body {
33
37
  @layer components {
34
- @apply bg-core-50 text-core-950 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-1 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
38
+ @apply bg-core-50 text-core-950 rounded-none 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-1 transition-all duration-200 overflow-y-auto overscroll-contain;
35
39
  translate: -100% 0;
36
40
  scale: 1;
37
41
  }
package/src/components/nav.css CHANGED
@@ -12,16 +12,16 @@
12
12
  @layer components {
13
13
  @apply [justify-self:--value(--x-*)];
14
14
  & > :where(.nav-list) {
15
- @apply [justify-content:--value(--x-*)] flex-row gap-x-2;
15
+ @apply [justify-content:--value(--x-*)] items-center flex-row gap-x-2;
16
16
  }
17
17
  }
18
18
  }
19
19
 
20
20
  @utility nav-y-* {
21
21
  @layer components {
22
- @apply [justify-self:--value(--x-*)];
22
+ @apply [justify-self:--value(--y-*)];
23
23
  & > :where(.nav-list) {
24
- @apply [justify-content:--value(--y-*)] flex-col items-center gap-y-1;
24
+ @apply items-start flex-col gap-y-1;
25
25
  }
26
26
  }
27
27
  }