Merge pull request #5550 from solidusio/elia/admin/font-classes

[admin] Cleanup TW classes
solidusio · Dec 13, 2023 · a0f70db · a0f70db
2 parents 2dfb06e + adbc203
commit a0f70db
Show file tree

Hide file tree

Showing 30 changed files with 93 additions and 116 deletions.
diff --git a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
@@ -2,49 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  summary {
-    &::marker,
-    &::-webkit-details-marker {
-      @apply hidden;
-    }
-
-    list-style: none;
-  }
-}
-
-@layer components {
-  .body-tiny {
-    @apply font-sans font-normal text-xs;
-  }
-
-  .body-tiny-bold {
-    @apply font-sans font-semibold text-xs;
-  }
-
-  .body-small {
-    @apply font-sans font-normal text-sm;
-  }
-
-  .body-small-bold {
-    @apply font-sans font-semibold text-sm;
-  }
-
-  .body-text {
-    @apply font-sans font-normal text-base;
-  }
-
-  .body-text-bold {
-    @apply font-sans font-semibold text-base;
-  }
-
-  .body-title {
-    @apply font-sans font-semibold text-xl;
-  }
-
-  .body-link {
-    @apply text-blue hover:underline;
-  }
-}
-
 <%= SolidusAdmin::Config.tailwind_stylesheets.map { File.read(_1) }.join("\n") %>
diff --git a/admin/app/components/solidus_admin/layout/feedback/component.html.erb b/admin/app/components/solidus_admin/layout/feedback/component.html.erb
@@ -9,7 +9,7 @@
     <span class="underline"><%= t(".give_feedback") %></span>
   </span>
 
-  <span class="body-small text-center">
+  <span class="font-normal text-sm text-center">
     <%= t(".feedback_description_html") %>
   </span>
 <% end %>
diff --git a/admin/app/components/solidus_admin/layout/navigation/account/component.html.erb b/admin/app/components/solidus_admin/layout/navigation/account/component.html.erb
@@ -9,11 +9,11 @@
     class="
       flex gap-1.5
       p-3 mt-2 rounded
-      body-small-bold text-gray-500
+      font-semibold text-sm text-gray-500
       hover:bg-gray-25 [[open]_>_&]:bg-gray-25
       cursor-pointer
     ">
-    <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] body-small fill-yellow bg-black") %>
+    <%= icon_tag("user-smile-fill", class: "inline-block align-text-bottom shrink-0 w-6 h-6 rounded-[4.81rem] font-normal text-sm fill-yellow bg-black") %>
     <span class="overflow-hidden whitespace-nowrap text-ellipsis leading-6">
       <%= @user_label %>
     </span>
@@ -22,7 +22,7 @@
   <ul
     class="
       p-2 mb-1 absolute bottom-full left-0 w-full
-      body-small text-black bg-white
+      font-normal text-sm text-black bg-white
       border border-gray-100 rounded-lg
       shadow-base
     ">

diff --git a/admin/app/components/solidus_admin/layout/navigation/component.html.erb b/admin/app/components/solidus_admin/layout/navigation/component.html.erb
@@ -10,8 +10,8 @@
 
   <%= link_to @store_url, target: :_blank, class: "flex mb-4 px-2 py-1.5 border border-gray-100 rounded-sm shadow-sm" do %>
     <div class="flex-grow flex flex-col gap-0.5">
-      <p class="body-small-bold text-black"><%= @store.name %></p>
-      <p class="body-tiny text-gray-500"><%= @store.url %></p>
+      <p class="font-semibold text-sm text-black"><%= @store.name %></p>
+      <p class="font-normal text-xs text-gray-500"><%= @store.url %></p>
     </div>
     <%= render component("ui/icon").new(name: 'arrow-right-up-line', class: 'w-4 h-4 fill-gray-400') %>
   <% end %>
@@ -22,7 +22,7 @@
 
   <div class="mt-auto">
     <div class="group mb-3">
-      <label class="flex gap-3 items-center py-0.5 px-3 pb-0.5 rounded hover:text-red-500 hover:bg-gray-50 body-small-bold text-black cursor-pointer">
+      <label class="flex gap-3 items-center py-0.5 px-3 pb-0.5 rounded hover:text-red-500 hover:bg-gray-50 font-semibold text-sm text-black cursor-pointer">
         <%= t('spree.navigation.switch_to_legacy') %>
         <div class="flex items-center">
           <%= render component("ui/forms/switch").new(size: :s, checked: false, 'data-action': "#{stimulus_id}#setCookie:prevent") %>

