tramway 2.2 → 2.2.1

data/app/components/tailwinds/pagination/base.rb

@@ -9,10 +9,12 @@ module Tailwinds
       option :remote
 
       def pagination_classes(klass: nil)
-        default_classes = [
-          'cursor-pointer', 'px-3', 'py-2', 'font-medium', 'rounded-md', 'text-white', 'bg-gray-800',
-          'hover:bg-gray-700'
-        ]
+        default_classes = theme_classes(
+          classic: [
+            'cursor-pointer', 'px-3', 'py-2', 'font-medium', 'rounded-xl', 'text-gray-700', 'bg-gray-100',
+            'shadow-md', 'hover:bg-gray-200', 'dark:bg-gray-800', 'dark:text-gray-200', 'dark:hover:bg-gray-700'
+          ]
+        )
 
         (default_classes + [klass]).join(' ')
       end

data/app/components/tailwinds/pagination/gap_component.html.haml

@@ -1,3 +1,3 @@
 %div.flex.justify-end.mt-2
-  %span.page.gap.px-3.py-2.text-sm.font-medium.text-white.sm:flex.hidden
+  %span{ class: gap_classes }
     = helpers.t('views.pagination.truncate').html_safe

data/app/components/tailwinds/pagination/gap_component.rb

@@ -4,6 +4,11 @@ module Tailwinds
   module Pagination
     # Kaminari gap component for rendering a gap in a pagination
     class GapComponent < Tramway::BaseComponent
+      def gap_classes
+        theme_classes(
+          classic: 'page gap px-3 py-2 text-sm font-medium text-gray-600 sm:flex hidden dark:text-gray-400'
+        )
+      end
     end
   end
 end

data/app/components/tailwinds/pagination/page_component.html.haml

@@ -1,5 +1,5 @@
 - if page.current?
-  %span.px-3.py-2.font-medium.rounded-md.text-gray-800.bg-white
+  %span{ class: current_page_classes }
     = page
 - else
   = link_to page,

data/app/components/tailwinds/pagination/page_component.rb

@@ -5,6 +5,13 @@ module Tailwinds
     # Kaminari page component for rendering a page button in a pagination
     class PageComponent < Tailwinds::Pagination::Base
       option :page
+
+      def current_page_classes
+        theme_classes(
+          classic: 'px-3 py-2 font-medium rounded-xl text-gray-700 bg-gray-200 shadow-inner ' \
+                   'dark:bg-gray-700 dark:text-gray-100'
+        )
+      end
     end
   end
 end

data/app/components/tailwinds/table/cell_component.html.haml

@@ -1,2 +1,2 @@
-.div-table-cell.md:block.first:block.hidden.px-6.py-4.font-medium.text-white.text-base
+%div{ class: cell_classes }
   = content

data/app/components/tailwinds/table/cell_component.rb

@@ -4,6 +4,13 @@ module Tailwinds
   module Table
     # Component for rendering a cell in a table
     class CellComponent < Tramway::BaseComponent
+      def cell_classes
+        theme_classes(
+          classic: 'div-table-cell md:block first:block hidden px-6 py-4 font-medium text-gray-700 text-base ' \
+                   'dark:text-gray-100'
+        )
+      end
+
       def around_render
         ensure_view_context_accessor
         previous_flag = view_context.tramway_inside_cell

data/app/components/tailwinds/table/header_component.html.haml

@@ -1,7 +1,7 @@
-.div-table-row.grid.text-small.gap-4.bg-gray-700.text-gray-400.grid-cols-1{ class: "md:grid-cols-#{columns_count}", aria: { label: "Table Header" }, role: "row" }
+%div{ class: "#{header_row_classes} md:grid-cols-#{columns_count}", aria: { label: "Table Header" }, role: "row" }
   - if headers.any?
     - headers.each do |header|
-      .div-table-cell.py-4.px-6.first:block.hidden.md:block
+      .div-table-cell{ class: header_cell_classes }
         = header
   - else
     = content

data/app/components/tailwinds/table/header_component.rb

@@ -10,6 +10,17 @@ module Tailwinds
       def columns_count
         headers.present? ? headers.size : columns
       end
+
+      def header_row_classes
+        theme_classes(
+          classic: 'div-table-row grid text-small gap-4 bg-gray-200 text-gray-600 grid-cols-1 ' \
+                   'dark:bg-gray-800 dark:text-gray-300'
+        )
+      end
+
+      def header_cell_classes
+        'div-table-cell py-4 px-6 first:block hidden md:block'
+      end
     end
   end
 end

data/app/components/tailwinds/table/row/preview_component.html.haml

