@runwisp/ui 0.12.0 → 0.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -47,44 +47,38 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.39.1",
-    "@runwisp/eslint-config": "0.12.0",
-    "@runwisp/typescript-config": "0.12.0",
-    "@storybook/addon-a11y": "^10.1.9",
-    "@storybook/addon-docs": "^10.1.9",
-    "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/addon-vitest": "^10.1.9",
-    "@storybook/sveltekit": "^10.1.9",
-    "@sveltejs/kit": "^2.49.1",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.17",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@eslint/js": "^10.0.1",
+    "@runwisp/eslint-config": "0.14.0",
+    "@runwisp/typescript-config": "0.14.0",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-svelte-csf": "^5.1.2",
+    "@storybook/sveltekit": "^10.5.5",
+    "@sveltejs/kit": "^2.70.2",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/dlv": "^1.1.5",
     "@types/ms": "^2.1.0",
-    "@types/node": "^24",
-    "@vitest/browser-playwright": "^4.0.15",
-    "@vitest/coverage-v8": "^4.0.15",
-    "eslint": "^9.39.1",
+    "@types/node": "^26.1.2",
+    "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-sonarjs": "^4.0.0",
-    "eslint-plugin-storybook": "^10.1.9",
-    "eslint-plugin-svelte": "^3.13.1",
-    "globals": "^16.5.0",
-    "playwright": "^1.57.0",
-    "prettier": "^3.7.4",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "storybook": "^10.1.9",
-    "svelte": "^5.45.6",
-    "svelte-check": "^4.3.4",
-    "tailwindcss": "^4.1.17",
-    "typescript": "5.9.2",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.6",
-    "vitest": "^4.0.15"
+    "eslint-plugin-sonarjs": "^4.2.0",
+    "eslint-plugin-storybook": "^10.5.5",
+    "eslint-plugin-svelte": "^3.22.0",
+    "globals": "^17.9.0",
+    "prettier": "^3.9.6",
+    "prettier-plugin-svelte": "^4.1.1",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "storybook": "^10.5.5",
+    "svelte": "^5.56.8",
+    "svelte-check": "^4.7.4",
+    "tailwindcss": "^4.3.3",
+    "typescript": "6.0.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0"
   },
   "keywords": [
     "svelte",
@@ -96,17 +90,18 @@
     "runwisp"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@fontsource/tasa-orbiter": "^5.2.2",
-    "@lucide/svelte": "^0.561.0",
-    "@runwisp/common": "0.12.0",
-    "@tanstack/svelte-virtual": "^3.13.25",
+    "@floating-ui/dom": "^1.8.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource/tasa-orbiter": "^5.3.0",
+    "@lucide/svelte": "^1.28.0",
+    "@runwisp/common": "0.14.0",
+    "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
-    "cron-parser": "^5.4.0",
-    "cronstrue": "^3.9.0",
-    "date-fns": "^4.1.0",
+    "cron-parser": "^5.7.0",
+    "cronstrue": "^3.24.0",
+    "date-fns": "^4.4.0",
     "dlv": "^1.1.3",
-    "fuse.js": "^7.1.0",
+    "fuse.js": "^7.5.0",
     "ms": "^2.1.3"
   }
 }

package/src/astro/CTABand.astro

