plutonium 0.32.0 → 0.33.1

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-md") do
+            nav(aria_label: "Page navigation", class: "flex justify-center mt-4") 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-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 = ["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 << "rounded-s-lg" if first
             classes << "rounded-e-lg" if last
             classes.join(" ")
           end
 
           def current_link_classes
-            "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"
+            "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"
           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-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"
+                # "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"
             ) do
-              div(class: "flex flex-wrap items-center gap-sm") do
+              div(class: "flex flex-wrap items-center gap-2") do
                 name = "all"
                 if current_scope.blank?
                   a(
                     id: "#{name}-scope",
                     href: current_query_object.build_url(scope: nil),
                     class:
-                      "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"
+                      "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"
                   ) { name.humanize }
                 else
                   a(
                     id: "#{name}-scope",
                     href: current_query_object.build_url(scope: nil),
                     class:
-                      "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"
+                      "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"
                   ) { name.humanize }
                 end
 
@@ -37,26 +37,26 @@ module Plutonium
                       id: "#{name}-scope",
                       href: current_query_object.build_url(scope: name),
                       class:
-                        "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"
+                        "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"
                     ) { name.humanize }
                   else
                     a(
                       id: "#{name}-scope",
                       href: current_query_object.build_url(scope: name),
                       class:
-                        "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"
+                        "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"
                     ) { name.humanize }
                   end
                 end
               end
 
-              # div(class: "flex flex-wrap items-center gap-sm") do
+              # div(class: "flex flex-wrap items-center gap-2") do
               #   button(
               #     class:
-              #       "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"
+              #       "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"
               #   ) do
               #     svg(
-              #       class: "w-4 h-4 mr-sm",
+              #       class: "w-4 h-4 mr-2",
               #       fill: "none",
               #       stroke: "currentColor",
               #       viewbox: "0 0 24 24",
@@ -74,10 +74,10 @@ module Plutonium
               #   end
               #   button(
               #     class:
-              #       "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"
+              #       "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"
               #   ) do
               #     svg(
-              #       class: "w-4 h-4 mr-sm",
+              #       class: "w-4 h-4 mr-2",
               #       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-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",
+              #       "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",
               #     type: "button"
               #   ) do
               #     span(class: "sr-only") { "Action button" }
               #     plain " More Actions "
               #     svg(
-              #       class: "w-2.5 h-2.5 ml-sm",
+              #       class: "w-2.5 h-2.5 ml-2.5",
               #       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-xs",
+            prefixed_icon: "w-4 h-4 mr-1",
             link: "text-primary-600 dark:text-primary-500",
             color: "flex items-center",
-            color_indicator: "w-10 h-10 rounded-full mr-sm",
+            color_indicator: "w-10 h-10 rounded-full mr-2",
             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-xs"
+            attachment_value_wrapper: "flex flex-wrap gap-1"
           })
         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-sm") do
+              div(class: "flex space-x-2") 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: 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")) {
+          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") {
             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-elevated-dark 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-gray-700 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: "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",
+            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",
             header_cell_content_wrapper: "inline-flex items-center",
             header_cell_sort_wrapper: "flex items-center",
-            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",
+            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",
             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-sm",
+            sort_index_clear_link: "ml-2",
             sort_index_clear_link_text: "text-xs font-bold text-gray-600 dark:text-gray-500",
-            sort_index_clear_link_icon: "ml-xs text-red-600"
+            sort_index_clear_link_icon: "ml-1 text-red-600"
           })
         end
       end

data/lib/plutonium/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "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-sm;
+  @apply border-none rounded-lg;
 }
 
 .pu-color-input::-moz-color-swatch {
-  @apply border-none rounded-sm;
+  @apply border-none rounded-lg;
 }

data/src/css/easymde.css

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

data/src/css/intl_tel_input.css

@@ -9,7 +9,7 @@
   --iti-hover-color: theme(colors.primary.50);
   --iti-border-color: theme(colors.gray.300);
   --iti-dialcode-color: theme(colors.gray.500);