diff --git a/admin/app/components/solidus_admin/layout/navigation/item/component.html.erb b/admin/app/components/solidus_admin/layout/navigation/item/component.html.erb
@@ -7,10 +7,10 @@
       py-1 px-3 rounded
       hover:text-red-500 hover:bg-gray-50
       <%= "text-red-500 bg-gray-50" if active? %>
-      <%= @item.top_level ? "body-small-bold text-black" : "body-small text-gray-600" %>
+      <%= @item.top_level ? "font-semibold text-sm text-black" : "font-normal text-sm text-gray-600" %>
     "
   >
-    <i class="w-[1.125rem] h-[1.125rem] body-small flex">
+    <i class="w-[1.125rem] h-[1.125rem] font-normal text-sm flex">
       <% if @item.icon %>
         <%= icon_tag(@item.icon, class: "inline-block w-full h-full fill-current") %>
       <% end %>

diff --git a/admin/app/components/solidus_admin/layout/page_helpers.rb b/admin/app/components/solidus_admin/layout/page_helpers.rb
@@ -24,7 +24,7 @@ def page_header_back(back_path)
 
   def page_header_title(title, &block)
     tag.h1(safe_join([
-      tag.span(title, class: "body-title"),
+      tag.span(title, class: "font-semibold text-xl"),
       (capture(&block) if block_given?) || "",
     ]), class: "flex-1 text-2xl font-bold")
   end

diff --git a/admin/app/components/solidus_admin/layout/skip_link/component.rb b/admin/app/components/solidus_admin/layout/skip_link/component.rb
@@ -16,7 +16,7 @@ def call
               inline-block
               focus:p-2
               focus:absolute
-              body-small
+              font-normal text-sm
               text-white
               bg-black
             }

diff --git a/admin/app/components/solidus_admin/orders/cart/component.html.erb b/admin/app/components/solidus_admin/orders/cart/component.html.erb
@@ -20,10 +20,10 @@
         <table class="table-auto w-full" <%= :hidden if @order.line_items.empty? %>>
           <thead>
             <tr>
-              <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
-              <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
-              <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
-              <th class="text-left body-small-bold text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none">Product</th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Quantity</th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16">Price</th>
+              <th class="text-left font-semibold text-sm text-gray-800 bg-gray-15 px-6 py-3 leading-none w-16"><span class="sr-only">Actions</span></th>
             </tr>
           </thead>
           <tbody>
@@ -53,7 +53,7 @@
                   <% end %>
                 </td>
                 <td class="px-6 py-4">
-                  <span class="text-gray-500 body-small"><%= line_item.single_money.to_html %></span>
+                  <span class="text-gray-500 font-normal text-sm"><%= line_item.single_money.to_html %></span>
                 </td>
                 <td class="px-6 py-4 text-right">
                   <%= form_for(line_item, url: solidus_admin.order_line_item_path(@order, line_item), method: :delete) do |f| %>

diff --git a/admin/app/components/solidus_admin/orders/cart/result/component.html.erb b/admin/app/components/solidus_admin/orders/cart/result/component.html.erb
@@ -10,17 +10,17 @@
         alt: @variant.name
       ) %>
       <div class="flex-col">
-        <div class="leading-5 text-black body-small-bold"><%= @variant.name %></div>
-        <div class="leading-5 text-gray-500 body-small">
+        <div class="leading-5 text-black font-semibold text-sm"><%= @variant.name %></div>
+        <div class="leading-5 text-gray-500 font-normal text-sm">
           SKU:
           <%= @variant.sku %>
           <%= @variant.options_text.presence&.prepend("- ") %>
         </div>
       </div>
     </div>
     <div class="flex gap-2 items-center">
-      <span class="text-gray-500 body-small"><%= render component("products/stock").from_variant(@variant) %></span>
-      <span class="text-black body-small"><%= @variant.display_price.to_html %></span>
+      <span class="text-gray-500 font-normal text-sm"><%= render component("products/stock").from_variant(@variant) %></span>
+      <span class="text-black font-normal text-sm"><%= @variant.display_price.to_html %></span>
     </div>
   <% end %>
 <% end %>
