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/budgets/_actuals_summary.html.erb

@@ -2,11 +2,11 @@
 
 <div>
   <div class="p-4 border-b border-gray-100">
-    <h3 class="text-sm text-gray-500 mb-2">Income</h3>
+    <h3 class="text-sm text-secondary mb-2">Income</h3>
 
     <% income_totals = budget.income_categories_with_totals %>
     <% income_categories = income_totals.category_totals.reject { |ct| ct.amount_money.zero? }.sort_by { |ct| ct.percentage }.reverse %>
-    <span class="inline-block mb-2 text-xl font-medium text-gray-900">
+    <span class="inline-block mb-2 text-xl font-medium text-primary">
       <%= format_money(income_totals.total_money) %>
     </span>
 
@@ -22,8 +22,8 @@
           <% income_categories.each do |item| %>
             <div class="flex items-center gap-1.5">
               <div class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <%= item.category.color %>"></div>
-              <span class="text-gray-500"><%= item.category.name %></span>
-              <span class="text-gray-900"><%= number_to_percentage(item.percentage, precision: 0) %></span>
+              <span class="text-secondary"><%= item.category.name %></span>
+              <span class="text-primary"><%= number_to_percentage(item.percentage, precision: 0) %></span>
             </div>
           <% end %>
         </div>
@@ -32,12 +32,12 @@
   </div>
 
   <div class="p-4">
-    <h3 class="text-sm text-gray-500 mb-2">Expenses</h3>
+    <h3 class="text-sm text-secondary mb-2">Expenses</h3>
 
     <% expense_totals = budget.expense_categories_with_totals %>
     <% expense_categories = expense_totals.category_totals.reject { |ct| ct.amount_money.zero? || ct.category.subcategory? }.sort_by { |ct| ct.percentage }.reverse %>
 
-    <span class="inline-block mb-2 text-xl font-medium text-gray-900"><%= format_money(expense_totals.total_money) %></span>
+    <span class="inline-block mb-2 text-xl font-medium text-primary"><%= format_money(expense_totals.total_money) %></span>
 
     <% if expense_categories.any? %>
       <div>
@@ -51,8 +51,8 @@
           <% expense_categories.each do |item| %>
             <div class="flex items-center gap-1.5">
               <div class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: <%= item.category.color %>"></div>
-              <span class="text-gray-500"><%= item.category.name %></span>
-              <span class="text-gray-900"><%= number_to_percentage(item.percentage, precision: 0) %></span>
+              <span class="text-secondary"><%= item.category.name %></span>
+              <span class="text-primary"><%= number_to_percentage(item.percentage, precision: 0) %></span>
             </div>
           <% end %>
         </div>

app/views/budgets/_budget_categories.html.erb

@@ -1,9 +1,9 @@
 <%# locals: (budget:) %>
 
 <div>
-  <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
+  <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-secondary uppercase">
     <p>Categories</p>
-    <span class="text-gray-400">&middot;</span>
+    <span class="text-subdued">&middot;</span>
     <p><%= budget.budget_categories.count %></p>
 
     <p class="ml-auto">Amount</p>
@@ -24,7 +24,7 @@
           <div>
             <% group.budget_subcategories.each do |budget_subcategory| %>
               <div class="w-full flex items-center -mt-4">
-                <div class="ml-8 flex items-center justify-center text-gray-400">
+                <div class="ml-8 flex items-center justify-center text-subdued">
                   <%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
                 </div>
 

app/views/budgets/_budget_donut.html.erb

@@ -8,18 +8,18 @@
           <span>Spent</span>
         </div>
 
-        <div class="text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-gray-900" %>">
+        <div class="text-3xl font-medium <%= budget.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
           <%= format_money(budget.actual_spending_money) %>
         </div>
 
         <%= link_to edit_budget_path(budget), class: "btn btn--secondary flex items-center gap-1 mt-2" do %>
-          <span class="text-gray-900 font-medium">
+          <span class="text-primary font-medium">
             of <%= format_money(budget.budgeted_spending_money) %>
           </span>
-          <%= lucide_icon "pencil", class: "w-4 h-4 text-gray-500 hover:text-gray-600" %>
+          <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
         <% end %>
       <% else %>