@@ -12,21 +12,28 @@ interface Props {
 const { heading, sub, tone = "default", class: className = "" } = Astro.props;
 
 const surface =
-    tone === "primary" ? "bg-primary text-on-primary" : "bg-surface-sunken text-on-surface";
+    tone === "primary" ? "bg-primary text-on-primary" : "bg-surface-raised text-on-surface";
 const subTone = tone === "primary" ? "text-on-primary/80" : "text-on-surface-muted";
 const hasCtas = Astro.slots.has("ctas");
 ---
 
-<section class:list={[surface, className]}>
-    <div class="mx-auto max-w-5xl px-6 py-16 text-center sm:py-20">
-        <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{heading}</h2>
-        {sub && <p class:list={[subTone, "mt-4 text-lg"]}>{sub}</p>}
-        {
-            hasCtas && (
-                <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
-                    <slot name="ctas" />
-                </div>
-            )
-        }
+<section class:list={[className]}>
+    <div class="mx-auto max-w-5xl px-6 py-16 sm:py-20">
+        <div
+            class:list={[
+                surface,
+                "rounded-[4px] border border-outline px-6 py-12 text-center shadow-sm sm:px-10",
+            ]}
+        >
+            <h2 class="font-mono text-3xl font-extrabold sm:text-4xl">{heading}</h2>
+            {sub && <p class:list={[subTone, "mt-4 font-sans text-lg"]}>{sub}</p>}
+            {
+                hasCtas && (
+                    <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+                        <slot name="ctas" />
+                    </div>
+                )
+            }
+        </div>
     </div>
 </section>

package/src/astro/Hero.astro

@@ -29,15 +29,15 @@ const ctaAlign = align === "center" && !hasMedia ? "justify-center" : "";
             <div class={textAlign}>
                 {
                     eyebrow && (
-                        <p class="text-primary-soft-text mb-4 text-sm font-semibold tracking-wider uppercase">
+                        <p class="text-info mb-4 font-mono text-[11.5px] font-medium tracking-[0.16em] uppercase">
                             {eyebrow}
                         </p>
                     )
                 }
-                <h1 class:list={["text-on-surface font-bold tracking-tight", headlineSize]}>
+                <h1 class:list={["text-on-surface font-mono font-extrabold", headlineSize]}>
                     {headline}
                 </h1>
-                {sub && <p class="text-on-surface-muted mt-6 text-lg sm:text-xl">{sub}</p>}
+                {sub && <p class="text-on-surface-muted mt-6 font-sans text-lg sm:text-xl">{sub}</p>}
                 {
                     hasCtas && (
                         <div class:list={["mt-8 flex flex-wrap items-center gap-3", ctaAlign]}>

package/src/astro/SiteFooter.astro

@@ -7,7 +7,7 @@ interface Props {
     class?: string;
 }
 
-const { tagline = "Apache-2.0 · Built by operators, for operators.", class: className = "" } =
+const { tagline = "Built by operators, for operators.", class: className = "" } =
     Astro.props;
 
 const hasTeaser = Astro.slots.has("teaser");
@@ -19,20 +19,20 @@ const hasBadges = Astro.slots.has("badges");
     <div class="mx-auto max-w-6xl px-6 py-12">
         {
             hasTeaser && (
-                <div class="bg-surface-raised mb-10 rounded-2xl border border-outline p-6">
+                <div class="bg-surface-raised mb-10 rounded-[4px] border border-outline p-6 shadow-sm">
                     <slot name="teaser" />
                 </div>
             )
         }
         {
             hasColumns && (
-                <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+                <div class="grid gap-8 font-mono sm:grid-cols-2 lg:grid-cols-4 [&_a]:block [&_a]:text-on-surface-muted [&_a]:[&_a:hover]:text-primary [&_h4]:mb-3 [&_h4]:text-xs [&_h4]:font-medium [&_h4]:uppercase [&_h4]:tracking-[0.16em] [&_h4]:text-on-surface-faint [&_h4]:before:mr-1.5 [&_h4]:before:content-['──']">
                     <slot name="columns" />
                 </div>
             )
         }
         <div
-            class="text-on-surface-muted mt-10 flex flex-col items-start justify-between gap-4 border-t border-outline-faint pt-6 text-sm sm:flex-row sm:items-center"
+            class="text-on-surface-muted mt-10 flex flex-col items-start justify-between gap-4 border-t border-outline-faint pt-6 font-mono text-xs sm:flex-row sm:items-center"
         >
             <p>{tagline}</p>
             {

package/src/astro/SiteHeader.astro

@@ -15,20 +15,20 @@ const hasNav = Astro.slots.has("nav");
 const hasActions = Astro.slots.has("actions");
 ---
 
-<header class:list={["rw-bg-glass sticky top-0 z-40 border-b border-outline-faint", className]}>
-    <div class="mx-auto flex max-w-6xl items-center justify-between gap-6 px-6 py-3">
+<header class:list={["rw-bg-glass sticky top-0 z-40 border-b border-outline", className]}>
+    <div class="mx-auto flex h-[52px] max-w-6xl items-center justify-between gap-6 px-6">
         <a
             href={homeHref}
             class="text-on-surface flex items-center gap-2"
             aria-label={`${wordmark} home`}
         >
             <Logo size="md" />
-            <span class="font-bold tracking-tight">{wordmark}</span>
+            <span class="font-mono font-bold tracking-tight">{wordmark}</span>
         </a>
         {
             hasNav && (
                 <nav
-                    class="text-on-surface-muted hidden gap-6 text-sm font-medium sm:flex"
+                    class="text-on-surface-muted hidden gap-6 font-mono text-sm sm:flex [&_a]:[&_a:hover]:text-primary"
                     aria-label="Primary"
                 >
                     <slot name="nav" />

package/src/lib/assets/runwisp-logo.svg

@@ -1,13 +1,6 @@
 <svg width="512" height="512" version="1.1" viewBox="0 0 5120 5120" xmlns="http://www.w3.org/2000/svg">
- <defs>
-  <linearGradient id="b">
-   <stop stop-color="#15a0a8" offset="0"/>
-   <stop stop-color="#0e7c86" offset="1"/>
-  </linearGradient>
-  <radialGradient id="a" cx="2375.3" cy="3240.7" r="1333.9" gradientTransform="matrix(1.01 -.012494 .026846 2.1701 -110.74 -3341.2)" gradientUnits="userSpaceOnUse" href="#b"/>
- </defs>
  <g fill="currentColor">
-  <g transform="matrix(1.1828 0 0 1.1828 -308.66 -422.68)" fill="url(#a)" stroke-width=".69118">
+  <g transform="matrix(1.1828 0 0 1.1828 -308.66 -422.68)" stroke-width=".69118">
    <path d="m1337.7 3078.1c-148.18-155.91-250.14-363.35-245.9-581.62-4.9405-143.31 33.544-285.11 105.17-408.87 53.884-96.655 144.6-165.07 216.94-247.17 183.01-186.28 363.71-375.11 552.07-555.94 29.831 190.66 135.62 362.63 276.82 491.77 29.939 18.759-21.226 37.649-30.616 56.472-195.88 199.8-397.96 393.69-588.19 598.91-152.46 182.9-237.05 424.04-218.75 662.75 5.6183 42.874 1.3956 73.556-30.679 24.283-12.387-13.436-24.662-26.974-36.862-40.58z"/>
    <path d="m2283.9 4565.5c51.838-97.456 67.044-158.97 68.426-264.03 0-96.074-14.515-161.74-55.985-239.84-34.559-66.353-81.559-117.5-336.6-371.16-237.76-236.38-268.18-273.01-310.34-371.16-33.868-79.485-46.309-134.09-51.147-224.63-6.9117-134.09 20.735-260.57 84.324-386.37 108.51-213.57 334.53-427.84 532.9-504.56 138.24-53.221 255.74-54.603 351.81-4.8382l27.647 14.515-26.265 5.5294c-76.721 16.588-123.72 80.176-111.97 152.06 5.5294 33.176 40.088 79.485 72.574 96.074 69.809 37.324 169.34-8.9853 184.54-85.706 5.5294-26.265 13.132-16.588 25.574 33.176 12.441 45.618 13.824 123.72 4.1471 165.88-3.4559 15.206-4.8383 28.338-4.1471 29.721 1.3824 0.6912 17.279-13.824 35.941-33.176 116.12-120.96 142.38-281.31 70.5-428.53-18.662-39.397-55.294-79.485-305.5-331.76-246.75-249.51-288.22-293.75-315.87-342.13-100.22-172.79-121.65-355.26-63.588-539.12 46.309-145.84 134.09-274.4 273.71-398.81 58.75-51.838 163.12-129.94 174.18-129.94 2.0736 0-2.0735 8.9853-10.368 20.735-27.647 38.706-69.118 136.16-83.632 197.68-31.103 127.18-16.588 248.13 43.544 364.94 26.956 52.53 46.309 73.265 296.51 325.54 283.38 285.46 311.03 318.63 351.12 419.54 40.088 101.6 45.618 130.63 44.926 257.81 0 106.44-1.3824 124.41-18.662 186.62-24.191 89.162-87.779 217.72-147.91 297.21-94 125.79-230.85 245.37-347.66 304.12-95.382 47.691-163.12 66.353-259.19 70.5-76.721 3.4559-87.088 2.0735-137.54-14.515-64.971-22.118-98.147-43.544-151.37-99.529-66.353-69.809-92.618-145.84-85.706-248.82 2.0735-31.794 0.6911-56.676-2.0736-55.294-13.824 5.5294-71.191 80.868-93.309 123.72-59.441 113.35-56.676 246.06 7.603 358.03 11.059 17.971 135.47 149.99 293.06 308.26 150.68 152.06 283.38 290.29 295.13 307.57 86.397 127.87 129.25 300.66 112.66 449.96-10.368 92.618-29.721 157.59-72.574 244.68-66.353 134.78-161.74 243.29-314.49 357.34-40.088 29.721-74.647 53.912-77.412 53.912s11.75-31.794 32.485-71.191z"/>
    <path d="m2881.7 3745.7c-31.13-173.6-122.18-331.84-246.22-455.86-14.352-19.305-55.137-38.918-18.602-57.632 207.7-210.04 420.06-415.65 622.16-631.1 146.07-182.43 225.82-418.38 206.48-652.47-4.5024-33.687-4.181-60.898 26.761-25.766 148.94 150.92 277.41 342.97 283.4 561.68 11.697 142.68-4.4537 290.19-73.137 417.9-34.008 81.467-90.87 148.51-154.3 208.53-213.07 217.42-425.06 436.12-643.78 647.84l-1.9007-3.7151z"/>

package/src/lib/components/AccordionItem.svelte

@@ -34,9 +34,8 @@
         onclick={toggle}
         {disabled}
         class="
-            flex w-full items-center justify-between gap-3 py-4 text-left text-sm font-medium
-            text-on-surface transition-colors
-            hover:text-on-surface-muted
+            flex w-full items-center justify-between gap-3 py-4 text-left font-mono text-sm
+            text-on-surface hover:text-primary
             disabled:cursor-not-allowed disabled:opacity-50
         "
         aria-expanded={open}
@@ -48,16 +47,11 @@
                 {title}
             {/if}
         </span>
-        <ChevronDown
-            size={16}
-            class="shrink-0 text-on-surface-faint transition-transform duration-200 {open
-                ? 'rotate-180'
-                : ''}"
-        />
+        <ChevronDown size={16} class="shrink-0 text-on-surface-faint {open ? 'rotate-180' : ''}" />
     </button>
 
     <div
-        class="grid transition-[grid-template-rows] duration-200 ease-out {open
+        class="grid transition-[grid-template-rows] duration-150 ease-out {open
             ? 'grid-rows-[1fr]'
             : 'grid-rows-[0fr]'}"
     >

package/src/lib/components/Alert.svelte

@@ -34,28 +34,28 @@
         { bg: string; border: string; icon: typeof Info; iconColor: string }
     > = {
         info: {
-            bg: "bg-info-soft",
+            bg: "bg-info-soft text-info-soft-text",
             border: "border-info-soft-border",
             icon: Info,
-            iconColor: "text-info",
+            iconColor: "text-info-soft-text",
         },
         success: {
-            bg: "bg-success-soft",
+            bg: "bg-success-soft text-success-soft-text",
             border: "border-success-soft-border",
             icon: CircleCheckBig,
-            iconColor: "text-success-surface",
+            iconColor: "text-success-soft-text",
         },
         warning: {
-            bg: "bg-warning-soft",
+            bg: "bg-warning-soft text-warning-soft-text",
             border: "border-warning-soft-border",
             icon: TriangleAlert,
-            iconColor: "text-warning-surface",
+            iconColor: "text-warning-soft-text",
         },
         danger: {
-            bg: "bg-danger-soft",
+            bg: "bg-danger-soft text-danger-soft-text",
             border: "border-danger-soft-border",
             icon: CircleX,
-            iconColor: "text-danger-surface",
+            iconColor: "text-danger-soft-text",
         },
     };
 
@@ -64,7 +64,7 @@
 
 <div
     class="
-		flex gap-3 rounded-xl border p-4
+		flex gap-3 rounded-[4px] border p-4
 		{config.bg} {config.border}
 		{className}
 	"
@@ -81,7 +81,7 @@
 
     <div class="min-w-0 flex-1">
         {#if title}
-            <h4 class="mb-1 text-sm font-semibold text-on-surface">{title}</h4>
+            <h4 class="mb-1 font-mono text-sm font-semibold text-on-surface">{title}</h4>
         {/if}
         {#if children}
             <div class="text-sm text-on-surface-muted">
@@ -98,7 +98,7 @@
     {#if dismissible}
         <button
             onclick={onDismiss}
-            class="shrink-0 rounded-lg p-1 text-on-surface-faint transition-colors hover:bg-surface-raised/50 hover:text-on-surface-muted"
+            class="shrink-0 rounded-[3px] p-1 text-on-surface-faint hover:bg-surface-raised hover:text-on-surface-muted"
             aria-label="Dismiss"
         >
             <X size={16} />

package/src/lib/components/Avatar.svelte

@@ -68,7 +68,7 @@
 				{colors[colorIndex]}
 				flex
 				items-center justify-center rounded-full
-				font-medium text-white shadow-sm
+				font-mono text-white shadow-sm
 			"
         >
             {initials || "?"}

package/src/lib/components/Badge.svelte

@@ -29,34 +29,34 @@
 
     const baseClasses = `
 		inline-flex items-center gap-1.5
-		font-medium rounded-full
+		font-mono tracking-wide rounded-[3px]
 		whitespace-nowrap
 	`;
 
     const variantClasses: Record<BadgeVariant, { solid: string; outline: string }> = {
         default: {
-            solid: "bg-surface-sunken text-on-surface-muted",
+            solid: "bg-surface-sunken text-on-surface-muted border border-outline",
             outline: "bg-transparent border border-outline-hover text-on-surface-muted",
         },
         primary: {
-            solid: "bg-primary-soft text-primary-soft-text",
-            outline: "bg-transparent border border-wisp-300 text-primary-soft-text",
+            solid: "bg-primary-soft text-primary-soft-text border border-primary-soft-border",
+            outline: "bg-transparent border border-primary-soft-border text-primary-soft-text",
         },
         success: {
-            solid: "bg-success-soft text-success-soft-text",
-            outline: "bg-transparent border border-success-300 text-success-soft-text",
+            solid: "bg-success-soft text-success-soft-text border border-success-soft-border",
+            outline: "bg-transparent border border-success-soft-border text-success-soft-text",
         },
         warning: {
-            solid: "bg-warning-soft text-warning-soft-text",
-            outline: "bg-transparent border border-warning-400 text-warning-soft-text",
+            solid: "bg-warning-soft text-warning-soft-text border border-warning-soft-border",
+            outline: "bg-transparent border border-warning-soft-border text-warning-soft-text",
         },
         danger: {
-            solid: "bg-danger-soft text-danger-soft-text",
-            outline: "bg-transparent border border-danger-300 text-danger-soft-text",
+            solid: "bg-danger-soft text-danger-soft-text border border-danger-soft-border",
+            outline: "bg-transparent border border-danger-soft-border text-danger-soft-text",
         },
         info: {
-            solid: "bg-info-soft text-info-soft-text",
-            outline: "bg-transparent border border-aurora-300 text-info-soft-text",
+            solid: "bg-info-soft text-info-soft-text border border-info-soft-border",
+            outline: "bg-transparent border border-info-soft-border text-info-soft-text",
         },
     };
 
@@ -67,7 +67,7 @@
     };
 
     const dotColors: Record<BadgeVariant, string> = {
-        default: "bg-mist-500",
+        default: "bg-on-surface-faint",
         primary: "bg-primary",
         success: "bg-success-surface",
         warning: "bg-warning-surface",

package/src/lib/components/Breadcrumb.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <nav aria-label="Breadcrumb" class={className}>
-    <ol class="flex items-center gap-1.5 text-sm">
+    <ol class="flex items-center gap-1.5 font-mono text-sm">
         {#each items as item, idx (idx)}
             <li class="flex items-center gap-1.5">
                 {#if idx > 0}
@@ -35,7 +35,7 @@
                 {#if item.href && idx < items.length - 1}
                     <a
                         href={item.href}
-                        class="flex items-center gap-1.5 text-on-surface-muted transition-colors hover:text-on-surface"
+                        class="flex items-center gap-1.5 text-on-surface-muted hover:text-primary"
                     >
                         {#if item.icon}
                             {@const Icon = item.icon}
@@ -44,7 +44,7 @@
                         <span>{item.label}</span>
                     </a>
                 {:else}
-                    <span class="flex items-center gap-1.5 font-medium text-on-surface">
+                    <span class="flex items-center gap-1.5 text-on-surface">
                         {#if item.icon}
                             {@const Icon = item.icon}
                             <Icon size={14} />

package/src/lib/components/Button.svelte

@@ -54,7 +54,7 @@
             ></path>
         </svg>
     {:else if icon}
-        <span class="shrink-0 transition-transform group-active:scale-95">
+        <span class="shrink-0 group-active:scale-95">
             {@render icon()}
         </span>
     {/if}
@@ -62,7 +62,7 @@
         {@render children()}
     {/if}
     {#if iconRight && !loading}
-        <span class="shrink-0 transition-transform group-active:scale-95">
+        <span class="shrink-0 group-active:scale-95">
             {@render iconRight()}
         </span>
     {/if}

package/src/lib/components/Card.svelte

@@ -46,15 +46,15 @@
 
 <div
     class="
-		overflow-hidden rounded-xl bg-surface-raised
+		overflow-hidden rounded-[4px] bg-surface-raised
 		{border ? 'border border-outline' : ''}
 		{shadowClasses[shadow]}
-		{hover ? 'duration-fast transition-shadow hover:border-outline-hover hover:shadow-md' : ''}
+		{hover ? 'hover:border-outline-hover hover:shadow-md' : ''}
 		{className}
 	"
 >
     {#if header}
-        <div class="border-b border-outline-faint bg-surface-sunken/50 px-4 py-3">
+        <div class="border-b border-outline bg-surface-sunken/50 px-4 py-3">
             {@render header()}
         </div>
     {/if}
@@ -66,7 +66,7 @@
     </div>
 
     {#if footer}
-        <div class="border-t border-outline-faint bg-surface-sunken/50 px-4 py-3">
+        <div class="border-t border-outline bg-surface-sunken/50 px-4 py-3">
             {@render footer()}
         </div>
     {/if}

package/src/lib/components/Checkbox.svelte

@@ -45,20 +45,20 @@
             bind:checked
             {disabled}
             class="
-				peer {sizeClasses[size].box} duration-fast
-				cursor-pointer appearance-none rounded
-				border-2 border-outline-hover
-				bg-surface-raised transition-colors checked:border-primary
-				checked:bg-primary hover:border-on-surface-faint 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
+				peer {sizeClasses[size].box}
+				cursor-pointer appearance-none rounded-[3px]
+				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 focus:ring-offset-2
+				focus:outline-none
+				disabled:cursor-not-allowed disabled:hover:border-outline
 				disabled:checked:hover:bg-primary
 			"
             {...restProps}
         />
         <div
-            class="duration-fast pointer-events-none absolute text-on-primary opacity-0 transition-opacity peer-checked:opacity-100"
+            class="pointer-events-none absolute text-on-primary opacity-0 peer-checked:opacity-100"
         >
             {#if indeterminate}
                 <svg
@@ -80,7 +80,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/CodeBlock.svelte

@@ -2,8 +2,6 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    import { Check, Copy } from "@lucide/svelte";
-
     interface Props {
         code: string;
         language?: string;
@@ -35,32 +33,28 @@
     }
 </script>
 
-<div class="overflow-hidden rounded-xl border border-outline bg-surface-sunken {className}">
+<div
+    class="overflow-hidden rounded-[4px] border border-term-line bg-term text-term-text {className}"
+>
     {#if filename || language}
         <div
-            class="flex items-center justify-between border-b border-outline-faint px-4 py-2 font-mono text-xs text-on-surface-muted"
+            class="flex items-center justify-between border-b border-term-line-2 bg-term-2 px-4 py-2 font-mono text-xs text-term-muted"
         >
             <span>{filename ?? language}</span>
         </div>
     {/if}
     <div class="relative">
         <pre
-            class="overflow-x-auto px-4 py-4 font-mono text-sm leading-relaxed text-on-surface"><code
+            class="overflow-x-auto px-4 py-4 font-mono text-sm leading-relaxed text-term-text"><code
                 >{code}</code
             ></pre>
         <button
             type="button"
             onclick={handleCopy}
-            class="absolute top-2 right-2 inline-flex items-center gap-1.5 rounded-md border border-outline bg-surface-raised px-2 py-1 text-xs font-medium text-on-surface-muted shadow-sm transition-colors hover:border-outline-hover hover:text-on-surface"
+            class="absolute top-2 right-2 inline-flex items-center rounded-[3px] border border-term-line-2 bg-term-2 px-2 py-1 font-mono text-xs text-term-muted hover:border-term-teal hover:text-term-teal"
             aria-label={copied ? "Copied" : "Copy to clipboard"}
         >
-            {#if copied}
-                <Check size={14} class="text-success-surface" />
-                <span>Copied</span>
-            {:else}
-                <Copy size={14} />
-                <span>Copy</span>
-            {/if}
+            {copied ? "[copied]" : "[copy]"}
         </button>
     </div>
 </div>

package/src/lib/components/CronInput.svelte

@@ -63,10 +63,10 @@
 
 <div class="space-y-2">
     <div class="flex items-center justify-between">
-        <div class="text-sm font-medium text-on-surface-muted">Cron Schedule</div>
+        <div class="font-mono text-xs font-medium text-on-surface-muted">Cron Schedule</div>
         <button
             type="button"
-            class="flex items-center gap-1 text-xs text-primary hover:text-primary-hover"
+            class="flex items-center gap-1 font-mono text-xs text-primary hover:text-primary-hover"
             onclick={() => (examplesModalOpen = true)}
         >
             Examples <Info size={12} />
@@ -79,27 +79,28 @@
                 placeholder="* * * * *"
                 bind:value
                 {disabled}
-                class="font-mono {isError
-                    ? '!focus:border-danger-500 !focus:ring-danger-500 border-danger-300!'
-                    : ''}"
+                class="font-mono {isError ? 'border-danger-surface!' : ''}"
             />
         </div>
     </div>
     <!-- Live Feedback -->
     <div
-        class="flex items-start gap-3 rounded-md border p-3 transition-colors duration-200
-        {isError ? 'border-danger-soft-border bg-danger-soft' : 'border-outline bg-surface-sunken'}"
+        class="flex items-start gap-3 rounded-[4px] border p-3 {isError
+            ? 'border-danger-soft-border bg-danger-soft'
+            : 'border-outline bg-surface-sunken'}"
     >
         <Info size={18} class="mt-0.5 {isError ? 'text-danger-surface' : 'text-primary'}" />
         <div>
             <div
-                class="text-sm font-medium {isError ? 'text-danger-soft-text' : 'text-on-surface'}"
+                class="font-sans text-sm font-medium {isError
+                    ? 'text-danger-soft-text'
+                    : 'text-on-surface'}"
             >
                 {explanation.text}
             </div>
             {#if explanation.next}
-                <div class="mt-0.5 text-xs text-on-surface-muted">
-                    Next run: <span class="font-medium text-on-surface"
+                <div class="mt-0.5 font-sans text-xs text-on-surface-muted">
+                    Next run: <span class="font-mono font-medium text-on-surface"
                         >{explanation.next.toLocaleString()}</span
                     >
                 </div>
@@ -118,7 +119,7 @@
             {#each cronExamples as example (example.cron)}
                 <button
                     type="button"
-                    class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-colors hover:bg-surface-sunken"
+                    class="flex w-full items-center justify-between rounded-[3px] px-3 py-2 text-left hover:bg-surface-sunken"
                     onclick={() => selectExample(example.cron)}
                 >
                     <code class="font-mono text-sm text-on-surface">{example.cron}</code>