@@ -13,6 +13,6 @@
     animation: roll-up 0.5s ease-in-out;
   }
 
-#roll-up.fixed.hidden.inset-x-0.bottom-0.shadow-lg.z-50.bg-gray-800.animate-roll-up{ class: 'h-1/2' }
-  %button.absolute.top-4.right-4.text-gray-400.hover:text-gray-200{ "data-action" => "click->preview#close", "data-controller" => "preview" }
+#roll-up{ class: preview_classes }
+  %button{ class: close_button_classes, "data-action" => "click->preview#close", "data-controller" => "preview" }
     ✕

data/app/components/tailwinds/table/row/preview_component.rb

@@ -5,6 +5,17 @@ module Tailwinds
     module Row
       # Row component for rendering a row in a table
       class PreviewComponent < Tramway::BaseComponent
+        def preview_classes
+          theme_classes(
+            classic: 'fixed hidden inset-x-0 bottom-0 shadow-lg z-50 bg-gray-100 animate-roll-up h-1/2'
+          )
+        end
+
+        def close_button_classes
+          theme_classes(
+            classic: 'absolute top-4 right-4 text-gray-500 hover:text-gray-700'
+          )
+        end
       end
     end
   end

data/app/components/tailwinds/table/row_component.html.haml

@@ -1,7 +1,7 @@
 - if cells.any?
   = row_tag class: desktop_row_classes(cells.count), **options do
     - cells.each do |(_, value)|
-      .div-table-cell.px-6.py-4.font-medium.text-white.text-xs.sm:text-base
+      %div{ class: cell_classes }
         = value
 
 - else

data/app/components/tailwinds/table/row_component.rb

@@ -25,14 +25,26 @@ module Tailwinds
       end
 
       def desktop_row_classes(cells_count)
-        [
-          'div-table-row', 'grid', 'gap-4', 'border-b', 'last:border-b-0', 'bg-gray-800',
-          'border-gray-700', "md:grid-cols-#{cells_count}", 'grid-cols-1'
-        ].join(' ')
+        theme_classes(
+          classic: [
+            'div-table-row', 'grid', 'gap-4', 'border-b', 'last:border-b-0', 'bg-gray-100',
+            'border-gray-200', "md:grid-cols-#{cells_count}", 'grid-cols-1',
+            'dark:bg-gray-900', 'dark:border-gray-700'
+          ]
+        ).join(' ')
       end
 
       def link_row_classes
-        'cursor-pointer hover:bg-gray-700'
+        theme_classes(
+          classic: 'cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800'
+        )
+      end
+
+      def cell_classes
+        theme_classes(
+          classic: 'div-table-cell px-6 py-4 font-medium text-gray-700 text-xs sm:text-base ' \
+                   'dark:text-gray-100'
+        )
       end
     end
   end

data/app/components/tailwinds/table_component.html.haml

@@ -2,5 +2,5 @@
 
 - width_class = options[:class]&.include?('w-') ? '' : 'w-full'
 
-.div-table.text-left.rtl:text-right.text-gray-400{ class: "#{options[:class]} #{width_class}", **options.except(:class) }
+%div{ class: "#{table_classes} #{options[:class]} #{width_class}".strip, **options.except(:class) }
   = content

data/app/components/tailwinds/table_component.rb

@@ -4,5 +4,11 @@ module Tailwinds
   # Table component for rendering a table
   class TableComponent < Tramway::BaseComponent
     option :options, optional: true, default: -> { {} }
+
+    def table_classes
+      theme_classes(
+        classic: 'div-table text-left rtl:text-right text-gray-500 dark:text-gray-300'
+      )
+    end
   end
 end

data/app/components/tailwinds/title_component.html.haml

@@ -1,4 +1,4 @@
-%h1.font-bold.text-4xl.text-white
+%h1{ class: title_classes }
   - if text.present?
     = text
   - else

data/app/components/tailwinds/title_component.rb

@@ -4,5 +4,11 @@ module Tailwinds
   # Title component
   class TitleComponent < Tramway::BaseComponent
     option :text
+
+    def title_classes
+      theme_classes(
+        classic: 'font-semibold text-4xl text-gray-800 dark:text-gray-100'
+      )
+    end
   end
 end

data/app/components/tramway/base_component.rb

@@ -11,5 +11,18 @@ module Tramway
     include Tramway::Helpers::ComponentHelper
     include Tramway::Helpers::DecorateHelper
     include Tramway::Helpers::ViewsHelper
+
+    private
+
+    def tramway_theme
+      Tramway.config.theme.to_sym
+    rescue NoMethodError
+      :classic
+    end
+
+    def theme_classes(mapping = {}, fallback: :classic, **keyword_mapping)
+      resolved_mapping = mapping.merge(keyword_mapping)
+      resolved_mapping.fetch(tramway_theme) { resolved_mapping.fetch(fallback) }
+    end
   end
 end

