Wiped out light color theme

.github/workflows/rspec.yml

@@ -7,7 +7,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        ruby: ['3.2', '3.3', '3.4']
+        ruby: ['3.2', '3.3', '3.4', '4.0']
         appraisal: ['rails-7.1', 'rails-7.2', 'rails-8.0', 'rails-8.1']
 
     runs-on: ubuntu-latest
@@ -29,7 +29,8 @@ jobs:
 
       - name: Install dependencies for Appraisal
         run: |
-          bundle install --jobs 4 --retry 3 --path vendor/bundle
+          bundle config set path 'vendor/bundle'
+          bundle install --jobs 4 --retry 3
           bundle exec appraisal install
 
       - name: Precompile assets

.github/workflows/rubocop.yml

@@ -9,7 +9,7 @@ jobs:
       - name: Set up Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3.4.7
+          ruby-version: 4.0.0
 
       - name: Checkout repository
         uses: actions/checkout@v3

app/components/tailwinds/badge_component.rb

@@ -10,8 +10,8 @@ class BadgeComponent < Tailwinds::BaseComponent
 
     def classes
       [
-        'flex', 'px-3', 'py-1', 'text-sm', 'font-semibold', 'text-white', "bg-#{resolved_color}-500",
-        "dark:bg-#{resolved_color}-600", 'rounded-full', 'w-fit', 'h-fit'
+        'flex', 'px-3', 'py-1', 'text-sm', 'font-semibold', 'text-white',
+        "bg-#{resolved_color}-600", 'rounded-full', 'w-fit', 'h-fit'
       ]
     end
   end

app/components/tailwinds/button_component.rb

@@ -24,8 +24,7 @@ def size_classes
 
     def classes
       (default_classes +
-        light_mode_classes +
-        dark_mode_classes +
+        color_classes +
         (link ? %w[px-1 h-fit] : ['cursor-pointer'])).compact.join(' ')
     end
 
@@ -36,19 +35,11 @@ def default_classes
       ]
     end
 
-    def light_mode_classes
+    def color_classes
       [
-        "bg-#{resolved_color}-500",
-        "hover:bg-#{resolved_color}-700",
-        'text-white'
-      ]
-    end
-
-    def dark_mode_classes
-      [
-        "dark:bg-#{resolved_color}-600",
-        "dark:hover:bg-#{resolved_color}-800",
-        'dark:text-gray-300'
+        "bg-#{resolved_color}-600",
+        "hover:bg-#{resolved_color}-800",
+        'text-gray-300'
       ]
     end
   end

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-100.dark:bg-gray-900.text-gray-900.dark:text-white{ id: }
-  .flex.flex-col.justify-center.w-full.dark:text-white
+.container.p-4.flex.align-center.justify-center.w-full.mx-auto.bg-gray-900.text-white{ id: }
+  .flex.flex-col.justify-center.w-full
     = content

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

@@ -2,7 +2,6 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
-  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - 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

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

@@ -1,7 +1,6 @@
 .mb-4
   - if @label
-    - base_classes = 'inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold rounded cursor-pointer mt-4 '
-    - base_classes += 'dark:bg-blue-600 dark:hover:bg-blue-500'
+    - 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}"
     %label{ for: @for, class: classes }
       = @label

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

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

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

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

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

@@ -1,5 +1,5 @@
-.cursor-pointer.w-full.border-gray-100.rounded-t.border-b.hover:bg-teal-100.dark:border-gray-700.dark: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-teal-100.dark:hover:border-gray-600
+.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
       .mx-2.leading-6
         {{text}}

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

@@ -1,5 +1,4 @@
 .flex-1
-  - base_classes = 'bg-transparent appearance-none outline-none h-full w-full text-gray-800 hidden '
-  - base_classes += 'dark:text-white dark:placeholder-white'
+  - 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' }))

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.bg-white.rounded-full.text-teal-700.bg-teal-100.border.border-teal-300.dark:bg-teal-900.dark:text-teal-100.dark:border-teal-700
+.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
   .text-xs.font-normal.leading-none.max-w-full.flex-initial
     {{text}}
   .flex.flex-auto.flex-row-reverse

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.dark:text-gray-100{ data: multiselect_hash, id: "#{@for}_multiselect" }
+  .flex.flex-col.relative.text-gray-100{ data: multiselect_hash, id: "#{@for}_multiselect" }
     .min-w-96.w-fit