-        <div class="text-gray-400 text-3xl mb-2">
+        <div class="text-subdued text-3xl mb-2">
           <span><%= format_money Money.new(0, budget.currency || budget.family.currency) %></span>
         </div>
         <%= link_to edit_budget_path(budget), class: "flex items-center gap-2 btn btn--primary" do %>
@@ -34,26 +34,26 @@
         <div class="flex flex-col gap-2 items-center">
           <div class="flex items-center gap-3">
             <div class="w-1 h-3 rounded-xl" style="background-color: <%= bc.category.color %>"></div>
-            <p class="text-sm text-gray-500"><%= bc.category.name %></p>
+            <p class="text-sm text-secondary"><%= bc.category.name %></p>
           </div>
 
-          <p class="text-3xl font-medium <%= bc.available_to_spend.negative? ? "text-red-500" : "text-gray-900" %>">
+          <p class="text-3xl font-medium <%= bc.available_to_spend.negative? ? "text-red-500" : "text-primary" %>">
             <%= format_money(bc.actual_spending_money) %>
           </p>
 
           <%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
             <span>of <%= format_money(bc.budgeted_spending_money, precision: 0) %></span>
 
-            <%= lucide_icon "pencil", class: "w-4 h-4 text-gray-500 shrink-0" %>
+            <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary shrink-0" %>
           <% end %>
         </div>
       </div>
     <% end %>
 
     <div id="segment_unused" class="hidden">
-      <p class="text-sm text-gray-500 text-center mb-2">Unused</p>
+      <p class="text-sm text-secondary text-center mb-2">Unused</p>
 
-      <p class="text-3xl font-medium text-gray-900">
+      <p class="text-3xl font-medium text-primary">
         <%= format_money(budget.available_to_spend_money) %>
       </p>
     </div>

app/views/budgets/_budget_header.html.erb

@@ -7,7 +7,7 @@
         <%= lucide_icon "chevron-left" %>
       <% end %>
     <% else %>
-      <%= lucide_icon "chevron-left", class: "text-gray-400" %>
+      <%= lucide_icon "chevron-left", class: "text-subdued" %>
     <% end %>
 
     <% if @next_budget %>
@@ -15,14 +15,14 @@
         <%= lucide_icon "chevron-right" %>
       <% end %>
     <% else %>
-      <%= lucide_icon "chevron-right", class: "text-gray-400" %>
+      <%= lucide_icon "chevron-right", class: "text-subdued" %>
     <% end %>
   </div>
 
   <div data-controller="menu" data-menu-placement-value="bottom-start">
     <%= tag.button data: { menu_target: "button" }, class: "flex items-center gap-1 hover:bg-gray-50 rounded-md p-2" do %>
-      <span class="text-gray-900 font-medium"><%= @budget.name %></span>
-      <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-gray-500" %>
+      <span class="text-primary font-medium"><%= @budget.name %></span>
+      <%= lucide_icon "chevron-down", class: "w-5 h-5 shrink-0 text-secondary" %>
     <% end %>
 
     <div data-menu-target="content" class="hidden z-10">
@@ -32,7 +32,7 @@
 
   <div class="ml-auto">
     <% if @budget.current? %>
-      <span class="border border-alpha-black-200 text-gray-900 text-sm font-medium px-3 py-2 rounded-lg">Today</span>
+      <span class="border border-secondary text-primary text-sm font-medium px-3 py-2 rounded-lg">Today</span>
     <% else %>
       <%= link_to "Today", budget_path(@latest_budget), class: "btn btn--outline" %>
     <% end %>

app/views/budgets/_budget_nav.html.erb

@@ -11,9 +11,9 @@
       <% is_current = request.path == step[:path] %>
 
       <% text_class = if is_current
-                  "text-gray-900"
+                  "text-primary"
                 else
-                  step[:is_complete] ? "text-green-600" : "text-gray-500"
+                  step[:is_complete] ? "text-green-600" : "text-secondary"
                 end %>
       <% step_class = if is_current
                   "bg-gray-900 text-white"

app/views/budgets/_budgeted_summary.html.erb

@@ -2,9 +2,9 @@
 
 <div>
   <div class="p-4 border-b border-gray-100">
-    <h3 class="text-sm text-gray-500 mb-2">Expected income</h3>
+    <h3 class="text-sm text-secondary mb-2">Expected income</h3>
 