-  --iti-dropdown-bg: theme(colors.surface.DEFAULT);
+  --iti-dropdown-bg: theme(colors.white);
   --iti-arrow-color: theme(colors.gray.700);
 }
 
@@ -19,7 +19,7 @@
     --iti-hover-color: theme(colors.primary.900 / 0.3);
     --iti-border-color: theme(colors.gray.600);
     --iti-dialcode-color: theme(colors.gray.400);
-    --iti-dropdown-bg: theme(colors.surface.dark);
+    --iti-dropdown-bg: theme(colors.gray.700);
     --iti-arrow-color: theme(colors.white);
   }
 }
@@ -29,7 +29,7 @@
   --iti-hover-color: theme(colors.primary.900 / 0.3);
   --iti-border-color: theme(colors.gray.600);
   --iti-dialcode-color: theme(colors.gray.400);
-  --iti-dropdown-bg: theme(colors.surface.dark);
+  --iti-dropdown-bg: theme(colors.gray.700);
   --iti-arrow-color: theme(colors.white);
 }
 
@@ -42,7 +42,7 @@
 .iti input.iti__tel-input,
 .iti input.iti__tel-input[type=tel],
 .iti input.iti__tel-input[type=text] {
-  @apply w-full border border-gray-300 rounded shadow-sm font-medium text-sm bg-surface text-gray-700 outline-none transition-colors duration-200 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-elevated-dark dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
+  @apply w-full border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white text-gray-700 outline-none transition-colors duration-200 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
   padding: theme(spacing.2);
   padding-left: 52px;
   /* Space for country selector */
@@ -87,12 +87,12 @@
 
 /* Dropdown content styling to match form theme */
 .iti .iti__dropdown-content {
-  @apply border border-gray-300 bg-surface shadow-sm rounded dark:bg-surface-dark dark:border-gray-600;
+  @apply border border-gray-300 bg-white shadow-sm rounded-md dark:bg-gray-700 dark:border-gray-600;
 }
 
 /* Search input to match form theme */
 .iti .iti__search-input {
-  @apply w-full p-2 border border-gray-300 rounded shadow-sm font-medium text-sm bg-surface text-gray-700 outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-elevated-dark dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
+  @apply w-full p-2 border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white text-gray-700 outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
   margin: theme(spacing.2);
   width: calc(100% - theme(spacing.4));
 }
@@ -186,7 +186,7 @@
 }
 
 .iti--fullscreen-popup .iti__dropdown-content {
-  @apply bg-surface dark:bg-surface-dark;
+  @apply bg-white dark:bg-gray-700;
 }
 
 .iti--fullscreen-popup .iti__country {

data/src/css/slim_select.css

@@ -36,7 +36,7 @@
 
 /* Main container - Updated to match form input theme */
 .ss-main {
-  @apply flex flex-row relative select-none w-full min-h-8 p-2 cursor-pointer border border-gray-300 rounded shadow-sm font-medium text-sm bg-surface text-gray-700 outline-none transition-colors duration-200 overflow-hidden focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-elevated-dark dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
+  @apply flex flex-row relative select-none w-full min-h-8 p-2 cursor-pointer border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white text-gray-700 outline-none transition-colors duration-200 overflow-hidden focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
 }
 
 .ss-main.ss-disabled {
@@ -131,7 +131,7 @@
 
 /* Content container - Updated to match shadow and borders */
 .ss-content {
-  @apply absolute flex h-auto flex-col w-auto max-h-72 border border-gray-300 bg-surface shadow-sm transition-all duration-200 opacity-0 z-[10000] overflow-hidden dark:bg-surface-dark dark:border-gray-600;
+  @apply absolute flex h-auto flex-col w-auto max-h-72 border border-gray-300 bg-white shadow-sm transition-all duration-200 opacity-0 z-[10000] overflow-hidden dark:bg-gray-700 dark:border-gray-600;
   transform: scaleY(0);
   transform-origin: top;
 }
@@ -162,14 +162,14 @@
 }
 
 .ss-content .ss-search input {
-  @apply inline-flex flex-auto w-full min-w-0 p-2 m-0 border border-gray-300 rounded shadow-sm font-medium text-sm bg-surface outline-none text-left placeholder:text-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-elevated-dark dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
+  @apply inline-flex flex-auto w-full min-w-0 p-2 m-0 border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white outline-none text-left placeholder:text-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
   box-sizing: border-box;
   font-size: inherit;
   line-height: inherit;
 }
 
 .ss-content .ss-search .ss-addable {
-  @apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border border-gray-300 rounded shadow-sm dark:border-gray-600;
+  @apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border border-gray-300 rounded-md shadow-sm dark:border-gray-600;
 }
 
 .ss-content .ss-search .ss-addable svg {
@@ -202,7 +202,7 @@
 
 /* Option groups - Updated colors */
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
-  @apply flex flex-row items-center justify-between p-2 bg-elevated dark:bg-elevated-dark;
+  @apply flex flex-row items-center justify-between p-2 bg-gray-50 dark:bg-gray-600;
 }
 
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {

data/tailwind.options.js

@@ -1,4 +1,5 @@
 export const content = [
+  `${__dirname}/src/css/**/*.css`,
   `${__dirname}/src/js/**/*.js`,
   `${__dirname}/app/views/**/*.{rb,erb,js}`,
   `${__dirname}/lib/plutonium/**/*.rb`,
@@ -63,36 +64,7 @@ export const theme = {
         },
       },
     }),
