@semio/ui 0.0.0 → 0.1.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/dist/index.d.mts +2459 -781
- package/dist/index.d.ts +2459 -781
- package/dist/index.js +13172 -5740
- package/dist/index.mjs +13115 -5781
- package/dist/semio-ui.css +2 -0
- package/dist/styles.css +1432 -0
- package/dist/theme.css +117 -0
- package/package.json +46 -44
- package/dist/index.css +0 -4271
package/dist/styles.css
ADDED
|
@@ -0,0 +1,1432 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "./theme.css";
|
|
3
|
+
|
|
4
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
5
|
+
|
|
6
|
+
@custom-variant left-sidebar-full (&:where(.left-sidebar-full, .left-sidebar-full *));
|
|
7
|
+
@custom-variant right-sidebar-full (&:where(.right-sidebar-full, .right-sidebar-full *));
|
|
8
|
+
|
|
9
|
+
@custom-variant desktop (@media (width >= theme(--breakpoint-md)) and (height >= theme(--breakpoint-md)));
|
|
10
|
+
|
|
11
|
+
@custom-variant data-expanded (&[data-ui~="expanded"]);
|
|
12
|
+
@custom-variant data-checked (&[data-ui~="checked"]);
|
|
13
|
+
|
|
14
|
+
/* Attribute-presence variants. Tailwind v4 doesn't auto-name kebab-case
|
|
15
|
+
data attributes, so without these registrations the only working form
|
|
16
|
+
is `data-[starting-style]:` etc. Registering them lets the canonical
|
|
17
|
+
`data-starting-style:` form generate the same `[data-starting-style]`
|
|
18
|
+
selector — and silences the IntelliSense "use canonical form" hint. */
|
|
19
|
+
@custom-variant data-active (&[data-active]);
|
|
20
|
+
@custom-variant data-disabled (&[data-disabled]);
|
|
21
|
+
@custom-variant data-ending-style (&[data-ending-style]);
|
|
22
|
+
@custom-variant data-highlighted (&[data-highlighted]);
|
|
23
|
+
@custom-variant data-popup-open (&[data-popup-open]);
|
|
24
|
+
@custom-variant data-starting-style (&[data-starting-style]);
|
|
25
|
+
|
|
26
|
+
@custom-variant size-xs (&:where(.size-xs));
|
|
27
|
+
@custom-variant size-sm (&:where(.size-sm));
|
|
28
|
+
@custom-variant size-md (&:where(.size-md));
|
|
29
|
+
@custom-variant size-lg (&:where(.size-lg));
|
|
30
|
+
@custom-variant size-xl (&:where(.size-xl));
|
|
31
|
+
|
|
32
|
+
@custom-variant primary (&:where(.primary));
|
|
33
|
+
@custom-variant secondary (&:where(.secondary));
|
|
34
|
+
@custom-variant tertiary (&:where(.tertiary));
|
|
35
|
+
@custom-variant info (&:where(.info));
|
|
36
|
+
@custom-variant warning (&:where(.warning));
|
|
37
|
+
@custom-variant error (&:where(.error));
|
|
38
|
+
@custom-variant success (&:where(.success));
|
|
39
|
+
@custom-variant custom-color (&:where(.custom-color));
|
|
40
|
+
|
|
41
|
+
@source "../src";
|
|
42
|
+
|
|
43
|
+
/* @utility hatch- * {
|
|
44
|
+
background-image: repeating-linear-gradient(
|
|
45
|
+
calc(--value(integer) * 1deg) in oklab,
|
|
46
|
+
var(--tw-gradient-from),
|
|
47
|
+
var(--tw-gradient-from) var(--tw-gradient-from-position),
|
|
48
|
+
var(--tw-gradient-to) var(--tw-gradient-from-position),
|
|
49
|
+
var(--tw-gradient-to) var(--tw-gradient-to-position)
|
|
50
|
+
);
|
|
51
|
+
} */
|
|
52
|
+
|
|
53
|
+
@layer components {
|
|
54
|
+
.variant-text-caret-color {
|
|
55
|
+
caret-color: var(--accent-color);
|
|
56
|
+
&::selection {
|
|
57
|
+
background-color: color-mix(in oklab, var(--accent-color) 75%, transparent);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.variant-responsive-bg {
|
|
62
|
+
@apply transition-colors duration-50 ease-in-out rounded-xs;
|
|
63
|
+
@apply disabled:cursor-not-allowed;
|
|
64
|
+
|
|
65
|
+
background-color: var(--standard-color);
|
|
66
|
+
&:hover {
|
|
67
|
+
@media (hover: hover) {
|
|
68
|
+
background-color: var(--accent-color);
|
|
69
|
+
|
|
70
|
+
&:disabled {
|
|
71
|
+
background-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&[data-deemphasized="true"] {
|
|
75
|
+
background-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:disabled {
|
|
81
|
+
background-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&[data-deemphasized="true"] {
|
|
85
|
+
background-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.variant-static-bg-25 {
|
|
90
|
+
@apply transition-colors duration-50 ease-in-out rounded-xs;
|
|
91
|
+
@apply disabled:cursor-not-allowed;
|
|
92
|
+
|
|
93
|
+
background-color: color-mix(in oklab, var(--standard-color) 25%, transparent);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.variant-responsive-appearing-bg {
|
|
97
|
+
@apply transition-colors duration-50 ease-in-out rounded-xs;
|
|
98
|
+
@apply disabled:cursor-not-allowed;
|
|
99
|
+
|
|
100
|
+
background-color: transparent;
|
|
101
|
+
&:hover {
|
|
102
|
+
@media (hover: hover) {
|
|
103
|
+
background-color: color-mix(in oklab, var(--accent-color) 25%, transparent);
|
|
104
|
+
|
|
105
|
+
&:disabled {
|
|
106
|
+
background-color: transparent;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&[data-deemphasized="true"] {
|
|
110
|
+
background-color: transparent;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&:disabled {
|
|
116
|
+
background-color: transparent;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&[data-deemphasized="true"] {
|
|
120
|
+
background-color: transparent;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.variant-responsive-header-button-bg {
|
|
125
|
+
@apply transition-colors duration-50 ease-in-out rounded-xs;
|
|
126
|
+
@apply disabled:cursor-not-allowed;
|
|
127
|
+
@apply backdrop-blur-lg;
|
|
128
|
+
@apply dark:bg-layout-dark-deep-inset/30 bg-layout-light-deep-inset/30;
|
|
129
|
+
@apply dark:hover:not-disabled:bg-layout-dark-deep-inset/70 hover:not-disabled:bg-layout-light-deep-inset/70;
|
|
130
|
+
@apply dark:focus:not-disabled:bg-layout-dark-deep-inset/70 focus:not-disabled:bg-layout-light-deep-inset/70;
|
|
131
|
+
@apply dark:data-[state=open]:bg-layout-dark-deep-inset/70 data-[state=open]:bg-layout-light-deep-inset/70;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.variant-responsive-appearing-outline {
|
|
135
|
+
@apply transition-[outline-width,outline-color] duration-50 ease-in-out;
|
|
136
|
+
outline-color: var(--accent-color);
|
|
137
|
+
@apply outline-0 outline-offset-2 hover:not-disabled:outline;
|
|
138
|
+
@apply focus:not-disabled:outline-2 focus-within:not-disabled:outline-2;
|
|
139
|
+
@apply focus:hover:not-disabled:outline-2 hover:focus-within:not-disabled:outline-2;
|
|
140
|
+
@apply focus:group-data-[state=open]/trigger:not-disabled:outline-2;
|
|
141
|
+
@apply focus:data-[state=closed]:outline-0;
|
|
142
|
+
@apply data-[state=open]:not-disabled:outline-2;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.parent-outline {
|
|
146
|
+
&:has(*[data-state="open"]) {
|
|
147
|
+
@apply outline-2;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.variant-responsive-text {
|
|
152
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
153
|
+
color: var(--weak-accent-text-color);
|
|
154
|
+
&:hover {
|
|
155
|
+
@media (hover: hover) {
|
|
156
|
+
color: var(--strong-accent-text-color);
|
|
157
|
+
|
|
158
|
+
&:disabled {
|
|
159
|
+
color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&[data-deemphasized="true"] {
|
|
163
|
+
color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
&:disabled {
|
|
168
|
+
color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&[data-deemphasized="true"] {
|
|
172
|
+
color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.variant-responsive-input-extra-text {
|
|
177
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
178
|
+
@apply text-default-500;
|
|
179
|
+
@apply peer-disabled:text-default-500/50 peer-disabled:peer-hover:text-default-500/50;
|
|
180
|
+
@apply not-peer-disabled:not-peer-read-only:text-default-500;
|
|
181
|
+
|
|
182
|
+
&:not(*:is(:where(.peer):disabled ~ *)) {
|
|
183
|
+
&:not(*:is(:where(.peer):read-only ~ *)) {
|
|
184
|
+
&:is(:where(.peer):hover ~ *) {
|
|
185
|
+
@media (hover: hover) {
|
|
186
|
+
color: var(--accent-color);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
&:is(:where(.peer):focus ~ *) {
|
|
190
|
+
color: var(--accent-color);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&[data-deemphasized="true"] {
|
|
195
|
+
color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.variant-responsive-input-extra-button-text {
|
|
201
|
+
@apply transition-[color,background-color,outline-width] duration-50 ease-in-out;
|
|
202
|
+
@apply text-default-500/0 bg-transparent;
|
|
203
|
+
@apply peer-focus:hover:bg-default-600/20 dark:peer-focus:hover:bg-default-400/20;
|
|
204
|
+
@apply peer-focus:text-default-600 dark:peer-focus:text-default-400;
|
|
205
|
+
@apply peer-focus:peer-disabled:text-default-500/50;
|
|
206
|
+
|
|
207
|
+
&:is(:where(.peer):focus ~ *) {
|
|
208
|
+
color: var(--accent-color);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.variant-static-persistent-outline {
|
|
213
|
+
@apply transition-[outline-color,outline-width] duration-50 ease-in-out;
|
|
214
|
+
@apply outline-1;
|
|
215
|
+
outline-color: var(--standard-color);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.variant-responsive-persistent-outline {
|
|
219
|
+
@apply transition-[outline-color,outline-width] rounded-xs;
|
|
220
|
+
@apply outline-solid outline-1 disabled:cursor-not-allowed focus:outline-2;
|
|
221
|
+
outline-color: var(--standard-color);
|
|
222
|
+
|
|
223
|
+
&:focus,
|
|
224
|
+
&:focus-visible {
|
|
225
|
+
outline-color: var(--standard-color);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
&:disabled {
|
|
229
|
+
outline-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
&[data-deemphasized="true"] {
|
|
233
|
+
outline-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
&:hover {
|
|
237
|
+
@media (hover: hover) {
|
|
238
|
+
&:not(*:disabled) {
|
|
239
|
+
&:not(*[data-deemphasized="true"]) {
|
|
240
|
+
outline-color: var(--accent-color);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.variant-responsive-selectable-text {
|
|
248
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
249
|
+
@apply text-default-500;
|
|
250
|
+
|
|
251
|
+
&:is(:where(.group\/tab):hover *) {
|
|
252
|
+
@media (hover: hover) {
|
|
253
|
+
color: var(--color-default-600);
|
|
254
|
+
&:where(.dark, .dark *) {
|
|
255
|
+
color: var(--color-default-400);
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
&:hover {
|
|
261
|
+
color: var(--color-default-600);
|
|
262
|
+
&:where(.dark, .dark *) {
|
|
263
|
+
color: var(--color-default-400);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
&:is(:where(.group\/tab)[data-active] *) {
|
|
267
|
+
color: var(--accent-color);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.variant-static-bg {
|
|
272
|
+
background-color: var(--standard-color);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.variant-static-bg-50 {
|
|
276
|
+
background-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.variant-separator-fill {
|
|
280
|
+
background-color: var(--accent-color);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.variant-input-solid-bg {
|
|
284
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
285
|
+
background-color: color-mix(in oklab, var(--standard-color) 35%, transparent);
|
|
286
|
+
|
|
287
|
+
&:not(*[data-highlighted]) {
|
|
288
|
+
&:hover {
|
|
289
|
+
background-color: color-mix(in oklab, var(--accent-color) 40%, transparent);
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
&[data-highlighted] {
|
|
294
|
+
background-color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.variant-input-gradient-bg {
|
|
299
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
300
|
+
background: linear-gradient(
|
|
301
|
+
90deg,
|
|
302
|
+
var(--standard-color) 0%,
|
|
303
|
+
var(--standard-color) var(--progress),
|
|
304
|
+
color-mix(in oklab, var(--standard-color) 20%, transparent) var(--progress),
|
|
305
|
+
color-mix(in oklab, var(--standard-color) 20%, transparent) 100%
|
|
306
|
+
);
|
|
307
|
+
|
|
308
|
+
&:not(*[data-highlighted]) {
|
|
309
|
+
&:hover {
|
|
310
|
+
background: linear-gradient(
|
|
311
|
+
90deg,
|
|
312
|
+
var(--accent-color) 0%,
|
|
313
|
+
var(--accent-color) var(--progress),
|
|
314
|
+
color-mix(in oklab, var(--accent-color) 30%, transparent) var(--progress),
|
|
315
|
+
color-mix(in oklab, var(--accent-color) 30%, transparent) 100%
|
|
316
|
+
);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
&[data-highlighted] {
|
|
321
|
+
background: linear-gradient(
|
|
322
|
+
90deg,
|
|
323
|
+
var(--accent-color) 0%,
|
|
324
|
+
var(--accent-color) var(--progress),
|
|
325
|
+
color-mix(in oklab, var(--accent-color) 35%, transparent) var(--progress),
|
|
326
|
+
color-mix(in oklab, var(--accent-color) 35%, transparent) 100%
|
|
327
|
+
);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.cta-button {
|
|
332
|
+
@apply transition-[color,outline-color,background-color] duration-50 ease-in-out rounded-xs outline-1;
|
|
333
|
+
@apply dark:text-white text-black backdrop-blur-lg;
|
|
334
|
+
@apply bg-neutral-500/25 hover:bg-neutral-500 disabled:bg-neutral-500/25;
|
|
335
|
+
@apply outline-neutral-500;
|
|
336
|
+
@apply disabled:outline-neutral-500/50 data-[deemphasized=true]:outline-neutral-500/50;
|
|
337
|
+
@apply disabled:cursor-not-allowed;
|
|
338
|
+
|
|
339
|
+
outline-color: var(--standard-color);
|
|
340
|
+
|
|
341
|
+
&:not(*:disabled) {
|
|
342
|
+
&:hover,
|
|
343
|
+
&:focus {
|
|
344
|
+
@media (hover: hover) {
|
|
345
|
+
background-color: var(--standard-color);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
&[data-deemphasized="true"] {
|
|
350
|
+
outline-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
&:disabled {
|
|
355
|
+
outline-color: color-mix(in oklab, var(--standard-color) 50%, transparent);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.variant-static-text {
|
|
360
|
+
color: var(--strong-accent-text-color);
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.chip {
|
|
364
|
+
@apply dark:text-white text-black;
|
|
365
|
+
@apply drop-shadow-xs;
|
|
366
|
+
@apply flex items-center gap-1 py-1 rounded-xs;
|
|
367
|
+
|
|
368
|
+
@variant size-xs {
|
|
369
|
+
@apply px-[1.5px];
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
@variant size-sm {
|
|
373
|
+
@apply px-0.5;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
@variant size-md {
|
|
377
|
+
@apply px-1;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
@variant size-lg {
|
|
381
|
+
@apply px-2;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
@variant size-xl {
|
|
385
|
+
@apply px-3;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.sized-inner-group-left-padding {
|
|
390
|
+
/* 34px */
|
|
391
|
+
@apply pl-8.5;
|
|
392
|
+
|
|
393
|
+
@variant size-xs {
|
|
394
|
+
/* 22px */
|
|
395
|
+
@apply pl-5.5;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
@variant size-sm {
|
|
399
|
+
/* 30px */
|
|
400
|
+
@apply pl-7.5;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
@variant size-md {
|
|
404
|
+
/* 34px */
|
|
405
|
+
@apply pl-8.5;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
@variant size-lg {
|
|
409
|
+
/* 42px */
|
|
410
|
+
@apply pl-10.5;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@variant size-xl {
|
|
414
|
+
/* 50px */
|
|
415
|
+
@apply pl-12.5;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.sized-inner-group-right-padding {
|
|
420
|
+
/* 34px */
|
|
421
|
+
@apply pr-8.5;
|
|
422
|
+
|
|
423
|
+
@variant size-xs {
|
|
424
|
+
/* 22px */
|
|
425
|
+
@apply pr-5.5;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
@variant size-sm {
|
|
429
|
+
/* 30px */
|
|
430
|
+
@apply pr-7.5;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
@variant size-md {
|
|
434
|
+
/* 34px */
|
|
435
|
+
@apply pr-8.5;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
@variant size-lg {
|
|
439
|
+
/* 42px */
|
|
440
|
+
@apply pr-10.5;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
@variant size-xl {
|
|
444
|
+
/* 50px */
|
|
445
|
+
@apply pr-12.5;
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.sized-list-item-indicator {
|
|
450
|
+
/* 24px */
|
|
451
|
+
@apply size-6;
|
|
452
|
+
|
|
453
|
+
@variant size-xs {
|
|
454
|
+
/* 10px */
|
|
455
|
+
@apply size-2.5;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
@variant size-sm {
|
|
459
|
+
/* 16px */
|
|
460
|
+
@apply size-4;
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
@variant size-md {
|
|
464
|
+
/* 22px */
|
|
465
|
+
@apply size-5.5;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
@variant size-lg {
|
|
469
|
+
/* 28px */
|
|
470
|
+
@apply size-7;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
@variant size-xl {
|
|
474
|
+
/* 34px */
|
|
475
|
+
@apply size-8.5;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.sized-list-item-indicator-height {
|
|
480
|
+
/* Default height is 24px */
|
|
481
|
+
@apply h-6;
|
|
482
|
+
|
|
483
|
+
@variant size-xs {
|
|
484
|
+
/* 10px */
|
|
485
|
+
@apply h-2.5;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
@variant size-sm {
|
|
489
|
+
/* 16px */
|
|
490
|
+
@apply h-4;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
@variant size-md {
|
|
494
|
+
/* 22px */
|
|
495
|
+
@apply h-5.5;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
@variant size-lg {
|
|
499
|
+
/* 28px */
|
|
500
|
+
@apply h-7;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
@variant size-xl {
|
|
504
|
+
/* 34px */
|
|
505
|
+
@apply h-8.5;
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.sized-inner-group-item {
|
|
510
|
+
/* 28px */
|
|
511
|
+
@apply h-7 w-7;
|
|
512
|
+
|
|
513
|
+
@variant size-xs {
|
|
514
|
+
/* 16px */
|
|
515
|
+
@apply h-4 w-4;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
@variant size-sm {
|
|
519
|
+
/* 24px */
|
|
520
|
+
@apply h-6 w-6;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
@variant size-md {
|
|
524
|
+
/* 28px */
|
|
525
|
+
@apply h-7 w-7;
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
@variant size-lg {
|
|
529
|
+
/* 36px */
|
|
530
|
+
@apply h-9 w-9;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
@variant size-xl {
|
|
534
|
+
/* 44px */
|
|
535
|
+
@apply h-11 w-11;
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
.sized-mock-inner-item {
|
|
540
|
+
@apply h-6 w-6;
|
|
541
|
+
|
|
542
|
+
@variant size-xs {
|
|
543
|
+
@apply h-3 w-3;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
@variant size-sm {
|
|
547
|
+
@apply h-5 w-5;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
@variant size-md {
|
|
551
|
+
@apply h-6 w-6;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
@variant size-lg {
|
|
555
|
+
@apply h-8 w-8;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
@variant size-xl {
|
|
559
|
+
@apply h-10 w-10;
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.sized-inner-group-item-height {
|
|
564
|
+
/* 28px */
|
|
565
|
+
@apply h-7;
|
|
566
|
+
|
|
567
|
+
@variant size-xs {
|
|
568
|
+
/* 16px */
|
|
569
|
+
@apply h-4;
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
@variant size-sm {
|
|
573
|
+
/* 24px */
|
|
574
|
+
@apply h-6;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
@variant size-md {
|
|
578
|
+
/* 28px */
|
|
579
|
+
@apply h-7;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
@variant size-lg {
|
|
583
|
+
/* 36px */
|
|
584
|
+
@apply h-9;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
@variant size-xl {
|
|
588
|
+
/* 44px */
|
|
589
|
+
@apply h-11;
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.sized-progress-height {
|
|
594
|
+
@apply h-3;
|
|
595
|
+
|
|
596
|
+
@variant size-xs {
|
|
597
|
+
@apply h-1;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
@variant size-sm {
|
|
601
|
+
@apply h-2;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
@variant size-md {
|
|
605
|
+
@apply h-3;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
@variant size-lg {
|
|
609
|
+
@apply h-4;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
@variant size-xl {
|
|
613
|
+
@apply h-5;
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.sized-status {
|
|
618
|
+
@apply size-2.5;
|
|
619
|
+
|
|
620
|
+
@variant size-xs {
|
|
621
|
+
@apply size-[0.3rem];
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
@variant size-sm {
|
|
625
|
+
@apply size-[0.45rem];
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
@variant size-md {
|
|
629
|
+
@apply size-2.5;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
@variant size-lg {
|
|
633
|
+
@apply size-3;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
@variant size-xl {
|
|
637
|
+
@apply size-4;
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.variant-checkbox-bg {
|
|
642
|
+
@apply dark:bg-layout-dark-inset bg-layout-light-inset transition-colors;
|
|
643
|
+
|
|
644
|
+
&:not(*:disabled) {
|
|
645
|
+
&[data-state="checked"],
|
|
646
|
+
&[data-state="on"] {
|
|
647
|
+
background-color: var(--standard-color) !important;
|
|
648
|
+
&:hover {
|
|
649
|
+
@media (hover: hover) {
|
|
650
|
+
background-color: var(--accent-color) !important;
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
/* Indeterminate/partial state: off-style background + inset colored border. */
|
|
657
|
+
&:not(*:disabled) {
|
|
658
|
+
&[data-state="indeterminate"] {
|
|
659
|
+
box-shadow: inset 0 0 0 1px var(--standard-color);
|
|
660
|
+
&:hover {
|
|
661
|
+
@media (hover: hover) {
|
|
662
|
+
box-shadow: inset 0 0 0 1px var(--accent-color);
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
/* When using a custom color, show a subtle tinted background in the off state. */
|
|
669
|
+
&.custom-color:not(*:disabled) {
|
|
670
|
+
&[data-state="unchecked"],
|
|
671
|
+
&[data-state="off"] {
|
|
672
|
+
background-color: color-mix(in oklab, var(--standard-color) 20%, transparent) !important;
|
|
673
|
+
color: var(--standard-color) !important;
|
|
674
|
+
&:hover {
|
|
675
|
+
@media (hover: hover) {
|
|
676
|
+
background-color: color-mix(
|
|
677
|
+
in oklab,
|
|
678
|
+
var(--standard-color) 30%,
|
|
679
|
+
transparent
|
|
680
|
+
) !important;
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
/* Indeterminate with custom color: same subtle bg as off + inset border + full color icon. */
|
|
685
|
+
&[data-state="indeterminate"] {
|
|
686
|
+
background-color: color-mix(in oklab, var(--standard-color) 20%, transparent) !important;
|
|
687
|
+
box-shadow: inset 0 0 0 1px var(--standard-color);
|
|
688
|
+
color: var(--standard-color) !important;
|
|
689
|
+
&:hover {
|
|
690
|
+
@media (hover: hover) {
|
|
691
|
+
background-color: color-mix(
|
|
692
|
+
in oklab,
|
|
693
|
+
var(--standard-color) 30%,
|
|
694
|
+
transparent
|
|
695
|
+
) !important;
|
|
696
|
+
box-shadow: inset 0 0 0 1px var(--accent-color);
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
&:disabled {
|
|
703
|
+
@apply dark:bg-layout-dark-base/50 bg-layout-light-base/50;
|
|
704
|
+
&[data-state="checked"],
|
|
705
|
+
&[data-state="on"] {
|
|
706
|
+
background-color: color-mix(in oklab, var(--standard-color) 50%, transparent) !important;
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.check-indicator {
|
|
712
|
+
@apply transition-[color,background-color] duration-50 ease-in-out;
|
|
713
|
+
@apply rounded-xs w-5 h-5 bg-transparent;
|
|
714
|
+
@apply grid place-items-center;
|
|
715
|
+
|
|
716
|
+
@apply group-data-disabled/item:text-neutral-500/50;
|
|
717
|
+
@apply dark:text-default-400 text-default-600;
|
|
718
|
+
@apply dark:group-data-highlighted/item:text-black group-data-highlighted/item:text-white;
|
|
719
|
+
@apply dark:group-data-[state=checked]/item:text-black group-data-[state=checked]/item:text-white;
|
|
720
|
+
@apply dark:group-data-[state=indeterminate]/item:text-black group-data-[state=indeterminate]/item:text-white;
|
|
721
|
+
@apply group-data-highlighted/item:group-data-[state=unchecked]/item:text-white;
|
|
722
|
+
@apply dark:group-data-highlighted/item:group-data-[state=unchecked]/item:text-black;
|
|
723
|
+
@apply group-data-[state=unchecked]/item:opacity-50;
|
|
724
|
+
@apply dark:group-data-[state=checked]/item:bg-layout-light-base group-data-[state=checked]/item:bg-layout-dark-base;
|
|
725
|
+
@apply group-data-[state=indeterminate]/item:shadow-[inset_0_0_0_1px_currentColor];
|
|
726
|
+
|
|
727
|
+
&:is(:where(.group\/item)[data-state="unchecked"] *) {
|
|
728
|
+
color: var(--accent-color);
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
&:is(:where(.group\/item)[data-state="checked"] *) {
|
|
732
|
+
background-color: var(--accent-color);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
&:is(:where(.group\/item)[data-state="indeterminate"] *) {
|
|
736
|
+
color: var(--accent-color);
|
|
737
|
+
background-color: transparent;
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.grid-list-item-indicator {
|
|
742
|
+
@apply transition-[color,background-color] duration-50 ease-in-out;
|
|
743
|
+
@apply rounded-xs dark:bg-black/40 bg-white/40;
|
|
744
|
+
@apply grid place-items-center;
|
|
745
|
+
|
|
746
|
+
@apply data-disabled:text-neutral-500/50;
|
|
747
|
+
@apply dark:text-default-400 text-default-600;
|
|
748
|
+
@apply dark:data-highlighted:text-black data-highlighted:text-white;
|
|
749
|
+
@apply dark:data-[state=checked]:text-black data-[state=checked]:text-white;
|
|
750
|
+
@apply dark:data-[state=on]:text-black data-[state=on]:text-white;
|
|
751
|
+
@apply data-highlighted:data-[state=unchecked]:text-white;
|
|
752
|
+
@apply dark:data-highlighted:data-[state=unchecked]:text-black;
|
|
753
|
+
@apply data-[state=unchecked]:opacity-50;
|
|
754
|
+
@apply dark:data-[state=checked]:bg-layout-light-base data-[state=checked]:bg-layout-dark-base;
|
|
755
|
+
@apply dark:data-[state=on]:bg-layout-light-base data-[state=on]:bg-layout-dark-base;
|
|
756
|
+
|
|
757
|
+
&:is(:where(.group\/item)[data-state="unchecked"] *) {
|
|
758
|
+
color: var(--accent-color);
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
&:is(:where(.group\/item)[data-state="checked"] *),
|
|
762
|
+
&:is(:where(.group\/item)[data-state="on"] *) {
|
|
763
|
+
background-color: var(--accent-color);
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
.list-item-extra {
|
|
768
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
769
|
+
@apply w-fit h-5 gap-0 flex flex-row items-center justify-end;
|
|
770
|
+
@apply group-data-disabled/item:text-neutral-500/25;
|
|
771
|
+
@apply dark:text-default-600 text-default-400;
|
|
772
|
+
@apply dark:group-data-highlighted/item:text-black group-data-highlighted/item:text-white;
|
|
773
|
+
@apply dark:group-data-[state=checked]/item:text-black group-data-[state=checked]/item:text-white;
|
|
774
|
+
@apply group-data-highlighted/item:group-data-[state=unchecked]/item:text-white;
|
|
775
|
+
@apply dark:group-data-highlighted/item:group-data-[state=unchecked]/item:text-black;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.table-list {
|
|
779
|
+
.table-list-text {
|
|
780
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
781
|
+
@apply data-disabled:text-neutral-500/50;
|
|
782
|
+
@apply dark:group-data-highlighted/row:text-black group-data-highlighted/row:text-white;
|
|
783
|
+
@apply dark:group-data-[state=checked]/row:text-black group-data-[state=checked]/row:text-white;
|
|
784
|
+
@apply dark:focus:text-black focus:text-white;
|
|
785
|
+
color: var(--accent-color);
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
.table-list-item {
|
|
789
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
790
|
+
@apply cursor-pointer;
|
|
791
|
+
@apply data-disabled:text-neutral-500/50;
|
|
792
|
+
@apply dark:data-highlighted:text-black data-highlighted:text-white;
|
|
793
|
+
@apply dark:data-[state=checked]:text-black data-[state=checked]:text-white;
|
|
794
|
+
color: var(--accent-color);
|
|
795
|
+
&[data-highlighted] {
|
|
796
|
+
background-color: color-mix(in oklab, var(--accent-color) 40%, transparent);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
&[data-state="checked"] {
|
|
800
|
+
background-color: color-mix(in oklab, var(--accent-color) 60%, transparent);
|
|
801
|
+
&[data-highlighted] {
|
|
802
|
+
background-color: color-mix(in oklab, var(--accent-color) 80%, transparent);
|
|
803
|
+
@apply outline-2 dark:outline-black outline-white outline-offset-[-3px];
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
.responsive-accent-bg {
|
|
810
|
+
background-color: color-mix(in oklab, var(--accent-color) 80%, transparent);
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
.highlight-list-item {
|
|
814
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
815
|
+
@apply cursor-pointer;
|
|
816
|
+
@apply data-disabled:text-neutral-500/50;
|
|
817
|
+
@apply dark:data-highlighted:text-black data-highlighted:text-white;
|
|
818
|
+
color: var(--accent-color);
|
|
819
|
+
&[data-highlighted] {
|
|
820
|
+
background-color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
&[data-state="open"] {
|
|
824
|
+
background-color: color-mix(in oklab, var(--accent-color) 25%, transparent);
|
|
825
|
+
&[data-highlighted] {
|
|
826
|
+
background-color: color-mix(in oklab, var(--accent-color) 50%, transparent);
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
}
|
|
830
|
+
|
|
831
|
+
.variant-mock-inner-item {
|
|
832
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
833
|
+
@apply rounded-[1px];
|
|
834
|
+
@apply dark:text-black text-white;
|
|
835
|
+
|
|
836
|
+
background-color: var(--accent-color);
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.variant-mock-item-bg {
|
|
840
|
+
@apply transition-colors duration-50 ease-in-out;
|
|
841
|
+
background-color: color-mix(in oklab, var(--accent-color) 20%, transparent);
|
|
842
|
+
|
|
843
|
+
&:hover {
|
|
844
|
+
@media (hover: hover) {
|
|
845
|
+
background-color: color-mix(in oklab, var(--accent-color) 30%, transparent);
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
&:focus,
|
|
850
|
+
&[data-state="open"] {
|
|
851
|
+
background-color: color-mix(in oklab, var(--accent-color) 40%, transparent);
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.colored-carrot-stroke {
|
|
856
|
+
stroke: var(--card-border-color);
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
.colored-carrot-invert-fill {
|
|
860
|
+
fill: var(--strong-accent-text-color);
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
.card {
|
|
864
|
+
@apply rounded-sm shadow-lg border-2;
|
|
865
|
+
border-color: var(--card-border-color);
|
|
866
|
+
@apply dark:bg-layout-dark-inset bg-layout-light-inset;
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.card-transparent {
|
|
870
|
+
@apply rounded-md shadow-lg;
|
|
871
|
+
@apply outline-2;
|
|
872
|
+
outline-color: var(--card-border-color);
|
|
873
|
+
/*border-color: var(--card-border-color);*/
|
|
874
|
+
@apply dark:bg-layout-dark-deep-inset/80 bg-layout-light-deep-inset/80 backdrop-blur-lg;
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
.card-invert {
|
|
878
|
+
@apply rounded-sm shadow-lg;
|
|
879
|
+
background-color: var(--strong-accent-text-color);
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
.sized-height {
|
|
883
|
+
@apply h-8;
|
|
884
|
+
|
|
885
|
+
@variant size-xs {
|
|
886
|
+
@apply h-5;
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
@variant size-sm {
|
|
890
|
+
@apply h-7;
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
@variant size-md {
|
|
894
|
+
@apply h-8;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
@variant size-lg {
|
|
898
|
+
@apply h-10;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
@variant size-xl {
|
|
902
|
+
@apply h-12;
|
|
903
|
+
}
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
.sized-width {
|
|
907
|
+
@apply w-8;
|
|
908
|
+
|
|
909
|
+
@variant size-xs {
|
|
910
|
+
@apply w-5;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
@variant size-sm {
|
|
914
|
+
@apply w-7;
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
@variant size-md {
|
|
918
|
+
@apply w-8;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
@variant size-lg {
|
|
922
|
+
@apply w-10;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
@variant size-xl {
|
|
926
|
+
@apply w-12;
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
.sized-text {
|
|
931
|
+
@apply text-base;
|
|
932
|
+
|
|
933
|
+
@variant size-xs {
|
|
934
|
+
@apply text-[0.6rem];
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
@variant size-sm {
|
|
938
|
+
@apply text-xs;
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
@variant size-md {
|
|
942
|
+
@apply text-base;
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
@variant size-lg {
|
|
946
|
+
@apply text-xl;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
@variant size-xl {
|
|
950
|
+
@apply text-2xl;
|
|
951
|
+
}
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
.sized-image-input {
|
|
955
|
+
@apply size-40;
|
|
956
|
+
|
|
957
|
+
@variant size-xs {
|
|
958
|
+
@apply size-24;
|
|
959
|
+
}
|
|
960
|
+
|
|
961
|
+
@variant size-sm {
|
|
962
|
+
@apply size-32;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
@variant size-md {
|
|
966
|
+
@apply size-40;
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
@variant size-lg {
|
|
970
|
+
@apply size-48;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
@variant size-xl {
|
|
974
|
+
@apply size-56;
|
|
975
|
+
}
|
|
976
|
+
}
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
@layer utilities {
|
|
980
|
+
.responsive {
|
|
981
|
+
--standard-color: var(--color-default-500);
|
|
982
|
+
--light-color: var(--color-default-400);
|
|
983
|
+
--dark-color: var(--color-default-600);
|
|
984
|
+
--opacity: 100%;
|
|
985
|
+
--accent-color: var(--dark-color);
|
|
986
|
+
--responsive-color: var(--standard-color);
|
|
987
|
+
--lightest-accent-text-color: var(--color-default-200);
|
|
988
|
+
--darkest-accent-text-color: var(--color-default-800);
|
|
989
|
+
--light-accent-text-color: var(--color-default-400);
|
|
990
|
+
--dark-accent-text-color: var(--color-default-600);
|
|
991
|
+
--card-border-color: var(--light-accent-text-color);
|
|
992
|
+
--strong-accent-text-color: var(--darkest-accent-text-color);
|
|
993
|
+
--weak-accent-text-color: var(--dark-accent-text-color);
|
|
994
|
+
|
|
995
|
+
&:where(.dark, .dark *) {
|
|
996
|
+
--accent-color: var(--light-color);
|
|
997
|
+
--strong-accent-text-color: var(--lightest-accent-text-color);
|
|
998
|
+
--weak-accent-text-color: var(--light-accent-text-color);
|
|
999
|
+
--card-border-color: var(--dark-accent-text-color);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
@variant custom-color {
|
|
1003
|
+
--standard-color: var(--custom-color);
|
|
1004
|
+
--light-color: color-mix(in oklab, var(--custom-color) 80%, white);
|
|
1005
|
+
--dark-color: color-mix(in oklab, var(--custom-color) 80%, black);
|
|
1006
|
+
--lightest-accent-text-color: var(--light-color);
|
|
1007
|
+
--darkest-accent-text-color: var(--dark-color);
|
|
1008
|
+
--light-accent-text-color: var(--custom-color);
|
|
1009
|
+
--dark-accent-text-color: var(--custom-color);
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
@variant primary {
|
|
1013
|
+
--standard-color: var(--color-primary-500);
|
|
1014
|
+
--light-color: var(--color-primary-400);
|
|
1015
|
+
--dark-color: var(--color-primary-600);
|
|
1016
|
+
--lightest-accent-text-color: var(--color-primary-400);
|
|
1017
|
+
--darkest-accent-text-color: var(--color-primary-600);
|
|
1018
|
+
--light-accent-text-color: var(--color-primary-500);
|
|
1019
|
+
--dark-accent-text-color: var(--color-primary-500);
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
@variant secondary {
|
|
1023
|
+
--standard-color: var(--color-secondary-500);
|
|
1024
|
+
--light-color: var(--color-secondary-400);
|
|
1025
|
+
--dark-color: var(--color-secondary-600);
|
|
1026
|
+
--lightest-accent-text-color: var(--color-secondary-400);
|
|
1027
|
+
--darkest-accent-text-color: var(--color-secondary-600);
|
|
1028
|
+
--light-accent-text-color: var(--color-secondary-500);
|
|
1029
|
+
--dark-accent-text-color: var(--color-secondary-500);
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
@variant tertiary {
|
|
1033
|
+
--standard-color: var(--color-tertiary-500);
|
|
1034
|
+
--light-color: var(--color-tertiary-400);
|
|
1035
|
+
--dark-color: var(--color-tertiary-600);
|
|
1036
|
+
--lightest-accent-text-color: var(--color-tertiary-400);
|
|
1037
|
+
--darkest-accent-text-color: var(--color-tertiary-600);
|
|
1038
|
+
--light-accent-text-color: var(--color-tertiary-500);
|
|
1039
|
+
--dark-accent-text-color: var(--color-tertiary-500);
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
@variant success {
|
|
1043
|
+
--standard-color: var(--color-success-500);
|
|
1044
|
+
--light-color: var(--color-success-400);
|
|
1045
|
+
--dark-color: var(--color-success-600);
|
|
1046
|
+
--lightest-accent-text-color: var(--color-success-400);
|
|
1047
|
+
--darkest-accent-text-color: var(--color-success-600);
|
|
1048
|
+
--light-accent-text-color: var(--color-success-500);
|
|
1049
|
+
--dark-accent-text-color: var(--color-success-500);
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
@variant warning {
|
|
1053
|
+
--standard-color: var(--color-warning-500);
|
|
1054
|
+
--light-color: var(--color-warning-400);
|
|
1055
|
+
--dark-color: var(--color-warning-600);
|
|
1056
|
+
--lightest-accent-text-color: var(--color-warning-400);
|
|
1057
|
+
--darkest-accent-text-color: var(--color-warning-600);
|
|
1058
|
+
--light-accent-text-color: var(--color-warning-500);
|
|
1059
|
+
--dark-accent-text-color: var(--color-warning-500);
|
|
1060
|
+
}
|
|
1061
|
+
|
|
1062
|
+
@variant error {
|
|
1063
|
+
--standard-color: var(--color-error-500);
|
|
1064
|
+
--light-color: var(--color-error-400);
|
|
1065
|
+
--dark-color: var(--color-error-600);
|
|
1066
|
+
--lightest-accent-text-color: var(--color-error-400);
|
|
1067
|
+
--darkest-accent-text-color: var(--color-error-600);
|
|
1068
|
+
--light-accent-text-color: var(--color-error-500);
|
|
1069
|
+
--dark-accent-text-color: var(--color-error-500);
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
@variant info {
|
|
1073
|
+
--standard-color: var(--color-info-500);
|
|
1074
|
+
--light-color: var(--color-info-400);
|
|
1075
|
+
--dark-color: var(--color-info-600);
|
|
1076
|
+
--lightest-accent-text-color: var(--color-info-400);
|
|
1077
|
+
--darkest-accent-text-color: var(--color-info-600);
|
|
1078
|
+
--light-accent-text-color: var(--color-info-500);
|
|
1079
|
+
--dark-accent-text-color: var(--color-info-500);
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
1082
|
+
|
|
1083
|
+
.icon-standard {
|
|
1084
|
+
/* Explicit width+height avoids SVG intrinsic width drift across icon sets. */
|
|
1085
|
+
@apply block h-3/5 w-3/5 shrink-0;
|
|
1086
|
+
}
|
|
1087
|
+
|
|
1088
|
+
.icon-larger {
|
|
1089
|
+
/* Explicit width+height avoids SVG intrinsic width drift across icon sets. */
|
|
1090
|
+
@apply block h-[70%] w-[70%] shrink-0;
|
|
1091
|
+
}
|
|
1092
|
+
|
|
1093
|
+
.icon-slot {
|
|
1094
|
+
@apply grid h-full w-full place-items-center leading-none;
|
|
1095
|
+
@apply [&_svg]:block [&_svg]:h-3/5 [&_svg]:w-3/5 [&_svg]:shrink-0;
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.input-label-field-units-grid {
|
|
1099
|
+
display: grid;
|
|
1100
|
+
grid-template-columns: auto minmax(4rem, 1fr) auto;
|
|
1101
|
+
grid-template-areas: "label input units";
|
|
1102
|
+
grid-template-rows: auto;
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.input-field-units-grid {
|
|
1106
|
+
display: grid;
|
|
1107
|
+
grid-template-columns: minmax(4rem, 1fr) auto;
|
|
1108
|
+
grid-template-areas: "input units";
|
|
1109
|
+
grid-template-rows: auto;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
.input-label-field-grid {
|
|
1113
|
+
display: grid;
|
|
1114
|
+
grid-template-columns: auto minmax(4rem, 1fr);
|
|
1115
|
+
grid-template-areas: "label input";
|
|
1116
|
+
grid-template-rows: auto;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.input-field-grid {
|
|
1120
|
+
display: grid;
|
|
1121
|
+
grid-template-columns: 1fr;
|
|
1122
|
+
grid-template-areas: "input";
|
|
1123
|
+
grid-template-rows: auto;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
.grid-area-input-label {
|
|
1127
|
+
grid-area: label;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
.grid-area-input-field {
|
|
1131
|
+
grid-area: input;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
.grid-area-input-units {
|
|
1135
|
+
grid-area: units;
|
|
1136
|
+
}
|
|
1137
|
+
|
|
1138
|
+
.app-layout {
|
|
1139
|
+
display: grid;
|
|
1140
|
+
--padding-width: 10px;
|
|
1141
|
+
padding: var(--padding-width);
|
|
1142
|
+
|
|
1143
|
+
grid-template-areas:
|
|
1144
|
+
"header"
|
|
1145
|
+
"."
|
|
1146
|
+
"content"
|
|
1147
|
+
"."
|
|
1148
|
+
"left"
|
|
1149
|
+
"."
|
|
1150
|
+
"menu"
|
|
1151
|
+
"."
|
|
1152
|
+
"footer";
|
|
1153
|
+
grid-template-columns: calc(100vw - 2 * var(--padding-width));
|
|
1154
|
+
grid-template-rows:
|
|
1155
|
+
auto var(--padding-width) minmax(0, var(--content-size))
|
|
1156
|
+
var(--content-left-gap) minmax(0, var(--left-size)) var(--padding-width)
|
|
1157
|
+
auto var(--content-footer-gap) minmax(0, auto);
|
|
1158
|
+
|
|
1159
|
+
@variant desktop {
|
|
1160
|
+
grid-template-areas:
|
|
1161
|
+
"menu . header header header . right "
|
|
1162
|
+
"menu . . . . . right "
|
|
1163
|
+
"menu . left . content . right "
|
|
1164
|
+
"menu . . . . . . "
|
|
1165
|
+
"menu . footer footer footer footer footer";
|
|
1166
|
+
grid-template-columns:
|
|
1167
|
+
auto var(--padding-width) var(--left-size) var(--content-left-gap) minmax(
|
|
1168
|
+
0,
|
|
1169
|
+
var(--content-size)
|
|
1170
|
+
)
|
|
1171
|
+
var(--content-right-gap)
|
|
1172
|
+
var(--right-size);
|
|
1173
|
+
grid-template-rows: auto var(--padding-width) 1fr var(--content-footer-gap) minmax(0, auto);
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
.grid-area-menu {
|
|
1177
|
+
grid-area: menu;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.grid-area-header {
|
|
1181
|
+
grid-area: header;
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
.grid-area-left {
|
|
1185
|
+
grid-area: left;
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
.grid-area-right {
|
|
1189
|
+
grid-area: right;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.grid-area-content {
|
|
1193
|
+
grid-area: content;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
.grid-area-footer {
|
|
1197
|
+
grid-area: footer;
|
|
1198
|
+
}
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
.tooltip-content {
|
|
1202
|
+
will-change: transform, opacity;
|
|
1203
|
+
animation-duration: 300ms;
|
|
1204
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
1205
|
+
transform-origin: var(--radix-tooltip-content-transform-origin);
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
.tooltip-content[data-side="top"] {
|
|
1209
|
+
animation-name: slideDownAndFade;
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
.tooltip-content[data-side="right"] {
|
|
1213
|
+
animation-name: slideLeftAndFade;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
.tooltip-content[data-side="bottom"] {
|
|
1217
|
+
animation-name: slideUpAndFade;
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
.tooltip-content[data-side="left"] {
|
|
1221
|
+
animation-name: slideRightAndFade;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
@keyframes scaleIn {
|
|
1225
|
+
from {
|
|
1226
|
+
opacity: 0;
|
|
1227
|
+
transform: scale(0);
|
|
1228
|
+
}
|
|
1229
|
+
to {
|
|
1230
|
+
opacity: 1;
|
|
1231
|
+
transform: scale(1);
|
|
1232
|
+
}
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.popover-content {
|
|
1236
|
+
will-change: transform, opacity;
|
|
1237
|
+
animation-duration: 300ms;
|
|
1238
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
1239
|
+
transform-origin: var(--radix-popover-content-transform-origin);
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
.popover-content[data-state="open"][data-side="top"] {
|
|
1243
|
+
animation-name: slideDownAndFade;
|
|
1244
|
+
}
|
|
1245
|
+
.popover-content[data-state="open"][data-side="right"] {
|
|
1246
|
+
animation-name: slideLeftAndFade;
|
|
1247
|
+
}
|
|
1248
|
+
.popover-content[data-state="open"][data-side="bottom"] {
|
|
1249
|
+
animation-name: slideUpAndFade;
|
|
1250
|
+
}
|
|
1251
|
+
.popover-content[data-state="open"][data-side="left"] {
|
|
1252
|
+
animation-name: slideRightAndFade;
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
.dropdown-content {
|
|
1256
|
+
will-change: transform, opacity;
|
|
1257
|
+
animation-duration: 300ms;
|
|
1258
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
1259
|
+
transform-origin: var(--radix-dropdown-content-transform-origin);
|
|
1260
|
+
}
|
|
1261
|
+
|
|
1262
|
+
.dropdown-content[data-state="open"][data-side="top"] {
|
|
1263
|
+
animation-name: slideDownAndFade;
|
|
1264
|
+
}
|
|
1265
|
+
.dropdown-content[data-state="open"][data-side="right"] {
|
|
1266
|
+
animation-name: slideLeftAndFade;
|
|
1267
|
+
}
|
|
1268
|
+
.dropdown-content[data-state="open"][data-side="bottom"] {
|
|
1269
|
+
animation-name: slideUpAndFade;
|
|
1270
|
+
}
|
|
1271
|
+
.dropdown-content[data-state="open"][data-side="left"] {
|
|
1272
|
+
animation-name: slideRightAndFade;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
.animated-modal {
|
|
1276
|
+
will-change: transform, opacity;
|
|
1277
|
+
animation-duration: 300ms;
|
|
1278
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
1279
|
+
}
|
|
1280
|
+
|
|
1281
|
+
.animated-modal[data-state="open"] {
|
|
1282
|
+
animation-name: slideUpAndFade;
|
|
1283
|
+
}
|
|
1284
|
+
|
|
1285
|
+
.animated-modal[data-state="closed"] {
|
|
1286
|
+
animation-name: slideDownAndFade;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
.CollapsibleVerticalContent {
|
|
1290
|
+
overflow: hidden;
|
|
1291
|
+
}
|
|
1292
|
+
.CollapsibleVerticalContent[data-state="open"] {
|
|
1293
|
+
animation: expandDown 200ms ease-out;
|
|
1294
|
+
}
|
|
1295
|
+
.CollapsibleVerticalContent[data-state="closed"] {
|
|
1296
|
+
animation: expandUp 100ms ease-out;
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
.CollapsibleHorizontalContent {
|
|
1300
|
+
overflow: hidden;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
.CollapsibleHorizontalContent[data-state="open"] {
|
|
1304
|
+
animation: expandRight 200ms ease-out;
|
|
1305
|
+
}
|
|
1306
|
+
|
|
1307
|
+
.CollapsibleHorizontalContent[data-state="closed"] {
|
|
1308
|
+
animation: expandLeft 100ms ease-out;
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
.animate-bounce-spin {
|
|
1312
|
+
animation: bounce-spin 1.5s infinite;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
@keyframes bounce-spin {
|
|
1316
|
+
0% {
|
|
1317
|
+
transform: translateY(0%) rotate(0deg) scale(0.8);
|
|
1318
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
1319
|
+
}
|
|
1320
|
+
50% {
|
|
1321
|
+
transform: translateY(-30%) rotate(180deg) scale(1);
|
|
1322
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
1323
|
+
}
|
|
1324
|
+
100% {
|
|
1325
|
+
transform: translateY(0%) rotate(360deg) scale(0.8);
|
|
1326
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
1327
|
+
}
|
|
1328
|
+
}
|
|
1329
|
+
|
|
1330
|
+
@keyframes expandDown {
|
|
1331
|
+
from {
|
|
1332
|
+
height: 0;
|
|
1333
|
+
}
|
|
1334
|
+
to {
|
|
1335
|
+
height: var(--radix-collapsible-content-height);
|
|
1336
|
+
}
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
@keyframes expandUp {
|
|
1340
|
+
from {
|
|
1341
|
+
height: var(--radix-collapsible-content-height);
|
|
1342
|
+
}
|
|
1343
|
+
to {
|
|
1344
|
+
height: 0;
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
@keyframes expandLeft {
|
|
1349
|
+
from {
|
|
1350
|
+
width: var(--radix-collapsible-content-width);
|
|
1351
|
+
}
|
|
1352
|
+
to {
|
|
1353
|
+
width: 0;
|
|
1354
|
+
}
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
@keyframes expandRight {
|
|
1358
|
+
from {
|
|
1359
|
+
width: 0;
|
|
1360
|
+
}
|
|
1361
|
+
to {
|
|
1362
|
+
width: var(--radix-collapsible-content-width);
|
|
1363
|
+
}
|
|
1364
|
+
}
|
|
1365
|
+
|
|
1366
|
+
@keyframes slideUpAndFade {
|
|
1367
|
+
from {
|
|
1368
|
+
opacity: 0;
|
|
1369
|
+
transform: translateY(2px);
|
|
1370
|
+
}
|
|
1371
|
+
to {
|
|
1372
|
+
opacity: 1;
|
|
1373
|
+
transform: translateY(0);
|
|
1374
|
+
}
|
|
1375
|
+
}
|
|
1376
|
+
|
|
1377
|
+
@keyframes slideRightAndFade {
|
|
1378
|
+
from {
|
|
1379
|
+
opacity: 0;
|
|
1380
|
+
transform: translateX(-2px);
|
|
1381
|
+
}
|
|
1382
|
+
to {
|
|
1383
|
+
opacity: 1;
|
|
1384
|
+
transform: translateX(0);
|
|
1385
|
+
}
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
@keyframes slideDownAndFade {
|
|
1389
|
+
from {
|
|
1390
|
+
opacity: 0;
|
|
1391
|
+
transform: translateY(-2px);
|
|
1392
|
+
}
|
|
1393
|
+
to {
|
|
1394
|
+
opacity: 1;
|
|
1395
|
+
transform: translateY(0);
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1398
|
+
|
|
1399
|
+
@keyframes slideLeftAndFade {
|
|
1400
|
+
from {
|
|
1401
|
+
opacity: 0;
|
|
1402
|
+
transform: translateX(2px);
|
|
1403
|
+
}
|
|
1404
|
+
to {
|
|
1405
|
+
opacity: 1;
|
|
1406
|
+
transform: translateX(0);
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
[data-state="open"] > .radix-accordion-content {
|
|
1411
|
+
height: var(--radix-accordion-content-height);
|
|
1412
|
+
}
|
|
1413
|
+
}
|
|
1414
|
+
|
|
1415
|
+
.react-colorful__saturation {
|
|
1416
|
+
border-radius: 2px !important;
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
.react-colorful__hue {
|
|
1420
|
+
border-radius: 2px !important;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
.react-colorful__saturation-pointer {
|
|
1424
|
+
width: 16px !important;
|
|
1425
|
+
height: 16px !important;
|
|
1426
|
+
border-radius: 2px !important;
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
.react-colorful__hue-pointer {
|
|
1430
|
+
border-radius: 2px !important;
|
|
1431
|
+
width: 10px !important;
|
|
1432
|
+
}
|