change bg-gray-200 to ..100

resources/views/components/frameworks/tailwind/batch-exporting.blade.php

@@ -2,7 +2,7 @@
 
     @if($batchExporting && !$batchFinished)
         <div wire:poll="updateExportProgress"
-             class="w-full my-3 px-4 rounded py-3 bg-gray-200 shadow-sm dark:bg-gray-500 text-center">
+             class="w-full my-3 px-4 rounded py-3 bg-gray-100 shadow-sm dark:bg-gray-500 text-center">
             <div class="dark:text-gray-300">{{ $batchProgress }}%</div>
             <div class="dark:text-gray-300">{{ trans('livewire-powergrid::datatable.export.exporting') }}</div>
         </div>
@@ -11,7 +11,7 @@ class="w-full my-3 px-4 rounded py-3 bg-gray-200 shadow-sm dark:bg-gray-500 text
     @if($batchFinished)
         <div class="w-full my-3 dark:bg-gray-800">
             <div x-data={show:true} class="rounded-top">
-                <div class="px-4 py-3 rounded-md cursor-pointer bg-gray-200 shadow dark:bg-gray-500"
+                <div class="px-4 py-3 rounded-md cursor-pointer bg-gray-100 shadow dark:bg-gray-500"
                      @click="show=!show">
                     <div class="flex justify-between">
                         <button

resources/views/components/frameworks/tailwind/export.blade.php

@@ -1,7 +1,7 @@
 <div x-data="{ open: false }"
      @click.away="open = false">
     <button @click.prevent="open = ! open"
-            class="block bg-gray-200 text-gray-700 border border-gray-300 rounded py-1.5 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300">
+            class="block bg-gray-100 text-gray-700 border border-gray-300 rounded py-1.5 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300">
         <div class="flex">
             <x-livewire-powergrid::icons.download class="h-6 w-6 text-gray-500 dark:text-gray-300"/>
         </div>

resources/views/components/frameworks/tailwind/filter.blade.php

@@ -10,7 +10,7 @@
 ])
 <div class="w-full my-3 dark:bg-gray-800">
     <div x-data={show:true} class="rounded-sm">
-        <div class="px-4 py-3 cursor-pointer bg-gray-200 shadow dark:bg-gray-500"
+        <div class="px-4 py-3 cursor-pointer bg-gray-100 shadow dark:bg-gray-500"
              @click="show=!show">
             <button
                 class="appearance-none text-left text-base font-medium text-gray-500 focus:outline-none dark:text-gray-300"

resources/views/components/frameworks/tailwind/footer.blade.php

@@ -5,7 +5,7 @@
             <div class="relative h-10">
 
                 <select wire:model.lazy="perPage"
-                        class="block appearance-none bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500  dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500">
+                        class="block appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500  dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500">
                     @foreach($perPageValues as $value)
                         <option value="{{$value}}">
                             @if($value == 0)

resources/views/components/frameworks/tailwind/multi-select.blade.php

@@ -42,7 +42,7 @@ class="flex justify-center items-center m-1 font-medium p-1 bg-white dark:bg-gra
                             <input readonly
                                    x-ref="multi_select"
                                    placeholder="{{ trans($column->placeholder) ?: trans('livewire-powergrid::datatable.multi_select.select') }}"
-                                   class="w-full block bg-gray-200 text-gray-700 py-2 text-sm px-3 leading-tight focus:outline-none dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-400"
+                                   class="w-full block bg-gray-100 text-gray-700 py-2 text-sm px-3 leading-tight focus:outline-none dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-400"
                                    x-bind:value="selectedValues()"
                             >
                         </div>

resources/views/components/frameworks/tailwind/search.blade.php

@@ -9,7 +9,7 @@
               </span>
             <input wire:model.debounce.600ms="search" type="text"
                    style="padding-left: 36px !important;"
-                   class="block w-full float-right bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 pl-10 dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500"
+                   class="block w-full float-right bg-gray-100 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 pl-10 dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500"
                    placeholder="{{ trans('livewire-powergrid::datatable.placeholders.search') }}">
         </div>
 