diff --git a/admin/app/components/solidus_admin/orders/index/component.html.erb b/admin/app/components/solidus_admin/orders/index/component.html.erb
@@ -1,6 +1,6 @@
 <div class="<%= stimulus_id %> px-4">
   <header class="py-6 flex items-center">
-    <h1 class="body-title">
+    <h1 class="font-semibold text-xl">
       <%= title %>
     </h1>
 

diff --git a/admin/app/components/solidus_admin/orders/show/address/component.html.erb b/admin/app/components/solidus_admin/orders/show/address/component.html.erb
@@ -42,7 +42,7 @@
             value: '1'
           ) %>
 
-          <span class="body-text-sm">
+          <span class="font-normal text-xs">
             <%= t(".use_this_address.#{@type}") %>
           </span>
         </label>

diff --git a/admin/app/components/solidus_admin/orders/show/component.html.erb b/admin/app/components/solidus_admin/orders/show/component.html.erb
@@ -23,19 +23,19 @@
 
         <% panel.with_section(class: 'flex flex-col gap-6') do %>
           <div class="flex flex-col gap-2">
-            <span class="body-small-bold"><%= t(".customer") %></span>
+            <span class="font-semibold text-sm"><%= t(".customer") %></span>
             <% if @order.user %>
-              <div class="body-small"><%= customer_name(@order.user) || tag.span(t('.no_name'), class: "text-gray-500") %></div>
-              <div class="body-small body-link"><%= link_to @order.user.email, spree.admin_user_path(@order.user) %></div>
-              <div class="body-small text-gray-500"><%= t(".orders_count", count: @order.user.orders.complete.count) %></div>
+              <div class="font-normal text-sm"><%= customer_name(@order.user) || tag.span(t('.no_name'), class: "text-gray-500") %></div>
+              <div class="font-normal text-sm body-link"><%= link_to @order.user.email, spree.admin_user_path(@order.user) %></div>
+              <div class="font-normal text-sm text-gray-500"><%= t(".orders_count", count: @order.user.orders.complete.count) %></div>
             <% else %>
               <%= render component('orders/show/customer_search').new(order: @order) %>
             <% end %>
           </div>
 
           <div class="flex flex-col gap-2">
-            <span class="body-small-bold"><%= t('.order_email') %></span>
-            <div class="body-small">
+            <span class="font-semibold text-sm"><%= t('.order_email') %></span>
+            <div class="font-normal text-sm">
               <% if @order.email? %>
                 <%= @order.email %>
               <% else %>
@@ -45,8 +45,8 @@
           </div>
 
           <div class="flex flex-col gap-2">
-            <span class="body-small-bold"><%= @order.class.human_attribute_name(:ship_address) %></span>
-            <div class="body-small">
+            <span class="font-semibold text-sm"><%= @order.class.human_attribute_name(:ship_address) %></span>
+            <div class="font-normal text-sm">
               <% if @order.ship_address %>
                 <%= format_address @order.ship_address %>
               <% else %>
@@ -56,8 +56,8 @@
           </div>
 
           <div class="flex flex-col gap-2">
-            <span class="body-small-bold"><%= @order.class.human_attribute_name(:bill_address) %></span>
-            <div class="body-small">
+            <span class="font-semibold text-sm"><%= @order.class.human_attribute_name(:bill_address) %></span>
+            <div class="font-normal text-sm">
               <% if @order.bill_address.blank? %>
                 <%= link_to t(".add_billing"), solidus_admin.edit_order_bill_address_path(@order), class: 'body-link' %>
               <% elsif @order.bill_address == @order.ship_address %>

diff --git a/admin/app/components/solidus_admin/orders/show/customer_search/result/component.html.erb b/admin/app/components/solidus_admin/orders/show/customer_search/result/component.html.erb
@@ -8,8 +8,8 @@
       <button type="submit" class="flex gap-2 grow items-center">
         <%= render component("ui/icon").new(name: "user-line", class: 'w-5 h-5 m-2') %>
         <div  class="flex-col text-left">
