zabi-components 5.0.6 → 5.0.8
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/atoms/Card.svelte
CHANGED
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
|
|
27
27
|
const cardClasses = $derived(() => {
|
|
28
28
|
const baseClasses =
|
|
29
|
-
"
|
|
29
|
+
"rounded-lg transition-all duration-200 min-w-64 bg-surface-level-0";
|
|
30
30
|
const interactiveClasses = onclick
|
|
31
|
-
? "cursor-pointer hover:bg-surface-hover hover:border-focus"
|
|
31
|
+
? "cursor-pointer hover:shadow-adaptive-md hover:bg-surface-hover hover:border-focus"
|
|
32
32
|
: "";
|
|
33
33
|
const widthClasses = fullWidth ? "w-full" : "";
|
|
34
34
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
{#if isOpen}
|
|
56
56
|
<div
|
|
57
|
-
class="fixed inset-0 bg-
|
|
57
|
+
class="fixed inset-0 bg-background/50 dark:bg-background/80 flex items-end md:items-center justify-center p-0 md:p-4 z-50"
|
|
58
58
|
onclick={handleBackdropClick}
|
|
59
59
|
onkeydown={handleKeydown}
|
|
60
60
|
role="dialog"
|
|
@@ -62,17 +62,17 @@
|
|
|
62
62
|
tabindex="-1"
|
|
63
63
|
>
|
|
64
64
|
<div
|
|
65
|
-
class="bg-
|
|
65
|
+
class="bg-surface-elevated rounded-t-2xl md:rounded-lg shadow-xl min-w-[320px] {sizeClasses} max-h-[90vh] overflow-y-auto animate-[slideUp_0.3s_ease-out] md:animate-none"
|
|
66
66
|
>
|
|
67
67
|
<!-- Header -->
|
|
68
68
|
<div
|
|
69
|
-
class="flex items-center justify-between p-6 border-b border-
|
|
69
|
+
class="flex items-center justify-between p-6 border-b border-(--color-border)"
|
|
70
70
|
>
|
|
71
71
|
<h2 class="text-xl font-semibold text-headline">{title}</h2>
|
|
72
72
|
<button
|
|
73
73
|
type="button"
|
|
74
74
|
onclick={closeModal}
|
|
75
|
-
class="text-
|
|
75
|
+
class="text-description hover:text-headline text-2xl cursor-pointer transition-colors"
|
|
76
76
|
aria-label="Close"
|
|
77
77
|
>
|
|
78
78
|
×
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
<!-- Footer -->
|
|
88
88
|
{#if footer}
|
|
89
89
|
<div
|
|
90
|
-
class="flex justify-end gap-3 p-6 border-t border-
|
|
90
|
+
class="flex justify-end gap-3 p-6 border-t border-(--color-border)"
|
|
91
91
|
>
|
|
92
92
|
{@render footer?.()}
|
|
93
93
|
</div>
|
package/dist/zabi-components.css
CHANGED
|
@@ -318,38 +318,16 @@ body {
|
|
|
318
318
|
background-color: var(--color-surface-elevated);
|
|
319
319
|
}
|
|
320
320
|
|
|
321
|
-
|
|
322
|
-
background-color: var(--color-surface-level-0-hover);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.bg-surface-level-1:hover {
|
|
326
|
-
background-color: var(--color-surface-level-1-hover);
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
.bg-surface-level-2:hover {
|
|
330
|
-
background-color: var(--color-surface-level-2-hover);
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
.bg-surface-elevated:hover {
|
|
334
|
-
background-color: var(--color-surface-elevated-hover);
|
|
335
|
-
}
|
|
321
|
+
/* Global hover effects removed - components should define their own hover states */
|
|
336
322
|
|
|
337
323
|
.bg-surface-hover {
|
|
338
324
|
background-color: var(--color-surface-hover);
|
|
339
325
|
}
|
|
340
326
|
|
|
341
|
-
.bg-surface-hover:hover {
|
|
342
|
-
background-color: var(--color-surface-hover);
|
|
343
|
-
}
|
|
344
|
-
|
|
345
327
|
.bg-surface-active {
|
|
346
328
|
background-color: var(--color-surface-active);
|
|
347
329
|
}
|
|
348
330
|
|
|
349
|
-
.bg-surface-active:active {
|
|
350
|
-
background-color: var(--color-surface-active);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
331
|
.bg-page {
|
|
354
332
|
background-color: var(--color-page);
|
|
355
333
|
}
|
package/package.json
CHANGED