tramway 3.0.4.2 → 3.1

data/app/components/tramway/form/tramway_select/selected_item_template_component.rb

@@ -15,13 +15,13 @@ module Tramway
         }.freeze
 
         def selected_item_classes
-          classes = 'flex justify-center items-center font-medium py-1 px-2 rounded-xl ' \
-                    'text-white shadow-md hover:bg-gray-800 cursor-pointer ' \
+          classes = 'flex justify-center items-center font-medium py-1 px-2 rounded-md ' \
+                    'bg-zinc-900 text-zinc-50 shadow-sm hover:bg-zinc-800 cursor-pointer ' \
                     'space-x-1 selected-option ' + SIZE_CLASSES[size].to_s
 
-          classes += ' border border-gray-700' if multiple
+          classes += ' border border-zinc-800' if multiple
 
-          theme_classes classic: classes
+          classes
         end
       end
     end

data/app/components/tramway/nav/item_component.rb

@@ -6,11 +6,8 @@ module Tramway
     #
     class ItemComponent < TailwindComponent
       def style
-        @style ||= [
-          theme_classes(
-            classic: 'px-4 py-2 rounded-xl whitespace-nowrap hover:bg-gray-800 hover:text-gray-300 text-white'
-          )
-        ].join(' ')
+        @style ||= 'inline-flex items-center rounded-md px-3 py-2 text-sm font-medium text-zinc-100 ' \
+                   'transition-colors hover:bg-zinc-800 hover:text-zinc-50'
       end
     end
   end

data/app/components/tramway/navbar_component.html.haml

@@ -1,6 +1,6 @@
-%nav{ class: navbar_classes }
+%nav.bg-zinc-950.text-zinc-50{ class: navbar_classes }
   .flex.md:justify-between.w-full.items-center.relative.min-h-8
-    .block.sm:hidden.border.border-white.px-2.rounded
+    .block.sm:hidden
       %button#mobile-menu-button{ class: mobile_button_classes }
         ☰
 
@@ -8,7 +8,7 @@
       .flex.items-center.absolute.transform{ class: 'left-1/2 -translate-x-1/2 md:left-auto md:translate-x-0' }
         - if @title[:text].present?
           = link_to @title[:link] do
-            .text-xl{ class: title_classes }
+            .truncate{ class: title_classes }
               = @title[:text]
         - if @left_items.present?
           %ul.flex-row.items-center.space-x-4.ml-4.hidden.md:flex
@@ -22,16 +22,16 @@
 
 #mobile-menu{ class: mobile_menu_classes }
   - if @left_items.present?
-    %ul.flex.flex-col.space-y-3.text-2xl.font-bold.pt-16
+    %ul.flex.flex-col.space-y-1.pt-4
       - @left_items.each do |item|
         = item
 
   - if @right_items.present?
-    %ul.flex.flex-col.space-y-3.text-2xl.font-bold
+    %ul.flex.flex-col.space-y-1.pt-4
       - @right_items.each do |item|
         = item
 
-  %button.absolute.top-4.right-6.text-4xl.cursor-pointer.text-white#mobile-menu-close-button{ role: :button }
+  %button.absolute.top-4.right-4.inline-flex.items-center.justify-center.rounded-md.p-2.text-zinc-50.transition-colors.hover:bg-zinc-800.hover:text-zinc-50.focus:outline-none.focus-visible:ring-2.focus-visible:ring-zinc-400.focus-visible:ring-offset-2.focus-visible:ring-offset-zinc-950#mobile-menu-close-button{ role: :button }
     ⨯
 
 :javascript

data/app/components/tramway/navbar_component.rb

@@ -3,6 +3,21 @@
 module Tramway
   # Navbar component
   class NavbarComponent < TailwindComponent
+    NAVBAR_CLASSES = %w[
+      flex items-center justify-between border-zinc-800 px-4 py-3 shadow-sm backdrop-blur sm:px-6
+    ].freeze
+
+    MOBILE_BUTTON_CLASSES = %w[
+      inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-zinc-800 hover:text-zinc-50
+      focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2
+      focus-visible:ring-offset-zinc-950
+    ].freeze
+
+    MOBILE_MENU_CLASSES = %w[
+      fixed inset-0 z-50 hidden h-screen w-screen flex-col border-r border-zinc-800 bg-zinc-950 px-4 py-6 shadow-lg
+      transition-transform transform -translate-x-full duration-300 ease-in-out pt-16
+    ].freeze
+
     def initialize(**options)
       @title = { text: options[:title], link: options[:title_link] || '/' }
       @left_items = options[:left_items]
@@ -10,30 +25,19 @@ module Tramway
     end
 
     def navbar_classes
-      theme_classes(
-        classic: 'py-2 px-4 sm:px-8 flex justify-between items-center bg-gray-900 shadow-md'
-      )
+      NAVBAR_CLASSES.join(' ')
     end
 
     def title_classes
-      theme_classes(
-        classic: 'text-xl font-semibold text-gray-100'
-      )
+      'text-base font-semibold text-zinc-50'
     end
 
     def mobile_button_classes
-      theme_classes(
-        classic: 'text-gray-200 focus:outline-none'
-      )
+      MOBILE_BUTTON_CLASSES.join(' ')
     end
 
     def mobile_menu_classes
-      theme_classes(
-        classic: [
-          'hidden', 'inset-0', 'flex-col', 'bg-gray-900', 'shadow-inner', 'h-screen', 'fixed', 'z-50', 'w-screen',
-          'transition-transform', 'transform', '-translate-x-full', 'duration-300', 'ease-in-out', 'pt-16'
-        ].join(' ')
-      )
+      MOBILE_MENU_CLASSES.join(' ')
     end
   end
 end

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