-          <div class="leading-5 text-black body-small-bold"><%= @name %></div>
-          <div class="leading-5 text-gray-500 body-small"><%= @customer.email %></div>
+          <div class="leading-5 text-black font-semibold text-sm"><%= @name %></div>
+          <div class="leading-5 text-gray-500 font-normal text-sm"><%= @customer.email %></div>
         </div>
       </button>
     <% end %>

diff --git a/admin/app/components/solidus_admin/orders/show/email/component.html.erb b/admin/app/components/solidus_admin/orders/show/email/component.html.erb
@@ -3,9 +3,9 @@
   <%= render component("ui/modal").new(title: t(".title"), close_path: close_path) do |modal| %>
     <%= form_for @order, url: close_path, html: { id: form_id} do |f| %>
       <%= render component("ui/forms/field").text_field(f, :email) %>
-      <label class="body-small mt-4 block">
+      <label class="font-normal text-sm mt-4 block">
         <%= t('.guest_checkout') %>:
-        <output class="body-small-bold"><%= @order.user ? t('.no') : t('.yes') %></output>
+        <output class="font-semibold text-sm"><%= @order.user ? t('.no') : t('.yes') %></output>
         <%= render component('ui/toggletip').new(text: t('.guest_checkout_tip'), class: "align-middle") %>
       </label>
     <% end %>

diff --git a/admin/app/components/solidus_admin/products/show/component.html.erb b/admin/app/components/solidus_admin/products/show/component.html.erb
@@ -108,7 +108,7 @@
               name: "#{f.object_name}[promotionable]",
               checked: f.object.promotionable
             ) %>
-            <span class="body-text-sm"><%= Spree::Product.human_attribute_name :promotionable %></span>
+            <span class="font-normal text-xs"><%= Spree::Product.human_attribute_name :promotionable %></span>
             <%= render component("ui/toggletip").new(text: t(".hints.promotionable_html")) %>
           </label>
         <% end %>

diff --git a/admin/app/components/solidus_admin/refunds_and_returns/component.html.erb b/admin/app/components/solidus_admin/refunds_and_returns/component.html.erb
@@ -2,7 +2,7 @@
   <%= page_header do %>
     <%= page_header_title safe_join([
       tag.div(t(".title")),
-      tag.div(t(".subtitle"), class: "body-small text-gray-500"),
+      tag.div(t(".subtitle"), class: "font-normal text-sm text-gray-500"),
     ]) %>
   <% end %>
   <%= page_header do %>

diff --git a/admin/app/components/solidus_admin/shipping/component.html.erb b/admin/app/components/solidus_admin/shipping/component.html.erb
@@ -2,7 +2,7 @@
   <%= page_header do %>
     <%= page_header_title safe_join([
       tag.div(t(".title")),
-      tag.div(t(".subtitle"), class: "body-small text-gray-500"),
+      tag.div(t(".subtitle"), class: "font-normal text-sm text-gray-500"),
     ]) %>
   <% end %>
 

diff --git a/admin/app/components/solidus_admin/taxes/component.html.erb b/admin/app/components/solidus_admin/taxes/component.html.erb
@@ -2,7 +2,7 @@
   <%= page_header do %>
     <%= page_header_title safe_join([
       tag.div(t(".title")),
-      tag.div(t(".subtitle"), class: "body-small text-gray-500"),
+      tag.div(t(".subtitle"), class: "font-normal text-sm text-gray-500"),
     ]) %>
   <% end %>
 

diff --git a/admin/app/components/solidus_admin/ui/dropdown/component.rb b/admin/app/components/solidus_admin/ui/dropdown/component.rb
@@ -20,7 +20,8 @@ def initialize(text: nil, size: :m, direction: :left, **attributes)
     @attributes[:"data-controller"] = "#{stimulus_id} #{attributes[:"data-controller"]}"
     @attributes[:"data-action"] = "turbo:before-cache@window->#{stimulus_id}#close #{attributes[:"data-action"]}"
     @attributes[:class] = "
-      #{@size == :m ? 'body-text' : 'body-small'}
+      font-normal
+      #{@size == :m ? 'text-base' : 'text-sm'}
       #{@attributes[:class]}
     "
   end

