plutonium 0.34.1 → 0.35.0

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

@@ -6,68 +6,83 @@ 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",
+            # Form structure
+            base: "pu-card my-4 p-8 space-y-8",
+            fields_wrapper: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6 grid-flow-row-dense",
+            actions_wrapper: "flex justify-end gap-3 pt-4 border-t border-[var(--pu-border-muted)]",
             wrapper: nil,
             inner_wrapper: "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",
-            # label themes
-            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: "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: "p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700",
-            # radio buttons
-            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",
+
+            # Form errors
+            form_errors_wrapper: "flex items-start gap-3 p-4 mb-6 text-base text-danger-800 rounded-[var(--pu-radius-lg)] bg-danger-50 border border-danger-200 dark:bg-danger-950/30 dark:border-danger-800 dark:text-danger-300",
+            form_errors_message: "font-semibold",
+            form_errors_list: "mt-2 list-disc list-inside text-sm",
+
+            # Label themes
+            label: "mt-2 block mb-2 text-base font-semibold",
+            invalid_label: "text-danger-700 dark:text-danger-400",
+            valid_label: "text-success-700 dark:text-success-400",
+            neutral_label: "text-[var(--pu-text)]",
+
+            # Input themes
+            input: "pu-input",
+            invalid_input: "pu-input pu-input-invalid",
+            valid_input: "pu-input pu-input-valid",
+            neutral_input: "",
+
+            # Checkbox
+            checkbox: "pu-checkbox",
+
+            # Radio buttons
+            radio_button: "pu-checkbox",
+
+            # Color
+            color: "pu-color-input appearance-none bg-transparent border-none cursor-pointer w-12 h-12 rounded-lg",
             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",
-            # hint themes
-            hint: "mt-2 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",
-            # 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",
-            # flatpickr
+
+            # File input
+            file: "pu-input py-2 [&::file-selector-button]:mr-4 [&::file-selector-button]:px-4 [&::file-selector-button]:py-2 [&::file-selector-button]:bg-[var(--pu-surface-alt)] [&::file-selector-button]:border-0 [&::file-selector-button]:rounded-md [&::file-selector-button]:text-sm [&::file-selector-button]:font-semibold [&::file-selector-button]:text-[var(--pu-text-muted)] [&::file-selector-button]:hover:bg-[var(--pu-border)] [&::file-selector-button]:cursor-pointer [&::file-selector-button]:transition-colors",
+
+            # Hint themes
+            hint: "pu-hint whitespace-pre",
+
+            # Error themes
+            error: "pu-error",
+
+            # Button themes
+            button: "pu-btn pu-btn-md pu-btn-primary",
+
+            # Flatpickr
             flatpickr: :input,
             valid_flatpickr: :valid_input,
             invalid_flatpickr: :invalid_input,
             neutral_flatpickr: :neutral_input,
-            # int_tel_input
+
+            # Int tel input
             int_tel_input: :input,
             valid_int_tel_input: :valid_input,
             invalid_int_tel_input: :invalid_input,
             neutral_int_tel_input: :neutral_input,
+
+            # Uppy file upload
             uppy: :file,
             valid_uppy: :valid_file,
             invalid_uppy: :invalid_file,
             neutral_uppy: :neutral_file,
 
+            # Association
             association: :select,
             valid_association: :valid_select,
             invalid_association: :invalid_select,
             neutral_association: :neutral_select,
 
+            # Polymorphic association
             polymorpic_association: :association,
             valid_polymorpic_association: :valid_association,
             invalid_polymorpic_association: :invalid_association,
             neutral_polymorpic_association: :neutral_association
-
           })
         end
       end

data/lib/plutonium/ui/frame_navigator_panel.rb

@@ -12,7 +12,7 @@ module Plutonium
           button(
             title: @label,
             style: "display: none",
-            class: "text-gray-600 dark:text-gray-300",
+            class: "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors",
             **@attributes
           ) {
             render @icon.new(class: "w-6 h-6")
@@ -31,7 +31,7 @@ module Plutonium
         def view_template
           a(
             title: @label,
-            class: "text-gray-600 dark:text-gray-300",
+            class: "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors",
             href: @href,
             **@attributes
           ) {

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

@@ -26,7 +26,7 @@ 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: "antialiased min-h-screen bg-[var(--pu-body)]"}
 
         def main_attributes = {class: "p-4 min-h-screen"}
 

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: "bg-[var(--pu-surface)] border-b border-[var(--pu-border)] px-4 py-2.5 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-[var(--pu-surface)]") do
             render ColorModeSelector.new
           end
         end
