plutonium 0.32.0 → 0.33.0

data/lib/plutonium/ui/action_button.rb

@@ -70,29 +70,23 @@ module Plutonium
           base_classes,
           color_classes,
           size_classes,
-          -> { @action.icon && @variant != :table } => "space-x-xs"
+          -> { @action.icon && @variant != :table } => "space-x-1"
         )
       end
 
       def base_classes
         if @variant == :table
-          tokens(
-            theme_class(:button, variant: :table),
-            "inline-flex items-center justify-center py-xs px-sm rounded-sm focus:outline-none focus:ring-2"
-          )
+          "inline-flex items-center justify-center py-1 px-2 rounded-lg focus:outline-none focus:ring-2"
         else
-          tokens(
-            theme_class(:button),
-            "flex items-center justify-center px-md py-sm text-sm font-medium rounded-sm focus:outline-none focus:ring-4"
-          )
+          "flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg focus:outline-none focus:ring-4"
         end
       end
 
       def icon_classes
         if @variant == :table
-          "h-4 w-4 mr-xs"
+          "h-4 w-4 mr-1"
         else
-          "h-3.5 w-3.5 -ml-xs"
+          "h-3.5 w-3.5 -ml-1"
         end
       end
 

data/lib/plutonium/ui/block.rb

@@ -4,10 +4,7 @@ module Plutonium
       def view_template(&)
         raise ArgumentError, "Block requires a content block" unless block_given?
 
-        div class: tokens(
-          theme_class(:block),
-          "relative bg-surface dark:bg-surface-dark shadow-md sm:rounded-sm my-sm"
-        ) do
+        div class: "relative bg-white dark:bg-gray-800 shadow-md sm:rounded-lg my-3" do
           yield
         end
       end

data/lib/plutonium/ui/breadcrumbs.rb

@@ -6,15 +6,13 @@ module Plutonium
 
       def view_template
         nav(
-          class: tokens(
-            theme_class(:breadcrumbs),
-            "flex py-sm text-gray-700 mb-sm"
-          ),
+          class:
+            "flex py-3 text-gray-700 mb-2",
           aria_label: "Breadcrumb"
         ) do
           ol(
             class:
-              "inline-flex items-center space-x-xs md:space-x-sm rtl:space-x-reverse"
+              "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse"
           ) do
             # Dashboard
             li(class: "inline-flex items-center") do
