From ab3e7e98c374d48de1f0fa24f690e965ecfef11f Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <accounts@gariasf.com>
Date: Thu, 11 Jun 2026 15:27:11 +0200
Subject: [PATCH] =?UTF-8?q?fix(ds):=20convert=5Fto=5Ftrade=20price=20warni?=
 =?UTF-8?q?ng=20=E2=80=94=20fix=20dead=20dark:,=20use=20warning=20token=20?=
 =?UTF-8?q?(#2249)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The price-mismatch warning used bare `dark:` variants, but the app's dark
mode is the `theme-dark` custom variant — so those styles never applied and
the box stayed light-yellow on dark surfaces. Replace the literal yellow
palette + dead `dark:` classes with the theme-aware `--color-warning` token
(`bg-warning/10`, `border-warning/20`), the warning-colored alert-triangle,
and neutral primary/secondary text (matching the DS::Alert recipe). One class
now adapts to both themes; the JS targets (priceWarning / priceWarningMessage)
are unchanged.

Closes #2248. Part of #2198.
---
 app/views/transactions/convert_to_trade.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/transactions/convert_to_trade.html.erb b/app/views/transactions/convert_to_trade.html.erb
index b7e04524d..45da63027 100644
--- a/app/views/transactions/convert_to_trade.html.erb
+++ b/app/views/transactions/convert_to_trade.html.erb
@@ -132,12 +132,12 @@
         </div>
 
         <!-- Price mismatch warning -->
-        <div class="hidden p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg" data-convert-to-trade-target="priceWarning">
+        <div class="hidden p-3 bg-warning/10 border border-warning/20 rounded-lg" data-convert-to-trade-target="priceWarning">
           <div class="flex items-start gap-2">
-            <%= icon "alert-triangle", size: "sm", class: "text-yellow-600 dark:text-yellow-500 mt-0.5 shrink-0" %>
+            <%= icon "alert-triangle", size: "sm", color: "warning", class: "mt-0.5 shrink-0" %>
             <div class="text-sm">
-              <p class="font-medium text-yellow-800 dark:text-yellow-200"><%= t(".price_mismatch_title") %></p>
-              <p class="text-yellow-700 dark:text-yellow-300" data-convert-to-trade-target="priceWarningMessage"></p>
+              <p class="font-medium text-primary"><%= t(".price_mismatch_title") %></p>
+              <p class="text-secondary" data-convert-to-trade-target="priceWarningMessage"></p>
             </div>
           </div>
         </div>