@runwisp/ui 0.6.0 → 0.8.0

package/src/lib/theme-tokens.css

@@ -88,6 +88,27 @@
     --rw-color-warning-600: oklch(0.65 0.14 60);
     --rw-color-warning-700: oklch(0.55 0.12 55);
 
+    /* ANSI console palette — 16-color map for the log console, tuned for
+     * its always-dark surface (no .dark override needed). Hues follow the
+     * semantic scales: red→danger, green→success, yellow→warning,
+     * blue→wisp, cyan→aurora, grays→mist. */
+    --rw-ansi-black: var(--rw-color-mist-700);
+    --rw-ansi-red: var(--rw-color-danger-400);
+    --rw-ansi-green: var(--rw-color-success-400);
+    --rw-ansi-yellow: var(--rw-color-warning-400);
+    --rw-ansi-blue: var(--rw-color-wisp-400);
+    --rw-ansi-magenta: oklch(0.68 0.14 320); /* between wisp and danger hues */
+    --rw-ansi-cyan: var(--rw-color-aurora-400);
+    --rw-ansi-white: var(--rw-color-mist-300);
+    --rw-ansi-bright-black: var(--rw-color-mist-500);
+    --rw-ansi-bright-red: var(--rw-color-danger-300);
+    --rw-ansi-bright-green: var(--rw-color-success-300);
+    --rw-ansi-bright-yellow: var(--rw-color-warning-300);
+    --rw-ansi-bright-blue: var(--rw-color-wisp-300);
+    --rw-ansi-bright-magenta: oklch(0.78 0.1 320);
+    --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
+    --rw-ansi-bright-white: var(--rw-color-mist-50);
+
     /* Light-mode semantic tokens (default) */
     /* Surfaces */
     --rw-surface: var(--rw-color-mist-50);
@@ -136,6 +157,12 @@
     --rw-on-info: white;
     --rw-info-soft: var(--rw-color-aurora-50);
     --rw-info-soft-text: var(--rw-color-aurora-700);
+    /* Soft callout borders — sit on the matching *-soft surface */
+    --rw-primary-soft-border: var(--rw-color-wisp-200);
+    --rw-danger-soft-border: var(--rw-color-danger-200);
+    --rw-success-soft-border: var(--rw-color-success-200);
+    --rw-warning-soft-border: var(--rw-color-warning-200);
+    --rw-info-soft-border: var(--rw-color-aurora-200);
     /* Glass */
     --rw-glass: oklch(1 0 0 / 0.8);
     --rw-glass-blur: blur(12px);
@@ -189,6 +216,12 @@
     --rw-on-info: white;
     --rw-info-soft: oklch(0.2 0.04 180);
     --rw-info-soft-text: var(--rw-color-aurora-300);
+    /* Soft callout borders */
+    --rw-primary-soft-border: oklch(0.32 0.06 270);
+    --rw-danger-soft-border: oklch(0.32 0.06 355);
+    --rw-success-soft-border: oklch(0.32 0.06 165);
+    --rw-warning-soft-border: oklch(0.32 0.06 85);
+    --rw-info-soft-border: oklch(0.32 0.06 180);
     /* Glass */
     --rw-glass: oklch(0.12 0.012 280 / 0.9);
 }

package/src/lib/theme.css

@@ -201,6 +201,12 @@
     --color-on-info: var(--rw-on-info);
     --color-info-soft: var(--rw-info-soft);
     --color-info-soft-text: var(--rw-info-soft-text);
+    /* Soft callout borders */
+    --color-primary-soft-border: var(--rw-primary-soft-border);
+    --color-danger-soft-border: var(--rw-danger-soft-border);
+    --color-success-soft-border: var(--rw-success-soft-border);
+    --color-warning-soft-border: var(--rw-warning-soft-border);
+    --color-info-soft-border: var(--rw-info-soft-border);
 
     /* Transition durations */
     --duration-fast: 100ms;

package/src/lib/utils/format.test.ts

@@ -2,7 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { describe, expect, it } from "vitest";
-import { formatBytes, formatDuration, formatRelativeTimeWithAbsolute } from "./format.js";
+import {
+    formatBytes,
+    formatDuration,
+    formatRelativeTime,
+    formatRelativeTimeWithAbsolute,
+} from "./format.js";
 
 describe("formatBytes", () => {
     it("formats 0 bytes", () => {
@@ -85,4 +90,35 @@ describe("formatRelativeTimeWithAbsolute", () => {
         expect(r).toMatch(/\([^)]*\d[^)]*\)$/);
         expect(r).not.toMatch(/\(\d{1,2}:\d{2}\)$/);
     });
+    it("computes the relative part against the supplied now", () => {
+        const date = new Date("2024-01-01T12:00:00Z");
+        const twoHoursBefore = formatRelativeTimeWithAbsolute(
+            date,
+            new Date("2024-01-01T10:00:00Z"),
+        );
+        const oneHourBefore = formatRelativeTimeWithAbsolute(
+            date,
+            new Date("2024-01-01T11:00:00Z"),
+        );
+        expect(twoHoursBefore).toMatch(/^in 2 hours/);
+        expect(oneHourBefore).toMatch(/^in 1 hour/);
+    });
+    it("picks the day-boundary branch against the supplied now", () => {
+        const date = new Date("2024-01-01T12:00:00Z");
+        // 2 days after the date → calendar-date suffix, not HH:MM.
+        const r = formatRelativeTimeWithAbsolute(date, new Date("2024-01-03T12:00:00Z"));
+        expect(r).not.toMatch(/\(\d{1,2}:\d{2}\)$/);
+    });
+});
+
+describe("formatRelativeTime", () => {
+    it("advances as the supplied now advances", () => {
+        const date = new Date("2024-01-01T12:00:00Z");
+        expect(formatRelativeTime(date, new Date("2024-01-01T14:00:00Z"))).toBe(
+            "about 2 hours ago",
+        );
+        expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe(
+            "about 3 hours ago",
+        );
+    });
 });

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>