chore(design-system): swap raw gray classes for semantic tokens across remaining views (#1655)

* chore(design-system): swap raw gray classes for semantic tokens across remaining views Finalizes the raw-color sweep started in #1652 (settings) and continued in #1654 (holdings). Covers accounts, budgets, chats, pages, imports, provider integrations (mercury, lunchflow, sophtron, enable_banking, coinstats), auth flows (password reset, MFA, registrations), shared layouts, and selected DS component hover states. 35 files, ~56 line changes. Mappings (matching the patterns established in the prior sweeps): - text-white bg-gray-900 hover:bg-gray-800 (with optional focus:ring-gray-900) -> text-inverse button-bg-primary hover:button-bg-primary-hover -> focus:ring-button-bg-primary - text-gray-500 / 600 / 700 -> text-secondary - text-gray-800 -> text-primary - text-gray-400 -> text-subdued - hover:text-gray-700 / hover:text-gray-100 -> hover:text-primary - bg-gray-50 / 100 / 200 (standalone) -> bg-surface-inset - bg-gray-500/5 -> bg-gray-tint-5 - bg-gray-500/10 -> bg-gray-tint-10 - bg-gray-900 (decorative active states) -> bg-inverse - hover:bg-gray-50 / 100 (standalone) -> hover:bg-surface-inset - hover:bg-gray-300 -> hover:bg-surface-inset-hover - bg-white hover:bg-gray-100 -> bg-container hover:bg-container-hover - border-gray-300 -> border-secondary - focus:border-gray-200 -> focus:border-secondary - focus-within:border-gray-900 -> focus-within:border-primary - DS::Buttonish outline / ghost / icon hover: hover:bg-gray-100 theme-dark:hover:bg-gray-700 -> hover:bg-container-inset-hover Left intentionally raw, with rationale: - bg-gray-300 / bg-gray-400 decorative dots and avatar circles. The raw value reads OK against both bg-container variants; no semantic "neutral indicator" token exists. Same pattern as #1652 / #1654. - bg-gray-400/20 theme-dark:bg-gray-500/20 (onboardings/trial). Custom alpha tint with no equivalent token. - bg-white theme-dark:bg-gray-700 (DS::Tabs active pill, budgets tabs). Custom tab-pill pattern; gray-700 in dark mode (one shade lighter than page bg-gray-900) is intentional for visibility. - bg-gray-100 theme-dark:bg-gray-700 (DS::Toggle base bg). Closest match (bg-container-inset-hover) is semantically a hover state. - DS::Buttonish secondary variant gray-200/300/700/600 pattern. Same pattern as #1654 holdings; needs button-bg-secondary-strong from that PR. Will swap in a follow-up after #1654 merges. - disabled:bg-gray-500 theme-dark:disabled:bg-gray-400 on inverse buttons (DS::Buttonish primary, enable_banking, coinstats). Custom disabled state for the inverse pair; no token. - text-gray-300 SVG stroke (shared/_progress_circle). - bg-white text-gray-900 (layouts/print). Print contexts intentionally light regardless of theme. - bg-gray-800 / border-gray-700 / text-white / hover:text-gray-100 (impersonation_sessions/_super_admin_bar). Admin overlay styled to remain dark in both modes; not a theme-aware component. Files covered by other in-flight PRs were skipped to avoid rebase conflicts: chats/_ai_consent's fg-inverse swap (#1626), shared/_text_tooltip and shared/_money_field tooltip pills (#1626), investments/_value_tooltip (#1626), components/DS/tooltip (#1626). * fix(design-system): keep changelog avatar text raw to preserve dark-mode contrast The changelog avatar fallback (when @release_notes[:avatar] is missing) sits inside the "decorative + raw" exception list — bg-gray-300 stays fixed across themes since no semantic neutral-indicator token exists. The earlier sweep partially themed the pair: bg-gray-300 stayed raw but text-gray-600 became text-secondary. text-secondary resolves to gray-300 in dark mode, which matches the bg → text became invisible against its own background. Reverting only the text class to text-gray-600 restores the original fixed-light placeholder behavior. Both classes raw, both themes readable. * fix(design-system): address review feedback on raw-color-sweep-finalize Six issues caught by CodeRabbit + Codex review: 1. focus:ring-button-bg-primary silently emits no CSS (×6 files). button-bg-primary is a custom @utility, not a theme color, so Tailwind's ring-{name} resolution finds no --color-button-bg-primary. Replaces with focus:ring-gray-900 theme-dark:focus:ring-white — same color flip as the button bg, but resolved through theme colors so the ring actually renders. Files: lunchflow/mercury/sophtron _api_error + _setup_required, coinstats_items/new. 2. accounts/show/_activity.html.erb: focus-within:ring-gray-100 was dead (no ring-width on the parent). Removed. 3. import/confirms/show.html.erb: uniform hover:bg-surface-inset-hover applied to both active and inactive step indicators created a jarring dark-to-light flip on the active step (bg-inverse → bg-surface-inset-hover). Now hover follows the resting state: active uses hover:bg-inverse-hover, inactive uses hover:bg-surface-inset-hover. 4. password_resets/new.html.erb: bg-white left raw alongside the migrated hover:bg-surface-inset. Swapped to bg-container so dark mode flips properly. 5. registrations/new.html.erb + password_validator_controller.js: view now uses bg-surface-inset on password strength block lines, but the Stimulus controller still toggled bg-gray-200 on validate. Updated controller to add/remove bg-surface-inset matching the view, so unmet states reset to the tokenized class instead of leaving raw gray-200 stuck on the element.
2026-05-09 13:45:01 +00:00 · 2026-05-04 21:47:01 +02:00
parent 99844c1b90
commit 0d32bb70ec
35 changed files with 57 additions and 57 deletions
--- a/app/components/DS/buttonish.rb
+++ b/app/components/DS/buttonish.rb
@@ -17,15 +17,15 @@ class DS::Buttonish < DesignSystemComponent
      icon_classes: "text-secondary"
    },
    outline_destructive: {
-      container_classes: "text-destructive border border-secondary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      container_classes: "text-destructive border border-secondary bg-transparent hover:bg-container-inset-hover",
      icon_classes: "text-secondary"
    },
    ghost: {
-      container_classes: "text-primary bg-transparent hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      container_classes: "text-primary bg-transparent hover:bg-container-inset-hover",
      icon_classes: "text-secondary"
    },
    icon: {
-      container_classes: "hover:bg-gray-100 theme-dark:hover:bg-gray-700",
+      container_classes: "hover:bg-container-inset-hover",
      icon_classes: "text-secondary"
    },
    icon_inverse: {
--- a/app/javascript/controllers/password_validator_controller.js
+++ b/app/javascript/controllers/password_validator_controller.js
@@ -52,11 +52,11 @@ export default class extends Controller {
    // Update block lines sequentially based on total requirements met
    this.blockLineTargets.forEach((line, index) => {
      if (index < requirementsMet) {
-        line.classList.remove("bg-gray-200");
+        line.classList.remove("bg-surface-inset");
        line.classList.add("bg-green-600");
      } else {
        line.classList.remove("bg-green-600");
-        line.classList.add("bg-gray-200");
+        line.classList.add("bg-surface-inset");
      }
    });
  }
--- a/app/views/accounts/_tax_treatment_badge.html.erb
+++ b/app/views/accounts/_tax_treatment_badge.html.erb
@@ -9,7 +9,7 @@
  when :tax_advantaged
    "bg-purple-500/10 text-purple-600 theme-dark:text-purple-400"
  else
-    "bg-gray-500/10 text-secondary"
+    "bg-gray-tint-10 text-secondary"
  end
 %>
 <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium <%= badge_classes %>" title="<%= t("accounts.tax_treatment_descriptions.#{treatment}") %>">
--- a/app/views/accounts/new/_container.html.erb
+++ b/app/views/accounts/new/_container.html.erb
@@ -2,7 +2,7 @@

 <%= render DS::Dialog.new do |dialog| %>
  <div class="flex flex-col relative" data-controller="list-keyboard-navigation">
-    <div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-gray-800 flex items-center justify-between gap-2">
+    <div class="border-b border-tertiary md:border-alpha-black-25 px-4 pb-4 text-primary flex items-center justify-between gap-2">
      <div class="flex items-center gap-2">
        <% if back_path %>
          <%= render DS::Link.new(
--- a/app/views/accounts/new/_method_selector.html.erb
+++ b/app/views/accounts/new/_method_selector.html.erb
@@ -10,7 +10,7 @@
         <% end %>
       <% end %>>
    <%# Manual entry option %>
-    <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary 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 %>
+    <%= link_to path, class: "flex items-center gap-4 w-full text-center text-primary focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-secondary 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)]">
        <%= icon("keyboard") %>
      </span>
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -44,7 +44,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-secondary 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:border-primary">
              <%= icon("search") %>
              <%= hidden_field_tag :account_id, @account.id %>
              <%= form.search_field :search,
--- a/app/views/budget_categories/_allocation_progress.erb
+++ b/app/views/budget_categories/_allocation_progress.erb
@@ -5,7 +5,7 @@
    <% if budget.available_to_allocate.negative? %>
      <div class="rounded-full w-1.5 h-1.5 bg-red-500"></div>
    <% else %>
-      <div class="rounded-full w-1.5 h-1.5 <%= budget.allocated_spending > 0 ? "bg-gray-900" : "bg-gray-100" %>"></div>
+      <div class="rounded-full w-1.5 h-1.5 <%= budget.allocated_spending > 0 ? "bg-inverse" : "bg-surface-inset" %>"></div>
    <% end %>

    <% if budget.available_to_allocate.negative? %>
@@ -23,11 +23,11 @@
    </p>
  </div>

-  <div class="relative h-1.5 rounded-2xl bg-gray-100">
+  <div class="relative h-1.5 rounded-2xl bg-surface-inset">
    <% if budget.available_to_allocate.negative? %>
      <div class="absolute inset-0 bg-red-500 rounded-2xl" style="width: 100%;"></div>
    <% else %>
-      <div class="absolute inset-0 bg-gray-900 rounded-2xl" style="width: <%= budget.allocated_percent %>%;"></div>
+      <div class="absolute inset-0 bg-inverse rounded-2xl" style="width: <%= budget.allocated_percent %>%;"></div>
    <% end %>
  </div>

--- a/app/views/budget_categories/_budget_category.html.erb
+++ b/app/views/budget_categories/_budget_category.html.erb
@@ -68,7 +68,7 @@
            <%= format_money(budget_category.budgeted_spending_money) %>
          </span>
          <% if budget_category.inherits_parent_budget? %>
-            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-gray-500/5 text-secondary"><%= t("reports.budget_performance.shared") %></span>
+            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-gray-tint-5 text-secondary"><%= t("reports.budget_performance.shared") %></span>
          <% end %>
        </div>
        <% if budget_category.suggested_daily_spending.present? %>
--- a/app/views/budgets/_budget_donut.html.erb
+++ b/app/views/budgets/_budget_donut.html.erb
@@ -4,7 +4,7 @@
  <div data-donut-chart-target="contentContainer" class="flex justify-center items-center h-full">
    <div data-donut-chart-target="defaultContent" class="flex flex-col items-center">
      <% if budget.initialized? %>
-        <div class="text-gray-600 text-sm mb-2">
+        <div class="text-secondary text-sm mb-2">
          <span>Spent</span>
        </div>

--- a/app/views/categories/_form.html.erb
+++ b/app/views/categories/_form.html.erb
@@ -14,7 +14,7 @@
          <div class="fixed right-0 sm:right-auto mx-2 sm:ml-8 sm:mr-0 mt-2 z-50 bg-container p-4 border border-alpha-black-25 rounded-2xl shadow-xs h-fit" data-category-target="popup">
            <div class="flex gap-2 flex-col mb-4" data-category-target="selection" style="<%= "display:none;" if @category.subcategory? %>">
              <div data-category-target="pickerSection"></div>
-              <h4 class="text-gray-500 text-sm">Color</h4>
+              <h4 class="text-secondary text-sm">Color</h4>
              <div class="flex flex-wrap md:flex-nowrap gap-2 items-center" data-category-target="colorsSection">
                <% Category::COLORS.each do |color| %>
                  <label class="relative">
--- a/app/views/chats/_ai_consent.html.erb
+++ b/app/views/chats/_ai_consent.html.erb
@@ -5,7 +5,7 @@

  <h3 class="text-sm font-medium text-primary mb-1 -mt-2 text-center">Enable AI Chats</h3>

-  <p class="text-gray-600 mb-4 text-sm text-center">
+  <p class="text-secondary mb-4 text-sm text-center">
    <% if Current.user.ai_available? %>
      AI chat can answer financial questions and provide insights based on your data. To use this feature you'll need to explicitly enable it.
    <% else %>
--- a/app/views/chats/_ai_greeting.html.erb
+++ b/app/views/chats/_ai_greeting.html.erb
@@ -30,7 +30,7 @@
        <% questions.each do |question| %>
          <button data-action="chat#submitSampleQuestion"
                  data-chat-question-param="<%= question[:text] %>"
-                  class="w-fit flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-gray-100">
+                  class="w-fit flex items-center gap-2 border border-tertiary rounded-full py-1.5 px-2.5 hover:bg-surface-inset">
            <%= icon(question[:icon]) %> <%= question[:text] %>
          </button>
        <% end %>
--- a/app/views/coinstats_items/new.html.erb
+++ b/app/views/coinstats_items/new.html.erb
@@ -54,7 +54,7 @@

              <div class="flex justify-end">
                <%= form.submit t(".link_wallet_submit"),
-                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
              </div>
            <% end %>
          </section>
@@ -91,7 +91,7 @@

              <div class="flex justify-end">
                <%= form.submit t(".link_exchange_submit"),
-                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors" %>
+                                class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors" %>
              </div>
            <% end %>
          </section>
--- a/app/views/enable_banking_items/new.html.erb
+++ b/app/views/enable_banking_items/new.html.erb
@@ -41,7 +41,7 @@
                    <% if item.session_valid? %>
                    <%= button_to sync_enable_banking_item_path(item),
                                    method: :post,
-                                    class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-gray-50 transition-colors",
+                                    class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-primary bg-container border border-primary hover:bg-surface-inset transition-colors",
                                    data: { turbo: false } do %>
                        Sync
                    <% end %>
@@ -54,7 +54,7 @@
                    <% end %>
                    <% else %>
                    <%= link_to select_bank_enable_banking_item_path(item),
-                                class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
+                                class: "inline-flex items-center justify-center rounded-lg px-3 py-1.5 text-xs font-medium text-inverse button-bg-primary hover:button-bg-primary-hover transition-colors",
                                data: { turbo_frame: "modal" } do %>
                        Connect Bank
                    <% end %>
@@ -75,7 +75,7 @@
                <div class="flex justify-center pt-2">
                <%= button_to new_connection_enable_banking_item_path(item_for_new_connection),
                                method: :post,
-                                class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 transition-colors",
+                                class: "inline-flex items-center gap-2 justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover transition-colors",
                                data: { turbo_frame: "modal" } do %>
                    <%= icon "plus", size: "sm" %>
                    Add Connection
--- a/app/views/family_merchants/merge.html.erb
+++ b/app/views/family_merchants/merge.html.erb
@@ -13,7 +13,7 @@
        <div class="max-h-64 overflow-y-auto space-y-1 border border-secondary rounded-lg p-2">
          <% @merchants.each do |merchant| %>
            <label class="flex items-center gap-2 p-2 hover:bg-surface-hover rounded cursor-pointer">
-              <%= check_box_tag "source_ids[]", merchant.id, false, class: "rounded border-gray-300" %>
+              <%= check_box_tag "source_ids[]", merchant.id, false, class: "rounded border-secondary" %>
              <span class="text-sm text-primary"><%= merchant.name %></span>
              <% if merchant.is_a?(ProviderMerchant) %>
                <span class="text-xs text-subdued">(<%= merchant.source&.titleize %>)</span>
--- a/app/views/import/cleans/show.html.erb
+++ b/app/views/import/cleans/show.html.erb
@@ -34,7 +34,7 @@
      </div>

      <div class="flex justify-center w-full md:w-auto">
-        <div class="bg-gray-50 rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium w-full md:w-auto">
+        <div class="bg-surface-inset rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium w-full md:w-auto">
          <%= link_to "All rows", import_clean_path(@import, per_page: params[:per_page], view: "all"), class: "p-2 rounded-lg flex-1 md:flex-auto text-center #{params[:view] != 'errors' ? 'bg-container' : ''}" %>
          <%= link_to "Error rows", import_clean_path(@import, per_page: params[:per_page], view: "errors"), class: "p-2 rounded-lg flex-1 md:flex-auto text-center #{params[:view] == 'errors' ? 'bg-container' : ''}" %>
        </div>
--- a/app/views/import/confirms/show.html.erb
+++ b/app/views/import/confirms/show.html.erb
@@ -44,7 +44,7 @@
      <% @import.mapping_steps.each_with_index do |step_mapping_class, idx| %>
        <% is_active = step_idx == idx %>

-        <%= link_to url_for(step: idx + 1), class: "w-5 h-[3px] #{is_active ? 'bg-gray-900' : 'bg-gray-100'} rounded-xl hover:bg-gray-300 transition-colors duration-200" do %>
+        <%= link_to url_for(step: idx + 1), class: "w-5 h-[3px] #{is_active ? 'bg-inverse hover:bg-inverse-hover' : 'bg-surface-inset hover:bg-surface-inset-hover'} rounded-xl transition-colors duration-200" do %>
          <span class="sr-only">Step <%= idx + 1 %></span>
        <% end %>
      <% end %>
--- a/app/views/imports/_importing.html.erb
+++ b/app/views/imports/_importing.html.erb
@@ -2,7 +2,7 @@

 <div class="h-full flex flex-col justify-center items-center">
  <div class="space-y-6 max-w-sm">
-    <div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
+    <div class="mx-auto bg-gray-tint-5 h-8 w-8 rounded-full flex items-center justify-center">
      <%= icon "loader", class: "animate-pulse" %>
    </div>

--- a/app/views/imports/_pdf_import.html.erb
+++ b/app/views/imports/_pdf_import.html.erb
@@ -16,14 +16,14 @@
      <div class="bg-container border border-primary rounded-xl p-4 space-y-4">
        <div class="space-y-2">
          <h2 class="font-medium text-primary"><%= t("imports.pdf_import.document_type_label") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg">
            <%= t("imports.document_types.#{import.document_type}", default: import.document_type&.humanize || t("imports.pdf_import.unknown_document_type", default: "Unknown")) %>
          </p>
        </div>

        <div class="space-y-2">
          <h2 class="font-medium text-primary"><%= t("imports.pdf_import.transactions_extracted", default: "Transactions Extracted") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg">
            <%= t("imports.pdf_import.transactions_extracted_count", count: import.rows_count, default: "%{count} transactions") %>
          </p>
        </div>
@@ -63,7 +63,7 @@
      </div>

    <% elsif import.importing? || import.pending? %>
-      <div class="mx-auto bg-gray-500/5 h-8 w-8 rounded-full flex items-center justify-center">
+      <div class="mx-auto bg-gray-tint-5 h-8 w-8 rounded-full flex items-center justify-center">
        <%= icon "loader", class: "animate-pulse" %>
      </div>

@@ -92,7 +92,7 @@

      <div class="space-y-2 flex flex-col">
        <%= render DS::Link.new(text: t("imports.pdf_import.try_again"), href: new_import_path, variant: "primary", full_width: true) %>
-        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-gray-200 hover:bg-gray-300" %>
+        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-surface-inset hover:bg-surface-inset-hover" %>
      </div>

    <% elsif import.complete? && import.ai_processed? %>
@@ -108,14 +108,14 @@
      <div class="bg-container border border-primary rounded-xl p-4 space-y-4">
        <div class="space-y-2">
          <h2 class="font-medium text-primary"><%= t("imports.pdf_import.document_type_label") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg">
            <%= t("imports.document_types.#{import.document_type}", default: import.document_type&.humanize || t("imports.pdf_import.unknown_document_type", default: "Unknown")) %>
          </p>
        </div>

        <div class="space-y-2">
          <h2 class="font-medium text-primary"><%= t("imports.pdf_import.summary_label") %></h2>
-          <p class="text-sm text-secondary px-3 py-2 bg-gray-500/5 rounded-lg whitespace-pre-wrap">
+          <p class="text-sm text-secondary px-3 py-2 bg-gray-tint-5 rounded-lg whitespace-pre-wrap">
            <%= import.ai_summary %>
          </p>
        </div>
@@ -127,7 +127,7 @@

      <div class="space-y-2 flex flex-col">
        <%= render DS::Link.new(text: t("imports.pdf_import.back_to_imports"), href: imports_path, variant: "primary", full_width: true) %>
-        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-gray-200 hover:bg-gray-300" %>
+        <%= button_to t("imports.pdf_import.delete_import"), import_path(import), method: :delete, class: "w-full font-medium text-sm px-3 py-2 rounded-lg text-primary bg-surface-inset hover:bg-surface-inset-hover" %>
      </div>

    <% else %>
--- a/app/views/imports/_table.html.erb
+++ b/app/views/imports/_table.html.erb
@@ -2,10 +2,10 @@
 <div class="bg-container-inset rounded-xl overflow-hidden md:mx-auto p-4">
  <% if caption %>
    <div class="flex items-center mb-4">
-      <div class="text-gray-500 mr-2">
+      <div class="text-secondary mr-2">
        <%= inline_svg_tag "icon-csv.svg", class: "w-4 h-4" %>
      </div>
-      <h2 class="text-sm text-gray-500 font-medium"><%= caption %></h2>
+      <h2 class="text-sm text-secondary font-medium"><%= caption %></h2>
    </div>
  <% end %>
  <div class="inline-block min-w-fit sm:w-full rounded-lg shadow-border-xs text-sm bg-container">
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -112,8 +112,8 @@
            <%= render "imports/import_option",
              type: "TransactionImport",
              icon_name: "bar-chart-2",
-              icon_bg_class: "bg-gray-500/5",
-              icon_text_class: "text-gray-400",
+              icon_bg_class: "bg-gray-tint-5",
+              icon_text_class: "text-subdued",
              label: t(".import_ynab"),
              enabled: false,
              disabled_message: t(".coming_soon") %>
--- a/app/views/layouts/auth.html.erb
+++ b/app/views/layouts/auth.html.erb
@@ -26,7 +26,7 @@
                <%= tag.span t("layouts.auth.no_account", product_name: product_name), class: "text-secondary" %> <%= link_to t("layouts.auth.sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>
              </p>
            <% elsif controller_name == "registrations" %>
-              <p class="text-sm text-center text-gray-600 hidden md:block">
+              <p class="text-sm text-center text-secondary hidden md:block">
                <%= t("layouts.auth.existing_account") %> <%= link_to t("layouts.auth.sign_in"), new_session_path, class: "font-medium text-primary hover:underline transition" %>
              </p>
            <% end %>
--- a/app/views/layouts/shared/_breadcrumbs.html.erb
+++ b/app/views/layouts/shared/_breadcrumbs.html.erb
@@ -7,11 +7,11 @@
    <% end %>

    <% if path.present? && index < breadcrumbs.size - 1 %>
-      <%= link_to name, path, class: "text-sm text-gray-500 font-medium" %>
+      <%= link_to name, path, class: "text-sm text-secondary font-medium" %>
    <% elsif index == breadcrumbs.size - 1 %>
      <span class="text-primary font-medium text-sm"><%= name %></span>
    <% else %>
-      <span class="text-sm text-gray-500 font-medium"><%= name %></span>
+      <span class="text-sm text-secondary font-medium"><%= name %></span>
    <% end %>
  <% end %>
 </div>
--- a/app/views/layouts/shared/_page_header.html.erb
+++ b/app/views/layouts/shared/_page_header.html.erb
@@ -4,7 +4,7 @@
    <div class="space-y-1">
      <h1 class="text-3xl font-medium text-primary"><%= title %></h1>
      <% if local_assigns[:subtitle].present? %>
-        <p class="text-gray-500"><%= subtitle %></p>
+        <p class="text-secondary"><%= subtitle %></p>
      <% end %>
    </div>
  <% end %>
--- a/app/views/lunchflow_items/_api_error.html.erb
+++ b/app/views/lunchflow_items/_api_error.html.erb
@@ -24,7 +24,7 @@

        <div class="mt-4">
          <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                      data: { turbo: false } do %>
            Check Provider Settings
          <% end %>
--- a/app/views/lunchflow_items/_setup_required.html.erb
+++ b/app/views/lunchflow_items/_setup_required.html.erb
@@ -23,7 +23,7 @@

        <div class="mt-4">
          <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                      data: { turbo: false } do %>
            Go to Provider Settings
          <% end %>
--- a/app/views/mercury_items/_api_error.html.erb
+++ b/app/views/mercury_items/_api_error.html.erb
@@ -25,7 +25,7 @@

        <div class="mt-4">
          <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                      data: { turbo: false } do %>
            Check Provider Settings
          <% end %>
--- a/app/views/mercury_items/_setup_required.html.erb
+++ b/app/views/mercury_items/_setup_required.html.erb
@@ -23,7 +23,7 @@

        <div class="mt-4">
          <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                      data: { turbo: false } do %>
            Go to Provider Settings
          <% end %>
--- a/app/views/mfa/new.html.erb
+++ b/app/views/mfa/new.html.erb
@@ -27,7 +27,7 @@
                 autocomplete="off"
                 value="<%= Current.user.otp_secret %>"
                 class="text-sm bg-container px-2 py-1 rounded border border-secondary w-96 font-mono">
-          <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
+          <button data-action="clipboard#copy" class="text-secondary hover:text-primary">
            <span data-clipboard-target="iconDefault">
              <%= icon "copy" %>
            </span>
--- a/app/views/password_resets/new.html.erb
+++ b/app/views/password_resets/new.html.erb
@@ -16,6 +16,6 @@
    href: new_session_path,
    variant: :secondary,
    full_width: true,
-    class: "bg-white hover:bg-gray-100"
+    class: "bg-container hover:bg-surface-inset"
  ) %>
 </div>
--- a/app/views/registrations/new.html.erb
+++ b/app/views/registrations/new.html.erb
@@ -53,7 +53,7 @@
            action: "input->password-validator#validate"
          } %>
      <button type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-secondary hover:text-primary focus:outline-none"
              data-action="click->password-visibility#toggle">
        <div data-password-visibility-target="showIcon">
          <%= icon("eye") %>
@@ -65,10 +65,10 @@
    </div>

    <div class="flex gap-4 my-4">
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
-      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
+      <div class="h-1 bg-surface-inset rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
    </div>

    <div class="space-y-1 my-4">
--- a/app/views/shared/_badge.html.erb
+++ b/app/views/shared/_badge.html.erb
@@ -10,7 +10,7 @@
              when "warning"
                "bg-orange-500/5 text-orange-500"
              else
-                "bg-gray-500/5 text-secondary"
+                "bg-gray-tint-5 text-secondary"
              end

    p ? "#{classes} animate-pulse" : classes
--- a/app/views/sophtron_items/_setup_required.html.erb
+++ b/app/views/sophtron_items/_setup_required.html.erb
@@ -23,7 +23,7 @@

        <div class="mt-4">
          <%= link_to settings_providers_path,
-                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition-colors",
+                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                      data: { turbo: false } do %>
            <%= t("sophtron_items.sophtron_setup_required.go_to_provider_settings") %>
          <% end %>
--- a/app/views/transfer_matches/new.html.erb
+++ b/app/views/transfer_matches/new.html.erb
@@ -9,7 +9,7 @@
        ) do |f| %>
      <section class="space-y-4">
        <div class="space-y-2">
-          <h2 class="text-sm font-medium text-gray-700">
+          <h2 class="text-sm font-medium text-secondary">
            <%= @entry.amount.positive? ? "From account: #{@entry.account.name}" : "From account" %>
          </h2>

@@ -36,7 +36,7 @@

      <section class="space-y-4">
        <div class="space-y-2">
-          <h2 class="text-sm font-medium text-gray-700">
+          <h2 class="text-sm font-medium text-secondary">
            <%= @entry.amount.negative? ? "To account: #{@entry.account.name}" : "To account" %>
          </h2>

--- a/app/views/valuations/index.html.erb
+++ b/app/views/valuations/index.html.erb
@@ -4,7 +4,7 @@
      <%= tag.h2 t(".valuations"), class: "font-medium text-lg" %>
      <%= link_to new_valuation_path(@account),
                  data:  { turbo_frame: dom_id(@account.entries.valuations.new) },
-                  class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
+                  class: "flex gap-1 font-medium items-center bg-surface-inset text-primary p-2 rounded-lg" do %>
        <span class="text-primary">
          <%= icon("plus", color: "current") %>
        </span>