frutjam 0.8.0-beta.1 → 0.8.0-beta.3
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 +152 -114
- package/src/components/modal.css +4 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.8.0-beta.
|
|
3
|
+
"version": "0.8.0-beta.3",
|
|
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.
|
|
41
|
-
"tailwindcss": "^4.1.
|
|
40
|
+
"@tailwindcss/postcss": "^4.1.6",
|
|
41
|
+
"tailwindcss": "^4.1.6"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -70,159 +70,197 @@
|
|
|
70
70
|
@apply w-full;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
@utility btn-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
73
|
+
@utility btn-link-active {
|
|
74
|
+
background: transparent;
|
|
75
|
+
color: light-dark(
|
|
76
|
+
var(--btn-800),
|
|
77
|
+
var(--btn-500)
|
|
78
|
+
);
|
|
79
|
+
text-decoration: underline;
|
|
80
|
+
text-underline-offset: 4px;
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@utility btn-ghost-active {
|
|
80
85
|
/* for default btn */
|
|
81
86
|
&:is(.btn) {
|
|
82
87
|
background-color: light-dark(
|
|
83
88
|
var(--btn-200),
|
|
84
|
-
var(--btn-
|
|
89
|
+
var(--btn-900)
|
|
85
90
|
);
|
|
86
91
|
color: light-dark(
|
|
87
|
-
var(--btn-
|
|
88
|
-
var(--btn-
|
|
92
|
+
var(--btn-950),
|
|
93
|
+
var(--btn-100)
|
|
89
94
|
);
|
|
90
95
|
}
|
|
91
96
|
|
|
92
97
|
/* for all btn exclude default btn */
|
|
93
98
|
&:not(.btn) {
|
|
94
99
|
background-color: light-dark(
|
|
95
|
-
var(--btn-
|
|
96
|
-
var(--btn-
|
|
100
|
+
var(--btn-700),
|
|
101
|
+
var(--btn-900)
|
|
102
|
+
);
|
|
103
|
+
color: light-dark(
|
|
104
|
+
var(--btn-50),
|
|
105
|
+
var(--btn-100)
|
|
97
106
|
);
|
|
98
|
-
color: var(--btn-50);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&:is(:disabled, [disabled], .btn-disabled) {
|
|
102
|
-
@apply opacity-20 cursor-not-allowed;
|
|
103
107
|
}
|
|
108
|
+
}
|
|
104
109
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
&::after {
|
|
109
|
-
content: attr(aria-label);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
&:checked {
|
|
113
|
-
@apply isolate;
|
|
114
|
-
}
|
|
110
|
+
@utility btn-active {
|
|
111
|
+
&:is(.btn-link) {
|
|
112
|
+
@apply btn-link-active
|
|
115
113
|
}
|
|
116
|
-
|
|
117
|
-
|
|
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
|
-
);
|
|
125
|
-
}
|
|
126
|
-
&:not(.btn-link) {
|
|
127
|
-
@apply outline-none;
|
|
128
|
-
|
|
129
|
-
/* for default btn */
|
|
130
|
-
&:is(.btn) {
|
|
131
|
-
background-color: light-dark(
|
|
132
|
-
var(--btn-300),
|
|
133
|
-
var(--btn-900)
|
|
134
|
-
);
|
|
135
|
-
|
|
136
|
-
color: light-dark(
|
|
137
|
-
var(--btn-950),
|
|
138
|
-
var(--btn-100)
|
|
139
|
-
);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
/* for all btn exclude default btn */
|
|
143
|
-
&:not(.btn) {
|
|
144
|
-
background-color: light-dark(
|
|
145
|
-
var(--btn-700),
|
|
146
|
-
var(--btn-900)
|
|
147
|
-
);
|
|
148
|
-
|
|
149
|
-
color: light-dark(
|
|
150
|
-
var(--btn-50),
|
|
151
|
-
var(--btn-100)
|
|
152
|
-
);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
&:not(:disabled, [disabled], .btn-disabled) {
|
|
156
|
-
&::before {
|
|
157
|
-
@apply content-[''] absolute size-full;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
114
|
+
&:is(.btn-ghost) {
|
|
115
|
+
@apply btn-ghost-active;
|
|
161
116
|
}
|
|
117
|
+
&:not(.btn-link, .btn-ghost) {
|
|
118
|
+
outline-style: none;
|
|
162
119
|
|
|
163
|
-
|
|
164
|
-
&:
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
var(--btn-
|
|
168
|
-
var(--btn-700)
|
|
120
|
+
/* for default btn */
|
|
121
|
+
&:is(.btn) {
|
|
122
|
+
background-color: light-dark(
|
|
123
|
+
var(--btn-300),
|
|
124
|
+
var(--btn-900)
|
|
169
125
|
);
|
|
170
126
|
color: light-dark(
|
|
171
|
-
var(--btn-
|
|
172
|
-
var(--btn-
|
|
127
|
+
var(--btn-950),
|
|
128
|
+
var(--btn-100)
|
|
173
129
|
);
|
|
174
130
|
}
|
|
175
|
-
}
|
|
176
131
|
|
|
177
|
-
|
|
178
|
-
&:not(.btn
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
var(--btn-500),
|
|
132
|
+
/* for all btn exclude default btn */
|
|
133
|
+
&:not(.btn) {
|
|
134
|
+
background-color: light-dark(
|
|
135
|
+
var(--btn-700),
|
|
182
136
|
var(--btn-800)
|
|
183
137
|
);
|
|
184
138
|
color: light-dark(
|
|
185
|
-
var(--btn-
|
|
186
|
-
var(--btn-
|
|
139
|
+
var(--btn-50),
|
|
140
|
+
var(--btn-100)
|
|
187
141
|
);
|
|
188
142
|
}
|
|
189
143
|
}
|
|
144
|
+
}
|
|
190
145
|
|
|
191
|
-
|
|
192
|
-
|
|
146
|
+
@utility btn-dashed {
|
|
147
|
+
&:not(.btn-active) {
|
|
148
|
+
background: transparent;
|
|
149
|
+
outline: 1px dashed light-dark(
|
|
150
|
+
var(--btn-500),
|
|
151
|
+
var(--btn-700)
|
|
152
|
+
);
|
|
153
|
+
color: light-dark(
|
|
154
|
+
var(--btn-700),
|
|
155
|
+
var(--btn-500)
|
|
156
|
+
);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
193
159
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
160
|
+
@utility btn-outline {
|
|
161
|
+
&:not(.btn-active) {
|
|
162
|
+
background: transparent;
|
|
163
|
+
outline: 1px solid light-dark(
|
|
164
|
+
var(--btn-500),
|
|
165
|
+
var(--btn-800)
|
|
166
|
+
);
|
|
167
|
+
color: light-dark(
|
|
168
|
+
var(--btn-800),
|
|
169
|
+
var(--btn-200)
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
198
173
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
)
|
|
203
|
-
|
|
174
|
+
@utility btn-soft {
|
|
175
|
+
&:not(.btn-active) {
|
|
176
|
+
background-color: light-dark(
|
|
177
|
+
var(--btn-100),
|
|
178
|
+
color-mix(in oklab,var(--btn-900)10%,transparent)
|
|
179
|
+
);
|
|
180
|
+
color: light-dark(
|
|
181
|
+
var(--btn-800),
|
|
182
|
+
var(--btn-400)
|
|
183
|
+
);
|
|
204
184
|
}
|
|
185
|
+
}
|
|
205
186
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
187
|
+
@utility btn-ghost {
|
|
188
|
+
&:not(.btn-active) {
|
|
189
|
+
background: transparent;
|
|
190
|
+
color: light-dark(
|
|
191
|
+
var(--btn-600),
|
|
192
|
+
var(--btn-300)
|
|
193
|
+
);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
209
196
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
197
|
+
@utility btn-link {
|
|
198
|
+
&:not(.btn-active) {
|
|
199
|
+
background: transparent;
|
|
200
|
+
color: light-dark(
|
|
201
|
+
var(--btn-700),
|
|
202
|
+
var(--btn-500)
|
|
203
|
+
);
|
|
215
204
|
}
|
|
205
|
+
}
|
|
216
206
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
207
|
+
@utility btn-core {
|
|
208
|
+
@apply btn-md text-shadow-xs/5 gap-1.5 text-xs leading-normal;
|
|
209
|
+
transition: translate 0.2s ease-out, visibility 0.2s allow-discrete, background-color 0.2s ease-out, opacity 0.1s ease-out;
|
|
210
|
+
position: relative;
|
|
211
|
+
display: inline-flex;
|
|
212
|
+
flex-shrink: 0;
|
|
213
|
+
align-items: center;
|
|
214
|
+
justify-content: center;
|
|
215
|
+
align-self: flex-start;
|
|
216
|
+
flex-wrap: nowrap;
|
|
217
|
+
vertical-align: middle;
|
|
218
|
+
font-weight: 500;
|
|
219
|
+
text-align: center;
|
|
220
|
+
border-radius: var(--radius-btn);
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
cursor: pointer;
|
|
223
|
+
box-sizing: border-box;
|
|
220
224
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
)
|
|
225
|
+
/* for default btn */
|
|
226
|
+
&:is(.btn) {
|
|
227
|
+
background-color: light-dark(
|
|
228
|
+
var(--btn-200),
|
|
229
|
+
var(--btn-800)
|
|
230
|
+
);
|
|
231
|
+
color: light-dark(
|
|
232
|
+
var(--btn-900),
|
|
233
|
+
var(--btn-50)
|
|
234
|
+
);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* for all btn exclude default btn */
|
|
238
|
+
&:not(.btn) {
|
|
239
|
+
background-color: light-dark(
|
|
240
|
+
var(--btn-600),
|
|
241
|
+
var(--btn-700)
|
|
242
|
+
);
|
|
243
|
+
color: var(--btn-50);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
&:is(:disabled, [disabled], .btn-disabled) {
|
|
247
|
+
@apply opacity-20 cursor-not-allowed pointer-events-none;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
&:is(input[type="checkbox"], input[type="radio"]) {
|
|
251
|
+
@apply appearance-none;
|
|
252
|
+
|
|
253
|
+
&::after {
|
|
254
|
+
content: attr(aria-label);
|
|
225
255
|
}
|
|
256
|
+
|
|
257
|
+
&:checked {
|
|
258
|
+
@apply isolate;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&:is(:hover) {
|
|
263
|
+
@apply btn-active;
|
|
226
264
|
}
|
|
227
265
|
}
|
|
228
266
|
|
package/src/components/modal.css
CHANGED
|
@@ -7,14 +7,10 @@
|
|
|
7
7
|
&:not(modal:not([open]):not(.modal-open)),
|
|
8
8
|
&::backdrop {
|
|
9
9
|
@apply opacity-100 starting:invisible starting:opacity-0;
|
|
10
|
-
background
|
|
11
|
-
color-mix(in oklab,var(--core-100)15%,transparent),
|
|
12
|
-
color-mix(in oklab,var(--core-800)50%,transparent)
|
|
13
|
-
);
|
|
10
|
+
background: light-dark(#00000026, #000000ba);
|
|
14
11
|
}
|
|
15
12
|
&[open], &.modal-open {
|
|
16
13
|
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
17
|
-
|
|
18
14
|
.modal-body {
|
|
19
15
|
translate: 0 0;
|
|
20
16
|
scale: 1;
|
|
@@ -24,18 +20,14 @@
|
|
|
24
20
|
}
|
|
25
21
|
|
|
26
22
|
@utility modal-backdrop {
|
|
27
|
-
@apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
|
|
28
|
-
background: light-dark(
|
|
29
|
-
color-mix(in oklab,var(--core-300)50%,transparent),
|
|
30
|
-
color-mix(in oklab,var(--core-900)80%,transparent)
|
|
31
|
-
);
|
|
23
|
+
@apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1 bg-transparent;
|
|
32
24
|
button {
|
|
33
25
|
@apply cursor-pointer;
|
|
34
26
|
}
|
|
35
27
|
}
|
|
36
28
|
|
|
37
29
|
@utility modal-body {
|
|
38
|
-
@apply rounded-[var(--radius-modal)] shadow-sm forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6
|
|
30
|
+
@apply rounded-[var(--radius-modal)] shadow-sm forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
39
31
|
--tw-shadow-color: light-dark(
|
|
40
32
|
color-mix(in oklab,var(--core-300)50%,transparent),
|
|
41
33
|
color-mix(in oklab,var(--core-900)60%,transparent)
|
|
@@ -52,6 +44,7 @@
|
|
|
52
44
|
var(--core-300),
|
|
53
45
|
var(--core-900)
|
|
54
46
|
);
|
|
47
|
+
transition: translate 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
|
|
55
48
|
}
|
|
56
49
|
|
|
57
50
|
|