zabi-components 5.0.14 → 5.0.17

package/README.md

@@ -40,6 +40,57 @@ npm install svelte@^5.38.10
 npm install @sveltejs/kit@^2.0.0  # Optional, for SvelteKit projects
 ```
 
+## Theme Setup
+
+Zabi Components includes a comprehensive theme system with Tailwind CSS v4. You need to import the theme before using components.
+
+### Quick Setup
+
+**For projects with existing Tailwind CSS:**
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import 'zabi-components/theme-only';
+@import 'zabi-components/dist/zabi-components.css';
+```
+
+**For standalone projects (no Tailwind setup):**
+
+```css
+/* app.css */
+@import 'zabi-components/theme';
+@import 'zabi-components/dist/zabi-components.css';
+```
+
+### With Dark Mode
+
+```css
+@import "tailwindcss";
+@import 'zabi-components/theme-only';
+@import 'zabi-components/theme-dark-only'; /* Add dark mode support */
+@import 'zabi-components/dist/zabi-components.css';
+```
+
+### Extending the Theme
+
+You can extend the theme with custom colors and fonts:
+
+```css
+@import "tailwindcss";
+@import 'zabi-components/theme-only';
+
+/* Your custom theme extensions */
+@theme {
+  --font-family-title: 'Your Font', sans-serif;
+  --color-custom-primary: #ff0000;
+}
+
+@import 'zabi-components/dist/zabi-components.css';
+```
+
+> 📖 **Complete Theme Guide**: See [THEME.md](./THEME.md) for comprehensive documentation on theme usage, customization, dark mode, and advanced patterns.
+
 ## Import Methods
 
 Zabi Components supports multiple import patterns:

package/dist/atoms/Badge.svelte

@@ -45,18 +45,18 @@
         // Note: Using text-white instead of text-inverse to ensure light text in both light and dark modes
         const variantClass =
             variant === "success"
-                ? "bg-success border-[var(--color-success)] text-white"
+                ? "bg-success border-success text-card"
                 : variant === "warning"
-                  ? "bg-warning-weak border-[var(--color-warning-weak)] text-white"
+                  ? "bg-warning border-warning text-card"
                   : variant === "error"
-                    ? "bg-error border-[var(--color-error)] text-white"
+                    ? "bg-error border-error text-card"
                     : variant === "info"
-                      ? "bg-info border-[var(--color-info)] text-white"
+                      ? "bg-info border-info text-card"
                       : variant === "neutral"
-                        ? "bg-neutral border-[var(--color-neutral)] text-white"
+                        ? "bg-neutral border-neutral text-card"
                         : variant === "energetic"
-                          ? "bg-energetic-weak border-[var(--color-energetic-weak)] text-white"
-                          : "bg-secondary border-[var(--color-secondary)] text-white"; // default
+                          ? "bg-energetic border-energetic text-card"
+                          : "bg-secondary border-secondary text-card"; // default
 
         return `${baseClasses} ${sizeClass} ${variantClass}`.trim();
     });
@@ -75,22 +75,22 @@
 <span class={classes()}>
     {#if showIcon}
         {#if variant === "success"}
-            <Check size={iconSize()} class="{iconSpacingClass()} text-white" />
+            <Check size={iconSize()} class="{iconSpacingClass()} text-card" />
         {:else if variant === "warning"}
             <AlertTriangle
                 size={iconSize()}
-                class="{iconSpacingClass()} text-white"
+                class="{iconSpacingClass()} text-card"
             />
         {:else if variant === "error"}
-            <X size={iconSize()} class="{iconSpacingClass()} text-white" />
+            <X size={iconSize()} class="{iconSpacingClass()} text-card" />
         {:else if variant === "info"}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
         {:else if variant === "neutral"}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
         {:else if variant === "energetic"}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
         {:else}
-            <Info size={iconSize()} class="{iconSpacingClass()} text-white" />
+            <Info size={iconSize()} class="{iconSpacingClass()} text-card" />
         {/if}
     {/if}
     {text}

package/dist/atoms/Button.svelte

@@ -32,28 +32,28 @@
                 leading: "leading-5",
                 tracking: "tracking-[0.1px]",
                 radius: "rounded-lg",
-                gap: "gap-2"
+                gap: "gap-2",
             };
         } else if (size === "lg") {
             return {
-                padding: "px-12 py-8",
-                text: "text-2xl",
+                padding: "px-8 py-4",
+                text: "text-lg",
                 font: "font-normal",
                 leading: "leading-8",
                 tracking: "tracking-normal",
-                radius: "rounded-2xl",
-                gap: "gap-3"
+                radius: "rounded-xl",
+                gap: "gap-3",
             };
         } else {
             // default md
             return {
-                padding: "px-6 py-4",
+                padding: "px-5 py-3",
                 text: "text-base",
                 font: "font-medium",
                 leading: "leading-6",
                 tracking: "tracking-[0.15px]",
                 radius: "rounded-lg",
-                gap: "gap-2"
+                gap: "gap-2",
             };
         }
     });
