From 83cb2872947c91f23b78188c03ec800d7da1ceff Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <gariasf@proton.me>
Date: Mon, 4 May 2026 21:42:44 +0200
Subject: [PATCH] chore(design-system): swap raw gray classes for semantic
 tokens in settings/ (#1652)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore(design-system): swap raw gray classes for semantic tokens in settings/

Pilot for the broader raw-color sweep. Maps 21 occurrences across 11
files to design-system equivalents:

- text-white bg-gray-900 hover:bg-gray-800 (CTA buttons)
  -> text-inverse button-bg-primary hover:button-bg-primary-hover
- bg-gray-25 / bg-gray-50 / bg-gray-100 (subtle surface backgrounds)
  -> bg-surface-inset
- bg-gray-800 (tooltip pills) -> bg-inverse
- text-white inside tooltips -> text-inverse
- text-gray-300 (muted tooltip labels) -> text-inverse opacity-70
- text-gray-600 (muted body text) -> text-secondary
- hover:text-gray-700 -> hover:text-primary
- focus:ring-gray-900 -> focus:ring-button-bg-primary

The 7 status-indicator dots (`bg-gray-400`) are intentionally left
as raw classes. Gray-400 against both light and dark container bgs
gives reasonable contrast either way, and there's no semantic token
that fits a "neutral inactive indicator" use case yet. Worth a
follow-up if a `bg-subdued` token would benefit other places.

* fix(design-system): use theme-aware focus ring on provider submit buttons

Two issues caught in code review:

1. focus:ring-button-bg-primary silently emits no CSS (CodeRabbit, Codex).
   button-bg-primary is a custom @utility, not a theme color, so Tailwind's
   ring-{name} resolution finds no --color-button-bg-primary and falls
   back to the default. Replaces with focus:ring-gray-900
   theme-dark:focus:ring-white — same color flip as the button bg, but
   resolved through theme colors so ring-{name} actually generates CSS.

2. _enable_banking_panel.html.erb dropped focus-ring + transition entirely
   in the original sweep (CodeRabbit). Restores parity with the other
   provider panels using the corrected ring classes.

Long-term cleanup: tracked under issue #1653 (modifier-aware utilities)
to make button-bg-primary also a theme color so ring-button-bg-primary
becomes valid.
---
 app/views/settings/_user_avatar_field.html.erb            | 4 ++--
 app/views/settings/ai_prompts/show.html.erb               | 6 +++---
 .../settings/hostings/_twelve_data_settings.html.erb      | 4 ++--
 app/views/settings/llm_usages/show.html.erb               | 6 +++---
 app/views/settings/profiles/show.html.erb                 | 6 +++---
 .../settings/providers/_enable_banking_panel.html.erb     | 8 ++++----
 app/views/settings/providers/_lunchflow_panel.html.erb    | 2 +-
 app/views/settings/providers/_provider_form.html.erb      | 2 +-
 app/views/settings/providers/_simplefin_panel.html.erb    | 2 +-
 app/views/settings/securities/show.html.erb               | 2 +-
 10 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/app/views/settings/_user_avatar_field.html.erb b/app/views/settings/_user_avatar_field.html.erb
index 1bedac90e..64f23d9b1 100644
--- a/app/views/settings/_user_avatar_field.html.erb
+++ b/app/views/settings/_user_avatar_field.html.erb
@@ -5,7 +5,7 @@
     <button type="button"
             data-profile-image-preview-target="clearBtn"
             data-action="click->profile-image-preview#clearFileInput"
-      class="<%= user.profile_image.attached? ? "" : "hidden" %> z-50 cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-gray-50 rounded-full flex justify-center items-center border border-white border-2">
+      class="<%= user.profile_image.attached? ? "" : "hidden" %> z-50 cursor-pointer absolute bottom-0 right-0 w-8 h-8 bg-surface-inset rounded-full flex justify-center items-center border border-white border-2">
       <%= icon "x", size: "sm" %>
     </button>
 
@@ -52,7 +52,7 @@
 
     <%= form.file_field :profile_image,
         accept: "image/png, image/jpeg",
-        class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",
+        class: "hidden px-3 py-2 bg-surface-inset text-primary rounded-md text-sm font-medium",
         data: {
           profile_image_preview_target: "input",
           action: "change->profile-image-preview#showFileInputPreview"
diff --git a/app/views/settings/ai_prompts/show.html.erb b/app/views/settings/ai_prompts/show.html.erb
index 6847b0481..60e11c9bb 100644
--- a/app/views/settings/ai_prompts/show.html.erb
+++ b/app/views/settings/ai_prompts/show.html.erb
@@ -24,7 +24,7 @@
         <!-- Main System Prompt Section -->
         <div class="space-y-3">
           <div class="flex items-center gap-3">
-            <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
+            <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
               <%= icon "message-circle" %>
             </div>
             <div>
@@ -52,7 +52,7 @@
         <!-- Auto-Categorization Section -->
         <div class="space-y-3">
           <div class="flex items-center gap-3">
-            <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
+            <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
               <%= icon "brain" %>
             </div>
             <div>
@@ -80,7 +80,7 @@
         <!-- Merchant Detection Section -->
         <div class="space-y-3">
           <div class="flex items-center gap-3">
-            <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
+            <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
               <%= icon "store" %>
             </div>
             <div>
diff --git a/app/views/settings/hostings/_twelve_data_settings.html.erb b/app/views/settings/hostings/_twelve_data_settings.html.erb
index f5d725753..91ee30aca 100644
--- a/app/views/settings/hostings/_twelve_data_settings.html.erb
+++ b/app/views/settings/hostings/_twelve_data_settings.html.erb
@@ -45,12 +45,12 @@
                 limit: number_with_delimiter(@twelve_data_usage.data.limit),
                 percentage: number_to_percentage(@twelve_data_usage.data.utilization, precision: 1)) %>
         </p>
-        <div class="w-52 h-1.5 bg-gray-100 rounded-2xl">
+        <div class="w-52 h-1.5 bg-surface-inset rounded-2xl">
           <div class="h-full bg-green-500 rounded-2xl"
                style="width: <%= [@twelve_data_usage.data.utilization, 2].max %>%;"></div>
         </div>
       </div>
-      <div class="bg-gray-100 rounded-md px-1.5 py-0.5 w-fit">
+      <div class="bg-surface-inset rounded-md px-1.5 py-0.5 w-fit">
         <p class="text-xs font-medium text-secondary uppercase">
           <%= t(".plan", plan: @twelve_data_usage.data.plan) %>
         </p>
diff --git a/app/views/settings/llm_usages/show.html.erb b/app/views/settings/llm_usages/show.html.erb
index c2d4660af..7abcd4f5e 100644
--- a/app/views/settings/llm_usages/show.html.erb
+++ b/app/views/settings/llm_usages/show.html.erb
@@ -135,10 +135,10 @@
                         <%= icon "alert-circle", class: "w-4 h-4 text-red-600 theme-dark:text-red-400" %>
                         <span class="text-red-600 theme-dark:text-red-400 font-medium">Failed</span>
                       </div>
-                      <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-800 text-sm p-3 rounded w-72 text-left break-words whitespace-normal shadow-lg hidden">
-                        <div class="text-white">
+                      <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm p-3 rounded w-72 text-left break-words whitespace-normal shadow-lg hidden">
+                        <div class="text-inverse">
                           <% if usage.http_status_code.present? %>
-                            <p class="text-xs mt-1 text-gray-300">HTTP Status: <%= usage.http_status_code %></p>
+                            <p class="text-xs mt-1 text-inverse opacity-70">HTTP Status: <%= usage.http_status_code %></p>
                           <% end %>
                           <p class="text-xs"><%= usage.error_message %></p>
                         </div>
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index 1e50dd379..245ac27db 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/app/views/settings/profiles/show.html.erb
@@ -8,7 +8,7 @@
       <%= form.email_field :email, placeholder: t(".email"), label: t(".email") %>
 
       <% if @user.unconfirmed_email.present? %>
-        <p class="mt-2 text-sm text-gray-600">
+        <p class="mt-2 text-sm text-secondary">
           You have requested to change your email to <%= @user.unconfirmed_email %>. Please go to your email and confirm for the change to take effect. If you haven't received the email, please check your spam folder, or <%= link_to "request a new confirmation email", resend_confirmation_email_user_path(@user), class: "hover:underline text-secondary" %>.
         </p>
       <% end %>
@@ -88,8 +88,8 @@
                                readonly
                                autocomplete="off"
                                value="<%= accept_invitation_url(invitation.token) %>"
-                               class="text-sm bg-gray-50 px-2 py-1 rounded border border-secondary w-72">
-                    <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
+                               class="text-sm bg-surface-inset px-2 py-1 rounded border border-secondary w-72">
+                    <button data-action="clipboard#copy" class="text-secondary hover:text-primary">
                       <span data-clipboard-target="iconDefault">
                         <%= icon "copy" %>
                       </span>
diff --git a/app/views/settings/providers/_enable_banking_panel.html.erb b/app/views/settings/providers/_enable_banking_panel.html.erb
index 069c59538..d778d8759 100644
--- a/app/views/settings/providers/_enable_banking_panel.html.erb
+++ b/app/views/settings/providers/_enable_banking_panel.html.erb
@@ -99,7 +99,7 @@
 
     <div class="flex justify-end">
       <%= form.submit is_new_record ? "Save Configuration" : "Update Configuration",
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800" %>
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
     </div>
   <% end %>
 
@@ -154,7 +154,7 @@
             <% if item.session_valid? %>
               <%= button_to sync_enable_banking_item_path(item),
                             method: :post,
-                            class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-gray-50 transition-colors",
+                            class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-surface-inset transition-colors",
                             data: { turbo: false } do %>
                 Sync
               <% end %>
@@ -167,7 +167,7 @@
               <% end %>
             <% else %>
               <%= link_to select_bank_enable_banking_item_path(item),
-                          class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
+                          class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-inverse button-bg-primary hover:button-bg-primary-hover transition-colors",
                           data: { turbo_frame: "modal" } do %>
                 Connect Bank
               <% end %>
@@ -188,7 +188,7 @@
         <div class="flex justify-center pt-2">
           <%= button_to new_connection_enable_banking_item_path(item_for_new_connection),
                         method: :post,
-                        class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
+                        class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover transition-colors",
                         data: { turbo_frame: "modal" } do %>
             <%= icon "plus", size: "sm" %>
             Add Connection
diff --git a/app/views/settings/providers/_lunchflow_panel.html.erb b/app/views/settings/providers/_lunchflow_panel.html.erb
index 65696e83e..b54c49810 100644
--- a/app/views/settings/providers/_lunchflow_panel.html.erb
+++ b/app/views/settings/providers/_lunchflow_panel.html.erb
@@ -45,7 +45,7 @@
 
     <div class="flex justify-end">
       <%= form.submit is_new_record ? "Save Configuration" : "Update Configuration",
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
     </div>
   <% end %>
 
diff --git a/app/views/settings/providers/_provider_form.html.erb b/app/views/settings/providers/_provider_form.html.erb
index cb2384a9f..5c86e3b3a 100644
--- a/app/views/settings/providers/_provider_form.html.erb
+++ b/app/views/settings/providers/_provider_form.html.erb
@@ -68,7 +68,7 @@
 
       <div class="flex justify-end">
         <%= form.submit "Save Configuration",
-                        class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                        class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/settings/providers/_simplefin_panel.html.erb b/app/views/settings/providers/_simplefin_panel.html.erb
index 1e50a611c..d4b6b5251 100644
--- a/app/views/settings/providers/_simplefin_panel.html.erb
+++ b/app/views/settings/providers/_simplefin_panel.html.erb
@@ -32,7 +32,7 @@
 
     <div class="flex justify-end">
       <%= form.submit "Save Configuration",
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
     </div>
   <% end %>
 
diff --git a/app/views/settings/securities/show.html.erb b/app/views/settings/securities/show.html.erb
index f740c6545..e0c1c5956 100644
--- a/app/views/settings/securities/show.html.erb
+++ b/app/views/settings/securities/show.html.erb
@@ -4,7 +4,7 @@
   <div class="space-y-4">
     <div class="p-3 shadow-border-xs bg-container rounded-lg md:flex md:justify-between md:items-center">
       <div class="flex items-center gap-3">
-        <div class="w-9 h-9 rounded-full bg-gray-25 flex justify-center items-center">
+        <div class="w-9 h-9 rounded-full bg-surface-inset flex justify-center items-center">
           <%= icon "shield-check" %>
         </div>