@runwisp/ui 0.13.0 → 0.15.0

package/src/lib/components/StatusIndicator.svelte

@@ -5,13 +5,7 @@
     import { fade } from "svelte/transition";
 
     type Status =
-        | "running"
-        | "success"
-        | "failed"
-        | "pending"
-        | "paused"
-        | "scheduled"
-        | "cancelled";
+        "running" | "success" | "failed" | "pending" | "paused" | "scheduled" | "cancelled";
     type Size = "sm" | "md" | "lg";
 
     interface Props {
@@ -32,28 +26,25 @@
         class: className = "",
     }: Props = $props();
 
-    // Status configuration lookup
     const STATUS_CONFIG: Record<Status, { label: string; classes: string; iconColor: string }> = {
         running: {
             label: "Running",
-            classes: "bg-info-soft text-info-soft-text border-info-soft ring-1 ring-info-soft",
+            classes: "bg-info-soft text-info-soft-text border-info-soft-border",
             iconColor: "text-info-surface",
         },
         success: {
             label: "Success",
-            classes:
-                "bg-success-soft text-success-soft-text border-success-soft ring-1 ring-success-soft/50",
+            classes: "bg-success-soft text-success-soft-text border-success-soft-border",
             iconColor: "text-success-surface",
         },
         failed: {
             label: "Failed",
-            classes:
-                "bg-danger-soft text-danger-soft-text border-danger-soft ring-1 ring-danger-soft/50",
+            classes: "bg-danger-soft text-danger-soft-text border-danger-soft-border",
             iconColor: "text-danger-surface",
         },
         pending: {
             label: "Pending",
-            classes: "bg-warning-soft text-warning-soft-text border-warning-soft",
+            classes: "bg-warning-soft text-warning-soft-text border-warning-soft-border",
             iconColor: "text-warning-surface",
         },
         paused: {
@@ -63,7 +54,7 @@
         },
         scheduled: {
             label: "Scheduled",
-            classes: "bg-primary-soft text-primary-soft-text border-primary-soft",
+            classes: "bg-primary-soft text-primary-soft-text border-primary-soft-border",
             iconColor: "text-primary",
         },
         cancelled: {
@@ -73,7 +64,6 @@
         },
     };
 
-    // Size configuration lookup
     const SIZE_CONFIG: Record<Size, { classes: string; iconSize: number }> = {
         sm: { classes: "px-2 py-0.5 text-2xs gap-1.5", iconSize: 10 },
         md: { classes: "px-2.5 py-0.5 text-xs gap-1.5", iconSize: 12 },
@@ -85,11 +75,10 @@
 </script>
 
 <div
-    class="duration-normal inline-flex items-center justify-center rounded-full border font-medium transition-all {config.classes} {sizeConfig.classes} {className}"
+    class="inline-flex items-center justify-center rounded-full border font-mono tracking-wide {config.classes} {sizeConfig.classes} {className}"
     role="status"
     in:fade={{ duration: 150 }}
 >
-    <!-- Icon Container -->
     <span class="flex shrink-0 items-center justify-center {config.iconColor}">
         {#if status === "running" || pulse}
             <svg

package/src/lib/components/Table.svelte

@@ -12,7 +12,7 @@
     let { children, class: className = "" }: Props = $props();
 </script>
 
-<div class="overflow-x-auto rounded-xl border border-outline {className}">
+<div class="overflow-x-auto rounded-[4px] border border-outline {className}">
     <table class="w-full text-sm">
         {@render children()}
     </table>

package/src/lib/components/TableCell.svelte

@@ -27,7 +27,7 @@
 <svelte:element
     this={tag}
     class="px-4 py-3 {alignClasses[align]} {header
-        ? 'text-xs font-medium tracking-wider text-on-surface-muted uppercase'
+        ? 'font-mono text-xs tracking-wide text-on-surface-faint uppercase'
         : 'text-on-surface'} {className}"
 >
     {@render children()}

package/src/lib/components/TableRow.svelte

@@ -13,10 +13,6 @@
     let { children, hoverable = false, class: className = "" }: Props = $props();
 </script>
 
-<tr
-    class="border-b border-outline-faint {hoverable
-        ? 'duration-fast transition-colors hover:bg-surface-sunken'
-        : ''} {className}"
->
+<tr class="border-b border-outline {hoverable ? 'hover:bg-surface-sunken' : ''} {className}">
     {@render children()}
 </tr>

package/src/lib/components/Tabs.svelte

