tramway 2.1.3.2 → 2.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1499a2fac32ccc2bde7698f5a27e860b398241bac79ccaaa57e5c1daed7261e0
-  data.tar.gz: bbefbba5682e649affd877f94a83778bad6f0866002158b21f89bd0b9005ab17
+  metadata.gz: 88472147f728346a8406400f46ce9b0c3aeda279944f7c3df64c793addf2f37e
+  data.tar.gz: 65a3a58d859f7c88f960547f78aaa3ba55fb061af5b0abbd0b6b4671c5dee252
 SHA512:
-  metadata.gz: 93619c3b3adc9a585f95c710d073c33bbe6dfe36fb32e80e2acd47a7456439a5a5524b78145aaf440b6e263331fc62fe650267d6ce5cde212bcddaae8b06a18f
-  data.tar.gz: 62acddb7ccfdaad83c282c56f7b41968466250d6f7579ccbd7d4b5606e1ab286470e5e916d7dcb8c2ff673e7cb2894f9d0e7dfaa017075b1bb29e65aae7754be
+  metadata.gz: 73ad5c1dab62c549c296a15ba556e7df759ea5613c2afe9894fd794e89d1d6b1b16020c51516ef12559ac3d499b280b3c9cdbb026145705f8c3232737232375d
+  data.tar.gz: 74cd74e6f6c57495ac2ea2178c52e33f94b57ee48ce0c5c746a84895c54af1dff33a491b757e597f863c5630beacd825c66269136054886c7eec2360ff61318b

data/README.md

@@ -1,6 +1,9 @@
 # Tramway
 Unite Ruby on Rails brilliance. Streamline development with Tramway.
 