resources/views/components/frameworks/tailwind/toggle-columns.blade.php

@@ -3,7 +3,7 @@
          class="mr-0 sm:mr-2 mt-2 sm:mt-0"
          @click.away="open = false">
         <button @click.prevent="open = ! open"
-                class="block bg-gray-200 text-gray-700 border border-gray-300 rounded py-1.5 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300">
+                class="block bg-gray-100 text-gray-700 border border-gray-300 rounded py-1.5 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300">
             <div class="flex">
                 <x-livewire-powergrid::icons.eye-off class="text-gray-500 dark:text-gray-300"/>
             </div>

src/Themes/Tailwind.php

@@ -29,7 +29,7 @@ public static function paginationTheme(): string
     public function table(): Table
     {
         return Theme::table('min-w-full divide-y divide-gray-300 border-b dark:bg-gray-600 border-gray-400 ')
-            ->thead('bg-gray-200 dark:bg-gray-700')
+            ->thead('bg-gray-100 dark:bg-gray-700')
             ->tr('border border-gray-200 dark:border-gray-400')
             ->th('px-2 pr-4 py-3 text-left text-xs font-medium text-gray-500 tracking-wider whitespace-nowrap dark:text-gray-300')
             ->tbody('text-gray-800')
@@ -42,13 +42,13 @@ public function footer(): Footer
     {
         return Theme::footer()
             ->view($this->root() . '.footer')
-            ->select('block appearance-none bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500  dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500');
+            ->select('block appearance-none bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500  dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500');
     }
 
     public function actions(): Actions
     {
         return Theme::actions()
-            ->headerBtn('block w-full bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300')
+            ->headerBtn('block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300')
             ->rowsBtn('focus:outline-none text-sm py-2.5 px-5 rounded border');
     }
 
@@ -90,7 +90,7 @@ public function checkbox(): Checkbox
     public function filterBoolean(): FilterBoolean
     {
         return Theme::filterBoolean()
-            ->input('appearance-none block mt-1 mb-1 bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500', 'max-width: 370px')
+            ->input('appearance-none block mt-1 mb-1 bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500', 'max-width: 370px')
             ->divNotInline('pt-2 p-2')
             ->relativeDiv('pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divInline('');
@@ -99,7 +99,7 @@ public function filterBoolean(): FilterBoolean
     public function filterDatePicker(): FilterDatePicker
     {
         return Theme::filterDatePicker()
-            ->input('appearance-none flatpickr flatpickr-input block mt-1 mb-1 bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
+            ->input('appearance-none flatpickr flatpickr-input block mt-1 mb-1 bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divNotInline('pt-2 p-2')
             ->divInline('');
     }
@@ -108,23 +108,23 @@ public function filterMultiSelect(): FilterMultiSelect
     {
         return Theme::filterMultiSelect()
             ->view($this->root() . '.multi-select')
-            ->input('appearance-none block mt-1 mb-1 bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
+            ->input('appearance-none block mt-1 mb-1 bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divNotInline('pt-2 p-2')
             ->divInline('pr-6');
     }
 
     public function filterNumber(): FilterNumber
     {
         return Theme::filterNumber()
-            ->input('appearance-none block bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
+            ->input('appearance-none block bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divNotInline('pt-2 p-2')
             ->divInline('pr-6');
     }
 
     public function filterSelect(): FilterSelect
     {
         return Theme::filterSelect()
-            ->input('appearance-none block mt-1 mb-1 bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
+            ->input('appearance-none block mt-1 mb-1 bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divNotInline('pt-2 ml-2 p-2')
             ->relativeDiv('pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divInline('pr-6');
@@ -133,8 +133,8 @@ public function filterSelect(): FilterSelect
     public function filterInputText(): FilterInputText
     {
         return Theme::filterInputText()
-            ->select('appearance-none block bg-gray-200 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500', 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700')
-            ->input('w-full block bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
+            ->select('appearance-none block bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 w-full active dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500', 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700')
+            ->input('w-full block bg-gray-100 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 dark:border-gray-500')
             ->divNotInline('mt-1')
             ->divInline('pr-6');
     }