From 6306ac6d57de8e25726a046f71cf8255b2bf5046 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Wed, 13 Dec 2023 17:42:01 +0100
Subject: [PATCH 1/4] Replace typography classes with standard Tailwind utility
 classes

---
 .../application.tailwind.css.erb              | 28 -------------------
 .../layout/feedback/component.html.erb        |  2 +-
 .../navigation/account/component.html.erb     |  6 ++--
 .../layout/navigation/component.html.erb      |  6 ++--
 .../layout/navigation/item/component.html.erb |  4 +--
 .../solidus_admin/layout/page_helpers.rb      |  2 +-
 .../layout/skip_link/component.rb             |  2 +-
 .../orders/cart/component.html.erb            | 10 +++----
 .../orders/cart/result/component.html.erb     |  8 +++---
 .../orders/index/component.html.erb           |  2 +-
 .../orders/show/address/component.html.erb    |  2 +-
 .../orders/show/component.html.erb            | 20 ++++++-------
 .../customer_search/result/component.html.erb |  4 +--
 .../orders/show/email/component.html.erb      |  4 +--
 .../products/show/component.html.erb          |  2 +-
 .../refunds_and_returns/component.html.erb    |  2 +-
 .../solidus_admin/shipping/component.html.erb |  2 +-
 .../solidus_admin/taxes/component.html.erb    |  2 +-
 .../solidus_admin/ui/dropdown/component.rb    |  3 +-
 .../ui/forms/field/component.html.erb         |  5 ++--
 .../solidus_admin/ui/forms/input/component.rb |  6 ++--
 .../ui/forms/switch_field/component.html.erb  |  4 +--
 .../solidus_admin/ui/panel/component.html.erb |  2 +-
 .../ui/resource_item/component.html.erb       |  4 +--
 .../solidus_admin/ui/tab/component.rb         |  6 ++--
 .../solidus_admin/ui/toast/component.html.erb |  2 +-
 .../ui/toggletip/component.html.erb           |  2 +-
 .../solidus_admin/application.html.erb        |  2 +-
 .../typography_preview/overview.html.erb      | 18 ++++++------
 29 files changed, 67 insertions(+), 95 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
index f876640838e..490eb3698d9 100644
--- a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
+++ b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
@@ -14,34 +14,6 @@
 }
 
 @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;
   }
diff --git a/admin/app/components/solidus_admin/layout/feedback/component.html.erb b/admin/app/components/solidus_admin/layout/feedback/component.html.erb
index 4ce8d630bc4..1e0c7899a6d 100644
--- 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
index 20c470861ba..4c4250ef850 100644
--- 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
index a3322432a68..75d5a586457 100644
--- 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
index cb5118b26e9..49047f46217 100644
--- 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
index 8327aa668ed..47bffa1f50a 100644
--- 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
index 821c4092ae5..b0270d4b749 100644
--- 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
index 503b05c08b9..cc4eef3281a 100644
--- 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
index ab39d30af92..cf8faf803fe 100644
--- 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,8 +10,8 @@
         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("- ") %>
@@ -19,8 +19,8 @@
       </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
index bb2ca90f453..f6d31446202 100644
--- 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
index d97d4ebbefb..13059d4e6c0 100644
--- 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
index 992fb1580f9..f2e8cbbee8b 100644
--- 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
index ebe5c4ef2dd..1762575ab3e 100644
--- 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
index 9bdff03edc0..ca6023404e2 100644
--- 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
index d621b91faac..452502c8df2 100644
--- 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
index b497f129ae3..52d2f801238 100644
--- 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
index 16c2324254d..4b719650a67 100644
--- 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
index 2dfa09155ba..3dc1fcaf24e 100644
--- 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
index e45707f3d01..28f10366fa9 100644
--- 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
index 388eaddcef8..af9538f8acf 100644
--- 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
index 1c7441eb4ec..84edd89cdee 100644
--- 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
index fd9b5a12bc9..0e43e2114d1 100644
--- 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
index d74f69482d9..041c3e95ea1 100644
--- 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
index 096896350a5..a8aef8b5a56 100644
--- 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
index f9b74dd4bee..a943b57bb57 100644
--- 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)
diff --git a/admin/app/components/solidus_admin/ui/toast/component.html.erb b/admin/app/components/solidus_admin/ui/toast/component.html.erb
index 7e1e97c066a..4cca3b3b03e 100644
--- a/admin/app/components/solidus_admin/ui/toast/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/toast/component.html.erb
@@ -15,7 +15,7 @@
 >
   <%= icon_tag(@icon, class: 'w-[1.125rem] h-[1.125rem] mr-2 fill-current') if @icon %>
 