diff --git a/admin/app/components/solidus_admin/ui/forms/field/component.html.erb b/admin/app/components/solidus_admin/ui/forms/field/component.html.erb
@@ -2,8 +2,7 @@
   <div class="flex gap-1 items-center">
     <span class="
       text-gray-700
-      body-tiny-bold
-      body-text-xs-semibold
+      font-semibold text-xs
     "><%= @label %></span>
 
     <%= render component('ui/toggletip').new(text: @tip) if @tip.present? %>
@@ -19,7 +18,7 @@
 
   <% if @hint.present? || @error.present? %>
     <div class="
-      body-tiny
+      font-normal text-xs
       [:disabled~&]:text-gray-300 text-gray-500
       flex gap-1 flex-col
     ">

diff --git a/admin/app/components/solidus_admin/ui/forms/input/component.rb b/admin/app/components/solidus_admin/ui/forms/input/component.rb
@@ -2,9 +2,9 @@
 
 class SolidusAdmin::UI::Forms::Input::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: "form-control-sm px-3 py-1.5 body-small",
-    m: "form-control-md px-3 py-1.5 body-small",
-    l: "form-control-lg px-3 py-1.5 body-text"
+    s: "form-control-sm px-3 py-1.5 font-normal text-sm",
+    m: "form-control-md px-3 py-1.5 font-normal text-sm",
+    l: "form-control-lg px-3 py-1.5 font-normal text-base"
   }.freeze
 
   HEIGHTS = {

diff --git a/admin/app/components/solidus_admin/ui/forms/switch_field/component.html.erb b/admin/app/components/solidus_admin/ui/forms/switch_field/component.html.erb
@@ -1,6 +1,6 @@
 <label class="flex flex-wrap items-center gap-2 w-full border border-gray-100 rounded px-4 py-2">
   <div class="flex gap-1 items-center grow py-2">
-    <span class="text-gray-700 body-tiny-bold body-text-bold"><%= @label %></span>
+    <span class="text-gray-700 font-semibold text-base"><%= @label %></span>
 
     <%= render component("ui/toggletip").new(text: @tip) if @tip.present? %>
   </div>
@@ -10,7 +10,7 @@
   <% if @hint.present? || @error.present? %>
     <div
       class="
-        w-full body-small [:disabled~&]:text-gray-300 text-gray-500 flex gap-1 flex-col pt-2 pb-4
+        w-full font-normal text-sm [:disabled~&]:text-gray-300 text-gray-500 flex gap-1 flex-col pt-2 pb-4
       "
     >
       <%= tag.span @hint if @hint.present? %>

diff --git a/admin/app/components/solidus_admin/ui/panel/component.html.erb b/admin/app/components/solidus_admin/ui/panel/component.html.erb
@@ -24,7 +24,7 @@
   <% if @title %>
     <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
       <h2>
-        <span class="body-title"><%= @title %></span>
+        <span class="font-semibold text-xl"><%= @title %></span>
         <%= render component("ui/toggletip").new(text: @title_hint) if @title_hint %>
       </h2>
     </section>

diff --git a/admin/app/components/solidus_admin/ui/resource_item/component.html.erb b/admin/app/components/solidus_admin/ui/resource_item/component.html.erb
@@ -4,7 +4,7 @@
     alt: @title,
   ) if @thumbnail %>
   <div class="flex-col">
-    <div class="leading-5 text-black body-small-bold"><%= @title %></div>
-    <div class="leading-5 text-gray-500 body-small"><%= @subtitle %></div>
+    <div class="leading-5 text-black font-semibold text-sm"><%= @title %></div>
+    <div class="leading-5 text-gray-500 font-normal text-sm"><%= @subtitle %></div>
   </div>
 </div>
diff --git a/admin/app/components/solidus_admin/ui/tab/component.rb b/admin/app/components/solidus_admin/ui/tab/component.rb
@@ -2,9 +2,9 @@
 
 class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: %w[h-7 px-1.5 body-small-bold],
-    m: %w[h-9 px-3 body-small-bold],
-    l: %w[h-12 px-4 body-text-bold],
+    s: %w[h-7 px-1.5 font-semibold text-sm],
+    m: %w[h-9 px-3 font-semibold text-sm],
+    l: %w[h-12 px-4 font-semibold text-base],
   }
 
   def initialize(text:, tag: :a, size: :m, current: false, disabled: false, **attributes)