plutonium 0.27.0 → 0.29.0

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.27.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 {

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.white);
+  --iti-dropdown-bg: theme(colors.surface.DEFAULT);
   --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.gray.700);
+    --iti-dropdown-bg: theme(colors.surface.dark);
     --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.gray.700);
+  --iti-dropdown-bg: theme(colors.surface.dark);
   --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-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;
+  @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;
   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-white shadow-sm rounded-md dark:bg-gray-700 dark:border-gray-600;
+  @apply border border-gray-300 bg-surface shadow-sm rounded dark:bg-surface-dark dark:border-gray-600;
 }
 
 /* Search input to match form theme */
 .iti .iti__search-input {
-  @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;
+  @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;
   margin: theme(spacing.2);
   width: calc(100% - theme(spacing.4));
 }
@@ -186,7 +186,7 @@
 }
 
 .iti--fullscreen-popup .iti__dropdown-content {
-  @apply bg-white dark:bg-gray-700;
+  @apply bg-surface dark:bg-surface-dark;
 }
 
 .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-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;
+  @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;
 }
 
 .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-white shadow-sm transition-all duration-200 opacity-0 z-[10000] overflow-hidden dark:bg-gray-700 dark:border-gray-600;
+  @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;
   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-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;
+  @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;
   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-md 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 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-gray-50 dark:bg-gray-600;
+  @apply flex flex-row items-center justify-between p-2 bg-elevated dark:bg-elevated-dark;
 }
 
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {

data/src/js/controllers/color_mode_controller.js

@@ -6,8 +6,23 @@ export default class extends Controller {
 
   connect() {
     // Set initial mode from localStorage or default
-    const mode = localStorage.theme || "light";
+    const mode = localStorage.getItem('theme') || "light";
     this.setMode(mode);
+
+    // Listen for cross-tab theme changes
+    this.handleStorageChange = (e) => {
+      console.log('Storage event received in color-mode controller:', e.key, e.newValue, e.oldValue)
+      if (e.key === 'theme' && e.newValue) {
+        console.log('Updating color-mode theme to:', e.newValue)
+        this.setMode(e.newValue);
+      }
+    };
+    window.addEventListener('storage', this.handleStorageChange);
+  }
+
+  disconnect() {
+    // Clean up event listener
+    window.removeEventListener('storage', this.handleStorageChange);
   }
 
   toggleMode() {
@@ -20,10 +35,8 @@ export default class extends Controller {
     // Update html class
     if (mode === "dark") {
       document.documentElement.classList.add("dark");
-      localStorage.theme = "dark";
     } else {
       document.documentElement.classList.remove("dark");
-      localStorage.theme = "light";
     }
 
     // Update button state
@@ -31,6 +44,9 @@ export default class extends Controller {
 
     // Show/hide icons
     this.toggleIcons(mode);
+
+    // Store in localStorage to trigger storage events in other tabs
+    localStorage.setItem('theme', mode);
   }
 
   toggleIcons(mode) {

data/tailwind.options.js

@@ -1,5 +1,4 @@
 export const content = [
-  `${__dirname}/src/css/**/*.css`,
   `${__dirname}/src/js/**/*.js`,
   `${__dirname}/app/views/**/*.{rb,erb,js}`,
   `${__dirname}/lib/plutonium/**/*.rb`,
@@ -64,7 +63,36 @@ 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',
@@ -160,53 +188,53 @@ export const theme = {
     screens: {
       'xs': '475px',
     },
+    fontFamily: {
+      'body': [
+        'Lato',
+        'ui-sans-serif',
+        'system-ui',
+        '-apple-system',
+        'system-ui',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Arial',
+        'Noto Sans',
+        'sans-serif',
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji'
+      ],
+      'sans': [
+        'Lato',
+        'ui-sans-serif',
+        'system-ui',
+        '-apple-system',
+        'system-ui',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Arial',
+        'Noto Sans',
+        'sans-serif',
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji'
+      ],
+      'mono': [
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        'Liberation Mono',
+        'Courier New',
+        'monospace'
+      ]
+    },
   },
-  fontFamily: {
-    'body': [
-      'Lato',
-      'ui-sans-serif',
-      'system-ui',
-      '-apple-system',
-      'system-ui',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica Neue',
-      'Arial',
-      'Noto Sans',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji',
-      'Segoe UI Symbol',
-      'Noto Color Emoji'
-    ],
-    'sans': [
-      'Lato',
-      'ui-sans-serif',
-      'system-ui',
-      '-apple-system',
-      'system-ui',
-      'Segoe UI',
-      'Roboto',
-      'Helvetica Neue',
-      'Arial',
-      'Noto Sans',
-      'sans-serif',
-      'Apple Color Emoji',
-      'Segoe UI Emoji',
-      'Segoe UI Symbol',
-      'Noto Color Emoji'
-    ],
-    'mono': [
-      'ui-monospace',
-      'SFMono-Regular',
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      'Liberation Mono',
-      'Courier New',
-      'monospace'
-    ]
-  }
 };
 
 export const safelist = [

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.27.0
+  version: 0.29.0
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-11-05 00:00:00.000000000 Z
+date: 2026-01-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -505,6 +505,7 @@ 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
@@ -830,6 +831,7 @@ 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