Maybe Design System Updates (#1856)

* Add geist font

* Design system css file

* Add cursor ui/ux rules

* Add shadows and shadow borders

* Replace primitives with tokens for common text and backgrounds

* Organize css

* Update switch and checkbox class names

* Add back global color variables

app/views/account/transactions/_form.html.erb

@@ -8,7 +8,7 @@
     <fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
       <%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil? %>
       <%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow" %>
-      <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-gray-400 group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
+      <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued group-has-checked:bg-white group-has-checked:text-gray-800 group-has-checked:shadow-sm" do %>
         <%= lucide_icon "arrow-right-left", class: "w-5 h-5" %>
         <%= tag.span t(".transfer") %>
       <% end %>

app/views/account/transactions/_header.html.erb

@@ -7,17 +7,17 @@
         <%= format_money -entry.amount_money %>
       </span>
 
-      <span class="text-lg text-gray-500">
+      <span class="text-lg text-secondary">
         <%= entry.currency %>
       </span>
     </h3>
 
     <% if entry.account_transaction.transfer? %>
-      <%= lucide_icon "arrow-left-right", class: "text-gray-500 mt-1 w-5 h-5" %>
+      <%= lucide_icon "arrow-left-right", class: "text-secondary mt-1 w-5 h-5" %>
     <% end %>
   </div>
 
-  <span class="text-sm text-gray-500">
+  <span class="text-sm text-secondary">
     <%= I18n.l(entry.date, format: :long) %>
   </span>
 <% end %>

app/views/account/transactions/_selection_bar.html.erb

@@ -1,11 +1,11 @@
 <div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
   <div class="flex items-center gap-2">
-    <%= check_box_tag "entry_selection", 1, true, class: "maybe-checkbox maybe-checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
+    <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
 
     <p data-bulk-select-target="selectionBarText"></p>
   </div>
 
-  <div class="flex items-center gap-1 text-gray-500">
+  <div class="flex items-center gap-1 text-secondary">
     <%= turbo_frame_tag "bulk_transaction_edit_drawer" %>
 
     <%= link_to bulk_edit_account_transactions_path,

app/views/account/transactions/_transaction.html.erb

@@ -1,11 +1,11 @@
 <%# locals: (entry:, selectable: true, balance_trend: nil) %>
 
-<div class="grid grid-cols-12 items-center text-gray-900 text-sm font-medium p-4 <%= @focused_record == entry ? "border border-gray-900 rounded-lg" : "" %>">
+<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 <%= @focused_record == entry ? "border border-gray-900 rounded-lg" : "" %>">
   <div class="pr-10 flex items-center gap-4 <%= balance_trend ? "col-span-6" : "col-span-8" %>">
     <% if selectable %>
       <%= check_box_tag dom_id(entry, "selection"),
                         disabled: entry.entryable.transfer?,
-                        class: "maybe-checkbox maybe-checkbox--light",
+                        class: "checkbox checkbox--light",
                         data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
     <% end %>
 
@@ -40,7 +40,7 @@
               <% end %>
             </div>
 
-            <div class="text-gray-500 text-xs font-normal">
+            <div class="text-secondary text-xs font-normal">
               <% if entry.entryable.transfer? %>
                 <%= render "transfers/account_links", transfer: entry.entryable.transfer, is_inflow: entry.entryable.transfer_as_inflow.present? %>
               <% else %>
@@ -66,9 +66,9 @@
   <% if balance_trend %>
     <div class="col-span-2 justify-self-end">
       <% if balance_trend.trend %>
-        <%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-gray-900" %>
+        <%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-primary" %>
       <% else %>
-        <%= tag.p "--", class: "font-medium text-sm text-gray-400" %>
+        <%= tag.p "--", class: "font-medium text-sm text-subdued" %>
       <% end %>
     </div>
   <% end %>

app/views/account/transactions/_transfer_match.html.erb

@@ -12,7 +12,7 @@
 
     <%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "confirmed" }),
                     method: :patch,
-                    class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
+                    class: "text-secondary hover:text-gray-800 flex items-center justify-center",
                     title: "Confirm match" do %>
       <%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
     <% end %>
@@ -20,9 +20,9 @@
     <%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "rejected" }),
                     method: :patch,
                     data: { turbo: false },
-                    class: "text-gray-500 hover:text-gray-800 flex items-center justify-center",
+                    class: "text-secondary hover:text-gray-800 flex items-center justify-center",
                     title: "Reject match" do %>
-      <%= lucide_icon "x", class: "w-4 h-4 text-gray-400 hover:text-gray-600" %>
+      <%= lucide_icon "x", class: "w-4 h-4 text-subdued hover:text-gray-600" %>
     <% end %>
   <% end %>
 </div>

app/views/account/transactions/bulk_edit.html.erb

@@ -21,9 +21,9 @@
 
               <div class="space-y-2">
                 <details class="group space-y-2" open>
-                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
+                  <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">
                     <h4><%= t(".overview") %></h4>
-                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
                   </summary>
 
                   <div class="pb-6 space-y-2">
@@ -32,14 +32,14 @@
                 </details>
 
                 <details class="group space-y-2" open>
