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/accounts/_account_type.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (accountable:) %>
 
 <%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
-            class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
+            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
   <span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
     <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
   </span>

app/views/accounts/index.html.erb

@@ -15,7 +15,7 @@
                     class: "btn btn--primary flex items-center justify-center gap-1 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg" do %>
         <div class="flex items-center justify-center w-5 h-5">
 
-        <%= lucide_icon("plus")%>
+        <%= lucide_icon("plus") %>
                     </div>
         <p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
       <% end %>

app/views/accounts/new.html.erb

@@ -24,7 +24,7 @@
     <% unless params[:return_to].present? %>
       <%= button_to imports_path(import: { type: "AccountImport" }),
               data: { turbo_frame: :_top },
-            class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
+            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
         <span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
           <%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
         </span>

app/views/accounts/new/_container.html.erb

@@ -15,7 +15,7 @@
       </button>
     </div>
 
-    <div class="p-2 text-primary">
+    <div class="p-2 text-subdued">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 

app/views/accounts/new/_method_selector.html.erb

@@ -2,7 +2,7 @@
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
   <div class="text-sm">
-    <%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2" do %>
+    <%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" do %>
       <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
         <%= lucide_icon("keyboard", class: "text-secondary w-5 h-5") %>
       </span>

app/views/accounts/show/_activity.html.erb

@@ -37,7 +37,7 @@
               data: { controller: "auto-submit-form" } do |form| %>
         <div class="flex gap-2 mb-4">
           <div class="grow">
-            <div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
+            <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
               <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
               <%= hidden_field_tag :account_id, @account.id %>
               <%= form.search_field :search,