tramway 2.2 → 2.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31f2e19d40c2dcccde24e3060fd4a735d10a8fd41634f7b633c09dfefe37b06a
-  data.tar.gz: 403c3df3f7b9dcdc4e458dabd26d00c438817bbfd89821fa4807aa2622b36490
+  metadata.gz: 88472147f728346a8406400f46ce9b0c3aeda279944f7c3df64c793addf2f37e
+  data.tar.gz: 65a3a58d859f7c88f960547f78aaa3ba55fb061af5b0abbd0b6b4671c5dee252
 SHA512:
-  metadata.gz: b1728c3e1eacff00ae976d376f6e7fa6d595cee42d7c5a7d2722bd9cd559f3d574a24ac83d53a825ab0008a357ce95bd8e8ceda1a461f7668f5d4ecfa0d10d95
-  data.tar.gz: 6ae4c7bda4c7c984683ebf8c44190bc1ec8177db68243f7d3401c4e0aa279451f860e01b69398b547b314587d0f994fbf110528fe9f4d9149431f5bf2f28cf66
+  metadata.gz: 73ad5c1dab62c549c296a15ba556e7df759ea5613c2afe9894fd794e89d1d6b1b16020c51516ef12559ac3d499b280b3c9cdbb026145705f8c3232737232375d
+  data.tar.gz: 74cd74e6f6c57495ac2ea2178c52e33f94b57ee48ce0c5c746a84895c54af1dff33a491b757e597f863c5630beacd825c66269136054886c7eec2360ff61318b

data/README.md

@@ -228,6 +228,7 @@ localized attribute names and the right column renders their values.
 
 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|
@@ -246,7 +247,8 @@ 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.
+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|
@@ -262,6 +264,32 @@ Tramway.configure do |config|
 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`.
@@ -957,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

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

@@ -1,10 +1,10 @@
-%nav.py-2.px-4.sm:px-8.flex.justify-between.items-center.bg-gray-800
+%nav{ class: navbar_classes }
   .flex.justify-between.w-full
     - if @title[:text].present? || @left_items.present?
       .flex.items-center
         - if @title[:text].present?
           = link_to @title[:link] do
-            .text-xl.font-bold.text-white
+            .text-xl{ class: title_classes }
               = @title[:text]
         - if @left_items.present?
           %ul.flex-row.items-center.space-x-4.ml-4.hidden.md:flex
@@ -12,7 +12,7 @@
               = item
 
     .block.sm:hidden
-      %button#mobile-menu-button.text-white.focus:outline-none
+      %button#mobile-menu-button{ class: mobile_button_classes }
         ☰
 
   - if @right_items.present?
@@ -20,7 +20,7 @@
       - @right_items.each do |item|
         = item
 
-#mobile-menu.hidden.flex-col.sm:hidden.bg-gray-800
+#mobile-menu{ class: mobile_menu_classes }
   - if @left_items.present?
     %ul.flex.flex-col.space-y-2
       - @left_items.each do |item|

data/app/components/tailwinds/navbar_component.rb

@@ -8,5 +8,30 @@ module Tailwinds
       @left_items = options[:left_items]
       @right_items = options[:right_items]
     end
+
+    def navbar_classes
+      theme_classes(
+        classic: 'py-2 px-4 sm:px-8 flex justify-between items-center bg-gray-100 shadow-md ' \
+                 'dark:bg-gray-900'
+      )
+    end
+
+    def title_classes
+      theme_classes(
+        classic: 'text-xl font-semibold text-gray-800 dark:text-gray-100'
+      )
+    end
+
+    def mobile_button_classes
+      theme_classes(
+        classic: 'text-gray-700 focus:outline-none dark:text-gray-200'
+      )
+    end
+
+    def mobile_menu_classes
+      theme_classes(
+        classic: 'hidden flex-col sm:hidden bg-gray-100 shadow-inner dark:bg-gray-900'
+      )
+    end
   end
 end