zabi-components 5.0.9 → 5.0.10

package/dist/atoms/Badge.svelte

@@ -13,7 +13,14 @@
         text = "",
         showIcon = true,
     }: {
-        variant?: "default" | "success" | "warning" | "error" | "info";
+        variant?:
+            | "default"
+            | "success"
+            | "warning"
+            | "error"
+            | "info"
+            | "neutral"
+            | "energetic";
         size?: "sm" | "md" | "lg";
         text: string;
         showIcon?: boolean;
@@ -35,14 +42,18 @@
         // Variant classes - using semantic color system
         const variantClass =
             variant === "success"
-                ? "bg-surface-level-1 border-secondary text-success"
+                ? "bg-surface-level-1 border-success text-success"
                 : variant === "warning"
                   ? "bg-surface-level-1 border-secondary text-warning"
                   : variant === "error"
                     ? "bg-surface-level-1 border-secondary text-error"
                     : variant === "info"
-                      ? "bg-surface-level-1 border-secondary text-body"
-                      : "bg-surface-level-1 border-secondary text-body"; // default
+                      ? "bg-surface-level-1 border-secondary text-info"
+                      : variant === "neutral"
+                        ? "bg-surface-level-1 border-secondary text-neutral"
+                        : variant === "energetic"
+                          ? "bg-surface-level-1 border-secondary text-energetic"
+                          : "bg-surface-level-1 border-secondary text-body"; // default
 
         return `${baseClasses} ${sizeClass} ${variantClass}`.trim();
     });
@@ -68,6 +79,10 @@
             <X size={iconSize()} class={iconSpacingClass()} />
         {:else if variant === "info"}
             <Info size={iconSize()} class={iconSpacingClass()} />
+        {:else if variant === "neutral"}
+            <Info size={iconSize()} class={iconSpacingClass()} />
+        {:else if variant === "energetic"}
+            <Info size={iconSize()} class={iconSpacingClass()} />
         {:else}
             <Info size={iconSize()} class={iconSpacingClass()} />
         {/if}

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

