From 97e351fa61a6df671a4b8a4aa2256a64c88cb39f Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 2 May 2026 14:52:14 -0400
Subject: [PATCH] feat(ext/setup): apply polish vocabulary to setup wizard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wraps setup content in .surface-backdrop
- Each wizard step gets a .glass card
- Mode-picker cards become glass cards
- 'next' / 'continue' buttons get the ▸ glyph
- Migrate from .btn .btn-primary to the new .btn-primary class
---
 extension/src/setup/setup.ts | 41 +++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/extension/src/setup/setup.ts b/extension/src/setup/setup.ts
index 99eab89..bd49f55 100644
--- a/extension/src/setup/setup.ts
+++ b/extension/src/setup/setup.ts
@@ -16,6 +16,7 @@ import {
   STRENGTH_LABELS,
   entropyText,
 } from './setup-helpers';
+import { GLYPH_NEXT } from '../shared/glyphs';
 import type { VaultConfig } from '../shared/types';
 import type { SessionHandle } from 'relicario-wasm';
 
@@ -189,12 +190,14 @@ function render(): void {
   }
 
   app.innerHTML = `
-    <div class="pad" style="padding-top:12px;">
-      <img class="brand-logo" src="icons/relicario-logo.svg" alt="" style="margin-bottom:12px;">
-      <div class="brand" style="margin-bottom:4px;">Relicario vault setup</div>
-      ${progressHtml}
-      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
-      ${stepHtml}
+    <div class="surface-backdrop" style="min-height:100vh;">
+      <div class="pad" style="padding-top:12px;">
+        <img class="brand-logo" src="icons/relicario-logo.svg" alt="" style="margin-bottom:12px;">
+        <div class="brand" style="margin-bottom:4px;">Relicario vault setup</div>
+        ${progressHtml}
+        ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
+        ${stepHtml}
+      </div>
     </div>
   `;
 
@@ -214,20 +217,20 @@ function renderStep0(): string {
   const isNew = state.mode === 'new';
   const isAttach = state.mode === 'attach';
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <h3>set up Relicario</h3>
       <p class="muted" style="margin-bottom:16px;">
         How are you using Relicario on this device?
       </p>
       <div class="mode-cards">
-        <button class="mode-card ${isNew ? 'active' : ''}" data-mode="new">
+        <button class="mode-card glass ${isNew ? 'active' : ''}" data-mode="new">
           <div class="mode-card-title">create new vault</div>
           <p class="mode-card-blurb">
             I'm setting up Relicario for the first time. This will create a fresh
             encrypted vault on a new or empty git repository.
           </p>
         </button>
-        <button class="mode-card ${isAttach ? 'active' : ''}" data-mode="attach">
+        <button class="mode-card glass ${isAttach ? 'active' : ''}" data-mode="attach">
           <div class="mode-card-title">attach this device</div>
           <p class="mode-card-blurb">
             I already have a vault on another device. Connect this browser to it
@@ -236,7 +239,7 @@ function renderStep0(): string {
         </button>
       </div>
       <div class="form-actions" style="margin-top:24px;">
-        <button class="btn btn-primary" id="next-btn" ${state.mode ? '' : 'disabled'}>next</button>
+        <button class="btn-primary" id="next-btn" ${state.mode ? '' : 'disabled'}>next ${GLYPH_NEXT}</button>
       </div>
     </div>
   `;
@@ -267,7 +270,7 @@ function renderStep3Attach(): string {
   const gateDisabled = state.attaching || !p || !hasImage;
 
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <h3>attach this device</h3>
       <p class="muted" style="margin-bottom:12px;">
         Use your existing passphrase and reference image to attach this browser
@@ -430,7 +433,7 @@ function renderStep1(): string {
   `;
 
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <h3>choose host</h3>
       <div class="form-group">
         <label class="label">host type</label>
@@ -442,7 +445,7 @@ function renderStep1(): string {
       ${state.hostType === 'gitea' ? giteaInstructions : githubInstructions}
       <div class="form-actions">
         <button class="btn" id="back-btn">back</button>
-        <button class="btn btn-primary" id="next-btn">next</button>
+        <button class="btn-primary" id="next-btn">next ${GLYPH_NEXT}</button>
       </div>
     </div>
   `;
@@ -522,7 +525,7 @@ function renderStep2(): string {
     !!probe && ((state.mode === 'new' && probe.exists) || (state.mode === 'attach' && !probe.exists));
   const nextDisabled = !state.connectionTested || !probe || modeMismatch;
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <h3>configure connection</h3>
       <div class="form-group" ${state.hostType === 'github' ? 'style="display:none;"' : ''}>
         <label class="label" for="host-url">host url</label>
@@ -543,7 +546,7 @@ function renderStep2(): string {
       ${renderProbeBanner()}
       <div class="form-actions" style="margin-top:12px;">
         <button class="btn" id="back-btn">back</button>
-        <button class="btn btn-primary" id="next-btn" ${nextDisabled ? 'disabled' : ''}>next</button>
+        <button class="btn-primary" id="next-btn" ${nextDisabled ? 'disabled' : ''}>next ${GLYPH_NEXT}</button>
       </div>
     </div>
   `;
@@ -643,7 +646,7 @@ function renderStep3New(): string {
   const counterText = nChars === 0 ? '' : `${nChars} character${nChars === 1 ? '' : 's'}`;
 
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <h3>create vault</h3>
 
       <div class="form-group">
@@ -907,7 +910,7 @@ function renderStep4(): string {
   const defaultName = state.deviceName || `${browser} on ${os}`;
 
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <h3>name this device</h3>
       <p class="muted" style="margin-bottom:12px;">
         This helps you identify which devices have access to your vault.
@@ -918,7 +921,7 @@ function renderStep4(): string {
       </div>
       <div class="form-actions">
         <button class="btn" id="back-btn">back</button>
-        <button class="btn btn-primary" id="next-btn">continue</button>
+        <button class="btn-primary" id="next-btn">continue ${GLYPH_NEXT}</button>
       </div>
     </div>
   `;
@@ -979,7 +982,7 @@ function renderStep5(): string {
   const isAttach = state.mode === 'attach';
 
   return `
-    <div class="wizard-step">
+    <div class="wizard-step glass" style="padding: 24px; margin-top: 16px;">
       <div class="success-box">
         <h3>${isAttach ? 'device verified' : 'vault created'}</h3>
         <p class="secondary">