frutjam 0.14.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 +3 -3
- package/src/components/badge.css +228 -0
- package/src/components/breadcrumb.css +74 -0
- package/src/components/button.css +86 -56
- package/src/components/card.css +2 -0
- package/src/components/checkbox.css +110 -154
- package/src/components/divider.css +5 -13
- package/src/components/header.css +1 -0
- package/src/components/input.css +20 -13
- package/src/components/popover.css +15 -15
- package/src/components/sidebar.css +3 -1
- package/src/main.css +2 -0
- package/src/theme/jams/darkberry.css +1 -0
- package/src/theme/jams/snowberry.css +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.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,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
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@import "../theme/jams/base.css";
|
|
2
|
+
|
|
3
|
+
@utility breadcrumb {
|
|
4
|
+
@apply py-2;
|
|
5
|
+
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
overflow-x: auto;
|
|
8
|
+
|
|
9
|
+
& > .breadcrumb-list,
|
|
10
|
+
& > ol,
|
|
11
|
+
& > ul {
|
|
12
|
+
display: flex;
|
|
13
|
+
min-height: min-content;
|
|
14
|
+
align-items: center;
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
|
|
17
|
+
/* Automatically hide default separator if a custom separator is used */
|
|
18
|
+
.breadcrumb-item, li {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
|
|
22
|
+
& > .breadcrumb-link,
|
|
23
|
+
& > .breadcrumb-current,
|
|
24
|
+
& > a,
|
|
25
|
+
& > span {
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
@apply gap-2;
|
|
29
|
+
|
|
30
|
+
@media (hover: hover) {
|
|
31
|
+
&:hover:not([aria-current="page"]):not(.breadcrumb-current) {
|
|
32
|
+
@apply underline underline-offset-4;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:focus {
|
|
38
|
+
@apply outline-hidden;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:focus-visible {
|
|
42
|
+
outline: 2px solid currentColor;
|
|
43
|
+
outline-offset: 2px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Only show default separator if NOT preceded by .breadcrumb-separator */
|
|
48
|
+
& + .breadcrumb-item::before, & + li::before {
|
|
49
|
+
content: "";
|
|
50
|
+
@apply mr-3 ml-2 block h-1.5 w-1.5 opacity-40;
|
|
51
|
+
rotate: 45deg;
|
|
52
|
+
border-top: 1px solid;
|
|
53
|
+
border-right: 1px solid;
|
|
54
|
+
background-color: #0000;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[dir="rtl"] & + .breadcrumb-item::before, [dir="rtl"] & + li::before {
|
|
58
|
+
rotate: -135deg;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Remove default separator when preceded by custom .breadcrumb-separator */
|
|
62
|
+
.breadcrumb-separator + &::before {
|
|
63
|
+
content: none;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Slotted custom separator */
|
|
68
|
+
.breadcrumb-separator {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
@apply mx-2 text-sm text-gray-500;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -1,92 +1,93 @@
|
|
|
1
1
|
@import "../theme/jams/base.css";
|
|
2
2
|
@import "../theme/animation/wiggle.css";
|
|
3
3
|
|
|
4
|
-
@utility btn-size {
|
|
5
|
-
@layer components {
|
|
6
|
-
padding-inline: var(--btn-inline);
|
|
7
|
-
padding-block: var(--btn-block);
|
|
8
|
-
font-size: var(--btn-text-size);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
4
|
@utility btn-xs {
|
|
13
5
|
--btn-inline: 0.875rem;
|
|
14
6
|
--btn-block: 0.375rem;
|
|
15
7
|
--btn-text-size: 0.75rem;
|
|
16
|
-
@apply btn-size;
|
|
17
8
|
}
|
|
18
9
|
|
|
19
10
|
@utility btn-sm {
|
|
20
11
|
--btn-inline: 1rem;
|
|
21
12
|
--btn-block: 0.5rem;
|
|
22
13
|
--btn-text-size: 0.875rem;
|
|
23
|
-
@apply btn-size;
|
|
24
14
|
}
|
|
25
15
|
|
|
26
16
|
@utility btn-md {
|
|
27
17
|
--btn-inline: 1.125rem;
|
|
28
18
|
--btn-block: 0.625rem;
|
|
29
19
|
--btn-text-size: 1rem;
|
|
30
|
-
@apply btn-size;
|
|
31
20
|
}
|
|
32
21
|
|
|
33
22
|
@utility btn-lg {
|
|
34
23
|
--btn-inline: 1.25rem;
|
|
35
24
|
--btn-block: 0.75rem;
|
|
36
|
-
--btn-text-size:
|
|
37
|
-
@apply btn-size;
|
|
25
|
+
--btn-text-size: 1.125rem;
|
|
38
26
|
}
|
|
39
27
|
|
|
40
28
|
@utility btn-xl {
|
|
41
29
|
--btn-inline: 1.375rem;
|
|
42
30
|
--btn-block: 0.875rem;
|
|
43
|
-
--btn-text-size:
|
|
44
|
-
@apply btn-size;
|
|
31
|
+
--btn-text-size: 1.25rem;
|
|
45
32
|
}
|
|
46
33
|
|
|
47
34
|
@utility btn-2xl {
|
|
48
35
|
--btn-inline: 1.5rem;
|
|
49
36
|
--btn-block: 1rem;
|
|
50
|
-
--btn-text-size: 1.
|
|
51
|
-
@apply btn-size;
|
|
37
|
+
--btn-text-size: 1.375rem;
|
|
52
38
|
}
|
|
53
39
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
40
|
+
/*btn-circle deprecated*/
|
|
41
|
+
@utility btn-circle {
|
|
42
|
+
--btn-radius: calc(infinity * 1px);
|
|
57
43
|
}
|
|
58
44
|
|
|
59
|
-
@utility btn-
|
|
60
|
-
|
|
61
|
-
padding-inline: var(--btn-block);
|
|
62
|
-
padding-block: var(--btn-block);
|
|
45
|
+
@utility btn-rounded {
|
|
46
|
+
--btn-radius: calc(infinity * 1px);
|
|
63
47
|
}
|
|
64
48
|
|
|
65
49
|
@utility btn-wide {
|
|
66
|
-
|
|
50
|
+
--btn-max-width: var(--container-xs);
|
|
51
|
+
--btn-width: 100%;
|
|
67
52
|
}
|
|
68
53
|
|
|
69
54
|
@utility btn-block {
|
|
70
|
-
|
|
55
|
+
--btn-width: 100%;
|
|
56
|
+
--btn-display: block;
|
|
71
57
|
}
|
|
72
58
|
|
|
73
59
|
@utility btn-link-active {
|
|
74
|
-
background: transparent;
|
|
60
|
+
background-color: transparent;
|
|
75
61
|
color: light-dark(var(--btn-800), var(--btn-500));
|
|
76
62
|
text-decoration: underline;
|
|
77
63
|
text-underline-offset: 4px;
|
|
78
|
-
cursor: pointer;
|
|
79
64
|
}
|
|
80
65
|
|
|
81
66
|
@utility btn-ghost-active {
|
|
82
67
|
/* for default btn */
|
|
83
|
-
&:
|
|
68
|
+
&:not(
|
|
69
|
+
.btn-primary,
|
|
70
|
+
.btn-secondary,
|
|
71
|
+
.btn-accent,
|
|
72
|
+
.btn-info,
|
|
73
|
+
.btn-success,
|
|
74
|
+
.btn-warning,
|
|
75
|
+
.btn-error
|
|
76
|
+
) {
|
|
84
77
|
background-color: light-dark(var(--btn-200), var(--btn-900));
|
|
85
78
|
color: light-dark(var(--btn-950), var(--btn-100));
|
|
86
79
|
}
|
|
87
80
|
|
|
88
81
|
/* for all btn exclude default btn */
|
|
89
|
-
&:
|
|
82
|
+
&:is(
|
|
83
|
+
.btn-primary,
|
|
84
|
+
.btn-secondary,
|
|
85
|
+
.btn-accent,
|
|
86
|
+
.btn-info,
|
|
87
|
+
.btn-success,
|
|
88
|
+
.btn-warning,
|
|
89
|
+
.btn-error
|
|
90
|
+
) {
|
|
90
91
|
background-color: light-dark(var(--btn-700), var(--btn-900));
|
|
91
92
|
color: light-dark(var(--btn-50), var(--btn-100));
|
|
92
93
|
}
|
|
@@ -103,13 +104,29 @@
|
|
|
103
104
|
outline-style: none;
|
|
104
105
|
|
|
105
106
|
/* for default btn */
|
|
106
|
-
&:
|
|
107
|
+
&:not(
|
|
108
|
+
.btn-primary,
|
|
109
|
+
.btn-secondary,
|
|
110
|
+
.btn-accent,
|
|
111
|
+
.btn-info,
|
|
112
|
+
.btn-success,
|
|
113
|
+
.btn-warning,
|
|
114
|
+
.btn-error
|
|
115
|
+
) {
|
|
107
116
|
background-color: light-dark(var(--btn-300), var(--btn-900));
|
|
108
117
|
color: light-dark(var(--btn-950), var(--btn-100));
|
|
109
118
|
}
|
|
110
119
|
|
|
111
120
|
/* for all btn exclude default btn */
|
|
112
|
-
&:
|
|
121
|
+
&:is(
|
|
122
|
+
.btn-primary,
|
|
123
|
+
.btn-secondary,
|
|
124
|
+
.btn-accent,
|
|
125
|
+
.btn-info,
|
|
126
|
+
.btn-success,
|
|
127
|
+
.btn-warning,
|
|
128
|
+
.btn-error
|
|
129
|
+
) {
|
|
113
130
|
background-color: light-dark(var(--btn-800), var(--btn-800));
|
|
114
131
|
color: light-dark(var(--btn-50), var(--btn-100));
|
|
115
132
|
}
|
|
@@ -118,7 +135,7 @@
|
|
|
118
135
|
|
|
119
136
|
@utility btn-dashed {
|
|
120
137
|
&:not(.btn-active) {
|
|
121
|
-
background: transparent;
|
|
138
|
+
background-color: transparent;
|
|
122
139
|
outline: 1px dashed light-dark(var(--btn-500), var(--btn-700));
|
|
123
140
|
color: light-dark(var(--btn-700), var(--btn-500));
|
|
124
141
|
}
|
|
@@ -126,7 +143,7 @@
|
|
|
126
143
|
|
|
127
144
|
@utility btn-outline {
|
|
128
145
|
&:not(.btn-active) {
|
|
129
|
-
background: transparent;
|
|
146
|
+
background-color: transparent;
|
|
130
147
|
outline: 1px solid light-dark(var(--btn-500), var(--btn-800));
|
|
131
148
|
color: light-dark(var(--btn-800), var(--btn-200));
|
|
132
149
|
}
|
|
@@ -144,27 +161,25 @@
|
|
|
144
161
|
|
|
145
162
|
@utility btn-ghost {
|
|
146
163
|
&:not(.btn-active) {
|
|
147
|
-
background: transparent;
|
|
164
|
+
background-color: transparent;
|
|
148
165
|
color: light-dark(var(--btn-600), var(--btn-300));
|
|
149
166
|
}
|
|
150
167
|
}
|
|
151
168
|
|
|
152
169
|
@utility btn-link {
|
|
153
170
|
&:not(.btn-active) {
|
|
154
|
-
background: transparent;
|
|
171
|
+
background-color: transparent;
|
|
155
172
|
color: light-dark(var(--btn-700), var(--btn-400));
|
|
156
173
|
}
|
|
157
174
|
}
|
|
158
175
|
|
|
159
|
-
@utility btn
|
|
176
|
+
@utility btn {
|
|
160
177
|
@apply btn-md text-shadow-xs/5 gap-1.5 leading-normal;
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
background-color 0.2s ease-out,
|
|
165
|
-
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;
|
|
166
181
|
position: relative;
|
|
167
|
-
display: inline-flex;
|
|
182
|
+
display: var(--btn-display, inline-flex);
|
|
168
183
|
flex-shrink: 0;
|
|
169
184
|
align-items: center;
|
|
170
185
|
justify-content: center;
|
|
@@ -173,19 +188,44 @@
|
|
|
173
188
|
vertical-align: middle;
|
|
174
189
|
font-weight: 500;
|
|
175
190
|
text-align: center;
|
|
176
|
-
border-radius: var(--radius-btn);
|
|
191
|
+
border-radius: var(--btn-radius, var(--radius-btn));
|
|
177
192
|
overflow: hidden;
|
|
178
193
|
cursor: pointer;
|
|
179
194
|
box-sizing: border-box;
|
|
180
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
|
+
|
|
181
205
|
/* for default btn */
|
|
182
|
-
&:
|
|
206
|
+
&:not(
|
|
207
|
+
.btn-primary,
|
|
208
|
+
.btn-secondary,
|
|
209
|
+
.btn-accent,
|
|
210
|
+
.btn-info,
|
|
211
|
+
.btn-success,
|
|
212
|
+
.btn-warning,
|
|
213
|
+
.btn-error
|
|
214
|
+
) {
|
|
183
215
|
background-color: light-dark(var(--btn-200), var(--btn-800));
|
|
184
216
|
color: light-dark(var(--btn-900), var(--btn-50));
|
|
185
217
|
}
|
|
186
218
|
|
|
187
219
|
/* for all btn exclude default btn */
|
|
188
|
-
&:
|
|
220
|
+
&:is(
|
|
221
|
+
.btn-primary,
|
|
222
|
+
.btn-secondary,
|
|
223
|
+
.btn-accent,
|
|
224
|
+
.btn-info,
|
|
225
|
+
.btn-success,
|
|
226
|
+
.btn-warning,
|
|
227
|
+
.btn-error
|
|
228
|
+
) {
|
|
189
229
|
background-color: light-dark(var(--btn-700), var(--btn-700));
|
|
190
230
|
color: var(--btn-50);
|
|
191
231
|
}
|
|
@@ -211,9 +251,7 @@
|
|
|
211
251
|
@apply btn-active;
|
|
212
252
|
}
|
|
213
253
|
}
|
|
214
|
-
}
|
|
215
254
|
|
|
216
|
-
@utility btn {
|
|
217
255
|
--btn-50: var(--default-50);
|
|
218
256
|
--btn-100: var(--default-100);
|
|
219
257
|
--btn-200: var(--default-200);
|
|
@@ -225,7 +263,6 @@
|
|
|
225
263
|
--btn-800: var(--default-800);
|
|
226
264
|
--btn-900: var(--default-900);
|
|
227
265
|
--btn-950: var(--default-950);
|
|
228
|
-
@apply btn-core;
|
|
229
266
|
}
|
|
230
267
|
|
|
231
268
|
@utility btn-primary {
|
|
@@ -240,7 +277,6 @@
|
|
|
240
277
|
--btn-800: var(--primary-800);
|
|
241
278
|
--btn-900: var(--primary-900);
|
|
242
279
|
--btn-950: var(--primary-950);
|
|
243
|
-
@apply btn-core;
|
|
244
280
|
}
|
|
245
281
|
|
|
246
282
|
@utility btn-secondary {
|
|
@@ -255,7 +291,6 @@
|
|
|
255
291
|
--btn-800: var(--secondary-800);
|
|
256
292
|
--btn-900: var(--secondary-900);
|
|
257
293
|
--btn-950: var(--secondary-950);
|
|
258
|
-
@apply btn-core;
|
|
259
294
|
}
|
|
260
295
|
|
|
261
296
|
@utility btn-accent {
|
|
@@ -270,7 +305,6 @@
|
|
|
270
305
|
--btn-800: var(--accent-800);
|
|
271
306
|
--btn-900: var(--accent-900);
|
|
272
307
|
--btn-950: var(--accent-950);
|
|
273
|
-
@apply btn-core;
|
|
274
308
|
}
|
|
275
309
|
|
|
276
310
|
@utility btn-info {
|
|
@@ -285,7 +319,6 @@
|
|
|
285
319
|
--btn-800: var(--info-800);
|
|
286
320
|
--btn-900: var(--info-900);
|
|
287
321
|
--btn-950: var(--info-950);
|
|
288
|
-
@apply btn-core;
|
|
289
322
|
}
|
|
290
323
|
|
|
291
324
|
@utility btn-success {
|
|
@@ -300,7 +333,6 @@
|
|
|
300
333
|
--btn-800: var(--success-800);
|
|
301
334
|
--btn-900: var(--success-900);
|
|
302
335
|
--btn-950: var(--success-950);
|
|
303
|
-
@apply btn-core;
|
|
304
336
|
}
|
|
305
337
|
|
|
306
338
|
@utility btn-warning {
|
|
@@ -315,7 +347,6 @@
|
|
|
315
347
|
--btn-800: var(--warning-800);
|
|
316
348
|
--btn-900: var(--warning-900);
|
|
317
349
|
--btn-950: var(--warning-950);
|
|
318
|
-
@apply btn-core;
|
|
319
350
|
}
|
|
320
351
|
|
|
321
352
|
@utility btn-error {
|
|
@@ -330,5 +361,4 @@
|
|
|
330
361
|
--btn-800: var(--error-800);
|
|
331
362
|
--btn-900: var(--error-900);
|
|
332
363
|
--btn-950: var(--error-950);
|
|
333
|
-
@apply btn-core;
|
|
334
364
|
}
|
package/src/components/card.css
CHANGED
|
@@ -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
|
+
}
|
|
@@ -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;
|
|
@@ -101,15 +103,13 @@
|
|
|
101
103
|
}
|
|
102
104
|
}
|
|
103
105
|
|
|
104
|
-
@utility divider
|
|
105
|
-
@apply divider-x-solid flex items-center justify-center h-
|
|
106
|
+
@utility divider {
|
|
107
|
+
@apply divider-x-solid flex items-center justify-center h-auto;
|
|
106
108
|
|
|
107
109
|
&::before, &::after {
|
|
108
110
|
@apply content-[''];
|
|
109
111
|
}
|
|
110
|
-
}
|
|
111
112
|
|
|
112
|
-
@utility divider {
|
|
113
113
|
--divider-50: var(--default-50);
|
|
114
114
|
--divider-100: var(--default-100);
|
|
115
115
|
--divider-200: var(--default-200);
|
|
@@ -121,8 +121,7 @@
|
|
|
121
121
|
--divider-800: var(--default-800);
|
|
122
122
|
--divider-900: var(--default-900);
|
|
123
123
|
--divider-950: var(--default-950);
|
|
124
|
-
|
|
125
|
-
}
|
|
124
|
+
}
|
|
126
125
|
|
|
127
126
|
@utility divider-primary {
|
|
128
127
|
--divider-50: var(--primary-50);
|
|
@@ -136,7 +135,6 @@
|
|
|
136
135
|
--divider-800: var(--primary-800);
|
|
137
136
|
--divider-900: var(--primary-900);
|
|
138
137
|
--divider-950: var(--primary-950);
|
|
139
|
-
@apply divider-core;
|
|
140
138
|
}
|
|
141
139
|
|
|
142
140
|
@utility divider-secondary {
|
|
@@ -151,7 +149,6 @@
|
|
|
151
149
|
--divider-800: var(--secondary-800);
|
|
152
150
|
--divider-900: var(--secondary-900);
|
|
153
151
|
--divider-950: var(--secondary-950);
|
|
154
|
-
@apply divider-core;
|
|
155
152
|
}
|
|
156
153
|
|
|
157
154
|
@utility divider-accent {
|
|
@@ -166,7 +163,6 @@
|
|
|
166
163
|
--divider-800: var(--accent-800);
|
|
167
164
|
--divider-900: var(--accent-900);
|
|
168
165
|
--divider-950: var(--accent-950);
|
|
169
|
-
@apply divider-core;
|
|
170
166
|
}
|
|
171
167
|
|
|
172
168
|
@utility divider-info {
|
|
@@ -181,7 +177,6 @@
|
|
|
181
177
|
--divider-800: var(--info-800);
|
|
182
178
|
--divider-900: var(--info-900);
|
|
183
179
|
--divider-950: var(--info-950);
|
|
184
|
-
@apply divider-core;
|
|
185
180
|
}
|
|
186
181
|
|
|
187
182
|
@utility divider-success {
|
|
@@ -196,7 +191,6 @@
|
|
|
196
191
|
--divider-800: var(--success-800);
|
|
197
192
|
--divider-900: var(--success-900);
|
|
198
193
|
--divider-950: var(--success-950);
|
|
199
|
-
@apply divider-core;
|
|
200
194
|
}
|
|
201
195
|
|
|
202
196
|
@utility divider-warning {
|
|
@@ -211,7 +205,6 @@
|
|
|
211
205
|
--divider-800: var(--warning-800);
|
|
212
206
|
--divider-900: var(--warning-900);
|
|
213
207
|
--divider-950: var(--warning-950);
|
|
214
|
-
@apply divider-core;
|
|
215
208
|
}
|
|
216
209
|
|
|
217
210
|
@utility divider-error {
|
|
@@ -226,5 +219,4 @@
|
|
|
226
219
|
--divider-800: var(--error-800);
|
|
227
220
|
--divider-900: var(--error-900);
|
|
228
221
|
--divider-950: var(--error-950);
|
|
229
|
-
@apply divider-core;
|
|
230
222
|
}
|
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;
|
|
@@ -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