data/config/tailwind.config.js

@@ -13,14 +13,13 @@ module.exports = {
     'last:border-b-0',
     'md:block',
     'first:block',
+    'rounded-t-xl',
 
     // === Visibility and typography helpers ===
     'hidden',
-    'xl:hidden',
     'text-xl',
     'text-4xl',
     'font-bold',
-    'text-right',
 
     // === Grid templates used for configurable layouts ===
     'grid',
@@ -50,6 +49,7 @@ module.exports = {
     'mx-auto',
     'align-center',
     'justify-center',
+    'min-h-dvh',
 
     // === Flexbox layout utilities ===
     'flex',
@@ -68,7 +68,6 @@ module.exports = {
     'sm:flex',
 
     // === Sizing utilities ===
-    'w-2/3',
     'w-full',
     'w-fit',
     'w-8',
@@ -81,104 +80,124 @@ module.exports = {
     'px-4',
     'px-3',
     'px-2',
-    'py-8',
     'py-4',
     'py-2',
     'py-1',
+    'mb-4',
     'mb-2',
     'mt-8',
     'mt-2',
 
     // === Pagination styles ===
-    'bg-white',
-    'rounded-md',
-    'hover:bg-purple-100',
-    'hover:bg-gray-100',
     'hover:bg-gray-300',
-    'hover:text-gray-800',
 
     // === Dark mode pagination styles ===
-    'text-white',
-    'bg-gray-800',
-    'hover:bg-gray-700',
     'bg-gray-900',
-    'bg-gray-700',
     'text-gray-400',
-    'hover:text-gray-400',
+    'text-gray-500',
+    'text-gray-600',
+    'text-gray-700',
+    'hover:text-gray-600',
     'placeholder-gray-400',
+    'placeholder-gray-500',
 
     // === Button and badge helpers ===
-    'bg-purple-700',
     'rounded',
     'rounded-full',
-    'rounded-t',
+    'rounded-xl',
     'font-medium',
-    'font-normal',
+    'font-semibold',
     'text-xs',
     'whitespace-nowrap',
     'h-fit',
     'gap-1',
     'h-10',
+    'shadow-md',
+    'shadow-inner',
+    'shadow-lg',
+    'h-12',
 
     // === Button color presets ===
-    'bg-gray-500',
-    'bg-gray-600',
-    'hover:bg-gray-700',
-    'hover:bg-gray-800',
-
-    'bg-blue-500',
-    'bg-blue-600',
-    'hover:bg-blue-700',
-    'hover:bg-blue-800',
-
-    'bg-zinc-500',
-    'bg-zinc-600',
-    'hover:bg-zinc-700',
-    'hover:bg-zinc-800',
-
-    'bg-green-400',
-    'bg-green-500',
-    'bg-green-600',
-    'hover:bg-green-700',
-    'hover:bg-green-800',
-
-    'bg-orange-500',
-    'bg-orange-600',
-    'hover:bg-orange-700',
-    'hover:bg-orange-800',
-
-    'bg-red-500',
-    'bg-red-600',
-    'bg-red-700',
-    'hover:bg-red-700',
-    'hover:bg-red-800',
-
-    'bg-violet-500',
-    'bg-violet-600',
-    'hover:bg-violet-700',
-    'hover:bg-violet-800',
-
-    'bg-indigo-500',
-    'bg-indigo-600',
-    'hover:bg-indigo-700',
-    'hover:bg-indigo-800',
-
-    'bg-yellow-500',
-    'bg-yellow-600',
-    'hover:bg-yellow-700',
-    'hover:bg-yellow-800',
+    'bg-gray-100',
+    'bg-gray-200',
+    'bg-gray-300',
+    'bg-gray-900',
+    'hover:bg-gray-200',
+    'hover:bg-gray-300',
+
+    'bg-blue-100',
+    'bg-blue-200',
+    'hover:bg-blue-200',
+    'hover:bg-blue-300',
+
+    'bg-zinc-100',
+    'bg-zinc-200',
+    'hover:bg-zinc-300',
+
+    'bg-green-100',
+    'bg-green-200',
+    'hover:bg-green-300',
+
+    'bg-orange-100',
+    'bg-orange-200',
+    'hover:bg-orange-300',
+
+    'bg-red-100',
+    'bg-red-200',
+    'hover:bg-red-200',
+    'hover:bg-red-300',
+
+    'bg-violet-100',
+    'bg-violet-200',
+    'hover:bg-violet-300',
+
+    'bg-indigo-100',
+    'bg-indigo-200',
+    'hover:bg-indigo-300',
+
+    'bg-yellow-100',
+    'bg-yellow-200',
+    'hover:bg-yellow-300',
+    'bg-teal-100',
+    'bg-teal-900',
+    'bg-purple-300',
+    'text-purple-700',
 
     // === Button Disabled state ===
-    'bg-gray-400',
+    'bg-gray-200',
     'text-gray-400',
-    'text-gray-100',
+    'text-gray-500',
+    'text-gray-700',
+    'text-gray-800',
+    'text-blue-800',
+    'text-zinc-800',
+    'text-green-800',
+    'text-orange-800',
+    'text-red-800',
+    'text-violet-800',
+    'text-indigo-800',
+    'text-yellow-800',
+    'text-teal-800',
 
     // === Form state helpers ===
-    'disabled:bg-gray-100',
     'disabled:text-gray-400',
     'disabled:cursor-not-allowed',
-    'mb-4',
-    'bg-red-500',
+    'disabled:bg-gray-200',
+    'disabled:text-gray-500',
+    'focus:ring-gray-300',
+    'focus:ring-gray-600',
+    'ring-gray-200',
+    'ring-gray-700',
+    'border-gray-200',
+    'border-gray-300',
+    'border-gray-700',
+    'hover:border-gray-300',
+    'border-teal-200',
+    'border-teal-700',
+
+    // === Form size helpers ===
+    'px-5',
+    'py-3',
 
     // === Multiselect dropdown positioning ===
     'absolute',
@@ -186,7 +205,6 @@ module.exports = {
     'shadow',
     'top-11',
     'z-40',
-    'left-0',
     'max-h-select',
     'overflow-y-auto',
     'cursor-pointer',
@@ -199,34 +217,27 @@ module.exports = {
     'border-l',
     'border-l-2',
     'border-transparent',
-    'border-teal-300',
-    'hover:border-teal-100',
     'bg-teal-100',
     'bg-transparent',
-    'text-teal-700',
     'leading-6',
     'leading-none',
     'appearance-none',
     'outline-none',
     'h-full',
     'm-1',
-    'hover:bg-teal-100',
 
     // === Flash message styles ===
     'fixed',
-    'top-6',
     'right-4',
     'z-50',
     'space-y-2',
     'flash',
     'opacity-100',
-    'bg-green-700',
     'text-white',
     'px-4',
     'py-2',
     'rounded',
     'shadow',
-    'bg-yellow-700',
     'text-black'
   ],
 }

data/lib/tramway/config.rb

@@ -13,7 +13,8 @@ module Tramway
     attr_config(
       pagination: { enabled: false },
       entities: [],
-      application_controller: 'ActionController::Base'
+      application_controller: 'ActionController::Base',
+      theme: :classic
     )
 
     def entities=(collection)

data/lib/tramway/helpers/views_helper.rb

@@ -6,11 +6,13 @@ module Tramway
     module ViewsHelper
       include Tramway::Helpers::ComponentHelper
 
+      FORM_SIZES = %i[small middle large].freeze
+
       def tramway_form_for(object, *, size: :middle, **options, &)
         form_for(
           object,
           *,
-          **options.merge(builder: Tailwinds::Form::Builder, size:),
+          **options.merge(builder: Tailwinds::Form::Builder, size: normalize_form_size(size)),
           &
         )
       end
@@ -57,6 +59,10 @@ module Tramway
         end
       end
 
+      def tramway_main_container(**options, &)
+        component 'tailwinds/containers/main', options:, &
+      end
+
       def tramway_badge(text:, type: nil, color: nil)
         component 'tailwinds/badge',
                   text:,
@@ -71,6 +77,12 @@ module Tramway
       def tramway_flash(text:, type:, **options)
         component 'tailwinds/flash', text:, type:, options:
       end
+
+      private
+
+      def normalize_form_size(size)
+        FORM_SIZES.include?(size) ? size : :middle
+      end
     end
   end
 end

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '2.2'
+  VERSION = '2.2.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: '2.2'
+  version: 2.2.1
 platform: ruby
 authors:
 - kalashnikovisme
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 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: anyway_config
@@ -150,6 +150,8 @@ files:
 - app/components/tailwinds/base_component.rb
 - app/components/tailwinds/button_component.html.haml
 - app/components/tailwinds/button_component.rb
+- app/components/tailwinds/containers/main_component.html.haml
+- app/components/tailwinds/containers/main_component.rb
 - app/components/tailwinds/containers/narrow_component.html.haml
 - app/components/tailwinds/containers/narrow_component.rb
 - app/components/tailwinds/flash_component.html.haml