@@ -44,7 +42,7 @@ module Plutonium
               # Parent Resource
               li(class: "flex items-center") do
                 svg(
-                  class: "rtl:rotate-180 block w-3 h-3 mx-xs text-gray-400",
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
                   aria_hidden: "true",
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -67,7 +65,7 @@ module Plutonium
               # Parent Itself
               li(class: "flex items-center") do
                 svg(
-                  class: "rtl:rotate-180 block w-3 h-3 mx-xs text-gray-400",
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
                   aria_hidden: "true",
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
@@ -94,7 +92,7 @@ module Plutonium
                 # Record Resource
                 li(class: "flex items-center") do
                   svg(
-                    class: "rtl:rotate-180 block w-3 h-3 mx-xs text-gray-400",
+                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
                     aria_hidden: "true",
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -119,7 +117,7 @@ module Plutonium
               if resource_record!.persisted? && action_name != "show"
                 li(class: "flex items-center") do
                   svg(
-                    class: "rtl:rotate-180 block w-3 h-3 mx-xs text-gray-400",
+                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
                     aria_hidden: "true",
                     xmlns: "http://www.w3.org/2000/svg",
                     fill: "none",
@@ -144,7 +142,7 @@ module Plutonium
             # Trailing Caret
             li(class: "flex items-center") do
               svg(
-                class: "rtl:rotate-180 block w-3 h-3 mx-xs text-gray-400",
+                class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
                 aria_hidden: "true",
                 xmlns: "http://www.w3.org/2000/svg",
                 fill: "none",

data/lib/plutonium/ui/color_mode_selector.rb

@@ -8,8 +8,8 @@ module Plutonium
     class ColorModeSelector < Plutonium::UI::Component::Base
       # Common CSS classes used across the component
       COMMON_CLASSES = {
-        button: "pu-color-mode-button inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-interactive dark:hover:bg-interactive-dark transition-colors duration-200",
-        icon: "pu-color-mode-icon w-5 h-5"
+        button: "inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200",
+        icon: "w-5 h-5"
       }.freeze
 
       # Available color modes with their associated icons and actions

data/lib/plutonium/ui/component/behaviour.rb

@@ -10,14 +10,6 @@ module Plutonium
         include Kit
         include Tokens
 
-        # Generate custom CSS class for theming
-        # @example
-        #   theme_class(:button) # => "pu-button"
-        #   theme_class(:button, variant: :table) # => "pu-button-table"
-        def theme_class(component, variant: nil, element: nil)
-          Theme.custom_class(component, variant:, element:)
-        end
-
         if Rails.env.development?
           def around_template(&)
             comment { "open:#{self.class.name}" }

data/lib/plutonium/ui/component/kit.rb

@@ -15,7 +15,7 @@ module Plutonium
       #     def view_template
       #       PageHeader(title: "Dashboard")
       #       TabList(items: tabs)
-      #       Panel(class: "mt-md") do
+      #       Panel(class: "mt-4") do
       #         content
       #       end
       #     end

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

@@ -34,12 +34,12 @@ module Plutonium
             return unless attachment.url.present?
 
             div(
-              class: "w-full aspect-square bg-white border border-gray-200 rounded-sm shadow hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
+              class: "w-full aspect-square bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
               data: {attachment_preview_target: "thumbnail"}
             ) do
               a(
                 href: attachment.url,
-                class: "block aspect-square overflow-hidden rounded-sm",
+                class: "block aspect-square overflow-hidden rounded-lg",
                 target: :blank,
                 data: {attachment_preview_target: "thumbnailLink"}
               ) do

data/lib/plutonium/ui/display/theme.rb

@@ -6,23 +6,23 @@ module Plutonium
       class Theme < Phlexi::Display::Theme
         def self.theme
           super.merge({
-            base: "pu-display",
+            base: "",
             value_wrapper: "max-h-[300px] overflow-y-auto",
-            fields_wrapper: "pu-display-fields p-lg grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-lg gap-y-2xl grid-flow-row-dense",
-            label: "pu-display-label text-base font-bold text-gray-500 dark:text-gray-400 mb-xs",
-            description: "pu-display-description text-sm text-gray-400 dark:text-gray-500",
-            placeholder: "pu-display-placeholder text-md text-gray-500 dark:text-gray-300 mb-xs italic",
-            string: "pu-display-string text-md text-gray-900 dark:text-white mb-xs whitespace-pre-line",
-            text: "pu-display-text text-md text-gray-900 dark:text-white mb-xs whitespace-pre-line",
-            link: "pu-display-link text-primary-600 dark:text-primary-500 whitespace-pre-line",
-            color: "pu-display-color flex items-center text-md text-gray-900 dark:text-white mb-xs whitespace-pre-line",
-            color_indicator: "pu-display-color-indicator w-10 h-10 rounded-full mr-sm", # max-h-fit
-            email: "pu-display-email flex items-center text-md text-primary-600 dark:text-primary-500 mb-xs whitespace-pre-line",
-            phone: "pu-display-phone flex items-center text-md text-primary-600 dark:text-primary-500 mb-xs whitespace-pre-line",
-            json: "pu-display-json text-sm text-gray-900 dark:text-white mb-xs whitespace-pre font-mono shadow-inner p-md",
-            prefixed_icon: "pu-display-icon w-8 h-8 mr-sm",
-            markdown: "pu-display-markdown format dark:format-invert format-primary",
-            attachment_value_wrapper: "pu-display-attachments grid grid-cols-[repeat(auto-fill,minmax(0,180px))]",
+            fields_wrapper: "p-6 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6 gap-y-10 grid-flow-row-dense",
+            label: "text-base font-bold text-gray-500 dark:text-gray-400 mb-1",
+            description: "text-sm text-gray-400 dark:text-gray-500",
+            placeholder: "text-md text-gray-500 dark:text-gray-300 mb-1 italic",
+            string: "text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
+            text: "text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
+            link: "text-primary-600 dark:text-primary-500 whitespace-pre-line",
+            color: "flex items-center text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
+            color_indicator: "w-10 h-10 rounded-full mr-2", # max-h-fit
+            email: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
+            phone: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
+            json: "text-sm text-gray-900 dark:text-white mb-1 whitespace-pre font-mono shadow-inner p-4",
+            prefixed_icon: "w-8 h-8 mr-2",
+            markdown: "format dark:format-invert format-primary",
+            attachment_value_wrapper: "grid grid-cols-[repeat(auto-fill,minmax(0,180px))]",
             phlexi_render: :string
           })
         end

data/lib/plutonium/ui/empty_card.rb

@@ -8,11 +8,8 @@ module Plutonium
       end
 
       def view_template
-        div(class: tokens(
-          theme_class(:card, variant: :empty),
-          "relative bg-surface dark:bg-surface-dark shadow-md sm:rounded-sm"
-        )) do
-          div(class: "p-lg flex items-center flex-col gap-sm") do
+        div(class: "relative bg-white dark:bg-gray-800 shadow-md") do
+          div(class: "p-6 flex items-center flex-col gap-2") do
             p(class: "text-gray-500 sm:text-lg dark:text-gray-200 text-center") { message }
             yield if block_given?
           end

data/lib/plutonium/ui/form/components/key_value_store.rb

@@ -60,7 +60,7 @@ module Plutonium
           end
 
           def render_key_value_pairs
-            div(class: "key-value-pairs space-y-sm", data_key_value_store_target: "container") do
+            div(class: "key-value-pairs space-y-2", data_key_value_store_target: "container") do
               pairs.each_with_index do |(key, value), index|
                 render_key_value_pair(key, value, index)
               end
@@ -69,7 +69,7 @@ module Plutonium
 
           def render_key_value_pair(key, value, index)
             div(
-              class: "key-value-pair flex items-center gap-sm p-sm border border-gray-200 dark:border-gray-700 rounded",
+              class: "key-value-pair flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
               data_key_value_store_target: "pair"
             ) do
               # Key input
@@ -79,7 +79,7 @@ module Plutonium
                 value: key,
                 name: "#{field_name}[#{index}][key]",
                 id: "#{field.dom.id}_#{index}_key",
-                class: "flex-1 px-sm py-xs text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
                 data_key_value_store_target: "keyInput"
               )
 
@@ -90,14 +90,14 @@ module Plutonium
                 value: value,
                 name: "#{field_name}[#{index}][value]",
                 id: "#{field.dom.id}_#{index}_value",
-                class: "flex-1 px-sm py-xs text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
                 data_key_value_store_target: "valueInput"
               )
 
               # Remove button
               button(
                 type: :button,
-                class: "px-sm py-xs text-red-600 hover:text-red-800 focus:outline-none",
+                class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
                 data_action: "key-value-store#removePair"
               ) do
                 plain "×"
@@ -106,11 +106,11 @@ module Plutonium
           end
 
           def render_add_button
-            div(class: "key-value-store-actions mt-sm") do
+            div(class: "key-value-store-actions mt-2") do
               button(
                 type: :button,
                 id: "#{field.dom.id}_add_button",
-                class: "inline-flex items-center px-sm py-xs text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700 dark:hover:bg-blue-800",
+                class: "inline-flex items-center px-3 py-1 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700 dark:hover:bg-blue-800",
                 data: {
                   action: "key-value-store#addPair",
                   key_value_store_target: "addButton"
@@ -124,7 +124,7 @@ module Plutonium
           def render_template
             template(data_key_value_store_target: "template") do
               div(
-                class: "key-value-pair flex items-center gap-sm p-sm border border-gray-200 dark:border-gray-700 rounded",
+                class: "key-value-pair flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
                 data_key_value_store_target: "pair"
               ) do
                 input(
@@ -132,7 +132,7 @@ module Plutonium
                   placeholder: "Key",
                   name: "#{field_name}[__INDEX__][key]",
                   id: "#{field.dom.id}___INDEX___key",
-                  class: "flex-1 px-sm py-xs text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                  class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
                   data_key_value_store_target: "keyInput"
                 )
 
@@ -141,13 +141,13 @@ module Plutonium
                   placeholder: "Value",
                   name: "#{field_name}[__INDEX__][value]",
                   id: "#{field.dom.id}___INDEX___value",
-                  class: "flex-1 px-sm py-xs text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                  class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
                   data_key_value_store_target: "valueInput"
                 )
 
                 button(
                   type: :button,
-                  class: "px-sm py-xs text-red-600 hover:text-red-800 focus:outline-none",
+                  class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
                   data_action: "key-value-store#removePair"
                 ) do
                   plain "×"

data/lib/plutonium/ui/form/components/secure_association.rb

@@ -8,7 +8,7 @@ module Plutonium
           include Plutonium::UI::Component::Methods
 
           def view_template
-            div(class: "flex space-x-xs") do
+            div(class: "flex space-x-1") do
               super
               render_add_button
             end
@@ -24,7 +24,7 @@ module Plutonium
             a(
               href: add_url,
               class:
-                "bg-gray-100 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-500 hover:bg-gray-200 border border-gray-300 rounded-sm p-sm focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none dark:text-white"
+                "bg-gray-100 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-500 hover:bg-gray-200 border border-gray-300 rounded-lg p-3 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none dark:text-white"
             ) do
               render Phlex::TablerIcons::Plus.new(class: "w-3 h-3")
             end

data/lib/plutonium/ui/form/components/uppy.rb

@@ -8,7 +8,7 @@ module Plutonium
           include Phlexi::Form::Components::Concerns::UploadsFile
 
           def view_template
-            div(class: tokens(field.dom.id, "flex flex-col-reverse gap-sm")) do
+            div(class: tokens(field.dom.id, "flex flex-col-reverse gap-2")) do
               div do
                 # Hidden field for ensuring removal of esp. has_one_attached attachments
                 input(type: :hidden, name: attributes[:name], multiple: attributes[:multiple], value: nil, autocomplete: "off", hidden: true)
@@ -16,7 +16,7 @@ module Plutonium
                 next if field.value.nil?
 
                 div(
-                  class: "attachment-preview-container grid grid-cols-[repeat(auto-fill,minmax(0,180px))] gap-md",
+                  class: "attachment-preview-container grid grid-cols-[repeat(auto-fill,minmax(0,180px))] gap-4",
                   data_controller: "attachment-preview-container"
                 ) do
                   render_existing_attachments
@@ -67,7 +67,7 @@ module Plutonium
             end
 
             div(
-              class: "attachment-preview group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm shadow-sm hover:shadow-md transition-all duration-300",
+              class: "attachment-preview group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300",
               data: {
                 controller: "attachment-preview",
                 attachment_preview_mime_type_value: attachment.content_type,
@@ -109,7 +109,7 @@ module Plutonium
 
           def render_filename(attachment)
             div(
-              class: "px-sm py-xs.5 text-sm text-gray-700 dark:text-gray-300 border-t border-gray-200 dark:border-gray-700 truncate text-center bg-white dark:bg-gray-800",
+              class: "px-2 py-1.5 text-sm text-gray-700 dark:text-gray-300 border-t border-gray-200 dark:border-gray-700 truncate text-center bg-white dark:bg-gray-800",
               title: attachment.filename
             ) do
               plain attachment.filename.to_s
@@ -119,7 +119,7 @@ module Plutonium
           def render_delete_button
             button(
               type: "button",
-              class: "w-full py-sm px-md text-sm text-red-600 dark:text-red-400 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/50 rounded-b-lg transition-colors duration-200 flex items-center justify-center gap-sm border-t border-gray-200 dark:border-gray-700",
+              class: "w-full py-2 px-4 text-sm text-red-600 dark:text-red-400 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/50 rounded-b-lg transition-colors duration-200 flex items-center justify-center gap-2 border-t border-gray-200 dark:border-gray-700",
               data: {action: "click->attachment-preview#remove"}
             ) do
               span(class: "bi bi-trash")

data/lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb

@@ -132,7 +132,7 @@ module Plutonium
 
           def render_nested_field_container(context, &)
             div(
-              class: "col-span-full space-y-sm my-md",
+              class: "col-span-full space-y-2 my-4",
               data: {
                 controller: "nested-resource-form-fields",
                 nested_resource_form_fields_limit_value: context.options[:limit]
@@ -193,7 +193,7 @@ module Plutonium
           def render_nested_fields_fieldset(nested, context)
             fieldset(
               data_new_record: !nested.object&.persisted?,
-              class: "nested-resource-form-fields border border-gray-200 dark:border-gray-700 rounded-sm p-md space-y-md relative"
+              class: "nested-resource-form-fields border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-4 relative"
             ) do
               render_nested_fields_fieldset_content(nested, context)
               render_nested_fields_delete_button(nested, context.options)
@@ -201,7 +201,7 @@ module Plutonium
           end
 
           def render_nested_fields_fieldset_content(nested, context)
-            div(class: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-md grid-flow-row-dense") do
+            div(class: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense") do
               render_nested_fields_hidden_fields(nested, context)
               render_nested_fields_visible_fields(nested, context)
             end
@@ -259,8 +259,8 @@ module Plutonium
           end
 
           def render_nested_fields_add_button_content(name)
-            span(class: "bg-secondary-700 text-white hover:bg-secondary-800 focus:ring-secondary-300 dark:bg-secondary-600 dark:hover:bg-secondary-700 dark:focus:ring-secondary-800 flex items-center justify-center px-md py-xs.5 text-sm font-medium rounded-sm focus:outline-none focus:ring-4") do
-              render Phlex::TablerIcons::Plus.new(class: "w-4 h-4 mr-xs")
+            span(class: "bg-secondary-700 text-white hover:bg-secondary-800 focus:ring-secondary-300 dark:bg-secondary-600 dark:hover:bg-secondary-700 dark:focus:ring-secondary-800 flex items-center justify-center px-4 py-1.5 text-sm font-medium rounded-lg focus:outline-none focus:ring-4") do
+              render Phlex::TablerIcons::Plus.new(class: "w-4 h-4 mr-1")
               span { "Add #{name.to_s.singularize.humanize}" }
             end
           end

data/lib/plutonium/ui/form/query.rb

@@ -11,7 +11,7 @@ module Plutonium
           options[:method] = :get
           attributes = mix(attributes.deep_merge(
             id: :search_form,
-            class!: "space-y-sm mb-md",
+            class!: "space-y-2 mb-4",
             controller: "form",
             data: {controller: "form", turbo_frame: nil}
           ))
@@ -67,7 +67,7 @@ module Plutonium
 
           search_query = query_object.search_query
           div(class: "relative") do
-            div(class: "absolute inset-y-0 left-0 flex items-center pl-sm pointer-events-none") do
+            div(class: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none") do
               svg(
                 class: "w-5 h-5 text-gray-500 dark:text-gray-400",
                 aria_hidden: "true",
@@ -87,7 +87,7 @@ module Plutonium
               .placeholder("Search...")
               .input_tag(
                 value: search_query,
-                class: "block w-full p-sm pl-10 text-sm text-gray-900 border border-gray-300 rounded-sm bg-page focus:ring-primary-500 focus:border-primary-500 dark:bg-elevated-dark dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
+                class: "block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
                 data: {
                   action: "form#submit",
                   turbo_permanent: true
@@ -99,10 +99,10 @@ module Plutonium
         def render_filter_fields
           return if query_object.filter_definitions.blank?
 
-          div(class: "flex flex-wrap items-center gap-md") do
+          div(class: "flex flex-wrap items-center gap-4") do
             span(class: "text-sm font-medium text-gray-900 dark:text-white") { "Filters:" }
-            div(class: "flex flex-wrap items-center gap-md mr-auto") do
-              div class: "flex flex-wrap items-center gap-md" do
+            div(class: "flex flex-wrap items-center gap-4 mr-auto") do
+              div class: "flex flex-wrap items-center gap-4" do
                 query_object.filter_definitions.each do |filter_name, definition|
                   nest_one filter_name do |nested|
                     definition.defined_inputs.each do |input_name, _|
@@ -112,22 +112,22 @@ module Plutonium
                 end
               end
             end
-            div(class: "flex flex-wrap items-center gap-sm") do
+            div(class: "flex flex-wrap items-center gap-2") do
               actions_wrapper do
                 render field(:submit).submit_button_tag(
                   name: nil,
-                  class!: "inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-sm text-sm px-md py-sm dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+                  class!: "inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
                 ) do
-                  render Phlex::TablerIcons::Filter.new(class: "w-4 h-4 mr-sm")
+                  render Phlex::TablerIcons::Filter.new(class: "w-4 h-4 mr-2")
                   plain "Apply Filters"
                 end
 
                 render field(:reset).submit_button_tag(
                   name: nil,
                   type: :reset,
-                  class!: "inline-flex items-center text-gray-900 bg-surface border border-gray-300 focus:outline-none hover:bg-interactive focus:ring-4 focus:ring-gray-200 font-medium rounded-sm text-sm px-md py-sm dark:bg-surface-dark dark:text-white dark:border-gray-600 dark:hover:bg-interactive-dark dark:hover:border-gray-600 dark:focus:ring-gray-700"
+                  class!: "inline-flex items-center text-gray-900 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-4 py-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
                 ) do
-                  render Phlex::TablerIcons::X.new(class: "w-4 h-4 mr-sm")
+                  render Phlex::TablerIcons::X.new(class: "w-4 h-4 mr-2")
                   plain "Clear Filters"
                 end
               end

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

@@ -41,14 +41,14 @@ module Plutonium
                   type: :submit,
                   name: "return_to",
                   value: request.url,
-                  class: tokens(theme_class(:form, element: :button_secondary), "px-md py-sm bg-secondary-600 text-white rounded hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500")
+                  class: "px-4 py-2 bg-secondary-600 text-white rounded-md hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500"
                 ) { "Create and add another" }
               else
                 button(
                   type: :submit,
                   name: "return_to",
                   value: request.url,
-                  class: tokens(theme_class(:form, element: :button_secondary), "px-md py-sm bg-secondary-600 text-white rounded hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500")
+                  class: "px-4 py-2 bg-secondary-600 text-white rounded-md hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500"
                 ) { "Update and continue editing" }
               end
             end

data/lib/plutonium/ui/form/theme.rb

@@ -6,43 +6,43 @@ module Plutonium
       class Theme < Phlexi::Form::Theme
         def self.theme
           super.merge({
-            base: "pu-form relative bg-surface dark:bg-surface-dark shadow-md sm:rounded-sm my-sm p-lg space-y-lg",
-            fields_wrapper: "pu-form-fields grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-md grid-flow-row-dense",
-            actions_wrapper: "pu-form-actions flex justify-end space-x-sm",
-            wrapper: "pu-form-field",
-            inner_wrapper: "pu-form-field-inner w-full",
+            base: "relative bg-white dark:bg-gray-800 shadow-md sm:rounded-lg my-3 p-6 space-y-6",
+            fields_wrapper: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense",
+            actions_wrapper: "flex justify-end space-x-2",
+            wrapper: nil,
+            inner_wrapper: "w-full",
             # errors
-            form_errors_wrapper: "pu-form-errors flex p-md mb-md text-sm text-red-800 rounded-sm bg-red-50 dark:bg-surface-dark dark:text-red-400",
-            form_errors_message: "pu-form-errors-message font-medium",
-            form_errors_list: "pu-form-errors-list mt-xs.5 list-disc list-inside",
+            form_errors_wrapper: "flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400",
+            form_errors_message: "font-medium",
+            form_errors_list: "mt-1.5 list-disc list-inside",
             # label themes
-            label: "pu-form-label mt-sm block mb-sm text-base font-bold",
+            label: "mt-2 block mb-2 text-base font-bold",
             invalid_label: "text-red-700 dark:text-red-500",
             valid_label: "text-green-700 dark:text-green-500",
             neutral_label: "text-gray-500 dark:text-gray-400",
             # input themes
-            input: "pu-form-input w-full p-sm border rounded shadow-sm font-medium text-sm dark:bg-elevated-dark focus:ring-2",
+            input: "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 focus:ring-2",
             invalid_input: "bg-red-50 border-red-500 dark:border-red-500 text-red-900 dark:text-red-500 placeholder-red-700 dark:placeholder-red-500 focus:ring-red-500 focus:border-red-500",
             valid_input: "bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",
             neutral_input: "border-gray-300 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500",
             # checkbox
-            checkbox: "pu-form-checkbox p-sm border rounded shadow-sm font-medium text-sm dark:bg-elevated-dark",
+            checkbox: "p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700",
             # radio buttons
-            radio_button: "pu-form-radio p-sm border shadow-sm font-medium text-sm dark:bg-elevated-dark",
+            radio_button: "p-2 border shadow-sm font-medium text-sm dark:bg-gray-700",
             # color
             color: "pu-color-input appearance-none bg-transparent border-none cursor-pointer w-10 h-10",
             invalid_color: nil,
             valid_color: nil,
             neutral_color: nil,
             # file
-            # file: "w-full border rounded shadow-sm font-medium text-sm dark:bg-elevated-dark focus:outline-none",
-            file: "pu-form-file w-full border rounded shadow-sm font-medium text-sm dark:bg-elevated-dark border-gray-300 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500 focus:outline-none focus:ring-2 [&::file-selector-button]:mr-sm [&::file-selector-button]:px-md [&::file-selector-button]:py-sm [&::file-selector-button]:bg-page [&::file-selector-button]:border-0 [&::file-selector-button]:rounded-l-md [&::file-selector-button]:text-sm [&::file-selector-button]:font-medium [&::file-selector-button]:text-gray-700 [&::file-selector-button]:hover:bg-interactive [&::file-selector-button]:cursor-pointer dark:[&::file-selector-button]:bg-gray-600 dark:[&::file-selector-button]:text-gray-200 dark:[&::file-selector-button]:hover:bg-gray-500",
+            # file: "w-full border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 focus:outline-none",
+            file: "w-full border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 border-gray-300 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500 focus:outline-none focus:ring-2 [&::file-selector-button]:mr-3 [&::file-selector-button]:px-4 [&::file-selector-button]:py-2 [&::file-selector-button]:bg-gray-50 [&::file-selector-button]:border-0 [&::file-selector-button]:rounded-l-md [&::file-selector-button]:text-sm [&::file-selector-button]:font-medium [&::file-selector-button]:text-gray-700 [&::file-selector-button]:hover:bg-gray-100 [&::file-selector-button]:cursor-pointer dark:[&::file-selector-button]:bg-gray-600 dark:[&::file-selector-button]:text-gray-200 dark:[&::file-selector-button]:hover:bg-gray-500",
             # hint themes
-            hint: "pu-form-hint mt-sm text-sm text-gray-500 dark:text-gray-200 whitespace-pre",
+            hint: "mt-2 text-sm text-gray-500 dark:text-gray-200 whitespace-pre",
             # error themes
-            error: "pu-form-error mt-sm text-sm text-red-600 dark:text-red-500",
+            error: "mt-2 text-sm text-red-600 dark:text-red-500",
             # button themes
-            button: "pu-form-button px-md py-sm bg-primary-600 text-white rounded hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500",
+            button: "px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500",
             # flatpickr
             flatpickr: :input,
             valid_flatpickr: :valid_input,

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

@@ -26,9 +26,9 @@ module Plutonium
 
         def html_attributes = {lang:, data_controller: "color-mode"}
 
-        def body_attributes = {class: tokens(theme_class(:layout, element: :body), "antialiased min-h-screen bg-page dark:bg-page-dark")}
+        def body_attributes = {class: "antialiased min-h-screen bg-gray-50 dark:bg-gray-900"}
 
-        def main_attributes = {class: tokens(theme_class(:layout, element: :main), "p-md min-h-screen")}
+        def main_attributes = {class: "p-4 min-h-screen"}
 
         def render_head
           head {