From 7a21d0c7fc92966a1048718f7946fd9727b46e0a Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 09:07:14 +0100
Subject: [PATCH] fix(ui): sync stale shadow rgba from pre-Phase-10a amber to
 current accent

Eighteen sites across SegmentedButton, Toggle, HotkeyRecorder,
ModelDownloader, FilesPage, and SettingsPage hardcoded the old amber
rgba(232,168,124,...) for focus rings, glows, and progress bars. After
the Phase 10a a11y darkening of --accent to #c98555, the inline shadows
no longer matched the accent fill they were paired with, so every
focused input rendered a glow at a noticeably different hue from its
border.

Replaced all of them with the current accent rgba(201,133,85,...).

Toggle component also had two motion violations: an active:scale-95
press-shrink and a cubic-bezier(0.16,1,0.3,1) (ease-out-expo) thumb
transition. Both replaced with the brand's --ease curve
(0.2,0.8,0.2,1) and the scale dropped, in line with the record-button
fix in the previous commit.

Removed redundant inline transition-duration overrides on FilesPage
Browse button (the global * rule already sets --duration-ui) and on
ModelDownloader's primary CTA (also dropped its active:scale-[0.97]).
---
 src/lib/components/HotkeyRecorder.svelte  |  2 +-
 src/lib/components/ModelDownloader.svelte |  4 ++--
 src/lib/components/SegmentedButton.svelte |  2 +-
 src/lib/components/Toggle.svelte          |  7 ++-----
 src/lib/pages/FilesPage.svelte            |  5 ++---
 src/lib/pages/SettingsPage.svelte         | 24 +++++++++++------------
 6 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/HotkeyRecorder.svelte b/src/lib/components/HotkeyRecorder.svelte
index 141e2fc..271b487 100644
--- a/src/lib/components/HotkeyRecorder.svelte
+++ b/src/lib/components/HotkeyRecorder.svelte
@@ -187,7 +187,7 @@
     type="button"
     class="inline-flex items-center gap-1.5 rounded-xl px-4 py-2.5
       {recording
-        ? 'bg-bg-input border-accent shadow-[0_0_0_3px_rgba(232,168,124,0.1)]'
+        ? 'bg-bg-input border-accent shadow-[0_0_0_3px_rgba(201,133,85,0.1)]'
         : captured
           ? 'bg-bg-input border-border animate-pulse-warm'
           : 'bg-bg-input border-border hover:border-border'}
diff --git a/src/lib/components/ModelDownloader.svelte b/src/lib/components/ModelDownloader.svelte
index faa3728..5b3ff78 100644
--- a/src/lib/components/ModelDownloader.svelte
+++ b/src/lib/components/ModelDownloader.svelte
@@ -82,7 +82,7 @@
         <div class="mb-4">
           <div class="h-[6px] bg-bg-elevated rounded-full overflow-hidden mb-2">
             <div
-              class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(232,168,124,0.4)]"
+              class="h-full bg-accent rounded-full transition-all duration-300 shadow-[0_0_8px_rgba(201,133,85,0.4)]"
               style="width: {progress}%"
             ></div>
           </div>
@@ -93,7 +93,7 @@
       {:else}
         <button
           class="px-6 py-2.5 rounded-xl text-[14px] font-medium text-white bg-accent hover:bg-accent-hover
-                 shadow-[0_4px_16px_rgba(232,168,124,0.3)] active:scale-[0.97] transition-all duration-150"
+                 shadow-[0_4px_16px_rgba(201,133,85,0.3)] transition-all duration-150"
           onclick={startDownload}
         >
           Download Model
diff --git a/src/lib/components/SegmentedButton.svelte b/src/lib/components/SegmentedButton.svelte
index af99aac..2d4adb8 100644
--- a/src/lib/components/SegmentedButton.svelte
+++ b/src/lib/components/SegmentedButton.svelte
@@ -8,7 +8,7 @@
       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-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
+          ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(201,133,85,0.3)]'
           : 'text-text-secondary hover:text-text hover:bg-hover'}"
       style="transition-duration: var(--duration-ui)"
       onclick={() => value = option}
diff --git a/src/lib/components/Toggle.svelte b/src/lib/components/Toggle.svelte
index e9c9112..ffa2896 100644
--- a/src/lib/components/Toggle.svelte
+++ b/src/lib/components/Toggle.svelte
@@ -5,9 +5,7 @@
 <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-bg-elevated'}
-      active:scale-95"
-    style="transition-duration: var(--duration-ui)"
+      {checked ? 'bg-accent shadow-[0_0_8px_rgba(201,133,85,0.25)]' : 'bg-bg-elevated'}"
     onclick={() => checked = !checked}
     role="switch"
     aria-checked={checked}
@@ -15,9 +13,8 @@
   >
     <span
       class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
-        ease-[cubic-bezier(0.16,1,0.3,1)]
         {checked ? 'translate-x-[16px]' : 'translate-x-0'}"
