Improve dark mode styles across multiple pages (#2125)

* fix: improve dark mode readability across the app

* fix: improve dark mode support for asset percentage text

* fix: apply suggested patch for theme-related improvements

* chore: apply PR feedback – remove dark:, align with design tokens, update form builder

* chore: revert background token and restore original style for visual consistency

* chore: remove unnecessary class attributes from form fields using builder

* refactor: move number_field and date_field into metaprogramming block

* refactor: replace bg-divider-adaptive divs with <hr> and border-secondary

* fix: apply requested changes and linting fixes

app/views/shared/_confirm_modal.html.erb

@@ -1,8 +1,8 @@
 <dialog id="turbo-confirm" class="max-w-[420px] w-full rounded-xl m-auto">
-  <form method="dialog" class="p-4">
+  <form method="dialog" class="p-4 bg-container">
     <div class="flex flex-col mb-4">
       <div class="flex justify-between mb-2 gap-4">
-        <h3 id="turbo-confirm-title" class="font-medium text-md"><%= t(".title") %></h3>
+        <h3 id="turbo-confirm-title" class="font-medium text-primary text-md"><%= t(".title") %></h3>
         <button value="cancel">
           <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
         </button>

app/views/shared/_disclosure.html.erb

@@ -2,7 +2,7 @@
 
 <details class="group space-y-2" <%= "open" if open %>>
   <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium
-                        uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
+                        uppercase text-secondary bg-surface focus-visible:outline-hidden">
     <h3><%= title %></h3>
     <%= lucide_icon "chevron-down",
               class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>

app/views/shared/_icon_image.html.erb

@@ -3,4 +3,4 @@
 <% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
 <% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
 
-<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key )%>
+<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>

app/views/shared/_modal_form.html.erb

@@ -4,7 +4,7 @@
   <article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
     <div class="space-y-2">
       <header class="flex justify-between items-center">
-        <h2 class="font-medium"><%= title %></h2>
+        <h2 class="font-medium text-primary"><%= title %></h2>
         <%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
       </header>
 

app/views/shared/_money_field.html.erb

@@ -17,7 +17,7 @@
 
   <div class="flex items-center gap-1">
     <div class="flex items-center grow gap-1">
-      <span class="text-secondary text-sm" data-money-field-target="symbol">
+      <span class="text-subdued text-sm" data-money-field-target="symbol">
         <%= currency.symbol %>
       </span>