chore: simplify markup adding just the check mark

Author: userquin

app/components/Settings/Toggle.client.vue

@@ -35,48 +35,29 @@ const id = useId()
         : 'grid-template-areas: \'label-text . toggle\''
     "
   >
-    <span
-      class="relative inline-flex items-center shrink-0"
-      style="grid-area: toggle; justify-self: end"
-    >
-      <input type="checkbox" :id="id" role="switch" v-model="checked" class="sr-only peer" />
-
-      <!-- Track -->
-      <span
-        class="w-11 h-6 bg-fg-subtle peer-focus:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-fg peer-focus-visible:ring-offset-2 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-bg after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-fg transition-colors duration-200 ease-in-out"
-      ></span>
-
-      <!-- Thumb Icon (Check) - Positioned absolutely over the thumb area -->
-      <span
-        class="absolute top-[2px] start-[2px] h-5 w-5 rounded-full flex items-center justify-center transition-transform duration-200 ease-in-out pointer-events-none"
-        :class="checked ? 'translate-x-5 rtl:-translate-x-5' : 'translate-x-0'"
-      >
-        <span
-          class="i-lucide:check w-3.5 h-3.5 text-fg transition-transform duration-200"
-          :class="checked ? 'scale-100 opacity-100' : 'scale-0 opacity-0'"
-          aria-hidden="true"
-        ></span>
-      </span>
-    </span>
-
     <template v-if="props.reverseOrder">
+      <input
+        role="switch"
+        type="checkbox"
+        :id="id"
+        v-model="checked"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg-subtle transition-colors duration-200 ease-in-out checked:bg-fg checked:border-fg hover:bg-fg-muted checked:hover:bg-fg-muted checked:hover:border-fg-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 before:content-[''] before:absolute before:h-5 before:w-5 before:top-[1px] before:start-[1px] before:rounded-full before:bg-bg before:transition-transform before:duration-200 before:ease-in-out checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:content-[''] after:absolute after:h-3.5 after:w-3.5 after:top-[4px] after:start-[4px] after:i-lucide:check after:bg-fg after:opacity-0 checked:after:opacity-100 after:transition-all after:duration-200 after:ease-in-out checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
+        style="grid-area: toggle"
+      />
       <TooltipApp
         v-if="tooltip && label"
         :text="tooltip"
         :position="tooltipPosition ?? 'top'"
         :to="tooltipTo"
         :offset="tooltipOffset"
       >
-        <span
-          class="toggle-label text-sm text-fg font-medium text-start"
-          style="grid-area: label-text"
-        >
+        <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
           {{ label }}
         </span>
       </TooltipApp>
       <span
         v-else-if="label"
-        class="toggle-label text-sm text-fg font-medium text-start"
+        class="text-sm text-fg font-medium text-start"
         style="grid-area: label-text"
       >
         {{ label }}
@@ -90,20 +71,25 @@ const id = useId()
         :to="tooltipTo"
         :offset="tooltipOffset"
       >
-        <span
-          class="toggle-label text-sm text-fg font-medium text-start"
-          style="grid-area: label-text"
-        >
+        <span class="text-sm text-fg font-medium text-start" style="grid-area: label-text">
           {{ label }}
         </span>
       </TooltipApp>
       <span
         v-else-if="label"
-        class="toggle-label text-sm text-fg font-medium text-start"
+        class="text-sm text-fg font-medium text-start"
         style="grid-area: label-text"
       >
         {{ label }}
       </span>
+      <input
+        role="switch"
+        type="checkbox"
+        :id="id"
+        v-model="checked"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg-subtle transition-colors duration-200 ease-in-out checked:bg-fg checked:border-fg hover:bg-fg-muted checked:hover:bg-fg-muted checked:hover:border-fg-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 before:content-[''] before:absolute before:h-5 before:w-5 before:top-[1px] before:start-[1px] before:rounded-full before:bg-bg before:transition-transform before:duration-200 before:ease-in-out checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:content-[''] after:absolute after:h-3.5 after:w-3.5 after:top-[4px] after:start-[4px] after:i-lucide:check after:bg-fg after:opacity-0 checked:after:opacity-100 after:transition-all after:duration-200 after:ease-in-out checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
+        style="grid-area: toggle; justify-self: end"
+      />
     </template>
   </label>
   <p v-if="description" class="text-sm text-fg-muted mt-2">
@@ -114,49 +100,33 @@ const id = useId()
 <style scoped>
 /* Support forced colors */
 @media (forced-colors: active) {
-  /* Label text */
-  .toggle-label {
-    color: Highlight !important;
-    forced-color-adjust: none;
-    background: Canvas !important;
-  }
-
-  /* Track (OFF & ON base) */
-  input + span {
-    forced-color-adjust: none;
-    border: 1px solid CanvasText !important;
-    background: Canvas !important;
+  .toggle {
+    background: Canvas;
+    border-color: CanvasText;
   }
 
-  /* Track ON */
-  input:checked + span {
-    background: Highlight !important;
-    border-color: CanvasText !important;
+  .toggle:checked {
+    background: Highlight;
+    border-color: CanvasText;
   }
 
-  /* Thumb (OFF) - Purple circle */
-  input + span::after {
-    forced-color-adjust: none;
-    background-color: Highlight !important;
-    border: none !important;
+  .toggle::before {
+    background-color: CanvasText;
   }
 
-  /* Thumb (ON) - White circle on purple track */
-  input:checked + span::after {
-    background-color: Canvas !important;
+  .toggle:checked::before {
+    background-color: Canvas;
   }
 
-  /* Icon (ON) - Purple check on white thumb */
-  .i-lucide\:check {
-    color: Highlight !important;
-    forced-color-adjust: none;
+  .toggle::after {
+    background-color: Highlight;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  span,
-  span::after,
-  .i-lucide\:check {
+  .toggle,
+  .toggle::before,
+  .toggle::after {
     transition: none !important;
     animation: none !important;
   }