Revert "fix(brand): use native radio inputs in Customize and dedupe classes"

Adebesin-Cell · Adebesin-Cell · commit 2cb88ddb278d · 2026-04-20T07:20:43.000+01:00
This reverts commit 6332984.
diff --git a/app/components/Brand/Customize.vue b/app/components/Brand/Customize.vue
@@ -143,29 +143,24 @@ async function downloadCustomPng() {
           <span class="text-sm font-mono text-fg-muted shrink-0">{{
             $t('brand.customize.accent_label')
           }}</span>
-          <div class="flex items-center gap-1.5">
-            <label
+          <div class="flex items-center gap-1.5" role="radiogroup">
+            <ButtonBase
               v-for="color in pickerColors"
               :key="color.id"
-              class="relative w-6 h-6 rounded-full border-2 cursor-pointer duration-150 motion-reduce:transition-none"
+              role="radio"
+              :aria-checked="activeAccentId === color.id"
+              :aria-label="color.label"
+              class="!w-6 !h-6 !rounded-full !border-2 !p-0 !min-w-0 transition-all duration-150 motion-reduce:transition-none"
               :class="
                 activeAccentId === color.id
-                  ? 'border-fg scale-110'
+                  ? '!border-fg scale-110'
                   : color.id === 'neutral'
-                    ? 'border-border hover:border-border-hover'
-                    : 'border-transparent hover:border-border-hover'
+                    ? '!border-border hover:!border-border-hover'
+                    : '!border-transparent hover:!border-border-hover'
               "
               :style="{ backgroundColor: color.value }"
-              :aria-label="color.label"
-            >
-              <input
-                v-model="customAccent"
-                type="radio"
-                name="brand-customize-accent"
-                :value="color.id"
-                class="sr-only"
-              />
-            </label>
+              @click="customAccent = color.id"
+            />
           </div>
         </fieldset>
 
@@ -175,33 +170,40 @@ async function downloadCustomPng() {
             <span class="text-sm font-mono text-fg-muted">{{
               $t('brand.customize.bg_label')
             }}</span>
-            <div class="flex items-center border border-border rounded-md overflow-hidden">
-              <label
-                class="px-3 py-1.5 text-sm font-mono cursor-pointer motion-reduce:transition-none"
-                :class="customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+            <div
+              class="flex items-center border border-border rounded-md overflow-hidden"
+              role="radiogroup"
+            >
+              <ButtonBase
+                size="md"
+                role="radio"
+                :aria-checked="customBgDark"
+                :aria-label="$t('brand.logos.on_dark')"
+                class="!border-none !rounded-none motion-reduce:transition-none"
+                :class="
+                  customBgDark
+                    ? 'bg-bg-muted text-fg'
+                    : 'bg-transparent text-fg-muted hover:text-fg'
+                "
+                @click="customBgDark = true"
               >
-                <input
-                  v-model="customBgDark"
-                  type="radio"
-                  name="brand-customize-bg"
-                  :value="true"
-                  class="sr-only"
-                />
                 {{ $t('brand.logos.on_dark') }}
-              </label>
-              <label
-                class="px-3 py-1.5 text-sm font-mono cursor-pointer border-is border-is-border motion-reduce:transition-none"
-                :class="!customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
+              </ButtonBase>
+              <ButtonBase
+                size="md"
+                role="radio"
+                :aria-checked="!customBgDark"
+                :aria-label="$t('brand.logos.on_light')"
+                class="!border-none !rounded-none border-is border-is-border motion-reduce:transition-none"
+                :class="
+                  !customBgDark
+                    ? 'bg-bg-muted text-fg'
+                    : 'bg-transparent text-fg-muted hover:text-fg'
+                "
+                @click="customBgDark = false"
               >
-                <input
-                  v-model="customBgDark"
-                  type="radio"
-                  name="brand-customize-bg"
-                  :value="false"
-                  class="sr-only"
-                />
                 {{ $t('brand.logos.on_light') }}
-              </label>
+              </ButtonBase>
             </div>
           </div>
 