@@ -9,12 +9,12 @@ module Tramway
       option :remote
 
       def pagination_classes(klass: nil)
-        default_classes = theme_classes(
-          classic: [
-            'cursor-pointer', 'px-3', 'py-2', 'font-medium', 'rounded-xl', 'text-gray-200', 'bg-gray-800',
-            'shadow-md', 'hover:bg-gray-700'
-          ]
-        )
+        default_classes = %w[
+          inline-flex items-center justify-center h-10 px-3 py-2 rounded-md border border-zinc-800
+          bg-zinc-950 text-sm font-medium text-zinc-100 shadow-sm transition-colors hover:bg-zinc-800
+          hover:text-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400
+          focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950
+        ]
 
         (default_classes + [klass]).join(' ')
       end

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

@@ -5,9 +5,7 @@ module Tramway
     # 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-400 sm:flex hidden'
-        )
+        'page gap hidden items-center justify-center px-3 py-2 text-sm font-medium text-zinc-500 sm:flex'
       end
     end
   end

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

@@ -7,9 +7,8 @@ module Tramway
       option :page
 
       def current_page_classes
-        theme_classes(
-          classic: 'px-3 py-2 font-medium rounded-xl text-gray-100 bg-gray-700 shadow-inner'
-        )
+        'inline-flex h-10 items-center justify-center rounded-md border border-zinc-800 bg-zinc-800 px-3 py-2 ' \
+          'text-sm font-medium text-zinc-50 shadow-inner'
       end
     end
   end

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

@@ -5,9 +5,7 @@ module Tramway
     # 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-100 text-base'
-        )
+        'div-table-cell hidden px-6 py-4 text-base font-medium text-zinc-100 first:block md:block'
       end
     end
   end

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

@@ -2,7 +2,7 @@
 %div{ class: "#{header_row_classes} md:grid-cols-#{columns_count(parsed_cells: parsed_cells)}", aria: { label: "Table Header" }, role: "row" }
   - if headers.any?
     - headers.each do |header|
-      .div-table-cell{ class: header_cell_classes }
+      .div-table-cell.border-b.border-zinc-800{ class: header_cell_classes }
         = header
   - else
     = content

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

@@ -18,13 +18,11 @@ module Tramway
       end
 
       def header_row_classes
-        theme_classes(
-          classic: 'div-table-row rounded-t-xl grid text-small gap-4 bg-gray-800 text-gray-500 grid-cols-1'
-        )
+        'div-table-row grid grid-cols-1 gap-4 rounded-t-xl border-b border-zinc-800 bg-zinc-900 text-zinc-400'
       end
 
       def header_cell_classes
-        'div-table-cell py-4 px-6 first:block hidden md:block'
+        'div-table-cell hidden px-6 py-4 first:block md:block'
       end
     end
   end

data/app/components/tramway/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{ class: cell_classes }
+      %div.border-b.border-zinc-800{ class: cell_classes }
         = value
 
 - else

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

@@ -6,6 +6,10 @@ module Tramway
     class RowComponent < Tramway::BaseComponent
       include ContentCells
 
+      DESKTOP_ROW_CLASSES = %w[
+        div-table-row grid grid-cols-1 gap-4 border-b border-zinc-800 bg-zinc-950 last:border-b-0
+      ].freeze
+
       option :cells, optional: true, default: -> { [] }
       option :href, optional: true
       option :preview, optional: true, default: -> { true }
@@ -28,24 +32,15 @@ module Tramway
       end
 
       def desktop_row_classes(cells_count)
-        theme_classes(
-          classic: [
-            'div-table-row', 'grid', 'gap-4', 'border-b', 'last:border-b-0', 'bg-gray-900',
-            'border-gray-700', "md:grid-cols-#{cells_count}", 'grid-cols-1'
-          ]
-        ).join(' ')
+        (DESKTOP_ROW_CLASSES + ["md:grid-cols-#{cells_count}"]).join(' ')
       end
 
       def link_row_classes
-        theme_classes(
-          classic: 'cursor-pointer hover:bg-gray-800'
-        )
+        'cursor-pointer hover:bg-zinc-900'
       end
 
       def cell_classes
-        theme_classes(
-          classic: 'div-table-cell px-6 py-4 font-medium text-gray-100 text-xs sm:text-base'
-        )
+        'div-table-cell px-6 py-4 text-xs font-medium text-zinc-100 sm:text-base'
       end
 
       def around_render

data/app/components/tramway/table_component.rb

@@ -6,9 +6,7 @@ module Tramway
     option :options, optional: true, default: -> { {} }
 
     def table_classes
-      theme_classes(
-        classic: 'div-table text-left rtl:text-right text-gray-300'
-      )
+      'div-table w-full text-left rtl:text-right text-zinc-100'
     end
   end
 end

data/app/views/tramway/entities/_form.html.haml

@@ -21,5 +21,4 @@
     = f.submit t('tramway.actions.save')
     = tramway_button text: t('tramway.actions.cancel'),
       path: public_send(@entity.index_helper_method),
-      type: :secondary,
-      link: true
+      type: :fear

data/app/views/tramway/layouts/application.html.haml

@@ -19,7 +19,7 @@
     / Includes all stylesheet files in app/assets/stylesheets
     = stylesheet_link_tag "tailwind", "data-turbo-track": "reload"
 
-  %body.bg-gray-900.text-white
+  %body.bg-zinc-950.text-zinc-50
     = tramway_navbar title: 'Tramway'
 
     - if flash.any?