refactor: upgrade to TailwindCSS v4

.gitignore

@@ -54,6 +54,9 @@ js_bundle_metadata.json
 /public/avo-assets/avo.base.js
 /public/avo-assets/avo.js.map
 /public/avo-assets/avo.base.js.map
+/public/avo-assets/avo.base.tw4.css
+/public/avo-assets/late-registration.js
+/public/avo-assets/late-registration.js.map
 /public/packs-test
 /node_modules
 node_modules

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.18.1)
+    avo (3.18.1.tw4)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)
@@ -293,7 +293,6 @@ GEM
       concurrent-ruby (~> 1.1)
       webrick (~> 1.7)
       websocket-driver (~> 0.7)
-    ffi (1.17.1-arm64-darwin)
     ffi (1.17.1-x86_64-linux-gnu)
     flay (2.13.3)
       erubi (~> 1.10)
@@ -422,8 +421,6 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.4)
-    nokogiri (1.18.3-arm64-darwin)
-      racc (~> 1.4)
     nokogiri (1.18.3-x86_64-linux-gnu)
       racc (~> 1.4)
     observer (0.1.2)
@@ -699,8 +696,6 @@ GEM
     zeitwerk (2.7.2)
 
 PLATFORMS
-  arm64-darwin-23
-  arm64-darwin-24
   x86_64-linux
 
 DEPENDENCIES
@@ -788,4 +783,4 @@ DEPENDENCIES
   zeitwerk
 
 BUNDLED WITH
-   2.5.9
+   2.6.3

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 grid gap-x-2 grid-cols-[max-content_1fr];
+  dl {
+    @apply text-sm grid gap-x-2 grid-cols-[max-content_1fr];
 
-  dt {
-    @apply font-bold mt-1;
-  }
+    dt {
+      @apply font-bold mt-1;
+    }
 
-  dd {
-    @apply ml-0 col-start-2;
+    dd {
+      @apply ml-0 col-start-2;
+    }
   }
-}
 
-/* 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;