-    // Semantic spacing scale - affects padding, margin, gap, space utilities
-    spacing: {
-      'xs': '0.5rem',    // 8px - extra small spacing
-      'sm': '0.75rem',   // 12px - small spacing (inputs, buttons, small gaps)
-      'md': '1rem',      // 16px - medium spacing (cards, tabs, standard gaps)
-      'lg': '1.5rem',    // 24px - large spacing (forms, displays, large spacing)
-      'xl': '2rem',      // 32px - extra large spacing
-      '2xl': '2.5rem',   // 40px - 2x extra large spacing
-      '3xl': '3rem',     // 48px - 3x extra large spacing
-    },
     colors: {
-      // Semantic background colors for theming - minimal, modern palette
-      surface: {
-        DEFAULT: '#ffffff',           // Light mode surface (cards, forms, tables, panels)
-        dark: '#1f2937',              // Dark mode surface - gray-800
-      },
-      page: {
-        DEFAULT: 'rgb(248 248 248)',  // Light mode page - neutral gray
-        dark: '#111827',              // Dark mode page - gray-900
-      },
-      elevated: {
-        DEFAULT: 'rgb(244 244 245)',  // Light mode elevated - subtle
-        dark: '#374151',              // Dark mode elevated - gray-700
-      },
-      interactive: {
-        DEFAULT: 'rgb(244 244 245)',  // Light mode hover - subtle
-        dark: '#374151',              // Dark mode hover - gray-700
-      },
-
-      // Brand colors
       primary: {
         50: '#F0FDFD',
         100: '#E0FAFA',
@@ -234,7 +206,7 @@ export const theme = {
       'Courier New',
       'monospace'
     ]
-  },
+  }
 };
 
 export const safelist = [

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.32.0
+  version: 0.33.1
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-01-12 00:00:00.000000000 Z
+date: 2026-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -505,7 +505,6 @@ files:
 - docs/guide/index.md
 - docs/guide/introduction/01-what-is-plutonium.md
 - docs/guide/introduction/02-core-concepts.md
-- docs/guide/theming.md
 - docs/guide/tutorial/01-project-setup.md
 - docs/guide/tutorial/02-creating-a-feature-package.md
 - docs/guide/tutorial/03-defining-resources.md
@@ -831,7 +830,6 @@ files:
 - lib/plutonium/ui/component/behaviour.rb
 - lib/plutonium/ui/component/kit.rb
 - lib/plutonium/ui/component/methods.rb
-- lib/plutonium/ui/component/theme.rb
 - lib/plutonium/ui/component/tokens.rb
 - lib/plutonium/ui/display/base.rb
 - lib/plutonium/ui/display/components/association.rb