@@ -80,10 +80,7 @@ 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
-                    focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-200
-                    dark:hover:bg-gray-700 dark:hover:text-white)
+            class: "p-2 mr-2 text-[var(--pu-text-muted)] rounded-lg cursor-pointer lg:hidden hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] focus:bg-[var(--pu-surface-alt)] focus:ring-2 focus:ring-[var(--pu-border)] transition-colors"
           ) do
             render_toggle_icons
           end
@@ -95,7 +92,7 @@ module Plutonium
           a(href: root_path, class: "flex items-center space-x-2 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
+              span(class: "self-center text-2xl font-semibold whitespace-nowrap text-[var(--pu-text)] hidden xs:block") do
                 render brand_name_slot
               end
             end

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

@@ -17,7 +17,7 @@ module Plutonium
         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: "w-full bg-[var(--pu-surface)] rounded-[var(--pu-radius-lg)] border border-[var(--pu-border)] md:mt-0 sm:max-w-md xl:p-0", style: "box-shadow: var(--pu-shadow-md)") {
             div(class: "p-6 space-y-4 md:space-y-6 sm:p-8", &)
           }
 
@@ -25,16 +25,16 @@ module Plutonium
         end
 
         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"
+          link_to root_path, class: "flex items-center text-2xl font-semibold text-[var(--pu-text)] mb-2" do
+            helpers.resource_logo_tag classname: "w-24 h-24 mr-2 rounded-[var(--pu-radius-md)]"
           end
         end
 
         def render_links
-          div(class: "mt-4 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"
-          }
+          link_to root_path, class: "mt-4 inline-flex items-center gap-1.5 font-medium text-secondary-600 dark:text-secondary-400 hover:underline transition-colors" do
+            render Phlex::TablerIcons::Home2.new(class: "size-5")
+            plain "Home"
+          end
         end
       end
     end

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

@@ -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: "overflow-y-auto py-5 px-3 h-full bg-[var(--pu-surface)] border-r border-[var(--pu-border)]",
             &
           )
         end

data/lib/plutonium/ui/nav_grid_menu.rb

@@ -32,13 +32,13 @@ module Plutonium
 
         def view_template
           a(
-            class: "block p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group",
+            class: "block p-4 rounded-[var(--pu-radius-md)] hover:bg-[var(--pu-surface-alt)] group transition-colors",
             href: @href
           ) do
             render @icon.new(
-              class: "text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400 w-8 h-8 mx-auto"
+              class: "text-[var(--pu-text-muted)] group-hover:text-[var(--pu-text)] w-8 h-8 mx-auto transition-colors"
             )
-            div(class: "text-sm text-gray-900 dark:text-white text-center") { @name }
+            div(class: "text-sm text-[var(--pu-text)] text-center mt-1") { @name }
           end
         end
       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: "p-2 text-[var(--pu-text-muted)] rounded-[var(--pu-radius-md)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] focus:ring-2 focus:ring-[var(--pu-border)] transition-colors"
         ) do
           span(class: "sr-only") { "View #{@label}" }
           render @icon.new(class: "w-6 h-6")
@@ -76,11 +76,12 @@ 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: "hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-[var(--pu-surface)] divide-y divide-[var(--pu-border-muted)] border border-[var(--pu-border)] rounded-[var(--pu-radius-lg)]",
+          style: "box-shadow: var(--pu-shadow-lg)",
           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-2 px-4 text-base font-medium text-center text-[var(--pu-text)] bg-[var(--pu-surface-alt)]"
           ) { @label }
 
           div(class: "grid grid-cols-3 gap-4 p-4") do

data/lib/plutonium/ui/nav_user.rb

@@ -18,7 +18,7 @@ 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",
+              "flex justify-between items-center py-2 px-4 text-sm text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] transition-colors",
               @attributes.delete(:class)
             ),
             href: @href,
@@ -40,7 +40,7 @@ module Plutonium
 
         def view_template
           ul(
-            class: "text-gray-700 dark:text-gray-300",
+            class: "text-[var(--pu-text)]",
             aria: {labelledby: "user-nav-dropdown-toggle"}
           ) do
             link_slots.each do |link|
@@ -78,20 +78,20 @@ 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: "flex mx-3 text-sm rounded-full md:mr-0 focus:ring-2 focus:ring-[var(--pu-border)] focus:ring-offset-2 transition-shadow",
           aria: {expanded: "false"},
           id: "user-nav-dropdown-toggle",
           data: {resource_drop_down_target: "trigger"}
         ) do
           span(class: "sr-only") { "Open user menu" }
