plutonium 0.28.0 → 0.29.0

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

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

data/lib/plutonium/ui/page_header.rb

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

data/lib/plutonium/ui/panel.rb

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

data/lib/plutonium/ui/sidebar_menu.rb

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

data/lib/plutonium/ui/skeleton_table.rb

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

data/lib/plutonium/ui/tab_list.rb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,28 +6,28 @@ module Plutonium
       class Theme < Phlexi::Table::Theme
         def self.theme
           super.merge({
-            selection_checkbox: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600",
+            selection_checkbox: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-elevated-dark dark:border-gray-600",
             name_column: "font-medium text-gray-900 whitespace-nowrap dark:text-white",
             align_start: "text-start",
             align_end: "text-end",
-            wrapper: "relative overflow-x-auto shadow-md sm:rounded-lg",
-            base: "w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400",
-            caption: "p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800",
-            description: "mt-1 text-sm font-normal text-gray-500 dark:text-gray-400",
-            header: "text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400",
-            header_grouping_cell: "px-6 py-3 text-center text-sm border-b border-t border-r last:border-r-0 dark:border-gray-800",
-            header_cell: "px-6 py-3",
+            wrapper: "pu-table-wrapper relative overflow-x-auto shadow-md sm:rounded-sm",
+            base: "pu-table w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400",
+            caption: "p-md text-lg font-semibold text-left rtl:text-right text-gray-900 bg-surface dark:text-white dark:bg-surface-dark",
+            description: "mt-xs text-sm font-normal text-gray-500 dark:text-gray-400",
+            header: "pu-table-header text-xs text-gray-700 uppercase bg-elevated dark:bg-elevated-dark dark:text-gray-400",
+            header_grouping_cell: "px-lg py-sm text-center text-sm border-b border-t border-r last:border-r-0 dark:border-gray-800",
+            header_cell: "pu-table-header-cell px-lg py-sm",
             header_cell_content_wrapper: "inline-flex items-center",
             header_cell_sort_wrapper: "flex items-center",
-            header_cell_sort_indicator: "ml-1.5",
-            body_row: "bg-white border-b last:border-none dark:bg-gray-800 dark:border-gray-700",
-            body_cell: "px-6 py-4 whitespace-pre max-w-[450px] overflow-hidden text-ellipsis transition-all duration-300 ease-in-out",
+            header_cell_sort_indicator: "ml-xs.5",
+            body_row: "pu-table-row bg-surface border-b last:border-none dark:bg-surface-dark dark:border-gray-700",
+            body_cell: "pu-table-cell px-lg py-md whitespace-pre max-w-[450px] overflow-hidden text-ellipsis transition-all duration-300 ease-in-out",
             sort_icon: "w-3 h-3",
             sort_icon_active: "text-primary-600",
             sort_icon_inactive: "text-gray-600 dark:text-gray-500",
-            sort_index_clear_link: "ml-2",
+            sort_index_clear_link: "ml-sm",
             sort_index_clear_link_text: "text-xs font-bold text-gray-600 dark:text-gray-500",
-            sort_index_clear_link_icon: "ml-1 text-red-600"
+            sort_index_clear_link_icon: "ml-xs text-red-600"
           })
         end
       end

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.28.0"
+  VERSION = "0.29.0"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/lib/tasks/release.rake

@@ -46,10 +46,19 @@ namespace :release do
     # Update version.rb
     version_file = "lib/plutonium/version.rb"
     content = File.read(version_file)
-    updated_content = content.gsub(/VERSION = "[\d.]+"/, %{VERSION = "#{version}"})
+    updated_content = content.gsub(/VERSION = "[\d.]+"/, %(VERSION = "#{version}"))
     File.write(version_file, updated_content)
     puts "✓ Updated #{version_file}"
 
+    # Update package.json version
+    package_json_file = "package.json"
+    if File.exist?(package_json_file)
+      package_content = File.read(package_json_file)
+      updated_package = package_content.gsub(/"version":\s*"[\d.]+"/, %{"version": "#{version}"})
+      File.write(package_json_file, updated_package)
+      puts "✓ Updated #{package_json_file}"
+    end
+
     # Generate changelog using git-cliff
     if system("which git-cliff > /dev/null 2>&1")
       system("git-cliff --tag v#{version} -o CHANGELOG.md")
@@ -68,12 +77,19 @@ namespace :release do
     puts "3. Create and push the tag:"
     puts "   git tag v#{version}"
     puts "   git push origin main --tags"
-    puts "4. Build and release the gem:"
+    puts "4. Build and release:"
     puts "   rake release:publish"
   end
 
