plutonium 0.28.0 → 0.29.0

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.28.0
+  version: 0.29.0
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-11-12 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