From a756cee5c01f9b50260a8c55735b339bfbb2251d Mon Sep 17 00:00:00 2001
From: Andrew Beal <andrew.business@tuta.com>
Date: Wed, 15 Oct 2025 21:18:59 +0100
Subject: [PATCH] refactor: replace hardcoded blue with dynamic accent color
 variable

Replace direct `--color-blue` references with new `--interactive-accent-blue` variable that blends interactive accent with blue, enabling consistent theme-aware styling across edit mode UI elements.
---
 Components/ChatArea.svelte           | 1 +
 Components/ChatWindow.svelte         | 8 ++++----
 Components/StreamingIndicator.svelte | 2 +-
 styles.css                           | 4 ++++
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/Components/ChatArea.svelte b/Components/ChatArea.svelte
index 4ffe9ba..9dbb820 100644
--- a/Components/ChatArea.svelte
+++ b/Components/ChatArea.svelte
@@ -321,6 +321,7 @@
   {/each}
 
   <ChatAreaThought bind:thoughtElement thought={currentThought}/>
+  <StreamingIndicator bind:streamingElement editModeActive={editModeActive}/>
   {#if isSubmitting}
     <StreamingIndicator bind:streamingElement editModeActive={editModeActive}/>
   {/if}
diff --git a/Components/ChatWindow.svelte b/Components/ChatWindow.svelte
index cb9dd6c..5fb7936 100644
--- a/Components/ChatWindow.svelte
+++ b/Components/ChatWindow.svelte
@@ -250,7 +250,7 @@
   }
 
   #input-container.edit-mode {
-    border-color: var(--color-blue);
+    border-color: var(--interactive-accent-blue);
     transition: border-color 0.5s ease-out;
   }
 
@@ -276,8 +276,8 @@
   }
   
   #input-field.edit-mode:focus {
-    border-color: var(--color-blue);
-    box-shadow: 0px 0px 3px 1px var(--color-blue);
+    border-color: var(--interactive-accent-blue);
+    box-shadow: 0px 0px 3px 1px var(--interactive-accent-blue);
     transition: border-color 0.5s ease-out;
   }
 
@@ -317,7 +317,7 @@
   }
 
   #submit-button.edit-mode {
-    background-color: var(--color-blue);
+    background-color: var(--interactive-accent-blue);
   }
 
   #submit-button:not(:disabled):hover {
diff --git a/Components/StreamingIndicator.svelte b/Components/StreamingIndicator.svelte
index d241bf5..ede7ecf 100644
--- a/Components/StreamingIndicator.svelte
+++ b/Components/StreamingIndicator.svelte
@@ -31,7 +31,7 @@
   }
 
   .container.edit-mode {
-    --streaming-color: var(--color-blue);
+    --streaming-color: var(--interactive-accent-blue);
   }
 
   .📦 {
diff --git a/styles.css b/styles.css
index d235c2c..327907e 100644
--- a/styles.css
+++ b/styles.css
@@ -100,6 +100,10 @@
 /* CSS Variables for Theming */
 /* ============================== */
 
+body {
+  --interactive-accent-blue: color-mix(in srgb, var(--interactive-accent) 50%, var(--color-blue) 50%);
+}
+
 :root {
   --code-background: #24292e;
   --code-background-inline: rgba(27, 31, 35, 0.05);