-      style="transition: transform var(--duration-ui) cubic-bezier(0.16, 1, 0.3, 1)"
+      style="transition: transform var(--duration-ui) cubic-bezier(0.2, 0.8, 0.2, 1)"
     ></span>
   </button>
   <div class="flex-1 min-w-0">
diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index ad9ca32..cc03c32 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -199,8 +199,7 @@
   <div class="flex items-center gap-2 px-7 pb-3">
     <button
       class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
-             shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97]"
-      style="transition-duration: var(--duration-ui)"
+             shadow-[0_2px_8px_rgba(201,133,85,0.2)]"
       onclick={handleBrowse}
       disabled={transcribing}
     >
@@ -226,7 +225,7 @@
     <div class="px-7 pb-3 animate-fade-in">
       <div class="h-[3px] bg-bg-elevated rounded-full overflow-hidden">
         <div
-          class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(232,168,124,0.4)]"
+          class="h-full bg-accent rounded-full shadow-[0_0_8px_rgba(201,133,85,0.4)]"
           style="width: {progress}%; transition-duration: var(--duration-ui)"
         ></div>
       </div>
diff --git a/src/lib/pages/SettingsPage.svelte b/src/lib/pages/SettingsPage.svelte
index b7ca500..5398d32 100644
--- a/src/lib/pages/SettingsPage.svelte
+++ b/src/lib/pages/SettingsPage.svelte
@@ -990,7 +990,7 @@
               <div class="flex items-center gap-3">
                 <select
                   class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
                          appearance-none cursor-pointer min-w-[280px] max-w-full"
                   bind:value={settings.microphoneDevice}
                   onfocus={refreshAudioDevices}
@@ -1044,7 +1044,7 @@
               <div class="flex items-center gap-2 flex-wrap">
                 <select
                   class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
                          appearance-none cursor-pointer min-w-[220px]"
                   value={profilesStore.activeProfileId}
                   onchange={onActiveProfileChange}
@@ -1114,7 +1114,7 @@
                   onblur={renameActiveProfile}
                   onkeydown={(e) => { if (e.key === 'Enter') e.target.blur(); }}
                   class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text min-w-[280px]
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
                 />
               </div>
 
@@ -1130,7 +1130,7 @@
                   onblur={saveInitialPrompt}
                   placeholder="e.g. Meeting between Jake and Wren about CORBEL's Furnished World architecture."
                   class="w-full h-[96px] bg-bg-input border border-border rounded-lg px-3 py-2 text-[12px] text-text resize-none
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
                 ></textarea>
                 <div class="flex items-center gap-3 mt-1">
                   {#if initialPromptDirty}
@@ -1156,7 +1156,7 @@
                   bind:value={newVocabTerm}
                   onkeydown={(e) => { if (e.key === 'Enter') addVocabTerm(); }}
                   class="flex-1 bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
                 />
                 <input
                   type="text"
@@ -1164,7 +1164,7 @@
                   bind:value={newVocabNote}
                   onkeydown={(e) => { if (e.key === 'Enter') addVocabTerm(); }}
                   class="flex-1 bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]"
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]"
                 />
                 <button
                   type="button"
@@ -1190,7 +1190,7 @@
                       rows="4"
                       disabled={bulkVocabBusy}
                       class="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text font-mono
-                             focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
+                             focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
                              disabled:opacity-50 resize-y"
                     ></textarea>
                     <div class="flex items-center gap-2 mt-2">
@@ -1486,7 +1486,7 @@
               {#if hasGpuAcceleration()}
                 <select
                   class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
+                         focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
                          appearance-none cursor-pointer w-[220px]"
                   bind:value={settings.device}
                 >
@@ -1517,7 +1517,7 @@
                 {#if currentModelIsEnglishOnly()}
                   <select
                     class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                           focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
+                           focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
                            appearance-none cursor-not-allowed w-[220px]"
                     bind:value={settings.language}
                     disabled
@@ -1527,7 +1527,7 @@
                 {:else}
                   <select
                     class="bg-bg-input border border-border rounded-lg px-3 py-2 text-[13px] text-text
-                           focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(232,168,124,0.1)]
+                           focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(201,133,85,0.1)]
                            appearance-none cursor-pointer w-[140px]"
                     bind:value={settings.language}
                   >
@@ -1875,7 +1875,7 @@
               <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
-                    {settings.launchAtLogin ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
+                    {settings.launchAtLogin ? 'bg-accent shadow-[0_0_8px_rgba(201,133,85,0.25)]' : 'bg-bg-elevated'}
                     active:scale-95 disabled:opacity-60"
                   style="transition-duration: var(--duration-ui)"
                   onclick={() => setLaunchAtLogin(!settings.launchAtLogin)}
@@ -2171,7 +2171,7 @@
                   <button
                     class="rounded-lg font-medium px-3.5 py-[6px] text-[12px]
                       {$currentLocale === option.code
-                        ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
+                        ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(201,133,85,0.3)]'
                         : 'text-text-secondary hover:text-text hover:bg-hover'}"
                     style="transition-duration: var(--duration-ui)"
                     onclick={() => setLocale(option.code)}