plutonium 0.28.0 → 0.29.0

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

@@ -6,23 +6,23 @@ module Plutonium
       class Theme < Phlexi::Display::Theme
         def self.theme
           super.merge({
-            base: "",
+            base: "pu-display",
             value_wrapper: "max-h-[300px] overflow-y-auto",
-            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))]",
+            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))]",
             phlexi_render: :string
           })
         end

data/lib/plutonium/ui/empty_card.rb

@@ -8,8 +8,11 @@ module Plutonium
       end
 
       def view_template
-        div(class: "relative bg-white dark:bg-gray-800 shadow-md") do
-          div(class: "p-6 flex items-center flex-col gap-2") do
+        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
             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-2", data_key_value_store_target: "container") do
+            div(class: "key-value-pairs space-y-sm", 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-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
+              class: "key-value-pair flex items-center gap-sm p-sm 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-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",
+                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",
                 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-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",
+                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",
                 data_key_value_store_target: "valueInput"
               )
 
               # Remove button
               button(
                 type: :button,
-                class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
+                class: "px-sm py-xs 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-2") do
+            div(class: "key-value-store-actions mt-sm") do
               button(
                 type: :button,
                 id: "#{field.dom.id}_add_button",
-                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",
+                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",
                 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-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
+                class: "key-value-pair flex items-center gap-sm p-sm 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-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",
+                  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",
                   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-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",
+                  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",
                   data_key_value_store_target: "valueInput"
                 )
 
                 button(
                   type: :button,
-                  class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
+                  class: "px-sm py-xs 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-1") do
+            div(class: "flex space-x-xs") 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-lg p-3 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-sm p-sm 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-2")) do
+            div(class: tokens(field.dom.id, "flex flex-col-reverse gap-sm")) 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-4",
+                  class: "attachment-preview-container grid grid-cols-[repeat(auto-fill,minmax(0,180px))] gap-md",
                   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-lg 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-sm 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-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",
+              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",
               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-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",
+              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",
               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-2 my-4",
+              class: "col-span-full space-y-sm my-md",
               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-lg p-4 space-y-4 relative"
+              class: "nested-resource-form-fields border border-gray-200 dark:border-gray-700 rounded-sm p-md space-y-md 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-4 grid-flow-row-dense") do
+            div(class: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-md 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-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(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 { "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-2 mb-4",
+            class!: "space-y-sm mb-md",
             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-3 pointer-events-none") do
+            div(class: "absolute inset-y-0 left-0 flex items-center pl-sm 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-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",
+                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",
                 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-4") do
+          div(class: "flex flex-wrap items-center gap-md") do
             span(class: "text-sm font-medium text-gray-900 dark:text-white") { "Filters:" }
-            div(class: "flex flex-wrap items-center gap-4 mr-auto") do
-              div class: "flex flex-wrap items-center gap-4" do
+            div(class: "flex flex-wrap items-center gap-md mr-auto") do
+              div class: "flex flex-wrap items-center gap-md" 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-2") do
+            div(class: "flex flex-wrap items-center gap-sm") 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-lg text-sm px-4 py-2 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-sm text-sm px-md py-sm 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-2")
+                  render Phlex::TablerIcons::Filter.new(class: "w-4 h-4 mr-sm")
                   plain "Apply Filters"
                 end
 
                 render field(:reset).submit_button_tag(
                   name: nil,
                   type: :reset,
-                  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"
+                  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"
                 ) do
-                  render Phlex::TablerIcons::X.new(class: "w-4 h-4 mr-2")
+                  render Phlex::TablerIcons::X.new(class: "w-4 h-4 mr-sm")
                   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: "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"
+                  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")
                 ) { "Create and add another" }
               else
                 button(
                   type: :submit,
                   name: "return_to",
                   value: request.url,
-                  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"
+                  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")
                 ) { "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: "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",
+            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",
             # errors
-            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",
+            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",
             # label themes
-            label: "mt-2 block mb-2 text-base font-bold",
+            label: "pu-form-label mt-sm block mb-sm 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: "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 focus:ring-2",
+            input: "pu-form-input w-full p-sm border rounded shadow-sm font-medium text-sm dark:bg-elevated-dark 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: "p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700",
+            checkbox: "pu-form-checkbox p-sm border rounded shadow-sm font-medium text-sm dark:bg-elevated-dark",
             # radio buttons
-            radio_button: "p-2 border shadow-sm font-medium text-sm dark:bg-gray-700",
+            radio_button: "pu-form-radio p-sm border shadow-sm font-medium text-sm dark:bg-elevated-dark",
             # 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-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",
+            # 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",
             # hint themes
-            hint: "mt-2 text-sm text-gray-500 dark:text-gray-200 whitespace-pre",
+            hint: "pu-form-hint mt-sm text-sm text-gray-500 dark:text-gray-200 whitespace-pre",
             # error themes
-            error: "mt-2 text-sm text-red-600 dark:text-red-500",
+            error: "pu-form-error mt-sm text-sm text-red-600 dark:text-red-500",
             # button themes
-            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",
+            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",
             # 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: "antialiased min-h-screen bg-gray-50 dark:bg-gray-900"}
+        def body_attributes = {class: tokens(theme_class(:layout, element: :body), "antialiased min-h-screen bg-page dark:bg-page-dark")}
 
-        def main_attributes = {class: "p-4 min-h-screen"}
+        def main_attributes = {class: tokens(theme_class(:layout, element: :main), "p-md min-h-screen")}
 
         def render_head
           head {

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