remove some icons and improve the scheme switcher

Author: adrianthedev

app/assets/stylesheets/css/components/color_scheme_switcher.css

@@ -21,12 +21,14 @@
   /* Inactive by default, active when theme-slate variant is present */
   @apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
   @apply theme-slate:bg-white theme-slate:dark:bg-neutral-700 theme-slate:text-primary-600 theme-slate:dark:text-primary-400 theme-slate:shadow-sm;
+  @apply gap-1.5;
 }
 
 .color-scheme-switcher__button[data-theme="stone"] {
   /* Inactive by default, active when theme-stone variant is present */
   @apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
   @apply theme-stone:bg-white theme-stone:dark:bg-neutral-700 theme-stone:text-primary-600 theme-stone:dark:text-primary-400 theme-stone:shadow-sm;
+  @apply gap-1.5;
 }
 
 /* Scheme buttons - active states using scheme selection classes */
@@ -102,3 +104,89 @@
   @apply bg-neutral-400 dark:bg-neutral-500;
   background-image: linear-gradient(135deg, transparent 45%, white 45%, white 55%, transparent 55%);
 }
+
+/* Accent button with badge */
+.color-scheme-switcher__button--accent {
+  @apply relative;
+}
+
+.color-scheme-switcher__accent-badge {
+  @apply absolute top-0 end-0;
+  @apply translate-x-1/2 -translate-y-1/2;
+  @apply hidden;
+}
+
+.color-scheme-switcher__accent-badge-preview {
+  @apply size-2 rounded-full border border-white dark:border-neutral-800 shadow-sm;
+  @apply hidden;
+}
+
+.color-scheme-switcher__accent-badge-preview--neutral {
+  @apply bg-neutral-400 dark:bg-neutral-500;
+  background-image: linear-gradient(135deg, transparent 45%, white 45%, white 55%, transparent 55%);
+}
+
+/* Show accent badge based on body accent class */
+.accent-orange .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-orange .color-scheme-switcher__accent-badge-preview--orange {
+  @apply inline-block;
+}
+
+.accent-yellow .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-yellow .color-scheme-switcher__accent-badge-preview--yellow {
+  @apply inline-block;
+}
+
+.accent-green .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-green .color-scheme-switcher__accent-badge-preview--green {
+  @apply inline-block;
+}
+
+.accent-blue .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-blue .color-scheme-switcher__accent-badge-preview--blue {
+  @apply inline-block;
+}
+
+.accent-purple .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-purple .color-scheme-switcher__accent-badge-preview--purple {
+  @apply inline-block;
+}
+
+.accent-pink .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-pink .color-scheme-switcher__accent-badge-preview--pink {
+  @apply inline-block;
+}
+
+.accent-red .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-red .color-scheme-switcher__accent-badge-preview--red {
+  @apply inline-block;
+}
+
+.accent-teal .color-scheme-switcher__accent-badge {
+  @apply inline-block;
+}
+
+.accent-teal .color-scheme-switcher__accent-badge-preview--teal {
+  @apply inline-block;
+}

app/assets/svgs/avo/detach.svg

@@ -13,7 +13,7 @@
 <div>
   <% if can_delete_file? %>
     <%= a_link destroy_path,
-      icon: "avo/trash",
+      icon: "tabler/outline/trash",
       color: :red,
       size: :sm,
       class: 'text-center',

app/assets/svgs/avo/edit.svg

@@ -13,11 +13,8 @@
 
     <% if @field.revealable %>
       <button data-action="password-visibility#toggle" type="button" class="text-gray-500 absolute inset-y-0 end-0 pe-3 flex items-center cursor-pointer">
-        <!-- Heroicon name: outline/eye -->
-        <%= helpers.svg('heroicons/outline/eye', class: "size-6", data: { 'password-visibility-target': 'icon' }) %>
-
-        <!-- Heroicon name: outline/eye-off -->
-        <%= helpers.svg('heroicons/outline/eye-off', class: "size-6 hidden", data: { 'password-visibility-target': 'icon' }) %>
+        <%= helpers.svg('tabler/outline/eye', class: "size-6", data: { 'password-visibility-target': 'icon' }) %>
+        <%= helpers.svg('tabler/outline/eye-off', class: "size-6 hidden", data: { 'password-visibility-target': 'icon' }) %>
       </button>
     <% end %>
   </div>

app/assets/svgs/avo/eye.svg

@@ -58,7 +58,7 @@
               <%= helpers.svg("heroicons/outline/check-circle") %>
             <% end %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__link-button--unset", data: { action: "click->tiptap-field#unsetLink" } do %>
-              <%= helpers.svg("avo/trash") %>
+              <%= helpers.svg("tabler/outline/trash") %>
             <% end %>
           <% end %>
         <% end %>

app/assets/svgs/avo/trash-sm.svg

@@ -74,8 +74,9 @@ def referrer_path
   def render_edit_button(control)
     return unless can_edit?
 
-    link_to helpers.svg("avo/edit", class: svg_classes),
+    link_to helpers.svg("tabler/outline/edit", class: svg_classes),
       edit_path,
+      style: :text,
       class: "flex items-center",
       title: control.title,
       aria: {label: control.title},
@@ -90,8 +91,9 @@ def render_edit_button(control)
   def render_show_button(control)
     return unless can_view?
 
-    link_to helpers.svg("avo/eye", class: svg_classes),
+    link_to helpers.svg("tabler/outline/eye", class: svg_classes),
       show_path,
+      style: :text,
       class: "flex items-center",
       title: control.title,
       aria: {label: control.title},
@@ -110,10 +112,8 @@ def render_delete_button(control)
     policy_method = is_a_related_resource? ? :can_delete? : :can_see_the_destroy_button?
     return unless send policy_method
 
-    a_button url: helpers.resource_path(record: @resource.record, resource: @resource),
-      style: :icon,
-      color: :gray,
-      icon: "avo/trash",
+    button_to helpers.resource_path(record: @resource.record, resource: @resource),
+      style: :text,
       form_class: "flex flex-col sm:flex-row sm:inline-flex",
       title: control.title,
       aria: {label: control.title},
@@ -127,16 +127,16 @@ def render_delete_button(control)
         control: :destroy,
         tippy: control.title ? :tooltip : nil,
         "resource-id": @resource.record_param,
-      }
+      } do
+        svg "tabler/outline/trash", class: svg_classes
+      end
   end
 
   def render_detach_button(control)
     return unless can_detach?
 
-    a_button url: helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.record_param),
-      style: :icon,
-      color: :gray,
-      icon: "avo/detach",
+    button_to helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.record_param),
+      style: :text,
       form_class: "flex items-center",
       title: control.title,
       aria: {label: control.title},
@@ -149,7 +149,9 @@ def render_detach_button(control)
         control: :detach,
         "resource-id": @resource.record_param,
         tippy: :tooltip,
-      }
+      } do
+        svg "tabler/outline/unlink", class: svg_classes
+      end
   end
 
   def render_order_controls(control)