From 4e0da0c237be5cdba1c5a1c6a9c20131acb88d1b Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <accounts@gariasf.com>
Date: Mon, 8 Jun 2026 21:40:22 +0200
Subject: [PATCH] fix(ds): dark-parity for bespoke green status badges (#2142)

* fix(ds): dark-parity for bespoke green status badges (#2134)

The status/type badges in recurring transactions, admin SSO providers, and the
categorize group title used solid light-green tints (bg-green-50/100 +
text-green-700/800) with no dark variant, so they rendered as pale "stickers"
on dark. Add theme-dark variants mirroring DS::Pill's soft recipe
(bg-green-tint-10 + text-green-200); dark text contrast 9.5-14.2:1. Their
neutral siblings were already token-based.

Audit-named _status_pill / _maturity_badge already render via DS::Pill;
remaining solid-tint spots are alpha icon-containers (bg-*-500/5,/10) that
composite fine on dark. Full DS::Pill consolidation tracked separately.

* fix(ds): dark-parity for bespoke amber/blue notices + SSO badge (#2134)

Continues the bespoke-badge tail: the raw-amber warning notices (securities
SSO warning, admin SSO legacy-providers notice) + the env-configured badge,
and the AI tool-call info box, were solid light tints (bg-amber-50/100 /
bg-blue-50) with no dark variant -> pale "stickers" on dark. Add theme-dark
variants mirroring the soft recipe: alpha-tint bg (amber/blue-500/10-15),
lightened border, light text/icon (amber-200/400). Verified legible on dark.

Pre-auth (sessions/new) + infra (redis error) amber notices render light-only,
left as-is. Broader: these warning boxes want a shared DS notice/callout
component (#2137).
---
 app/views/admin/sso_providers/index.html.erb           | 10 +++++-----
 app/views/assistant_messages/_tool_calls.html.erb      |  2 +-
 app/views/recurring_transactions/index.html.erb        |  2 +-
 app/views/settings/securities/show.html.erb            |  6 +++---
 .../transactions/categorizes/_group_title.html.erb     |  2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/views/admin/sso_providers/index.html.erb b/app/views/admin/sso_providers/index.html.erb
index c799d374d..6120b52ea 100644
--- a/app/views/admin/sso_providers/index.html.erb
+++ b/app/views/admin/sso_providers/index.html.erb
@@ -26,7 +26,7 @@
             </div>
             <div class="flex items-center gap-2">
               <% if provider.enabled? %>
-                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
+                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 theme-dark:bg-green-tint-10 theme-dark:text-green-200">
                   <%= t(".enabled") %>
                 </span>
               <% else %>
@@ -64,10 +64,10 @@
 
   <% if @legacy_providers.any? %>
     <%= settings_section title: t("admin.sso_providers.index.legacy_providers_title"), collapsible: true, open: true do %>
-      <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
+      <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 theme-dark:bg-amber-500/10 theme-dark:border-amber-500/30">
         <div class="flex gap-2">
-          <%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0" %>
-          <p class="text-sm text-amber-800">
+          <%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 theme-dark:text-amber-400" %>
+          <p class="text-sm text-amber-800 theme-dark:text-amber-200">
             <%= t("admin.sso_providers.index.legacy_providers_notice") %>
           </p>
         </div>
@@ -90,7 +90,7 @@
               </div>
             </div>
             <div class="flex items-center gap-2">
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 theme-dark:bg-amber-500/15 theme-dark:text-amber-200">
                 <%= t("admin.sso_providers.index.env_configured") %>
               </span>
             </div>
diff --git a/app/views/assistant_messages/_tool_calls.html.erb b/app/views/assistant_messages/_tool_calls.html.erb
index d2adace6a..b301a5d4a 100644
--- a/app/views/assistant_messages/_tool_calls.html.erb
+++ b/app/views/assistant_messages/_tool_calls.html.erb
@@ -8,7 +8,7 @@
 
   <div class="mt-2">
     <% message.tool_calls.each do |tool_call| %>
-      <div class="bg-blue-50 border-blue-200 px-3 py-2 rounded-lg border mb-2">
+      <div class="bg-blue-50 border-blue-200 px-3 py-2 rounded-lg border mb-2 theme-dark:bg-blue-500/10 theme-dark:border-blue-500/30">
         <p class="text-secondary text-xs"><%= t(".function") %></p>
         <p class="text-primary text-sm font-mono"><%= tool_call.function_name %></p>
         <p class="text-secondary text-xs mt-2"><%= t(".arguments") %></p>
diff --git a/app/views/recurring_transactions/index.html.erb b/app/views/recurring_transactions/index.html.erb
index 96b29d4a1..2148b7bb3 100644
--- a/app/views/recurring_transactions/index.html.erb
+++ b/app/views/recurring_transactions/index.html.erb
@@ -155,7 +155,7 @@
                 </td>
                 <td class="py-3 px-2 text-sm">
                   <% if recurring_transaction.active? %>
-                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success">
+                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success theme-dark:bg-green-tint-10">
                       <%= t("recurring_transactions.status.active") %>
                     </span>
                   <% else %>
diff --git a/app/views/settings/securities/show.html.erb b/app/views/settings/securities/show.html.erb
index c0482ac98..f94878cd4 100644
--- a/app/views/settings/securities/show.html.erb
+++ b/app/views/settings/securities/show.html.erb
@@ -160,10 +160,10 @@
         <% end %>
       </div>
       <% if @oidc_identities.count == 1 && Current.user.password_digest.blank? %>
-        <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+        <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg theme-dark:bg-amber-500/10 theme-dark:border-amber-500/30">
           <div class="flex items-start gap-2">
-            <%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5" %>
-            <p class="text-sm text-amber-800"><%= t(".sso_warning_message") %></p>
+            <%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5 theme-dark:text-amber-400" %>
+            <p class="text-sm text-amber-800 theme-dark:text-amber-200"><%= t(".sso_warning_message") %></p>
           </div>
         </div>
       <% end %>
diff --git a/app/views/transactions/categorizes/_group_title.html.erb b/app/views/transactions/categorizes/_group_title.html.erb
index 948b504ac..a23ab1961 100644
--- a/app/views/transactions/categorizes/_group_title.html.erb
+++ b/app/views/transactions/categorizes/_group_title.html.erb
@@ -2,7 +2,7 @@
   <div class="flex items-center gap-2">
     <h2 class="text-lg font-semibold text-primary"><%= display_name %></h2>
     <% if transaction_type == "income" %>
-      <span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-green-100 text-green-700"><%= t("transactions.categorizes.show.type_income") %></span>
+      <span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-green-100 text-green-700 theme-dark:bg-green-tint-10 theme-dark:text-green-200"><%= t("transactions.categorizes.show.type_income") %></span>
     <% elsif transaction_type == "expense" %>
       <span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-surface text-secondary border border-primary"><%= t("transactions.categorizes.show.type_expense") %></span>
     <% end %>