-    <span class="inline-block mb-2 text-xl font-medium text-gray-900">
+    <span class="inline-block mb-2 text-xl font-medium text-primary">
       <%= format_money(budget.expected_income_money) %>
     </span>
 
@@ -19,12 +19,12 @@
         <% end %>
       </div>
       <div class="flex justify-between text-sm">
-        <p class="text-gray-500"><%= format_money(budget.actual_income_money) %> earned</p>
+        <p class="text-secondary"><%= format_money(budget.actual_income_money) %> earned</p>
         <p class="font-medium">
           <% if budget.remaining_expected_income.negative? %>
             <span class="text-green-500"><%= format_money(budget.remaining_expected_income_money.abs) %> over</span>
           <% else %>
-            <span class="text-gray-900"><%= format_money(budget.remaining_expected_income_money) %> left</span>
+            <span class="text-primary"><%= format_money(budget.remaining_expected_income_money) %> left</span>
           <% end %>
         </p>
       </div>
@@ -32,9 +32,9 @@
   </div>
 
   <div class="p-4">
-    <h3 class="text-sm text-gray-500 mb-2">Budgeted</h3>
+    <h3 class="text-sm text-secondary mb-2">Budgeted</h3>
 
-    <span class="inline-block mb-2 text-xl font-medium text-gray-900">
+    <span class="inline-block mb-2 text-xl font-medium text-primary">
       <%= format_money(budget.budgeted_spending_money) %>
     </span>
 
@@ -49,12 +49,12 @@
         <% end %>
       </div>
       <div class="flex justify-between text-sm">
-        <p class="text-gray-500"><%= format_money(budget.actual_spending_money) %> spent</p>
+        <p class="text-secondary"><%= format_money(budget.actual_spending_money) %> spent</p>
         <p class="font-medium">
           <% if budget.available_to_spend.negative? %>
             <span class="text-red-500"><%= format_money(budget.available_to_spend_money.abs) %> over</span>
           <% else %>
-            <span class="text-gray-900"><%= format_money(budget.available_to_spend_money) %> left</span>
+            <span class="text-primary"><%= format_money(budget.available_to_spend_money) %> left</span>
           <% end %>
         </p>
       </div>

app/views/budgets/_over_allocation_warning.html.erb

@@ -2,12 +2,12 @@
 
 <div class="flex flex-col gap-4 items-center justify-center h-full">
   <%= lucide_icon "alert-triangle", class: "w-6 h-6 text-red-500" %>
-  <p class="text-gray-500 text-sm text-center">You have over-allocated your budget.  Please fix your allocations.</p>
+  <p class="text-secondary text-sm text-center">You have over-allocated your budget.  Please fix your allocations.</p>
 
   <%= link_to budget_budget_categories_path(budget), class: "btn btn--secondary flex items-center gap-1" do %>
-    <span class="text-gray-900 font-medium">
+    <span class="text-primary font-medium">
       Fix allocations
     </span>
-    <%= lucide_icon "pencil", class: "w-4 h-4 text-gray-500 hover:text-gray-600" %>
+    <%= lucide_icon "pencil", class: "w-4 h-4 text-secondary hover:text-gray-600" %>
   <% end %>
 </div>

app/views/budgets/_picker.html.erb