-          img(class: "w-8 h-8 rounded-full", src: @avatar_url, alt: "avatar")
+          img(class: "w-8 h-8 rounded-full ring-2 ring-[var(--pu-border)]", src: @avatar_url, alt: "avatar")
         end
       end
 
       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: "flex mx-3 p-1 text-sm border border-[var(--pu-border)] text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] rounded-full md:mr-0 focus:ring-2 focus:ring-[var(--pu-border)] focus:ring-offset-2 transition-colors",
           aria: {expanded: "false"},
           id: "user-nav-dropdown-toggle",
           data: {resource_drop_down_target: "trigger"}
@@ -103,14 +103,15 @@ 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: "hidden z-50 my-4 w-56 text-base list-none bg-[var(--pu-surface)] divide-y divide-[var(--pu-border-muted)] border border-[var(--pu-border)] rounded-[var(--pu-radius-lg)]",
+          style: "box-shadow: var(--pu-shadow-lg)",
           data: {resource_drop_down_target: "menu"}
         ) do
           div(class: "py-3 px-4") do
             if @name.present?
-              span(class: "block text-sm font-semibold text-gray-900 dark:text-white") { @name }
+              span(class: "block text-sm font-semibold text-[var(--pu-text)]") { @name }
             end
-            span(class: "block text-sm text-gray-900 truncate dark:text-white") { @email }
+            span(class: "block text-sm text-[var(--pu-text-muted)] truncate") { @email }
           end
 
           section_slots.each { |section| render section }

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

@@ -20,22 +20,22 @@ 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
-                      border border-gray-200 dark:border-gray-700
-                      shadow-lg dark:shadow-gray-900/20
+              class: "rounded-[var(--pu-radius-lg)] w-full max-w-3xl
+                      bg-[var(--pu-surface)]
+                      border border-[var(--pu-border)]
                       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
                       hidden open:flex flex-col
                       relative opacity-0 open:opacity-100
                       transition-opacity duration-300 ease-in-out",
+              style: "box-shadow: var(--pu-shadow-lg)",
               data: {controller: "remote-modal"}
             ) do
               # 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-2 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors duration-200",
                 data: {action: "remote-modal#close"},
                 "aria-label": "Close dialog"
               ) do

data/lib/plutonium/ui/page_header.rb

@@ -8,7 +8,7 @@ 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: "sm:flex sm:space-y-0 sm:gap-6 sm:flex-row items-center justify-between space-y-4 mb-8") {
           div {
             phlexi_render(@title) {
               render_title @title
@@ -18,33 +18,52 @@ module Plutonium
               render_description @description
             }
           }
-          div(class: "flex flex-row space-x-2") {
-            render_actions
-          }
+          render_actions if @actions.any?
         }
       end
 
       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: "mb-2 text-3xl font-bold leading-none tracking-tight text-[var(--pu-text)] md:text-4xl") {
           title
         }
       end
 
       def render_description(description)