-                  <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium uppercase text-gray-500 bg-gray-25 focus-visible:outline-hidden">
+                  <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">
                     <h4><%= t(".details") %></h4>
-                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-gray-500 w-5" %>
+                    <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
                   </summary>
 
                   <div class="space-y-2">
-                    <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-gray-400" } %>
-                    <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-gray-400" } %>
+                    <%= form.collection_select :category_id, Current.family.categories.alphabetically, :id, :name, { prompt: t(".category_placeholder"), label: t(".category_label"), class: "text-subdued" } %>
+                    <%= form.collection_select :merchant_id, Current.family.merchants.alphabetically, :id, :name, { prompt: t(".merchant_placeholder"), label: t(".merchant_label"), class: "text-subdued" } %>
                     <%= form.text_area :notes, label: t(".note_label"), placeholder: t(".note_placeholder"), rows: 5 %>
                   </div>
                 </details>
@@ -49,7 +49,7 @@
         </div>
 
         <div class="flex justify-end items-center gap-2">
-          <%= link_to t(".cancel"), transactions_path, class: "text-sm font-medium text-gray-900 px-3 py-2" %>
+          <%= link_to t(".cancel"), transactions_path, class: "text-sm font-medium text-primary px-3 py-2" %>
 
           <%= tag.button t(".save"),
                          type: "button",

app/views/account/transactions/index.html.erb

@@ -3,9 +3,9 @@
     <div class="flex justify-between items-center">
       <h3 class="font-medium text-lg"><%= t(".transactions") %></h3>
       <%= link_to new_account_transaction_path(account_id: @account),
-                  class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg",
+                  class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg",
                   data:  { turbo_frame: :modal } do %>
-        <%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
+        <%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
         <span class="text-sm"><%= t(".new") %></span>
       <% end %>
     </div>
@@ -16,7 +16,7 @@
       </div>
 
       <% if @entries.empty? %>
-        <p class="text-gray-500 py-4"><%= t(".no_transactions") %></p>
+        <p class="text-secondary py-4"><%= t(".no_transactions") %></p>
       <% else %>
         <div class="space-y-6">
           <%= entries_by_date(@entries) do |entries, _transfers| %>

app/views/account/transactions/show.html.erb

@@ -38,7 +38,7 @@
                       Current.family.categories.alphabetically,
                     :id, :name,
                     { label: t(".category_label"),
-                      class: "text-gray-400", include_blank: t(".uncategorized") },
+                      class: "text-subdued", include_blank: t(".uncategorized") },
                     "data-auto-submit-form-target": "auto" %>
             <% end %>
           <% end %>
@@ -70,7 +70,7 @@
                     :id, :name,
                     { include_blank: t(".none"),
                       label: t(".merchant_label"),
-                      class: "text-gray-400" },
+                      class: "text-subdued" },
                     "data-auto-submit-form-target": "auto" %>
 
               <%= ef.select :tag_ids,
@@ -105,8 +105,8 @@
               data: { controller: "auto-submit-form" } do |f| %>
           <div class="flex cursor-pointer items-center gap-4 justify-between">
             <div class="text-sm space-y-1">
-              <h4 class="text-gray-900">One-time <%= @entry.amount.negative? ? "Income" : "Expense" %></h4>
-              <p class="text-gray-500">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
+              <h4 class="text-primary">One-time <%= @entry.amount.negative? ? "Income" : "Expense" %></h4>
+              <p class="text-secondary">One-time transactions will be excluded from certain budgeting calculations and reports to help you see what's really important.</p>
             </div>
 
             <div class="relative inline-block select-none">
@@ -114,15 +114,15 @@
                       class: "sr-only peer",
                       "data-auto-submit-form-target": "auto" %>
               <label for="account_entry_excluded"
-                         class="maybe-switch"></label>
+                         class="switch"></label>
             </div>
           </div>
         <% end %>
 
         <div class="flex items-center justify-between gap-4 p-3">
           <div class="text-sm space-y-1">
-            <h4 class="text-gray-900">Transfer or Debt Payment?</h4>
-            <p class="text-gray-500">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
+            <h4 class="text-primary">Transfer or Debt Payment?</h4>
+            <p class="text-secondary">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
           </div>
 
           <%= link_to new_account_transaction_transfer_match_path(@entry), class: "btn btn--outline flex items-center gap-2", data: { turbo_frame: :modal } do %>
@@ -134,15 +134,15 @@
         <!-- Delete Transaction Form -->
         <div class="flex items-center justify-between gap-2 p-3">
           <div class="text-sm space-y-1">
-            <h4 class="text-gray-900"><%= t(".delete_title") %></h4>
-            <p class="text-gray-500"><%= t(".delete_subtitle") %></p>
+            <h4 class="text-primary"><%= t(".delete_title") %></h4>
+            <p class="text-secondary"><%= t(".delete_subtitle") %></p>
           </div>
 
           <%= button_to t(".delete"),
                   account_entry_path(@entry),
                   method: :delete,
                   class:  "rounded-lg px-3 py-2 text-red-500 text-sm
-                           font-medium border border-alpha-black-200",
+                           font-medium border border-secondary",
                   data:   { turbo_confirm: true, turbo_frame: "_top" } %>
         </div>
       </div>