frutjam 0.7.0-alpha.0 → 0.7.0-beta.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.
Files changed (4) hide show
  1. package/package.json +4 -4
  2. package/src/components/button.css +52 -29
  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.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.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,28 @@
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
70
  color: var(--btn-50);
71
71
  border-radius: var(--radius-btn);
72
- background-color: light-dark(
73
- var(--btn-600),
74
- var(--btn-800)
75
- );
72
+
73
+ /* for default btn */
74
+ &:is(.btn) {
75
+ background-color: light-dark(
76
+ var(--btn-100),
77
+ var(--btn-800)
78
+ );
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
+ }
76
88
 
77
89
  &:is(:disabled, [disabled], .btn-disabled) {
78
90
  @apply opacity-20 pointer-events-none;
@@ -95,27 +107,38 @@
95
107
  @apply bg-transparent underline underline-offset-4 cursor-pointer;
96
108
 
97
109
  color: light-dark(
98
- var(--btn-600),
110
+ var(--btn-800),
99
111
  var(--btn-500)
100
112
  );
101
113
  }
102
114
  &: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
- );
115
+ @apply outline-none;
116
+
117
+ /* for default btn */
118
+ &:is(.btn) {
119
+ background-color: light-dark(
120
+ var(--btn-200),
121
+ var(--btn-900)
122
+ );
123
+
124
+ color: light-dark(
125
+ var(--btn-950),
126
+ var(--btn-100)
127
+ );
128
+ }
114
129
 
115
- color: light-dark(
116
- var(--btn-50),
117
- var(--btn-100)
118
- );
130
+ /* for all btn exclude default btn */
131
+ &:not(.btn) {
132
+ background-color: light-dark(
133
+ var(--btn-700),
134
+ var(--btn-900)
135
+ );
136
+
137
+ color: light-dark(
138
+ var(--btn-50),
139
+ var(--btn-100)
140
+ );
141
+ }
119
142
 
120
143
  &:not(:disabled, [disabled], .btn-disabled) {
121
144
  &::before {
@@ -178,7 +201,7 @@
178
201
  @apply bg-transparent;
179
202
 
180
203
  color: light-dark(
181
- var(--btn-600),
204
+ var(--btn-700),
182
205
  var(--btn-500)
183
206
  );
184
207
  }
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
  }