frutjam 1.0.0-beta.0 → 1.1.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 +1 -1
- package/src/components/badge.css +228 -0
- package/src/components/breadcrumb.css +5 -3
- package/src/components/button.css +29 -35
- package/src/components/card.css +2 -0
- package/src/components/divider.css +3 -1
- package/src/components/header.css +1 -0
- package/src/components/sidebar.css +3 -1
- package/src/main.css +1 -0
- package/src/theme/jams/darkberry.css +1 -0
- package/src/theme/jams/snowberry.css +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
|
|
2
|
+
@import "../theme/jams/base.css";
|
|
3
|
+
|
|
4
|
+
@utility badge-xs {
|
|
5
|
+
--badge-inline: 0.5rem;
|
|
6
|
+
--badge-block: 0.125rem;
|
|
7
|
+
--badge-text-size: 0.625rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@utility badge-sm {
|
|
11
|
+
--badge-inline: 0.625rem;
|
|
12
|
+
--badge-block: 0.25rem;
|
|
13
|
+
--badge-text-size: 0.75rem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@utility badge-md {
|
|
17
|
+
--badge-inline: 0.75rem;
|
|
18
|
+
--badge-block: 0.375rem;
|
|
19
|
+
--badge-text-size: 0.875rem;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@utility badge-lg {
|
|
23
|
+
--badge-inline: 0.875rem;
|
|
24
|
+
--badge-block: 0.5rem;
|
|
25
|
+
--badge-text-size: 1rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@utility badge-xl {
|
|
29
|
+
--badge-inline: 1rem;
|
|
30
|
+
--badge-block: 0.625rem;
|
|
31
|
+
--badge-text-size: 1.125rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@utility badge-2xl {
|
|
35
|
+
--badge-inline: 1.125rem;
|
|
36
|
+
--badge-block: 0.75rem;
|
|
37
|
+
--badge-text-size: 1.25rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@utility badge-rounded {
|
|
41
|
+
--badge-radius: calc(infinity * 1px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@utility badge-dashed {
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
outline: 1px dashed light-dark(var(--badge-500), var(--badge-700));
|
|
47
|
+
color: light-dark(var(--badge-700), var(--badge-500));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@utility badge-outline {
|
|
51
|
+
background-color: transparent;
|
|
52
|
+
outline: 1px solid light-dark(var(--badge-500), var(--badge-800));
|
|
53
|
+
color: light-dark(var(--badge-800), var(--badge-200));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@utility badge-soft {
|
|
57
|
+
background-color: light-dark(
|
|
58
|
+
var(--badge-100),
|
|
59
|
+
color-mix(in oklab, var(--badge-900) 10%, transparent)
|
|
60
|
+
);
|
|
61
|
+
color: light-dark(var(--badge-800), var(--badge-400));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@utility badge-ghost {
|
|
65
|
+
background-color: transparent;
|
|
66
|
+
color: light-dark(var(--badge-600), var(--badge-300));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@utility badge {
|
|
70
|
+
@apply gap-2 badge-md;
|
|
71
|
+
|
|
72
|
+
border-radius: var(--badge-radius, var(--radius-badge));
|
|
73
|
+
display: inline-flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
vertical-align: middle;
|
|
77
|
+
text-align: center;
|
|
78
|
+
width: fit-content;
|
|
79
|
+
|
|
80
|
+
padding-inline: var(--badge-inline);
|
|
81
|
+
padding-block: var(--badge-block);
|
|
82
|
+
font-size: var(--badge-text-size);
|
|
83
|
+
|
|
84
|
+
&:where(.badge-square){
|
|
85
|
+
padding-inline: var(--badge-inline);
|
|
86
|
+
padding-block: var(--badge-inline);
|
|
87
|
+
width: var(--badge-block);
|
|
88
|
+
height: var(--badge-block);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* for default badge */
|
|
92
|
+
&:not(
|
|
93
|
+
.badge-primary,
|
|
94
|
+
.badge-secondary,
|
|
95
|
+
.badge-accent,
|
|
96
|
+
.badge-info,
|
|
97
|
+
.badge-success,
|
|
98
|
+
.badge-warning,
|
|
99
|
+
.badge-error
|
|
100
|
+
) {
|
|
101
|
+
background-color: light-dark(var(--badge-200), var(--badge-800));
|
|
102
|
+
color: light-dark(var(--badge-900), var(--badge-50));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* for all badge exclude default badge */
|
|
106
|
+
&:is(
|
|
107
|
+
.badge-primary,
|
|
108
|
+
.badge-secondary,
|
|
109
|
+
.badge-accent,
|
|
110
|
+
.badge-info,
|
|
111
|
+
.badge-success,
|
|
112
|
+
.badge-warning,
|
|
113
|
+
.badge-error
|
|
114
|
+
) {
|
|
115
|
+
background-color: light-dark(var(--badge-700), var(--badge-700));
|
|
116
|
+
color: var(--badge-50);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
--badge-50: var(--default-50);
|
|
120
|
+
--badge-100: var(--default-100);
|
|
121
|
+
--badge-200: var(--default-200);
|
|
122
|
+
--badge-300: var(--default-300);
|
|
123
|
+
--badge-400: var(--default-400);
|
|
124
|
+
--badge-500: var(--default-500);
|
|
125
|
+
--badge-600: var(--default-600);
|
|
126
|
+
--badge-700: var(--default-700);
|
|
127
|
+
--badge-800: var(--default-800);
|
|
128
|
+
--badge-900: var(--default-900);
|
|
129
|
+
--badge-950: var(--default-950);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@utility badge-primary {
|
|
133
|
+
--badge-50: var(--primary-50);
|
|
134
|
+
--badge-100: var(--primary-100);
|
|
135
|
+
--badge-200: var(--primary-200);
|
|
136
|
+
--badge-300: var(--primary-300);
|
|
137
|
+
--badge-400: var(--primary-400);
|
|
138
|
+
--badge-500: var(--primary-500);
|
|
139
|
+
--badge-600: var(--primary-600);
|
|
140
|
+
--badge-700: var(--primary-700);
|
|
141
|
+
--badge-800: var(--primary-800);
|
|
142
|
+
--badge-900: var(--primary-900);
|
|
143
|
+
--badge-950: var(--primary-950);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@utility badge-secondary {
|
|
147
|
+
--badge-50: var(--secondary-50);
|
|
148
|
+
--badge-100: var(--secondary-100);
|
|
149
|
+
--badge-200: var(--secondary-200);
|
|
150
|
+
--badge-300: var(--secondary-300);
|
|
151
|
+
--badge-400: var(--secondary-400);
|
|
152
|
+
--badge-500: var(--secondary-500);
|
|
153
|
+
--badge-600: var(--secondary-600);
|
|
154
|
+
--badge-700: var(--secondary-700);
|
|
155
|
+
--badge-800: var(--secondary-800);
|
|
156
|
+
--badge-900: var(--secondary-900);
|
|
157
|
+
--badge-950: var(--secondary-950);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@utility badge-accent {
|
|
161
|
+
--badge-50: var(--accent-50);
|
|
162
|
+
--badge-100: var(--accent-100);
|
|
163
|
+
--badge-200: var(--accent-200);
|
|
164
|
+
--badge-300: var(--accent-300);
|
|
165
|
+
--badge-400: var(--accent-400);
|
|
166
|
+
--badge-500: var(--accent-500);
|
|
167
|
+
--badge-600: var(--accent-600);
|
|
168
|
+
--badge-700: var(--accent-700);
|
|
169
|
+
--badge-800: var(--accent-800);
|
|
170
|
+
--badge-900: var(--accent-900);
|
|
171
|
+
--badge-950: var(--accent-950);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@utility badge-info {
|
|
175
|
+
--badge-50: var(--info-50);
|
|
176
|
+
--badge-100: var(--info-100);
|
|
177
|
+
--badge-200: var(--info-200);
|
|
178
|
+
--badge-300: var(--info-300);
|
|
179
|
+
--badge-400: var(--info-400);
|
|
180
|
+
--badge-500: var(--info-500);
|
|
181
|
+
--badge-600: var(--info-600);
|
|
182
|
+
--badge-700: var(--info-700);
|
|
183
|
+
--badge-800: var(--info-800);
|
|
184
|
+
--badge-900: var(--info-900);
|
|
185
|
+
--badge-950: var(--info-950);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@utility badge-success {
|
|
189
|
+
--badge-50: var(--success-50);
|
|
190
|
+
--badge-100: var(--success-100);
|
|
191
|
+
--badge-200: var(--success-200);
|
|
192
|
+
--badge-300: var(--success-300);
|
|
193
|
+
--badge-400: var(--success-400);
|
|
194
|
+
--badge-500: var(--success-500);
|
|
195
|
+
--badge-600: var(--success-600);
|
|
196
|
+
--badge-700: var(--success-700);
|
|
197
|
+
--badge-800: var(--success-800);
|
|
198
|
+
--badge-900: var(--success-900);
|
|
199
|
+
--badge-950: var(--success-950);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@utility badge-warning {
|
|
203
|
+
--badge-50: var(--warning-50);
|
|
204
|
+
--badge-100: var(--warning-100);
|
|
205
|
+
--badge-200: var(--warning-200);
|
|
206
|
+
--badge-300: var(--warning-300);
|
|
207
|
+
--badge-400: var(--warning-400);
|
|
208
|
+
--badge-500: var(--warning-500);
|
|
209
|
+
--badge-600: var(--warning-600);
|
|
210
|
+
--badge-700: var(--warning-700);
|
|
211
|
+
--badge-800: var(--warning-800);
|
|
212
|
+
--badge-900: var(--warning-900);
|
|
213
|
+
--badge-950: var(--warning-950);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@utility badge-error {
|
|
217
|
+
--badge-50: var(--error-50);
|
|
218
|
+
--badge-100: var(--error-100);
|
|
219
|
+
--badge-200: var(--error-200);
|
|
220
|
+
--badge-300: var(--error-300);
|
|
221
|
+
--badge-400: var(--error-400);
|
|
222
|
+
--badge-500: var(--error-500);
|
|
223
|
+
--badge-600: var(--error-600);
|
|
224
|
+
--badge-700: var(--error-700);
|
|
225
|
+
--badge-800: var(--error-800);
|
|
226
|
+
--badge-900: var(--error-900);
|
|
227
|
+
--badge-950: var(--error-950);
|
|
228
|
+
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "../theme/jams/base.css";
|
|
2
|
+
|
|
1
3
|
@utility breadcrumb {
|
|
2
4
|
@apply py-2;
|
|
3
5
|
|
|
@@ -13,7 +15,7 @@
|
|
|
13
15
|
white-space: nowrap;
|
|
14
16
|
|
|
15
17
|
/* Automatically hide default separator if a custom separator is used */
|
|
16
|
-
.breadcrumb-item {
|
|
18
|
+
.breadcrumb-item, li {
|
|
17
19
|
display: flex;
|
|
18
20
|
align-items: center;
|
|
19
21
|
|
|
@@ -43,7 +45,7 @@
|
|
|
43
45
|
}
|
|
44
46
|
|
|
45
47
|
/* Only show default separator if NOT preceded by .breadcrumb-separator */
|
|
46
|
-
& + .breadcrumb-item::before {
|
|
48
|
+
& + .breadcrumb-item::before, & + li::before {
|
|
47
49
|
content: "";
|
|
48
50
|
@apply mr-3 ml-2 block h-1.5 w-1.5 opacity-40;
|
|
49
51
|
rotate: 45deg;
|
|
@@ -52,7 +54,7 @@
|
|
|
52
54
|
background-color: #0000;
|
|
53
55
|
}
|
|
54
56
|
|
|
55
|
-
[dir="rtl"] & + .breadcrumb-item::before {
|
|
57
|
+
[dir="rtl"] & + .breadcrumb-item::before, [dir="rtl"] & + li::before {
|
|
56
58
|
rotate: -135deg;
|
|
57
59
|
}
|
|
58
60
|
|
|
@@ -1,79 +1,66 @@
|
|
|
1
1
|
@import "../theme/jams/base.css";
|
|
2
2
|
@import "../theme/animation/wiggle.css";
|
|
3
3
|
|
|
4
|
-
@utility btn-size {
|
|
5
|
-
padding-inline: var(--btn-inline);
|
|
6
|
-
padding-block: var(--btn-block);
|
|
7
|
-
font-size: var(--btn-text-size);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
4
|
@utility btn-xs {
|
|
11
5
|
--btn-inline: 0.875rem;
|
|
12
6
|
--btn-block: 0.375rem;
|
|
13
7
|
--btn-text-size: 0.75rem;
|
|
14
|
-
@apply btn-size;
|
|
15
8
|
}
|
|
16
9
|
|
|
17
10
|
@utility btn-sm {
|
|
18
11
|
--btn-inline: 1rem;
|
|
19
12
|
--btn-block: 0.5rem;
|
|
20
13
|
--btn-text-size: 0.875rem;
|
|
21
|
-
@apply btn-size;
|
|
22
14
|
}
|
|
23
15
|
|
|
24
16
|
@utility btn-md {
|
|
25
17
|
--btn-inline: 1.125rem;
|
|
26
18
|
--btn-block: 0.625rem;
|
|
27
19
|
--btn-text-size: 1rem;
|
|
28
|
-
@apply btn-size;
|
|
29
20
|
}
|
|
30
21
|
|
|
31
22
|
@utility btn-lg {
|
|
32
23
|
--btn-inline: 1.25rem;
|
|
33
24
|
--btn-block: 0.75rem;
|
|
34
25
|
--btn-text-size: 1.125rem;
|
|
35
|
-
@apply btn-size;
|
|
36
26
|
}
|
|
37
27
|
|
|
38
28
|
@utility btn-xl {
|
|
39
29
|
--btn-inline: 1.375rem;
|
|
40
30
|
--btn-block: 0.875rem;
|
|
41
31
|
--btn-text-size: 1.25rem;
|
|
42
|
-
@apply btn-size;
|
|
43
32
|
}
|
|
44
33
|
|
|
45
34
|
@utility btn-2xl {
|
|
46
35
|
--btn-inline: 1.5rem;
|
|
47
36
|
--btn-block: 1rem;
|
|
48
|
-
--btn-text-size: 1.
|
|
49
|
-
@apply btn-size;
|
|
37
|
+
--btn-text-size: 1.375rem;
|
|
50
38
|
}
|
|
51
39
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
40
|
+
/*btn-circle deprecated*/
|
|
41
|
+
@utility btn-circle {
|
|
42
|
+
--btn-radius: calc(infinity * 1px);
|
|
55
43
|
}
|
|
56
44
|
|
|
57
|
-
@utility btn-
|
|
58
|
-
|
|
59
|
-
padding-inline: var(--btn-block);
|
|
60
|
-
padding-block: var(--btn-block);
|
|
45
|
+
@utility btn-rounded {
|
|
46
|
+
--btn-radius: calc(infinity * 1px);
|
|
61
47
|
}
|
|
62
48
|
|
|
63
49
|
@utility btn-wide {
|
|
64
|
-
|
|
50
|
+
--btn-max-width: var(--container-xs);
|
|
51
|
+
--btn-width: 100%;
|
|
65
52
|
}
|
|
66
53
|
|
|
67
54
|
@utility btn-block {
|
|
68
|
-
|
|
55
|
+
--btn-width: 100%;
|
|
56
|
+
--btn-display: block;
|
|
69
57
|
}
|
|
70
58
|
|
|
71
59
|
@utility btn-link-active {
|
|
72
|
-
background: transparent;
|
|
60
|
+
background-color: transparent;
|
|
73
61
|
color: light-dark(var(--btn-800), var(--btn-500));
|
|
74
62
|
text-decoration: underline;
|
|
75
63
|
text-underline-offset: 4px;
|
|
76
|
-
cursor: pointer;
|
|
77
64
|
}
|
|
78
65
|
|
|
79
66
|
@utility btn-ghost-active {
|
|
@@ -148,7 +135,7 @@
|
|
|
148
135
|
|
|
149
136
|
@utility btn-dashed {
|
|
150
137
|
&:not(.btn-active) {
|
|
151
|
-
background: transparent;
|
|
138
|
+
background-color: transparent;
|
|
152
139
|
outline: 1px dashed light-dark(var(--btn-500), var(--btn-700));
|
|
153
140
|
color: light-dark(var(--btn-700), var(--btn-500));
|
|
154
141
|
}
|
|
@@ -156,7 +143,7 @@
|
|
|
156
143
|
|
|
157
144
|
@utility btn-outline {
|
|
158
145
|
&:not(.btn-active) {
|
|
159
|
-
background: transparent;
|
|
146
|
+
background-color: transparent;
|
|
160
147
|
outline: 1px solid light-dark(var(--btn-500), var(--btn-800));
|
|
161
148
|
color: light-dark(var(--btn-800), var(--btn-200));
|
|
162
149
|
}
|
|
@@ -174,27 +161,25 @@
|
|
|
174
161
|
|
|
175
162
|
@utility btn-ghost {
|
|
176
163
|
&:not(.btn-active) {
|
|
177
|
-
background: transparent;
|
|
164
|
+
background-color: transparent;
|
|
178
165
|
color: light-dark(var(--btn-600), var(--btn-300));
|
|
179
166
|
}
|
|
180
167
|
}
|
|
181
168
|
|
|
182
169
|
@utility btn-link {
|
|
183
170
|
&:not(.btn-active) {
|
|
184
|
-
background: transparent;
|
|
171
|
+
background-color: transparent;
|
|
185
172
|
color: light-dark(var(--btn-700), var(--btn-400));
|
|
186
173
|
}
|
|
187
174
|
}
|
|
188
175
|
|
|
189
176
|
@utility btn {
|
|
190
177
|
@apply btn-md text-shadow-xs/5 gap-1.5 leading-normal;
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
background-color 0.2s ease-out,
|
|
195
|
-
opacity 0.1s ease-out;
|
|
178
|
+
width: var(--btn-width);
|
|
179
|
+
max-width: var(--btn-max-width);
|
|
180
|
+
transition: translate 0.2s ease-out, visibility 0.2s allow-discrete, background-color 0.2s ease-out, opacity 0.1s ease-out;
|
|
196
181
|
position: relative;
|
|
197
|
-
display: inline-flex;
|
|
182
|
+
display: var(--btn-display, inline-flex);
|
|
198
183
|
flex-shrink: 0;
|
|
199
184
|
align-items: center;
|
|
200
185
|
justify-content: center;
|
|
@@ -203,11 +188,20 @@
|
|
|
203
188
|
vertical-align: middle;
|
|
204
189
|
font-weight: 500;
|
|
205
190
|
text-align: center;
|
|
206
|
-
border-radius: var(--radius-btn);
|
|
191
|
+
border-radius: var(--btn-radius, var(--radius-btn));
|
|
207
192
|
overflow: hidden;
|
|
208
193
|
cursor: pointer;
|
|
209
194
|
box-sizing: border-box;
|
|
210
195
|
|
|
196
|
+
padding-inline: var(--btn-inline);
|
|
197
|
+
padding-block: var(--btn-block);
|
|
198
|
+
font-size: var(--btn-text-size);
|
|
199
|
+
|
|
200
|
+
&:where(.btn-square){
|
|
201
|
+
padding-inline: var(--btn-block);
|
|
202
|
+
padding-block: var(--btn-block);
|
|
203
|
+
}
|
|
204
|
+
|
|
211
205
|
/* for default btn */
|
|
212
206
|
&:not(
|
|
213
207
|
.btn-primary,
|
package/src/components/card.css
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "../theme/jams/base.css";
|
|
2
|
+
|
|
1
3
|
@utility divider-x {
|
|
2
4
|
&:not(:empty) {
|
|
3
5
|
@apply gap-x-2;
|
|
@@ -102,7 +104,7 @@
|
|
|
102
104
|
}
|
|
103
105
|
|
|
104
106
|
@utility divider {
|
|
105
|
-
@apply divider-x-solid flex items-center justify-center h-
|
|
107
|
+
@apply divider-x-solid flex items-center justify-center h-auto;
|
|
106
108
|
|
|
107
109
|
&::before, &::after {
|
|
108
110
|
@apply content-[''];
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
@import "../theme/jams/base.css";
|
|
2
|
+
|
|
1
3
|
@utility sidebar {
|
|
2
|
-
@apply p-6 border-x border-core-200 dark:border-core-900 max-h-dvh sticky overflow-y-auto gap-
|
|
4
|
+
@apply p-6 border-x border-core-200 dark:border-core-900 max-h-dvh sticky overflow-y-auto gap-5;
|
|
3
5
|
background-color: light-dark(
|
|
4
6
|
var(--core-0),
|
|
5
7
|
var(--core-1000)
|
package/src/main.css
CHANGED