@runwisp/ui 0.13.0 → 0.15.0

package/src/lib/components/LogConsole.svelte

@@ -564,8 +564,8 @@
         >
             {#if cache.firstAvailableLine > 0}
                 <div
-                    class="absolute right-0 left-0 flex items-center bg-warning-700/20 text-warning-400"
-                    style="top: 0px; height: {lineHeight}px;"
+                    class="absolute right-0 left-0 flex items-center text-term-warn"
+                    style="top: 0px; height: {lineHeight}px; background-color: color-mix(in srgb, var(--rw-term-warn) 15%, transparent);"
                 >
                     <div
                         class="sticky left-0 z-10 flex-shrink-0 pr-3 text-right select-none"
@@ -585,10 +585,7 @@
                 <div
                     class="log-line absolute right-0 left-0 flex {wrap
                         ? 'items-start'
-                        : 'items-center'} hover:bg-[rgb(255_255_255_/_0.025)] {flashLine ===
-                    line.num
-                        ? 'log-line--flash'
-                        : ''}"
+                        : 'items-center'} {flashLine === line.num ? 'log-line--flash' : ''}"
                     style="top: {lineTop(line.num)}px; height: {lineHeightPx(line.num)}px;"
                 >
                     <div
@@ -783,12 +780,11 @@
 
     {#if userScrolledUp && cache.totalLines > 0}
         <button
-            class="absolute right-4 bottom-12 z-10 flex items-center gap-2 rounded-full border
-                   border-[rgb(255_255_255_/_0.1)] bg-[var(--rw-con-panel)]
+            class="absolute right-4 bottom-12 z-10 flex items-center gap-2 rounded-[3px] border
+                   border-[var(--rw-con-gutter)] bg-[var(--rw-con-panel)]
                    px-3 py-1.5 text-xs
-                   font-medium text-[var(--rw-con-text)] shadow-lg
-                   transition-all duration-200 hover:scale-105
-                   hover:bg-[rgb(255_255_255_/_0.06)] active:scale-95"
+                   text-[var(--rw-con-text)]
+                                      hover:border-term-teal hover:text-term-teal active:translate-y-[1px]"
             onclick={enableAutoScroll}
         >
             <svg
@@ -805,8 +801,8 @@
     {/if}
 
     <div
-        class="flex flex-shrink-0 items-center justify-between border-t border-[rgb(255_255_255_/_0.06)]
-               bg-[var(--rw-con-panel)] px-3.5 py-2 text-[11px] text-[var(--rw-con-dim)]"
+        class="flex flex-shrink-0 items-center justify-between border-t border-[var(--rw-con-gutter)]
+               bg-[var(--rw-con-panel)] px-3.5 py-2 text-[11px] tracking-wide text-[var(--rw-con-dim)]"
     >
         <div class="flex items-center gap-3">
             {#if isStreaming}
@@ -827,7 +823,7 @@
                 <span>{formatBytes(cache.totalBytes)}</span>
             {/if}
             {#if isAutoScroll}
-                <span class="inline-flex items-center gap-1.5 text-[#7fe0b0]">
+                <span class="inline-flex items-center gap-1.5 text-term-ok">
                     <svg
                         class="h-3 w-3"
                         viewBox="0 0 24 24"
@@ -857,15 +853,21 @@
        way the approved design closes a finished capture. */
     .sentinel--muted {
         color: var(--rw-con-gutter);
-        border-top-color: rgb(255 255 255 / 0.08);
+        border-top-color: var(--rw-con-gutter);
     }
     .sentinel--warn {
-        color: #e5a552;
-        border-top-color: rgb(229 165 82 / 0.3);
+        color: var(--rw-term-warn);
+        border-top-color: color-mix(in srgb, var(--rw-term-warn) 30%, transparent);
+    }
+
+    /* Subtle row hover on the fixed-dark console surface — a faint lift of the
+       console text colour, never a theme-flipping fill. */
+    .log-line:hover {
+        background-color: color-mix(in srgb, var(--rw-con-text) 4%, transparent);
     }
 
     .log-line--flash {
-        animation: log-line-flash 1.5s ease-out;
+        animation: log-line-flash 1.5s;
     }
 
     .frame-toggle {
@@ -875,12 +877,11 @@
         background: transparent;
         border: none;
         padding: 0;
-        transition: color 120ms ease;
     }
 
     @keyframes log-line-flash {
         0% {
-            background-color: oklch(0.8 0.18 70 / 0.45);
+            background-color: color-mix(in srgb, var(--rw-term-warn) 45%, transparent);
         }
         100% {
             background-color: transparent;
@@ -924,7 +925,7 @@
         height: 4px;
         border-radius: 50%;
         background-color: currentColor;
-        animation: dot-pulse 1s ease-in-out infinite;
+        animation: dot-pulse 1s infinite;
     }
 
     @keyframes dot-pulse {

package/src/lib/components/Logo.svelte

@@ -20,7 +20,9 @@
     };
 </script>
 
-<span class="inline-flex {sizeClasses[size]} {className}" aria-hidden="true">
+<!-- The mark is flat currentColor (matching the website's brand mark), so the
+     brand teal comes from text-primary and any caller can override it. -->
+<span class="inline-flex text-primary {sizeClasses[size]} {className}" aria-hidden="true">
     <!-- SVG body is a static, repo-vendored asset imported via Vite's ?raw loader. -->
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html logoSvg}

package/src/lib/components/Modal.svelte

@@ -82,25 +82,27 @@
             class="
 				relative z-10 w-full {sizeClasses[size]}
 				flex max-h-[90vh] flex-col
-				rounded-2xl bg-surface-overlay shadow-xl
+				rounded-[4px] border border-outline bg-surface-overlay shadow-lg
 				{className}
 			"
             role="dialog"
             aria-modal="true"
             aria-labelledby={title ? "modal-title" : undefined}
         >
-            <!-- Header -->
             {#if header}
-                <div class="border-b border-outline-faint px-6 py-4">
+                <div class="border-b border-outline px-6 py-4">
                     {@render header()}
                 </div>
             {:else if title || closable}
                 <div
-                    class="flex items-start justify-between gap-4 border-b border-outline-faint px-6 py-4"
+                    class="flex items-start justify-between gap-4 border-b border-outline px-6 py-4"
                 >
                     <div>
                         {#if title}
-                            <h2 id="modal-title" class="text-lg font-semibold text-on-surface">
+                            <h2
+                                id="modal-title"
+                                class="font-mono text-lg font-semibold text-on-surface"
+                            >
                                 {title}
                             </h2>
                         {/if}
@@ -111,7 +113,7 @@
                     {#if closable}
                         <button
                             onclick={handleClose}
-                            class="-m-2 shrink-0 rounded-lg p-2 text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface-muted"
+                            class="-m-2 shrink-0 rounded-[3px] p-2 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface-muted"
                             aria-label="Close"
                         >
                             <X size={20} />
@@ -120,18 +122,14 @@
                 </div>
             {/if}
 
-            <!-- Body -->
             {#if children}
                 <div class="flex-1 overflow-y-auto px-6 py-4">
                     {@render children()}
                 </div>
             {/if}
 
-            <!-- Footer -->
             {#if footer}
-                <div
-                    class="rounded-b-2xl border-t border-outline-faint bg-surface-sunken/50 px-6 py-4"
-                >
+                <div class="rounded-b-[4px] border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}
                 </div>
             {/if}

package/src/lib/components/PageContainer.svelte

@@ -33,6 +33,6 @@
     };
 </script>
 
-<div class="animate-in fade-in duration-300 {variantClasses[variant]} {className}">
+<div class="{variantClasses[variant]} {className}">
     {@render children()}
 </div>

package/src/lib/components/PageHeader.svelte

@@ -16,7 +16,7 @@
 
 <div class="flex shrink-0 flex-wrap items-start justify-between gap-3 px-1 {className}">
     <div class="min-w-0">
-        <h1 class="text-2xl font-bold tracking-tight text-on-surface">{title}</h1>
+        <h1 class="font-mono text-2xl font-bold tracking-tight text-on-surface">{title}</h1>
         {#if subtitle}
             <p class="mt-0.5 text-sm text-on-surface-muted">{subtitle}</p>
         {/if}

package/src/lib/components/Pagination.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between {className}">
-    <div class="flex items-center gap-4 text-sm text-on-surface-muted">
+    <div class="flex items-center gap-4 font-mono text-sm text-on-surface-muted">
         {#if totalItems === 0}
             <span>No results</span>
         {:else}
@@ -57,8 +57,8 @@
                     value={pageSize}
                     onchange={handlePageSizeChange}
                     class="
-                        appearance-none rounded-lg border border-outline bg-surface-raised py-1 pr-7 pl-2 text-sm
-                        font-medium text-on-surface-muted shadow-sm focus:border-ring focus:ring-1 focus:ring-ring focus:outline-none
+                        appearance-none rounded-[3px] border border-outline bg-surface-raised py-1 pr-7 pl-2 font-mono
+                        text-sm text-on-surface-muted shadow-sm hover:border-outline-hover focus:border-ring focus:ring-1 focus:ring-ring focus:outline-none
                     "
                 >
                     {#each pageSizeOptions as size (size)}
@@ -81,7 +81,7 @@
             disabled={safePage <= 1}
             onclick={() => goTo(safePage - 1)}>Prev</Button
         >
-        <div class="min-w-[4rem] text-center text-xs text-on-surface-muted">
+        <div class="min-w-[4rem] text-center font-mono text-xs text-on-surface-muted">
             Page {safePage} of {totalPages}
         </div>
         <Button

package/src/lib/components/Popover.svelte

@@ -6,8 +6,7 @@
     import type { Placement } from "@floating-ui/dom";
     import { onDestroy } from "svelte";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
-    import { scale, fade } from "svelte/transition";
-    import { quintOut } from "svelte/easing";
+    import { fade } from "svelte/transition";
     import { portal } from "../actions/portal.js";
 
     interface Props {
@@ -139,20 +138,19 @@
             <div
                 use:portal
                 transition:fade={{ duration: 120 }}
-                class="fixed inset-0 z-[9998] bg-on-surface/40"
+                class="fixed inset-0 z-[9998] bg-backdrop"
                 aria-hidden="true"
             ></div>
         {/if}
         <div
             use:portal
             bind:this={contentEl}
-            transition:scale={{ duration: 150, start: 0.95, easing: quintOut }}
             class="
                 z-[9999] max-h-[80vh] overflow-y-auto
-                border border-outline bg-surface-overlay shadow-xl shadow-on-surface/5
+                border border-outline bg-surface-overlay shadow-lg
                 {asSheet
-                ? 'fixed inset-x-0 bottom-0 max-h-[85vh] rounded-t-2xl border-x-0 border-b-0 p-5'
-                : 'rounded-xl p-4'}
+                ? 'fixed inset-x-0 bottom-0 max-h-[85vh] rounded-t-[4px] border-x-0 border-b-0 p-5'
+                : 'rounded-[4px] p-4'}
             "
         >
             {#if children}

package/src/lib/components/Progress.svelte

@@ -45,19 +45,21 @@
     {#if showLabel || label}
         <div class="mb-1.5 flex items-center justify-between">
             {#if label}
-                <span class="text-sm font-medium text-on-surface-muted">{label}</span>
+                <span class="font-mono text-sm text-on-surface-muted">{label}</span>
             {/if}
             {#if showLabel}
-                <span class="text-sm text-on-surface-muted">{Math.round(percentage)}%</span>
+                <span class="font-mono text-sm text-on-surface-muted"
+                    >{Math.round(percentage)}%</span
+                >
             {/if}
         </div>
     {/if}
 
-    <div class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-outline">
+    <div class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-surface-sunken">
         <div
             class="{sizeClasses[size]} {variantClasses[
                 variant
-            ]} rounded-full transition-all duration-300"
+            ]} rounded-full transition-[width] duration-200"
             style="width: {percentage}%"
             role="progressbar"
             aria-valuenow={value}

package/src/lib/components/Prose.svelte

@@ -28,10 +28,10 @@
         prose-headings:text-on-surface
         prose-p:text-on-surface-muted prose-a:text-primary prose-a:no-underline
         hover:prose-a:underline
-        prose-blockquote:border-outline prose-blockquote:text-on-surface-muted prose-strong:text-on-surface prose-code:rounded prose-code:bg-surface-sunken
-        prose-code:px-1 prose-code:py-0.5 prose-code:text-on-surface
-        prose-pre:border prose-pre:border-outline
-        prose-pre:bg-surface-sunken
+        prose-blockquote:border-outline prose-blockquote:text-on-surface-muted prose-strong:text-on-surface prose-code:rounded-[3px] prose-code:bg-surface-sunken
+        prose-code:px-1 prose-code:py-0.5 prose-code:font-mono prose-code:text-on-surface
+        prose-pre:rounded-[4px] prose-pre:border prose-pre:border-outline
+        prose-pre:bg-surface-sunken prose-pre:font-mono
         prose-li:text-on-surface-muted
         prose-th:text-on-surface
         prose-td:text-on-surface-muted

package/src/lib/components/Radio.svelte

@@ -49,21 +49,20 @@
             checked={isChecked}
             onchange={() => (groupValue = value)}
             class="
-                peer {sizeClasses[size].radio} duration-fast
+                peer {sizeClasses[size].radio}
                 cursor-pointer appearance-none rounded-full
-                border-2 border-outline-hover
-                bg-surface-raised transition-colors
-                checked:border-primary checked:bg-primary
-                hover:border-on-surface-faint
+                border border-outline
+                bg-surface-raised checked:border-primary checked:bg-primary
+                hover:border-outline-hover
                 checked:hover:border-primary-hover checked:hover:bg-primary-hover
-                focus:ring-2 focus:ring-ring/20
-                focus:ring-offset-0 focus:outline-none
-                disabled:cursor-not-allowed disabled:hover:border-outline-hover
+                focus:ring-2 focus:ring-ring focus:ring-offset-2
+                focus:outline-none
+                disabled:cursor-not-allowed disabled:hover:border-outline
                 disabled:checked:hover:bg-primary
             "
         />
         <div
-            class="duration-fast pointer-events-none absolute rounded-full bg-on-primary opacity-0 transition-opacity peer-checked:opacity-100 {sizeClasses[
+            class="pointer-events-none absolute rounded-full bg-on-primary opacity-0 peer-checked:opacity-100 {sizeClasses[
                 size
             ].dot}"
         ></div>
@@ -72,7 +71,9 @@
     {#if label || description}
         <div class="flex flex-col gap-0.5">
             {#if label}
-                <span class="{sizeClasses[size].text} font-medium text-on-surface">{label}</span>
+                <span class="{sizeClasses[size].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/RadioGroup.svelte

@@ -36,7 +36,7 @@
 
 <fieldset class="space-y-3 {className}" role="radiogroup" aria-label={label}>
     {#if label}
-        <legend class="text-sm font-medium text-on-surface-muted">{label}</legend>
+        <legend class="font-mono text-xs font-medium text-on-surface-muted">{label}</legend>
     {/if}
 
     <div class={orientationClasses[orientation]}>
@@ -44,12 +44,10 @@
     </div>
 
     {#if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <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}
 </fieldset>

package/src/lib/components/Select.svelte

@@ -18,7 +18,6 @@
 <script lang="ts">
     import { tick, onDestroy } from "svelte";
     import { ChevronDown, Check, Search } from "@lucide/svelte";
-    import { fade } from "svelte/transition";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
     import { generateUlid } from "@runwisp/common";
 
@@ -54,7 +53,7 @@
         id = `select-${generateUlid()}`,
         name,
         onchange,
-        onsearch, // New prop
+        onsearch,
     }: Props & { onsearch?: (query: string) => void } = $props();
 
     let isOpen = $state(false);
@@ -157,7 +156,7 @@
         value = option.value;
         onchange?.(value);
         isOpen = false;
-        cleanupFloating?.(); // Cleanup immediately on select
+        cleanupFloating?.();
     }
 
     function handleKeydown(e: KeyboardEvent) {
@@ -231,18 +230,17 @@
     };
 
     const triggerBase = `
-        relative w-full text-left cursor-pointer
-        rounded-lg border bg-surface-raised
-        transition-all duration-normal ease-out
-        flex items-center justify-between
-        focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+        relative w-full text-left cursor-pointer font-mono
+        rounded-[3px] border bg-surface-raised
+                flex items-center justify-between
+        focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:border-ring
     `;
 
     const borderClass = $derived(
         error
-            ? "border-danger-300 ring-danger-500/20"
+            ? "border-danger-surface"
             : isOpen
-              ? "border-ring ring-4 ring-ring/10"
+              ? "border-ring ring-2 ring-ring ring-offset-2"
               : "border-outline hover:border-outline-hover shadow-sm hover:shadow-md",
     );
 </script>
@@ -251,7 +249,7 @@
 
 <div class="relative w-full {className}">
     {#if label}
-        <label for={id} class="mb-1.5 block text-sm font-medium text-on-surface-muted">
+        <label for={id} class="mb-1.5 block font-mono text-xs font-medium text-on-surface-muted">
             {label}
         </label>
     {/if}
@@ -292,30 +290,19 @@
         <div
             class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint"
         >
-            <ChevronDown
-                size={16}
-                class="transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
-            />
+            <ChevronDown size={16} class={isOpen ? "rotate-180" : ""} />
         </div>
     </button>
 
-    <!-- Hidden input for form submission if needed -->
     {#if name}
         <input type="hidden" {name} {value} />
     {/if}
 
-    <!-- Dropdown Menu -->
     {#if isOpen}
-        <div
-            use:portal
-            bind:this={menuEl}
-            transition:fade={{ duration: 100 }}
-            class="z-[9999] min-w-[200px]"
-        >
+        <div use:portal bind:this={menuEl} class="z-[9999] min-w-[200px]">
             <div
                 class="
-                overflow-hidden rounded-xl border border-outline bg-surface-overlay shadow-xl
-                ring-1 shadow-on-surface/5 ring-black/5
+                overflow-hidden rounded-[4px] border border-outline bg-surface-overlay shadow-md
             "
             >
                 {#if searchable}
@@ -331,8 +318,8 @@
                                 onkeydown={handleKeydown}
                                 placeholder="Search..."
                                 class="
-                                    w-full rounded-lg border border-outline bg-surface-raised py-1.5 pr-3 pl-8 text-xs
-                                    text-on-surface placeholder:text-on-surface-faint focus:border-ring focus:ring-1
+                                    w-full rounded-[3px] border border-outline bg-surface-raised py-1.5 pr-3 pl-8 font-mono text-xs
+                                    text-on-surface placeholder:text-on-surface-faint focus:border-ring focus:ring-2
                                     focus:ring-ring focus:outline-none
                                 "
                             />
@@ -341,7 +328,7 @@
                 {/if}
 
                 <div
-                    class="scrollbar-thin scrollbar-thumb-mist-200 scrollbar-track-transparent max-h-60 overflow-x-hidden overflow-y-auto p-1"
+                    class="max-h-60 scrollbar-thin scrollbar-thumb-mist-200 scrollbar-track-transparent overflow-x-hidden overflow-y-auto p-1"
                 >
                     {#if flattenedVisibleOptions.length === 0}
                         <div class="px-4 py-8 text-center text-sm text-on-surface-muted">
@@ -363,7 +350,7 @@
 
                     {#each Object.entries(groupedOptions.groups) as [groupName, groupOptions] (groupName)}
                         <div
-                            class="sticky top-0 z-10 mt-1 bg-surface-sunken/50 px-2 py-1.5 text-xs font-semibold tracking-wider text-on-surface-faint uppercase backdrop-blur-sm first:mt-0"
+                            class="sticky top-0 z-10 mt-1 bg-surface-sunken/50 px-2 py-1.5 font-mono text-xs font-semibold tracking-wider text-on-surface-faint uppercase backdrop-blur-sm first:mt-0"
                         >
                             {groupName}
                         </div>
@@ -385,17 +372,16 @@
     {/if}
 
     {#if error}
-        <p class="animate-in slide-in-from-top-1 fade-in mt-1.5 text-sm text-danger-soft-text">
+        <p class="mt-1.5 font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="mt-1.5 text-xs text-on-surface-muted">
+        <p class="mt-1.5 font-sans text-xs text-on-surface-muted">
             {hint}
         </p>
     {/if}
 </div>
 
-<!-- Helper Component for items -->
 {#snippet OptionItem({
     option,
     active,
@@ -416,8 +402,9 @@
         {onclick}
         onmouseenter={onsemiactive}
         class="
-            flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors
-            {active ? 'bg-surface-sunken' : 'hover:bg-surface-sunken/50'}
+            flex w-full items-start gap-3 rounded-[3px] px-2.5 py-2 text-left {active
+            ? 'bg-surface-sunken'
+            : 'hover:bg-surface-sunken/50'}
             {selected ? 'bg-primary-soft/50 font-medium text-on-surface' : 'text-on-surface-muted'}
             {option.disabled
             ? 'pointer-events-none cursor-not-allowed opacity-50'
@@ -433,14 +420,14 @@
 
         <div class="min-w-0 flex-1">
             <div class="flex items-center justify-between gap-2">
-                <span class="block truncate text-sm font-medium">{option.label}</span>
+                <span class="block truncate font-mono text-sm font-medium">{option.label}</span>
                 {#if selected}
                     <Check size={14} class="shrink-0 text-primary" />
                 {/if}
             </div>
             {#if option.description}
                 <div
-                    class="mt-0.5 line-clamp-2 text-xs leading-normal text-wrap text-on-surface-muted"
+                    class="mt-0.5 line-clamp-2 font-sans text-xs leading-normal text-wrap text-on-surface-muted"
                 >
                     {option.description}
                 </div>

package/src/lib/components/Separator.svelte

@@ -22,7 +22,10 @@
 {:else if label}
     <div role="separator" class="flex items-center gap-3 {className}">
         <div class="h-px flex-1 bg-outline"></div>
-        <span class="text-xs font-medium text-on-surface-faint select-none">{label}</span>
+        <span
+            class="font-mono text-xs font-medium tracking-wider text-on-surface-faint uppercase select-none"
+            >{label}</span
+        >
         <div class="h-px flex-1 bg-outline"></div>
     </div>
 {:else}

package/src/lib/components/Skeleton.svelte

@@ -30,7 +30,7 @@
 
 {#if shape === "circle"}
     <div
-        class="animate-pulse rounded-full bg-outline {className}"
+        class="animate-pulse rounded-full bg-surface-sunken {className}"
         style="width: {width ?? '2.5rem'}; height: {height ?? width ?? '2.5rem'}"
         role="status"
         aria-label="Loading"
@@ -39,7 +39,7 @@
     </div>
 {:else if shape === "rect"}
     <div
-        class="animate-pulse rounded-lg bg-outline {className}"
+        class="animate-pulse rounded-[4px] bg-surface-sunken {className}"
         style="width: {width ?? '100%'}; height: {height ?? '2rem'}"
         role="status"
         aria-label="Loading"
@@ -50,8 +50,8 @@
     <div class="animate-pulse space-y-6 p-6 {className}" role="status" aria-label="Loading content">
         {#if header}
             <div class="space-y-3">
-                <div class="h-7 w-48 rounded-lg bg-outline"></div>
-                <div class="h-4 w-72 rounded bg-outline-faint"></div>
+                <div class="h-7 w-48 rounded-[4px] bg-surface-sunken"></div>
+                <div class="h-4 w-72 rounded-[3px] bg-surface-sunken"></div>
             </div>
         {/if}
 
@@ -59,11 +59,11 @@
             {#each Array.from({ length: rows }, (_, i) => i) as i (i)}
                 <div class="space-y-2">
                     <div
-                        class="h-4 rounded bg-outline-faint"
+                        class="h-4 rounded-[3px] bg-surface-sunken"
                         style="width: {70 + ((i * 17) % 30)}%"
                     ></div>
                     <div
-                        class="h-4 rounded bg-surface-sunken"
+                        class="h-4 rounded-[3px] bg-surface-sunken"
                         style="width: {40 + ((i * 23) % 40)}%"
                     ></div>
                 </div>