frutjam 0.13.0-beta.0 → 1.0.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.
- package/package.json +3 -3
- package/src/components/accordion.css +4 -0
- package/src/components/breadcrumb.css +72 -0
- package/src/components/button.css +64 -28
- package/src/components/checkbox.css +110 -154
- package/src/components/divider.css +2 -12
- package/src/components/input.css +20 -13
- package/src/components/popover.css +15 -15
- package/src/main.css +1 -0
- package/src/theme/jams/snowberry.css +22 -22
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-beta.0",
|
|
4
4
|
"description": "A utility-first CSS framework UI Library",
|
|
5
5
|
"funding": "https://ko-fi.com/nezanuha",
|
|
6
6
|
"main": "./dist/frutjam.css",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"url": "https://github.com/nezanuha/frutjam/issues"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@tailwindcss/postcss": "^4.1.
|
|
42
|
-
"tailwindcss": "^4.1.
|
|
41
|
+
"@tailwindcss/postcss": "^4.1.8",
|
|
42
|
+
"tailwindcss": "^4.1.8"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"css-loader": "^7.1.2",
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@utility breadcrumb {
|
|
2
|
+
@apply py-2;
|
|
3
|
+
|
|
4
|
+
max-width: 100%;
|
|
5
|
+
overflow-x: auto;
|
|
6
|
+
|
|
7
|
+
& > .breadcrumb-list,
|
|
8
|
+
& > ol,
|
|
9
|
+
& > ul {
|
|
10
|
+
display: flex;
|
|
11
|
+
min-height: min-content;
|
|
12
|
+
align-items: center;
|
|
13
|
+
white-space: nowrap;
|
|
14
|
+
|
|
15
|
+
/* Automatically hide default separator if a custom separator is used */
|
|
16
|
+
.breadcrumb-item {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
|
|
20
|
+
& > .breadcrumb-link,
|
|
21
|
+
& > .breadcrumb-current,
|
|
22
|
+
& > a,
|
|
23
|
+
& > span {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
@apply gap-2;
|
|
27
|
+
|
|
28
|
+
@media (hover: hover) {
|
|
29
|
+
&:hover:not([aria-current="page"]):not(.breadcrumb-current) {
|
|
30
|
+
@apply underline underline-offset-4;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:focus {
|
|
36
|
+
@apply outline-hidden;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:focus-visible {
|
|
40
|
+
outline: 2px solid currentColor;
|
|
41
|
+
outline-offset: 2px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Only show default separator if NOT preceded by .breadcrumb-separator */
|
|
46
|
+
& + .breadcrumb-item::before {
|
|
47
|
+
content: "";
|
|
48
|
+
@apply mr-3 ml-2 block h-1.5 w-1.5 opacity-40;
|
|
49
|
+
rotate: 45deg;
|
|
50
|
+
border-top: 1px solid;
|
|
51
|
+
border-right: 1px solid;
|
|
52
|
+
background-color: #0000;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[dir="rtl"] & + .breadcrumb-item::before {
|
|
56
|
+
rotate: -135deg;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Remove default separator when preceded by custom .breadcrumb-separator */
|
|
60
|
+
.breadcrumb-separator + &::before {
|
|
61
|
+
content: none;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Slotted custom separator */
|
|
66
|
+
.breadcrumb-separator {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
@apply mx-2 text-sm text-gray-500;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -2,11 +2,9 @@
|
|
|
2
2
|
@import "../theme/animation/wiggle.css";
|
|
3
3
|
|
|
4
4
|
@utility btn-size {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
font-size: var(--btn-text-size);
|
|
9
|
-
}
|
|
5
|
+
padding-inline: var(--btn-inline);
|
|
6
|
+
padding-block: var(--btn-block);
|
|
7
|
+
font-size: var(--btn-text-size);
|
|
10
8
|
}
|
|
11
9
|
|
|
12
10
|
@utility btn-xs {
|
|
@@ -33,21 +31,21 @@
|
|
|
33
31
|
@utility btn-lg {
|
|
34
32
|
--btn-inline: 1.25rem;
|
|
35
33
|
--btn-block: 0.75rem;
|
|
36
|
-
--btn-text-size:
|
|
34
|
+
--btn-text-size: 1.125rem;
|
|
37
35
|
@apply btn-size;
|
|
38
36
|
}
|
|
39
37
|
|
|
40
38
|
@utility btn-xl {
|
|
41
39
|
--btn-inline: 1.375rem;
|
|
42
40
|
--btn-block: 0.875rem;
|
|
43
|
-
--btn-text-size:
|
|
41
|
+
--btn-text-size: 1.25rem;
|
|
44
42
|
@apply btn-size;
|
|
45
43
|
}
|
|
46
44
|
|
|
47
45
|
@utility btn-2xl {
|
|
48
46
|
--btn-inline: 1.5rem;
|
|
49
47
|
--btn-block: 1rem;
|
|
50
|
-
--btn-text-size: 1.
|
|
48
|
+
--btn-text-size: 1.5rem;
|
|
51
49
|
@apply btn-size;
|
|
52
50
|
}
|
|
53
51
|
|
|
@@ -80,13 +78,29 @@
|
|
|
80
78
|
|
|
81
79
|
@utility btn-ghost-active {
|
|
82
80
|
/* for default btn */
|
|
83
|
-
&:
|
|
81
|
+
&:not(
|
|
82
|
+
.btn-primary,
|
|
83
|
+
.btn-secondary,
|
|
84
|
+
.btn-accent,
|
|
85
|
+
.btn-info,
|
|
86
|
+
.btn-success,
|
|
87
|
+
.btn-warning,
|
|
88
|
+
.btn-error
|
|
89
|
+
) {
|
|
84
90
|
background-color: light-dark(var(--btn-200), var(--btn-900));
|
|
85
91
|
color: light-dark(var(--btn-950), var(--btn-100));
|
|
86
92
|
}
|
|
87
93
|
|
|
88
94
|
/* for all btn exclude default btn */
|
|
89
|
-
&:
|
|
95
|
+
&:is(
|
|
96
|
+
.btn-primary,
|
|
97
|
+
.btn-secondary,
|
|
98
|
+
.btn-accent,
|
|
99
|
+
.btn-info,
|
|
100
|
+
.btn-success,
|
|
101
|
+
.btn-warning,
|
|
102
|
+
.btn-error
|
|
103
|
+
) {
|
|
90
104
|
background-color: light-dark(var(--btn-700), var(--btn-900));
|
|
91
105
|
color: light-dark(var(--btn-50), var(--btn-100));
|
|
92
106
|
}
|
|
@@ -103,14 +117,30 @@
|
|
|
103
117
|
outline-style: none;
|
|
104
118
|
|
|
105
119
|
/* for default btn */
|
|
106
|
-
&:
|
|
120
|
+
&:not(
|
|
121
|
+
.btn-primary,
|
|
122
|
+
.btn-secondary,
|
|
123
|
+
.btn-accent,
|
|
124
|
+
.btn-info,
|
|
125
|
+
.btn-success,
|
|
126
|
+
.btn-warning,
|
|
127
|
+
.btn-error
|
|
128
|
+
) {
|
|
107
129
|
background-color: light-dark(var(--btn-300), var(--btn-900));
|
|
108
130
|
color: light-dark(var(--btn-950), var(--btn-100));
|
|
109
131
|
}
|
|
110
132
|
|
|
111
133
|
/* for all btn exclude default btn */
|
|
112
|
-
&:
|
|
113
|
-
|
|
134
|
+
&:is(
|
|
135
|
+
.btn-primary,
|
|
136
|
+
.btn-secondary,
|
|
137
|
+
.btn-accent,
|
|
138
|
+
.btn-info,
|
|
139
|
+
.btn-success,
|
|
140
|
+
.btn-warning,
|
|
141
|
+
.btn-error
|
|
142
|
+
) {
|
|
143
|
+
background-color: light-dark(var(--btn-800), var(--btn-800));
|
|
114
144
|
color: light-dark(var(--btn-50), var(--btn-100));
|
|
115
145
|
}
|
|
116
146
|
}
|
|
@@ -156,8 +186,8 @@
|
|
|
156
186
|
}
|
|
157
187
|
}
|
|
158
188
|
|
|
159
|
-
@utility btn
|
|
160
|
-
@apply btn-md text-shadow-xs/5 gap-1.5
|
|
189
|
+
@utility btn {
|
|
190
|
+
@apply btn-md text-shadow-xs/5 gap-1.5 leading-normal;
|
|
161
191
|
transition:
|
|
162
192
|
translate 0.2s ease-out,
|
|
163
193
|
visibility 0.2s allow-discrete,
|
|
@@ -179,14 +209,30 @@
|
|
|
179
209
|
box-sizing: border-box;
|
|
180
210
|
|
|
181
211
|
/* for default btn */
|
|
182
|
-
&:
|
|
212
|
+
&:not(
|
|
213
|
+
.btn-primary,
|
|
214
|
+
.btn-secondary,
|
|
215
|
+
.btn-accent,
|
|
216
|
+
.btn-info,
|
|
217
|
+
.btn-success,
|
|
218
|
+
.btn-warning,
|
|
219
|
+
.btn-error
|
|
220
|
+
) {
|
|
183
221
|
background-color: light-dark(var(--btn-200), var(--btn-800));
|
|
184
222
|
color: light-dark(var(--btn-900), var(--btn-50));
|
|
185
223
|
}
|
|
186
224
|
|
|
187
225
|
/* for all btn exclude default btn */
|
|
188
|
-
&:
|
|
189
|
-
|
|
226
|
+
&:is(
|
|
227
|
+
.btn-primary,
|
|
228
|
+
.btn-secondary,
|
|
229
|
+
.btn-accent,
|
|
230
|
+
.btn-info,
|
|
231
|
+
.btn-success,
|
|
232
|
+
.btn-warning,
|
|
233
|
+
.btn-error
|
|
234
|
+
) {
|
|
235
|
+
background-color: light-dark(var(--btn-700), var(--btn-700));
|
|
190
236
|
color: var(--btn-50);
|
|
191
237
|
}
|
|
192
238
|
|
|
@@ -211,9 +257,7 @@
|
|
|
211
257
|
@apply btn-active;
|
|
212
258
|
}
|
|
213
259
|
}
|
|
214
|
-
}
|
|
215
260
|
|
|
216
|
-
@utility btn {
|
|
217
261
|
--btn-50: var(--default-50);
|
|
218
262
|
--btn-100: var(--default-100);
|
|
219
263
|
--btn-200: var(--default-200);
|
|
@@ -225,7 +269,6 @@
|
|
|
225
269
|
--btn-800: var(--default-800);
|
|
226
270
|
--btn-900: var(--default-900);
|
|
227
271
|
--btn-950: var(--default-950);
|
|
228
|
-
@apply btn-core;
|
|
229
272
|
}
|
|
230
273
|
|
|
231
274
|
@utility btn-primary {
|
|
@@ -240,7 +283,6 @@
|
|
|
240
283
|
--btn-800: var(--primary-800);
|
|
241
284
|
--btn-900: var(--primary-900);
|
|
242
285
|
--btn-950: var(--primary-950);
|
|
243
|
-
@apply btn-core;
|
|
244
286
|
}
|
|
245
287
|
|
|
246
288
|
@utility btn-secondary {
|
|
@@ -255,7 +297,6 @@
|
|
|
255
297
|
--btn-800: var(--secondary-800);
|
|
256
298
|
--btn-900: var(--secondary-900);
|
|
257
299
|
--btn-950: var(--secondary-950);
|
|
258
|
-
@apply btn-core;
|
|
259
300
|
}
|
|
260
301
|
|
|
261
302
|
@utility btn-accent {
|
|
@@ -270,7 +311,6 @@
|
|
|
270
311
|
--btn-800: var(--accent-800);
|
|
271
312
|
--btn-900: var(--accent-900);
|
|
272
313
|
--btn-950: var(--accent-950);
|
|
273
|
-
@apply btn-core;
|
|
274
314
|
}
|
|
275
315
|
|
|
276
316
|
@utility btn-info {
|
|
@@ -285,7 +325,6 @@
|
|
|
285
325
|
--btn-800: var(--info-800);
|
|
286
326
|
--btn-900: var(--info-900);
|
|
287
327
|
--btn-950: var(--info-950);
|
|
288
|
-
@apply btn-core;
|
|
289
328
|
}
|
|
290
329
|
|
|
291
330
|
@utility btn-success {
|
|
@@ -300,7 +339,6 @@
|
|
|
300
339
|
--btn-800: var(--success-800);
|
|
301
340
|
--btn-900: var(--success-900);
|
|
302
341
|
--btn-950: var(--success-950);
|
|
303
|
-
@apply btn-core;
|
|
304
342
|
}
|
|
305
343
|
|
|
306
344
|
@utility btn-warning {
|
|
@@ -315,7 +353,6 @@
|
|
|
315
353
|
--btn-800: var(--warning-800);
|
|
316
354
|
--btn-900: var(--warning-900);
|
|
317
355
|
--btn-950: var(--warning-950);
|
|
318
|
-
@apply btn-core;
|
|
319
356
|
}
|
|
320
357
|
|
|
321
358
|
@utility btn-error {
|
|
@@ -330,5 +367,4 @@
|
|
|
330
367
|
--btn-800: var(--error-800);
|
|
331
368
|
--btn-900: var(--error-900);
|
|
332
369
|
--btn-950: var(--error-950);
|
|
333
|
-
@apply btn-core;
|
|
334
370
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import "../theme/jams/base.css";
|
|
2
2
|
|
|
3
3
|
@utility checkbox-xs {
|
|
4
4
|
@layer components {
|
|
@@ -48,24 +48,20 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
@utility checkbox
|
|
52
|
-
@layer components {
|
|
51
|
+
@utility checkbox {
|
|
53
52
|
@apply relative shrink-0 cursor-pointer appearance-none align-middle shadow ring duration-350 checkbox-md;
|
|
54
53
|
|
|
55
54
|
--tw-ring-color: light-dark(
|
|
56
55
|
var(--checkbox-300),
|
|
57
|
-
color-mix(in oklab,var(--checkbox-100)16%,transparent)
|
|
56
|
+
color-mix(in oklab, var(--checkbox-100) 16%, transparent)
|
|
58
57
|
);
|
|
59
58
|
|
|
60
59
|
background-color: light-dark(
|
|
61
60
|
var(--checkbox-100),
|
|
62
|
-
color-mix(in oklab,var(--checkbox-600)15%,transparent)
|
|
61
|
+
color-mix(in oklab, var(--checkbox-600) 15%, transparent)
|
|
63
62
|
);
|
|
64
63
|
|
|
65
|
-
color: light-dark(
|
|
66
|
-
var(--checkbox-700),
|
|
67
|
-
var(--checkbox-200)
|
|
68
|
-
);
|
|
64
|
+
color: light-dark(var(--checkbox-700), var(--checkbox-200));
|
|
69
65
|
|
|
70
66
|
border-radius: var(--radius-checkbox);
|
|
71
67
|
|
|
@@ -75,47 +71,44 @@
|
|
|
75
71
|
font-size: 1rem;
|
|
76
72
|
line-height: 0.75;
|
|
77
73
|
}
|
|
78
|
-
|
|
74
|
+
|
|
79
75
|
&:focus-visible {
|
|
80
76
|
outline: 2px solid var(--checkbox-700, currentColor);
|
|
81
77
|
outline-offset: 2px;
|
|
82
78
|
}
|
|
83
|
-
|
|
79
|
+
|
|
84
80
|
&:checked,
|
|
85
81
|
&[aria-checked="true"] {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
@apply opacity-100 content-['✔︎'];
|
|
94
|
-
@media (forced-colors: active) {
|
|
95
|
-
@apply rotate-0 bg-transparent content-['✔︎'] [clip-path:none];
|
|
96
|
-
}
|
|
82
|
+
@apply shadow-2xl;
|
|
83
|
+
background-color: light-dark(var(--checkbox-200), var(--checkbox-600));
|
|
84
|
+
&::before {
|
|
85
|
+
clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0, 70% 0, 70% 100%);
|
|
86
|
+
@apply opacity-100 content-['✔︎'];
|
|
87
|
+
@media (forced-colors: active) {
|
|
88
|
+
@apply rotate-0 bg-transparent content-['✔︎'] [clip-path:none];
|
|
97
89
|
}
|
|
90
|
+
}
|
|
98
91
|
}
|
|
99
|
-
|
|
92
|
+
|
|
100
93
|
&:indeterminate {
|
|
101
94
|
&:before {
|
|
102
95
|
@apply rotate-0 opacity-100;
|
|
103
96
|
translate: 0 -35%;
|
|
104
|
-
clip-path: polygon(
|
|
97
|
+
clip-path: polygon(
|
|
98
|
+
20% 100%,
|
|
99
|
+
20% 80%,
|
|
100
|
+
50% 80%,
|
|
101
|
+
50% 80%,
|
|
102
|
+
80% 80%,
|
|
103
|
+
80% 100%
|
|
104
|
+
);
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
-
|
|
107
|
+
|
|
108
108
|
&:disabled {
|
|
109
109
|
@apply cursor-not-allowed opacity-20;
|
|
110
110
|
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
111
|
|
|
114
|
-
@utility checkbox {
|
|
115
|
-
@layer components {
|
|
116
|
-
@apply checkbox-core;
|
|
117
|
-
}
|
|
118
|
-
@layer theme {
|
|
119
112
|
--checkbox-50: var(--default-50);
|
|
120
113
|
--checkbox-100: var(--default-100);
|
|
121
114
|
--checkbox-200: var(--default-200);
|
|
@@ -127,139 +120,102 @@
|
|
|
127
120
|
--checkbox-800: var(--default-800);
|
|
128
121
|
--checkbox-900: var(--default-900);
|
|
129
122
|
--checkbox-950: var(--default-950);
|
|
130
|
-
}
|
|
131
123
|
}
|
|
132
|
-
|
|
124
|
+
|
|
133
125
|
@utility checkbox-primary {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
--checkbox-700: var(--primary-700);
|
|
146
|
-
--checkbox-800: var(--primary-800);
|
|
147
|
-
--checkbox-900: var(--primary-900);
|
|
148
|
-
--checkbox-950: var(--primary-950);
|
|
149
|
-
}
|
|
126
|
+
--checkbox-50: var(--primary-50);
|
|
127
|
+
--checkbox-100: var(--primary-100);
|
|
128
|
+
--checkbox-200: var(--primary-200);
|
|
129
|
+
--checkbox-300: var(--primary-300);
|
|
130
|
+
--checkbox-400: var(--primary-400);
|
|
131
|
+
--checkbox-500: var(--primary-500);
|
|
132
|
+
--checkbox-600: var(--primary-600);
|
|
133
|
+
--checkbox-700: var(--primary-700);
|
|
134
|
+
--checkbox-800: var(--primary-800);
|
|
135
|
+
--checkbox-900: var(--primary-900);
|
|
136
|
+
--checkbox-950: var(--primary-950);
|
|
150
137
|
}
|
|
151
|
-
|
|
138
|
+
|
|
152
139
|
@utility checkbox-secondary {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
--checkbox-700: var(--secondary-700);
|
|
165
|
-
--checkbox-800: var(--secondary-800);
|
|
166
|
-
--checkbox-900: var(--secondary-900);
|
|
167
|
-
--checkbox-950: var(--secondary-950);
|
|
168
|
-
}
|
|
140
|
+
--checkbox-50: var(--secondary-50);
|
|
141
|
+
--checkbox-100: var(--secondary-100);
|
|
142
|
+
--checkbox-200: var(--secondary-200);
|
|
143
|
+
--checkbox-300: var(--secondary-300);
|
|
144
|
+
--checkbox-400: var(--secondary-400);
|
|
145
|
+
--checkbox-500: var(--secondary-500);
|
|
146
|
+
--checkbox-600: var(--secondary-600);
|
|
147
|
+
--checkbox-700: var(--secondary-700);
|
|
148
|
+
--checkbox-800: var(--secondary-800);
|
|
149
|
+
--checkbox-900: var(--secondary-900);
|
|
150
|
+
--checkbox-950: var(--secondary-950);
|
|
169
151
|
}
|
|
170
|
-
|
|
152
|
+
|
|
171
153
|
@utility checkbox-accent {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
--checkbox-700: var(--accent-700);
|
|
184
|
-
--checkbox-800: var(--accent-800);
|
|
185
|
-
--checkbox-900: var(--accent-900);
|
|
186
|
-
--checkbox-950: var(--accent-950);
|
|
187
|
-
}
|
|
154
|
+
--checkbox-50: var(--accent-50);
|
|
155
|
+
--checkbox-100: var(--accent-100);
|
|
156
|
+
--checkbox-200: var(--accent-200);
|
|
157
|
+
--checkbox-300: var(--accent-300);
|
|
158
|
+
--checkbox-400: var(--accent-400);
|
|
159
|
+
--checkbox-500: var(--accent-500);
|
|
160
|
+
--checkbox-600: var(--accent-600);
|
|
161
|
+
--checkbox-700: var(--accent-700);
|
|
162
|
+
--checkbox-800: var(--accent-800);
|
|
163
|
+
--checkbox-900: var(--accent-900);
|
|
164
|
+
--checkbox-950: var(--accent-950);
|
|
188
165
|
}
|
|
189
|
-
|
|
190
|
-
|
|
166
|
+
|
|
191
167
|
@utility checkbox-info {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
--checkbox-700: var(--info-700);
|
|
204
|
-
--checkbox-800: var(--info-800);
|
|
205
|
-
--checkbox-900: var(--info-900);
|
|
206
|
-
--checkbox-950: var(--info-950);
|
|
207
|
-
}
|
|
168
|
+
--checkbox-50: var(--info-50);
|
|
169
|
+
--checkbox-100: var(--info-100);
|
|
170
|
+
--checkbox-200: var(--info-200);
|
|
171
|
+
--checkbox-300: var(--info-300);
|
|
172
|
+
--checkbox-400: var(--info-400);
|
|
173
|
+
--checkbox-500: var(--info-500);
|
|
174
|
+
--checkbox-600: var(--info-600);
|
|
175
|
+
--checkbox-700: var(--info-700);
|
|
176
|
+
--checkbox-800: var(--info-800);
|
|
177
|
+
--checkbox-900: var(--info-900);
|
|
178
|
+
--checkbox-950: var(--info-950);
|
|
208
179
|
}
|
|
209
|
-
|
|
180
|
+
|
|
210
181
|
@utility checkbox-success {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
--checkbox-700: var(--success-700);
|
|
223
|
-
--checkbox-800: var(--success-800);
|
|
224
|
-
--checkbox-900: var(--success-900);
|
|
225
|
-
--checkbox-950: var(--success-950);
|
|
226
|
-
}
|
|
182
|
+
--checkbox-50: var(--success-50);
|
|
183
|
+
--checkbox-100: var(--success-100);
|
|
184
|
+
--checkbox-200: var(--success-200);
|
|
185
|
+
--checkbox-300: var(--success-300);
|
|
186
|
+
--checkbox-400: var(--success-400);
|
|
187
|
+
--checkbox-500: var(--success-500);
|
|
188
|
+
--checkbox-600: var(--success-600);
|
|
189
|
+
--checkbox-700: var(--success-700);
|
|
190
|
+
--checkbox-800: var(--success-800);
|
|
191
|
+
--checkbox-900: var(--success-900);
|
|
192
|
+
--checkbox-950: var(--success-950);
|
|
227
193
|
}
|
|
228
|
-
|
|
194
|
+
|
|
229
195
|
@utility checkbox-warning {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
--checkbox-700: var(--warning-700);
|
|
242
|
-
--checkbox-800: var(--warning-800);
|
|
243
|
-
--checkbox-900: var(--warning-900);
|
|
244
|
-
--checkbox-950: var(--warning-950);
|
|
245
|
-
}
|
|
196
|
+
--checkbox-50: var(--warning-50);
|
|
197
|
+
--checkbox-100: var(--warning-100);
|
|
198
|
+
--checkbox-200: var(--warning-200);
|
|
199
|
+
--checkbox-300: var(--warning-300);
|
|
200
|
+
--checkbox-400: var(--warning-400);
|
|
201
|
+
--checkbox-500: var(--warning-500);
|
|
202
|
+
--checkbox-600: var(--warning-600);
|
|
203
|
+
--checkbox-700: var(--warning-700);
|
|
204
|
+
--checkbox-800: var(--warning-800);
|
|
205
|
+
--checkbox-900: var(--warning-900);
|
|
206
|
+
--checkbox-950: var(--warning-950);
|
|
246
207
|
}
|
|
247
|
-
|
|
208
|
+
|
|
248
209
|
@utility checkbox-error {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
--checkbox-800: var(--error-800);
|
|
262
|
-
--checkbox-900: var(--error-900);
|
|
263
|
-
--checkbox-950: var(--error-950);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
210
|
+
--checkbox-50: var(--error-50);
|
|
211
|
+
--checkbox-100: var(--error-100);
|
|
212
|
+
--checkbox-200: var(--error-200);
|
|
213
|
+
--checkbox-300: var(--error-300);
|
|
214
|
+
--checkbox-400: var(--error-400);
|
|
215
|
+
--checkbox-500: var(--error-500);
|
|
216
|
+
--checkbox-600: var(--error-600);
|
|
217
|
+
--checkbox-700: var(--error-700);
|
|
218
|
+
--checkbox-800: var(--error-800);
|
|
219
|
+
--checkbox-900: var(--error-900);
|
|
220
|
+
--checkbox-950: var(--error-950);
|
|
221
|
+
}
|
|
@@ -101,15 +101,13 @@
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
@utility divider
|
|
104
|
+
@utility divider {
|
|
105
105
|
@apply divider-x-solid flex items-center justify-center h-full;
|
|
106
106
|
|
|
107
107
|
&::before, &::after {
|
|
108
108
|
@apply content-[''];
|
|
109
109
|
}
|
|
110
|
-
}
|
|
111
110
|
|
|
112
|
-
@utility divider {
|
|
113
111
|
--divider-50: var(--default-50);
|
|
114
112
|
--divider-100: var(--default-100);
|
|
115
113
|
--divider-200: var(--default-200);
|
|
@@ -121,8 +119,7 @@
|
|
|
121
119
|
--divider-800: var(--default-800);
|
|
122
120
|
--divider-900: var(--default-900);
|
|
123
121
|
--divider-950: var(--default-950);
|
|
124
|
-
|
|
125
|
-
}
|
|
122
|
+
}
|
|
126
123
|
|
|
127
124
|
@utility divider-primary {
|
|
128
125
|
--divider-50: var(--primary-50);
|
|
@@ -136,7 +133,6 @@
|
|
|
136
133
|
--divider-800: var(--primary-800);
|
|
137
134
|
--divider-900: var(--primary-900);
|
|
138
135
|
--divider-950: var(--primary-950);
|
|
139
|
-
@apply divider-core;
|
|
140
136
|
}
|
|
141
137
|
|
|
142
138
|
@utility divider-secondary {
|
|
@@ -151,7 +147,6 @@
|
|
|
151
147
|
--divider-800: var(--secondary-800);
|
|
152
148
|
--divider-900: var(--secondary-900);
|
|
153
149
|
--divider-950: var(--secondary-950);
|
|
154
|
-
@apply divider-core;
|
|
155
150
|
}
|
|
156
151
|
|
|
157
152
|
@utility divider-accent {
|
|
@@ -166,7 +161,6 @@
|
|
|
166
161
|
--divider-800: var(--accent-800);
|
|
167
162
|
--divider-900: var(--accent-900);
|
|
168
163
|
--divider-950: var(--accent-950);
|
|
169
|
-
@apply divider-core;
|
|
170
164
|
}
|
|
171
165
|
|
|
172
166
|
@utility divider-info {
|
|
@@ -181,7 +175,6 @@
|
|
|
181
175
|
--divider-800: var(--info-800);
|
|
182
176
|
--divider-900: var(--info-900);
|
|
183
177
|
--divider-950: var(--info-950);
|
|
184
|
-
@apply divider-core;
|
|
185
178
|
}
|
|
186
179
|
|
|
187
180
|
@utility divider-success {
|
|
@@ -196,7 +189,6 @@
|
|
|
196
189
|
--divider-800: var(--success-800);
|
|
197
190
|
--divider-900: var(--success-900);
|
|
198
191
|
--divider-950: var(--success-950);
|
|
199
|
-
@apply divider-core;
|
|
200
192
|
}
|
|
201
193
|
|
|
202
194
|
@utility divider-warning {
|
|
@@ -211,7 +203,6 @@
|
|
|
211
203
|
--divider-800: var(--warning-800);
|
|
212
204
|
--divider-900: var(--warning-900);
|
|
213
205
|
--divider-950: var(--warning-950);
|
|
214
|
-
@apply divider-core;
|
|
215
206
|
}
|
|
216
207
|
|
|
217
208
|
@utility divider-error {
|
|
@@ -226,5 +217,4 @@
|
|
|
226
217
|
--divider-800: var(--error-800);
|
|
227
218
|
--divider-900: var(--error-900);
|
|
228
219
|
--divider-950: var(--error-950);
|
|
229
|
-
@apply divider-core;
|
|
230
220
|
}
|
package/src/components/input.css
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
@utility input
|
|
83
|
+
@utility input {
|
|
84
84
|
@apply input-md transition duration-300 px-2.5 font-medium relative inline-flex self-start
|
|
85
85
|
shrink-0 appearance-none items-center gap-2 align-middle whitespace-nowrap;
|
|
86
86
|
|
|
@@ -127,14 +127,30 @@
|
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
&:
|
|
130
|
+
&:not(
|
|
131
|
+
.input-primary,
|
|
132
|
+
.input-secondary,
|
|
133
|
+
.input-accent,
|
|
134
|
+
.input-info,
|
|
135
|
+
.input-success,
|
|
136
|
+
.input-warning,
|
|
137
|
+
.input-error
|
|
138
|
+
){
|
|
131
139
|
outline: 1px solid light-dark(
|
|
132
140
|
var(--input-300),
|
|
133
141
|
var(--input-800)
|
|
134
142
|
);
|
|
135
143
|
}
|
|
136
144
|
|
|
137
|
-
&:
|
|
145
|
+
&:is(
|
|
146
|
+
.input-primary,
|
|
147
|
+
.input-secondary,
|
|
148
|
+
.input-accent,
|
|
149
|
+
.input-info,
|
|
150
|
+
.input-success,
|
|
151
|
+
.input-warning,
|
|
152
|
+
.input-error
|
|
153
|
+
){
|
|
138
154
|
outline: 1px solid light-dark(
|
|
139
155
|
var(--input-700),
|
|
140
156
|
var(--input-800)
|
|
@@ -153,9 +169,7 @@
|
|
|
153
169
|
&:focus, &:focus-within {
|
|
154
170
|
@apply outline-[var(--input-800)] ring-2 ring-[var(--input-200)] isolate;
|
|
155
171
|
}
|
|
156
|
-
}
|
|
157
172
|
|
|
158
|
-
@utility input {
|
|
159
173
|
--input-50: var(--default-50);
|
|
160
174
|
--input-100: var(--default-100);
|
|
161
175
|
--input-200: var(--default-200);
|
|
@@ -167,9 +181,9 @@
|
|
|
167
181
|
--input-800: var(--default-800);
|
|
168
182
|
--input-900: var(--default-900);
|
|
169
183
|
--input-950: var(--default-950);
|
|
170
|
-
@apply input-core;
|
|
171
184
|
}
|
|
172
185
|
|
|
186
|
+
|
|
173
187
|
@utility input-primary {
|
|
174
188
|
--input-50: var(--primary-50);
|
|
175
189
|
--input-100: var(--primary-100);
|
|
@@ -182,7 +196,6 @@
|
|
|
182
196
|
--input-800: var(--primary-800);
|
|
183
197
|
--input-900: var(--primary-900);
|
|
184
198
|
--input-950: var(--primary-950);
|
|
185
|
-
@apply input-core;
|
|
186
199
|
}
|
|
187
200
|
|
|
188
201
|
@utility input-secondary {
|
|
@@ -197,7 +210,6 @@
|
|
|
197
210
|
--input-800: var(--secondary-800);
|
|
198
211
|
--input-900: var(--secondary-900);
|
|
199
212
|
--input-950: var(--secondary-950);
|
|
200
|
-
@apply input-core;
|
|
201
213
|
}
|
|
202
214
|
|
|
203
215
|
@utility input-accent {
|
|
@@ -212,7 +224,6 @@
|
|
|
212
224
|
--input-800: var(--accent-800);
|
|
213
225
|
--input-900: var(--accent-900);
|
|
214
226
|
--input-950: var(--accent-950);
|
|
215
|
-
@apply input-core;
|
|
216
227
|
}
|
|
217
228
|
|
|
218
229
|
@utility input-info {
|
|
@@ -227,7 +238,6 @@
|
|
|
227
238
|
--input-800: var(--info-800);
|
|
228
239
|
--input-900: var(--info-900);
|
|
229
240
|
--input-950: var(--info-950);
|
|
230
|
-
@apply input-core;
|
|
231
241
|
}
|
|
232
242
|
|
|
233
243
|
@utility input-success {
|
|
@@ -242,7 +252,6 @@
|
|
|
242
252
|
--input-800: var(--success-800);
|
|
243
253
|
--input-900: var(--success-900);
|
|
244
254
|
--input-950: var(--success-950);
|
|
245
|
-
@apply input-core;
|
|
246
255
|
}
|
|
247
256
|
|
|
248
257
|
@utility input-warning {
|
|
@@ -257,7 +266,6 @@
|
|
|
257
266
|
--input-800: var(--warning-800);
|
|
258
267
|
--input-900: var(--warning-900);
|
|
259
268
|
--input-950: var(--warning-950);
|
|
260
|
-
@apply input-core;
|
|
261
269
|
}
|
|
262
270
|
|
|
263
271
|
@utility input-error {
|
|
@@ -272,5 +280,4 @@
|
|
|
272
280
|
--input-800: var(--error-800);
|
|
273
281
|
--input-900: var(--error-900);
|
|
274
282
|
--input-950: var(--error-950);
|
|
275
|
-
@apply input-core;
|
|
276
283
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@import "../theme/jams/base.css";
|
|
2
|
-
@utility
|
|
2
|
+
@utility popover {
|
|
3
3
|
@layer components {
|
|
4
4
|
@apply pointer-events-none invisible fixed inset-0 m-0 grid h-full max-h-none w-full max-w-none items-center justify-items-center bg-transparent p-0 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
5
5
|
|
|
6
|
-
&:not(
|
|
6
|
+
&:not(popover:not([popover]:popover-open)),
|
|
7
7
|
&::backdrop {
|
|
8
8
|
@apply opacity-100 starting:invisible starting:opacity-0 bg-default-600;
|
|
9
9
|
}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
&[popover]:popover-open {
|
|
12
12
|
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.popover-body {
|
|
15
15
|
translate: 0 0;
|
|
16
16
|
scale: 1;
|
|
17
17
|
opacity: 1;
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
@utility
|
|
23
|
+
@utility popover-backdrop {
|
|
24
24
|
@layer components {
|
|
25
25
|
@apply col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent -z-1;
|
|
26
26
|
button {
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
@utility
|
|
32
|
+
@utility popover-body {
|
|
33
33
|
@layer components {
|
|
34
34
|
@apply bg-core-50 text-core-950 rounded-3xl border border-black/60 shadow-xl shadow-black/10 forced-colors:outline col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
@utility
|
|
38
|
+
@utility popover-top {
|
|
39
39
|
@layer components {
|
|
40
40
|
@apply place-items-start;
|
|
41
41
|
|
|
42
|
-
:where(.
|
|
42
|
+
:where(.popover-body) {
|
|
43
43
|
@apply h-auto w-full max-w-none rounded-none;
|
|
44
44
|
max-height: calc(100vh - 5em);
|
|
45
45
|
translate: 0 -100%;
|
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
@utility
|
|
51
|
+
@utility popover-middle {
|
|
52
52
|
@layer components {
|
|
53
53
|
@apply place-items-center;
|
|
54
54
|
|
|
55
|
-
:where(.
|
|
55
|
+
:where(.popover-body) {
|
|
56
56
|
@apply h-auto w-11/12 max-w-[32rem];
|
|
57
57
|
max-height: calc(100vh - 5em);
|
|
58
58
|
translate: 0 2%;
|
|
@@ -61,11 +61,11 @@
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
@utility
|
|
64
|
+
@utility popover-bottom {
|
|
65
65
|
@layer components {
|
|
66
66
|
@apply place-items-end;
|
|
67
67
|
|
|
68
|
-
:where(.
|
|
68
|
+
:where(.popover-body) {
|
|
69
69
|
@apply h-auto w-full max-w-none rounded-none;
|
|
70
70
|
max-height: calc(100vh - 5em);
|
|
71
71
|
translate: 0 100%;
|
|
@@ -74,11 +74,11 @@
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
@utility
|
|
77
|
+
@utility popover-start {
|
|
78
78
|
@layer components {
|
|
79
79
|
@apply place-items-start;
|
|
80
80
|
|
|
81
|
-
:where(.
|
|
81
|
+
:where(.popover-body) {
|
|
82
82
|
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
83
83
|
translate: -100% 0;
|
|
84
84
|
scale: 1;
|
|
@@ -86,11 +86,11 @@
|
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
@utility
|
|
89
|
+
@utility popover-end {
|
|
90
90
|
@layer components {
|
|
91
91
|
@apply place-items-end;
|
|
92
92
|
|
|
93
|
-
:where(.
|
|
93
|
+
:where(.popover-body) {
|
|
94
94
|
@apply h-screen max-h-none w-auto max-w-none rounded-none;
|
|
95
95
|
translate: 100% 0;
|
|
96
96
|
scale: 1;
|
package/src/main.css
CHANGED
|
@@ -41,29 +41,29 @@
|
|
|
41
41
|
--default-900: oklch(0.21 0.006 285.885);
|
|
42
42
|
--default-950: oklch(0.141 0.005 285.823);
|
|
43
43
|
|
|
44
|
-
--primary-50: oklch(
|
|
45
|
-
--primary-100: oklch(
|
|
46
|
-
--primary-200: oklch(
|
|
47
|
-
--primary-300: oklch(
|
|
48
|
-
--primary-400: oklch(
|
|
49
|
-
--primary-500: oklch(
|
|
50
|
-
--primary-600: oklch(
|
|
51
|
-
--primary-700: oklch(
|
|
52
|
-
--primary-800: oklch(
|
|
53
|
-
--primary-900: oklch(
|
|
54
|
-
--primary-950: oklch(
|
|
44
|
+
--primary-50: oklch(96.2% 0.018 272.314);
|
|
45
|
+
--primary-100: oklch(93% 0.034 272.788);
|
|
46
|
+
--primary-200: oklch(87% 0.065 274.039);
|
|
47
|
+
--primary-300: oklch(78.5% 0.115 274.713);
|
|
48
|
+
--primary-400: oklch(70.2% 0.183 293.541);
|
|
49
|
+
--primary-500: oklch(60.6% 0.25 292.717);
|
|
50
|
+
--primary-600: oklch(51.1% 0.262 276.966);
|
|
51
|
+
--primary-700: oklch(45.7% 0.24 277.023);
|
|
52
|
+
--primary-800: oklch(39.8% 0.195 277.366);
|
|
53
|
+
--primary-900: oklch(35.9% 0.144 278.697);
|
|
54
|
+
--primary-950: oklch(25.7% 0.09 281.288);
|
|
55
55
|
|
|
56
|
-
--secondary-50: oklch(
|
|
57
|
-
--secondary-100: oklch(
|
|
58
|
-
--secondary-200: oklch(
|
|
59
|
-
--secondary-300: oklch(
|
|
60
|
-
--secondary-400: oklch(
|
|
61
|
-
--secondary-500: oklch(
|
|
62
|
-
--secondary-600: oklch(
|
|
63
|
-
--secondary-700: oklch(
|
|
64
|
-
--secondary-800: oklch(
|
|
65
|
-
--secondary-900: oklch(
|
|
66
|
-
--secondary-950: oklch(
|
|
56
|
+
--secondary-50: oklch(97.9% 0.021 166.113);
|
|
57
|
+
--secondary-100: oklch(95% 0.052 163.051);
|
|
58
|
+
--secondary-200: oklch(90.5% 0.093 164.15);
|
|
59
|
+
--secondary-300: oklch(84.5% 0.143 164.978);
|
|
60
|
+
--secondary-400: oklch(76.5% 0.177 163.223);
|
|
61
|
+
--secondary-500: oklch(69.6% 0.17 162.48);
|
|
62
|
+
--secondary-600: oklch(59.6% 0.145 163.225);
|
|
63
|
+
--secondary-700: oklch(50.8% 0.118 165.612);
|
|
64
|
+
--secondary-800: oklch(43.2% 0.095 166.913);
|
|
65
|
+
--secondary-900: oklch(37.8% 0.077 168.94);
|
|
66
|
+
--secondary-950: oklch(26.2% 0.051 172.552);
|
|
67
67
|
|
|
68
68
|
--accent-50: oklch(0.969 0.016 293.756);
|
|
69
69
|
--accent-100: oklch(0.943 0.029 294.588);
|