@@ -53,9 +53,8 @@
         const baseClasses = `
             ${fullWidth ? "flex-1" : ""}
             inline-flex items-center justify-center gap-2 px-4 py-2.5
-            text-sm font-medium
-            transition-colors duration-150
-            disabled:cursor-not-allowed disabled:opacity-50
+            text-sm font-mono
+                        disabled:cursor-not-allowed disabled:opacity-50
         `;
 
         const isActive = activeTab === tab.id;
@@ -63,16 +62,16 @@
         if (variant === "underline") {
             return `${baseClasses} -mb-px border-b-2 ${
                 isActive
-                    ? "border-primary text-primary-soft-text"
-                    : "border-transparent text-on-surface-muted hover:border-outline-hover hover:text-on-surface"
+                    ? "border-primary text-primary"
+                    : "border-transparent text-on-surface-muted hover:border-outline-hover hover:text-primary"
             }`;
         }
 
         if (variant === "pills" || variant === "enclosed") {
-            return `${baseClasses} rounded-lg ${
+            return `${baseClasses} rounded-[3px] ${
                 isActive
-                    ? "bg-surface-raised text-on-surface shadow-sm"
-                    : "text-on-surface-muted hover:text-on-surface"
+                    ? "bg-primary-soft text-primary-soft-text"
+                    : "text-on-surface-muted hover:text-primary"
             }`;
         }
 
@@ -81,12 +80,11 @@
 </script>
 
 <div class={className}>
-    <!-- Tab list -->
     <div
         class="
 			{variant === 'underline' ? 'border-b border-outline' : ''}
-			{variant === 'pills' ? 'rounded-xl bg-surface-sunken p-1' : ''}
-			{variant === 'enclosed' ? 'rounded-xl border border-outline bg-surface-sunken p-1' : ''}
+			{variant === 'pills' ? 'rounded-[4px] bg-surface-sunken p-1' : ''}
+			{variant === 'enclosed' ? 'rounded-[4px] border border-outline bg-surface-sunken p-1' : ''}
 		"
         role="tablist"
     >
@@ -120,7 +118,7 @@
                     {#if tab.badge || tab.badge === 0}
                         <span
                             class="
-							rounded-full px-1.5 py-0.5 text-xs font-medium
+							rounded-[3px] px-1.5 py-0.5 font-mono text-xs
 							{activeTab === tab.id
                                 ? 'bg-primary-soft text-primary-soft-text'
                                 : 'bg-surface-sunken text-on-surface-muted'}
@@ -134,7 +132,6 @@
         </nav>
     </div>
 
-    <!-- Tab panels -->
     {#if children && renderedActiveTab}
         <div
             id="tabpanel-{renderedActiveTab}"

package/src/lib/components/TaskCard.svelte

@@ -15,16 +15,19 @@
 
     let { accent = "wisp", onclick, children, class: className = "" }: Props = $props();
 
+    // Each accent maps to a left keyline in the matching semantic colour. The
+    // other three sides stay a neutral hairline (set per-side so the shorthand
+    // never overrides the accent left-colour), and hover lifts the surface.
     const accentClasses: Record<TaskCardAccent, string> = {
-        danger: "hover:border-danger-soft-border",
-        wisp: "hover:border-primary-soft-border",
-        aurora: "hover:border-info-soft-border",
+        danger: "border-l-danger-surface",
+        wisp: "border-l-primary",
+        aurora: "border-l-info",
     };
 </script>
 
 <button
     type="button"
-    class="group w-full rounded-lg border border-outline-faint bg-surface-raised p-3 text-left transition-all hover:shadow-sm {accentClasses[
+    class="group w-full rounded-[4px] border border-l-2 border-t-outline border-r-outline border-b-outline bg-surface-raised p-3 text-left hover:bg-surface-sunken {accentClasses[
         accent
     ]} {className}"
     {onclick}

package/src/lib/components/Textarea.svelte

@@ -34,21 +34,21 @@
     };
 
     const textareaClasses = `
-		w-full px-3.5 py-2.5 rounded-lg border
+		w-full px-3.5 py-2.5 rounded-[3px] border font-mono
 		text-sm bg-surface-raised text-on-surface placeholder:text-on-surface-faint
-		focus:outline-none focus:ring-2 focus:ring-offset-0
+		focus:outline-none focus:ring-2 focus:ring-offset-2
 		disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
-		transition-colors duration-fast
-	`;
+			`;
 
     const normalBorder =
-        "border-outline hover:border-outline-hover focus:border-ring focus:ring-ring/20";
-    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+        "border-outline hover:border-outline-hover shadow-sm focus:border-ring focus:ring-ring";
+    const errorBorder =
+        "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
 </script>
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label class="block text-sm font-medium text-on-surface-muted" for={id}>
+        <label class="block font-mono text-xs font-medium text-on-surface-muted" for={id}>
             {label}
         </label>
     {/if}
@@ -63,8 +63,7 @@
             {disabled}
             {id}
             bind:value
-            {...restProps}
-        ></textarea>
+            {...restProps}></textarea>
 
         {#if error}
             <div class="pointer-events-none absolute top-3 right-3 text-danger-soft-text">
@@ -74,8 +73,8 @@
     </div>
 
     {#if error}
-        <p class="text-sm text-danger-soft-text">{error}</p>
+        <p class="font-sans text-xs text-danger-soft-text">{error}</p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/ThemeToggle.svelte

@@ -37,7 +37,7 @@
     aria-pressed={isDark}
     aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
     title={isDark ? "Switch to light theme" : "Switch to dark theme"}
-    class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-outline bg-surface-raised text-on-surface-muted transition-colors hover:border-outline-hover hover:text-on-surface {className}"
+    class="inline-flex h-9 w-9 items-center justify-center rounded-[3px] border border-outline bg-surface-raised text-on-surface-muted hover:border-outline-hover hover:text-on-surface {className}"
 >
     {#if mounted && isDark}
         <Sun size={16} />

package/src/lib/components/ToastContainer.svelte

@@ -2,10 +2,6 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    /**
-     * Toast notification component
-     * Displays toast notifications for user feedback
-     */
     import { fly, fade } from "svelte/transition";
     import { CircleCheck, CircleX, Info, TriangleAlert, X } from "@lucide/svelte";
     import { toast, type Toast } from "../utils/toast.svelte.js";
@@ -50,7 +46,6 @@
     }
 </script>
 
-<!-- Toast Container -->
 <div
     class="pointer-events-none fixed bottom-4 left-1/2 z-[100] flex -translate-x-1/2 flex-col gap-2"
     role="region"
@@ -62,7 +57,7 @@
         <div
             in:fly={{ y: 20, duration: 300 }}
             out:fade={{ duration: 200 }}
-            class="pointer-events-auto isolate flex max-w-md min-w-[320px] items-start gap-3 rounded-xl border bg-surface-overlay/95 px-4 py-3 shadow-lg ring-1 ring-on-surface/5 backdrop-blur-md {getColorClasses(
+            class="pointer-events-auto isolate flex max-w-md min-w-[320px] items-start gap-3 rounded-[4px] border bg-surface-overlay px-4 py-3 shadow-lg {getColorClasses(
                 toastItem.type,
             )}"
             role="alert"
@@ -79,14 +74,14 @@
                         action.onClick();
                         toast.remove(toastItem.id);
                     }}
