From 4bbe9a0a8490614c3809b2c5b6d2f49225f447bf Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Sat, 21 Mar 2026 10:44:49 +0000
Subject: [PATCH] =?UTF-8?q?agent:=20components=20=E2=80=94=20restyle=20Car?=
 =?UTF-8?q?d,=20Toggle,=20SegmentedButton=20with=20brand=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Card.svelte            | 2 +-
 src/lib/components/SegmentedButton.svelte | 3 ++-
 src/lib/components/Toggle.svelte          | 8 +++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 7532acc..0468ba5 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -2,6 +2,6 @@
   let { children, classes = "" } = $props();
 </script>
 
-<div class="bg-bg-card border border-border rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}">
+<div class="bg-bg-card border border-border-subtle rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}">
   {@render children()}
 </div>
diff --git a/src/lib/components/SegmentedButton.svelte b/src/lib/components/SegmentedButton.svelte
index 648296d..af99aac 100644
--- a/src/lib/components/SegmentedButton.svelte
+++ b/src/lib/components/SegmentedButton.svelte
@@ -8,8 +8,9 @@
       class="rounded-lg font-medium
         {size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'}
         {value === option
-          ? 'bg-accent text-white shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
+          ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
           : 'text-text-secondary hover:text-text hover:bg-hover'}"
+      style="transition-duration: var(--duration-ui)"
       onclick={() => value = option}
     >
       {option}
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index 78e548c..d0bf489 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -5,8 +5,9 @@
 <div class="flex items-start gap-3 py-2.5">
   <button
     class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
-      {checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-border'}
-      active:scale-95 transition-all duration-200"
+      {checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
+      active:scale-95"
+    style="transition-duration: var(--duration-ui)"
     onclick={() => checked = !checked}
     role="switch"
     aria-checked={checked}
@@ -14,8 +15,9 @@
   >
     <span
       class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
-        transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)]
+        ease-[cubic-bezier(0.34,1.56,0.64,1)]
         {checked ? 'translate-x-[16px]' : 'translate-x-0'}"
+      style="transition: transform var(--duration-ui) cubic-bezier(0.34, 1.56, 0.64, 1)"
     ></span>
   </button>
   <div class="flex-1 min-w-0">