-        p(class: "text-gray-500 dark:text-gray-400") {
+        p(class: "text-lg text-[var(--pu-text-muted)]") {
           description
         }
       end
 
       def render_actions
-        @actions.each do |action|
-          subject = resource_record? || resource_class
-          url = route_options_to_url(action.route_options, subject)
-          ActionButton(action, url:)
+        div(class: "flex flex-row items-center gap-2") do
+          # Primary actions shown as prominent buttons
+          primary_actions.each do |action|
+            url = route_options_to_url(action.route_options, action_subject)
+            ActionButton(action, url:)
+          end
+
+          # Secondary and danger actions in a dropdown
+          if dropdown_actions.any?
+            div(class: "relative") do
+              ActionsDropdown(actions: dropdown_actions, subject: action_subject)
+            end
+          end
         end
       end
+
+      def action_subject
+        @action_subject ||= resource_record? || resource_class
+      end
+
+      def primary_actions
+        @primary_actions ||= @actions.select { |a| a.category.primary? }.sort_by(&:position)
+      end
+
+      def dropdown_actions
+        @dropdown_actions ||= @actions.reject { |a| a.category.primary? }.sort_by(&:position)
+      end
     end
   end
 end

data/lib/plutonium/ui/panel.rb

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

data/lib/plutonium/ui/sidebar_menu.rb

@@ -14,33 +14,33 @@ module Plutonium
           super.merge({
             # Base container styles
             nav: "space-y-2 pb-6 mb-6",
-            items_container: "space-y-2",
+            items_container: "space-y-1",
 
             # Item wrapper styles
             item_wrapper: "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: "flex items-center p-2.5 text-base font-medium text-[var(--pu-text)] rounded-[var(--pu-radius-md)] hover:bg-[var(--pu-surface-alt)] group transition-colors",
+            item_span: "flex items-center p-2.5 w-full text-base font-medium text-[var(--pu-text)] rounded-[var(--pu-radius-md)] transition-colors group hover:bg-[var(--pu-surface-alt)]",
 
             # Label and content styles
             item_label: ->(depth) { "flex-1 #{(depth > 0) ? "ml-9" : "ml-3"} 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: "inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-700 bg-primary-100 dark:bg-primary-900/50 dark:text-primary-300",
+            trailing_badge: "inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-[var(--pu-text-muted)] bg-[var(--pu-surface-alt)] rounded-full",
 
             # 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: "text-[var(--pu-text-muted)] transition-colors group-hover:text-[var(--pu-text)]",
 
             # Collapse icon styles
-            collapse_icon: "w-6 h-6 ml-auto transition-transform duration-200",
+            collapse_icon: "w-6 h-6 ml-auto transition-transform duration-200 text-[var(--pu-text-muted)]",
             collapse_icon_expanded: "transform rotate-180",
 
             # Submenu styles
-            sub_items_container: "hidden py-2 space-y-2",
+            sub_items_container: "hidden py-2 space-y-1",
 
             # Due to how we use turbo frames, we can't set active states
             active: nil

data/lib/plutonium/ui/skeleton_table.rb

@@ -4,22 +4,21 @@ module Plutonium
       def view_template
         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"
+          class: "pu-card p-6 space-y-4 divide-y divide-[var(--pu-border-muted)] motion-safe:animate-pulse"
         ) 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-3 bg-[var(--pu-border-strong)] rounded-full w-24 mb-3")
+              div(class: "w-32 h-2 bg-[var(--pu-border)] rounded-full")
             end
-            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
+            div(class: "h-3 bg-[var(--pu-border)] rounded-full w-12")
           end
           div(class: "flex items-center justify-between pt-4") 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-3 bg-[var(--pu-border-strong)] rounded-full w-24 mb-3")
+              div(class: "w-32 h-2 bg-[var(--pu-border)] rounded-full")
             end
-            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
+            div(class: "h-3 bg-[var(--pu-border)] rounded-full w-12")
           end
           span(class: "sr-only") { "Loading..." }
         end

data/lib/plutonium/ui/tab_list.rb

@@ -21,18 +21,18 @@ module Plutonium
       def view_template
         div(
           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"
+          data_resource_tab_list_active_classes_value: "focus:outline-none text-primary-600 border-primary-600 dark:text-primary-400 dark:border-primary-400",
+          data_resource_tab_list_in_active_classes_value: "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] border-transparent hover:border-[var(--pu-border-strong)]"
         ) do
-          div(class: "mb-4 border-b border-gray-200 dark:border-gray-700") do
+          div(class: "mb-6 border-b border-[var(--pu-border)]") do
             ul(
-              class: "flex flex-wrap -mb-px text-sm font-medium text-center space-x-2",
+              class: "flex flex-wrap -mb-px text-base font-semibold text-center gap-1",
               role: "tablist"
             ) do
               @tabs.each do |tab|
                 li(role: "presentation") do
                   button(
-                    class: "inline-block p-4 border-b-2 rounded-t-lg",
+                    class: "inline-block px-5 py-3 border-b-2 rounded-t-lg transition-colors",
                     id: "#{tab[:identifier]}-tab",
                     type: "button",
                     role: "tab",

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

@@ -6,6 +6,9 @@ module Plutonium
       class Base < Phlexi::Table::Base
         include Plutonium::UI::Component::Behaviour
 
+        # Use custom SelectionColumn with Stimulus data attributes
+        class SelectionColumn < Plutonium::UI::Table::Components::SelectionColumn; end
+
         class Display < Plutonium::UI::Display::Base
           class Builder < Builder
             def attachment_tag(**, &)

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

@@ -19,7 +19,8 @@ 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-[var(--pu-surface)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] hover:bg-[var(--pu-surface-alt)] transition-all duration-300",
+              style: "box-shadow: var(--pu-shadow-sm)",
               data: {
                 controller: "attachment-preview",
                 attachment_preview_mime_type_value: attachment.content_type,
@@ -30,7 +31,7 @@ module Plutonium
             ) do
               a(
                 href: attachment.url,
-                class: "block aspect-square overflow-hidden rounded-lg",
+                class: "block aspect-square overflow-hidden rounded-[var(--pu-radius-md)]",
                 target: :blank,
                 data: {
                   attachment_preview_target: "thumbnailLink"
@@ -44,7 +45,7 @@ module Plutonium
                   )
                 else
                   div(
-                    class: "w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 font-mono"
+                    class: "w-full h-full flex items-center justify-center text-[var(--pu-text-muted)] font-mono"
                   ) do
                     ".#{attachment_extension(attachment)}"
                   end