plutonium 0.27.0 → 0.29.0

data/lib/plutonium/ui/layout/header.rb

@@ -41,7 +41,7 @@ module Plutonium
         # @return [void]
         def view_template
           nav(
-            class: "bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50",
+            class: tokens(theme_class(:header), "bg-surface border-b border-gray-200 px-md py-sm dark:bg-surface-dark dark:border-gray-700 fixed left-0 right-0 top-0 z-50"),
             data: {
               controller: "resource-header",
               resource_header_sidebar_outlet: "#sidebar-navigation"
@@ -59,7 +59,7 @@ module Plutonium
         # Renders the color mode toggle controls
         # @private
         def render_color_mode_controls
-          div(class: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700") do
+          div(class: "bg-surface dark:bg-surface-dark border-gray-200 dark:border-gray-700") do
             render ColorModeSelector.new
           end
         end
@@ -80,10 +80,13 @@ module Plutonium
           button(
             data_action: "resource-header#toggleDrawer",
             aria_controls: "#sidebar-navigation",
-            class: %(p-2 mr-2 text-gray-600 rounded-lg cursor-pointer lg:hidden hover:text-gray-900
-                    hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2
+            class: tokens(
+              theme_class(:header, element: :sidebar_toggle),
+              %(p-2 mr-sm text-gray-600 rounded-sm cursor-pointer lg:hidden hover:text-gray-900
+                    hover:bg-interactive focus:bg-interactive dark:focus:bg-interactive-dark focus:ring-2
                     focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-200
-                    dark:hover:bg-gray-700 dark:hover:text-white)
+                    dark:hover:bg-interactive-dark dark:hover:text-white)
+            )
           ) do
             render_toggle_icons
           end
@@ -92,7 +95,7 @@ module Plutonium
         # Renders the brand section with logo and/or name
         # @private
         def render_brand
-          a(href: root_path, class: "flex items-center space-x-2 md:min-w-60") do
+          a(href: root_path, class: "flex items-center space-x-sm md:min-w-60") do
             render brand_logo_slot if brand_logo_slot?
             if brand_name_slot?
               span(class: "self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden xs:block") do
@@ -119,7 +122,7 @@ module Plutonium
         # Renders the action buttons section
         # @private
         def render_actions
-          div(class: "flex items-center space-x-2") do
+          div(class: "flex items-center space-x-sm") do
             render_color_mode_controls
 
             div(class: "flex items-center lg:order-2") do

data/lib/plutonium/ui/layout/rodauth_layout.rb

@@ -11,14 +11,14 @@ module Plutonium
         end
 
         def main_attributes = mix(super, {
-          class: "flex flex-col items-center justify-center gap-2 px-6 py-8 mx-auto lg:py-0"
+          class: "flex flex-col items-center justify-center gap-sm px-lg py-xl mx-auto lg:py-0"
         })
 
         def render_content(&)
           render_logo
 
-          div(class: "w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700") {
-            div(class: "p-6 space-y-4 md:space-y-6 sm:p-8", &)
+          div(class: "w-full bg-surface rounded-sm shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-surface-dark dark:border-gray-700") {
+            div(class: "p-lg space-y-md md:space-y-lg sm:p-xl", &)
           }
 
           render_links
@@ -26,12 +26,12 @@ module Plutonium
 
         def render_logo
           link_to root_path, class: "flex items-center text-2xl font-semibold text-gray-900 dark:text-white mb-2" do
-            helpers.resource_logo_tag classname: "w-24 h-24 mr-2 rounded-md"
+            helpers.resource_logo_tag classname: "w-24 h-24 mr-sm rounded"
           end
         end
 
         def render_links
-          div(class: "mt-4 flex items-center font-medium text-secondary-600 dark:text-secondary-400 hover:underline") {
+          div(class: "mt-md flex items-center font-medium text-secondary-600 dark:text-secondary-400 hover:underline") {
             render Phlex::TablerIcons::Home2.new
             link_to "Home", root_path, class: "font-medium text-secondary-600 dark:text-secondary-400"
           }

data/lib/plutonium/ui/layout/sidebar.rb

@@ -26,7 +26,7 @@ module Plutonium
             data: {controller: "sidebar"},
             id: "sidebar-navigation",
             aria: {label: "Sidebar Navigation"},
-            class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0",
+            class: tokens(theme_class(:sidebar, element: :container), "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0"),
             &
           )
         end
@@ -36,7 +36,7 @@ module Plutonium
           div(
             id: "sidebar-navigation-content",
             data: {turbo_permanent: true},
-            class: "overflow-y-auto py-5 px-3 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700",
+            class: tokens(theme_class(:sidebar, element: :content), "overflow-y-auto py-md px-sm h-full bg-surface border-r border-gray-200 dark:bg-surface-dark dark:border-gray-700"),
             &
           )
         end

data/lib/plutonium/ui/nav_grid_menu.rb

@@ -32,7 +32,7 @@ module Plutonium
 
         def view_template
           a(
-            class: "block p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group",
+            class: tokens(theme_class(:nav, variant: :grid, element: :item), "block p-md rounded-sm hover:bg-interactive dark:hover:bg-interactive-dark group"),
             href: @href
           ) do
             render @icon.new(
@@ -55,7 +55,7 @@ module Plutonium
       end
 
       def view_template
-        div(data: {controller: "resource-drop-down"}) do
+        div(class: theme_class(:nav, variant: :grid), data: {controller: "resource-drop-down"}) do
           render_trigger_button
           render_dropdown_menu
         end
@@ -67,7 +67,7 @@ module Plutonium
         button(
           type: "button",
           data: {resource_drop_down_target: "trigger"},
-          class: "p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+          class: tokens(theme_class(:nav, variant: :grid, element: :trigger), "p-2 text-gray-500 rounded-sm hover:text-gray-900 hover:bg-interactive dark:text-gray-200 dark:hover:text-white dark:hover:bg-interactive-dark focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600")
         ) do
           span(class: "sr-only") { "View #{@label}" }
           render @icon.new(class: "w-6 h-6")
@@ -76,14 +76,14 @@ module Plutonium
 
       def render_dropdown_menu
         div(
-          class: "hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600 rounded-xl",
+          class: tokens(theme_class(:nav, variant: :grid, element: :dropdown), "hidden overflow-hidden z-50 my-md max-w-sm text-base list-none bg-surface divide-y divide-gray-100 shadow-lg dark:bg-elevated-dark dark:divide-gray-600 rounded"),
           data: {resource_drop_down_target: "menu"}
         ) do
           div(
-            class: "block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
+            class: "block py-sm px-md text-base font-medium text-center text-gray-700 bg-page dark:bg-gray-600 dark:text-gray-300"
           ) { @label }
 
-          div(class: "grid grid-cols-3 gap-4 p-4") do
+          div(class: "grid grid-cols-3 gap-md p-md") do
             item_slots.each { |item| render item }
           end
         end

data/lib/plutonium/ui/nav_user.rb

@@ -18,7 +18,8 @@ module Plutonium
         def view_template
           a(
             class: tokens(
-              "flex justify-between items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+              theme_class(:nav_user, element: :link),
+              "flex justify-between items-center py-sm px-md text-sm hover:bg-interactive dark:hover:bg-interactive-dark dark:hover:text-white",
               @attributes.delete(:class)
             ),
             href: @href,
@@ -40,7 +41,7 @@ module Plutonium
 
         def view_template
           ul(
-            class: "text-gray-700 dark:text-gray-300",
+            class: tokens(theme_class(:nav_user, element: :section), "text-gray-700 dark:text-gray-300"),
             aria: {labelledby: "user-nav-dropdown-toggle"}
           ) do
             link_slots.each do |link|
@@ -59,7 +60,7 @@ module Plutonium
       end
 
       def view_template
-        div(data: {controller: "resource-drop-down"}) do
+        div(class: theme_class(:nav_user), data: {controller: "resource-drop-down"}) do
           render_trigger_button
           render_dropdown_menu
         end
@@ -78,7 +79,7 @@ module Plutonium
       def render_avatar_button
         button(
           type: "button",
-          class: "flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600",
+          class: tokens(theme_class(:nav_user, element: :button), "flex mx-sm text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"),
           aria: {expanded: "false"},
           id: "user-nav-dropdown-toggle",
           data: {resource_drop_down_target: "trigger"}
@@ -91,7 +92,7 @@ module Plutonium
       def render_default_button
         button(
           type: "button",
-          class: "flex mx-3 text-sm border border-gray-600 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600",
+          class: tokens(theme_class(:nav_user, element: :button), "flex mx-sm text-sm border border-gray-600 text-gray-500 hover:text-gray-900 hover:bg-interactive dark:text-gray-400 dark:hover:text-white dark:hover:bg-interactive-dark rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"),
           aria: {expanded: "false"},
           id: "user-nav-dropdown-toggle",
           data: {resource_drop_down_target: "trigger"}
@@ -103,10 +104,10 @@ module Plutonium
 
       def render_dropdown_menu
         div(
-          class: "hidden z-50 my-4 w-56 text-base list-none bg-white divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 rounded-xl",
+          class: tokens(theme_class(:nav_user, element: :menu), "hidden z-50 my-md w-56 text-base list-none bg-surface divide-y divide-gray-100 shadow dark:bg-elevated-dark dark:divide-gray-600 rounded"),
           data: {resource_drop_down_target: "menu"}
         ) do
-          div(class: "py-3 px-4") do
+          div(class: "py-sm px-md") do
             if @name.present?
               span(class: "block text-sm font-semibold text-gray-900 dark:text-white") { @name }
             end

data/lib/plutonium/ui/page/interactive_action.rb

@@ -20,13 +20,13 @@ module Plutonium
           if helpers.current_turbo_frame == "remote_modal"
             dialog(
               closedby: "any",
-              class: "rounded-md w-full max-w-3xl
-                      bg-white dark:bg-gray-800
+              class: "rounded w-full max-w-3xl
+                      bg-surface dark:bg-surface-dark
                       border border-gray-200 dark:border-gray-700
                       shadow-lg dark:shadow-gray-900/20
                       backdrop:bg-black/60 backdrop:backdrop-blur-sm
                       top-auto md:top-1/2 md:-translate-y-1/2 left-1/2 -translate-x-1/2
-                      max-h-[80%] p-6
+                      max-h-[80%] p-lg
                       hidden open:flex flex-col
                       relative opacity-0 open:opacity-100
                       transition-opacity duration-300 ease-in-out",
@@ -35,7 +35,7 @@ module Plutonium
               # Close button
               button(
                 type: "button",
-                class: "absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200",
+                class: "absolute top-4 right-4 p-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200",
                 data: {action: "remote-modal#close"},
                 "aria-label": "Close dialog"
               ) do

data/lib/plutonium/ui/page_header.rb

@@ -8,7 +8,10 @@ module Plutonium
       end
 
       def view_template
-        div(class: "sm:flex sm:space-y-0 sm:space-x-4 sm:flex-row items-center justify-between space-y-3 mb-6") {
+        div(class: tokens(
+          theme_class(:page, element: :header),
+          "sm:flex sm:space-y-0 sm:space-x-md sm:flex-row items-center justify-between space-y-sm mb-lg"
+        )) {
           div {
             phlexi_render(@title) {
               render_title @title
@@ -18,7 +21,7 @@ module Plutonium
               render_description @description
             }
           }
-          div(class: "flex flex-row space-x-2") {
+          div(class: "flex flex-row space-x-sm") {
             render_actions
           }
         }
@@ -27,13 +30,13 @@ module Plutonium
       private
 
       def render_title(title)
-        h2(class: "mb-2 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-4xl dark:text-white") {
+        h2(class: tokens(theme_class(:page, element: :header_title), "mb-2 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-4xl dark:text-white")) {
           title
         }
       end
 
       def render_description(description)
-        p(class: "text-gray-500 dark:text-gray-400") {
+        p(class: tokens(theme_class(:page, element: :header_description), "text-gray-500 dark:text-gray-400")) {
           description
         }
       end

data/lib/plutonium/ui/panel.rb

@@ -32,17 +32,17 @@ module Plutonium
       private
 
       def wrapped(&)
-        div(class: "mt-6", &)
+        div(class: tokens(theme_class(:panel), "mt-lg"), &)
       end
 
       def render_toolbar
-        div(class: %(flex justify-between items-center mb-4)) do
+        div(class: %(flex justify-between items-center mb-md)) do
           if @title
             h5(class: %(text-2xl font-bold tracking-tight text-gray-900 dark:text-white)) do
               @title
             end
           end
-          div(class: "flex space-x-4") do
+          div(class: "flex space-x-md") do
             @items.each do |item|
               render item
             end

data/lib/plutonium/ui/sidebar_menu.rb

@@ -13,34 +13,34 @@ module Plutonium
         def self.theme
           super.merge({
             # Base container styles
-            nav: "space-y-2 pb-6 mb-6",
-            items_container: "space-y-2",
+            nav: "pu-sidebar-menu space-y-sm pb-lg mb-lg",
+            items_container: "pu-sidebar-menu-items space-y-sm",
 
             # Item wrapper styles
-            item_wrapper: "w-full transition-colors duration-200 ease-in-out",
+            item_wrapper: "pu-sidebar-menu-item w-full transition-colors duration-200 ease-in-out",
             item_parent: nil,
 
             # Link and button base styles
-            item_link: "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group",
-            item_span: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+            item_link: "pu-sidebar-menu-link flex items-center p-sm text-base font-normal text-gray-900 rounded-sm dark:text-white hover:bg-interactive dark:hover:bg-interactive-dark group",
+            item_span: "pu-sidebar-menu-button flex items-center p-sm w-full text-base font-normal text-gray-900 rounded-sm transition duration-75 group hover:bg-interactive dark:text-white dark:hover:bg-interactive-dark",
 
             # Label and content styles
-            item_label: ->(depth) { "flex-1 #{(depth > 0) ? "ml-9" : "ml-3"} text-left whitespace-nowrap" },
+            item_label: ->(depth) { "pu-sidebar-menu-label flex-1 #{(depth > 0) ? "ml-9" : "ml-sm"} text-left whitespace-nowrap" },
 
             # Badge styles
-            leading_badge: "inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800",
-            trailing_badge: "inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300",
+            leading_badge: "pu-sidebar-menu-badge-leading inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800",
+            trailing_badge: "pu-sidebar-menu-badge-trailing inline-flex justify-center items-center px-sm ml-sm text-sm font-medium text-gray-800 bg-elevated rounded-full dark:bg-elevated-dark dark:text-gray-300",
 
             # Icon styles
-            icon_wrapper: "shrink-0 w-6 h-6 flex items-center justify-center",
-            icon: "text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white",
+            icon_wrapper: "pu-sidebar-menu-icon-wrapper shrink-0 w-6 h-6 flex items-center justify-center",
+            icon: "pu-sidebar-menu-icon text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white",
 
             # Collapse icon styles
-            collapse_icon: "w-6 h-6 ml-auto transition-transform duration-200",
+            collapse_icon: "pu-sidebar-menu-collapse-icon w-6 h-6 ml-auto transition-transform duration-200",
             collapse_icon_expanded: "transform rotate-180",
 
             # Submenu styles
-            sub_items_container: "hidden py-2 space-y-2",
+            sub_items_container: "pu-sidebar-menu-sub-items hidden py-sm space-y-sm",
 
             # Due to how we use turbo frames, we can't set active states
             active: nil

data/lib/plutonium/ui/skeleton_table.rb

@@ -5,21 +5,21 @@ module Plutonium
         div(
           role: "status",
           class:
-            "p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow motion-safe:animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
+            "p-md space-y-md border border-gray-200 divide-y divide-gray-200 rounded shadow motion-safe:animate-pulse dark:divide-gray-700 md:p-lg dark:border-gray-700"
         ) do
           div(class: "flex items-center justify-between") do
             div do
-              div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5")
-              div(class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700")
+              div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-sm")
+              div(class: "w-32 h-2 bg-elevated rounded-full dark:bg-elevated-dark")
             end
-            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
+            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-elevated-dark w-12")
           end
-          div(class: "flex items-center justify-between pt-4") do
+          div(class: "flex items-center justify-between pt-md") do
             div do
-              div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5")
-              div(class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700")
+              div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-sm")
+              div(class: "w-32 h-2 bg-elevated rounded-full dark:bg-elevated-dark")
             end
-            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
+            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-elevated-dark w-12")
           end
           span(class: "sr-only") { "Loading..." }
         end

data/lib/plutonium/ui/tab_list.rb

@@ -20,19 +20,20 @@ module Plutonium
 
       def view_template
         div(
+          class: theme_class(:tab, element: :list),
           data_controller: "resource-tab-list",
           data_resource_tab_list_active_classes_value: "focus:outline-none text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 border-primary-600 dark:border-primary-500",
           data_resource_tab_list_in_active_classes_value: "dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
         ) do
-          div(class: "mb-4 border-b border-gray-200 dark:border-gray-700") do
+          div(class: "mb-md border-b border-gray-200 dark:border-gray-700") do
             ul(
-              class: "flex flex-wrap -mb-px text-sm font-medium text-center space-x-2",
+              class: "flex flex-wrap -mb-px text-sm font-medium text-center space-x-sm",
               role: "tablist"
             ) do
               @tabs.each do |tab|
                 li(role: "presentation") do
                   button(
-                    class: "inline-block p-4 border-b-2 rounded-t-lg",
+                    class: tokens(theme_class(:tab, element: :button), "inline-block p-md border-b-2 rounded-t-lg"),
                     id: "#{tab[:identifier]}-tab",
                     type: "button",
                     role: "tab",
@@ -54,6 +55,7 @@ module Plutonium
           div do
             @tabs.each do |tab|
               div(
+                class: theme_class(:tab, element: :panel),
                 hidden: true,
                 id: "#{tab[:identifier]}-tabpanel",
                 role: "tabpanel",

data/lib/plutonium/ui/table/components/attachment.rb

@@ -19,7 +19,7 @@ module Plutonium
 
           def render_thumbnail(attachment)
             div(
-              class: "w-24 h-24 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
+              class: "w-24 h-24 bg-white border border-gray-200 rounded-sm shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
               data: {
                 controller: "attachment-preview",
                 attachment_preview_mime_type_value: attachment.content_type,
@@ -30,7 +30,7 @@ module Plutonium
             ) do
               a(
                 href: attachment.url,
-                class: "block aspect-square overflow-hidden rounded-lg",
+                class: "block aspect-square overflow-hidden rounded-sm",
                 target: :blank,
                 data: {
                   attachment_preview_target: "thumbnailLink"

data/lib/plutonium/ui/table/components/pagy_info.rb

@@ -35,11 +35,11 @@ module Plutonium
 
           def per_page_selector
             div(
-              class: "flex items-center space-x-2 mt-2 md:mt-0",
+              class: "flex items-center space-x-sm mt-sm md:mt-0",
               data_controller: "select-navigator"
             ) do
               id = "perPage#{SecureRandom.hex}"
-              label(for: id, class: "mr-2") { "Per page" }
+              label(for: id, class: "mr-sm") { "Per page" }
               select(
                 id: id, name: "items", class: select_classes,
                 data_action: "change->select-navigator#navigate",
@@ -53,7 +53,7 @@ module Plutonium
           end
 
           def select_classes
-            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 min-w-[5em]"
+            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-sm focus:ring-blue-500 focus:border-blue-500 block p-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 min-w-[5em]"
           end
 
           def page_url(limit)

data/lib/plutonium/ui/table/components/pagy_pagination.rb

@@ -12,7 +12,7 @@ module Plutonium
           end
 
           def view_template
-            nav(aria_label: "Page navigation", class: "flex justify-center mt-4") do
+            nav(aria_label: "Page navigation", class: "flex justify-center mt-md") do
               ul(class: "inline-flex -space-x-px text-sm") do
                 prev_link
                 page_links
@@ -79,14 +79,14 @@ module Plutonium
           end
 
           def link_classes(first = false, last = false)
-            classes = ["flex", "items-center", "justify-center", "px-3", "h-8", "leading-tight", "text-gray-500", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "hover:text-gray-700", "dark:bg-gray-800", "dark:border-gray-700", "dark:text-gray-400", "dark:hover:bg-gray-700", "dark:hover:text-white"]
+            classes = ["flex", "items-center", "justify-center", "px-sm", "h-8", "leading-tight", "text-gray-500", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "hover:text-gray-700", "dark:bg-gray-800", "dark:border-gray-700", "dark:text-gray-400", "dark:hover:bg-gray-700", "dark:hover:text-white"]
             classes << "rounded-s-lg" if first
             classes << "rounded-e-lg" if last
             classes.join(" ")
           end
 
           def current_link_classes
-            "flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed"
+            "flex items-center justify-center px-sm h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed"
           end
 
           def disabled_link_classes(first = false, last = false)

data/lib/plutonium/ui/table/components/scopes_bar.rb

@@ -10,24 +10,24 @@ module Plutonium
           def view_template
             div(
               class:
-                # "flex flex-wrap justify-between items-center gap-4 p-4 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 mb-4"
-                "flex flex-wrap justify-between items-center gap-4 mb-4"
+                # "flex flex-wrap justify-between items-center gap-md p-md bg-white border border-gray-200 rounded-sm dark:bg-gray-800 dark:border-gray-700 mb-md"
+                "flex flex-wrap justify-between items-center gap-md mb-md"
             ) do
-              div(class: "flex flex-wrap items-center gap-2") do
+              div(class: "flex flex-wrap items-center gap-sm") do
                 name = "all"
                 if current_scope.blank?
                   a(
                     id: "#{name}-scope",
                     href: current_query_object.build_url(scope: nil),
                     class:
-                      "px-4 py-2 text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-lg hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                      "px-md py-sm text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-sm hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
                   ) { name.humanize }
                 else
                   a(
                     id: "#{name}-scope",
                     href: current_query_object.build_url(scope: nil),
                     class:
-                      "px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
+                      "px-md py-sm text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-sm hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
                   ) { name.humanize }
                 end
 
@@ -37,26 +37,26 @@ module Plutonium
                       id: "#{name}-scope",
                       href: current_query_object.build_url(scope: name),
                       class:
-                        "px-4 py-2 text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-lg hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+                        "px-md py-sm text-sm font-medium text-white bg-primary-700 border border-primary-700 rounded-sm hover:bg-primary-800 focus:z-10 focus:ring-2 focus:ring-primary-700 focus:text-white dark:bg-primary-600 dark:border-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
                     ) { name.humanize }
                   else
                     a(
                       id: "#{name}-scope",
                       href: current_query_object.build_url(scope: name),
                       class:
-                        "px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
+                        "px-md py-sm text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-sm hover:bg-gray-100 hover:text-gray-700 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:focus:text-white"
                     ) { name.humanize }
                   end
                 end
               end
 
-              # div(class: "flex flex-wrap items-center gap-2") do
+              # div(class: "flex flex-wrap items-center gap-sm") do
               #   button(
               #     class:
-              #       "inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
+              #       "inline-flex items-center px-sm py-sm text-sm font-medium text-white bg-red-700 rounded-sm hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
               #   ) do
               #     svg(
-              #       class: "w-4 h-4 mr-2",
+              #       class: "w-4 h-4 mr-sm",
               #       fill: "none",
               #       stroke: "currentColor",
               #       viewbox: "0 0 24 24",
@@ -74,10 +74,10 @@ module Plutonium
               #   end
               #   button(
               #     class:
-              #       "inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-yellow-700 rounded-lg hover:bg-yellow-800 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800"
+              #       "inline-flex items-center px-sm py-sm text-sm font-medium text-white bg-yellow-700 rounded-sm hover:bg-yellow-800 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800"
               #   ) do
               #     svg(
-              #       class: "w-4 h-4 mr-2",
+              #       class: "w-4 h-4 mr-sm",
               #       fill: "none",
               #       stroke: "currentColor",
               #       viewbox: "0 0 24 24",
@@ -97,13 +97,13 @@ module Plutonium
               #     id: "dropdownActionButton",
               #     data_dropdown_toggle: "dropdownAction",
               #     class:
-              #       "inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-2 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700",
+              #       "inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-sm text-sm px-sm py-sm dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700",
               #     type: "button"
               #   ) do
               #     span(class: "sr-only") { "Action button" }
               #     plain " More Actions "
               #     svg(
-              #       class: "w-2.5 h-2.5 ml-2.5",
+              #       class: "w-2.5 h-2.5 ml-sm",
               #       aria_hidden: "true",
               #       xmlns: "http://www.w3.org/2000/svg",
               #       fill: "none",

data/lib/plutonium/ui/table/display_theme.rb

@@ -7,14 +7,14 @@ module Plutonium
         def self.theme
           super.merge({
             value_wrapper: "max-h-[150px] overflow-y-auto",
-            prefixed_icon: "w-4 h-4 mr-1",
+            prefixed_icon: "w-4 h-4 mr-xs",
             link: "text-primary-600 dark:text-primary-500",
             color: "flex items-center",
-            color_indicator: "w-10 h-10 rounded-full mr-2",
+            color_indicator: "w-10 h-10 rounded-full mr-sm",
             email: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
             phone: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
             json: " whitespace-pre font-mono shadow-inner p-4",
-            attachment_value_wrapper: "flex flex-wrap gap-1"
+            attachment_value_wrapper: "flex flex-wrap gap-xs"
           })
         end
       end

data/lib/plutonium/ui/table/resource.rb

@@ -91,7 +91,7 @@ module Plutonium
               record = wrapped_object.unwrapped
               policy = policy_for(record:)
 
-              div(class: "flex space-x-2") do
+              div(class: "flex space-x-sm") do
                 resource_definition.defined_actions
                   .select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") }
                   .values
@@ -105,7 +105,7 @@ module Plutonium
         end
 
         def render_footer
-          div(class: "lg:sticky lg:dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-30 bg-gray-50 dark:bg-gray-900") {
+          div(class: tokens(theme_class(:table, element: :footer), "lg:sticky lg:dyna:static bottom-[-2px] mt-xs p-md pb-lg w-full z-30 bg-page dark:bg-page-dark")) {
             TableInfo(pagy_instance)
             TablePagination(pagy_instance)
           }