@@ -5,25 +5,25 @@
     <div class="flex items-center gap-2 justify-between">
       <% if year > family.oldest_entry_date.year %>
         <%= link_to picker_budgets_path(year: year - 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
-          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-gray-500" %>
+          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-secondary" %>
         <% end %>
       <% else %>
         <span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
-          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-gray-400" %>
+          <%= lucide_icon "chevron-left", class: "w-5 h-5 shrink-0 text-subdued" %>
         </span>
       <% end %>
 
-      <span class="w-40 text-center px-3 py-2 border border-alpha-black-100 rounded-md" data-budget-picker-target="year">
+      <span class="w-40 text-center px-3 py-2 border border-tertiary rounded-md" data-budget-picker-target="year">
         <%= year %>
       </span>
 
       <% if year < Date.current.year %>
         <%= link_to picker_budgets_path(year: year + 1), data: { turbo_frame: "budget_picker" }, class: "p-2 flex items-center justify-center hover:bg-alpha-black-25 rounded-md" do %>
-          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-gray-500" %>
+          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-secondary" %>
         <% end %>
       <% else %>
         <span class="p-2 flex items-center justify-center text-gray-300 rounded-md">
-          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-gray-400" %>
+          <%= lucide_icon "chevron-right", class: "w-5 h-5 shrink-0 text-subdued" %>
         </span>
       <% end %>
     </div>
@@ -35,13 +35,13 @@
         <% budget = family.budgets.for_date(start_date) %>
 
         <% if budget %>
-          <%= link_to month_name, budget_path(budget), data: { turbo_frame: "_top" }, class: "block px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 rounded-md" %>
+          <%= link_to month_name, budget_path(budget), data: { turbo_frame: "_top" }, class: "block px-3 py-2 text-sm text-primary hover:bg-gray-100 rounded-md" %>
         <% elsif start_date >= family.oldest_entry_date.beginning_of_month && start_date <= Date.current %>
-          <%= button_to budgets_path(budget: { start_date: start_date }), data: { turbo_frame: "_top" }, class: "block w-full px-3 py-2 text-gray-900 hover:bg-gray-100 rounded-md" do %>
+          <%= button_to budgets_path(budget: { start_date: start_date }), data: { turbo_frame: "_top" }, class: "block w-full px-3 py-2 text-primary hover:bg-gray-100 rounded-md" do %>
             <%= month_name %>
           <% end %>
         <% else %>
-          <span class="px-3 py-2 text-gray-400 rounded-md"><%= month_name %></span>
+          <span class="px-3 py-2 text-subdued rounded-md"><%= month_name %></span>
         <% end %>
       <% end %>
     </div>

app/views/budgets/edit.html.erb

@@ -8,8 +8,8 @@
 <div>
   <div class="space-y-4">
     <div class="text-center space-y-2">
-      <h1 class="text-3xl text-gray-900 font-medium">Setup your budget</h1>
-      <p class="text-gray-500 text-sm max-w-sm mx-auto">
+      <h1 class="text-3xl text-primary font-medium">Setup your budget</h1>
+      <p class="text-secondary text-sm max-w-sm mx-auto">
         Enter your monthly earnings and planned spending below to setup your budget.
       </p>
     </div>
@@ -20,11 +20,11 @@
         <%= f.money_field :expected_income, label: "Expected income", required: true, disable_currency: true %>
 
         <% if @budget.estimated_income && @budget.estimated_spending %>
-          <div class="border border-alpha-black-100 rounded-lg p-3 flex">
-            <%= lucide_icon "sparkles", class: "w-5 h-5 text-gray-500 shrink-0" %>
+          <div class="border border-tertiary rounded-lg p-3 flex">
+            <%= lucide_icon "sparkles", class: "w-5 h-5 text-secondary shrink-0" %>
             <div class="ml-2 space-y-1 text-sm">
-              <h4 class="text-gray-900">Autosuggest income & spending budget</h4>
-              <p class="text-gray-500">
+              <h4 class="text-primary">Autosuggest income & spending budget</h4>
+              <p class="text-secondary">
                 This will be based on transaction history. AI can make mistakes, verify before continuing.
               </p>
             </div>
@@ -35,7 +35,7 @@
                   budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
                   budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
                 } %>
-              <label for="auto_fill" class="maybe-switch"></label>
+              <label for="auto_fill" class="switch"></label>
             </div>
           </div>
         <% end %>

app/views/budgets/show.html.erb

@@ -25,16 +25,16 @@
                         budget_path(@budget, tab: "budgeted"),
                         class: class_names(
                           base_classes,
-                          "bg-white shadow-xs text-gray-900": selected_tab == "budgeted",
-                          "text-gray-500": selected_tab != "budgeted"
+                          "bg-white shadow-xs text-primary": selected_tab == "budgeted",
+                          "text-secondary": selected_tab != "budgeted"
                         ) %>
 
             <%= link_to "Actual",
                         budget_path(@budget, tab: "actuals"),
                         class: class_names(
                           base_classes,
-                          "bg-white shadow-xs text-gray-900": selected_tab == "actuals",
-                          "text-gray-500": selected_tab != "actuals"
+                          "bg-white shadow-xs text-primary": selected_tab == "actuals",
+                          "text-secondary": selected_tab != "actuals"
                         ) %>
           </div>