-      .p-1.flex.border.border-gray-200.bg-white.rounded.dark:border-gray-600.dark:bg-gray-800{ data: { "multiselect-target" => "dropdown" } }
+      .p-1.flex.border.rounded.border-gray-600.bg-gray-800{ data: { "multiselect-target" => "dropdown" } }
         .flex.flex-auto.flex-wrap{ data: { "multiselect-target" => "showSelectedArea" } }
-        .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200.dark:text-gray-500.dark:border-gray-600
+        .w-8.py-1.pl-2.pr-1.border-l.flex.items-center.text-gray-500.border-gray-600
           ^

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

@@ -2,7 +2,7 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
-  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - 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}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -2,8 +2,8 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full bg-white border border-gray-300 text-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 '
-  - base_classes += 'focus:border-transparent disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed '
-  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-red-400 dark:disabled:bg-gray-800 dark:disabled:text-gray-500'
+  - 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}"
   = @input.call(@attribute, @collection, { selected: @value }, @options.merge(class: classes))

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

@@ -1,6 +1,6 @@
 .flex.items-center.justify-between
-  - base_classes = 'bg-red-500 hover:bg-red-700 text-white font-bold rounded focus:outline-none focus:shadow-outline cursor-pointer '
-  - base_classes += 'dark:text-white dark:bg-red-600 dark:hover:bg-red-500 dark:focus:ring-2 dark:focus:ring-red-400'
+  - 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}"
 
   = helpers.tramway_button text: @text,

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

@@ -2,7 +2,7 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
-  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - 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}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

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

@@ -2,7 +2,7 @@
   - if @label
     = component('tailwinds/form/label', for: @for) do
       = @label
-  - base_classes = 'w-full bg-white border border-gray-300 rounded focus:outline-none focus:border-red-500 '
-  - base_classes += 'dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:border-red-400 dark:placeholder-white'
+  - 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}"
   = @input.call @attribute, **@options.merge(class: classes), value: @value

app/components/tailwinds/nav/item_component.rb

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

app/components/tailwinds/navbar_component.html.haml

@@ -1,10 +1,10 @@
-%nav.py-2.px-4.sm:px-8.flex.justify-between.items-center.dark:bg-gray-800{ class: "bg-#{@color}" }
+%nav.py-2.px-4.sm:px-8.flex.justify-between.items-center.bg-gray-800
   .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.text-white.font-bold.dark:text-white
+            .text-xl.font-bold.text-white
               = @title[:text]
         - if @left_items.present?
           %ul.flex-row.items-center.space-x-4.ml-4.hidden.md:flex
@@ -20,7 +20,7 @@
       - @right_items.each do |item|
         = item
 
-#mobile-menu.hidden.flex-col.sm:hidden.dark:bg-gray-800
+#mobile-menu.hidden.flex-col.sm:hidden.bg-gray-800
   - if @left_items.present?
     %ul.flex.flex-col.space-y-2
       - @left_items.each do |item|

app/components/tailwinds/navbar_component.rb

@@ -1,42 +1,12 @@
 # frozen_string_literal: true
 
 module Tailwinds
-  # Background helper module
-  #
-  module BackgroundHelper
-    CSS_COLORS = %i[aqua black blue fuchsia gray green lime maroon navy olive orange purple red
-                    silver teal white yellow].freeze
-    MIN_INTENSITY = 100
-    MAX_INTENSITY = 950
-    DEFAULT_BACKGROUND_COLOR = :purple
-    DEFAULT_BACKGROUND_INTENSITY = 700
-
-    def self.background(options)
-      color = options.dig(:background, :color) || DEFAULT_BACKGROUND_COLOR
-      intensity = options.dig(:background, :intensity) || DEFAULT_BACKGROUND_INTENSITY
-
-      unless (MIN_INTENSITY..MAX_INTENSITY).cover?(intensity)
-        raise "Navigation Background Color intensity should be between #{MIN_INTENSITY} and #{MAX_INTENSITY}"
-      end
-
-      if color.in? CSS_COLORS
-        "#{color}-#{intensity}"
-      else
-        "[#{color}]"
-      end
-    end
-  end
-
-  # Navbar class main class
-  #
+  # Navbar component
   class NavbarComponent < TailwindComponent
