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/helpers/accounts_helper.rb

@@ -76,12 +76,12 @@ module AccountsHelper
       {
         "CreditCard" => { text: "text-red-500", bg: "bg-red-500", bg_transparent: "bg-red-500/10", fill: "fill-red-500", hex: "#F13636" },
         "Loan" => { text: "text-fuchsia-500", bg: "bg-fuchsia-500", bg_transparent: "bg-fuchsia-500/10", fill: "fill-fuchsia-500", hex: "#D444F1" },
-        "OtherLiability" => { text: "text-gray-500", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500", hex: "#737373" },
+        "OtherLiability" => { text: "text-secondary", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500", hex: "#737373" },
         "Depository" => { text: "text-violet-500", bg: "bg-violet-500", bg_transparent: "bg-violet-500/10", fill: "fill-violet-500", hex: "#875BF7" },
         "Investment" => { text: "text-blue-600", bg: "bg-blue-600", bg_transparent: "bg-blue-600/10", fill: "fill-blue-600", hex: "#1570EF" },
         "OtherAsset" => { text: "text-green-500", bg: "bg-green-500", bg_transparent: "bg-green-500/10", fill: "fill-green-500", hex: "#12B76A" },
         "Property" => { text: "text-cyan-500", bg: "bg-cyan-500", bg_transparent: "bg-cyan-500/10", fill: "fill-cyan-500", hex: "#06AED4" },
         "Vehicle" => { text: "text-pink-500", bg: "bg-pink-500", bg_transparent: "bg-pink-500/10", fill: "fill-pink-500", hex: "#F23E94" }
-      }.fetch(accountable_type, { text: "text-gray-500", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500", hex: "#737373" })
+      }.fetch(accountable_type, { text: "text-secondary", bg: "bg-gray-500", bg_transparent: "bg-gray-500/10", fill: "fill-gray-500", hex: "#737373" })
     end
 end

app/helpers/application_helper.rb

@@ -76,8 +76,8 @@ module ApplicationHelper
     is_current = current_page?(path) || (request.path.start_with?(path) && path != "/")
 
     classes = [
-      "flex items-center gap-2 px-3 py-2 rounded-xl border text-sm font-medium text-gray-500",
-      (is_current ? "bg-white text-gray-900 shadow-xs border-alpha-black-50" : "hover:bg-gray-100 border-transparent")
+      "flex items-center gap-2 px-3 py-2 rounded-xl border text-sm font-medium text-secondary",
+      (is_current ? "bg-white text-primary shadow-xs border-alpha-black-50" : "hover:bg-gray-100 border-transparent")
     ].compact.join(" ")
 
     link_to path, **options.merge(class: classes), aria: { current: ("page" if current_page?(path)) } do
@@ -106,7 +106,7 @@ module ApplicationHelper
   end
 
   def trend_styles(trend)
-    fallback = { bg_class: "bg-gray-500/5", text_class: "text-gray-500", symbol: "", icon: "minus" }
+    fallback = { bg_class: "bg-gray-500/5", text_class: "text-secondary", symbol: "", icon: "minus" }
     return fallback if trend.nil? || trend.direction.flat?
 
     bg_class, text_class, symbol, icon = case trend.direction
@@ -115,7 +115,7 @@ module ApplicationHelper
     when "down"
       trend.favorable_direction.down? ? [ "bg-green-500/5", "text-green-500", "-", "arrow-down" ] : [ "bg-red-500/5", "text-red-500", "-", "arrow-down" ]
     when "flat"
-      [ "bg-gray-500/5", "text-gray-500", "", "minus" ]
+      [ "bg-gray-500/5", "text-secondary", "", "minus" ]
     else
       raise ArgumentError, "Invalid trend direction: #{trend.direction}"
     end

app/helpers/forms_helper.rb

@@ -17,7 +17,7 @@ module FormsHelper
     end
   end
 
-  def period_select(form:, selected:, classes: "border border-alpha-black-100 shadow-xs rounded-lg text-sm pr-7 cursor-pointer text-gray-900 focus:outline-hidden focus:ring-0")
+  def period_select(form:, selected:, classes: "border border-tertiary shadow-xs rounded-lg text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0")
     periods_for_select = [
       %w[CWD current_week], # Current Week to Date
       %w[7D last_7_days],
@@ -39,7 +39,7 @@ end
 
   private
     def radio_tab_contents(label:, icon:)
-      tag.div(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
+      tag.div(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
         concat lucide_icon(icon, class: "w-5 h-5")
         concat tag.span(label, class: "group-has-checked:font-semibold")
       end

app/helpers/imports_helper.rb

@@ -45,7 +45,7 @@ module ImportsHelper
   end
 
   def cell_class(row, field)
-    base = "text-sm focus:ring-gray-900 focus:border-gray-900 w-full max-w-full disabled:text-gray-400"
+    base = "text-sm focus:ring-gray-900 focus:border-gray-900 w-full max-w-full disabled:text-subdued"
 
     row.valid? # populate errors
 

app/helpers/menus_helper.rb

@@ -7,8 +7,8 @@ module MenusHelper
   end
 
   def contextual_menu_modal_action_item(label, url, icon: "pencil-line", turbo_frame: :modal)
-    link_to url, class: "flex items-center rounded-lg text-gray-900 hover:bg-gray-50 py-2 px-3 gap-2", data: { turbo_frame: } do
-      concat(lucide_icon(icon, class: "shrink-0 w-5 h-5 text-gray-500"))
+    link_to url, class: "flex items-center rounded-lg text-primary hover:bg-gray-50 py-2 px-3 gap-2", data: { turbo_frame: } do
+      concat(lucide_icon(icon, class: "shrink-0 w-5 h-5 text-secondary"))
       concat(tag.span(label, class: "text-sm"))
     end
   end
@@ -26,7 +26,7 @@ module MenusHelper
   private
     def contextual_menu_icon
       tag.button class: "flex hover:bg-gray-100 p-2 rounded cursor-pointer", data: { menu_target: "button" } do
-        lucide_icon "more-horizontal", class: "w-5 h-5 text-gray-500"
+        lucide_icon "more-horizontal", class: "w-5 h-5 text-secondary"
       end
     end