fix: download correct variant and fix layout shift on brand page (#2595)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

app/components/Brand/Customize.vue

@@ -75,8 +75,7 @@ async function downloadCustomPng() {
   if (!svg) return
   pngLoading.value = true
 
-  const blob = new Blob([svg], { type: 'image/svg+xml' })
-  const url = URL.createObjectURL(blob)
+  const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
 
   try {
     await document.fonts.ready
@@ -108,7 +107,6 @@ async function downloadCustomPng() {
       }, 'image/png')
     })
   } finally {
-    URL.revokeObjectURL(url)
     pngLoading.value = false
   }
 }
@@ -145,24 +143,30 @@ 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" role="radiogroup">
-            <ButtonBase
+          <div class="flex items-center gap-1.5">
+            <label
               v-for="color in pickerColors"
               :key="color.id"
-              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="relative w-6 h-6 rounded-full border-2 cursor-pointer duration-150 motion-reduce:transition-none focus-within:ring-2 focus-within:ring-fg focus-within:ring-offset-2 focus-within:ring-offset-bg"
               :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 }"
-              @click="customAccent = color.id"
-            />
+            >
+              <input
+                type="radio"
+                name="brand-customize-accent"
+                :value="color.id"
+                :checked="activeAccentId === color.id"
+                :aria-label="color.label"
+                class="sr-only"
+                @change="customAccent = color.id"
+              />
+            </label>
           </div>
         </fieldset>
 
@@ -172,40 +176,33 @@ 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"
-              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"
+            <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 focus-within:bg-fg/10"
+                :class="customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
               >
+                <input
+                  v-model="customBgDark"
+                  type="radio"
+                  name="brand-customize-bg"
+                  :value="true"
+                  class="sr-only"
+                />
                 {{ $t('brand.logos.on_dark') }}
-              </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"
+              </label>
+              <label
+                class="px-3 py-1.5 text-sm font-mono cursor-pointer border-is border-is-border motion-reduce:transition-none focus-within:bg-fg/10"
+                :class="!customBgDark ? 'bg-bg-muted text-fg' : 'text-fg-muted hover:text-fg'"
               >
+                <input
+                  v-model="customBgDark"
+                  type="radio"
+                  name="brand-customize-bg"
+                  :value="false"
+                  class="sr-only"
+                />
                 {{ $t('brand.logos.on_light') }}
-              </ButtonBase>
+              </label>
             </div>
           </div>
 

app/pages/brand.vue

@@ -57,15 +57,16 @@ function handleSvgDownload(src: string) {
   }
 }
 
-async function handlePngDownload(logo: (typeof logos)[number]) {
-  if (pngLoading.value.has(logo.src)) return
-  pngLoading.value.add(logo.src)
+async function handlePngDownload(logo: (typeof logos)[number], variant: 'dark' | 'light' = 'dark') {
+  const src = variant === 'light' ? (logo.srcLight ?? logo.src) : logo.src
+  if (pngLoading.value.has(src)) return
+  pngLoading.value.add(src)
   try {
-    const blob = await svgToPng(logo.src, logo.width, logo.height)
-    const filename = logo.src.replace(/^\//, '').replace('.svg', '.png')
+    const blob = await svgToPng(src, logo.width, logo.height)
+    const filename = src.replace(/^\//, '').replace('.svg', '.png')
     downloadFile(blob, filename)
   } finally {
-    pngLoading.value.delete(logo.src)
+    pngLoading.value.delete(src)
   }
 }
 </script>
@@ -224,14 +225,14 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
                             name: `${logo.name()} (${$t('brand.logos.on_light')})`,
                           })
                         "
-                        :disabled="pngLoading.has(logo.src)"
-                        @click="handlePngDownload(logo)"
+                        :disabled="pngLoading.has(logo.srcLight ?? logo.src)"
+                        @click="handlePngDownload(logo, 'light')"
                       >
                         <span
                           class="size-[1em]"
                           aria-hidden="true"
                           :class="
-                            pngLoading.has(logo.src)
+                            pngLoading.has(logo.srcLight ?? logo.src)
                               ? 'i-lucide:loader-circle animate-spin'
                               : 'i-lucide:download'
                           "
@@ -246,10 +247,8 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
           </div>
         </section>
 
-        <!-- Customize Section (client-only: needs DOM for accent colors + canvas export) -->
-        <ClientOnly>
-          <BrandCustomize />
-        </ClientOnly>
+        <!-- Customize Section -->
+        <BrandCustomize />
 
         <!-- Typography Section -->
         <section aria-labelledby="brand-typography-heading">