@@ -67,7 +67,7 @@
               : variant === "danger"
                 ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                 : variant === "ghost"
-                  ? "bg-transparent text-headline hover:bg-surface-hover active:bg-surface-active focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 disabled:text-disabled"
+                  ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 focus:ring-2 focus:ring-base-500 focus:ring-offset-2 disabled:text-disabled"
                   : "bg-action-primary text-inverse hover:bg-action-primary-hover active:bg-action-primary-active focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"; // default primary
     });
 

package/dist/atoms/Card.svelte

@@ -28,9 +28,9 @@
 
     const cardClasses = $derived(() => {
         const baseClasses =
-            "rounded-lg transition-all duration-200 min-w-64 bg-surface-elevated shadow-sm";
+            "rounded-lg transition-all duration-200 min-w-64 bg-card shadow-sm";
         const interactiveClasses = onclick
-            ? "cursor-pointer hover:shadow-lg hover:bg-surface-hover"
+            ? "cursor-pointer hover:shadow-lg hover:bg-card-hover"
             : "";
         const widthClasses = fullWidth ? "w-full" : "";
 

package/dist/atoms/Checkbox.svelte

@@ -30,8 +30,9 @@
 
     // Checkbox container classes matching M3 design
     const checkboxContainerClasses = $derived(() => {
-        const baseClasses = "relative inline-flex items-center justify-center w-5 h-5 rounded transition-all duration-200";
-        
+        const baseClasses =
+            "relative inline-flex items-center justify-center w-5 h-5 rounded transition-all duration-200";
+
         if (disabled) {
             return `${baseClasses} opacity-50 cursor-not-allowed`;
         }
@@ -41,13 +42,13 @@
     // Checkbox border and background classes matching M3 design
     const checkboxBoxClasses = $derived(() => {
         if (checked) {
-            return disabled 
-                ? "border-0 bg-brand-300"
-                : "border-0 bg-brand-600";
+            return disabled
+                ? "border-0 opacity-50 bg-brand-500"
+                : "border-0 bg-brand-500";
         }
         return disabled
-            ? "border-2 border-stone-400 bg-transparent"
-            : "border-2 border-stone-400 bg-transparent";
+            ? "border-2 border-base-400 bg-transparent"
+            : "border-2 border-base-400 bg-transparent";
     });
 
     function handleChange(event: Event) {
@@ -63,7 +64,9 @@
 <div class="flex items-center gap-2">
     <label
         for={checkboxId}
-        class="flex items-center gap-2 cursor-pointer {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+        class="flex items-center gap-2 cursor-pointer {disabled
+            ? 'opacity-50 cursor-not-allowed'
+            : ''}"
     >
         <div class={checkboxContainerClasses()}>
             <input
@@ -78,16 +81,16 @@
             />
             <div class="absolute inset-0 {checkboxBoxClasses()} rounded"></div>
             {#if checked}
-                <svg 
-                    class="absolute w-3 h-3 text-white pointer-events-none z-10" 
-                    fill="none" 
-                    stroke="currentColor" 
+                <svg
+                    class="absolute w-3 h-3 text-base-50 pointer-events-none z-10"
+                    fill="none"
+                    stroke="currentColor"
                     viewBox="0 0 24 24"
                 >
-                    <path 
-                        stroke-linecap="round" 
-                        stroke-linejoin="round" 
-                        stroke-width="2.5" 
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2.5"
                         d="M5 13l4 4L19 7"
                     />
                 </svg>

package/dist/atoms/CodeBlock.svelte

@@ -30,12 +30,12 @@
 </script>
 
 <div
-    class="code-block relative bg-gray-900 rounded-lg overflow-hidden {className}"
+    class="code-block relative bg-base-900 rounded-lg overflow-hidden {className}"
     {...restProps}
 >
     <!-- Header -->
     <div
-        class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700"
+        class="flex items-center justify-between px-4 py-2 bg-base-800 border-b border-base-700"
     >
         <div class="flex items-center gap-2">
             <div class="w-3 h-3 rounded-full bg-red-500"></div>
@@ -45,7 +45,7 @@
         {#if showCopyButton}
             <button
                 onclick={copyToClipboard}
-                class="flex items-center gap-2 px-3 py-1 text-xs text-gray-300 hover:text-white hover:bg-gray-700 rounded transition-colors duration-200"
+                class="flex items-center gap-2 px-3 py-1 text-xs text-base-300 hover:text-white hover:bg-base-700 rounded transition-colors duration-200"
                 aria-label="Copy code to clipboard"
             >
                 {#if copied}
@@ -82,7 +82,7 @@
     </div>
 
     <!-- Code content -->
-    <pre class="p-4 overflow-x-auto text-sm text-gray-100 leading-relaxed"><code
+    <pre class="p-4 overflow-x-auto text-sm text-base-100 leading-relaxed"><code
             class="language-{language}">{@html code}</code
         ></pre>
 </div>

package/dist/atoms/ColorPicker.svelte

@@ -68,11 +68,11 @@
     // Input classes
     const inputClasses = $derived(() => {
         const baseClasses =
-            "w-full px-3 py-2 border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-200";
+            "w-full px-3 py-2 bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg text-sm text-body placeholder:text-description transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
         const stateClasses =
             isValidHex(value) || value === ""
-                ? "border-gray-300 focus:border-brand-500"
-                : "border-red-300 focus:border-red-500 focus:ring-red-200";
+                ? "border-base-300 focus:border-brand-500 focus:ring-brand-500"
+                : "border-red-300 focus:border-red-500 focus:ring-red-500";
 
         return `${baseClasses} ${stateClasses}`.trim();
     });
@@ -99,7 +99,7 @@
         />
         {#if value && isValidHex(value)}
             <div
-                class="w-8 h-8 rounded border-2 border-gray-300 shrink-0"
+                class="w-8 h-8 rounded border-2 border-base-300 shrink-0"
                 style="background-color: {value};"
                 aria-label="Color preview"
             ></div>

package/dist/atoms/FeatureCard.svelte

@@ -34,7 +34,7 @@
 
 {#if mounted}
     <div
-        class="p-6 rounded-lg bg-surface-level-0 border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
+        class="p-6 rounded-lg bg-base-50 border border-border hover:border-primary/20 hover:shadow-sm transition-colors duration-200 {className}"
         {...restProps}
     >
         <div class="flex items-start gap-4">
@@ -54,7 +54,7 @@
 {:else}
     <!-- SSR fallback -->
     <div
-        class="p-6 rounded-lg bg-gray-100 border border-gray-300 hover:border-gray-400 hover:shadow-sm transition-colors duration-200 {className}"
+        class="p-6 rounded-lg bg-base-100 border border-base-300 hover:border-base-400 hover:shadow-sm transition-colors duration-200 {className}"
         {...restProps}
     >
         <div class="flex items-start gap-4">

package/dist/atoms/Input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
-    
+
     // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
@@ -46,20 +46,20 @@
             return {
                 padding: "px-4 py-2",
                 text: "text-sm",
-                leading: "leading-5"
+                leading: "leading-5",
             };
         } else if (size === "lg") {
             return {
                 padding: "px-4 py-3",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         } else {
             // default md
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         }
     });
@@ -79,7 +79,7 @@
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-brand-100 rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
+            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });

package/dist/atoms/Progress.svelte

@@ -44,7 +44,7 @@
 
     <div
         id={progressId}
-        class="w-full bg-gray-200 rounded-full overflow-hidden {sizeClasses[
+        class="w-full bg-base-200 rounded-full overflow-hidden {sizeClasses[
             size
         ]}"
         role="progressbar"

package/dist/atoms/Select.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
     import Dropdown from "../molecules/Dropdown.svelte";
-    import { ChevronDown, CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
+    import {
+        ChevronDown,
+        CheckCircle,
+        AlertTriangle,
+        AlertCircle,
+    } from "@lucide/svelte";
 
     // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
@@ -48,20 +53,20 @@
             return {
                 padding: "px-4 py-2",
                 text: "text-sm",
-                leading: "leading-5"
+                leading: "leading-5",
             };
         } else if (size === "lg") {
             return {
                 padding: "px-4 py-3",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         } else {
             // default md
             return {
                 padding: "px-4 py-2.5",
                 text: "text-base",
-                leading: "leading-6"
+                leading: "leading-6",
             };
         }
     });
@@ -81,7 +86,7 @@
     const triggerClasses = $derived(() => {
         const sizeStyles = sizeClass();
         const baseClasses =
-            "w-full bg-brand-100 rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
+            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between";
 
         return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.text} ${sizeStyles.leading} ${variantClass()}`.trim();
     });
@@ -120,7 +125,9 @@
             return String(placeholder || "Select an option");
         }
         const selected = options.find((opt) => opt.value === value);
-        return selected?.label ? String(selected.label) : String(placeholder || "Select an option");
+        return selected?.label
+            ? String(selected.label)
+            : String(placeholder || "Select an option");
     });
 
     // Check if value is empty
@@ -138,7 +145,7 @@
             const syntheticEvent = new Event("change", { bubbles: true });
             Object.defineProperty(syntheticEvent, "target", {
                 value: { value: optionValue },
-                enumerable: true
+                enumerable: true,
             });
             (onchange as (event: Event) => void)(syntheticEvent);
         }
@@ -152,7 +159,10 @@
 
     // Close dropdown when clicking outside
     function handleClickOutside(event: MouseEvent) {
-        if (isOpen && !(event.target as HTMLElement).closest('.select-container')) {
+        if (
+            isOpen &&
+            !(event.target as HTMLElement).closest(".select-container")
+        ) {
             isOpen = false;
         }
     }
@@ -172,7 +182,7 @@
         <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
 
-    <Dropdown isOpen={isOpen} placement="bottom-start">
+    <Dropdown {isOpen} placement="bottom-start">
         {#snippet trigger()}
             <button
                 type="button"
@@ -184,12 +194,21 @@
                 aria-expanded={isOpen}
                 aria-describedby={message ? `${selectId}-message` : undefined}
             >
-                <span class="text-left flex-1 {isEmpty() ? 'text-description' : 'text-body'}">
-                    {isEmpty() ? placeholder : (options.find((opt) => opt.value === value)?.label || placeholder)}
+                <span
+                    class="text-left flex-1 {isEmpty()
+                        ? 'text-description'
+                        : 'text-body'}"
+                >
+                    {isEmpty()
+                        ? placeholder
+                        : options.find((opt) => opt.value === value)?.label ||
+                          placeholder}
                 </span>
                 <ChevronDown
                     size={20}
-                    class="text-description transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
+                    class="text-description transition-transform duration-200 {isOpen
+                        ? 'rotate-180'
+                        : ''}"
                 />
             </button>
         {/snippet}
@@ -198,7 +217,11 @@
                 {#each options as option (option.value)}
                     <button
                         type="button"
-                        class="w-full text-left px-4 py-2 text-body hover:bg-brand-50 transition-colors rounded-md my-0.5 {option.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} {value === option.value ? 'bg-brand-50' : ''}"
+                        class="w-full text-left px-4 py-2 text-body hover:bg-base-100 transition-colors rounded-md my-0.5 {option.disabled
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'cursor-pointer'} {value === option.value
+                            ? 'bg-base-100'
+                            : ''}"
                         onclick={() => handleOptionClick(option.value)}
                         disabled={option.disabled}
                     >
@@ -217,4 +240,4 @@
             <span>{message}</span>
         </p>
     {/if}
-</div>
+</div>

package/dist/atoms/Skeleton.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <div
-    class="animate-pulse bg-gray-200 rounded {className}"
+    class="animate-pulse bg-base-200 rounded {className}"
     style="width: {width}; height: {height};"
     {...restProps}
 ></div>

package/dist/atoms/Textarea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
-    
+
     // SSR-safe ID generation
     function generateId(prefix: string = "id"): string {
         if (typeof window !== "undefined") {
@@ -52,7 +52,7 @@
     // Textarea classes matching M3 design
     const textareaClasses = $derived(() => {
         const baseClasses =
-            "w-full bg-brand-100 rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
+            "w-full bg-input hover:bg-input-hover focus:bg-input-focus disabled:bg-input-disabled rounded-lg transition-all duration-200 placeholder:text-description text-body focus:outline-none focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed resize-y px-4 py-2.5 text-base leading-6";
 
         return `${baseClasses} ${variantClass()}`.trim();
     });

package/dist/atoms/ThemeToggle.svelte

@@ -95,12 +95,12 @@
     // Variant classes using semantic colors
     const variantClass = $derived(() => {
         if (variant === "ghost") {
-            return "bg-transparent hover:bg-surface-hover border-0";
+            return "bg-transparent hover:bg-base-100 border-0";
         } else if (variant === "outline") {
-            return "bg-surface-elevated hover:bg-surface-hover border border-border";
+            return "bg-base-50 hover:bg-base-100 border border-border";
         } else {
             // default
-            return "bg-surface-elevated hover:bg-surface-hover border-0";
+            return "bg-base-50 hover:bg-base-100 border-0";
         }
     });
 
@@ -121,7 +121,7 @@
             focus:ring-2
             focus:ring-brand-500
             focus:ring-offset-2
-            focus:ring-offset-surface
+            focus:ring-offset-base-50
         `.trim().replace(/\s+/g, " ");
     });
 </script>
@@ -143,7 +143,7 @@
 {:else}
     <!-- SSR fallback -->
     <button
-        class="w-10 h-10 bg-surface-elevated rounded-lg flex items-center justify-center text-label cursor-pointer"
+        class="w-10 h-10 bg-base-50 rounded-lg flex items-center justify-center text-label cursor-pointer"
         aria-label="Theme toggle"
         type="button"
         {...restProps}

package/dist/atoms/Toast.svelte

@@ -46,7 +46,7 @@
             {#if closable}
                 <button
                     type="button"
-                    class="ml-3 text-gray-400 hover:text-gray-600"
+                    class="ml-3 text-base-400 hover:text-base-600"
                     onclick={closeToast}
                     aria-label="Close notification"
                 >

package/dist/atoms/Toggle.svelte

@@ -39,21 +39,19 @@
         if (onchange) onchange({ checked });
     }
 
-    // Toggle button classes matching M3 design
     const toggleButtonClasses = $derived(() =>
         [
             "relative inline-flex w-10 h-6 flex-shrink-0 cursor-pointer rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2",
-            checked ? "bg-brand-600" : "bg-stone-300",
+            checked ? "bg-action-primary" : "bg-base-400",
             disabled && "opacity-50 cursor-not-allowed",
         ]
             .filter(Boolean)
             .join(" "),
     );
 
-    // Toggle thumb classes matching M3 design
     const toggleThumbClasses = $derived(() => {
         const baseClasses =
-            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform duration-200 ease-in-out";
+            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card transition-transform duration-200 ease-in-out";
         const positionClasses = checked ? "translate-x-4" : "translate-x-0";
 
         return `${baseClasses} ${positionClasses}`.trim();