From 8a04edc2bc0e7a46bf59ef6bb84c40ed65e180f6 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 18 Feb 2026 18:23:18 +0200
Subject: [PATCH] a11y: final cleanup - remaining hardcoded colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FontSelector: text-[#8a8a8a]→text-text-sec, border-[#222]→border-border
- StatsView: Canvas fillStyle and inline trend color #8a8a8a→#a8a8a8
- ActivityManager: border-[#222]→border-border, #f85149→#ff6b6b danger color
- Settings: #f85149→#ff6b6b danger color on reset/delete buttons
---
 src/lib/components/ActivityManager.svelte | 4 ++--
 src/lib/components/FontSelector.svelte    | 8 ++++----
 src/lib/components/Settings.svelte        | 4 ++--
 src/lib/components/StatsView.svelte       | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/ActivityManager.svelte b/src/lib/components/ActivityManager.svelte
index 835decd..c28fe55 100644
--- a/src/lib/components/ActivityManager.svelte
+++ b/src/lib/components/ActivityManager.svelte
@@ -422,7 +422,7 @@
         </svg>
       </button>
       {#if dropdownOpen}
-        <div class="absolute top-full left-0 mt-1 z-50 min-w-[140px] rounded-xl border border-[#222] bg-[#111] shadow-xl shadow-black/50 overflow-hidden"
+        <div class="absolute top-full left-0 mt-1 z-50 min-w-[140px] rounded-xl border border-border bg-[#111] shadow-xl shadow-black/50 overflow-hidden"
              role="listbox" aria-label="Activity category">
           {#each categories as cat, i}
             <button
@@ -507,7 +507,7 @@
                       {activity.text}
                     </span>
                     <button
-                      class="flex items-center justify-center w-9 h-9 min-w-[44px] min-h-[44px] text-text-sec hover:text-[#f85149] opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-all text-[11px]"
+                      class="flex items-center justify-center w-9 h-9 min-w-[44px] min-h-[44px] text-text-sec hover:text-[#ff6b6b] opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-all text-[11px]"
                       onclick={() => removeCustomActivity(activity.id)}
                       aria-label="Remove {activity.text}"
                     >
diff --git a/src/lib/components/FontSelector.svelte b/src/lib/components/FontSelector.svelte
index fd67c2d..ca08ab5 100644
--- a/src/lib/components/FontSelector.svelte
+++ b/src/lib/components/FontSelector.svelte
@@ -52,7 +52,7 @@
   <div class="flex items-center justify-between">
     <div>
       <div class="text-[13px] text-white">Countdown font</div>
-      <div class="text-[11px] text-[#8a8a8a]">
+      <div class="text-[11px] text-text-sec">
         {value || "System default"}
       </div>
     </div>
@@ -60,7 +60,7 @@
       type="button"
       aria-expanded={expanded}
       aria-label={expanded ? "Close font browser" : "Browse fonts"}
-      class="rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px] text-[#8a8a8a]
+      class="rounded-lg border border-[#1a1a1a] bg-black px-3 py-1.5 text-[12px] text-text-sec
              transition-colors hover:border-[#333] hover:text-white"
       onclick={() => { expanded = !expanded; }}
     >
@@ -83,7 +83,7 @@
                  transition-all duration-150
                  {value === font.family
                    ? 'border-white/30 bg-[#141414]'
-                   : 'border-[#141414] bg-[#0a0a0a] hover:border-[#222] hover:bg-[#0f0f0f]'}"
+                   : 'border-[#141414] bg-[#0a0a0a] hover:border-border hover:bg-[#0f0f0f]'}"
           onclick={() => selectFont(font.family)}
         >
           <span
@@ -92,7 +92,7 @@
           >
             25:00
           </span>
-          <span class="text-[9px] tracking-wider text-[#8a8a8a] uppercase">
+          <span class="text-[9px] tracking-wider text-text-sec uppercase">
             {font.label}
           </span>
         </button>
diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 567a4bf..2721d44 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -1058,7 +1058,7 @@
                     {#if rangeIndex > 0}
                       <button
                         use:pressable
-                        class="w-8 h-8 flex items-center justify-center rounded-full text-text-sec hover:text-[#f85149] hover:bg-[#f8514915] transition-colors"
+                        class="w-8 h-8 flex items-center justify-center rounded-full text-text-sec hover:text-[#ff6b6b] hover:bg-[#ff6b6b15] transition-colors"
                         onclick={() => removeTimeRange(dayIndex, rangeIndex)}
                         aria-label="Remove time range"
                       >
@@ -1172,7 +1172,7 @@
                tracking-wider uppercase
                transition-all duration-200
                {resetConfirming
-                 ? 'border-[#f85149] text-[#f85149] hover:bg-[#f85149] hover:text-white'
+                 ? 'border-[#ff6b6b] text-[#ff6b6b] hover:bg-[#ff6b6b] hover:text-white'
                  : 'border-[#1a1a1a] text-text-sec hover:border-[#333] hover:text-white'}"
         onclick={handleReset}
       >
diff --git a/src/lib/components/StatsView.svelte b/src/lib/components/StatsView.svelte
index 3779038..2a3d441 100644
--- a/src/lib/components/StatsView.svelte
+++ b/src/lib/components/StatsView.svelte
@@ -156,7 +156,7 @@
 
       // Day label — show every Nth for 30-day
       if (data.length <= 7 || i % 5 === 0) {
-        ctx.fillStyle = "#8a8a8a";
+        ctx.fillStyle = "#a8a8a8";
         ctx.font = "10px -apple-system, sans-serif";
         ctx.textAlign = "center";
         const label = day.date.slice(5);
@@ -508,7 +508,7 @@
             <span class="text-text-sec">Avg {week.avgDailyCompleted.toFixed(1)} breaks/day</span>
             {#if prevWeek}
               <span class="flex items-center gap-1"
-                style="color: {trend > 0 ? '#3fb950' : trend < 0 ? '#f85149' : '#8a8a8a'};"
+                style="color: {trend > 0 ? '#3fb950' : trend < 0 ? '#ff6b6b' : '#a8a8a8'};"
               >
                 {#if trend > 0}
                   <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>