@runwisp/ui 0.6.0 → 0.8.0

package/src/stories/Tabs.stories.svelte

@@ -43,8 +43,8 @@
 <Story name="Underline (Default)" asChild>
     <Tabs tabs={basicTabs} variant="underline">
         {#snippet children(activeTab)}
-            <div class="rounded-lg border border-mist-200 bg-white p-4">
-                <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+            <div class="rounded-lg border border-outline bg-white p-4">
+                <p class="text-on-surface-muted">Content for <strong>{activeTab}</strong> tab</p>
             </div>
         {/snippet}
     </Tabs>
@@ -53,8 +53,8 @@
 <Story name="Pills" asChild>
     <Tabs tabs={basicTabs} variant="pills">
         {#snippet children(activeTab)}
-            <div class="rounded-lg border border-mist-200 bg-white p-4">
-                <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+            <div class="rounded-lg border border-outline bg-white p-4">
+                <p class="text-on-surface-muted">Content for <strong>{activeTab}</strong> tab</p>
             </div>
         {/snippet}
     </Tabs>
@@ -63,8 +63,8 @@
 <Story name="Enclosed" asChild>
     <Tabs tabs={basicTabs} variant="enclosed">
         {#snippet children(activeTab)}
-            <div class="rounded-lg border border-mist-200 bg-white p-4">
-                <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+            <div class="rounded-lg border border-outline bg-white p-4">
+                <p class="text-on-surface-muted">Content for <strong>{activeTab}</strong> tab</p>
             </div>
         {/snippet}
     </Tabs>
@@ -73,8 +73,10 @@
 <Story name="With Icons and Badges" asChild>
     <Tabs tabs={iconTabs} variant="underline">
         {#snippet children(activeTab)}
-            <div class="rounded-lg border border-mist-200 bg-white p-4">
-                <p class="text-mist-600">You're viewing the <strong>{activeTab}</strong> section</p>
+            <div class="rounded-lg border border-outline bg-white p-4">
+                <p class="text-on-surface-muted">
+                    You're viewing the <strong>{activeTab}</strong> section
+                </p>
             </div>
         {/snippet}
     </Tabs>
@@ -84,8 +86,10 @@
     <div class="max-w-md">
         <Tabs tabs={basicTabs} variant="pills" fullWidth>
             {#snippet children(activeTab)}
-                <div class="rounded-lg border border-mist-200 bg-white p-4">
-                    <p class="text-mist-600">Content for <strong>{activeTab}</strong> tab</p>
+                <div class="rounded-lg border border-outline bg-white p-4">
+                    <p class="text-on-surface-muted">
+                        Content for <strong>{activeTab}</strong> tab
+                    </p>
                 </div>
             {/snippet}
         </Tabs>
@@ -95,8 +99,8 @@
 <Story name="With Disabled Tab" asChild>
     <Tabs tabs={disabledTabs} variant="underline">
         {#snippet children(activeTab)}
-            <div class="rounded-lg border border-mist-200 bg-white p-4">
-                <p class="text-mist-600">Showing <strong>{activeTab}</strong> tasks</p>
+            <div class="rounded-lg border border-outline bg-white p-4">
+                <p class="text-on-surface-muted">Showing <strong>{activeTab}</strong> tasks</p>
             </div>
         {/snippet}
     </Tabs>

package/src/stories/Toggle.stories.svelte

@@ -48,8 +48,8 @@
 </Story>
 
 <Story name="Settings Panel" asChild>
-    <div class="max-w-md space-y-4 rounded-xl border border-mist-200 bg-white p-4">
-        <h3 class="font-semibold text-mist-900">Task Settings</h3>
+    <div class="max-w-md space-y-4 rounded-xl border border-outline bg-white p-4">
+        <h3 class="font-semibold text-on-surface">Task Settings</h3>
         <div class="space-y-4">
             <Toggle
                 label="Enable task"

package/src/stories/Tooltip.stories.svelte

@@ -48,17 +48,17 @@
 <Story name="On Icons" asChild>
     <div class="flex items-center justify-center gap-6 py-8">
         <Tooltip content="More information">
-            <button class="rounded-lg p-2 text-mist-500 hover:bg-mist-100">
+            <button class="rounded-lg p-2 text-on-surface-muted hover:bg-surface-sunken">
                 <Info size={20} />
             </button>
         </Tooltip>
         <Tooltip content="Get help">
-            <button class="rounded-lg p-2 text-mist-500 hover:bg-mist-100">
+            <button class="rounded-lg p-2 text-on-surface-muted hover:bg-surface-sunken">
                 <CircleQuestionMark size={20} />
             </button>
         </Tooltip>
         <Tooltip content="Settings">
-            <button class="rounded-lg p-2 text-mist-500 hover:bg-mist-100">
+            <button class="rounded-lg p-2 text-on-surface-muted hover:bg-surface-sunken">
                 <Settings size={20} />
             </button>
         </Tooltip>
@@ -67,9 +67,9 @@
 
 <Story name="Usage Example" asChild>
     <div class="flex items-center gap-2 py-8">
-        <span class="text-sm text-mist-700">Cron Expression</span>
+        <span class="text-sm text-on-surface-muted">Cron Expression</span>
         <Tooltip content="Use standard cron syntax: minute hour day month weekday">
-            <button class="text-mist-400 hover:text-mist-600">
+            <button class="text-on-surface-faint hover:text-on-surface-muted">
                 <CircleQuestionMark size={16} />
             </button>
         </Tooltip>

package/src/lib/utils/toast.ts

@@ -1,60 +0,0 @@
-// SPDX-FileCopyrightText: PoppyCake, s.r.o.
-// SPDX-License-Identifier: Apache-2.0
-
-import { generateUlid } from "@runwisp/common";
-
-export type ToastType = "success" | "error" | "warning" | "info";
-
-export interface Toast {
-    id: string;
-    type: ToastType;
-    message: string;
-    duration?: number;
-}
-
-const DEFAULT_DURATION = 5000;
-
-class ToastStore {
-    items = $state<Toast[]>([]);
-
-    add(type: ToastType, message: string, duration = DEFAULT_DURATION): string {
-        const id = generateUlid();
-        const t: Toast = { id, type, message, duration };
-
-        this.items = [...this.items, t];
-
-        if (duration > 0) {
-            setTimeout(() => {
-                this.remove(id);
-            }, duration);
-        }
-
-        return id;
-    }
-
-    remove(id: string) {
-        this.items = this.items.filter((t) => t.id !== id);
-    }
-
-    success(message: string, duration?: number): string {
-        return this.add("success", message, duration);
-    }
-
-    error(message: string, duration?: number): string {
-        return this.add("error", message, duration);
-    }
-
-    warning(message: string, duration?: number): string {
-        return this.add("warning", message, duration);
-    }
-
-    info(message: string, duration?: number): string {
-        return this.add("info", message, duration);
-    }
-
-    clear() {
-        this.items = [];
-    }
-}
-
-export const toast = new ToastStore();