From 709b7bf91bf47a5305bf6eba436979ecb8f3d5cf Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Thu, 21 May 2026 16:08:34 +0200
Subject: [PATCH] fix(goals): replace ring-gray-500 with semantic
 ring-alpha-black-500 token

The colour-picker swatches were using the raw Tailwind palette utility
`peer-checked:ring-gray-500`. Swap for the design-system functional
token `peer-checked:ring-alpha-black-500` so the focus ring inherits
the same alpha-on-surface treatment used elsewhere in the system and
respects dark mode.

Flagged by sure-design's DS Drift Patrol on #1798.
---
 app/views/goals/_color_picker.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/goals/_color_picker.html.erb b/app/views/goals/_color_picker.html.erb
index ffe30b51a..72eb7ff10 100644
--- a/app/views/goals/_color_picker.html.erb
+++ b/app/views/goals/_color_picker.html.erb
@@ -28,7 +28,7 @@
             <% colors.each do |c| %>
               <label class="relative">
                 <%= form.radio_button :color, c, class: "sr-only peer", data: { action: "change->color-icon-picker#handleColorChange" } %>
-                <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-500" style="background-color: <%= c %>"></div>
+                <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-alpha-black-500" style="background-color: <%= c %>"></div>
               </label>
             <% end %>
             <label class="relative">