@runwisp/ui 0.7.0 → 0.8.0

package/src/lib/utils/format.ts

@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import { formatDistanceToNow } from "date-fns";
+import { formatDistance } from "date-fns";
 
 export function formatBytes(bytes: number): string {
     const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
@@ -16,14 +16,16 @@ export function formatBytes(bytes: number): string {
     return `${new Intl.NumberFormat("en", { maximumFractionDigits: digits }).format(value)} ${unit}`;
 }
 
-export function formatRelativeTime(dateStr: string | Date): string {
-    return formatDistanceToNow(new Date(dateStr), { addSuffix: true });
+export function formatRelativeTime(dateStr: string | Date, now: Date = new Date()): string {
+    return formatDistance(new Date(dateStr), now, { addSuffix: true });
 }
 
-export function formatRelativeTimeWithAbsolute(dateStr: string | Date): string {
+export function formatRelativeTimeWithAbsolute(
+    dateStr: string | Date,
+    now: Date = new Date(),
+): string {
     const date = new Date(dateStr);
-    const relative = formatDistanceToNow(date, { addSuffix: true }).replace("about ", "");
-    const now = new Date();
+    const relative = formatDistance(date, now, { addSuffix: true }).replace("about ", "");
     const diffMs = Math.abs(now.getTime() - date.getTime());
     const diffDays = diffMs / (1000 * 60 * 60 * 24);
 

package/src/stories/Avatar.stories.svelte

@@ -68,7 +68,7 @@
         <Avatar name="Charlie Brown" size="md" />
         <Avatar name="Diana Ross" size="md" />
         <div
-            class="flex h-10 w-10 items-center justify-center rounded-full bg-mist-200 text-sm font-medium text-mist-600 ring-2 ring-white"
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-mist-200 text-sm font-medium text-on-surface-muted ring-2 ring-white"
         >
             +5
         </div>

package/src/stories/Breadcrumb.stories.svelte

@@ -49,7 +49,7 @@
 />
 
 <Story name="In Page Context" asChild>
-    <div class="rounded-xl border border-mist-200 bg-white p-6">
+    <div class="rounded-xl border border-outline bg-white p-6">
         <Breadcrumb
             items={[
                 { label: "Dashboard", href: "/" },
@@ -58,7 +58,7 @@
             ]}
             class="mb-4"
         />
-        <h1 class="text-2xl font-semibold text-mist-900">backup-database</h1>
-        <p class="mt-1 text-mist-500">Daily database backup task</p>
+        <h1 class="text-2xl font-semibold text-on-surface">backup-database</h1>
+        <p class="mt-1 text-on-surface-muted">Daily database backup task</p>
     </div>
 </Story>

package/src/stories/Card.stories.svelte

@@ -25,26 +25,28 @@
 </script>
 
 <Story name="Default" args={{}}>
-    <h3 class="mb-2 text-lg font-semibold text-mist-900">Card Title</h3>
-    <p class="text-mist-600">This is a basic card component with default padding and styling.</p>
+    <h3 class="mb-2 text-lg font-semibold text-on-surface">Card Title</h3>
+    <p class="text-on-surface-muted">
+        This is a basic card component with default padding and styling.
+    </p>
 </Story>
 
 <Story name="With Header and Footer" asChild>
     <Card>
         {#snippet header()}
             <div class="flex items-center justify-between">
-                <h3 class="font-semibold text-mist-900">Task Configuration</h3>
+                <h3 class="font-semibold text-on-surface">Task Configuration</h3>
                 <Badge variant="success" dot>Active</Badge>
             </div>
         {/snippet}
 
         <div class="space-y-3">
-            <p class="text-sm text-mist-600">
+            <p class="text-sm text-on-surface-muted">
                 Configure your scheduled task settings and execution parameters.
             </p>
             <div class="text-sm">
-                <span class="text-mist-500">Schedule:</span>
-                <span class="ml-2 font-mono text-mist-800">*/5 * * * *</span>
+                <span class="text-on-surface-muted">Schedule:</span>
+                <span class="ml-2 font-mono text-on-surface">*/5 * * * *</span>
             </div>
         </div>
 
@@ -60,16 +62,16 @@
 <Story name="Hoverable" asChild>
     <div class="grid max-w-3xl grid-cols-3 gap-4">
         <Card hover>
-            <h4 class="mb-1 font-semibold text-mist-900">Total Tasks</h4>
-            <p class="text-2xl font-bold text-wisp-600">156</p>
+            <h4 class="mb-1 font-semibold text-on-surface">Total Tasks</h4>
+            <p class="text-2xl font-bold text-primary">156</p>
         </Card>
         <Card hover>
-            <h4 class="mb-1 font-semibold text-mist-900">Active</h4>
-            <p class="text-2xl font-bold text-success-600">142</p>
+            <h4 class="mb-1 font-semibold text-on-surface">Active</h4>
+            <p class="text-2xl font-bold text-success-soft-text">142</p>
         </Card>
         <Card hover>
-            <h4 class="mb-1 font-semibold text-mist-900">Failed</h4>
-            <p class="text-2xl font-bold text-danger-600">3</p>
+            <h4 class="mb-1 font-semibold text-on-surface">Failed</h4>
+            <p class="text-2xl font-bold text-danger-soft-text">3</p>
         </Card>
     </div>
 </Story>
@@ -77,13 +79,13 @@
 <Story name="Different Padding" asChild>
     <div class="max-w-md space-y-4">
         <Card padding="sm">
-            <p class="text-sm text-mist-600">Small padding card</p>
+            <p class="text-sm text-on-surface-muted">Small padding card</p>
         </Card>
         <Card padding="md">
-            <p class="text-sm text-mist-600">Medium padding card (default)</p>
+            <p class="text-sm text-on-surface-muted">Medium padding card (default)</p>
         </Card>
         <Card padding="lg">
-            <p class="text-sm text-mist-600">Large padding card</p>
+            <p class="text-sm text-on-surface-muted">Large padding card</p>
         </Card>
     </div>
 </Story>
@@ -91,16 +93,16 @@
 <Story name="Different Shadows" asChild>
     <div class="flex gap-4">
         <Card shadow="none">
-            <p class="text-sm text-mist-600">No shadow</p>
+            <p class="text-sm text-on-surface-muted">No shadow</p>
         </Card>
         <Card shadow="sm">
-            <p class="text-sm text-mist-600">Small shadow</p>
+            <p class="text-sm text-on-surface-muted">Small shadow</p>
         </Card>
         <Card shadow="md">
-            <p class="text-sm text-mist-600">Medium shadow</p>
+            <p class="text-sm text-on-surface-muted">Medium shadow</p>
         </Card>
         <Card shadow="lg">
-            <p class="text-sm text-mist-600">Large shadow</p>
+            <p class="text-sm text-on-surface-muted">Large shadow</p>
         </Card>
     </div>
 </Story>

package/src/stories/Checkbox.stories.svelte

@@ -53,8 +53,8 @@
 </Story>
 
 <Story name="Settings Example" 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">Notification Preferences</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">Notification Preferences</h3>
         <div class="space-y-3">
             <Checkbox
                 label="Task completion alerts"

package/src/stories/DataGrid.stories.svelte

@@ -81,7 +81,7 @@
 {/snippet}
 
 {#snippet durationCell(/** @type {any} */ row)}
-    <span class="font-mono text-mist-700">{row.duration}</span>
+    <span class="font-mono text-on-surface-muted">{row.duration}</span>
 {/snippet}
 
 <Story name="Basic" args={{ columns, data: tasks }} />

package/src/stories/Dropdown.stories.svelte

@@ -69,11 +69,11 @@
 />
 
 <Story name="In Context" asChild>
-    <div class="max-w-md rounded-xl border border-mist-200 bg-white p-4">
+    <div class="max-w-md rounded-xl border border-outline bg-white p-4">
         <div class="flex items-center justify-between">
             <div>
-                <h3 class="font-semibold text-mist-900">backup-database</h3>
-                <p class="text-sm text-mist-500">Daily at 2:00 AM</p>
+                <h3 class="font-semibold text-on-surface">backup-database</h3>
+                <p class="text-sm text-on-surface-muted">Daily at 2:00 AM</p>
             </div>
             <Dropdown items={taskActions} />
         </div>

package/src/stories/EmptyState.stories.svelte

@@ -60,7 +60,7 @@
 </Story>
 
 <Story name="In Card Context" asChild>
-    <div class="max-w-lg rounded-xl border border-mist-200 bg-white p-6">
+    <div class="max-w-lg rounded-xl border border-outline bg-white p-6">
         <EmptyState
             icon={Calendar}
             title="No upcoming executions"

package/src/stories/LogConsole.stories.svelte

@@ -0,0 +1,75 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import LogConsole from "$lib/components/LogConsole.svelte";
+    import LogConsoleDemo from "./LogConsoleDemo.svelte";
+
+    const { Story } = defineMeta({
+        title: "Dashboard/LogConsole",
+        component: LogConsole,
+        tags: ["autodocs"],
+        parameters: {
+            backgrounds: { default: "dark" },
+        },
+    });
+
+    const ESC = "\x1b[";
+
+    const SAMPLE_LOG = [
+        `${ESC}90m2026-06-05T03:00:00+02:00${ESC}0m ${ESC}1mbackup-database${ESC}0m starting`,
+        `${ESC}36m[info]${ESC}0m connecting to postgres://localhost:5432/app`,
+        `${ESC}36m[info]${ESC}0m dumping schema ${ESC}1mpublic${ESC}0m (12 tables)`,
+        `  ${ESC}32m✓${ESC}0m users            ${ESC}90m(184,221 rows, 48 MB)${ESC}0m`,
+        `  ${ESC}32m✓${ESC}0m sessions         ${ESC}90m(902,114 rows, 210 MB)${ESC}0m`,
+        `  ${ESC}32m✓${ESC}0m invoices         ${ESC}90m(45,002 rows, 12 MB)${ESC}0m`,
+        `${ESC}33m[warn]${ESC}0m table ${ESC}1maudit_log${ESC}0m exceeds 1 GB — consider partitioning`,
+        `  ${ESC}32m✓${ESC}0m audit_log        ${ESC}90m(7,212,330 rows, 1.2 GB)${ESC}0m`,
+        `${ESC}31m[error]${ESC}0m checksum mismatch on chunk 7, retrying ${ESC}90m(attempt 1/3)${ESC}0m`,
+        `  ${ESC}32m✓${ESC}0m retry succeeded`,
+        `${ESC}36m[info]${ESC}0m compressing with ${ESC}35mzstd -19${ESC}0m`,
+        `${ESC}36m[info]${ESC}0m uploading to ${ESC}34ms3://backups/app/2026-06-05.tar.zst${ESC}0m`,
+        `${ESC}32m[done]${ESC}0m backup completed in ${ESC}1m42.7s${ESC}0m ${ESC}90m(exit 0)${ESC}0m`,
+    ];
+
+    const PALETTE_DEMO = [
+        "Standard foreground (30–37):",
+        `${ESC}30mblack${ESC}0m ${ESC}31mred${ESC}0m ${ESC}32mgreen${ESC}0m ${ESC}33myellow${ESC}0m ${ESC}34mblue${ESC}0m ${ESC}35mmagenta${ESC}0m ${ESC}36mcyan${ESC}0m ${ESC}37mwhite${ESC}0m`,
+        "",
+        "Bright foreground (90–97):",
+        `${ESC}90mblack${ESC}0m ${ESC}91mred${ESC}0m ${ESC}92mgreen${ESC}0m ${ESC}93myellow${ESC}0m ${ESC}94mblue${ESC}0m ${ESC}95mmagenta${ESC}0m ${ESC}96mcyan${ESC}0m ${ESC}97mwhite${ESC}0m`,
+        "",
+        "Bold + colour:",
+        `${ESC}1;31mbold red${ESC}0m ${ESC}1;32mbold green${ESC}0m ${ESC}1;34mbold blue${ESC}0m ${ESC}1;36mbold cyan${ESC}0m`,
+        "",
+        "Backgrounds (41–47):",
+        `${ESC}41m red ${ESC}0m ${ESC}42m green ${ESC}0m ${ESC}43m yellow ${ESC}0m ${ESC}44m blue ${ESC}0m ${ESC}45m magenta ${ESC}0m ${ESC}46m cyan ${ESC}0m`,
+        "",
+        "Underline + colour:",
+        `${ESC}4;36munderlined cyan link${ESC}0m and ${ESC}4;33munderlined yellow${ESC}0m`,
+    ];
+
+    const STREAM_TICKS = [
+        `${ESC}36m[info]${ESC}0m processed batch ${ESC}1m#42${ESC}0m ${ESC}90m(1,024 records)${ESC}0m`,
+        `${ESC}32m✓${ESC}0m health check passed`,
+        `${ESC}33m[warn]${ESC}0m slow query detected ${ESC}90m(812ms)${ESC}0m`,
+        `${ESC}36m[info]${ESC}0m flushing write buffer`,
+    ];
+</script>
+
+<Story name="Sample Run Log" asChild>
+    <LogConsoleDemo lines={SAMPLE_LOG} />
+</Story>
+
+<Story name="ANSI Palette" asChild>
+    <LogConsoleDemo lines={PALETTE_DEMO} />
+</Story>
+
+<Story name="Streaming" asChild>
+    <LogConsoleDemo lines={SAMPLE_LOG.slice(0, 5)} finished={false} streamLines={STREAM_TICKS} />
+</Story>
+
+<Story name="Truncated" asChild>
+    <LogConsoleDemo lines={SAMPLE_LOG.slice(6)} firstAvailableLine={1500} />
+</Story>

package/src/stories/LogConsoleDemo.svelte

@@ -0,0 +1,60 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<!-- Storybook-only harness: LogConsole is seeded by its parent calling
+     onStream(), so this wrapper feeds it a canned LogEvent on mount and,
+     optionally, keeps appending lines to demo live streaming. -->
+<script lang="ts">
+    import { onMount } from "svelte";
+    import LogConsole from "$lib/components/LogConsole.svelte";
+
+    interface Props {
+        lines: string[];
+        finished?: boolean;
+        firstAvailableLine?: number;
+        streamLines?: string[];
+        height?: string;
+    }
+
+    let {
+        lines,
+        finished = true,
+        firstAvailableLine = 0,
+        streamLines = [],
+        height = "24rem",
+    }: Props = $props();
+
+    let logConsole = $state<LogConsole | null>(null);
+
+    function toEvent(slice: Record<number, string>, total: number): void {
+        logConsole?.onStream({
+            lines: slice,
+            sizeLines: total,
+            sizeBytes: Object.values(slice).reduce((n, l) => n + l.length + 1, 0),
+            finished,
+            firstAvailableLine,
+        });
+    }
+
+    onMount(() => {
+        const slice: Record<number, string> = {};
+        lines.forEach((text, i) => {
+            slice[firstAvailableLine + i] = text;
+        });
+        toEvent(slice, firstAvailableLine + lines.length);
+
+        if (finished || streamLines.length === 0) return;
+
+        let next = firstAvailableLine + lines.length;
+        const timer = setInterval(() => {
+            const text = streamLines[(next - lines.length) % streamLines.length] ?? "";
+            toEvent({ [next]: text }, next + 1);
+            next += 1;
+        }, 700);
+        return () => clearInterval(timer);
+    });
+</script>
+
+<div class="overflow-hidden rounded-xl border border-outline" style="height: {height};">
+    <LogConsole bind:this={logConsole} />
+</div>

package/src/stories/Logo.stories.svelte

@@ -21,26 +21,26 @@
 <Story name="Default" args={{}} />
 
 <Story name="Sizes" asChild>
-    <div class="flex items-center gap-8 rounded-lg bg-mist-50 p-8">
+    <div class="flex items-center gap-8 rounded-lg bg-surface-sunken p-8">
         <div class="flex flex-col items-center gap-2">
             <Logo size="xs" />
-            <span class="text-xs text-mist-600">XS</span>
+            <span class="text-xs text-on-surface-muted">XS</span>
         </div>
         <div class="flex flex-col items-center gap-2">
             <Logo size="sm" />
-            <span class="text-xs text-mist-600">SM</span>
+            <span class="text-xs text-on-surface-muted">SM</span>
         </div>
         <div class="flex flex-col items-center gap-2">
             <Logo size="md" />
-            <span class="text-xs text-mist-600">MD</span>
+            <span class="text-xs text-on-surface-muted">MD</span>
         </div>
         <div class="flex flex-col items-center gap-2">
             <Logo size="lg" />
-            <span class="text-xs text-mist-600">LG</span>
+            <span class="text-xs text-on-surface-muted">LG</span>
         </div>
         <div class="flex flex-col items-center gap-2">
             <Logo size="xl" />
-            <span class="text-xs text-mist-600">XL</span>
+            <span class="text-xs text-on-surface-muted">XL</span>
         </div>
     </div>
 </Story>
@@ -62,9 +62,9 @@
 </Story>
 
 <Story name="With Custom Class" asChild>
-    <div class="flex items-center gap-4 rounded-lg bg-mist-50 p-8">
-        <Logo size="lg" class="text-wisp-600" />
-        <span class="text-lg font-semibold text-mist-900">Custom Color</span>
+    <div class="flex items-center gap-4 rounded-lg bg-surface-sunken p-8">
+        <Logo size="lg" class="text-primary" />
+        <span class="text-lg font-semibold text-on-surface">Custom Color</span>
     </div>
 </Story>
 

package/src/stories/Modal.stories.svelte

@@ -38,7 +38,9 @@
         title="Modal Title"
         description="This is a description of the modal."
     >
-        <p class="text-mist-600">This is the modal content. You can put any content here.</p>
+        <p class="text-on-surface-muted">
+            This is the modal content. You can put any content here.
+        </p>
     </Modal>
 </Story>
 
@@ -62,7 +64,7 @@
 <Story name="Confirmation Dialog" asChild>
     <Button variant="danger" onclick={() => (confirmOpen = true)}>Delete Task</Button>
     <Modal bind:open={confirmOpen} title="Delete Task?" size="sm">
-        <p class="text-mist-600">
+        <p class="text-on-surface-muted">
             Are you sure you want to delete <strong>backup-database</strong>? This action cannot be
             undone.
         </p>
@@ -81,15 +83,15 @@
         <div
             class="max-h-96 overflow-auto rounded-lg bg-mist-900 p-4 font-mono text-sm text-mist-100"
         >
-            <p class="text-aurora-400">Starting task execution...</p>
-            <p class="text-mist-300">Connecting to database...</p>
-            <p class="text-mist-300">Connection established</p>
-            <p class="text-mist-300">Running backup query...</p>
-            <p class="text-mist-300">Processing 1,234 records...</p>
-            <p class="text-mist-300">Compressing backup file...</p>
-            <p class="text-mist-300">Uploading to storage...</p>
+            <p class="text-info">Starting task execution...</p>
+            <p class="text-on-surface-faint">Connecting to database...</p>
+            <p class="text-on-surface-faint">Connection established</p>
+            <p class="text-on-surface-faint">Running backup query...</p>
+            <p class="text-on-surface-faint">Processing 1,234 records...</p>
+            <p class="text-on-surface-faint">Compressing backup file...</p>
+            <p class="text-on-surface-faint">Uploading to storage...</p>
             <p class="text-success-400">Task completed successfully</p>
-            <p class="text-mist-500">Total execution time: 90s</p>
+            <p class="text-on-surface-muted">Total execution time: 90s</p>
         </div>
         {#snippet footer()}
             <div class="flex justify-between">

package/src/stories/Progress.stories.svelte

@@ -44,8 +44,8 @@
 </Story>
 
 <Story name="Usage Example" 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">Resource Usage</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">Resource Usage</h3>
         <Progress value={45} label="CPU Usage" showLabel />
         <Progress value={72} label="Memory" showLabel variant="warning" />
         <Progress value={23} label="Storage" showLabel variant="success" />
@@ -54,12 +54,12 @@
 </Story>
 
 <Story name="Task Execution Progress" asChild>
-    <div class="max-w-md space-y-4 rounded-xl border border-mist-200 bg-white p-4">
+    <div class="max-w-md space-y-4 rounded-xl border border-outline bg-white p-4">
         <div class="flex items-center justify-between">
-            <h3 class="font-semibold text-mist-900">backup-database</h3>
-            <span class="text-sm text-mist-500">Running...</span>
+            <h3 class="font-semibold text-on-surface">backup-database</h3>
+            <span class="text-sm text-on-surface-muted">Running...</span>
         </div>
         <Progress value={67} showLabel />
-        <p class="text-sm text-mist-500">Processing 847 of 1,234 records</p>
+        <p class="text-sm text-on-surface-muted">Processing 847 of 1,234 records</p>
     </div>
 </Story>

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();