refactor: upgrade to TailwindCSS v4

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.17.8)
+    avo (3.17.8.tw4)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)
@@ -787,4 +787,4 @@ DEPENDENCIES
   zeitwerk
 
 BUNDLED WITH
-   2.5.9
+   2.5.22

README.md

@@ -125,5 +125,6 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 
  - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage
  - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
+ - [`marksmith`](https://github.com/avo-hq/marksmith) - GitHub-style markdown editor for Ruby on Rails with ActiveStorage support.
  - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
  - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app

app/assets/stylesheets/avo.base.css

@@ -1,124 +1,124 @@
-@import './../../../node_modules/easymde/dist/easymde.min.css';
-@import './../../../node_modules/tippy.js/dist/tippy.css';
-@import './../../../node_modules/tippy.js/themes/light.css';
-@import './../../../node_modules/flatpickr/dist/flatpickr.css';
-@import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
-@import './../../../node_modules/@yaireo/tagify/dist/tagify.css';
-
-@import 'tailwindcss/base';
-
-@import './css/fonts.css';
-@import './css/buttons.css';
-@import './css/typography.css';
-@import './css/tooltips.css';
-@import './css/loader.css';
-@import './css/pagination.css';
-@import './css/breadcrumbs.css';
-@import './css/search.css';
-@import './css/active-storage.css';
-@import './css/scrollbar.css';
-@import './css/sidebar.css';
-@import './css/spinner.css';
-
-@import './css/fields/status.css';
-@import './css/fields/code.css';
-@import './css/fields/progress.css';
-@import './css/fields/trix.css';
-@import './css/fields/tags.css';
-@import './css/fields/tiptap.css';
-
-@import 'tailwindcss/components';
-
-@import 'tailwindcss/utilities';
-
-html,
-body {
-  @apply antialiased relative h-full;
-}
+@import "tailwindcss";
+
+/* Figure out a way to add those dynamically */
+@source "../../../tmp/avo/packages/avo-advanced";
+@source "../../../tmp/avo/packages/avo-dashboards";
+@source "../../../tmp/avo/packages/avo-dynamic_filters";
+@source "../../../tmp/avo/packages/avo-kanban";
+@source "../../../tmp/avo/packages/avo-menu";
+@source "../../../tmp/avo/packages/avo-pro";
+
+@config "../../../tailwind.config.js";
+
+@layer components {
+  @import './../../../node_modules/easymde/dist/easymde.min.css';
+  @import './../../../node_modules/tippy.js/dist/tippy.css';
+  @import './../../../node_modules/tippy.js/themes/light.css';
+  @import './../../../node_modules/flatpickr/dist/flatpickr.css';
+  @import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
+  @import './../../../node_modules/@yaireo/tagify/dist/tagify.css';
+
+  @import './css/fonts.css';
+  @import './css/buttons.css';
+  @import './css/typography.css';
+  @import './css/tooltips.css';
+  @import './css/loader.css';
+  @import './css/pagination.css';
+  @import './css/breadcrumbs.css';
+  @import './css/search.css';
+  @import './css/active-storage.css';
+  @import './css/scrollbar.css';
+  @import './css/sidebar.css';
+  @import './css/spinner.css';
+
+  @import './css/fields/status.css';
+  @import './css/fields/code.css';
+  @import './css/fields/progress.css';
+  @import './css/fields/trix.css';
+  @import './css/fields/tags.css';
+  @import './css/fields/tiptap.css';
+
+  html,
+  body {
+    @apply antialiased relative h-full;
+  }
 
-.will-change-transform {
-  will-change: transform;
-}
+  .will-change-transform {
+    will-change: transform;
+  }
 
-.fade-enter-active,
-.fade-leave-active {
-  will-change: opacity;
-  will-change: transform;
+  .fade-enter-active,
+  .fade-leave-active {
+    will-change: opacity;
+    will-change: transform;
 
-  @apply transition transform duration-150;
-}
+    @apply transition transform duration-150;
+  }
 
-.fade-enter-active {
-  @apply relative ease-out delay-150;
-}
+  .fade-enter-active {
+    @apply relative ease-out delay-150;
+  }
 
-.fade-leave-active {
-  @apply relative ease-in;
-}
+  .fade-leave-active {
+    @apply relative ease-in;
+  }
 
-.fade-enter {
-  @apply delay-150 opacity-0 -translate-y-1;
-}
+  .fade-enter {
+    @apply delay-150 opacity-0 -translate-y-1;
+  }
 
-.fade-enter-to {
-  @apply  delay-150 opacity-100 translate-y-0;
-}
+  .fade-enter-to {
+    @apply  delay-150 opacity-100 translate-y-0;
+  }
 
-.fade-leave {
-  @apply opacity-100 translate-y-0;
-}
+  .fade-leave {
+    @apply opacity-100 translate-y-0;
+  }
 
-.fade-leave-to {
-  @apply opacity-0 translate-y-1;
-}
+  .fade-leave-to {
+    @apply opacity-0 translate-y-1;
+  }
 
-.turbo-progress-bar {
-  @apply bg-primary-400;
-}
+  .turbo-progress-bar {
+    @apply bg-primary-400;
+  }
 
-body.os-mac .mac\:hidden {
-  display: none;
-}
+  body.os-mac .mac\:hidden {
+    display: none;
+  }
 
-body.os-pc .pc\:hidden {
-  display: none;
-}
+  body.os-pc .pc\:hidden {
+    display: none;
+  }
 
-trix-editor {
-  max-height: 320px !important;
-  overflow-y: auto;
-}
+  trix-editor {
+    max-height: 320px !important;
+    overflow-y: auto;
+  }
 
-dialog#turbo-confirm {
-  @apply bg-transparent;
-}
+  dialog#turbo-confirm {
+    @apply bg-transparent;
+  }
 
