Use mask icons everywhere

app/assets/stylesheets/buttons.css

@@ -27,18 +27,12 @@
     opacity var( --transition),
     scale var( --transition);
 
-  img {
-    -webkit-touch-callout: none;
-
-    pointer-events: none;
-    user-select: none;
-  }
-
   /* Default icon styles */
-  &:where(:has(img, svg)) {
+  &:where(:has(.icon, img, svg)) {
     text-align: start;
 
-    img, svg {
+    .icon, img, svg {
+      --icon-size: var(--btn-icon-size, 1.3em);
       block-size: var(--btn-icon-size, 1.3em);
       inline-size: var(--btn-icon-size, 1.3em);
       max-inline-size: unset;
@@ -70,7 +64,8 @@
       grid-area: 1/1;
     }
 
-    img {
+    .icon, img {
+      --icon-size: 100%;
       block-size: 100%;
       inline-size: 100%;
       max-inline-size: unset;
@@ -85,7 +80,7 @@
 
   /* Circle buttons */
   &.btn--circle,
-  &:where(:has(.for-screen-reader):has(img, svg)) {
+  &:where(:has(.for-screen-reader):has(.icon, img, svg)) {
     --btn-border-radius: 50%;
     --btn-padding: 0;
 
@@ -108,7 +103,7 @@
     :is(input[type=radio]),
     :is(input[type=checkbox]) {
       --hover-size: 0;
-  
+
       appearance: none;
       border-radius: var(--btn-border-radius);
       cursor: pointer;

app/assets/stylesheets/icons.css

@@ -8,6 +8,8 @@
   mask-image: var(--svg);
   mask-repeat: no-repeat;
   mask-size: cover;
+  pointer-events: none;
+  user-select: none;
 }
 
 .icon--activity { --svg: url("activity.svg "); }

app/helpers/application_helper.rb

@@ -3,7 +3,10 @@ module ApplicationHelper
     tag.title @page_title || "Fizzy"
   end
 
-  def icon_tag(name, aria: { hidden: true }, size: 24, **options)
-    image_tag "#{name}.svg", aria: aria, size: size, **options
+  def icon_tag(name, **options)
+    classes = class_names "icon icon--#{name}", options.delete(:class)
+    options["aria-hidden"] = true
+
+    content_tag :span, "", class: classes, **options
   end
 end

app/helpers/icons_helper.rb

@@ -1,8 +0,0 @@
-module IconsHelper
-  def icon(name, **options)
-    classes = class_names "icon icon--#{name}", options.delete(:class)
-    options["aria-hidden"] = true
-
-    content_tag :span, "", class: classes, **options
-  end
-end

app/views/comments/edit.html.erb

@@ -14,7 +14,7 @@
 
           <%= tag.button type: :submit, class: "btn btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
               data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
-            <%= icon_tag "trash", size: 16 %>
+            <%= icon_tag "trash" %>
             <span class="for-screen-reader">Delete</span>
           <% end %>
         </div>

app/views/events/_filter.html.erb

@@ -7,22 +7,22 @@
 		</span>
 	</button>
 
-	<dialog class="events__popup popup panel flex-column full-width align-start gap-half fill-white shadow" 
+	<dialog class="events__popup popup panel flex-column full-width align-start gap-half fill-white shadow"
 				style="z-index: 5; inset: 0 0 auto auto;" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
 		<strong class="popup__title margin-block-start-half pad-inline-half txt-nowrap">Filter by Collection…</strong>
-		<%= form_with url: events_path, method: :get, class: "flex flex-column full-width popup__list", 
+		<%= form_with url: events_path, method: :get, class: "flex flex-column full-width popup__list",
 					data: { controller: "form" } do |form| %>
 			<%= link_to "Show everything", events_path(clear_filter: true), class: "btn popup__item txt-nowrap" %>
 			<% @buckets.each do |bucket| %>
 				<div class="btn popup__item">
-					<%= form.check_box "bucket_ids[]", { 
+					<%= form.check_box "bucket_ids[]", {
 						checked: (params[:bucket_ids] || cookies[:bucket_filter]&.split(","))&.include?(bucket.id.to_s),
 						data: { action: "change->form#submit" },
 						include_hidden: false,
 					}, bucket.id %>
 
 					<%= form.label "bucket_ids[]", bucket.name, for: dom_id(bucket, :filter), class: "overflow-ellipsis" %>
-					<%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+					<%= icon_tag "check", class: "checked flex-item-justify-end" %>
 				</div>
 			<% end %>
 		<% end %>

app/views/filters/_assignees.html.erb

@@ -14,37 +14,37 @@
 
     <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half overflow-ellipsis">Assigned to…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:assignee_ids, :assignment_status).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
         <% end %>
-        
+
         <%= link_to bubbles_path(filter.as_params.except(:assignee_ids, :assignment_status)), class: "btn popup__item" do %>
           <span class="overflow-ellipsis">Clear all</span>
         <% end %>
 
         <div class="btn popup__item">
-          <%= form.check_box "assignment_status", { 
+          <%= form.check_box "assignment_status", {
             checked: filter.assignment_status.unassigned?,
             data: { action: "change->form#submit" },
             include_hidden: false,
           }, "unassigned" %>
 
           <%= form.label :assignment_status, "No one", class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
-        
+
         <% Current.account.users.active.order(:name).each do |user| %>
           <div class="btn popup__item">
-            <%= form.check_box "assignee_ids[]", { 
+            <%= form.check_box "assignee_ids[]", {
               checked: filter.assignees.include?(user),
               data: { action: "change->form#submit" },
               include_hidden: false,
             }, user.id %>
 
             <%= form.label "assignee_ids[]", user.name, for: dom_id(user, :filter), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>

app/views/filters/_buckets.html.erb

@@ -11,22 +11,22 @@
 
   <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
     <strong class="popup__title margin-block-start-half pad-inline-half">In Collection</strong>
-    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
           data: { controller: "form" } do |form| %>
       <% filter.as_params.except(:bucket_ids).each do |key, value| %>
         <%= filter_hidden_field_tag key, value %>
       <% end %>
-      
+
       <% Current.user.buckets.order(:name).each do |bucket| %>
         <div class="btn popup__item">
-          <%= form.check_box "bucket_ids[]", { 
+          <%= form.check_box "bucket_ids[]", {
             checked: filter.buckets.include?(bucket),
             data: { action: "change->form#submit" },
             include_hidden: false,
           }, bucket.id %>
 
           <%= form.label "bucket_ids[]", bucket.name, for: dom_id(bucket, :filter), class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
       <% end %>
     <% end %>

app/views/filters/_creators.html.erb

@@ -1,5 +1,5 @@
 <% if filter.creators.any? %>
-  <div class="quick-filter position-relative" data-controller="dialog" 
+  <div class="quick-filter position-relative" data-controller="dialog"
         data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button class="btn input input--select flex-inline txt-small" data-action="click->dialog#open:stop">
       <span class="overflow-ellipsis">
@@ -11,11 +11,11 @@
       </span>
     </button>
 
-    <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" 
+    <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"
         aria-label="Added by…" aria-description="Added by…"
         data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half">Added by…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:creator_ids).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
@@ -34,7 +34,7 @@
           }, Current.user.id %>
 
           <%= form.label :creator_ids, "Me", for: form.field_id(:creator_ids, Current.user.id), class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
 
         <% Current.account.users.active.without(Current.user).order(:name).each do |user| %>
@@ -47,7 +47,7 @@
             }, user.id %>
 
             <%= form.label :creator_ids, user.name, for: form.field_id(:creator_ids, user.id), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>

app/views/filters/_dialog.html.erb

@@ -4,7 +4,7 @@
       <span class="btn btn--placeholder txt-small" aria-hidden="true"></span>
 
       <h2 class="txt-large flex align-center gap-half margin-none">
-        <%= icon_tag "filter", size: 30 %>
+        <%= icon_tag "filter" %>
         <span>Filter</span>
       </h2>
 
@@ -116,7 +116,7 @@
             <label class="btn filter__button">
               <%= check_box_tag "assignment_status", "unassigned", filter.assignment_status.unassigned?,
                     class: "visually-hidden", data: {
-                      action: "filter-form#clearCategory", 
+                      action: "filter-form#clearCategory",
                       filter_form_name_param: "assignee_ids[],assigner_ids[]" } %>
               <span>No one</span>
               <%= icon_tag "close" %>

app/views/filters/_indexed_by.html.erb

@@ -9,20 +9,20 @@
       aria-label="Sort by…" aria-description="Sort by…"
       data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
     <strong class="popup__title margin-block-start-half pad-inline-half">Sort by…</strong>
-    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+    <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
           data: { controller: "form" } do |form| %>
       <% filter.as_params.except(:indexed_by).each do |key, value| %>
         <%= filter_hidden_field_tag key, value %>
       <% end %>
-      
+
       <div class="btn popup__item">
-        <%= form.radio_button :indexed_by, filter.default_indexed_by, 
+        <%= form.radio_button :indexed_by, filter.default_indexed_by,
             checked: filter.default_indexed_by?,
             class: "default-value",
             data: { action: "change->form#submit" } %>
 
         <%= form.label :indexed_by, "Most active", value: filter.default_indexed_by, class: "overflow-ellipsis" %>
-        <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+        <%= icon_tag "check", class: "checked flex-item-justify-end" %>
       </div>
 
       <% Filter::INDEXES.each do |index| %>
@@ -32,9 +32,9 @@
               data: { action: "change->form#submit" } %>
 
           <%= form.label :indexed_by, index.humanize, value: index, class: "overflow-ellipsis" %>
-          <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+          <%= icon_tag "check", class: "checked flex-item-justify-end" %>
         </div>
       <% end %>
     <% end %>
   </dialog>
-</div> 
+</div>

app/views/filters/_stages.html.erb

@@ -14,12 +14,12 @@
         aria-label="In stage…" aria-description="In stage…"
         data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half">In stage…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:stage_ids).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
         <% end %>
-        
+
         <% workflow = Current.account.workflows.first %>
         <% workflow.stages.each do |stage| %>
           <div class="btn popup__item">
@@ -31,7 +31,7 @@
               }, stage.id %>
 
             <%= form.label :stage_ids, stage.name, for: form.field_id(:stage_ids, stage.id), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>

app/views/filters/_tags.html.erb

@@ -12,29 +12,29 @@
 
     <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-cache@document->dialog#close">
       <strong class="popup__title margin-block-start-half pad-inline-half overflow-ellipsis">Tagged…</strong>
-      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list", 
+      <%= form_with url: bubbles_path, method: :get, class: "flex flex-column full-width popup__list",
             data: { controller: "form" } do |form| %>
         <% filter.as_params.except(:tag_ids).each do |key, value| %>
           <%= filter_hidden_field_tag key, value %>
         <% end %>
-        
+
         <%= link_to bubbles_path(filter.as_params.except(:tag_ids)), class: "btn popup__item" do %>
           <span class="overflow-ellipsis">Clear all</span>
         <% end %>
-        
+
         <% Current.account.tags.order(:title).each do |tag| %>
           <div class="btn popup__item">
-            <%= form.check_box "tag_ids[]", { 
+            <%= form.check_box "tag_ids[]", {
               checked: filter.tags.include?(tag),
               data: { action: "change->form#submit" },
               include_hidden: false,
             }, tag.id %>
 
             <%= form.label "tag_ids[]", tag.hashtag, for: dom_id(tag, :filter), class: "overflow-ellipsis" %>
-            <%= icon_tag "check", size: 18, class: "checked flex-item-justify-end" %>
+            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
           </div>
         <% end %>
       <% end %>
     </dialog>
-  </div> 
+  </div>
 <% end %>