spina 2.20.0 → 2.21.0

data/app/assets/javascripts/spina/controllers/confirm_controller.js

@@ -14,7 +14,7 @@ export default class extends Controller {
 
   get modalHTML() {
     return `<div class="modal" data-controller="modal shortcuts" data-action="keyup@document->shortcuts#confirmClick keyup@document->modal#escClose">
-      <button type="button" class="cursor-default w-full h-full fixed inset-0 bg-gray-700 bg-opacity-25 animate__animated animate__fadeIn animate__faster" tabindex="-1" data-action="modal#close"></button>
+      <button type="button" class="cursor-default w-full h-full fixed inset-0 bg-gray-700/25 animate__animated animate__fadeIn animate__faster" tabindex="-1" data-action="modal#close"></button>
       <div class="modal-window animate__animated animate__zoomIn animate__fadeIn animate__faster p-5 max-w-xs">
         <div class="text-center">
           ${this.message}
@@ -59,4 +59,4 @@ export default class extends Controller {
     return document.querySelector('turbo-frame[id="modal"]')
   }
 
-}
+}

data/app/assets/javascripts/spina/controllers/navigation_controller.js

@@ -14,14 +14,14 @@ export default class extends Controller {
   toggleNavigation(navigation) {
     let ul = navigation.querySelector("ul")
     if (ul.classList.contains("translate-x-full")) { 
-      this.primaryTarget.classList.add("md:bg-opacity-50")
+      this.primaryTarget.classList.add("md:bg-black/50")
       this.labelTargets.forEach(function(label) {
         label.classList.add("-translate-x-2")
         this.switchClass(label, 'opacity-100', 'opacity-0')
       }.bind(this))
       this.switchClass(navigation.querySelector("ul"), "translate-x-full", "md:translate-x-20")
     } else {
-      this.primaryTarget.classList.remove("md:bg-opacity-50")
+      this.primaryTarget.classList.remove("md:bg-black/50")
       this.labelTargets.forEach(function(label) {
         label.classList.remove("-translate-x-2")
         this.switchClass(label, 'opacity-0', 'opacity-100')
@@ -54,7 +54,7 @@ export default class extends Controller {
     this.navigationTargets.forEach(function(navigation) {
       this.switchClass(navigation.querySelector("ul"), "md:translate-x-20", "translate-x-full")
     }.bind(this))
-    this.primaryTarget.classList.remove("md:bg-opacity-50")
+    this.primaryTarget.classList.remove("md:bg-black/50")
     this.labelTargets.forEach(function(label) {
       label.classList.remove("-translate-x-2")
       this.switchClass(label, 'opacity-0', 'opacity-100')
@@ -74,4 +74,4 @@ export default class extends Controller {
     return this.activeItem.closest(`[data-navigation-target*="navigation"]`)
   }
 
-}
+}

data/app/assets/stylesheets/spina/application.tailwind.css

@@ -1,25 +1,42 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* Source paths */
+@source "/Users/bram/apps/spina/app/views/**/*.*";
+@source "/Users/bram/apps/spina/app/components/**/*.*";
+@source "/Users/bram/apps/spina/app/helpers/**/*.*";
+@source "/Users/bram/apps/spina/app/assets/javascripts/**/*.js";
+@source "/Users/bram/apps/spina/app/**/application.tailwind.css";
+
+/* Plugins */
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/aspect-ratio";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-body: "Metropolis";
+
+  --color-spina: #6865b4;
+  --color-spina-light: #797ab8;
+  --color-spina-dark: #3a3a70;
+
+  --animate-duration: 600ms;
+}
 
 /* Configuration */
 @layer base {
-  :root {
-    --animate-duration: 600ms;
-  }
-  
   html {
     @apply font-body;
   }
-  
+
   body {
-    background: #F5F5FA; /* Ever so slightly indigo bg */
+    background: #f5f5fa; /* Ever so slightly indigo bg */
     @apply antialiased;
   }
-  
+
   /* Disable tap highlight on iOS */
-  a, button {
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+  a,
+  button {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 }
 
@@ -33,126 +50,144 @@
     @apply transition-colors duration-200;
     @apply cursor-pointer;
   }
-  
+
   .btn-default {
-    @apply text-gray-700 bg-white shadow-sm border-gray-300;
+    @apply text-gray-700 bg-white shadow-xs border-gray-300;
   }
-  
+
   .btn-default:hover {
     @apply bg-gray-50;
   }
-  
+
   .btn-default:active {
     @apply shadow-inner bg-gray-100;
   }
-  
+
   .btn-primary {
     @apply bg-spina border-spina-dark text-white;
   }
-  
+
   .btn-primary:hover {
     @apply bg-spina-dark;
   }
-  
+
   .btn-red {
     @apply bg-red-500 border-red-500;
     @apply text-white;
   }
-  
+
   .btn.btn-red:hover {
     @apply bg-red-600 border-red-600;
   }
-  
+
   .btn.btn-red:active {
     @apply bg-red-600 border-red-600 shadow-inner;
   }
-  
+
   .btn-gray {
     @apply border-gray-300;
     @apply text-gray-800;
     @apply bg-gray-300;
   }
-  
+
   .btn-gray:hover {
-    @apply bg-gray-400 border-gray-400 bg-opacity-75;
+    @apply bg-gray-400/75 border-gray-400;
   }
-  
+
   .btn-gray:active {
-    @apply bg-gray-400 border-gray-400 bg-opacity-75 shadow-inner;
+    @apply bg-gray-400/75 border-gray-400 shadow-inner;
   }
-  
+
   .btn-green {
     @apply bg-emerald-500;
   }
-  
+
   /* Forms */
-  .form-input, .form-select {
+  .form-input,
+  .form-select {
     /* @apply py-3 px-4; */
     @apply text-gray-700;
-    @apply shadow-sm;
+    @apply shadow-xs;
     @apply transition duration-150 ease-in-out;
     @apply border-gray-300;
     @apply rounded-md;
   }
-  
+
   .form-input::placeholder {
     @apply text-gray-400;
   }
-  
+
   .form-select {
     @apply text-sm font-medium;
     @apply pr-12;
   }
-  
+
   .form-select:focus {
     @apply border-spina-light;
     @apply ring-spina-light;
   }
-  
+
   .form-textarea {
     @apply bg-white;
     @apply text-gray-700;
-    @apply shadow-sm;
+    @apply shadow-xs;
     @apply transition duration-150 ease-in-out;
     @apply border border-gray-300;
     @apply rounded-md;
   }
-  
+
   .form-input:focus {
     @apply border-spina-light;
-    @apply ring-spina-light
+    @apply ring-spina-light;
   }
-  
+
   /* Modals */
-  
+
   .modal {
     @apply flex items-center justify-center;
     @apply fixed z-40 inset-0 h-full p-6;
   }
-  
+
   .modal-window {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     @apply w-full max-w-lg overflow-hidden relative;
-    @apply bg-white bg-opacity-75 shadow-lg rounded-xl;
+    @apply bg-white/75 shadow-lg rounded-xl;
     @apply border border-gray-400;
   }
 
-  /* Trix */  
-  .trix-toolbar button[data-trix-active] {
+  /* Trix */
+  trix-toolbar button[data-trix-active] {
     @apply text-white bg-spina;
   }
-  
-  .trix-toolbar button[disabled] {
+
+  trix-toolbar [data-trix-dialog] {
+    @apply hidden;
+  }
+
+  trix-toolbar .trix-dialog {
+    @apply absolute;
+    @apply top-0;
+    @apply left-0;
+    @apply z-50;
+    @apply bg-white;
+    @apply rounded-lg;
+    @apply shadow-lg;
+  }
+  trix-toolbar [data-trix-dialog][data-trix-active] {
+    @apply block;
+  }
+
+  trix-toolbar button[disabled] {
     @apply bg-gray-100 text-gray-400;
   }
-  
+
   trix-editor [data-trix-mutable]:not(.attachment__captain-editor) {
-    @apply select-none
+    @apply select-none;
   }
-    
+
   trix-editor figure.attachment {
-    @apply m-0 inline-block
+    @apply m-0 inline-block;
   }
 
   trix-editor figure.attachment[data-trix-content-type="Spina::Image"] {
@@ -163,33 +198,41 @@
   trix-editor figure.attachment[data-trix-content-type="Spina::Image"] img {
     @apply m-0 rounded-md object-contain;
   }
-  
-  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
+
+  trix-editor
+    figure.attachment[data-trix-content-type="Spina::Image"]
+    [data-label]:after {
     content: attr(data-label);
     @apply italic text-gray-500 h-8 flex items-center px-2 mt-1 text-sm;
   }
 
   trix-editor figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
-    @apply shadow-lg ring ring-spina-light
+    @apply shadow-lg ring-3 ring-spina-light
   }
-  
-  trix-editor figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
+
+  trix-editor
+    figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment
+    > spina-embed {
     @apply block;
-    @apply shadow-lg ring ring-spina-light rounded-md;
+    @apply shadow-lg ring-3 ring-spina-light rounded-md;
   }
 
   trix-editor figure .attachment__caption {
-    @apply hidden
+    @apply hidden;
   }
 
   trix-editor figure .attachment__toolbar {
-    @apply hidden
+    @apply hidden;
   }
-  
+
   trix-editor [data-trix-mutable]::-moz-selection,
-  trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
-    background: none; }
+  trix-editor [data-trix-cursor-target]::-moz-selection,
+  trix-editor [data-trix-mutable] ::-moz-selection {
+    background: none;
+  }
   trix-editor [data-trix-mutable]::selection,
-  trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
-    background: none; }
+  trix-editor [data-trix-cursor-target]::selection,
+  trix-editor [data-trix-mutable] ::selection {
+    background: none;
+  }
 }

data/app/components/spina/forms/switch_component.html.erb

@@ -2,6 +2,6 @@
   <%= f.check_box method, hidden: true, class: "hidden", data: {switch_target: "checkbox"} %>
 
   <div data-switch-target="container" class="w-14 h-8 bg-gray-200 rounded-full flex items-center p-1 cursor-pointer transition transition-colors duration-200">
-    <div data-switch-target="knob" class="h-6 w-6 rounded-full bg-white shadow-sm transform transition transition-transform duration-200"></div>
+    <div data-switch-target="knob" class="h-6 w-6 rounded-full bg-white shadow-xs transform transition transition-transform duration-200"></div>
   </div>
-</button>
+</button>

data/app/components/spina/forms/trix_toolbar_component.html.erb

@@ -1,5 +1,5 @@
-<div class="relative sticky z-10 top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
-  <div class="flex items-center flex-wrap" data-controller="reveal">
+<trix-toolbar class="sticky z-10 top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
+  <div class="flex items-center flex-wrap trix-button-row">
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mb-3 mr-3" data-trix-button-group="text-tools">
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bold" data-trix-key="b" title="${Trix.config.lang.bold}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"/></svg>
@@ -7,11 +7,10 @@
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="italic" data-trix-key="i" title="${Trix.config.lang.italic}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"/></svg>
       </button>
-      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="<%=t 'spina.wysiwyg.link' %>" tabindex="-1" data-action="reveal#toggle">
+      <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="<%=t 'spina.wysiwyg.link' %>" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>
       </button>
     </div>
-  
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3" data-trix-button-group="block-tools">
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="heading1" title="${Trix.config.lang.heading1}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M304 96h-98.94A13.06 13.06 0 0 0 192 109.06v21.88A13.06 13.06 0 0 0 205.06 144H232v88H88v-88h26.94A13.06 13.06 0 0 0 128 130.94V112a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v18.94A13.06 13.06 0 0 0 13.06 144H40v224H13.06A13.06 13.06 0 0 0 0 381.06V400a16 16 0 0 0 16 16h98.94A13.06 13.06 0 0 0 128 402.94v-21.88A13.06 13.06 0 0 0 114.94 368H88v-88h144v88h-26.94A13.06 13.06 0 0 0 192 381.06V400a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-18.94A13.06 13.06 0 0 0 306.94 368H280V144h26.94A13.06 13.06 0 0 0 320 130.94V112a16 16 0 0 0-16-16zm256 272h-56V120a24 24 0 0 0-24-24h-24a24 24 0 0 0-21.44 13.26l-24 48A24 24 0 0 0 432 192h24v176h-56a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
@@ -26,15 +25,12 @@
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M304 96h-98.94A13.06 13.06 0 0 0 192 109.06v21.88A13.06 13.06 0 0 0 205.06 144H232v88H88v-88h26.94A13.06 13.06 0 0 0 128 130.94V112a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v18.94A13.06 13.06 0 0 0 13.06 144H40v224H13.06A13.06 13.06 0 0 0 0 381.06V400a16 16 0 0 0 16 16h98.94A13.06 13.06 0 0 0 128 402.94v-21.88A13.06 13.06 0 0 0 114.94 368H88v-88h144v88h-26.94A13.06 13.06 0 0 0 192 381.06V400a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-18.94A13.06 13.06 0 0 0 306.94 368H280V144h26.94A13.06 13.06 0 0 0 320 130.94V112a16 16 0 0 0-16-16zm256 136h-16V112a16 16 0 0 0-16-16h-16a16 16 0 0 0-16 16v120h-96V112a16 16 0 0 0-16-16h-16a16 16 0 0 0-16 16v136a32 32 0 0 0 32 32h112v120a16 16 0 0 0 16 16h16a16 16 0 0 0 16-16V280h16a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16z"/></svg>
       </button>
     </div>
-  
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3" data-trix-button-group="file-tools">
-      
       <%= link_to helpers.spina.admin_media_picker_path(target: "insert_#{@trix_id}"), class: "hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center", data: {turbo_frame: "modal"} do %>
         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
         </svg>
       <% end %>
-      
       <% if helpers.current_theme.embeds.any? %>
         <%= link_to helpers.spina.new_admin_embed_path(target: "insert_#{@trix_id}"), class: "hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center", data: {turbo_frame: "modal"} do %>
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -43,7 +39,6 @@
         <% end %>
       <% end %>
     </div>
-    
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3">
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="quote" title="${Trix.config.lang.quote}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"/></svg>
@@ -66,35 +61,23 @@
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 424H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM27.31 363.3l96-96a16 16 0 0 0 0-22.62l-96-96C17.27 138.66 0 145.78 0 160v192c0 14.31 17.33 21.3 27.31 11.3zM435.17 168H204.83A12.82 12.82 0 0 0 192 180.83v22.34A12.82 12.82 0 0 0 204.83 216h230.34A12.82 12.82 0 0 0 448 203.17v-22.34A12.82 12.82 0 0 0 435.17 168zM432 48H16A16 16 0 0 0 0 64v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm3.17 248H204.83A12.82 12.82 0 0 0 192 308.83v22.34A12.82 12.82 0 0 0 204.83 344h230.34A12.82 12.82 0 0 0 448 331.17v-22.34A12.82 12.82 0 0 0 435.17 296z"/></svg>
       </button>
     </div>
-
-    <div hidden data-reveal data-trix-dialogs>
-      <div class="trix-dialog" data-trix-dialog="href" data-trix-dialog-attribute="href">
-        <div class="fixed inset-0 flex justify-center items-center bg-gray-700 bg-opacity-25 z-50">
-          <div class="bg-white rounded-lg shadow-lg overflow-hidden w-full max-w-lg">
-            <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-              <div class="sm:flex sm:items-start">
-                <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
-                  <input type="text" name="href" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="<%=t 'spina.wysiwyg.url_placeholder' %>" aria-label="<%=t 'spina.wysiwyg.url' %>" data-trix-input>
-                </div>
-              </div>
-            </div>
-  
-            <div class="bg-gray-100 px-4 py-3 sm:px-6 sm:flex space-x-3 justify-end">              
-              <button type="button" class="inline-flex cursor-pointer justify-center rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5" data-trix-method="removeAttribute" data-action="reveal#hide">
-                <%=t 'spina.wysiwyg.unlink' %>
-              </button>
-              
-              <button type="button" class="inline-flex cursor-pointer justify-center rounded-md border border-transparent px-4 py-2 bg-spina text-base leading-6 font-medium text-white shadow-sm hover:bg-spina-dark focus:outline-none focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5" data-trix-method="setAttribute" data-action="reveal#hide">
-                <%=t 'spina.wysiwyg.link' %>
-              </button>
-            </div>
-          </div>
+  </div>
+  <div class="trix-dialogs relative" data-trix-dialogs>
+    <div class="trix-dialog right-0 trix-dialog--link max-w-[600px] px-4 py-4 border border-gray-200" data-trix-dialog="href" data-trix-dialog-attribute="href">
+      <div class="trix-dialog__link-fields flex items-baseline">
+        <input type="text" name="href" class="form-input block w-full sm:text-sm sm:leading-5" placeholder="<%=t 'spina.wysiwyg.url_placeholder' %>" aria-label="<%=t 'spina.wysiwyg.url' %>" data-trix-input>
+        <div class="trix-button-group flex grow-0 shrink-0 ml-2">
+          <button type="button" class="inline-flex cursor-pointer justify-center rounded-l-md border border-transparent px-4 py-2 bg-spina text-base leading-6 font-medium text-white shadow-sm hover:bg-spina-dark focus:outline-hidden focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5" data-trix-method="setAttribute">
+            <%=t 'spina.wysiwyg.link' %>
+          </button>
+          <button type="button" class="inline-flex cursor-pointer justify-center rounded-r-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-hidden focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5" data-trix-method="removeAttribute">
+            <%=t 'spina.wysiwyg.unlink' %>
+          </button>
         </div>
       </div>
     </div>
-    
   </div>
-</div>
+</trix-toolbar>
 <div class="absolute hidden w-full" data-trix-target="imageFields">
   <input type="text" class="h-8 px-2 mt-1 border-0 ring-0 focus:ring-0 w-full text-sm italic" placeholder="Alt text" data-trix-target="altField" data-action="keyup->trix#setAltText keydown->trix#preventSubmission" />
 </div>

data/app/components/spina/media_picker/modal_component.html.erb

@@ -25,7 +25,7 @@
           </div>
         </div>
       
-        <div class="md:w-72 p-4 border-t rounded-b-lg md:rounded-none md:border-t-0 border-gray-200 flex flex-col justify-between bg-gray-100 md:bg-opacity-50 md:rounded-l-lg">
+        <div class="md:w-72 p-4 border-t rounded-b-lg md:rounded-none md:border-t-0 border-gray-200 flex flex-col justify-between bg-gray-100 md:bg-gray-100/50 md:rounded-l-lg">
           <div class="mb-4">
             <%= form_with method: :get, url: helpers.spina.admin_media_picker_path, data: {controller: "form", turbo_frame: "images"} do |f| %>
               <%= f.hidden_field :media_folder_id, value: @media_folder&.id %>

data/app/components/spina/media_picker/modal_component.rb

@@ -17,9 +17,9 @@ module Spina
 
       def media_folder_classes(media_folder)
         if media_folder == @media_folder
-          "text-gray-900 bg-spina-dark bg-opacity-20"
+          "text-gray-900 bg-spina-dark/20"
         else
-          "text-gray-600 hover:bg-gray-200 bg-opacity-100 hover:bg-gray-200"
+          "text-gray-600 hover:bg-gray-200 hover:bg-gray-200"
         end
       end
     end

data/app/components/spina/pages/actions_component.html.erb

@@ -26,21 +26,21 @@
       <div class="py-1">
         
         <% unless @page.homepage? %>
-          <%= link_to t('spina.pages.move_page') + "...", helpers.spina.new_admin_page_move_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
+          <%= link_to t('spina.pages.move_page') + "...", helpers.spina.new_admin_page_move_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
         <% end %>
         
         <% if !@page.custom_page? %>
-          <%= link_to t('spina.pages.change_view_template') + "...", helpers.spina.edit_template_admin_page_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
+          <%= link_to t('spina.pages.change_view_template') + "...", helpers.spina.edit_template_admin_page_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
         <% end %>
         
         <% if @locale.to_sym != I18n.locale.to_sym %>
           <% @page.translations.where(locale: @locale).each do |translation| %>
-            <%= button_to t("spina.page_translations.delete", translation: @locale.upcase), helpers.spina.admin_page_translation_path(translation), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.page_translations.delete_confirmation', subject: @locale.upcase)}} %>
+            <%= button_to t("spina.page_translations.delete", translation: @locale.upcase), helpers.spina.admin_page_translation_path(translation), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100/50 hover:text-red-500 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.page_translations.delete_confirmation', subject: @locale.upcase)}} %>
           <% end %>
         <% end %>
         
         <% if @page.deletable? %>
-          <%= button_to t('spina.pages.delete'), helpers.spina.admin_page_path(@page), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.pages.delete_confirmation', subject: sanitize(@page.title))}} %>
+          <%= button_to t('spina.pages.delete'), helpers.spina.admin_page_path(@page), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100/50 hover:text-red-500 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.pages.delete_confirmation', subject: sanitize(@page.title))}} %>
         <% else %>
           <span class="block px-4 py-2 text-sm leading-5 text-gray-400"><%=t 'spina.pages.cannot_be_deleted' %></span>
         <% end %>

data/app/components/spina/pages/location_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex items-center border border-gray-300 rounded-md bg-white p-1 relative shadow-sm" data-controller="parent-pages">
+<div class="flex items-center border border-gray-300 rounded-md bg-white p-1 relative shadow-xs" data-controller="parent-pages">
   <% if resources.many? %>
     <%= helpers.heroicon("collection", style: :solid, class: 'w-5 h-5 ml-2 text-gray-400 absolute') %>
     
@@ -8,4 +8,4 @@
   <% end %>
   
   <%= helpers.turbo_frame_tag "parent_pages", src: default_parent_pages_path, class: 'flex-auto', data: {parent_pages_target: "frame"} %>
-</div>
+</div>

data/app/components/spina/pages/new_page_button_component.html.erb

@@ -8,7 +8,7 @@
     
     <% dropdown.with_menu do %>
       <% view_templates.each do |template| %>
-        <%= link_to helpers.spina.new_admin_page_path(view_template: template.name, resource_id: @resource&.id), class: "block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} do %>
+        <%= link_to helpers.spina.new_admin_page_path(view_template: template.name, resource_id: @resource&.id), class: "block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} do %>
           <div class="font-medium text-gray-700">
             <%= template.title %>
             
@@ -29,4 +29,4 @@
     <%=t 'spina.pages.new' %>
   <% end %>
   
-<% end %>
+<% end %>

data/app/components/spina/pages/page_component.html.erb

@@ -1,5 +1,5 @@
 <turbo-frame id="page_<%= page.id %>" data-id="<%= page.id %>" data-controller="<%= 'page-collapse' if has_children? %>">
-  <div class="flex items-center border-gray-200 border-b <%= css_class %> bg-opacity-50">
+  <div class="flex items-center border-gray-200 border-b <%= css_class %>">
     <% if sortable? %>
       <% if draggable? %>
         <div data-sortable-handle class="p-4 text-gray-300 hover:text-gray-600 cursor-move">

data/app/components/spina/pages/page_component.rb

@@ -38,9 +38,9 @@ module Spina
       def css_class
         case depth
         when 1
-          "pl-5 bg-gray-100"
+          "pl-5 bg-gray-100/50"
         when 2
-          "pl-10 bg-gray-200"
+          "pl-10 bg-gray-200/50"
         end
       end
       

data/app/components/spina/pages/translations_component.html.erb

@@ -19,7 +19,7 @@
       <div class="py-1">
         <% if missing_locales.any? %>
           <% missing_locales.each do |locale| %>
-            <%= link_to helpers.spina.edit_admin_page_path(@page, locale: locale), class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium", data: {turbo_frame: "_top"} do %>
+            <%= link_to helpers.spina.edit_admin_page_path(@page, locale: locale), class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900 font-medium", data: {turbo_frame: "_top"} do %>
               <div class="text-yellow-500">
                 <%=t('spina.pages.add_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>
               </div>
@@ -29,7 +29,7 @@
         <% end %>
 
         <% existing_locales.each do |locale| %>
-          <%= link_to helpers.spina.edit_admin_page_path(@page, locale: locale), class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium", data: {turbo_frame: "_top"} do %>
+          <%= link_to helpers.spina.edit_admin_page_path(@page, locale: locale), class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900 font-medium", data: {turbo_frame: "_top"} do %>
             <div class="text-gray-700">
               <%=t('spina.pages.edit_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>  
             </div>
@@ -38,4 +38,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

data/app/components/spina/pages/translations_component.rb

@@ -23,7 +23,7 @@ module Spina
       private
 
       def spina_locales
-        Spina.locales.map(&:to_sym)
+        Spina.config.locales.map(&:to_sym)
       end
     end
   end

data/app/components/spina/user_interface/modal_component.html.erb

@@ -1,6 +1,6 @@
 <turbo-frame id="modal">
   <div class="modal max-h-screen py-6" data-controller="modal" data-action="keyup@document->modal#escClose">
-    <button type="button" class="cursor-default w-full h-full fixed inset-0 bg-gray-700 bg-opacity-25 animate__animated animate__fadeIn animate__faster" tabindex="-1" data-action="modal#close"></button>
+    <button type="button" class="cursor-default w-full h-full fixed inset-0 bg-gray-700/25 animate__animated animate__fadeIn animate__faster" tabindex="-1" data-action="modal#close"></button>
     
     <div class="modal-window <%= @size %> animate__animated animate__fadeInDown animate__faster">
   
@@ -8,4 +8,4 @@
 
     </div>
   </div>
-</turbo-frame>
+</turbo-frame>

data/app/components/spina/user_interface/tab_link_component.rb

@@ -10,7 +10,7 @@ module Spina
 
       def css_classes
         if @active
-          "cursor-default text-gray-900 bg-spina-dark bg-opacity-10"
+          "cursor-default text-gray-900 bg-spina-dark/10"
         else
           ""
         end

data/app/components/spina/user_interface/translations_component.html.erb

@@ -9,7 +9,7 @@
     <div class="rounded-md bg-white shadow-xs">
       <div class="py-1">
         <% locales.each do |locale| %>
-          <%= link_to "?locale=#{locale}", class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium" do %>
+          <%= link_to "?locale=#{locale}", class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus:bg-gray-100 focus:text-gray-900 font-medium" do %>
             <div class="text-gray-700">
               <%=t('spina.pages.edit_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>  
             </div>
@@ -18,4 +18,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

data/app/components/spina/user_interface/translations_component.rb

@@ -17,7 +17,7 @@ module Spina
       private
 
       def spina_locales
-        Spina.locales.map(&:to_sym)
+        Spina.config.locales.map(&:to_sym)
       end
     end
   end