-dl {
-  @apply text-sm;
+  dl {
+    @apply text-sm;
 
-  dt {
-    @apply font-bold inline-block mt-1;
-  }
+    dt {
+      @apply font-bold inline-block mt-1;
+    }
 
-  dd {
-    @apply inline-block ml-0;
+    dd {
+      @apply inline-block ml-0;
+    }
   }
-}
 
-/* TODO: make content like tailwindcss */
-.floating-row-controls {
-  &:before {
-    content: "";
-    @apply absolute z-10 inset-auto left-0 top-0 mt-0 -translate-x-full w-3 h-full bg-gradient-to-l from-white to-transparent group-hover:from-gray-50;
+  .shift-pressed {
+    & .highlighted-row {
+      @apply !bg-neutral-200;
+    }
   }
-}
 
-.shift-pressed {
-  & .highlighted-row {
-    @apply !bg-neutral-200;
+  .selected-row {
+    @apply !bg-neutral-100;
   }
 }
-
-.selected-row {
-  @apply !bg-neutral-100;
-}

app/assets/stylesheets/css/fields/progress.css

@@ -1,13 +1,13 @@
 progress {
-  @apply h-2 bg-white border border-slate-400 rounded shadow-inner;
+  @apply h-2 bg-white border border-slate-400 rounded-sm shadow-inner;
 }
 progress[value]::-webkit-progress-bar {
-  @apply bg-white border border-gray-500 rounded shadow-inner;
+  @apply bg-white border border-gray-500 rounded-sm shadow-inner;
 }
 progress[value]::-webkit-progress-value{
-  @apply bg-primary-500 rounded;
+  @apply bg-primary-500 rounded-sm;
 
 }
 progress[value]::-moz-progress-bar {
-  @apply bg-primary-500 rounded appearance-none;
+  @apply bg-primary-500 rounded-sm appearance-none;
 }

app/assets/stylesheets/css/fields/tiptap.css

@@ -1,7 +1,7 @@
 /* EDIT STYLES */
 
 .tiptap {
-  @apply m-0 p-4 outline-none min-h-44;
+  @apply m-0 p-4 outline-hidden min-h-44;
 
   >*+* {
     @apply mt-4;
@@ -22,7 +22,7 @@
 }
 
 .tiptap__field {
-  @apply w-full mb-4 border border-gray-200 rounded;
+  @apply w-full mb-4 border border-gray-200 rounded-sm;
 }
 
 .tiptap__editor {
@@ -54,7 +54,7 @@
 }
 
 .tiptap__button {
-  @apply p-1 text-gray-500 rounded cursor-pointer;
+  @apply p-1 text-gray-500 rounded-sm cursor-pointer;
 
   &:hover:enabled {
     @apply bg-gray-100;
@@ -94,7 +94,7 @@
 }
 
 .tiptap__link-field {
-  @apply text-sm mr-2 py-1 border border-gray-200 rounded;
+  @apply text-sm mr-2 py-1 border border-gray-200 rounded-sm;
 }
 
 /* SHOW STYLES */

app/assets/stylesheets/css/pagination.css

@@ -22,7 +22,7 @@
   .pagy-nav-js .page a,
   .pagy-combo-nav-js .page a,
   .pagy-combo-nav-js .pagy-combo-input a {
-    @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+    @apply rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
 
     &:hover{
       @apply bg-gray-150;
@@ -73,7 +73,7 @@
     }
 
     & a:not(.gap) {
-      @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+      @apply block rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
 
       &:hover{
         @apply bg-gray-150;

app/assets/stylesheets/css/search.css

@@ -22,7 +22,7 @@
   }
 
   .aa-DetachedSearchButton {
-    @apply rounded border-gray-300 h-[34px];
+    @apply rounded-sm border-gray-300 h-[34px];
   }
 }
 
@@ -37,11 +37,11 @@
 
 .aa-Form {
   &:focus-within {
-    @apply ring-0 !important;
+    @apply ring-0;
   }
 
   input {
-    @apply focus:ring-0 !important;
+    @apply focus:ring-0;
   }
   &:focus-within {
     .aa-InputWrapperPrefix{
@@ -71,7 +71,7 @@ button.aa-DetachedCancelButton {
       @apply space-y-2;
 
       .aa-Item {
-        @apply bg-white rounded px-3 py-4 shadow font-medium;
+        @apply bg-white rounded-sm px-3 py-4 shadow font-medium;
 
         .aa-ItemDescription {
           @apply text-gray-500 text-sm font-normal mt-1;

app/assets/stylesheets/css/tooltips.css

@@ -7,7 +7,7 @@
   display: block;
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
 
-  @apply bg-white text-gray-700 px-3 py-0 rounded text-xs;
+  @apply bg-white text-gray-700 px-3 py-0 rounded-sm text-xs;
 }
 
 .tooltip .tooltip-arrow {

app/components/avo/actions_component.html.erb

@@ -10,7 +10,7 @@
     type: :button,
     color: @color,
     size: @size,
-    class: "focus:outline-none",
+    class: "focus:outline-hidden",
     icon: @icon,
     data: {
       action: "click->toggle#togglePanel",
@@ -21,7 +21,7 @@
     <%= @label %>
   <% end %>
   <div
-    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded overflow-hidden hidden"
+    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded-sm overflow-hidden hidden"
     data-toggle-target="panel"
     data-controller="actions-overflow"
     data-actions-overflow-panel-list-value="<%= !@as_row_control %>"
@@ -33,7 +33,7 @@
     data-transition-leave-start="transform opacity-100 translate-y-0"
     data-transition-leave-end="transform opacity-0 -translate-y-1"
   >
-    <div data-target="actions-list" class="w-full space divide-y">
+    <div data-target="actions-list" class="w-full space divide-y divide-gray-200">
       <% @actions.each do |action| %>
         <%= render_item(action)%>
       <% end %>