+  desc "Build front-end assets"
+  task :build_frontend do
+    puts "Building front-end assets..."
+    system("npm run build") || abort("Front-end build failed")
+    puts "✓ Built front-end assets"
+  end
+
   desc "Publish the gem to RubyGems"
-  task :publish do
+  task :publish_gem do
     # Reload version constant in case it was updated
     load "lib/plutonium/version.rb"
     version = Plutonium::VERSION
@@ -93,6 +109,30 @@ namespace :release do
     File.delete(gem_file) if File.exist?(gem_file)
   end
 
+  desc "Publish the npm package"
+  task :publish_npm do
+    puts "Publishing npm package..."
+
+    # Check if user is logged in to npm
+    unless system("npm whoami > /dev/null 2>&1")
+      puts "⚠ You are not logged in to npm. Please run: npm login"
+      abort("npm authentication required")
+    end
+
+    # Publish to npm
+    system("npm publish --access public") || abort("npm publish failed")
+
+    # Get version from package.json
+    require "json"
+    package_json = JSON.parse(File.read("package.json"))
+    version = package_json["version"]
+
+    puts "✓ Published @radioactive-labs/plutonium #{version} to npm"
+  end
+
+  desc "Publish both gem and npm package"
+  task publish: [:build_frontend, :publish_gem, :publish_npm]
+
   desc "Full release workflow"
   task :full, [:version] do |_t, args|
     version = args[:version]
@@ -133,8 +173,8 @@ namespace :release do
     # Push commit (without tags yet)
     system("git push origin #{current_branch}")
 
-    # Publish gem (do this BEFORE tagging)
-    puts "\nPublishing gem to RubyGems..."
+    # Build and publish (do this BEFORE tagging)
+    puts "\nBuilding and publishing gem and npm package..."
     Rake::Task["release:publish"].invoke
 
     # Only tag and push tag if publish succeeded

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.4.11",
+  "version": "0.29.0",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/css/core.css

@@ -8,9 +8,9 @@
 }
 
 .pu-color-input::-webkit-color-swatch {
-  @apply border-none rounded-lg;
+  @apply border-none rounded-sm;
 }
 
 .pu-color-input::-moz-color-swatch {
-  @apply border-none rounded-lg;
+  @apply border-none rounded-sm;
 }

data/src/css/easymde.css

@@ -6,7 +6,7 @@
 
 /* Container and CodeMirror theming */
 .EasyMDEContainer .CodeMirror {
-  @apply border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100;
+  @apply border-gray-300 bg-surface text-gray-900 dark:border-gray-600 dark:bg-surface-dark dark:text-gray-100;
 }
 
 .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
@@ -31,7 +31,7 @@
 
 /* Gutter theming */
 .CodeMirror-gutters {
-  @apply border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700;
+  @apply border-gray-300 bg-elevated dark:border-gray-600 dark:bg-elevated-dark;
 }
 
 .CodeMirror-linenumber {
@@ -44,11 +44,11 @@
 
 /* Toolbar theming */
 .editor-toolbar {
-  @apply border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800;
+  @apply border-gray-300 bg-surface dark:border-gray-600 dark:bg-surface-dark;
 }
 
 .editor-toolbar.fullscreen {
-  @apply bg-white dark:bg-gray-800;
+  @apply bg-surface dark:bg-surface-dark;
 }
 
 .editor-toolbar button {
@@ -71,7 +71,7 @@
 
 /* Preview theming */
 .editor-preview {
-  @apply bg-gray-50 text-gray-900 dark:bg-gray-800 dark:text-gray-100;
+  @apply bg-elevated text-gray-900 dark:bg-surface-dark dark:text-gray-100;
 }
 
 .editor-preview pre {
@@ -84,7 +84,7 @@
 }
 
 .editor-preview-side {
-  @apply border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800;
+  @apply border-gray-300 bg-surface dark:border-gray-600 dark:bg-surface-dark;
 }
 
 /* CodeMirror syntax highlighting - dark mode support */
@@ -127,11 +127,11 @@
 
 /* Dropdown theming */
 .editor-toolbar .easymde-dropdown {
-  @apply bg-white border-gray-300 dark:bg-gray-800 dark:border-gray-600;
+  @apply bg-surface border-gray-300 dark:bg-surface-dark dark:border-gray-600;
 }
 
 .easymde-dropdown-content {
-  @apply bg-white shadow-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:shadow-gray-900/20;
+  @apply bg-surface shadow-lg border border-gray-200 dark:bg-surface-dark dark:border-gray-600 dark:shadow-gray-900/20;
 }
 
 .easymde-dropdown-content button {