zabi-components 5.0.5 → 5.0.7

package/dist/atoms/Badge.svelte

@@ -35,14 +35,14 @@
         // Variant classes - using semantic color system
         const variantClass =
             variant === "success"
-                ? "bg-surface-secondary border-secondary text-success"
+                ? "bg-surface-level-1 border-secondary text-success"
                 : variant === "warning"
-                  ? "bg-surface-secondary border-secondary text-warning"
+                  ? "bg-surface-level-1 border-secondary text-warning"
                   : variant === "error"
-                    ? "bg-surface-secondary border-secondary text-error"
+                    ? "bg-surface-level-1 border-secondary text-error"
                     : variant === "info"
-                      ? "bg-surface-secondary border-secondary text-body"
-                      : "bg-surface-secondary border-secondary text-body"; // default
+                      ? "bg-surface-level-1 border-secondary text-body"
+                      : "bg-surface-level-1 border-secondary text-body"; // default
 
         return `${baseClasses} ${sizeClass} ${variantClass}`.trim();
     });

package/dist/atoms/Button.svelte

@@ -2,13 +2,7 @@
     import type { Snippet } from "svelte";
 
     interface Props {
-        variant?:
-            | "primary"
-            | "secondary"
-            | "danger"
-            | "success"
-            | "ghost"
-            | "brand";
+        variant?: "primary" | "secondary" | "danger" | "ghost";
         size?: "sm" | "md" | "lg";
         disabled?: boolean;
         type?: "button" | "submit" | "reset";
@@ -37,27 +31,23 @@
               : "px-4 py-2 text-sm font-medium"; // default md
     });
 
-    // Variant classes using full class names in conditionals
+    // Variant classes using semantic action colors
     const variantClass = $derived(() => {
         return variant === "primary"
-            ? "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400"
+            ? "bg-action-primary text-inverse focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             : variant === "secondary"
-              ? "bg-gray-600 text-white hover:bg-gray-700 active:bg-gray-800 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:bg-gray-400"
+              ? "border border-secondary text-description hover:border-secondary-hover focus:ring-2 focus:ring-stone-500 focus:ring-offset-2"
               : variant === "danger"
-                ? "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:bg-red-400"
-                : variant === "success"
-                  ? "bg-green-600 text-white hover:bg-green-700 active:bg-green-800 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:bg-green-400"
-                  : variant === "ghost"
-                    ? "bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:text-gray-400"
-                    : variant === "brand"
-                      ? "bg-purple-600 text-white hover:bg-purple-700 active:bg-purple-800 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:bg-purple-400"
-                      : "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400"; // default primary
+                ? "bg-action-danger text-inverse 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-action-primary text-inverse focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"; // default primary
     });
 
     // Button classes using Badge pattern
     const buttonClasses = $derived(() => {
         const baseClasses =
-            "inline-flex items-center justify-center rounded-md transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-95 transform-gpu shadow-sm hover:shadow-md";
+            "inline-flex items-center justify-center rounded-md transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none focus:outline-none focus:ring-2 focus:ring-offset-2 active:scale-95 transform-gpu";
 
         return `${baseClasses} ${sizeClass()} ${variantClass()}`.trim();
     });

package/dist/atoms/Button.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 interface Props {
-    variant?: "primary" | "secondary" | "danger" | "success" | "ghost" | "brand";
+    variant?: "primary" | "secondary" | "danger" | "ghost";
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
     type?: "button" | "submit" | "reset";

package/dist/atoms/Card.svelte

@@ -26,9 +26,9 @@
 
     const cardClasses = $derived(() => {
         const baseClasses =
-            "bg-surface rounded-lg transition-all duration-200 hover:shadow-adaptive-md min-w-64";
+            "rounded-lg transition-all duration-200 min-w-64 bg-surface-level-0";
         const interactiveClasses = onclick
-            ? "cursor-pointer hover:bg-surface-hover hover:border-focus"
+            ? "cursor-pointer hover:shadow-adaptive-md hover:bg-surface-hover hover:border-focus"
             : "";
         const widthClasses = fullWidth ? "w-full" : "";
 

package/dist/atoms/ColorPicker.svelte

@@ -12,31 +12,21 @@
         value?: string;
         label?: string;
         disabled?: boolean;
-        onclick?: (event: Event) => void;
+        placeholder?: string;
+        onchange?: (event: Event) => void;
     }
 
     let {
         value = "",
         label = "",
         disabled = false,
-        onclick,
+        placeholder = "#000000",
+        onchange,
         ...restProps
     }: Props = $props();
 
-    const colors = [
-        { label: "Red", value: "#ef4444" },
-        { label: "Blue", value: "#3b82f6" },
-        { label: "Green", value: "#10b981" },
-        { label: "Yellow", value: "#f59e0b" },
-        { label: "Purple", value: "#8b5cf6" },
-        { label: "Pink", value: "#ec4899" },
-        { label: "Gray", value: "#6b7280" },
-        { label: "Black", value: "#000000" },
-    ];
-
-    // Generate unique IDs - SSR safe (call directly, not in onMount)
-    const groupId = generateId("color-picker");
-    const inputId = generateId("color-input");
+    // Generate unique ID - SSR safe
+    const inputId = generateId("color-picker");
 
     // Hex color validation
     function isValidHex(hex: string): boolean {
@@ -51,7 +41,7 @@
 
         if (hexValue === "" || isValidHex(hexValue)) {
             value = hexValue;
-            if (onclick) onclick(event);
+            if (onchange) onchange(event);
         }
     }
 
@@ -75,20 +65,6 @@
         }
     }
 
