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/settings/hostings/_invite_code_settings.html.erb

@@ -2,13 +2,13 @@
   <div class="flex items-center justify-between">
     <div class="space-y-1">
       <p class="text-sm"><%= t(".title") %></p>
-      <p class="text-gray-500 text-sm"><%= t(".description") %></p>
+      <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
     <%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
       <div class="relative inline-block select-none">
         <%= form.check_box :require_invite_for_signup, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input", disabled: !Current.user.admin? %>
-        <%= form.label :require_invite_for_signup, "&nbsp;".html_safe, class: "maybe-switch" %>
+        <%= form.label :require_invite_for_signup, "&nbsp;".html_safe, class: "switch" %>
       </div>
     <% end %>
   </div>
@@ -16,13 +16,13 @@
   <div class="flex items-center justify-between">
     <div class="space-y-1">
       <p class="text-sm"><%= t(".email_confirmation_title") %></p>
-      <p class="text-gray-500 text-sm"><%= t(".email_confirmation_description") %></p>
+      <p class="text-secondary text-sm"><%= t(".email_confirmation_description") %></p>
     </div>
 
     <%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
       <div class="relative inline-block select-none">
         <%= form.check_box :require_email_confirmation, class: "sr-only peer", "data-auto-submit-form-target": "auto", "data-autosubmit-trigger-event": "input", disabled: !Current.user.admin? %>
-        <%= form.label :require_email_confirmation, "&nbsp;".html_safe, class: "maybe-switch" %>
+        <%= form.label :require_email_confirmation, "&nbsp;".html_safe, class: "switch" %>
       </div>
     <% end %>
   </div>
@@ -30,12 +30,12 @@
   <% if Setting.require_invite_for_signup %>
     <div class="flex items-center justify-between mb-4">
       <div>
-        <span class="text-gray-900 text-base font-medium"><%= t(".generated_tokens") %></span>
+        <span class="text-primary text-base font-medium"><%= t(".generated_tokens") %></span>
       </div>
       <div>
         <%= button_to invite_codes_path,
                         method: :post,
-                        class: "flex gap-1 bg-gray-50 text-gray-900 text-sm rounded-lg px-3 py-2" do %>
+                        class: "flex gap-1 bg-gray-50 text-primary text-sm rounded-lg px-3 py-2" do %>
           <span><%= t(".generate_tokens") %></span>
         <% end %>
       </div>

app/views/settings/hostings/_provider_settings.html.erb

@@ -2,7 +2,7 @@
   <%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
     <div class="space-y-4">
       <h2 class="font-medium mb-1"><%= t(".title") %></h2>
-      <p class="text-gray-500 text-sm mb-4"><%= t(".description") %></p>
+      <p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
       <%= form.url_field :render_deploy_hook, label: t(".render_deploy_hook_label"), placeholder: t(".render_deploy_hook_placeholder"), value: Setting.render_deploy_hook, data: { "auto-submit-form-target" => "auto" } %>
     </div>
   <% end %>

app/views/settings/hostings/_synth_settings.html.erb

@@ -1,7 +1,7 @@
 <div class="space-y-4">
   <div>
     <h2 class="font-medium mb-1"><%= t(".title") %></h2>
-    <p class="text-gray-500 text-sm mb-4"><%= t(".description") %></p>
+    <p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
   </div>
 
   <%= styled_form_with model: Setting.new,
@@ -23,7 +23,7 @@
   <% if @synth_usage.present? && @synth_usage.success? %>
     <div class="space-y-4">
       <div class="space-y-2">
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-secondary">
           <%= t(".api_calls_used",
                 used: number_with_delimiter(@synth_usage.used),
                 limit: number_with_delimiter(@synth_usage.limit),
@@ -35,7 +35,7 @@
         </div>
       </div>
       <div class="bg-gray-100 rounded-md px-1.5 py-0.5 w-fit">
-        <p class="text-xs font-medium text-gray-500 uppercase">
+        <p class="text-xs font-medium text-secondary uppercase">
           <%= t(".plan", plan: @synth_usage.plan) %>
         </p>
       </div>

app/views/settings/hostings/_upgrade_settings.html.erb

@@ -1,36 +1,36 @@
 <% if ENV["HOSTING_PLATFORM"] == "render" %>
   <div>
     <h2 class="font-medium mb-1"><%= t(".title") %></h2>
-    <p class="text-gray-500 text-sm mb-4"><%= t(".description") %></p>
+    <p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
 
     <%= styled_form_with model: Setting.new, url: settings_hosting_path, method: :patch, data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
       <div class="space-y-4">
         <div class="flex items-center gap-4">
           <%= form.radio_button :upgrades_setting, "manual", checked: Setting.upgrades_mode == "manual", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
-          <%= form.label :upgrades_mode_manual, t(".manual_title"), class: "text-gray-900 text-sm" do %>
+          <%= form.label :upgrades_mode_manual, t(".manual_title"), class: "text-primary text-sm" do %>
             <span class="font-medium"><%= t(".manual_title") %></span>
             <br>
-            <span class="text-gray-500">
+            <span class="text-secondary">
               <%= t(".manual_description") %>
             </span>
           <% end %>
         </div>
         <div class="flex items-center gap-4">
           <%= form.radio_button :upgrades_setting, "release", checked: Setting.upgrades_mode == "auto" && Setting.upgrades_target == "release", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
-          <%= form.label :upgrades_mode_release, t(".latest_release_title"), class: "text-gray-900 text-sm" do %>
+          <%= form.label :upgrades_mode_release, t(".latest_release_title"), class: "text-primary text-sm" do %>
             <span class="font-medium"><%= t(".latest_release_title") %></span>
             <br>
-            <span class="text-gray-500">
+            <span class="text-secondary">
               <%= t(".latest_release_description") %>
             </span>
           <% end %>
         </div>
         <div class="flex items-center gap-4">
           <%= form.radio_button :upgrades_setting, "commit", checked: Setting.upgrades_mode == "auto" && Setting.upgrades_target == "commit", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
-          <%= form.label :upgrades_mode_commit, t(".latest_commit_title"), class: "text-gray-900 text-sm" do %>
+          <%= form.label :upgrades_mode_commit, t(".latest_commit_title"), class: "text-primary text-sm" do %>
             <span class="font-medium"><%= t(".latest_commit_title") %></span>
             <br>
-            <span class="text-gray-500">
+            <span class="text-secondary">
               <%= t(".latest_commit_description") %>
             </span>
           <% end %>

app/views/settings/hostings/show.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <div class="space-y-4 pb-32">
-  <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".title") %></h1>
+  <h1 class="text-primary text-xl font-medium mb-4"><%= t(".title") %></h1>
 
   <%= settings_section title: t(".general") do %>
     <div class="space-y-6">