-  <p class="body-tiny-bold leading-none"><%= @text %></p>
+  <p class="font-semibold text-xs leading-none"><%= @text %></p>
 
   <button
     type="button"
diff --git a/admin/app/components/solidus_admin/ui/toggletip/component.html.erb b/admin/app/components/solidus_admin/ui/toggletip/component.html.erb
index a375863af79..2dd3f828281 100644
--- a/admin/app/components/solidus_admin/ui/toggletip/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/toggletip/component.html.erb
@@ -26,7 +26,7 @@
       inline-block
       w-48
       px-[0.75rem]
-      body-tiny-bold
+      font-semibold text-xs
       rounded
       z-10
       text-white
diff --git a/admin/app/views/layouts/solidus_admin/application.html.erb b/admin/app/views/layouts/solidus_admin/application.html.erb
index 7c976011c2a..5c01b9963e6 100644
--- a/admin/app/views/layouts/solidus_admin/application.html.erb
+++ b/admin/app/views/layouts/solidus_admin/application.html.erb
@@ -14,7 +14,7 @@
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
   </head>
 
-  <body class="bg-gray-15">
+  <body class="bg-gray-15 font-sans">
     <%= render component("layout/skip_link").new(href: "#main") %>
     <div class="flex gap-0">
       <div class="min-w-[240px] border-r border-r-gray-100 relative">
diff --git a/admin/spec/components/previews/solidus_admin/typography/typography_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/typography/typography_preview/overview.html.erb
index a5f2d3badeb..80fad0b648b 100644
--- a/admin/spec/components/previews/solidus_admin/typography/typography_preview/overview.html.erb
+++ b/admin/spec/components/previews/solidus_admin/typography/typography_preview/overview.html.erb
@@ -1,16 +1,16 @@
 <%
-  %w[
-    body-tiny
-    body-tiny-bold
-    body-small
-    body-small-bold
-    body-text
-    body-text-bold
-    body-title
+  [
+    'font-normal text-xs',
+    'font-semibold text-xs',
+    'font-normal text-sm',
+    'font-semibold text-sm',
+    'font-normal text-base',
+    'font-semibold text-base',
+    'font-semibold text-xl',
   ].each do |klass_name|
 %>
   <div class="mb-3">
-    <h1 class="body-small text-gray-500"><%= klass_name %></h1>
+    <h1 class="font-normal text-sm text-gray-500"><%= klass_name %></h1>
     <p class="<%= klass_name %>">
       The quick brown fox jumps over the lazy dog.
     </p>

From e0ae46c133e0aabdf90fd4f236b6aa317948c0a1 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Wed, 13 Dec 2023 17:43:11 +0100
Subject: [PATCH 2/4] Combine all additional variants in a single plugin

---
 admin/config/solidus_admin/tailwind.config.js.erb | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
index b7cdcd6015e..dae88296c24 100644
--- a/admin/config/solidus_admin/tailwind.config.js.erb
+++ b/admin/config/solidus_admin/tailwind.config.js.erb
@@ -89,8 +89,13 @@ module.exports = {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/container-queries'),
-    plugin(({ addVariant }) => addVariant('hidden', '&([hidden])')),
-    plugin(({ addVariant }) => addVariant('visible', '&:not([hidden])')),
-    plugin(({ addVariant }) => addVariant('search-cancel', '&::-webkit-search-cancel-button')),
-  ]
+    plugin(({ addVariant }) => {
+      // Support the "hidden" attribute
+      addVariant('hidden', '&([hidden])')
+      addVariant('visible', '&:not([hidden])')
+
+      // Support the "search-cancel" pseudo-element
+      addVariant('search-cancel', '&::-webkit-search-cancel-button')
+    }),
+  ],
 }