-    include Tailwinds::BackgroundHelper
-
     def initialize(**options)
       @title = { text: options[:title], link: options[:title_link] || '/' }
       @left_items = options[:left_items]
       @right_items = options[:right_items]
-      @color = BackgroundHelper.background(options)
     end
   end
 end

app/components/tailwinds/pagination/base.rb

@@ -8,15 +8,14 @@ class Base < Tramway::BaseComponent
       option :url
       option :remote
 
-      # :reek:UtilityFunction { enabled: false }
       def pagination_classes(klass: nil)
-        default_classes = ['cursor-pointer', 'px-3', 'py-2', 'font-medium', 'text-purple-700', 'bg-white',
-                           'rounded-md', 'hover:bg-purple-100', 'dark:text-white', 'dark:bg-gray-800',
-                           'dark:hover:bg-gray-700']
+        default_classes = [
+          'cursor-pointer', 'px-3', 'py-2', 'font-medium', 'rounded-md', 'text-white', 'bg-gray-800',
+          'hover:bg-gray-700'
+        ]
 
         (default_classes + [klass]).join(' ')
       end
-      # :reek:UtilityFunction { enabled: true }
     end
   end
 end

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-purple-700.dark:text-white.sm:flex.hidden
-    = helpers.t('views.pagination.truncate').html_safe
+  %span.page.gap.px-3.py-2.text-sm.font-medium.text-white.sm:flex.hidden
+    = helpers.t('views.pagination.truncate').html_safe

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

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

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-gray-900.dark:text-white.text-base
+.div-table-cell.md:block.first:block.hidden.px-6.py-4.font-medium.text-white.text-base
   = content

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

@@ -1,4 +1,4 @@
-.div-table-row.grid.text-white.text-small.gap-4.bg-purple-700.dark:bg-gray-700.dark:text-gray-400.grid-cols-1{ class: "md:grid-cols-#{columns_count}", aria: { label: "Table Header" }, role: "row" }
+.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" }
   - if headers.any?
     - headers.each do |header|
       .div-table-cell.py-4.px-6.first:block.hidden.md:block

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.bg-purple-700.shadow-lg.z-50.dark:bg-gray-800.animate-roll-up{ class: 'h-1/2' }
-  %button.absolute.top-4.text-white.right-4.hover:text-gray-700.dark:text-gray-400.dark:hover:text-gray-200{ "data-action" => "click->preview#close", "data-controller" => "preview" }
+#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" }
     ✕

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-gray-900.dark:text-white.text-xs.sm:text-base
+      .div-table-cell.px-6.py-4.font-medium.text-white.text-xs.sm:text-base
         = value
 
 - else

app/components/tailwinds/table/row_component.rb

@@ -24,13 +24,13 @@ def row_tag(**options, &)
 
       def desktop_row_classes(cells_count)
         [
-          'div-table-row', 'grid', 'gap-4', 'bg-white', 'border-b', 'last:border-b-0', 'dark:bg-gray-800',
-          'dark:border-gray-700', "md:grid-cols-#{cells_count}", 'grid-cols-1'
+          '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(' ')
       end
 
       def link_row_classes
-        'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'
+        'cursor-pointer hover:bg-gray-700'
       end
     end
   end

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-500.dark:text-gray-400{ class: "#{options[:class]} #{width_class}", **options.except(:class) }
+.div-table.text-left.rtl:text-right.text-gray-400{ class: "#{options[:class]} #{width_class}", **options.except(:class) }
   = content

app/components/tailwinds/title_component.html.haml

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

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-100.dark:bg-gray-900.text-gray-900.dark:text-white
+  %body.bg-gray-900.text-white
     = tramway_navbar title: 'Tramway'
 
     - if flash.any?