diff --git a/docs/superpowers/plans/2026-04-24-relicario-logo-refresh.md b/docs/superpowers/plans/2026-04-24-relicario-logo-refresh.md new file mode 100644 index 0000000..faf3807 --- /dev/null +++ b/docs/superpowers/plans/2026-04-24-relicario-logo-refresh.md @@ -0,0 +1,578 @@ +# Logo Refresh + Extension Palette Shift Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Replace the current arched-niche-with-blue-gem logo with a round chapel-style theca + fleur-de-lis finial in burnished gold/deep red, and shift the extension's primary accent from GitHub-blue to the matching gold ramp. + +**Architecture:** No new code paths or behavior changes — this is asset replacement (2 SVGs + 3 PNGs) and a static color palette swap across CSS + inline TS/HTML colors. The CLI/dark feel is preserved (backgrounds and text colors untouched). One CSS class rename (`sig-block--blue` → `sig-block--gold`) sweeps through the consumers + a test. + +**Tech Stack:** SVG (hand-authored), ImageMagick (`magick` — preferred per project memory) for SVG → PNG, CSS, TypeScript, vitest, webpack. + +**Spec:** `docs/superpowers/specs/2026-04-24-relicario-logo-refresh-design.md` (commit `4b7f1fd`). + +--- + +## Task 1: Replace master logo SVG + +**Files:** +- Modify: `extension/icons/relicario-logo.svg` (overwrite entirely) + +- [ ] **Step 1: Overwrite the master SVG** + +Replace the file contents with: + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +- [ ] **Step 2: Verify it parses** + +Run: `xmllint --noout extension/icons/relicario-logo.svg && echo OK` +Expected: `OK` + +If `xmllint` isn't installed, fallback: `python3 -c "import xml.etree.ElementTree as T; T.parse('extension/icons/relicario-logo.svg'); print('OK')"` + +- [ ] **Step 3: Commit** + +```bash +git add extension/icons/relicario-logo.svg +git commit -m "feat(icons): replace master logo with reliquary theca + fleur" +``` + +--- + +## Task 2: Replace 16 px logo SVG + +**Files:** +- Modify: `extension/icons/relicario-logo-16.svg` (overwrite entirely) + +- [ ] **Step 1: Overwrite the 16 px SVG** + +Replace the file contents with: + +```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +- [ ] **Step 2: Verify it parses** + +Run: `xmllint --noout extension/icons/relicario-logo-16.svg && echo OK` +Expected: `OK` + +- [ ] **Step 3: Commit** + +```bash +git add extension/icons/relicario-logo-16.svg +git commit -m "feat(icons): replace 16px logo with bare medallion variant" +``` + +--- + +## Task 3: Regenerate icon PNGs + +**Files:** +- Modify: `extension/icons/icon-16.png` (regenerate) +- Modify: `extension/icons/icon-48.png` (regenerate) +- Modify: `extension/icons/icon-128.png` (regenerate) + +ImageMagick (`magick`, NOT `rsvg-convert`) is the project preference per memory. Density flag controls source-rasterization sharpness; 384 = 4× standard 96dpi. + +- [ ] **Step 1: Generate icon-16.png from the 16 px SVG** + +Run: +```bash +magick -background none extension/icons/relicario-logo-16.svg -resize 16x16 extension/icons/icon-16.png +``` + +Verify: `file extension/icons/icon-16.png` +Expected: `PNG image data, 16 x 16, ...` + +- [ ] **Step 2: Generate icon-48.png from the master SVG** + +The master SVG has aspect ratio 220:240 (slightly taller than 1:1 because of the pedestal). ImageMagick's `-resize 48x48` preserves aspect ratio by default — output will be 44 × 48 (constrained by height). Use `-extent 48x48 -gravity center` to pad to a 48 × 48 square with transparent margins. + +Run: +```bash +magick -background none -density 384 extension/icons/relicario-logo.svg \ + -resize 48x48 -gravity center -extent 48x48 \ + extension/icons/icon-48.png +``` + +Verify: `file extension/icons/icon-48.png` +Expected: `PNG image data, 48 x 48, ...` + +- [ ] **Step 3: Generate icon-128.png from the master SVG** + +Run: +```bash +magick -background none -density 384 extension/icons/relicario-logo.svg \ + -resize 128x128 -gravity center -extent 128x128 \ + extension/icons/icon-128.png +``` + +Verify: `file extension/icons/icon-128.png` +Expected: `PNG image data, 128 x 128, ...` + +- [ ] **Step 4: Visual sanity check** + +Open each PNG to confirm the gold/red logo is visible at the right size. From the terminal: +```bash +ls -la extension/icons/icon-*.png +``` +Expected file sizes: icon-16 < icon-48 < icon-128. Each non-empty. + +If a viewer is available (eog, feh, xdg-open), open `extension/icons/icon-128.png` and verify visually: gold ring, red theca with gold asterisk gem, fleur-de-lis on top, compact pedestal at bottom. Centered with transparent margins. + +- [ ] **Step 5: Commit** + +```bash +git add extension/icons/icon-16.png extension/icons/icon-48.png extension/icons/icon-128.png +git commit -m "feat(icons): regenerate PNGs from refreshed SVG masters" +``` + +--- + +## Task 4: Palette swap in styles.css + +**Files:** +- Modify: `extension/src/popup/styles.css` + +The complete mapping from old to new hex values: + +| Old | New | Note | +|-----|-----|------| +| `#58a6ff` | `#d2ab43` | bright gold replaces primary blue | +| `#1f6feb` | `#7c5719` | deep gold replaces deep blue | +| `#388bfd` | `#aa812a` | mid gold replaces mid blue (hover state) | +| `#f85149` | `#ab2b20` | theca-toned red replaces danger fg | +| `#da3633` | `#791111` | deep theca-red replaces danger emphasis | +| `rgba(88, 166, 255, 0.3)` | `rgba(170, 129, 42, 0.4)` | focus ring tint (slightly more saturated) | + +Note: `#3fb950` (success green) and `#d29922` (warning yellow) are NOT changed. + +- [ ] **Step 1: Apply find-and-replace to styles.css** + +Use `sed` (in-place) for the bulk swap: + +```bash +sed -i \ + -e 's/#58a6ff/#d2ab43/g' \ + -e 's/#1f6feb/#7c5719/g' \ + -e 's/#388bfd/#aa812a/g' \ + -e 's/#f85149/#ab2b20/g' \ + -e 's/#da3633/#791111/g' \ + -e 's/rgba(88, *166, *255, *\([0-9.]*\))/rgba(170, 129, 42, \1)/g' \ + -e 's/rgba(31, *111, *235, *\([0-9.]*\))/rgba(124, 87, 25, \1)/g' \ + -e 's/rgba(248, *81, *73, *\([0-9.]*\))/rgba(171, 43, 32, \1)/g' \ + -e 's/rgba(218, *54, *51, *\([0-9.]*\))/rgba(121, 17, 17, \1)/g' \ + extension/src/popup/styles.css +``` + +- [ ] **Step 2: Verify no old colors remain** + +Run: +```bash +grep -nE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' extension/src/popup/styles.css +``` +Expected: no output (zero hits). + +Run: +```bash +grep -nE 'rgba\(88|rgba\(31, *111|rgba\(248, *81|rgba\(218, *54' extension/src/popup/styles.css +``` +Expected: no output. + +- [ ] **Step 3: Run vitest (CSS changes shouldn't break behavior tests)** + +Run: `cd extension && bun run test` +Expected: 124 passed (one test inspects HTML for `sig-block--blue` and will still pass at this point — that fix lands in Task 5). + +- [ ] **Step 4: Commit** + +```bash +git add extension/src/popup/styles.css +git commit -m "feat(ext/popup): swap blue accent palette for burnished gold" +``` + +--- + +## Task 5: Rename `sig-block--blue` to `sig-block--gold` + +The `--blue` variant of the signature block now renders gold. Rename the class for semantic correctness. + +**Files:** +- Modify: `extension/src/popup/styles.css` (the class definition) +- Modify: `extension/src/popup/components/fields.ts` (the consumer that emits the class string) +- Modify: `extension/src/popup/components/__tests__/fields.test.ts` (the assertion) + +- [ ] **Step 1: Find all consumers of `sig-block--blue` and `accent: 'blue'`** + +Run: +```bash +grep -rn "sig-block--blue\|accent: 'blue'\|accent=\"blue\"\|accent: \"blue\"" extension/src/ +``` + +Expected hits: +- `extension/src/popup/styles.css:507` — `.sig-block--blue { ... }` +- `extension/src/popup/components/__tests__/fields.test.ts` — string literals `'sig-block--blue'`, `accent: 'blue'` + +The `extension/src/popup/components/fields.ts` template uses `sig-block--${accent}` so it accepts whatever string the caller passes. We need to find any caller that passes `'blue'`. + +Run: +```bash +grep -rn "renderSignatureBlock" extension/src/ +``` + +Inspect each call site for an `accent: 'blue'` argument; rename to `accent: 'gold'`. Likely zero or one site outside the test, since most signature-block consumers use `'green'` / `'amber'` / `'red'` for status semantics. + +- [ ] **Step 2: Rename in styles.css** + +Edit `extension/src/popup/styles.css` line 507: +```css +.sig-block--gold { border-left-color: #7c5719; } +``` + +(was `.sig-block--blue { border-left-color: #1f6feb; }` — the color was already swapped to `#7c5719` in Task 4; now we rename the class.) + +- [ ] **Step 3: Rename `accent` type union in fields.ts** + +Open `extension/src/popup/components/fields.ts`. The `renderSignatureBlock` opts type likely has `accent: 'blue' | 'green' | 'amber' | 'red'`. Replace `'blue'` with `'gold'`: + +Find: +```ts +accent: 'blue' | 'green' | 'amber' | 'red' +``` +(or however it's typed — also check for `accent?: ...` and `Accent` aliases) + +Replace `'blue'` with `'gold'`. Adjust any default value (e.g. `accent = 'blue'` → `accent = 'gold'`). + +- [ ] **Step 4: Rename in fields.test.ts** + +Edit `extension/src/popup/components/__tests__/fields.test.ts`: + +Line 72-area: change `expect(html).toContain('sig-block--blue');` to `expect(html).toContain('sig-block--gold');` + +Line 77-area: change `accent: 'blue'` to `accent: 'gold'`. The assertion line 77 likely reads: +```ts +expect(renderSignatureBlock({ accent: 'blue', children: '' })).toContain('sig-block--blue'); +``` +Becomes: +```ts +expect(renderSignatureBlock({ accent: 'gold', children: '' })).toContain('sig-block--gold'); +``` + +- [ ] **Step 5: Update any non-test callers found in Step 1** + +For each non-test call site that passes `accent: 'blue'`, change to `accent: 'gold'`. If Step 1 found zero such sites, skip this step. + +- [ ] **Step 6: Run vitest** + +Run: `cd extension && bun run test` +Expected: 124 passed (the renamed test now asserts on `'gold'` and matches the renamed class). + +- [ ] **Step 7: Verify type-check is clean** + +Run: `cd extension && bunx tsc --noEmit` +Expected: zero errors. (If the `accent` type union missed a spot, this is where it'll surface.) + +- [ ] **Step 8: Commit** + +```bash +git add extension/src/popup/styles.css \ + extension/src/popup/components/fields.ts \ + extension/src/popup/components/__tests__/fields.test.ts +git commit -m "feat(ext/popup): rename sig-block--blue to --gold for accuracy" +``` + +--- + +## Task 6: Inline color sweep in TS files + +Six TS files have inline hex colors in template literals or DOM-style assignments. Each is a 1–2 line touch. + +**Files:** +- Modify: `extension/src/popup/components/types/login.ts` +- Modify: `extension/src/popup/components/types/totp.ts` +- Modify: `extension/src/popup/components/generator-popover.ts` +- Modify: `extension/src/popup/components/settings.ts` +- Modify: `extension/src/content/capture.ts` +- Modify: `extension/src/content/icon.ts` + +- [ ] **Step 1: Sweep all six files with sed** + +Same color mapping as Task 4. Run: + +```bash +sed -i \ + -e 's/#58a6ff/#d2ab43/g' \ + -e 's/#1f6feb/#7c5719/g' \ + -e 's/#388bfd/#aa812a/g' \ + -e 's/#f85149/#ab2b20/g' \ + -e 's/#da3633/#791111/g' \ + extension/src/popup/components/types/login.ts \ + extension/src/popup/components/types/totp.ts \ + extension/src/popup/components/generator-popover.ts \ + extension/src/popup/components/settings.ts \ + extension/src/content/capture.ts \ + extension/src/content/icon.ts +``` + +- [ ] **Step 2: Verify no old colors remain in `extension/src/`** + +Run: +```bash +grep -rnE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' extension/src/ +``` +Expected: no output. + +- [ ] **Step 3: Run vitest + type-check** + +```bash +cd extension && bun run test && bunx tsc --noEmit +``` +Expected: 124 passed; zero TS errors. + +- [ ] **Step 4: Commit** + +```bash +git add extension/src/popup/components/types/login.ts \ + extension/src/popup/components/types/totp.ts \ + extension/src/popup/components/generator-popover.ts \ + extension/src/popup/components/settings.ts \ + extension/src/content/capture.ts \ + extension/src/content/icon.ts +git commit -m "feat(ext): sweep inline blue/red colors to gold/theca-red" +``` + +--- + +## Task 7: Inline color sweep in `setup.html` + +Same swap pattern, but in HTML/CSS context. + +**Files:** +- Modify: `extension/setup.html` + +- [ ] **Step 1: Apply sed sweep to setup.html** + +```bash +sed -i \ + -e 's/#58a6ff/#d2ab43/g' \ + -e 's/#1f6feb/#7c5719/g' \ + -e 's/#388bfd/#aa812a/g' \ + -e 's/#f85149/#ab2b20/g' \ + -e 's/#da3633/#791111/g' \ + extension/setup.html +``` + +- [ ] **Step 2: Verify no old colors remain in setup.html** + +```bash +grep -nE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' extension/setup.html +``` +Expected: no output. + +- [ ] **Step 3: Verify final scope: zero stale colors anywhere in extension/src/ + setup.html** + +```bash +grep -rnE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' extension/src/ extension/setup.html +``` +Expected: no output. **This is the spec's primary acceptance gate.** + +- [ ] **Step 4: Commit** + +```bash +git add extension/setup.html +git commit -m "feat(ext/setup): sweep inline colors for palette refresh" +``` + +--- + +## Task 8: Build, full verification, and close-out + +- [ ] **Step 1: Build both extension bundles** + +```bash +cd extension && bun run build:all +``` + +Expected: "compiled with 2 warnings" (WASM size warnings only) for both Chrome and Firefox. + +If webpack errors appear, the most likely cause is a TS type mismatch from Task 5's `accent` type union. Re-run `bunx tsc --noEmit` and fix. + +- [ ] **Step 2: Run full test sweep** + +```bash +cd /home/alee/Sources/relicario && cargo test --workspace +cd /home/alee/Sources/relicario/extension && bun run test +``` + +Expected: 155 Rust + 124 Vitest, all green. + +- [ ] **Step 3: Manual visual smoke check (instructions for the implementer to relay to user)** + +Have the user load `extension/dist/` in Chrome (`chrome://extensions` → "Update" if already loaded, or "Load unpacked" otherwise) and verify: + +- [ ] Toolbar icon shows the new gold/red reliquary medallion (16 px treatment). +- [ ] Open popup → unlock — primary buttons (`+ New`, `autofill`, `save`) have gold backgrounds (`#7c5719`). +- [ ] Selected list row has a gold left-border (`#aa812a`) + gold tint background. +- [ ] Focus ring on search input + form fields is gold (`#aa812a` @ 40%). +- [ ] Reveal/copy links in detail view are bright gold (`#d2ab43`). +- [ ] Trash button (and any danger states) shows theca-red (`#ab2b20`). +- [ ] TOTP countdown ring is gold (`#d2ab43`). +- [ ] Signature blocks: `--gold` accent renders gold (was the old blue accent). +- [ ] Setup tab: strength bar's "very weak" segment is theca-red; advice block left-border is gold. +- [ ] Capture prompt and origin-ack icon (content script) use gold + theca-red. + +Repeat in Firefox via `about:debugging` → "Update" or "Load Temporary Add-on" → `extension/dist-firefox/manifest.json`. + +- [ ] **Step 4: Final acceptance grep (paranoia check)** + +```bash +git grep -nE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' -- 'extension/src/**' 'extension/setup.html' +``` +Expected: no output. Anything in `dist/`, `dist-firefox/`, `node_modules/`, or `.superpowers/` is out of scope. + +- [ ] **Step 5: No close-out commit needed** + +If steps 1–4 all passed without changes, there's nothing left to commit. The seven prior commits cover all changes. + +If a fix was needed in step 1 or step 3 (e.g., a missed `accent: 'blue'` consumer), commit that fix as `fix(ext): ` before closing out. + +--- + +## Verification summary (run after Task 8) + +```bash +# Bundles compile clean +cd extension && bun run build:all + +# All tests pass +cd /home/alee/Sources/relicario && cargo test --workspace +cd /home/alee/Sources/relicario/extension && bun run test + +# Stale palette purged +git grep -nE '#(58a6ff|1f6feb|388bfd|f85149|da3633)' -- 'extension/src/**' 'extension/setup.html' # zero hits + +# Type-check clean +cd extension && bunx tsc --noEmit +``` + +All four checks must succeed for the plan to be considered complete. + +--- + +## Notes for the implementer + +- **No new tests** — palette + logo are visual changes; existing tests cover behavior. The one test touched (`fields.test.ts`) is updated for the renamed `--gold` class. +- **No worktree required** — this is a small, atomic change set. Commits go directly to main per the project's single-maintainer flow. +- **Order matters slightly:** Task 4 swaps `#1f6feb` → `#7c5719` everywhere in styles.css, including inside the old `.sig-block--blue` rule. Task 5 then renames the class. Don't reverse the order or the sed sweep in Task 4 will skip the value because the class context changed. +- **PNG generation order matters:** Task 3 needs the SVGs from Tasks 1–2 to exist first. +- **Brainstorm artifacts** in `.superpowers/brainstorm/` contain the old hex values in mockup HTML — those are gitignored and out of scope; do NOT sed-sweep them.