frutjam 0.7.0-beta.4 → 0.8.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 +4 -4
- package/src/components/button.css +249 -315
- package/src/components/divider.css +122 -175
- package/src/components/modal.css +168 -43
- package/src/theme/skins/base.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "frutjam",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0-beta.0",
|
|
4
4
|
"description": "A utility-first CSS framework UI Library",
|
|
5
5
|
"main": "./dist/frutjam.css",
|
|
6
6
|
"browser": "dist/frutjam.css",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"url": "https://github.com/nezanuha/frutjam/issues"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tailwindcss/postcss": "^4.1.
|
|
41
|
-
"tailwindcss": "^4.1.
|
|
40
|
+
"@tailwindcss/postcss": "^4.1.5",
|
|
41
|
+
"tailwindcss": "^4.1.5"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"css-loader": "^7.1.2",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
51
51
|
"string-replace-loader": "^3.1.0",
|
|
52
52
|
"style-loader": "^4.0.0",
|
|
53
|
-
"webpack": "^5.99.
|
|
53
|
+
"webpack": "^5.99.8",
|
|
54
54
|
"webpack-cli": "^6.0.1",
|
|
55
55
|
"webpack-dev-server": "^5.2.1"
|
|
56
56
|
}
|
|
@@ -10,404 +10,338 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
@utility btn-xs {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
@
|
|
17
|
-
--btn-inline: 0.875rem;
|
|
18
|
-
--btn-block: 0.375rem;
|
|
19
|
-
--btn-text-size: 0.75rem;
|
|
20
|
-
/* @apply px-3.5 py-1.5 text-xs; */
|
|
21
|
-
}
|
|
13
|
+
--btn-inline: 0.875rem;
|
|
14
|
+
--btn-block: 0.375rem;
|
|
15
|
+
--btn-text-size: 0.75rem;
|
|
16
|
+
@apply btn-size;
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
@utility btn-sm {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
@
|
|
29
|
-
--btn-inline: 1rem;
|
|
30
|
-
--btn-block: 0.5rem;
|
|
31
|
-
--btn-text-size: 0.875rem;
|
|
32
|
-
/* @apply px-4 py-2 text-sm; */
|
|
33
|
-
}
|
|
20
|
+
--btn-inline: 1rem;
|
|
21
|
+
--btn-block: 0.5rem;
|
|
22
|
+
--btn-text-size: 0.875rem;
|
|
23
|
+
@apply btn-size;
|
|
34
24
|
}
|
|
35
25
|
|
|
36
26
|
@utility btn-md {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
@
|
|
41
|
-
--btn-inline: 1.125rem;
|
|
42
|
-
--btn-block: 0.625rem;
|
|
43
|
-
--btn-text-size: 1rem;
|
|
44
|
-
/* @apply px-4.5 py-2.5 text-base; */
|
|
45
|
-
}
|
|
27
|
+
--btn-inline: 1.125rem;
|
|
28
|
+
--btn-block: 0.625rem;
|
|
29
|
+
--btn-text-size: 1rem;
|
|
30
|
+
@apply btn-size;
|
|
46
31
|
}
|
|
47
32
|
|
|
48
33
|
@utility btn-lg {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
@
|
|
53
|
-
--btn-inline: 1.25rem;
|
|
54
|
-
--btn-block: 0.75rem;
|
|
55
|
-
--btn-text-size: 1rem;
|
|
56
|
-
/* @apply px-5 py-3 text-base; */
|
|
57
|
-
}
|
|
34
|
+
--btn-inline: 1.25rem;
|
|
35
|
+
--btn-block: 0.75rem;
|
|
36
|
+
--btn-text-size: 1rem;
|
|
37
|
+
@apply btn-size;
|
|
58
38
|
}
|
|
59
39
|
|
|
60
40
|
@utility btn-xl {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
@
|
|
65
|
-
--btn-inline: 1.375rem;
|
|
66
|
-
--btn-block: 0.875rem;
|
|
67
|
-
--btn-text-size: 1rem;
|
|
68
|
-
/* @apply px-5.5 py-3.5 text-base; */
|
|
69
|
-
}
|
|
41
|
+
--btn-inline: 1.375rem;
|
|
42
|
+
--btn-block: 0.875rem;
|
|
43
|
+
--btn-text-size: 1rem;
|
|
44
|
+
@apply btn-size;
|
|
70
45
|
}
|
|
71
46
|
|
|
72
47
|
@utility btn-2xl {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
@
|
|
77
|
-
--btn-inline: 1.5rem;
|
|
78
|
-
--btn-block: 1rem;
|
|
79
|
-
--btn-text-size: 1.125rem;
|
|
80
|
-
/* @apply px-6 py-4 text-lg; */
|
|
81
|
-
}
|
|
48
|
+
--btn-inline: 1.5rem;
|
|
49
|
+
--btn-block: 1rem;
|
|
50
|
+
--btn-text-size: 1.125rem;
|
|
51
|
+
@apply btn-size;
|
|
82
52
|
}
|
|
83
53
|
|
|
84
54
|
@utility btn-square {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
padding-inline: var(--btn-block);
|
|
88
|
-
padding-block: var(--btn-block);
|
|
89
|
-
/* @apply size-auto aspect-square; */
|
|
90
|
-
}
|
|
55
|
+
padding-inline: var(--btn-block);
|
|
56
|
+
padding-block: var(--btn-block);
|
|
91
57
|
}
|
|
92
58
|
|
|
93
59
|
@utility btn-circle {
|
|
94
|
-
@
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
padding-block: var(--btn-block);
|
|
98
|
-
/* @apply rounded-full size-auto aspect-square; */
|
|
99
|
-
}
|
|
60
|
+
@apply btn-md rounded-full;
|
|
61
|
+
padding-inline: var(--btn-block);
|
|
62
|
+
padding-block: var(--btn-block);
|
|
100
63
|
}
|
|
101
64
|
|
|
102
65
|
@utility btn-wide {
|
|
103
|
-
@
|
|
104
|
-
@apply w-full max-w-xs;
|
|
105
|
-
}
|
|
66
|
+
@apply w-full max-w-xs;
|
|
106
67
|
}
|
|
107
68
|
|
|
108
69
|
@utility btn-block {
|
|
109
|
-
@
|
|
110
|
-
@apply w-full;
|
|
111
|
-
}
|
|
70
|
+
@apply w-full;
|
|
112
71
|
}
|
|
113
72
|
|
|
114
73
|
@utility btn-core {
|
|
115
|
-
@
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
74
|
+
@apply btn-md text-shadow-xs/5 relative inline-flex self-start shrink-0 flex-nowrap items-center
|
|
75
|
+
justify-center gap-1.5 text-center align-middle font-medium overflow-hidden
|
|
76
|
+
text-xs transition duration-350 ease-in-out leading-normal cursor-pointer box-border;
|
|
77
|
+
|
|
78
|
+
border-radius: var(--radius-btn);
|
|
79
|
+
|
|
80
|
+
/* for default btn */
|
|
81
|
+
&:is(.btn) {
|
|
82
|
+
background-color: light-dark(
|
|
83
|
+
var(--btn-100),
|
|
84
|
+
var(--btn-800)
|
|
85
|
+
);
|
|
86
|
+
color: light-dark(
|
|
87
|
+
var(--btn-900),
|
|
88
|
+
var(--btn-50)
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* for all btn exclude default btn */
|
|
93
|
+
&:not(.btn) {
|
|
94
|
+
background-color: light-dark(
|
|
95
|
+
var(--btn-600),
|
|
96
|
+
var(--btn-800)
|
|
97
|
+
);
|
|
98
|
+
color: var(--btn-50);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&:is(:disabled, [disabled], .btn-disabled) {
|
|
102
|
+
@apply opacity-20 cursor-not-allowed;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&:is(input[type="checkbox"], input[type="radio"]) {
|
|
106
|
+
@apply appearance-none;
|
|
107
|
+
|
|
108
|
+
&::after {
|
|
109
|
+
content: attr(aria-label);
|
|
129
110
|
}
|
|
130
111
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
background-color: light-dark(
|
|
134
|
-
var(--btn-600),
|
|
135
|
-
var(--btn-800)
|
|
136
|
-
);
|
|
137
|
-
color: var(--btn-50);
|
|
112
|
+
&:checked {
|
|
113
|
+
@apply isolate;
|
|
138
114
|
}
|
|
115
|
+
}
|
|
139
116
|
|
|
140
|
-
|
|
141
|
-
|
|
117
|
+
&:is(.btn-active, :hover) {
|
|
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
|
+
);
|
|
142
125
|
}
|
|
126
|
+
&:not(.btn-link) {
|
|
127
|
+
@apply outline-none;
|
|
143
128
|
|
|
144
|
-
|
|
145
|
-
|
|
129
|
+
/* for default btn */
|
|
130
|
+
&:is(.btn) {
|
|
131
|
+
background-color: light-dark(
|
|
132
|
+
var(--btn-200),
|
|
133
|
+
var(--btn-800)
|
|
134
|
+
);
|
|
146
135
|
|
|
147
|
-
|
|
148
|
-
|
|
136
|
+
color: light-dark(
|
|
137
|
+
var(--btn-950),
|
|
138
|
+
var(--btn-100)
|
|
139
|
+
);
|
|
149
140
|
}
|
|
150
141
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
142
|
+
/* for all btn exclude default btn */
|
|
143
|
+
&:not(.btn) {
|
|
144
|
+
background-color: light-dark(
|
|
145
|
+
var(--btn-700),
|
|
146
|
+
var(--btn-900)
|
|
147
|
+
);
|
|
155
148
|
|
|
156
|
-
&:is(.btn-active, :hover) {
|
|
157
|
-
&:is(.btn-link) {
|
|
158
|
-
@apply bg-transparent underline underline-offset-4 cursor-pointer;
|
|
159
|
-
|
|
160
149
|
color: light-dark(
|
|
161
|
-
var(--btn-
|
|
162
|
-
var(--btn-
|
|
150
|
+
var(--btn-50),
|
|
151
|
+
var(--btn-100)
|
|
163
152
|
);
|
|
164
153
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
&:is(.btn) {
|
|
170
|
-
background-color: light-dark(
|
|
171
|
-
var(--btn-200),
|
|
172
|
-
var(--btn-900)
|
|
173
|
-
);
|
|
174
|
-
|
|
175
|
-
color: light-dark(
|
|
176
|
-
var(--btn-950),
|
|
177
|
-
var(--btn-100)
|
|
178
|
-
);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/* for all btn exclude default btn */
|
|
182
|
-
&:not(.btn) {
|
|
183
|
-
background-color: light-dark(
|
|
184
|
-
var(--btn-700),
|
|
185
|
-
var(--btn-900)
|
|
186
|
-
);
|
|
187
|
-
|
|
188
|
-
color: light-dark(
|
|
189
|
-
var(--btn-50),
|
|
190
|
-
var(--btn-100)
|
|
191
|
-
);
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
&:not(:disabled, [disabled], .btn-disabled) {
|
|
195
|
-
&::before {
|
|
196
|
-
@apply content-[''] absolute size-full animate-wiggle bg-[radial-gradient(#ffffff33,_#00000000)];
|
|
197
|
-
}
|
|
154
|
+
|
|
155
|
+
&:not(:disabled, [disabled], .btn-disabled) {
|
|
156
|
+
&::before {
|
|
157
|
+
@apply content-[''] absolute size-full;
|
|
198
158
|
}
|
|
199
159
|
}
|
|
200
160
|
}
|
|
161
|
+
}
|
|
201
162
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
163
|
+
&:where(.btn-dashed) {
|
|
164
|
+
&:not(.btn-active) {
|
|
165
|
+
@apply bg-transparent;
|
|
166
|
+
outline: 1px dashed light-dark(
|
|
167
|
+
var(--btn-500),
|
|
168
|
+
var(--btn-700)
|
|
169
|
+
);
|
|
170
|
+
color: light-dark(
|
|
171
|
+
var(--btn-700),
|
|
172
|
+
var(--btn-500)
|
|
173
|
+
);
|
|
211
174
|
}
|
|
175
|
+
}
|
|
212
176
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
177
|
+
&:where(.btn-outline) {
|
|
178
|
+
&:not(.btn-active) {
|
|
179
|
+
@apply bg-transparent;
|
|
180
|
+
outline: 1px solid light-dark(
|
|
181
|
+
var(--btn-500),
|
|
182
|
+
var(--btn-800)
|
|
183
|
+
);
|
|
184
|
+
color: light-dark(
|
|
185
|
+
var(--btn-800),
|
|
186
|
+
var(--btn-200)
|
|
187
|
+
);
|
|
222
188
|
}
|
|
189
|
+
}
|
|
223
190
|
|
|
224
|
-
|
|
225
|
-
|
|
191
|
+
&:where(.btn-soft) {
|
|
192
|
+
&:not(.btn-active) {
|
|
226
193
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
194
|
+
background-color: light-dark(
|
|
195
|
+
var(--btn-100),
|
|
196
|
+
color-mix(in oklab,var(--btn-900)10%,transparent)
|
|
197
|
+
);
|
|
231
198
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
}
|
|
199
|
+
color: light-dark(
|
|
200
|
+
var(--btn-800),
|
|
201
|
+
var(--btn-400)
|
|
202
|
+
);
|
|
237
203
|
}
|
|
204
|
+
}
|
|
238
205
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
206
|
+
&:where(.btn-ghost) {
|
|
207
|
+
&:not(.btn-active) {
|
|
208
|
+
@apply bg-transparent;
|
|
242
209
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
210
|
+
color: light-dark(
|
|
211
|
+
var(--btn-600),
|
|
212
|
+
var(--btn-300)
|
|
213
|
+
);
|
|
248
214
|
}
|
|
215
|
+
}
|
|
249
216
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
217
|
+
&:where(.btn-link) {
|
|
218
|
+
&:not(.btn-active) {
|
|
219
|
+
@apply bg-transparent;
|
|
253
220
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
221
|
+
color: light-dark(
|
|
222
|
+
var(--btn-700),
|
|
223
|
+
var(--btn-500)
|
|
224
|
+
);
|
|
259
225
|
}
|
|
260
226
|
}
|
|
261
227
|
}
|
|
262
228
|
|
|
263
229
|
@utility btn {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
--btn-800: var(--default-800);
|
|
277
|
-
--btn-900: var(--default-900);
|
|
278
|
-
--btn-950: var(--default-950);
|
|
279
|
-
}
|
|
230
|
+
--btn-50: var(--default-50);
|
|
231
|
+
--btn-100: var(--default-100);
|
|
232
|
+
--btn-200: var(--default-200);
|
|
233
|
+
--btn-300: var(--default-300);
|
|
234
|
+
--btn-400: var(--default-400);
|
|
235
|
+
--btn-500: var(--default-500);
|
|
236
|
+
--btn-600: var(--default-600);
|
|
237
|
+
--btn-700: var(--default-700);
|
|
238
|
+
--btn-800: var(--default-800);
|
|
239
|
+
--btn-900: var(--default-900);
|
|
240
|
+
--btn-950: var(--default-950);
|
|
241
|
+
@apply btn-core;
|
|
280
242
|
}
|
|
281
243
|
|
|
282
244
|
@utility btn-primary {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
--btn-800: var(--primary-800);
|
|
296
|
-
--btn-900: var(--primary-900);
|
|
297
|
-
--btn-950: var(--primary-950);
|
|
298
|
-
}
|
|
245
|
+
--btn-50: var(--primary-50);
|
|
246
|
+
--btn-100: var(--primary-100);
|
|
247
|
+
--btn-200: var(--primary-200);
|
|
248
|
+
--btn-300: var(--primary-300);
|
|
249
|
+
--btn-400: var(--primary-400);
|
|
250
|
+
--btn-500: var(--primary-500);
|
|
251
|
+
--btn-600: var(--primary-600);
|
|
252
|
+
--btn-700: var(--primary-700);
|
|
253
|
+
--btn-800: var(--primary-800);
|
|
254
|
+
--btn-900: var(--primary-900);
|
|
255
|
+
--btn-950: var(--primary-950);
|
|
256
|
+
@apply btn-core;
|
|
299
257
|
}
|
|
300
258
|
|
|
301
259
|
@utility btn-secondary {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
--btn-800: var(--secondary-800);
|
|
315
|
-
--btn-900: var(--secondary-900);
|
|
316
|
-
--btn-950: var(--secondary-950);
|
|
317
|
-
}
|
|
260
|
+
--btn-50: var(--secondary-50);
|
|
261
|
+
--btn-100: var(--secondary-100);
|
|
262
|
+
--btn-200: var(--secondary-200);
|
|
263
|
+
--btn-300: var(--secondary-300);
|
|
264
|
+
--btn-400: var(--secondary-400);
|
|
265
|
+
--btn-500: var(--secondary-500);
|
|
266
|
+
--btn-600: var(--secondary-600);
|
|
267
|
+
--btn-700: var(--secondary-700);
|
|
268
|
+
--btn-800: var(--secondary-800);
|
|
269
|
+
--btn-900: var(--secondary-900);
|
|
270
|
+
--btn-950: var(--secondary-950);
|
|
271
|
+
@apply btn-core;
|
|
318
272
|
}
|
|
319
273
|
|
|
320
274
|
@utility btn-accent {
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
--btn-800: var(--accent-800);
|
|
334
|
-
--btn-900: var(--accent-900);
|
|
335
|
-
--btn-950: var(--accent-950);
|
|
336
|
-
}
|
|
275
|
+
--btn-50: var(--accent-50);
|
|
276
|
+
--btn-100: var(--accent-100);
|
|
277
|
+
--btn-200: var(--accent-200);
|
|
278
|
+
--btn-300: var(--accent-300);
|
|
279
|
+
--btn-400: var(--accent-400);
|
|
280
|
+
--btn-500: var(--accent-500);
|
|
281
|
+
--btn-600: var(--accent-600);
|
|
282
|
+
--btn-700: var(--accent-700);
|
|
283
|
+
--btn-800: var(--accent-800);
|
|
284
|
+
--btn-900: var(--accent-900);
|
|
285
|
+
--btn-950: var(--accent-950);
|
|
286
|
+
@apply btn-core;
|
|
337
287
|
}
|
|
338
288
|
|
|
339
289
|
@utility btn-info {
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
--btn-800: var(--info-800);
|
|
353
|
-
--btn-900: var(--info-900);
|
|
354
|
-
--btn-950: var(--info-950);
|
|
355
|
-
}
|
|
290
|
+
--btn-50: var(--info-50);
|
|
291
|
+
--btn-100: var(--info-100);
|
|
292
|
+
--btn-200: var(--info-200);
|
|
293
|
+
--btn-300: var(--info-300);
|
|
294
|
+
--btn-400: var(--info-400);
|
|
295
|
+
--btn-500: var(--info-500);
|
|
296
|
+
--btn-600: var(--info-600);
|
|
297
|
+
--btn-700: var(--info-700);
|
|
298
|
+
--btn-800: var(--info-800);
|
|
299
|
+
--btn-900: var(--info-900);
|
|
300
|
+
--btn-950: var(--info-950);
|
|
301
|
+
@apply btn-core;
|
|
356
302
|
}
|
|
357
303
|
|
|
358
304
|
@utility btn-success {
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
--btn-800: var(--success-800);
|
|
372
|
-
--btn-900: var(--success-900);
|
|
373
|
-
--btn-950: var(--success-950);
|
|
374
|
-
}
|
|
305
|
+
--btn-50: var(--success-50);
|
|
306
|
+
--btn-100: var(--success-100);
|
|
307
|
+
--btn-200: var(--success-200);
|
|
308
|
+
--btn-300: var(--success-300);
|
|
309
|
+
--btn-400: var(--success-400);
|
|
310
|
+
--btn-500: var(--success-500);
|
|
311
|
+
--btn-600: var(--success-600);
|
|
312
|
+
--btn-700: var(--success-700);
|
|
313
|
+
--btn-800: var(--success-800);
|
|
314
|
+
--btn-900: var(--success-900);
|
|
315
|
+
--btn-950: var(--success-950);
|
|
316
|
+
@apply btn-core;
|
|
375
317
|
}
|
|
376
318
|
|
|
377
319
|
@utility btn-warning {
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
--btn-800: var(--warning-800);
|
|
391
|
-
--btn-900: var(--warning-900);
|
|
392
|
-
--btn-950: var(--warning-950);
|
|
393
|
-
}
|
|
320
|
+
--btn-50: var(--warning-50);
|
|
321
|
+
--btn-100: var(--warning-100);
|
|
322
|
+
--btn-200: var(--warning-200);
|
|
323
|
+
--btn-300: var(--warning-300);
|
|
324
|
+
--btn-400: var(--warning-400);
|
|
325
|
+
--btn-500: var(--warning-500);
|
|
326
|
+
--btn-600: var(--warning-600);
|
|
327
|
+
--btn-700: var(--warning-700);
|
|
328
|
+
--btn-800: var(--warning-800);
|
|
329
|
+
--btn-900: var(--warning-900);
|
|
330
|
+
--btn-950: var(--warning-950);
|
|
331
|
+
@apply btn-core;
|
|
394
332
|
}
|
|
395
333
|
|
|
396
334
|
@utility btn-error {
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
--btn-800: var(--error-800);
|
|
410
|
-
--btn-900: var(--error-900);
|
|
411
|
-
--btn-950: var(--error-950);
|
|
412
|
-
}
|
|
335
|
+
--btn-50: var(--error-50);
|
|
336
|
+
--btn-100: var(--error-100);
|
|
337
|
+
--btn-200: var(--error-200);
|
|
338
|
+
--btn-300: var(--error-300);
|
|
339
|
+
--btn-400: var(--error-400);
|
|
340
|
+
--btn-500: var(--error-500);
|
|
341
|
+
--btn-600: var(--error-600);
|
|
342
|
+
--btn-700: var(--error-700);
|
|
343
|
+
--btn-800: var(--error-800);
|
|
344
|
+
--btn-900: var(--error-900);
|
|
345
|
+
--btn-950: var(--error-950);
|
|
346
|
+
@apply btn-core;
|
|
413
347
|
}
|
|
@@ -1,204 +1,151 @@
|
|
|
1
1
|
@utility divider-x {
|
|
2
|
-
|
|
3
|
-
@apply
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
&:not(:empty) {
|
|
3
|
+
@apply gap-x-2;
|
|
4
|
+
}
|
|
5
|
+
&::before, &::after {
|
|
6
|
+
@apply w-full h-[0.5px];
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
@utility divider-x {
|
|
11
|
-
@
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
@utility divider-x-solid {
|
|
11
|
+
@apply divider-x;
|
|
12
|
+
&::before, &::after {
|
|
13
|
+
background: light-dark(
|
|
14
|
+
var(--divider-color),
|
|
15
|
+
color-mix(in oklab, var(--divider-color) 60%, transparent)
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
@media print {
|
|
19
|
+
&::before,
|
|
20
|
+
&::after {
|
|
21
|
+
border-top: 0.5px solid var(--divider-color);
|
|
15
22
|
}
|
|
16
23
|
}
|
|
17
24
|
}
|
|
18
25
|
|
|
19
|
-
@utility divider-
|
|
20
|
-
@
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
@utility divider-x-dashed {
|
|
27
|
+
@apply divider-x;
|
|
28
|
+
&::before, &::after {
|
|
29
|
+
background: repeating-linear-gradient(
|
|
30
|
+
to right,
|
|
31
|
+
var(--divider-color) 0,
|
|
32
|
+
var(--divider-color) 5px,
|
|
33
|
+
transparent 5px,
|
|
34
|
+
transparent 10px
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
@media print {
|
|
23
38
|
&::before,
|
|
24
39
|
&::after {
|
|
25
|
-
|
|
26
|
-
|
|
40
|
+
border-top: 0.5px dashed var(--divider-color);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
/* Container with two sections and a vertical divider in between.
|
|
27
45
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
46
|
+
✅ This will work correctly when:
|
|
47
|
+
- You set a fixed height on `.container` (e.g. height: 200px), OR
|
|
48
|
+
- You set `height: 100%` on `.container` **AND**
|
|
49
|
+
all parent elements (including html and body) also have `height: 100%`
|
|
32
50
|
|
|
33
|
-
|
|
51
|
+
⚠️ If you use `height: 100%` but the parent elements do not have defined height,
|
|
52
|
+
the vertical divider will collapse because 100% of "auto" is meaningless in CSS.
|
|
34
53
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
54
|
+
💡 Best practice:
|
|
55
|
+
Use fixed height for predictable layouts.
|
|
56
|
+
Use 100% height only if you're sure the full layout chain supports it. */
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
@utility divider-y {
|
|
60
|
+
@apply flex-col;
|
|
61
|
+
&:not(:empty) {
|
|
62
|
+
@apply gap-y-2;
|
|
63
|
+
}
|
|
64
|
+
&::before, &::after {
|
|
65
|
+
@apply w-[0.5px] flex-1;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@utility divider-y-solid {
|
|
70
|
+
@apply divider-y;
|
|
71
|
+
&::before, &::after {
|
|
72
|
+
background: light-dark(
|
|
73
|
+
var(--divider-color),
|
|
74
|
+
color-mix(in oklab, var(--divider-color) 60%, transparent)
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
@media print {
|
|
78
|
+
&::before,
|
|
79
|
+
&::after {
|
|
80
|
+
border-left: 0.5px solid var(--divider-color);
|
|
44
81
|
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
45
84
|
|
|
46
|
-
|
|
47
|
-
|
|
85
|
+
@utility divider-y-dashed {
|
|
86
|
+
@apply divider-y;
|
|
87
|
+
&::before, &::after {
|
|
88
|
+
background: repeating-linear-gradient(
|
|
89
|
+
to bottom,
|
|
90
|
+
var(--divider-color) 0,
|
|
91
|
+
var(--divider-color) 5px,
|
|
92
|
+
transparent 5px,
|
|
93
|
+
transparent 10px
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
@media print {
|
|
97
|
+
&::before,
|
|
98
|
+
&::after {
|
|
99
|
+
border-left: 0.5px dashed var(--divider-color);
|
|
48
100
|
}
|
|
49
101
|
}
|
|
50
102
|
}
|
|
51
103
|
|
|
104
|
+
@utility divider-core {
|
|
105
|
+
@apply divider-x-solid flex items-center justify-center h-full;
|
|
106
|
+
|
|
107
|
+
&::before, &::after {
|
|
108
|
+
@apply content-[''];
|
|
109
|
+
}
|
|
110
|
+
}
|
|
52
111
|
|
|
53
112
|
@utility divider {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
@layer theme {
|
|
58
|
-
--divider-50: var(--default-50);
|
|
59
|
-
--divider-100: var(--default-100);
|
|
60
|
-
--divider-200: var(--default-200);
|
|
61
|
-
--divider-300: var(--default-300);
|
|
62
|
-
--divider-400: var(--default-400);
|
|
63
|
-
--divider-500: var(--default-500);
|
|
64
|
-
--divider-600: var(--default-600);
|
|
65
|
-
--divider-700: var(--default-700);
|
|
66
|
-
--divider-800: var(--default-800);
|
|
67
|
-
--divider-900: var(--default-900);
|
|
68
|
-
--divider-950: var(--default-950);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
113
|
+
--divider-color: var(--default-300);
|
|
114
|
+
@apply divider-core;
|
|
115
|
+
}
|
|
71
116
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
@layer theme {
|
|
77
|
-
--divider-50: var(--primary-50);
|
|
78
|
-
--divider-100: var(--primary-100);
|
|
79
|
-
--divider-200: var(--primary-200);
|
|
80
|
-
--divider-300: var(--primary-300);
|
|
81
|
-
--divider-400: var(--primary-400);
|
|
82
|
-
--divider-500: var(--primary-500);
|
|
83
|
-
--divider-600: var(--primary-600);
|
|
84
|
-
--divider-700: var(--primary-700);
|
|
85
|
-
--divider-800: var(--primary-800);
|
|
86
|
-
--divider-900: var(--primary-900);
|
|
87
|
-
--divider-950: var(--primary-950);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
117
|
+
@utility divider-primary {
|
|
118
|
+
--divider-color: var(--primary-700);
|
|
119
|
+
@apply divider-core;
|
|
120
|
+
}
|
|
90
121
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
@layer theme {
|
|
96
|
-
--divider-50: var(--secondary-50);
|
|
97
|
-
--divider-100: var(--secondary-100);
|
|
98
|
-
--divider-200: var(--secondary-200);
|
|
99
|
-
--divider-300: var(--secondary-300);
|
|
100
|
-
--divider-400: var(--secondary-400);
|
|
101
|
-
--divider-500: var(--secondary-500);
|
|
102
|
-
--divider-600: var(--secondary-600);
|
|
103
|
-
--divider-700: var(--secondary-700);
|
|
104
|
-
--divider-800: var(--secondary-800);
|
|
105
|
-
--divider-900: var(--secondary-900);
|
|
106
|
-
--divider-950: var(--secondary-950);
|
|
107
|
-
}
|
|
108
|
-
}
|
|
122
|
+
@utility divider-secondary {
|
|
123
|
+
--divider-color: var(--secondary-700);
|
|
124
|
+
@apply divider-core;
|
|
125
|
+
}
|
|
109
126
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
@layer theme {
|
|
115
|
-
--divider-50: var(--accent-50);
|
|
116
|
-
--divider-100: var(--accent-100);
|
|
117
|
-
--divider-200: var(--accent-200);
|
|
118
|
-
--divider-300: var(--accent-300);
|
|
119
|
-
--divider-400: var(--accent-400);
|
|
120
|
-
--divider-500: var(--accent-500);
|
|
121
|
-
--divider-600: var(--accent-600);
|
|
122
|
-
--divider-700: var(--accent-700);
|
|
123
|
-
--divider-800: var(--accent-800);
|
|
124
|
-
--divider-900: var(--accent-900);
|
|
125
|
-
--divider-950: var(--accent-950);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
127
|
+
@utility divider-accent {
|
|
128
|
+
--divider-color: var(--accent-700);
|
|
129
|
+
@apply divider-core;
|
|
130
|
+
}
|
|
128
131
|
|
|
129
132
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
@layer theme {
|
|
135
|
-
--divider-50: var(--info-50);
|
|
136
|
-
--divider-100: var(--info-100);
|
|
137
|
-
--divider-200: var(--info-200);
|
|
138
|
-
--divider-300: var(--info-300);
|
|
139
|
-
--divider-400: var(--info-400);
|
|
140
|
-
--divider-500: var(--info-500);
|
|
141
|
-
--divider-600: var(--info-600);
|
|
142
|
-
--divider-700: var(--info-700);
|
|
143
|
-
--divider-800: var(--info-800);
|
|
144
|
-
--divider-900: var(--info-900);
|
|
145
|
-
--divider-950: var(--info-950);
|
|
146
|
-
}
|
|
147
|
-
}
|
|
133
|
+
@utility divider-info {
|
|
134
|
+
--divider-color: var(--info-700);
|
|
135
|
+
@apply divider-core;
|
|
136
|
+
}
|
|
148
137
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
@layer theme {
|
|
154
|
-
--divider-50: var(--success-50);
|
|
155
|
-
--divider-100: var(--success-100);
|
|
156
|
-
--divider-200: var(--success-200);
|
|
157
|
-
--divider-300: var(--success-300);
|
|
158
|
-
--divider-400: var(--success-400);
|
|
159
|
-
--divider-500: var(--success-500);
|
|
160
|
-
--divider-600: var(--success-600);
|
|
161
|
-
--divider-700: var(--success-700);
|
|
162
|
-
--divider-800: var(--success-800);
|
|
163
|
-
--divider-900: var(--success-900);
|
|
164
|
-
--divider-950: var(--success-950);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
138
|
+
@utility divider-success {
|
|
139
|
+
--divider-color: var(--success-700);
|
|
140
|
+
@apply divider-core;
|
|
141
|
+
}
|
|
167
142
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
@layer theme {
|
|
173
|
-
--divider-50: var(--warning-50);
|
|
174
|
-
--divider-100: var(--warning-100);
|
|
175
|
-
--divider-200: var(--warning-200);
|
|
176
|
-
--divider-300: var(--warning-300);
|
|
177
|
-
--divider-400: var(--warning-400);
|
|
178
|
-
--divider-500: var(--warning-500);
|
|
179
|
-
--divider-600: var(--warning-600);
|
|
180
|
-
--divider-700: var(--warning-700);
|
|
181
|
-
--divider-800: var(--warning-800);
|
|
182
|
-
--divider-900: var(--warning-900);
|
|
183
|
-
--divider-950: var(--warning-950);
|
|
184
|
-
}
|
|
185
|
-
}
|
|
143
|
+
@utility divider-warning {
|
|
144
|
+
--divider-color: var(--warning-700);
|
|
145
|
+
@apply divider-core;
|
|
146
|
+
}
|
|
186
147
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
@layer theme {
|
|
192
|
-
--divider-50: var(--error-50);
|
|
193
|
-
--divider-100: var(--error-100);
|
|
194
|
-
--divider-200: var(--error-200);
|
|
195
|
-
--divider-300: var(--error-300);
|
|
196
|
-
--divider-400: var(--error-400);
|
|
197
|
-
--divider-500: var(--error-500);
|
|
198
|
-
--divider-600: var(--error-600);
|
|
199
|
-
--divider-700: var(--error-700);
|
|
200
|
-
--divider-800: var(--error-800);
|
|
201
|
-
--divider-900: var(--error-900);
|
|
202
|
-
--divider-950: var(--error-950);
|
|
203
|
-
}
|
|
204
|
-
}
|
|
148
|
+
@utility divider-error {
|
|
149
|
+
--divider-color: var(--error-700);
|
|
150
|
+
@apply divider-core;
|
|
151
|
+
}
|
package/src/components/modal.css
CHANGED
|
@@ -2,71 +2,196 @@
|
|
|
2
2
|
@import "../theme/placement.css";
|
|
3
3
|
@import "../theme/animation/slide.css";
|
|
4
4
|
|
|
5
|
-
@utility modal{
|
|
6
|
-
@
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
&[open], &.modal-open {
|
|
19
|
-
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
5
|
+
@utility modal-core{
|
|
6
|
+
@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-3 text-inherit z-999 overflow-hidden overscroll-contain;
|
|
7
|
+
&:not(modal:not([open]):not(.modal-open)),
|
|
8
|
+
&::backdrop {
|
|
9
|
+
@apply opacity-100 starting:invisible starting:opacity-0;
|
|
10
|
+
background-image: light-dark(
|
|
11
|
+
color-mix(in oklab,var(--color-default-100)15%,transparent),
|
|
12
|
+
color-mix(in oklab,var(--color-default-800)50%,transparent)
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
&[open], &.modal-open {
|
|
16
|
+
@apply pointer-events-auto visible opacity-100 starting:invisible starting:opacity-0;
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
18
|
+
.modal-body {
|
|
19
|
+
translate: 0 0;
|
|
20
|
+
scale: 1;
|
|
21
|
+
opacity: 1;
|
|
26
22
|
}
|
|
27
23
|
}
|
|
28
24
|
}
|
|
29
25
|
|
|
30
26
|
@utility modal-backdrop {
|
|
31
|
-
@
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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(--modal-300)50%,transparent),
|
|
30
|
+
color-mix(in oklab,var(--modal-900)80%,transparent)
|
|
31
|
+
);
|
|
32
|
+
button {
|
|
33
|
+
@apply cursor-pointer;
|
|
36
34
|
}
|
|
37
35
|
}
|
|
38
36
|
|
|
39
37
|
@utility modal-body {
|
|
40
|
-
@
|
|
41
|
-
|
|
42
|
-
|
|
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 transition-all duration-150 scale-95 opacity-0 overflow-y-auto overscroll-contain;
|
|
39
|
+
--tw-shadow-color: light-dark(
|
|
40
|
+
color-mix(in oklab,var(--modal-300)50%,transparent),
|
|
41
|
+
color-mix(in oklab,var(--modal-900)60%,transparent)
|
|
42
|
+
);
|
|
43
|
+
background: light-dark(
|
|
44
|
+
var(--modal-100),
|
|
45
|
+
var(--modal-800)
|
|
46
|
+
);
|
|
47
|
+
color: light-dark(
|
|
48
|
+
var(--default-800),
|
|
49
|
+
var(--default-50)
|
|
50
|
+
);
|
|
51
|
+
border: 1px solid light-dark(
|
|
52
|
+
var(--modal-300),
|
|
53
|
+
var(--modal-900)
|
|
54
|
+
);
|
|
43
55
|
}
|
|
44
56
|
|
|
45
57
|
|
|
46
58
|
|
|
47
59
|
/* placements */
|
|
48
|
-
|
|
49
60
|
@utility modal-x-* {
|
|
50
|
-
@
|
|
51
|
-
/* @apply [justify-items:--value([*])]; */
|
|
52
|
-
@apply [justify-items:--value(--x-*)];
|
|
53
|
-
}
|
|
61
|
+
@apply [justify-items:--value(--x-*)];
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
@utility modal-y-* {
|
|
57
|
-
@
|
|
58
|
-
/* @apply [align-items:--value([*])]; */
|
|
59
|
-
@apply [align-items:--value(--y-*)];
|
|
60
|
-
}
|
|
65
|
+
@apply [align-items:--value(--y-*)];
|
|
61
66
|
}
|
|
62
67
|
|
|
63
68
|
/* animation */
|
|
64
69
|
|
|
65
70
|
@utility modal-slide-* {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
scale: 1;
|
|
70
|
-
}
|
|
71
|
+
:where(.modal-body) {
|
|
72
|
+
@apply [translate:--value(--slide-*)];
|
|
73
|
+
scale: 1;
|
|
71
74
|
}
|
|
72
|
-
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
@utility modal {
|
|
79
|
+
--modal-50: var(--default-50);
|
|
80
|
+
--modal-100: var(--default-100);
|
|
81
|
+
--modal-200: var(--default-200);
|
|
82
|
+
--modal-300: var(--default-300);
|
|
83
|
+
--modal-400: var(--default-400);
|
|
84
|
+
--modal-500: var(--default-500);
|
|
85
|
+
--modal-600: var(--default-600);
|
|
86
|
+
--modal-700: var(--default-700);
|
|
87
|
+
--modal-800: var(--default-800);
|
|
88
|
+
--modal-900: var(--default-900);
|
|
89
|
+
--modal-950: var(--default-950);
|
|
90
|
+
|
|
91
|
+
@apply modal-core;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@utility modal-primary {
|
|
95
|
+
--modal-50: var(--primary-50);
|
|
96
|
+
--modal-100: var(--primary-100);
|
|
97
|
+
--modal-200: var(--primary-200);
|
|
98
|
+
--modal-300: var(--primary-300);
|
|
99
|
+
--modal-400: var(--primary-400);
|
|
100
|
+
--modal-500: var(--primary-500);
|
|
101
|
+
--modal-600: var(--primary-600);
|
|
102
|
+
--modal-700: var(--primary-700);
|
|
103
|
+
--modal-800: var(--primary-800);
|
|
104
|
+
--modal-900: var(--primary-900);
|
|
105
|
+
--modal-950: var(--primary-950);
|
|
106
|
+
@apply modal-core;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@utility modal-secondary {
|
|
110
|
+
--modal-50: var(--secondary-50);
|
|
111
|
+
--modal-100: var(--secondary-100);
|
|
112
|
+
--modal-200: var(--secondary-200);
|
|
113
|
+
--modal-300: var(--secondary-300);
|
|
114
|
+
--modal-400: var(--secondary-400);
|
|
115
|
+
--modal-500: var(--secondary-500);
|
|
116
|
+
--modal-600: var(--secondary-600);
|
|
117
|
+
--modal-700: var(--secondary-700);
|
|
118
|
+
--modal-800: var(--secondary-800);
|
|
119
|
+
--modal-900: var(--secondary-900);
|
|
120
|
+
--modal-950: var(--secondary-950);
|
|
121
|
+
@apply modal-core;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@utility modal-accent {
|
|
125
|
+
--modal-50: var(--accent-50);
|
|
126
|
+
--modal-100: var(--accent-100);
|
|
127
|
+
--modal-200: var(--accent-200);
|
|
128
|
+
--modal-300: var(--accent-300);
|
|
129
|
+
--modal-400: var(--accent-400);
|
|
130
|
+
--modal-500: var(--accent-500);
|
|
131
|
+
--modal-600: var(--accent-600);
|
|
132
|
+
--modal-700: var(--accent-700);
|
|
133
|
+
--modal-800: var(--accent-800);
|
|
134
|
+
--modal-900: var(--accent-900);
|
|
135
|
+
--modal-950: var(--accent-950);
|
|
136
|
+
@apply modal-core;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@utility modal-info {
|
|
140
|
+
--modal-50: var(--info-50);
|
|
141
|
+
--modal-100: var(--info-100);
|
|
142
|
+
--modal-200: var(--info-200);
|
|
143
|
+
--modal-300: var(--info-300);
|
|
144
|
+
--modal-400: var(--info-400);
|
|
145
|
+
--modal-500: var(--info-500);
|
|
146
|
+
--modal-600: var(--info-600);
|
|
147
|
+
--modal-700: var(--info-700);
|
|
148
|
+
--modal-800: var(--info-800);
|
|
149
|
+
--modal-900: var(--info-900);
|
|
150
|
+
--modal-950: var(--info-950);
|
|
151
|
+
@apply modal-core;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@utility modal-success {
|
|
155
|
+
--modal-50: var(--success-50);
|
|
156
|
+
--modal-100: var(--success-100);
|
|
157
|
+
--modal-200: var(--success-200);
|
|
158
|
+
--modal-300: var(--success-300);
|
|
159
|
+
--modal-400: var(--success-400);
|
|
160
|
+
--modal-500: var(--success-500);
|
|
161
|
+
--modal-600: var(--success-600);
|
|
162
|
+
--modal-700: var(--success-700);
|
|
163
|
+
--modal-800: var(--success-800);
|
|
164
|
+
--modal-900: var(--success-900);
|
|
165
|
+
--modal-950: var(--success-950);
|
|
166
|
+
@apply modal-core;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@utility modal-warning {
|
|
170
|
+
--modal-50: var(--warning-50);
|
|
171
|
+
--modal-100: var(--warning-100);
|
|
172
|
+
--modal-200: var(--warning-200);
|
|
173
|
+
--modal-300: var(--warning-300);
|
|
174
|
+
--modal-400: var(--warning-400);
|
|
175
|
+
--modal-500: var(--warning-500);
|
|
176
|
+
--modal-600: var(--warning-600);
|
|
177
|
+
--modal-700: var(--warning-700);
|
|
178
|
+
--modal-800: var(--warning-800);
|
|
179
|
+
--modal-900: var(--warning-900);
|
|
180
|
+
--modal-950: var(--warning-950);
|
|
181
|
+
@apply modal-core;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
@utility modal-error {
|
|
185
|
+
--modal-50: var(--error-50);
|
|
186
|
+
--modal-100: var(--error-100);
|
|
187
|
+
--modal-200: var(--error-200);
|
|
188
|
+
--modal-300: var(--error-300);
|
|
189
|
+
--modal-400: var(--error-400);
|
|
190
|
+
--modal-500: var(--error-500);
|
|
191
|
+
--modal-600: var(--error-600);
|
|
192
|
+
--modal-700: var(--error-700);
|
|
193
|
+
--modal-800: var(--error-800);
|
|
194
|
+
--modal-900: var(--error-900);
|
|
195
|
+
--modal-950: var(--error-950);
|
|
196
|
+
@apply modal-core;
|
|
197
|
+
}
|
package/src/theme/skins/base.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@import "./darkberry.css" layer(theme);
|
|
4
4
|
|
|
5
5
|
@custom-variant light (&:where([data-theme="light"], [data-theme="snowberry"] *));
|
|
6
|
-
@custom-variant dark (&:where([data-theme="dark"], [data-theme="
|
|
6
|
+
@custom-variant dark (&:where([data-theme="dark"], [data-theme="darkberry"] *));
|
|
7
7
|
|
|
8
8
|
:root {
|
|
9
9
|
color-scheme: var(--color-scheme);
|