plutonium 0.32.0 → 0.33.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-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.0"
   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.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-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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.32.0
+  version: 0.33.0
 platform: ruby
 authors:
 - Stefan Froelich
@@ -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