-                    class="flex-shrink-0 rounded-md px-2 py-1 text-xs font-semibold text-on-surface underline-offset-2 transition-colors hover:bg-surface-sunken hover:underline"
+                    class="flex-shrink-0 rounded-[3px] px-2 py-1 font-mono text-xs font-semibold text-on-surface underline-offset-2 hover:bg-surface-sunken hover:underline"
                 >
                     {action.label}
                 </button>
             {/if}
             <button
                 onclick={() => toast.remove(toastItem.id)}
-                class="flex-shrink-0 rounded-lg p-1 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                class="flex-shrink-0 rounded-[3px] p-1 text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface"
                 aria-label="Close notification"
             >
                 <X class="h-4 w-4" aria-hidden="true" />

package/src/lib/components/Toggle.svelte

@@ -55,7 +55,6 @@
         class="
 			relative inline-flex shrink-0 items-center rounded-full
 			{sizeConfig.track}
-			transition-colors duration-200
 			focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
 			{checked ? 'bg-primary' : 'bg-outline-hover'}
 			{disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
@@ -65,7 +64,7 @@
             class="
 				inline-block rounded-full bg-surface-raised shadow-sm
 				{sizeConfig.thumb}
-				transform transition-transform duration-200
+				transform transition-transform duration-[120ms]
 				{checked ? sizeConfig.translate : 'translate-x-0.5'}
 			"
         ></span>
@@ -74,7 +73,7 @@
     {#if label || description}
         <div class="flex flex-col gap-0.5">
             {#if label}
-                <span class="{sizeConfig.text} font-medium text-on-surface">{label}</span>
+                <span class="{sizeConfig.text} font-mono font-medium text-on-surface">{label}</span>
             {/if}
             {#if description}
                 <span class="text-sm text-on-surface-muted">{description}</span>

package/src/lib/components/Tooltip.svelte

@@ -31,26 +31,28 @@
     };
 
     const arrowClasses: Record<TooltipPosition, string> = {
-        top: "top-full left-1/2 -translate-x-1/2 border-t-mist-800 border-x-transparent border-b-transparent",
-        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-mist-800 border-x-transparent border-t-transparent",
-        left: "left-full top-1/2 -translate-y-1/2 border-l-mist-800 border-y-transparent border-r-transparent",
-        right: "right-full top-1/2 -translate-y-1/2 border-r-mist-800 border-y-transparent border-l-transparent",
+        top: "top-full left-1/2 -translate-x-1/2 border-t-outline border-x-transparent border-b-transparent",
+        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-outline border-x-transparent border-t-transparent",
+        left: "left-full top-1/2 -translate-y-1/2 border-l-outline border-y-transparent border-r-transparent",
+        right: "right-full top-1/2 -translate-y-1/2 border-r-outline border-y-transparent border-l-transparent",
     };
 </script>
 
 <div class="group relative inline-block {className}">
     {@render children()}
 
+    <!-- Hover intent: 100ms before it appears, so sweeping the pointer across a
+         dense row doesn't flash a trail of bubbles. Still no fade — `duration-0`
+         keeps the appearance instant once the delay is served, per DESIGN.md. -->
     <div
         class="
 			absolute z-50 {positionClasses[position]}
-			pointer-events-none invisible rounded-lg
-			bg-mist-800 px-2.5 py-1.5 text-xs
-			font-medium
+			pointer-events-none invisible rounded-[3px]
+			border border-outline bg-surface-overlay px-2.5 py-1.5 font-sans
+			text-xs
 			{wide ? 'w-max max-w-xs whitespace-normal' : 'whitespace-nowrap'}
-			text-white opacity-0 transition-opacity
-			duration-150 group-hover:visible
-			group-hover:opacity-100
+			text-on-surface opacity-0 transition-[opacity,visibility]
+			delay-100 duration-0 group-hover:visible group-hover:opacity-100
 		"
         role="tooltip"
     >

package/src/lib/components/button-styles.ts

@@ -7,45 +7,44 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg";
 export const BUTTON_BASE = `
     group
     inline-flex items-center justify-center gap-2
-    font-medium cursor-pointer select-none
-    border border-transparent
-    focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/10 focus-visible:border-ring
+    font-mono font-medium tracking-normal
+    cursor-pointer select-none border
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
     disabled:opacity-50 disabled:cursor-not-allowed
-    transition-all duration-normal ease-out
-    active:scale-[0.98]
+        active:translate-y-px
 `;
 
 export const BUTTON_VARIANTS: Record<ButtonVariant, string> = {
     primary: `
-        bg-primary text-on-primary shadow-sm shadow-primary/20
-        hover:bg-primary-hover hover:shadow-md hover:shadow-primary/30
+        bg-primary text-on-primary border-transparent
+        hover:bg-primary-hover
         active:bg-primary-active
     `,
     secondary: `
-        bg-surface-raised text-on-surface-muted border-outline shadow-sm
-        hover:bg-surface-sunken hover:text-on-surface hover:border-outline-hover
+        bg-surface-raised text-on-surface border-outline
+        hover:border-outline-hover hover:text-primary
         active:bg-surface-sunken
     `,
     ghost: `
-        bg-transparent text-on-surface-muted
+        bg-transparent text-on-surface-muted border-transparent
         hover:bg-surface-sunken hover:text-on-surface
         active:bg-surface-sunken
     `,
     danger: `
-        bg-danger-surface text-on-danger shadow-sm shadow-danger-surface/20
-        hover:bg-danger-hover hover:shadow-md hover:shadow-danger-surface/30
+        bg-danger-surface text-on-danger border-transparent
+        hover:bg-danger-hover
         active:bg-danger-active
     `,
     success: `
-        bg-success-surface text-on-success shadow-sm shadow-success-surface/20
-        hover:bg-success-hover hover:shadow-md hover:shadow-success-surface/30
+        bg-success-surface text-on-success border-transparent
+        hover:bg-success-hover
         active:bg-success-surface
     `,
 };
 
 export const BUTTON_SIZES: Record<ButtonSize, string> = {
-    xs: "text-xs px-2 py-1 rounded-md",
-    sm: "text-sm px-3 py-1.5 rounded-lg",
-    md: "text-sm px-4 py-2 rounded-lg",
-    lg: "text-base px-6 py-3 rounded-xl",
+    xs: "text-xs px-2.5 py-1 rounded-[3px]",
+    sm: "text-sm px-3 py-1.5 rounded-[3px]",
+    md: "text-sm px-4 py-2 rounded-[3px]",
+    lg: "text-base px-6 py-2.5 rounded-[3px]",
 };