@@ -1,5 +1,5 @@
 type $$ComponentProps = {
-    variant?: "default" | "success" | "warning" | "error" | "info";
+    variant?: "default" | "success" | "warning" | "error" | "info" | "neutral" | "energetic";
     size?: "sm" | "md" | "lg";
     text: string;
     showIcon?: boolean;

package/dist/atoms/Button.svelte

@@ -34,14 +34,14 @@
     // Variant classes using semantic action colors
     const variantClass = $derived(() => {
         return variant === "primary"
-            ? "bg-action-primary text-inverse focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            ? "bg-action-primary text-inverse focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
             : variant === "secondary"
               ? "border border-secondary text-description hover:border-secondary-hover focus:ring-2 focus:ring-stone-500 focus:ring-offset-2"
               : variant === "danger"
                 ? "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
+                  : "bg-action-primary text-inverse focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"; // default primary
     });
 
     // Button classes using Badge pattern

package/dist/atoms/Checkbox.svelte

@@ -31,7 +31,7 @@
     // Checkbox classes using Badge pattern
     const checkboxClasses = $derived(
         () =>
-            "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed",
+            "w-4 h-4 text-brand-600 bg-gray-100 border-gray-300 rounded focus:ring-brand-500 focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed",
     );
 
     function handleChange(event: Event) {

package/dist/atoms/ColorPicker.svelte

@@ -68,10 +68,10 @@
     // 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-blue-200";
+            "w-full px-3 py-2 border rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-brand-200";
         const stateClasses =
             isValidHex(value) || value === ""
-                ? "border-gray-300 focus:border-blue-500"
+                ? "border-gray-300 focus:border-brand-500"
                 : "border-red-300 focus:border-red-500 focus:ring-red-200";
 
         return `${baseClasses} ${stateClasses}`.trim();

package/dist/atoms/Progress.svelte

@@ -54,7 +54,7 @@
         {...restProps}
     >
         <div
-            class="h-full bg-blue-600 rounded-full"
+            class="h-full bg-brand-600 rounded-full"
             style="width: {percentage}%"
         ></div>
     </div>

package/dist/atoms/ThemeToggle.svelte

@@ -68,7 +68,7 @@
 {#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 cursor-pointer 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-brand-500"
         aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
         {...restProps}
     >

package/dist/atoms/Toast.svelte

@@ -21,7 +21,7 @@
         success: "bg-green-100 border-green-300 text-success",
         error: "bg-red-100 border-red-300 text-error",
         warning: "bg-yellow-100 border-yellow-300 text-warning",
-        info: "bg-blue-100 border-blue-300 text-body",
+        info: "bg-iris-100 border-iris-300 text-body",
     };
 
     function closeToast(event: Event) {

package/dist/atoms/Toggle.svelte

@@ -40,14 +40,15 @@
     }
 
     // Toggle button classes using full class names
-    const toggleButtonClasses = $derived(() => {
-        const baseClasses =
-            "relative inline-flex w-11 h-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2";
-        const stateClasses = checked ? "bg-blue-600" : "bg-gray-200";
-        const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";
-
-        return `${baseClasses} ${stateClasses} ${disabledClasses}`.trim();
-    });
+    const toggleButtonClasses = $derived(() =>
+        [
+            "relative inline-flex w-11 h-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 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-gray-200",
+            disabled && "opacity-50 cursor-not-allowed",
+        ]
+            .filter(Boolean)
+            .join(" "),
+    );
 
     // Toggle thumb classes using full class names
     const toggleThumbClasses = $derived(() => {

package/dist/molecules/Alert.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     interface Props {
-        variant?: "info" | "success" | "warning" | "error";
+        variant?: "info" | "success" | "warning" | "error" | "neutral" | "energetic";
         title?: string;
         message?: string;
         closable?: boolean;
@@ -27,10 +27,12 @@
     }
 
     let alertClasses = $derived({
-        info: "bg-info-surface text-body border border-info",
-        success: "bg-success-surface text-success border border-success",
-        warning: "bg-warning-surface text-warning border border-warning",
-        error: "bg-error-surface text-error border border-error",
+        info: "bg-surface-level-1 text-info border border-info",
+        success: "bg-surface-level-1 text-success border border-success",
+        warning: "bg-surface-level-1 text-warning border border-warning",
+        error: "bg-surface-level-1 text-error border border-error",
+        neutral: "bg-surface-level-1 text-neutral border border-neutral",
+        energetic: "bg-surface-level-1 text-energetic border border-energetic",
     });
 
     let alertRole = $derived(
@@ -50,6 +52,12 @@
         error: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
         </svg>`,
+        neutral: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM10 9a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
+        </svg>`,
+        energetic: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M11 3L4 14h6l-1 7 7-11h-6l1-7z" />
+        </svg>`,
     });
 </script>
 

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

@@ -1,5 +1,5 @@
 interface Props {
-    variant?: "info" | "success" | "warning" | "error";
+    variant?: "info" | "success" | "warning" | "error" | "neutral" | "energetic";
     title?: string;
     message?: string;
     closable?: boolean;

package/dist/molecules/Tabs.svelte

@@ -49,8 +49,8 @@
                 class="px-4 py-2 text-sm font-medium border-b-2 transition-colors {activeTab ===
                 tab.id
                     ? variant === 'pills'
-                        ? 'bg-blue-100 text-blue-700 border-blue-500'
-                        : 'border-blue-500 text-body'
+                        ? 'bg-brand-100 text-brand-700 border-brand-500'
+                        : 'border-brand-500 text-body'
                     : 'border-transparent text-description hover:text-body hover:border-gray-300'}"
                 onclick={() => selectTab(tab.id)}
                 disabled={tab.disabled}

package/dist/routes/lib/variant-utils.ts

@@ -9,11 +9,11 @@ export type Variant = 'default' | 'success' | 'warning' | 'error' | 'info';
  */
 export function getInputVariantClasses(variant: Variant): string {
     const variantMap: Record<Variant, string> = {
-        default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+        default: 'border-gray-300 focus:border-brand-500 focus:ring-brand-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',
+        info: 'border-iris-300 focus:border-iris-500 focus:ring-iris-500',
     };
 
     return variantMap[variant] || variantMap.default;
@@ -28,7 +28,7 @@ export function getCardVariantClasses(variant: Variant): string {
         success: 'border-green-200 bg-green-50',
         warning: 'border-yellow-200 bg-yellow-50',
         error: 'border-red-200 bg-red-50',
-        info: 'border-blue-200 bg-blue-50',
+        info: 'border-iris-200 bg-iris-50',
     };
 
     return variantMap[variant] || variantMap.default;
@@ -60,9 +60,9 @@ export function getVariantClasses(variant: Variant, type: 'border' | 'text' | 'b
             bg: 'bg-red-50'
         },
         info: {
-            border: 'border-blue-300',
-            text: 'text-blue-900',
-            bg: 'bg-blue-50'
+            border: 'border-iris-300',
+            text: 'text-iris-900',
+            bg: 'bg-iris-50'
         },
     };
 

package/dist/zabi-components.css

@@ -9,6 +9,58 @@
   /* Typography - Nunito Sans font family */
   --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
 
+  /* Brand Color Scale */
+  --color-brand-50: #f7faff;
+  --color-brand-100: #edf2fb; /* provided */
+  --color-brand-200: #dfe7fb;
+  --color-brand-300: #ccdbfd; /* provided */
+  --color-brand-400: #abc4ff; /* provided */
+  --color-brand-500: #8fa8ff;
+  --color-brand-600: #6e84fa;
+  --color-brand-700: #5366e2;
+  --color-brand-800: #3f4fc0;
+  --color-brand-900: #2f3c99;
+  --color-brand-950: #1f2866;
+
+  /* Citron Color Scale */
+  --color-citron-50: #f9faeb;
+  --color-citron-100: #f1f5cf;
+  --color-citron-200: #e4ecaa;
+  --color-citron-300: #d5e184;
+  --color-citron-400: #c7d460;
+  --color-citron-500: #bbbe64; /* provided */
+  --color-citron-600: #a3a852;
+  --color-citron-700: #848a43;
+  --color-citron-800: #666c35;
+  --color-citron-900: #4d5229;
+  --color-citron-950: #323518;
+
+  /* Pine Color Scale */
+  --color-pine-50: #e9f6f2;
+  --color-pine-100: #d2ece4;
+  --color-pine-200: #a7d9c9;
+  --color-pine-300: #78c4ad;
+  --color-pine-400: #49ad91;
+  --color-pine-500: #0C5D43; /* provided */
+  --color-pine-600: #0a513a;
+  --color-pine-700: #084532;
+  --color-pine-800: #063a2a;
+  --color-pine-900: #04231a;
+  --color-pine-950: #02160f;
+
+  /* Iris Color Scale */
+  --color-iris-50: #f4f4fa;
+  --color-iris-100: #e9e9f7;
+  --color-iris-200: #d6d6f0;
+  --color-iris-300: #bdbde6;
+  --color-iris-400: #a3a3d8;
+  --color-iris-500: #6969B3; /* provided */
+  --color-iris-600: #58589e;
+  --color-iris-700: #474788;
+  --color-iris-800: #38386f;
+  --color-iris-900: #2a2a56;
+  --color-iris-950: #1b1b37;
+
   /* 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);
@@ -45,11 +97,13 @@
   --color-caption: theme(colors.stone.500);
   --color-input-placeholder: theme(colors.stone.400);
   --color-label: theme(colors.stone.700);
-  --color-link: theme(colors.blue.600);
-  --color-link-hover: theme(colors.blue.700);
-  --color-success: theme(colors.green.700);
-  --color-warning: theme(colors.yellow.700);
-  --color-error: theme(colors.red.700);
+  --color-link: theme(colors.brand.600);
+  --color-link-hover: theme(colors.brand.700);
+  --color-success-text: theme(colors.pine.700);
+  --color-warning-text: theme(colors.amber.700);
+  --color-neutral-text: theme(colors.stone.700);
+  --color-energetic-text: theme(colors.citron.700);
+  --color-error-text: theme(colors.red.700);
   --color-inverse: theme(colors.white);
   --color-disabled: theme(colors.stone.400);
 
@@ -60,16 +114,16 @@
   --color-border-strong: theme(colors.stone.500);
 
   /* Focus Colors */
-  --color-focus: theme(colors.blue.500);
-  --color-focus-weak: theme(colors.blue.600);
-  --color-focus-medium: theme(colors.blue.700);
-  --color-focus-strong: theme(colors.blue.800);
+  --color-focus: theme(colors.brand.500);
+  --color-focus-weak: theme(colors.brand.600);
+  --color-focus-medium: theme(colors.brand.700);
+  --color-focus-strong: theme(colors.brand.800);
 
   /* Primary Colors */
-  --color-primary: theme(colors.blue.600);
-  --color-primary-weak: theme(colors.blue.700);
-  --color-primary-medium: theme(colors.blue.800);
-  --color-primary-strong: theme(colors.blue.900);
+  --color-primary: theme(colors.brand.600);
+  --color-primary-weak: theme(colors.brand.700);
+  --color-primary-medium: theme(colors.brand.800);
+  --color-primary-strong: theme(colors.brand.900);
 
   /* Secondary Colors */
   --color-secondary: theme(colors.stone.600);
@@ -78,37 +132,51 @@
   --color-secondary-strong: theme(colors.stone.900);
 
   /* Success Colors */
-  --color-success: theme(colors.green.600);
-  --color-success-weak: theme(colors.green.700);
-  --color-success-medium: theme(colors.green.800);
-  --color-success-strong: theme(colors.green.900);  
+  --color-success: theme(colors.pine.600);
+  --color-success-weak: theme(colors.pine.700);
+  --color-success-medium: theme(colors.pine.800);
+  --color-success-strong: theme(colors.pine.900);  
 
   /* Warning Colors */
-  --color-warning: theme(colors.yellow.600);
-  --color-warning-weak: theme(colors.yellow.700);
-  --color-warning-medium: theme(colors.yellow.800);
-  --color-warning-strong: theme(colors.yellow.900);
+  --color-warning: theme(colors.amber.500);
+  --color-warning-weak: theme(colors.amber.600);
+  --color-warning-medium: theme(colors.amber.400);
+  --color-warning-strong: theme(colors.amber.300);
 
   /* Error Colors */
-  --color-error: theme(colors.red.600);
-  --color-error-weak: theme(colors.red.700);
-  --color-error-medium: theme(colors.red.800);
-  --color-error-strong: theme(colors.red.900);
+  --color-error: theme(colors.red.500);
+  --color-error-weak: theme(colors.red.600);
+  --color-error-medium: theme(colors.red.400);
+  --color-error-strong: theme(colors.red.300);
+
+  /* Energetic Colors (Citron) */
+  --color-energetic: theme(colors.citron.500);
+  --color-energetic-weak: theme(colors.citron.600);
+  --color-energetic-medium: theme(colors.citron.400);
+  --color-energetic-strong: theme(colors.citron.300);
+
+  /* Neutral Colors */
+  --color-neutral: theme(colors.stone.600);
+  --color-neutral-weak: theme(colors.stone.700);
+  --color-neutral-medium: theme(colors.stone.800);
+  --color-neutral-strong: theme(colors.stone.900);
 
   /* Info Colors */
-  --color-info: theme(colors.blue.600);
-  --color-info-weak: theme(colors.blue.700);
-  --color-info-medium: theme(colors.blue.800);
-  --color-info-strong: theme(colors.blue.900);
+  --color-info: theme(colors.iris.600);
+  --color-info-weak: theme(colors.iris.700);
+  --color-info-medium: theme(colors.iris.800);
+  --color-info-strong: theme(colors.iris.900);
+  /* Text alias */
+  --color-info-text: var(--color-info);
 
   /* 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);
+  --color-action-primary: theme(colors.brand.600);
+  --color-action-primary-hover: theme(colors.brand.700);
+  --color-action-primary-active: theme(colors.brand.800);
+  --color-action-primary-disabled: theme(colors.brand.300);
+  --color-action-primary-subtle: theme(colors.brand.50);
+  --color-action-primary-subtle-hover: theme(colors.brand.100);
 
   /* Secondary Actions */
   --color-action-secondary: theme(colors.stone.600);
@@ -206,11 +274,13 @@ body {
   --color-caption: theme(colors.stone.400);
   --color-input-placeholder: theme(colors.stone.500);
   --color-label: theme(colors.stone.200);
-  --color-link: theme(colors.blue.400);
-  --color-link-hover: theme(colors.blue.300);
-  --color-success: theme(colors.green.400);
-  --color-warning: theme(colors.yellow.400);
-  --color-error: theme(colors.red.400);
+  --color-link: theme(colors.brand.400);
+  --color-link-hover: theme(colors.brand.300);
+  --color-success-text: theme(colors.pine.400);
+  --color-warning-text: theme(colors.amber.400);
+  --color-neutral-text: theme(colors.stone.400);
+  --color-energetic-text: theme(colors.citron.400);
+  --color-error-text: theme(colors.red.400);
   --color-inverse: theme(colors.stone.900);
   --color-disabled: theme(colors.stone.500);
 
@@ -221,17 +291,17 @@ body {
   --color-border-strong: theme(colors.stone.300);
 
   /* Focus Colors */
-  --color-focus: theme(colors.blue.400);
-  --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: theme(colors.brand.400);
+  --color-focus-weak: theme(colors.brand.500);
+  --color-focus-medium: theme(colors.brand.600);
+  --color-focus-strong: theme(colors.brand.700);
+  --color-focus-disabled: theme(colors.brand.600);
 
   /* Primary Colors */
-  --color-primary: theme(colors.blue.600);
-  --color-primary-weak: theme(colors.blue.700);
-  --color-primary-medium: theme(colors.blue.800);
-  --color-primary-strong: theme(colors.blue.900);
+  --color-primary: theme(colors.brand.600);
+  --color-primary-weak: theme(colors.brand.700);
+  --color-primary-medium: theme(colors.brand.800);
+  --color-primary-strong: theme(colors.brand.900);
 
   /* Secondary Colors */
   --color-secondary: theme(colors.stone.600);
@@ -240,16 +310,16 @@ body {
   --color-secondary-strong: theme(colors.stone.900);
 
   /* Success Colors */
-  --color-success: theme(colors.green.600);
-  --color-success-weak: theme(colors.green.700);
-  --color-success-medium: theme(colors.green.800);
-  --color-success-strong: theme(colors.green.900);
+  --color-success: theme(colors.pine.500);
+  --color-success-weak: theme(colors.pine.600);
+  --color-success-medium: theme(colors.pine.400);
+  --color-success-strong: theme(colors.pine.300);
 
   /* Warning Colors */
-  --color-warning: theme(colors.yellow.600);
-  --color-warning-weak: theme(colors.yellow.700);
-  --color-warning-medium: theme(colors.yellow.800);
-  --color-warning-strong: theme(colors.yellow.900);
+  --color-warning: theme(colors.amber.600);
+  --color-warning-weak: theme(colors.amber.700);
+  --color-warning-medium: theme(colors.amber.800);
+  --color-warning-strong: theme(colors.amber.900);
 
   /* Error Colors */
   --color-error: theme(colors.red.600);
@@ -257,21 +327,35 @@ body {
   --color-error-medium: theme(colors.red.800);
   --color-error-strong: theme(colors.red.900);
 
+  /* Energetic Colors (Citron) */
+  --color-energetic: theme(colors.citron.600);
+  --color-energetic-weak: theme(colors.citron.700);
+  --color-energetic-medium: theme(colors.citron.800);
+  --color-energetic-strong: theme(colors.citron.900);
+
+  /* Neutral Colors */
+  --color-neutral: theme(colors.stone.600);
+  --color-neutral-weak: theme(colors.stone.500);
+  --color-neutral-medium: theme(colors.stone.400);
+  --color-neutral-strong: theme(colors.stone.300);
+
   /* Info Colors */
-  --color-info: theme(colors.blue.600);
-  --color-info-weak: theme(colors.blue.700);
-  --color-info-active: theme(colors.blue.800);
-  --color-info-medium: theme(colors.blue.800);
-  --color-info-strong: theme(colors.blue.900);
+  --color-info: theme(colors.iris.500);
+  --color-info-weak: theme(colors.iris.600);
+  --color-info-active: theme(colors.iris.400);
+  --color-info-medium: theme(colors.iris.400);
+  --color-info-strong: theme(colors.iris.300);
+  /* Text alias */
+  --color-info-text: var(--color-info);
 
   /* 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);
+  --color-action-primary: theme(colors.brand.500);
+  --color-action-primary-hover: theme(colors.brand.600);
+  --color-action-primary-active: theme(colors.brand.700);
+  --color-action-primary-disabled: theme(colors.brand.700);
+  --color-action-primary-subtle: theme(colors.brand.950);
+  --color-action-primary-subtle-hover: theme(colors.brand.900);
 
   /* Secondary Actions */
   --color-action-secondary: theme(colors.stone.500);
@@ -365,16 +449,30 @@ body {
   color: var(--color-link-hover);
 }
 
+
 .text-success {
-  color: var(--color-success);
+  color: var(--color-success-text);
 }
 
 .text-warning {
-  color: var(--color-warning);
+  color: var(--color-warning-text);
 }
 
 .text-error {
-  color: var(--color-error);
+  color: var(--color-error-text);
+}
+
+/* Additional status text utilities */
+.text-info {
+  color: var(--color-info-text);
+}
+
+.text-neutral {
+  color: var(--color-neutral-text);
+}
+
+.text-energetic {
+  color: var(--color-energetic-text);
 }
 
 .text-inverse {
@@ -406,6 +504,31 @@ body {
   border-color: var(--color-border-disabled);
 }
 
+/* Status border utilities */
+.border-success {
+  border-color: var(--color-success);
+}
+
+.border-warning {
+  border-color: var(--color-warning);
+}
+
+.border-error {
+  border-color: var(--color-error);
+}
+
+.border-info {
+  border-color: var(--color-info);
+}
+
+.border-neutral {
+  border-color: var(--color-neutral);
+}
+
+.border-energetic {
+  border-color: var(--color-energetic);
+}
+
 /* Focus utilities */
 .focus-ring {
   box-shadow: 0 0 0 2px var(--color-focus-ring-offset), 0 0 0 4px var(--color-focus-ring);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "5.0.9",
+  "version": "5.0.10",
   "description": "A modern Svelte 5 component library with TypeScript, Tailwind CSS v4, and 100% SSR-safe components",
   "type": "module",
   "main": "dist/index.js",