From 7b0effe98311078f3e28e4d26efdb61d797ea878 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Wed, 13 Dec 2023 17:44:08 +0100
Subject: [PATCH 3/4] Move the reset of the <summary> element marker to a
 plugin

---
 .../solidus_admin/application.tailwind.css.erb        | 11 -----------
 admin/config/solidus_admin/tailwind.config.js.erb     |  9 ++++++++-
 2 files changed, 8 insertions(+), 12 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
index 490eb3698d9..8b062d516a9 100644
--- a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
+++ b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
@@ -2,17 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  summary {
-    &::marker,
-    &::-webkit-details-marker {
-      @apply hidden;
-    }
-
-    list-style: none;
-  }
-}
-
 @layer components {
   .body-link {
     @apply text-blue hover:underline;
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
index dae88296c24..f6ee0134036 100644
--- a/admin/config/solidus_admin/tailwind.config.js.erb
+++ b/admin/config/solidus_admin/tailwind.config.js.erb
@@ -89,13 +89,20 @@ module.exports = {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/container-queries'),
-    plugin(({ addVariant }) => {
+    plugin(({ addVariant, addBase }) => {
       // Support the "hidden" attribute
       addVariant('hidden', '&([hidden])')
       addVariant('visible', '&:not([hidden])')
 
       // Support the "search-cancel" pseudo-element
       addVariant('search-cancel', '&::-webkit-search-cancel-button')
+
+      // Reset the <summary> marker
+      addBase({
+        'summary::-webkit-details-marker': { display: 'none' },
+        'summary::marker': { display: 'none' },
+        'summary': { listStyle: 'none' },
+      })
     }),
   ],
 }

From adbc2039fce1bcdec62c38d1062975b2785fe4f7 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Wed, 13 Dec 2023 17:44:50 +0100
Subject: [PATCH 4/4] Move the .body-link CSS component class to a plugin

---
 .../solidus_admin/application.tailwind.css.erb       |  6 ------
 admin/config/solidus_admin/tailwind.config.js.erb    | 12 +++++++++++-
 2 files changed, 11 insertions(+), 7 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
index 8b062d516a9..248516b671c 100644
--- a/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
+++ b/admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb
@@ -2,10 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
-  .body-link {
-    @apply text-blue hover:underline;
-  }
-}
-
 <%= SolidusAdmin::Config.tailwind_stylesheets.map { File.read(_1) }.join("\n") %>
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
index f6ee0134036..81333c2eee1 100644
--- a/admin/config/solidus_admin/tailwind.config.js.erb
+++ b/admin/config/solidus_admin/tailwind.config.js.erb
@@ -89,7 +89,7 @@ module.exports = {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/container-queries'),
-    plugin(({ addVariant, addBase }) => {
+    plugin(({ addVariant, addBase, addComponents, theme }) => {
       // Support the "hidden" attribute
       addVariant('hidden', '&([hidden])')
       addVariant('visible', '&:not([hidden])')
@@ -103,6 +103,16 @@ module.exports = {
         'summary::marker': { display: 'none' },
         'summary': { listStyle: 'none' },
       })
+
+      // Add a text style for links
+      addComponents({
+        '.body-link': {
+          color: theme('colors.blue'),
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        },
+      })
     }),
   ],
 }