+Tramway ships with full CRUD (index, show, create, update, destroy) out of the box, and it includes a great AGENTS.md guide
+that helps you generate good, Tramway-native code with all the framework features.
+
 [![RubyGems Version](https://img.shields.io/gem/v/tramway.svg)](https://rubygems.org/gems/tramway)
 [![Tests](https://github.com/Purple-Magic/tramway/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/Purple-Magic/tramway/actions/workflows/test.yml)
 [![Lint](https://github.com/Purple-Magic/tramway/actions/workflows/lint.yml/badge.svg?branch=main)](https://github.com/Purple-Magic/tramway/actions/workflows/lint.yml)
@@ -60,7 +63,13 @@ Tramway.configure do |config|
   config.entities = [
     {
       name: :user,
-      pages: [{ action: :index }],
+      pages: [
+        { action: :index },
+        { action: :show },
+        { action: :create },
+        { action: :update },
+        { action: :destroy }
+      ],
     }
   ]
 end
@@ -215,6 +224,91 @@ end
 With this configuration in place, visiting the show page displays a two-column table where the left column contains the
 localized attribute names and the right column renders their values.
 
+**create page**
+
+To render a create page for an entity, declare a `:create` action inside the `pages` array in
+`config/initializers/tramway.rb`. Tramway will generate the route and render the form fields based on your form object.
+See the [form_fields method](#form_fields-method) for details on configuring fields.
+
+```ruby
+Tramway.configure do |config|
+  config.entities = [
+    {
+      name: :campaign,
+      pages: [
+        { action: :index },
+        { action: :create }
+      ]
+    }
+  ]
+end
+```
+
+**update page**
+
+To render an update page, declare an `:update` action inside the `pages` array in `config/initializers/tramway.rb`.
+Tramway will generate the edit route and reuse the same form partial as create. See the
+[form_fields method](#form_fields-method) for details on configuring fields.
+
+```ruby
+Tramway.configure do |config|
+  config.entities = [
+    {
+      name: :campaign,
+      pages: [
+        { action: :index },
+        { action: :update }
+      ]
+    }
+  ]
+end
+```
+
+**form_fields method**
+
+Use `form_fields` in your form class to customize which form helpers get rendered and which options are passed to them.
+Each field must map to a form helper method name. When you need to pass options, use a hash where `:type` is the helper
+method name and the remaining keys are passed as named arguments.
+
+```ruby
+class UserForm < Tramway::BaseForm
+  properties :email, :about_me
+
+  fields email: :email,
+    about_me: {
+      type: :text_area,
+      rows: 5
+    }
+end
+```
+
+The configuration above renders:
+
+```erb
+<%= tramway_form_for .... do |f| %>
+  <%= f.email_field :email %>
+  <%= f.text_area :about_me, rows: 5 %>
+```
+
+**destroy page**
+
+To render a destroy action, declare a `:destroy` action inside the `pages` array in `config/initializers/tramway.rb`.
+Tramway will generate the destroy route and render the delete action button.
+
+```ruby
+Tramway.configure do |config|
+  config.entities = [
+    {
+      name: :campaign,
+      pages: [
+        { action: :index },
+        { action: :destroy }
+      ]
+    }
+  ]
+end
+```
+
 **route_helper**
 
 To get routes Tramway generated just Tramway::Engine.
@@ -891,6 +985,16 @@ Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by
 
 will render [this](https://play.tailwindcss.com/xho3LfjKkK)
 
+Use `size:` to control the form sizing (`:small`, `:middle`, or `:large`). The default is `:middle`, and all fields rendered
+within the form will use the same size value.
+
+```erb
+<%= tramway_form_for @user, size: :large do |f| %>
+  <%= f.text_field :text %>
+  <%= f.submit 'Create User' %>
+<% end %>
+```
+
 Available form helpers:
 * text_field
 * email_field

data/app/components/tailwind_component.rb

@@ -28,16 +28,56 @@ class TailwindComponent < Tramway::BaseComponent
       multiselect_input: 'text-base px-3 py-2'
     },
     large: {
-      text_input: 'text-lg px-4 py-3',
-      select_input: 'text-lg px-4 py-3',
-      file_button: 'text-lg px-5 py-3',
-      submit_button: 'text-lg px-5 py-3',
-      multiselect_input: 'text-lg px-4 py-3'
+      text_input: 'text-xl px-4 py-3',
+      select_input: 'text-xl px-4 py-3',
+      file_button: 'text-xl px-5 py-3',
+      submit_button: 'text-xl px-5 py-3',
+      multiselect_input: 'text-xl px-4 py-3'
     }
   }.freeze
 
   private
 
+  def text_input_base_classes
+    theme_classes(
+      classic: 'w-full rounded-xl border border-gray-200 bg-gray-100 text-gray-700 shadow-inner ' \
+               'focus:outline-none focus:ring-2 focus:ring-gray-300 placeholder-gray-400 ' \
+               'dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:placeholder-gray-500 ' \
+               'dark:focus:ring-gray-600'
+    )
+  end
+
+  def select_base_classes
+    theme_classes(
+      classic: 'w-full rounded-xl border border-gray-200 bg-gray-100 text-gray-700 shadow-inner ' \
+               'focus:outline-none focus:ring-2 focus:ring-gray-300 disabled:cursor-not-allowed ' \
+               'disabled:bg-gray-200 disabled:text-gray-400 dark:bg-gray-900 dark:border-gray-700 ' \
+               'dark:text-gray-100 dark:focus:ring-gray-600 dark:disabled:bg-gray-800 ' \
+               'dark:disabled:text-gray-500'
+    )
+  end
+
+  def file_button_base_classes
+    theme_classes(
+      classic: 'inline-block text-blue-800 font-semibold rounded-xl cursor-pointer mt-4 bg-blue-100 ' \
+               'hover:bg-blue-200 shadow-md dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800'
+    )
+  end
+
+  def submit_button_base_classes
+    theme_classes(
+      classic: 'font-semibold rounded-xl focus:outline-none focus:ring-2 focus:ring-red-200 cursor-pointer ' \
+               'bg-green-100 hover:bg-green-200 shadow-md dark:bg-green-900 ' \
+               'dark:hover:bg-green-800 dark:focus:ring-red-700'
+    )
+  end
+
+  def form_label_classes
+    theme_classes(
+      classic: 'block text-sm font-semibold mb-2 text-gray-700 dark:text-gray-200'
+    )
+  end
+
   def size_class(key)
     size_classes = SIZE_CLASSES.fetch(size) { SIZE_CLASSES[:middle] }
     size_classes.fetch(key) { SIZE_CLASSES[:middle].fetch(key) }

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

@@ -1,2 +1,2 @@
-%a.btn.btn-delete.bg-orange-500.hover:bg-orange-700.text-white.font-bold.py-2.px-4.rounded.ml-2{ onclick: "window.history.back(); return false;", href: '#' }
+%a{ class: back_button_classes, onclick: "window.history.back(); return false;", href: '#' }
   = t('actions.back')

data/app/components/tailwinds/back_button_component.rb

@@ -3,5 +3,11 @@
 module Tailwinds
   # Backbutton component
   class BackButtonComponent < BaseComponent
+    def back_button_classes
+      theme_classes(
+        classic: 'btn btn-delete bg-orange-100 hover:bg-orange-200 text-orange-800 font-semibold py-2 px-4 ' \
+                 'rounded-xl ml-2 shadow-md dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700'
+      )
+    end
   end
 end

data/app/components/tailwinds/badge_component.rb

@@ -9,10 +9,13 @@ module Tailwinds
     option :color, optional: true
 
     def classes
-      [
-        'flex', 'px-3', 'py-1', 'text-sm', 'font-semibold', 'text-white',
-        "bg-#{resolved_color}-600", 'rounded-full', 'w-fit', 'h-fit'
-      ]
+      theme_classes(
+        classic: [
+          'flex', 'px-3', 'py-1', 'text-sm', 'font-semibold', 'rounded-full', 'w-fit', 'h-fit',
+          "bg-#{resolved_color}-200", "text-#{resolved_color}-800", 'shadow-md',
+          "dark:bg-#{resolved_color}-700", "dark:text-#{resolved_color}-100"
+        ]
+      )
     end
   end
 end

data/app/components/tailwinds/button_component.rb

@@ -18,7 +18,7 @@ module Tailwinds
       {
         small: 'text-sm py-1 px-2 rounded',
         middle: 'py-2 px-4 h-10',
-        large: 'text-lg px-5 py-3'
+        large: 'text-xl px-5 py-3 h-12'
       }[size]
     end
 
@@ -29,22 +29,25 @@ module Tailwinds
     end
 
     def default_classes
-      [
-        'btn', 'btn-primary', 'flex', 'flex-row', 'font-bold', 'rounded-sm', 'flex', 'flex-row', 'whitespace-nowrap',
-        'items-center', 'gap-1', size_classes.to_s, options[:class].to_s
-      ]
+      base_classes = theme_classes(
+        classic: %w[btn btn-primary flex flex-row font-semibold rounded-xl whitespace-nowrap items-center gap-1
+                    shadow-md]
+      )
+
+      base_classes + [size_classes.to_s, options[:class].to_s]
     end
 
     def color_classes
       if disabled?
-        %w[bg-gray-400 text-gray-100]
+        %w[bg-gray-200 text-gray-400 shadow-inner dark:bg-gray-800 dark:text-gray-500]
       else
         [
-          "bg-#{resolved_color}-600",
-          "hover:bg-#{resolved_color}-800",
-          'text-gray-300'
+          "bg-#{resolved_color}-200", "hover:bg-#{resolved_color}-300", "text-#{resolved_color}-800",
+          "dark:bg-#{resolved_color}-700", "dark:hover:bg-#{resolved_color}-600", "dark:text-#{resolved_color}-100"
         ]
-      end
+      end => classes_collection
+
+      theme_classes classic: classes_collection
     end
 
     def disabled?

data/app/components/tailwinds/containers/main_component.html.haml

@@ -0,0 +1,2 @@
+%main.w-full.h-full.min-h-dvh{ class: container_classes }
+  = content

data/app/components/tailwinds/containers/main_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Containers
+    # Main container for tailwind-styled layout
+    class MainComponent < Tramway::BaseComponent
+      def container_classes
+        theme_classes(
+          classic: 'bg-gray-100 text-gray-700 shadow-inner dark:bg-gray-900 dark:text-gray-100'
+        )
+      end
+    end
+  end
+end

data/app/components/tailwinds/containers/narrow_component.html.haml

@@ -1,3 +1,3 @@
-.container.p-4.flex.align-center.justify-center.w-full.mx-auto.bg-gray-900.text-white{ id:, **options }
+%div{ class: container_classes, id:, **options }
   .flex.flex-col.justify-center.w-full
     = content

data/app/components/tailwinds/containers/narrow_component.rb

@@ -6,6 +6,13 @@ module Tailwinds
     class NarrowComponent < Tramway::BaseComponent
       option :id, optional: true, default: proc { SecureRandom.uuid }
       option :options, optional: true, default: proc { {} }
+
+      def container_classes
+        theme_classes(
+          classic: 'container p-4 flex align-center justify-center w-full mx-auto bg-gray-100 text-gray-700 ' \
+                   'shadow-inner rounded-xl dark:bg-gray-900 dark:text-gray-100'
+        )
+      end
     end
   end
 end

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

@@ -17,7 +17,7 @@
     animation: fadeout 2.7s ease-out forwards;
   }
 
-.fixed.top-4.right-4.z-50.space-y-2{ **options }
-  .flash.opacity-100.text-white.px-4.py-2.rounded.shadow{ class: "bg-#{resolved_color}-700" }
-    .text-xl.font-bold
+%div{ class: container_classes, **options }
+  %div{ class: flash_classes }
+    %div{ class: title_classes }
       = text

data/app/components/tailwinds/flash_component.rb

@@ -7,5 +7,24 @@ module Tailwinds
     option :type, optional: true, default: -> {}
     option :color, optional: true, default: -> {}
     option :options, optional: true, default: -> { {} }
+
+    def container_classes
+      theme_classes(
+        classic: 'fixed top-4 right-4 z-50 space-y-2'
+      )
+    end
+
+    def flash_classes
+      theme_classes(
+        classic: "flash opacity-100 px-4 py-2 rounded-xl shadow-md bg-#{resolved_color}-100 " \
+                 "text-#{resolved_color}-800"
+      )
+    end
+
+    def title_classes
+      theme_classes(
+        classic: 'text-xl font-semibold'
+      )
+    end
   end
 end

data/app/components/tailwinds/form/date_field_component.html.haml

@@ -2,6 +2,5 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full border rounded focus:outline-none bg-gray-800 border-gray-600 text-white focus:border-red-400 placeholder-white'
-  - classes = "#{size_class(:text_input)} #{base_classes}"
-  = @input.call @attribute, **@options.merge(class: classes), value: @value
+- classes = "#{size_class(:text_input)} #{text_input_base_classes}"
+= @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/tailwinds/form/file_field_component.html.haml

@@ -1,7 +1,7 @@
 .mb-4
   - if @label
-    - base_classes = 'inline-block text-white font-bold rounded cursor-pointer mt-4 bg-blue-600 hover:bg-blue-500'
-    - classes = "#{size_class(:file_button)} #{base_classes}"
+    - classes = "#{size_class(:file_button)} #{file_button_base_classes}"
+
     %label{ for: @for, class: classes }
       = @label
   = @input

data/app/components/tailwinds/form/label_component.html.haml

@@ -1,2 +1,2 @@
-%label.block.text-sm.font-bold.mb-2.text-white{ for: }
+%label{ for: @for, class: form_label_classes }
   = content

data/app/components/tailwinds/form/label_component.rb

@@ -5,6 +5,12 @@ module Tailwinds
     # Form label for all tailwind-styled forms
     class LabelComponent < Tramway::BaseComponent
       option :for
+
+      def form_label_classes
+        theme_classes(
+          classic: 'block text-sm font-semibold mb-2 text-white'
+        )
+      end
     end
   end
 end

data/app/components/tailwinds/form/multiselect/dropdown_container.html.haml

@@ -1,3 +1,3 @@
-#dropdown.absolute.shadow.top-11.z-40.w-full.lef-0.rounded.max-h-select.overflow-y-auto.bg-gray-800.shadow-lg.ring-1.ring-gray-700{ data: { action: "click@window->multiselect#closeOnClickOutside" } }
+#dropdown{ class: dropdown_classes, data: { action: "click@window->multiselect#closeOnClickOutside" } }
   .flex.flex-col.w-full
     {{content}}

data/app/components/tailwinds/form/multiselect/dropdown_container.rb

@@ -4,7 +4,13 @@ module Tailwinds
   module Form
     module Multiselect
       # Container for dropdown component
-      class DropdownContainer < ViewComponent::Base
+      class DropdownContainer < Tramway::BaseComponent
+        def dropdown_classes
+          theme_classes(
+            classic: 'absolute shadow top-11 z-40 w-full lef-0 rounded-xl max-h-select overflow-y-auto ' \
+                     'bg-gray-100 shadow-md ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700'
+          )
+        end
       end
     end
   end

data/app/components/tailwinds/form/multiselect/item_container.html.haml

@@ -1,5 +1,5 @@
-.cursor-pointer.w-full.rounded-t.border-b.border-gray-700.hover:bg-gray-700{ data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
-  .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.relative.hover:border-gray-600
-    .w-full.items-center.flex.dark:text-gray-100
+%div{ class: item_classes, data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
+  %div{ class: item_inner_classes }
+    %div{ class: item_text_classes }
       .mx-2.leading-6
         {{text}}

data/app/components/tailwinds/form/multiselect/item_container.rb

@@ -4,7 +4,27 @@ module Tailwinds
   module Form
     module Multiselect
       # Container for item in dropdown component
-      class ItemContainer < ViewComponent::Base
+      class ItemContainer < Tramway::BaseComponent
+        def item_classes
+          theme_classes(
+            classic: 'cursor-pointer w-full rounded-xl border-b border-gray-200 bg-gray-100 ' \
+                     'hover:bg-gray-200 shadow-inner dark:bg-gray-900 dark:border-gray-700 ' \
+                     'dark:hover:bg-gray-800'
+          )
+        end
+
+        def item_inner_classes
+          theme_classes(
+            classic: 'flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative ' \
+                     'hover:border-gray-300 dark:hover:border-gray-600'
+          )
+        end
+
+        def item_text_classes
+          theme_classes(
+            classic: 'w-full items-center flex text-gray-700 dark:text-gray-100'
+          )
+        end
       end
     end
   end

data/app/components/tailwinds/form/multiselect/select_as_input.html.haml

@@ -1,4 +1,3 @@
 .flex-1
-  - base_classes = 'bg-transparent appearance-none outline-none h-full w-full hidden text-white placeholder-white'
-  - classes = "#{@size_class} #{base_classes}"
-  = @input.call(@attribute, @options.merge(placeholder: "{{placeholder}}", class: classes, data: { 'multiselect-target' => 'hiddenInput' }))
+- classes = "#{@size_class} #{base_classes}"
+= @input.call(@attribute, @options.merge(placeholder: "{{placeholder}}", class: classes, data: { 'multiselect-target' => 'hiddenInput' }))

data/app/components/tailwinds/form/multiselect/select_as_input.rb

@@ -4,13 +4,18 @@ module Tailwinds
   module Form
     module Multiselect
       # Renders input as select
-      class SelectAsInput < ViewComponent::Base
-        extend Dry::Initializer[undefined: false]
-
+      class SelectAsInput < Tramway::BaseComponent
         option :options
         option :attribute
         option :input
         option :size_class
+
+        def base_classes
+          theme_classes(
+            classic: 'bg-transparent appearance-none outline-none h-full w-full hidden text-gray-700 ' \
+                     'placeholder-gray-400 dark:text-gray-100 dark:placeholder-gray-500'
+          )
+        end
       end
     end
   end

data/app/components/tailwinds/form/multiselect/selected_item_template.html.haml

@@ -1,4 +1,4 @@
-.flex.justify-center.items-center.m-1.font-medium.py-1.px-2.rounded-full.border.bg-teal-900.text-teal-100.border-teal-700
+%div{ class: selected_item_classes }
   .text-xs.font-normal.leading-none.max-w-full.flex-initial
     {{text}}
   .flex.flex-auto.flex-row-reverse

data/app/components/tailwinds/form/multiselect/selected_item_template.rb

@@ -4,7 +4,14 @@ module Tailwinds
   module Form
     module Multiselect
       # Tailwind-styled multi-select field
-      class SelectedItemTemplate < ViewComponent::Base
+      class SelectedItemTemplate < Tramway::BaseComponent
+        def selected_item_classes
+          theme_classes(
+            classic: 'flex justify-center items-center m-1 font-medium py-1 px-2 rounded-full border ' \
+                     'bg-teal-100 text-teal-800 border-teal-200 shadow-md dark:bg-teal-900 ' \
+                     'dark:text-teal-100 dark:border-teal-700'
+          )
+        end
       end
     end
   end

data/app/components/tailwinds/form/multiselect_component.html.haml

@@ -2,9 +2,9 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  .flex.flex-col.relative.text-gray-100{ data: multiselect_hash, id: "#{@for}_multiselect" }
+  %div{ class: wrapper_classes, data: multiselect_hash, id: "#{@for}_multiselect" }
     .min-w-96.w-fit
-      .p-1.flex.border.rounded.border-gray-600.bg-gray-800{ data: { "multiselect-target" => "dropdown" } }
+      %div{ class: dropdown_classes, data: { "multiselect-target" => "dropdown" } }
         .flex.flex-auto.flex-wrap{ data: { "multiselect-target" => "showSelectedArea" } }
-        .w-8.py-1.pl-2.pr-1.border-l.flex.items-center.text-gray-500.border-gray-600
+        %div{ class: dropdown_indicator_classes }
           ^

data/app/components/tailwinds/form/multiselect_component.rb

@@ -26,6 +26,26 @@ module Tailwinds
         controllers.join(' ')
       end
 
+      def wrapper_classes
+        theme_classes(
+          classic: 'flex flex-col relative text-gray-700 dark:text-gray-200'
+        )
+      end
+
+      def dropdown_classes
+        theme_classes(
+          classic: 'p-1 flex border rounded-xl border-gray-200 bg-gray-100 shadow-inner ' \
+                   'dark:bg-gray-900 dark:border-gray-700'
+        )
+      end
+
+      def dropdown_indicator_classes
+        theme_classes(
+          classic: 'w-8 py-1 pl-2 pr-1 border-l flex items-center text-gray-400 border-gray-200 ' \
+                   'dark:text-gray-500 dark:border-gray-700'
+        )
+      end
+
       private
 
       def action

data/app/components/tailwinds/form/number_field_component.html.haml

@@ -2,7 +2,5 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full border rounded focus:outline-none '
-  - base_classes += 'bg-gray-800 border-gray-600 text-white focus:border-red-400 placeholder-white'
-  - classes = "#{size_class(:text_input)} #{base_classes}"
+  - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/tailwinds/form/select_component.html.haml

@@ -2,8 +2,5 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full border rounded focus:outline-none focus:ring-2 '
-  - base_classes += 'focus:border-transparent disabled:cursor-not-allowed '
-  - base_classes += 'bg-gray-800 border-gray-600 text-gray-100 focus:ring-red-400 disabled:bg-gray-800 disabled:text-gray-500'
-  - classes = "#{size_class(:select_input)} #{base_classes}"
+  - classes = "#{size_class(:select_input)} #{select_base_classes}"
   = @input.call(@attribute, @collection, { selected: @value }, @options.merge(class: classes))

data/app/components/tailwinds/form/submit_button_component.html.haml

@@ -1,12 +1,11 @@
 .flex.items-center.justify-between
-  - base_classes = 'hover:bg-red-700 font-bold rounded focus:outline-none focus:shadow-outline cursor-pointer '
-  - base_classes += 'text-white bg-red-600 hover:bg-red-500 focus:ring-2 focus:ring-red-400'
-  - classes = "#{size_class(:submit_button)} #{base_classes}"
+  - classes = "#{size_class(:submit_button)} #{submit_button_base_classes}"
 
   = helpers.tramway_button text: @text,
     type: :submit,
     name: :commit,
     size:,
+    class: classes,
     **@options
 
   = @content

data/app/components/tailwinds/form/submit_button_component.rb

@@ -14,7 +14,7 @@ module Tailwinds
           options: options.except(:type),
           label: nil,
           for: nil,
-          size:
+          size:,
         )
       end
     end

data/app/components/tailwinds/form/text_area_component.html.haml

@@ -2,7 +2,5 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full border rounded focus:outline-none '
-  - base_classes += 'bg-gray-800 border-gray-600 text-white focus:border-red-400 placeholder-white'
-  - classes = "#{size_class(:text_input)} #{base_classes}"
+  - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

data/app/components/tailwinds/form/text_field_component.html.haml

@@ -2,7 +2,5 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full border rounded focus:outline-none '
-  - base_classes += 'bg-gray-800 border-gray-600 text-white focus:border-red-400 placeholder-white'
-  - classes = "#{size_class(:text_input)} #{base_classes}"
+  - classes = "#{size_class(:text_input)} #{text_input_base_classes}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -7,7 +7,10 @@ module Tailwinds
     class ItemComponent < TailwindComponent
       def style
         @style ||= [
-          'px-4', 'py-2', 'rounded', 'whitespace-nowrap', 'hover:bg-gray-700', 'hover:text-gray-400', 'text-white'
+          theme_classes(
+            classic: 'px-4 py-2 rounded-xl whitespace-nowrap hover:bg-gray-200 hover:text-gray-600 text-gray-700 ' \
+                     'dark:text-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300'
+          )
         ].join(' ')
       end
     end