devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 23 Packages Projects Releases Wiki Activity

fix(brand): home tile = Element 1 with #000 bg, drop tile lavender

Browse Source 
Iterating-by-paint-over wasn't working. Going back to first
principles: the brand IS the badge — full Element 1 mass, mark with
its own internal padding, dark frame around it. That's what reads as
"Backspace" on every other surface (dock, taskbar, favicon, apple-
touch). The sidebar home tile should look the same.

The earlier "ugly grey" complaint about Element 1 in the sidebar
came down to one specific colour mismatch: the source SVG's
#1d1d1b (warm near-black) sat next to the sidebar's #1a1a23 (cool
near-black) and read as an off-grey rectangle. Fix: in the generator,
do a string-replace `#1d1d1b → #000000` on app-icon.svg before
rendering logo.png only — every other output (.icns, .ico, favicons,
PWA) keeps the original brand `#1d1d1b`. Pure black against the
sidebar's #1a1a23 reads as a deliberately darker tile, not a hue
mismatch.

Reverts the SpaceSidebar lavender-tile workaround: with the badge
filling the tile via object-cover, the button's overflow-hidden +
rounded-[20px → 13px] morph already animates the badge cleanly.
backgroundStyle for type === 'dm' returns undefined again; deps trim
back to what they were.

Determinism gate verified — only logo.png changed (other 21 outputs
byte-identical across two regen runs).
This commit is contained in:
Jannis Braun
2026-04-27 15:39:54 +02:00
parent 343fdd6e3d
commit de2ef10129
4 changed files with 23 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/gen-icons.README.md
+2 -2
View File
@@ -39,8 +39,8 @@ git history clean.
| Brand source | Drives |
|---------------------------------|-----------------------------------------------|
| `assets/brand/app-icon.svg` | Every full app icon, all favicons, PWA |
| `assets/brand/mark.svg` | Win/Linux tray, in-app `logo.png`, PWA maskable inner mark |
| `assets/brand/app-icon.svg` | Every full app icon, all favicons, PWA, in-app `logo.png` (with `#1d1d1b → #000` bg swap for sidebar contrast) |
| `assets/brand/mark.svg` | Win/Linux tray, PWA maskable inner mark |
| `assets/brand/mark-mono-dark.svg` | macOS menu-bar template (alpha + black) |
`Artworks-Backspace/` is the design archive — never read by this script.
scripts/gen-icons.mjs
+13 -9
View File
@@ -204,15 +204,19 @@ async function main() {
);
trace('pwa-maskable', join(WEB_ICONS, 'icon-maskable-512.png'), `512 (60% mark on ${MASKABLE_BG})`);
// SpaceSidebar's 40×40 rounded-[20px] tile uses object-cover and provides
// its own dark surface (`bg-surface-*`). Render the bare mark on a
// transparent canvas at 75% scale: the sidebar's tile is the visual frame,
// the 25% padding keeps the mark off the squircle edges and out of the
// way of the active-state ring, and there's no warm-bg/cool-sidebar
// mismatch (the previous full-badge approach made #1d1d1b read as a
// visible warm-grey square inside the cool #1a1a23 sidebar).
await writeCenteredMarkPng(join(WEB_ICONS, 'logo.png'), mark, 256, 0.75, null);
trace('in-app-logo', join(WEB_ICONS, 'logo.png'), '256 (75% mark, transparent)');
// Logo for the SpaceSidebar home tile: full Element 1 badge with the
// bg fill swapped from #1d1d1b → #000000. The badge IS the brand
// identity at small sizes (full mark mass + own internal padding),
// and pure black against the sidebar's #1a1a23 reads as deliberately
// darker (intentional dark tile) rather than as a warm/cool mismatch
// (the original #1d1d1b looked like an off-grey rectangle). The
// sidebar's overflow-hidden + rounded-[20px → 13px] morph clips the
// badge cleanly because the bg is fully opaque.
const logoSvg = Buffer.from(
appIcon.toString('utf8').replace(/#1d1d1b/gi, '#000000'),
);
await writePng(join(WEB_ICONS, 'logo.png'), logoSvg, 256);
trace('in-app-logo', join(WEB_ICONS, 'logo.png'), '256 (full badge, #000)');
// --- Summary ---
const fmtBytes = (n) => {