From c6ee85383aa06c9572398c10688179a338ee4e46 Mon Sep 17 00:00:00 2001
From: gariasf <accounts@gariasf.com>
Date: Sat, 2 May 2026 17:22:19 +0200
Subject: [PATCH] fix(design-system): use inverse pair on tooltips for readable
 dark mode

---
 app/assets/tailwind/sure-design-system/_generated.css |  8 ++++++++
 app/components/DS/tooltip.html.erb                    |  2 +-
 app/views/holdings/_missing_price_tooltip.html.erb    |  2 +-
 app/views/investments/_value_tooltip.html.erb         | 10 +++++-----
 app/views/shared/_money_field.html.erb                |  2 +-
 app/views/shared/_text_tooltip.erb                    |  2 +-
 design/tokens/sure.tokens.json                        |  1 +
 7 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/assets/tailwind/sure-design-system/_generated.css b/app/assets/tailwind/sure-design-system/_generated.css
index c8b237bdc..dc4e8f855 100644
--- a/app/assets/tailwind/sure-design-system/_generated.css
+++ b/app/assets/tailwind/sure-design-system/_generated.css
@@ -434,6 +434,14 @@
   }
 }
 
+@utility border-inverse {
+  @apply border-alpha-white-200;
+
+  @variant theme-dark {
+    @apply border-alpha-black-300;
+  }
+}
+
 @utility button-bg-primary {
   @apply bg-gray-900;
 
diff --git a/app/components/DS/tooltip.html.erb b/app/components/DS/tooltip.html.erb
index 424426c2a..a10c1147f 100644
--- a/app/components/DS/tooltip.html.erb
+++ b/app/components/DS/tooltip.html.erb
@@ -1,7 +1,7 @@
 <span data-controller="DS--tooltip" data-DS--tooltip-placement-value="<%= placement %>" data-DS--tooltip-offset-value="<%= offset %>" data-DS--tooltip-cross-axis-value="<%= cross_axis %>" class="inline-flex">
   <%= helpers.icon icon_name, size: size, color: color %>
 
-  <div role="tooltip" data-DS--tooltip-target="tooltip" class="hidden absolute z-50 bg-gray-700 text-sm px-1.5 py-1 rounded-md">
+  <div role="tooltip" data-DS--tooltip-target="tooltip" class="hidden absolute z-50 bg-inverse text-sm px-1.5 py-1 rounded-md">
     <div class="text-inverse font-normal max-w-[200px]">
       <%= tooltip_content %>
     </div>
diff --git a/app/views/holdings/_missing_price_tooltip.html.erb b/app/views/holdings/_missing_price_tooltip.html.erb
index 022511454..94793a882 100644
--- a/app/views/holdings/_missing_price_tooltip.html.erb
+++ b/app/views/holdings/_missing_price_tooltip.html.erb
@@ -3,7 +3,7 @@
     <%= icon "info", size: "sm", color: "current" %>
     <%= tag.span t(".missing_data"), class: "font-normal text-xs" %>
   </div>
-  <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
+  <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm p-2 rounded w-64">
     <div class="text-inverse">
       <%= t(".description") %>
     </div>
diff --git a/app/views/investments/_value_tooltip.html.erb b/app/views/investments/_value_tooltip.html.erb
index b61a65538..4bc459a44 100644
--- a/app/views/investments/_value_tooltip.html.erb
+++ b/app/views/investments/_value_tooltip.html.erb
@@ -2,12 +2,12 @@
 
 <div data-controller="tooltip" data-tooltip-placement-value="right" data-tooltip-offset-value=10 data-tooltip-cross-axis-value=50>
   <%= icon("info", size: "sm") %>
-  <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">
+  <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm p-2 rounded w-64">
     <div class="text-inverse">
       <%= t(".total_value_tooltip") %>
     </div>
     <div class="flex pt-3">
-      <div class="text-gray-300">
+      <div class="text-inverse/70">
         <%= t(".cash") %>
       </div>
       <div class="text-inverse ml-auto">
@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="flex">
-      <div class="text-gray-300">
+      <div class="text-inverse/70">
         <%= t(".holdings") %>
       </div>
       <div class="text-inverse ml-auto">
@@ -23,10 +23,10 @@
       </div>
     </div>
 
-    <hr class="my-2 border-secondary">
+    <hr class="my-2 border-inverse">
 
     <div class="flex">
-      <div class="text-gray-300">
+      <div class="text-inverse/70">
         <%= t(".total") %>
       </div>
       <div class="text-inverse font-bold ml-auto">
diff --git a/app/views/shared/_money_field.html.erb b/app/views/shared/_money_field.html.erb
index c4f34f542..21c773da8 100644
--- a/app/views/shared/_money_field.html.erb
+++ b/app/views/shared/_money_field.html.erb
@@ -22,7 +22,7 @@
       <div class="form-field__actions">
         <div data-controller="tooltip">
           <%= icon "help-circle", size: "sm", color: "default", class: "cursor-help" %>
-          <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64 text-white">
+          <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-inverse text-sm p-2 rounded w-64">
             <%= options[:label_tooltip] %>
           </div>
         </div>
diff --git a/app/views/shared/_text_tooltip.erb b/app/views/shared/_text_tooltip.erb
index f9cc32466..b95fb4712 100644
--- a/app/views/shared/_text_tooltip.erb
+++ b/app/views/shared/_text_tooltip.erb
@@ -1,4 +1,4 @@
-<div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm px-1.5 py-1 rounded-md">
+<div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-inverse text-sm px-1.5 py-1 rounded-md">
   <div class="text-inverse font-normal max-w-[200px]">
     <%= tooltip_text %>
   </div>
diff --git a/design/tokens/sure.tokens.json b/design/tokens/sure.tokens.json
index 2646bfae4..e8c3ce27c 100644
--- a/design/tokens/sure.tokens.json
+++ b/design/tokens/sure.tokens.json
@@ -329,6 +329,7 @@
     "border-subdued":     { "$type": "utility", "$value": "{color.alpha-black.50}",  "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.100}" } },
     "border-solid":       { "$type": "utility", "$value": "{color.black}",           "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.white}" } },
     "border-destructive": { "$type": "utility", "$value": "{color.red.500}",         "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.red.400}" } },
+    "border-inverse":     { "$type": "utility", "$value": "{color.alpha-white.200}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-black.300}" } },
 
     "button-bg-primary":           { "$type": "utility", "$value": "{color.gray.900}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } },
     "button-bg-primary-hover":     { "$type": "utility", "$value": "{color.gray.800}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.50}" } },