-    // Color button classes using full class names
-    const colorButtonClasses = $derived(() => {
-        return (colorValue: string) => {
-            const baseClasses =
-                "w-10 h-10 sm:w-12 sm:h-12 rounded-lg border-2 transition-all";
-            const stateClasses =
-                value === colorValue
-                    ? "border-blue-500 ring-2 ring-blue-200"
-                    : "border-gray-300 hover:border-gray-400";
-
-            return `${baseClasses} ${stateClasses}`.trim();
-        };
-    });
-
     // Input classes
     const inputClasses = $derived(() => {
         const baseClasses =
@@ -102,70 +78,37 @@
     });
 </script>
 
-<div class="space-y-3 sm:space-y-4">
+<div class="space-y-2" {...restProps}>
     {#if label}
-        <label for={groupId} class="block text-sm font-medium text-label"
-            >{label}</label
-        >
+        <label for={inputId} class="block text-sm font-medium text-label">
+            {label}
+        </label>
     {/if}
 
-    <!-- Predefined Colors -->
-    <div
-        id={groupId}
-        class="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-4 gap-2 sm:gap-3"
-        role="radiogroup"
-        {...restProps}
-    >
-        {#each colors as color}
-            <button
-                type="button"
-                class={colorButtonClasses()(color.value)}
-                style="background-color: {color.value};"
-                onclick={(e) => {
-                    value = color.value;
-                    if (onclick) onclick(e);
-                }}
-                {disabled}
-                role="radio"
-                aria-checked={value === color.value}
-                aria-label={color.label}
-            >
-                {#if value === color.value}
-                    <span class="text-white text-lg">✓</span>
-                {/if}
-            </button>
-        {/each}
-    </div>
-
-    <!-- Custom Hex Input -->
-    <div class="space-y-1">
-        <label for={inputId} class="block text-xs font-medium text-label">
-            Or enter custom color
-        </label>
-        <div class="flex items-center space-x-2">
-            <input
-                id={inputId}
-                type="text"
-                placeholder="#000000"
-                {value}
-                oninput={handleHexInput}
-                onblur={handleHexBlur}
-                {disabled}
-                class={inputClasses()}
-                aria-label="Custom hex color input"
-            />
-            {#if value && isValidHex(value)}
-                <div
-                    class="w-6 h-6 sm:w-8 sm:h-8 rounded border-2 border-gray-300 shrink-0"
-                    style="background-color: {value};"
-                    aria-label="Color preview"
-                ></div>
-            {/if}
-        </div>
-        {#if value && !isValidHex(value)}
-            <p class="text-xs text-red-500">
-                Please enter a valid hex color (e.g., #ff0000)
-            </p>
+    <div class="flex items-center space-x-2">
+        <input
+            id={inputId}
+            type="text"
+            {placeholder}
+            {value}
+            oninput={handleHexInput}
+            onblur={handleHexBlur}
+            {disabled}
+            class={inputClasses()}
+            aria-label="Hex color input"
+        />
+        {#if value && isValidHex(value)}
+            <div
+                class="w-8 h-8 rounded border-2 border-gray-300 shrink-0"
+                style="background-color: {value};"
+                aria-label="Color preview"
+            ></div>
         {/if}
     </div>
+
+    {#if value && !isValidHex(value)}
+        <p class="text-xs text-red-500">
+            Please enter a valid hex color (e.g., #ff0000 or #f00)
+        </p>
+    {/if}
 </div>

package/dist/atoms/ColorPicker.svelte.d.ts

@@ -2,7 +2,8 @@ interface Props {
     value?: string;
     label?: string;
     disabled?: boolean;
-    onclick?: (event: Event) => void;
+    placeholder?: string;
+    onchange?: (event: Event) => void;
 }
 declare const ColorPicker: import("svelte").Component<Props, {}, "">;
 type ColorPicker = ReturnType<typeof ColorPicker>;

package/dist/atoms/FeatureCard.svelte

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

package/dist/atoms/Heading.svelte

@@ -1,5 +1,40 @@
 <script lang="ts">
-    let { level = 1, text }: { level?: number; text: string } = $props();
+    interface Props {
+        level?: number;
+        text: string;
+    }
+
+    let { level = 1, text }: Props = $props();
+
+    // Automatic weight and size based on heading level
+    const fontWeight = $derived(level <= 2 ? "700" : "500");
+    const Tag = $derived(`h${level}`);
+
+    // Size classes for different heading levels
+    const sizeClasses = {
+        1: "text-4xl",
+        2: "text-3xl",
+        3: "text-2xl",
+        4: "text-xl",
+        5: "text-lg",
+        6: "text-base",
+    };
+
+    const sizeClass = $derived(
+        sizeClasses[level as keyof typeof sizeClasses] || "text-base",
+    );
 </script>
 
-<div class="text-headline" role="heading" aria-level={level}>{text}</div>
+<svelte:element
+    this={Tag}
+    class="text-headline font-nunito {sizeClass}"
+    style="font-weight: {fontWeight};"
+>
+    {text}
+</svelte:element>
+
+<style>
+    .font-nunito {
+        font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
+    }
+</style>

package/dist/atoms/Heading.svelte.d.ts

@@ -1,7 +1,7 @@
-type $$ComponentProps = {
+interface Props {
     level?: number;
     text: string;
-};
-declare const Heading: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const Heading: import("svelte").Component<Props, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/atoms/Input.svelte

@@ -45,21 +45,21 @@
               : "px-4 py-2 text-sm"; // default md
     });
 
-    // Variant classes using full class names
+    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
-            ? "border-green-300 focus:border-green-500 focus:ring-green-500"
+            ? "border-success focus:border-success focus:ring-success"
             : variant === "warning"
-              ? "border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500"
+              ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
-                ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"; // default
+                ? "border-error focus:border-error focus:ring-error"
+                : "border-border focus:border-focus focus:ring-focus"; // default
     });
 
     // Input classes using Badge pattern
     const inputClasses = $derived(() => {
         const baseClasses =
-            "w-full rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled";
+            "w-full border rounded-md transition-colors duration-200 placeholder:text-input-placeholder focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled";
 
         return `${baseClasses} ${sizeClass()} ${variantClass()}`.trim();
     });

package/dist/atoms/Select.svelte

@@ -47,11 +47,16 @@
     // Select classes using Badge pattern
     const selectClasses = $derived(() => {
         const baseClasses =
-            "w-full border border-gray-300 rounded-md bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed";
+            "w-full border border-border rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface focus:ring-focus focus:border-focus disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled";
 
         return `${baseClasses} ${sizeClass()}`.trim();
     });
 
+    // Label classes using semantic text colors
+    const labelClasses = $derived(
+        () => "block text-sm font-medium text-label mb-1",
+    );
+
     function handleChange(event: Event) {
         const target = event.target as HTMLSelectElement;
         value = target.value;
@@ -60,9 +65,7 @@
 
 <div>
     {#if label}
-        <label for={selectId} class="block text-sm font-medium text-label mb-1"
-            >{label}</label
-        >
+        <label for={selectId} class={labelClasses()}>{label}</label>
     {/if}
 
     <select

package/dist/atoms/Textarea.svelte

@@ -8,23 +8,6 @@
         }
     }
 
-    // Input variant classes
-    function getInputVariantClasses(
-        variant: "default" | "success" | "warning" | "error" | "info",
-    ): string {
-        const variantMap = {
-            default:
-                "border-gray-300 focus:border-blue-500 focus:ring-blue-500",
-            success:
-                "border-green-300 focus:border-green-500 focus:ring-green-500",
-            warning:
-                "border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500",
-            error: "border-red-300 focus:border-red-500 focus:ring-red-500",
-            info: "border-blue-300 focus:border-blue-500 focus:ring-blue-500",
-        };
-        return variantMap[variant] || variantMap.default;
-    }
-
     interface Props {
         value?: string;
         name?: string;
@@ -62,21 +45,21 @@
               : "px-4 py-2 text-sm"; // default md
     });
 
-    // Variant classes using full class names
+    // Variant classes using semantic colors
     const variantClass = $derived(() => {
         return variant === "success"
-            ? "border-green-300 focus:border-green-500 focus:ring-green-500"
+            ? "border-success focus:border-success focus:ring-success"
             : variant === "warning"
-              ? "border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500"
+              ? "border-warning focus:border-warning focus:ring-warning"
               : variant === "error"
-                ? "border-red-300 focus:border-red-500 focus:ring-red-500"
-                : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"; // default
+                ? "border-error focus:border-error focus:ring-error"
+                : "border-border focus:border-focus focus:ring-focus"; // default
     });
 
     // Textarea classes using Badge pattern
     const textareaClasses = $derived(() => {
         const baseClasses =
-            "w-full rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled resize-y";
+            "w-full border rounded-md transition-colors duration-200 placeholder:text-input-placeholder focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled resize-y";
 
         return `${baseClasses} ${sizeClass()} ${variantClass()}`.trim();
     });

package/dist/atoms/ThemeToggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import { Sun, Moon } from "@lucide/svelte";
     // SSR-safe utilities
     function safeLocalStorage(): Storage | undefined {
         return typeof window !== "undefined" ? localStorage : undefined;
@@ -67,23 +68,23 @@
 {#if mounted}
     <button
         onclick={toggleTheme}
-        class="w-10 h-10 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        class="w-10 h-10 bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
         aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
         {...restProps}
     >
         {#if isDark}
-            <span class="text-lg">☀️</span>
+            <Moon size={20} class="text-label" />
         {:else}
-            <span class="text-lg">🌙</span>
+            <Sun size={20} class="text-label" />
         {/if}
     </button>
 {:else}
     <!-- SSR fallback -->
     <button
-        class="w-10 h-10 bg-gray-100 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700"
+        class="w-10 h-10 bg-gray-100 border border-gray-300 rounded-lg flex items-center justify-center text-gray-700 cursor-pointer"
         aria-label="Theme toggle"
         {...restProps}
     >
-        <span class="text-lg">🌙</span>
+        <Sun size={20} class="text-label" />
     </button>
 {/if}

package/dist/molecules/ComponentDemo.svelte

@@ -23,11 +23,11 @@
 </script>
 
 <div
-    class="component-demo bg-surface border border-border rounded-lg overflow-hidden {className}"
+    class="component-demo bg-surface-level-0 border border-border rounded-lg overflow-hidden {className}"
     {...restProps}
 >
     <!-- Header -->
-    <div class="px-6 py-4 border-b border-border bg-surface-secondary">
+    <div class="px-6 py-4 border-b border-border bg-surface-level-1">
         <div class="flex items-center justify-between">
             <div>
                 <h3 class="text-lg font-semibold text-text">{title}</h3>
@@ -39,7 +39,7 @@
             </div>
             <button
                 onclick={() => (showCode = !showCode)}
-                class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text hover:bg-surface rounded-md transition-colors duration-200"
+                class="flex items-center gap-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text hover:bg-surface-level-0 rounded-md transition-colors duration-200"
                 aria-label={showCode ? "Show preview" : "Show code"}
             >
                 {#if showCode}

package/dist/molecules/ImageUpload.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Button from "../atoms/Button.svelte";
+    import { Image } from "@lucide/svelte";
 
     interface Props {
         value?: string | null;
@@ -53,7 +54,7 @@
             <img
                 src={value}
                 alt=""
-                class="w-full h-32 object-cover rounded-lg border border-gray-300"
+                class="w-full h-32 object-cover rounded-lg border border-border"
             />
             <div
                 class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center"
@@ -81,7 +82,7 @@
     {:else}
         <!-- Empty State -->
         <div
-            class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors cursor-pointer"
+            class="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-border-strong transition-colors cursor-pointer"
             onclick={triggerFileSelect}
             role="button"
             tabindex="0"
@@ -89,13 +90,15 @@
         >
             <div class="space-y-3">
                 <div
-                    class="w-12 h-12 mx-auto bg-gray-100 rounded-lg flex items-center justify-center"
+                    class="w-12 h-12 mx-auto bg-surface-level-1 rounded-lg flex items-center justify-center"
                 >
-                    <span class="text-2xl">📷</span>
+                    <Image size={24} class="text-description" />
                 </div>
                 <div>
-                    <p class="font-medium text-gray-900">{placeholder}</p>
-                    <p class="text-sm text-gray-500">Click to choose a file</p>
+                    <p class="font-medium text-headline">{placeholder}</p>
+                    <p class="text-sm text-description">
+                        Click to choose a file
+                    </p>
                 </div>
             </div>
         </div>

package/dist/molecules/Modal.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+    type Size = "sm" | "md" | "lg";
+
     interface Props {
         isOpen?: boolean;
         title?: string;
+        size?: Size;
         onclick?: (event: Event) => void;
         onkeydown?: (event: Event) => void;
     }
@@ -9,6 +12,7 @@
     let {
         isOpen = false,
         title = "",
+        size = "md",
         onclick,
         onkeydown,
         children,
@@ -16,6 +20,14 @@
         ...restProps
     }: Props & { children?: any; footer?: any } = $props();
 
+    const sizeClasses = $derived(
+        {
+            sm: "w-full md:w-[24rem]",
+            md: "w-full md:w-[28rem]",
+            lg: "w-full md:w-[42rem]",
+        }[size] || "w-full md:w-[28rem]",
+    );
+
     function closeModal(event?: Event) {
         isOpen = false;
         if (onclick && event) {
@@ -42,7 +54,7 @@
 
 {#if isOpen}
     <div
-        class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
+        class="fixed inset-0 bg-black/50 flex items-end md:items-center justify-center p-0 md:p-4 z-50"
         onclick={handleBackdropClick}
         onkeydown={handleKeydown}
         role="dialog"
@@ -50,7 +62,7 @@
         tabindex="-1"
     >
         <div
-            class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto"
+            class="bg-white 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"
         >
             <!-- Header -->
             <div
@@ -60,7 +72,7 @@
                 <button
                     type="button"
                     onclick={closeModal}
-                    class="text-gray-400 hover:text-gray-600 text-2xl"
+                    class="text-gray-400 hover:text-gray-600 text-2xl cursor-pointer"
                     aria-label="Close"
                 >
                     ×

package/dist/molecules/Modal.svelte.d.ts

@@ -1,6 +1,8 @@
+type Size = "sm" | "md" | "lg";
 interface Props {
     isOpen?: boolean;
     title?: string;
+    size?: Size;
     onclick?: (event: Event) => void;
     onkeydown?: (event: Event) => void;
 }

package/dist/organisms/Navbar.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <nav
-    class="bg-white border-b border-gray-200 sticky top-0 z-50 {className}"
+    class="bg-surface-elevated border-b border-border sticky top-0 z-50 {className}"
     {...restProps}
 >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -81,7 +81,7 @@
         {#if isMenuOpen}
             <div class="md:hidden">
                 <div
-                    class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200"
+                    class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-border"
                 >
                     {@render nav?.()}
                     <div class="pt-4">

package/dist/organisms/Navigation.svelte

@@ -7,13 +7,15 @@
         }>;
         currentPath?: string;
         onclick?: (event: Event) => void;
+        className?: string;
     }
 
     let {
         variant = "header",
         items = [],
         currentPath = "",
-        children,
+        onclick,
+        className = "",
         ...restProps
     }: Props & { children?: any } = $props();
 
@@ -22,27 +24,37 @@
         // Navigation is now handled by the parent component
         // through event forwarding
     }
+
+    // Derived class for ul container based on variant
+    const ulClasses = $derived(() => {
+        return variant === "sidebar"
+            ? "flex flex-col space-y-2"
+            : "flex space-x-6";
+    });
+
+    // Function to get link classes based on active state
+    function getLinkClasses(itemHref: string): string {
+        const isActive = currentPath === itemHref;
+        const baseClasses = "px-3 py-2 text-sm font-medium rounded-md";
+
+        if (isActive) {
+            return `${baseClasses} text-body font-semibold`;
+        }
+        return `${baseClasses} text-description hover:text-body`;
+    }
 </script>
 
-<nav class="navigation navigation-{variant}" {...restProps}>
-    <ul
-        class="flex {variant === 'sidebar'
-            ? 'flex-col space-y-2'
-            : 'space-x-6'}"
-    >
-        {#each items as item}
-            <li>
-                <a
-                    href={item.href}
-                    class="px-3 py-2 text-sm font-medium rounded-md transition-colors {currentPath ===
-                    item.href
-                        ? 'bg-blue-100 text-body'
-                        : 'text-description hover:text-body hover:bg-gray-100'}"
-                    onclick={(e) => handleClick(item, e)}
-                >
-                    {item.label}
-                </a>
-            </li>
-        {/each}
-    </ul>
-</nav>
+<ul class="{ulClasses()} {className}" {...restProps}>
+    {#each items as item}
+        {@const linkClasses = getLinkClasses(item.href)}
+        <li>
+            <a
+                href={item.href}
+                class={linkClasses}
+                onclick={(e) => handleClick(item, e)}
+            >
+                {item.label}
+            </a>
+        </li>
+    {/each}
+</ul>

package/dist/organisms/Navigation.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     }>;
     currentPath?: string;
     onclick?: (event: Event) => void;
+    className?: string;
 }
 type $$ComponentProps = Props & {
     children?: any;

package/dist/zabi-components.css

@@ -6,11 +6,18 @@
    ======================================== */
 
 @theme {
-  /* Surface Colors - Semantic naming with stone palette */
-  --color-surface: theme(colors.stone.50);
-  --color-surface-secondary: theme(colors.stone.100);
-  --color-surface-tertiary: theme(colors.stone.200);
+  /* Typography - Nunito Sans font family */
+  --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+
+  /* Surface Colors - Level-based naming with stone palette */
+  --color-surface-level-0: theme(colors.stone.50);
+  --color-surface-level-0-hover: theme(colors.stone.100);
+  --color-surface-level-1: theme(colors.stone.100);
+  --color-surface-level-1-hover: theme(colors.stone.200);
+  --color-surface-level-2: theme(colors.stone.200);
+  --color-surface-level-2-hover: theme(colors.stone.300);
   --color-surface-elevated: theme(colors.white);
+  --color-surface-elevated-hover: theme(colors.stone.50);
   --color-surface-hover: theme(colors.stone.100);
   --color-surface-active: theme(colors.stone.200);
   --color-surface-inverse: theme(colors.stone.900);
@@ -22,12 +29,12 @@
   --color-background-tertiary: theme(colors.stone.100);
 
   /* Page Colors */
-  --color-page: theme(colors.white);
-  --color-page-secondary: theme(colors.stone.50);
+  --color-page: theme(colors.stone.100);
+  --color-page-secondary: theme(colors.stone.200);
 
   /* Card Colors */
   --color-card: theme(colors.white);
-  --color-card-hover: theme(colors.stone.50);
+  --color-card-hover: theme(colors.stone.100);
   --color-card-active: theme(colors.stone.100);
   --color-card-elevated: theme(colors.white);
 
@@ -48,78 +55,76 @@
 
   /* Border Colors */
   --color-border: theme(colors.stone.200);
-  --color-border-secondary: theme(colors.stone.300);
-  --color-border-hover: theme(colors.stone.400);
-  --color-border-focus: theme(colors.blue.500);
-  --color-border-disabled: theme(colors.stone.200);
+  --color-border-weak: theme(colors.stone.300);
+  --color-border-medium: theme(colors.stone.400);
+  --color-border-strong: theme(colors.stone.500);
 
   /* Focus Colors */
   --color-focus: theme(colors.blue.500);
-  --color-focus-hover: theme(colors.blue.600);
-  --color-focus-active: theme(colors.blue.700);
-  --color-focus-disabled: theme(colors.blue.300);
-  --color-focus-light: theme(colors.blue.50);
-  --color-focus-dark: theme(colors.blue.700);
-  --color-focus-surface: theme(colors.blue.50);
-  --color-focus-text: theme(colors.blue.700);
-  --color-focus-ring: theme(colors.blue.500);
-  --color-focus-ring-offset: theme(colors.white);
+  --color-focus-weak: theme(colors.blue.600);
+  --color-focus-medium: theme(colors.blue.700);
+  --color-focus-strong: theme(colors.blue.800);
 
   /* Primary Colors */
   --color-primary: theme(colors.blue.600);
-  --color-primary-hover: theme(colors.blue.700);
-  --color-primary-active: theme(colors.blue.800);
-  --color-primary-disabled: theme(colors.blue.300);
-  --color-primary-light: theme(colors.blue.100);
-  --color-primary-dark: theme(colors.blue.800);
+  --color-primary-weak: theme(colors.blue.700);
+  --color-primary-medium: theme(colors.blue.800);
+  --color-primary-strong: theme(colors.blue.900);
 
   /* Secondary Colors */
   --color-secondary: theme(colors.stone.600);
-  --color-secondary-hover: theme(colors.stone.700);
-  --color-secondary-active: theme(colors.stone.800);
-  --color-secondary-disabled: theme(colors.stone.300);
-  --color-secondary-light: theme(colors.stone.100);
-  --color-secondary-dark: theme(colors.stone.800);
+  --color-secondary-weak: theme(colors.stone.700);
+  --color-secondary-medium: theme(colors.stone.800);
+  --color-secondary-strong: theme(colors.stone.900);
 
   /* Success Colors */
   --color-success: theme(colors.green.600);
-  --color-success-hover: theme(colors.green.700);
-  --color-success-active: theme(colors.green.800);
-  --color-success-disabled: theme(colors.green.300);
-  --color-success-light: theme(colors.green.100);
-  --color-success-dark: theme(colors.green.800);
-  --color-success-surface: theme(colors.green.100);
-  --color-success-text: theme(colors.green.800);
+  --color-success-weak: theme(colors.green.700);
+  --color-success-medium: theme(colors.green.800);
+  --color-success-strong: theme(colors.green.900);  
 
   /* Warning Colors */
   --color-warning: theme(colors.yellow.600);
-  --color-warning-hover: theme(colors.yellow.700);
-  --color-warning-active: theme(colors.yellow.800);
-  --color-warning-disabled: theme(colors.yellow.300);
-  --color-warning-light: theme(colors.yellow.100);
-  --color-warning-dark: theme(colors.yellow.800);
-  --color-warning-surface: theme(colors.yellow.100);
-  --color-warning-text: theme(colors.yellow.800);
+  --color-warning-weak: theme(colors.yellow.700);
+  --color-warning-medium: theme(colors.yellow.800);
+  --color-warning-strong: theme(colors.yellow.900);
 
   /* Error Colors */
   --color-error: theme(colors.red.600);
-  --color-error-hover: theme(colors.red.700);
-  --color-error-active: theme(colors.red.800);
-  --color-error-disabled: theme(colors.red.300);
-  --color-error-light: theme(colors.red.100);
-  --color-error-dark: theme(colors.red.800);
-  --color-error-surface: theme(colors.red.100);
-  --color-error-text: theme(colors.red.800);
+  --color-error-weak: theme(colors.red.700);
+  --color-error-medium: theme(colors.red.800);
+  --color-error-strong: theme(colors.red.900);
 
   /* Info Colors */
   --color-info: theme(colors.blue.600);
-  --color-info-hover: theme(colors.blue.700);
-  --color-info-active: theme(colors.blue.800);
-  --color-info-disabled: theme(colors.blue.300);
-  --color-info-light: theme(colors.blue.100);
-  --color-info-dark: theme(colors.blue.800);
-  --color-info-surface: theme(colors.blue.100);
-  --color-info-text: theme(colors.blue.800);
+  --color-info-weak: theme(colors.blue.700);
+  --color-info-medium: theme(colors.blue.800);
+  --color-info-strong: theme(colors.blue.900);
+
+  /* Action Colors - For interactive elements like buttons */
+  /* Primary Actions */
+  --color-action-primary: theme(colors.blue.600);
+  --color-action-primary-hover: theme(colors.blue.700);
+  --color-action-primary-active: theme(colors.blue.800);
+  --color-action-primary-disabled: theme(colors.blue.300);
+  --color-action-primary-subtle: theme(colors.blue.50);
+  --color-action-primary-subtle-hover: theme(colors.blue.100);
+
+  /* Secondary Actions */
+  --color-action-secondary: theme(colors.stone.600);
+  --color-action-secondary-hover: theme(colors.stone.700);
+  --color-action-secondary-active: theme(colors.stone.800);
+  --color-action-secondary-disabled: theme(colors.stone.300);
+  --color-action-secondary-subtle: theme(colors.stone.100);
+  --color-action-secondary-subtle-hover: theme(colors.stone.200);
+
+  /* Danger Actions */
+  --color-action-danger: theme(colors.red.600);
+  --color-action-danger-hover: theme(colors.red.700);
+  --color-action-danger-active: theme(colors.red.800);
+  --color-action-danger-disabled: theme(colors.red.300);
+  --color-action-danger-subtle: theme(colors.red.50);
+  --color-action-danger-subtle-hover: theme(colors.red.100);
 
   /* Shadow Colors */
   --shadow-color: 0 0 0;
@@ -154,15 +159,26 @@
   --z-toast: 1080;
 }
 
+/* ========================================
+   BASE TYPOGRAPHY
+   ======================================== */
+body {
+  font-family: var(--font-family-sans);
+}
+
 /* ========================================
    DARK MODE THEME
    ======================================== */
 .dark {
   /* Surface Colors - Dark mode variants */
-  --color-surface: theme(colors.stone.800);
-  --color-surface-secondary: theme(colors.stone.700);
-  --color-surface-tertiary: theme(colors.stone.600);
+  --color-surface-level-0: theme(colors.stone.800);
+  --color-surface-level-0-hover: theme(colors.stone.700);
+  --color-surface-level-1: theme(colors.stone.700);
+  --color-surface-level-1-hover: theme(colors.stone.600);
+  --color-surface-level-2: theme(colors.stone.600);
+  --color-surface-level-2-hover: theme(colors.stone.500);
   --color-surface-elevated: theme(colors.stone.800);
+  --color-surface-elevated-hover: theme(colors.stone.700);
   --color-surface-hover: theme(colors.stone.700);
   --color-surface-active: theme(colors.stone.600);
   --color-surface-inverse: theme(colors.stone.100);
@@ -200,78 +216,78 @@
 
   /* Border Colors */
   --color-border: theme(colors.stone.600);
-  --color-border-secondary: theme(colors.stone.500);
-  --color-border-hover: theme(colors.stone.400);
-  --color-border-focus: theme(colors.blue.400);
-  --color-border-disabled: theme(colors.stone.600);
+  --color-border-weak: theme(colors.stone.500);
+  --color-border-medium: theme(colors.stone.400);
+  --color-border-strong: theme(colors.stone.300);
 
   /* Focus Colors */
   --color-focus: theme(colors.blue.400);
-  --color-focus-hover: theme(colors.blue.500);
-  --color-focus-active: theme(colors.blue.600);
+  --color-focus-weak: theme(colors.blue.500);
+  --color-focus-medium: theme(colors.blue.600);
+  --color-focus-strong: theme(colors.blue.700);
   --color-focus-disabled: theme(colors.blue.600);
-  --color-focus-light: theme(colors.blue.900);
-  --color-focus-dark: theme(colors.blue.400);
-  --color-focus-surface: theme(colors.blue.900);
-  --color-focus-text: theme(colors.blue.400);
-  --color-focus-ring: theme(colors.blue.400);
-  --color-focus-ring-offset: theme(colors.stone.700);
 
   /* Primary Colors */
   --color-primary: theme(colors.blue.600);
-  --color-primary-hover: theme(colors.blue.700);
-  --color-primary-active: theme(colors.blue.800);
-  --color-primary-disabled: theme(colors.blue.300);
-  --color-primary-light: theme(colors.blue.100);
-  --color-primary-dark: theme(colors.blue.800);
+  --color-primary-weak: theme(colors.blue.700);
+  --color-primary-medium: theme(colors.blue.800);
+  --color-primary-strong: theme(colors.blue.900);
 
   /* Secondary Colors */
   --color-secondary: theme(colors.stone.600);
-  --color-secondary-hover: theme(colors.stone.700);
-  --color-secondary-active: theme(colors.stone.800);
-  --color-secondary-disabled: theme(colors.stone.300);
-  --color-secondary-light: theme(colors.stone.100);
-  --color-secondary-dark: theme(colors.stone.800);
+  --color-secondary-weak: theme(colors.stone.700);
+  --color-secondary-medium: theme(colors.stone.800);
+  --color-secondary-strong: theme(colors.stone.900);
 
   /* Success Colors */
   --color-success: theme(colors.green.600);
-  --color-success-hover: theme(colors.green.700);
-  --color-success-active: theme(colors.green.800);
-  --color-success-disabled: theme(colors.green.300);
-  --color-success-light: theme(colors.green.100);
-  --color-success-dark: theme(colors.green.800);
-  --color-success-surface: theme(colors.green.100);
-  --color-success-text: theme(colors.green.800);
+  --color-success-weak: theme(colors.green.700);
+  --color-success-medium: theme(colors.green.800);
+  --color-success-strong: theme(colors.green.900);
 
   /* Warning Colors */
   --color-warning: theme(colors.yellow.600);
-  --color-warning-hover: theme(colors.yellow.700);
-  --color-warning-active: theme(colors.yellow.800);
-  --color-warning-disabled: theme(colors.yellow.300);
-  --color-warning-light: theme(colors.yellow.100);
-  --color-warning-dark: theme(colors.yellow.800);
-  --color-warning-surface: theme(colors.yellow.100);
-  --color-warning-text: theme(colors.yellow.800);
+  --color-warning-weak: theme(colors.yellow.700);
+  --color-warning-medium: theme(colors.yellow.800);
+  --color-warning-strong: theme(colors.yellow.900);
 
   /* Error Colors */
   --color-error: theme(colors.red.600);
-  --color-error-hover: theme(colors.red.700);
-  --color-error-active: theme(colors.red.800);
-  --color-error-disabled: theme(colors.red.300);
-  --color-error-light: theme(colors.red.100);
-  --color-error-dark: theme(colors.red.800);
-  --color-error-surface: theme(colors.red.100);
-  --color-error-text: theme(colors.red.800);
+  --color-error-weak: theme(colors.red.700);
+  --color-error-medium: theme(colors.red.800);
+  --color-error-strong: theme(colors.red.900);
 
   /* Info Colors */
   --color-info: theme(colors.blue.600);
-  --color-info-hover: theme(colors.blue.700);
+  --color-info-weak: theme(colors.blue.700);
   --color-info-active: theme(colors.blue.800);
-  --color-info-disabled: theme(colors.blue.300);
-  --color-info-light: theme(colors.blue.100);
-  --color-info-dark: theme(colors.blue.800);
-  --color-info-surface: theme(colors.blue.100);
-  --color-info-text: theme(colors.blue.800);
+  --color-info-medium: theme(colors.blue.800);
+  --color-info-strong: theme(colors.blue.900);
+
+  /* Action Colors - Dark mode variants */
+  /* Primary Actions */
+  --color-action-primary: theme(colors.blue.500);
+  --color-action-primary-hover: theme(colors.blue.600);
+  --color-action-primary-active: theme(colors.blue.700);
+  --color-action-primary-disabled: theme(colors.blue.700);
+  --color-action-primary-subtle: theme(colors.blue.950);
+  --color-action-primary-subtle-hover: theme(colors.blue.900);
+
+  /* Secondary Actions */
+  --color-action-secondary: theme(colors.stone.500);
+  --color-action-secondary-hover: theme(colors.stone.600);
+  --color-action-secondary-active: theme(colors.stone.700);
+  --color-action-secondary-disabled: theme(colors.stone.700);
+  --color-action-secondary-subtle: theme(colors.stone.800);
+  --color-action-secondary-subtle-hover: theme(colors.stone.700);
+
+  /* Danger Actions */
+  --color-action-danger: theme(colors.red.500);
+  --color-action-danger-hover: theme(colors.red.600);
+  --color-action-danger-active: theme(colors.red.700);
+  --color-action-danger-disabled: theme(colors.red.700);
+  --color-action-danger-subtle: theme(colors.red.950);
+  --color-action-danger-subtle-hover: theme(colors.red.900);
 
   /* Shadow Colors */
   --shadow-opacity: 0.3;
@@ -286,27 +302,29 @@
    ======================================== */
 
 /* Surface utilities */
-.bg-surface {
-  background-color: var(--color-surface);
+.bg-surface-level-0 {
+  background-color: var(--color-surface-level-0);
 }
 
-.bg-surface-secondary {
-  background-color: var(--color-surface-secondary);
+.bg-surface-level-1 {
+  background-color: var(--color-surface-level-1);
 }
 
-.bg-surface-tertiary {
-  background-color: var(--color-surface-tertiary);
+.bg-surface-level-2 {
+  background-color: var(--color-surface-level-2);
 }
 
 .bg-surface-elevated {
   background-color: var(--color-surface-elevated);
 }
 
-.bg-surface-hover:hover {
+/* Global hover effects removed - components should define their own hover states */
+
+.bg-surface-hover {
   background-color: var(--color-surface-hover);
 }
 
-.bg-surface-active:active {
+.bg-surface-active {
   background-color: var(--color-surface-active);
 }
 
@@ -396,4 +414,90 @@
 .focus-outline {
   outline: 2px solid var(--color-focus-ring);
   outline-offset: 2px;
+}
+
+/* Action utilities - For interactive elements like buttons */
+/* Primary Actions */
+.bg-action-primary {
+  background-color: var(--color-action-primary);
+}
+
+.bg-action-primary:hover {
+  background-color: var(--color-action-primary-hover);
+}
+
+.bg-action-primary:active {
+  background-color: var(--color-action-primary-active);
+}
+
+.bg-action-primary:disabled {
+  background-color: var(--color-action-primary-disabled);
+}
+
+.bg-action-primary-subtle {
+  background-color: var(--color-action-primary-subtle);
+}
+
+.bg-action-primary-subtle:hover {
+  background-color: var(--color-action-primary-subtle-hover);
+}
+
+/* Secondary Actions */
+.bg-action-secondary {
+  background-color: var(--color-action-secondary);
+}
+
+.bg-action-secondary:hover {
+  background-color: var(--color-action-secondary-hover);
+}
+
+.bg-action-secondary:active {
+  background-color: var(--color-action-secondary-active);
+}
+
+.bg-action-secondary:disabled {
+  background-color: var(--color-action-secondary-disabled);
+}
+
+.bg-action-secondary-subtle {
+  background-color: var(--color-action-secondary-subtle);
+}
+
+.bg-action-secondary-subtle:hover {
+  background-color: var(--color-action-secondary-subtle-hover);
+}
+
+/* Danger Actions */
+.bg-action-danger {
+  background-color: var(--color-action-danger);
+}
+
+.bg-action-danger:hover {
+  background-color: var(--color-action-danger-hover);
+}
+
+.bg-action-danger:active {
+  background-color: var(--color-action-danger-active);
+}
+
+.bg-action-danger:disabled {
+  background-color: var(--color-action-danger-disabled);
+}
+
+.bg-action-danger-subtle {
+  background-color: var(--color-action-danger-subtle);
+}
+
+.bg-action-danger-subtle:hover {
+  background-color: var(--color-action-danger-subtle-hover);
+}
+
+/* Modal Animation */
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "5.0.5",
+  "version": "5.0.7",
   "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
   "main": "dist/index.js",
@@ -80,19 +80,18 @@
     "prepublishOnly": "npm run build:lib"
   },
   "devDependencies": {
-    "@storybook/addon-svelte-csf": "^5.0.8",
-    "@storybook/sveltekit": "^9.1.7",
+    "@storybook/sveltekit": "^9.1.15",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.47.2",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@tsconfig/svelte": "^5.0.5",
     "@types/node": "^24.5.2",
     "@types/react": "^19.2.2",
-    "@tailwindcss/postcss": "^4.1.13",
     "autoprefixer": "^10.4.17",
     "postcss": "^8.4.35",
-    "storybook": "^9.1.7",
+    "storybook": "^9.1.15",
     "svelte": "^5.38.10",
     "svelte-check": "^4.3.1",
     "tailwindcss": "^4.1.13",