diff --git a/packages/web/public/icons/logo.png b/packages/web/public/icons/logo.png index cfeff7c2..52eeb5fe 100644 Binary files a/packages/web/public/icons/logo.png and b/packages/web/public/icons/logo.png differ diff --git a/packages/web/src/components/layout/SpaceSidebar.tsx b/packages/web/src/components/layout/SpaceSidebar.tsx index c2eb464a..b3a2ae20 100644 --- a/packages/web/src/components/layout/SpaceSidebar.tsx +++ b/packages/web/src/components/layout/SpaceSidebar.tsx @@ -79,21 +79,13 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe } if (type === 'dm') { - // Home tile uses brand-tinted lavender (the endpoint of the mark's - // gradient — see assets/brand/mark.svg) so the bg is on-brand and - // visibly NOT grey against the cool-dark sidebar (any neutral tint - // reads as muddy grey-on-dark; only saturation breaks the grey). - // Discord's home button uses brand blurple the same way; ours uses - // accent-lavender. The bare mark in logo.png sits at 75% scale on - // transparent so the lavender tile is the visible frame, escalating - // at rest → hover → active for clear interaction feedback. - return { - background: active - ? 'rgba(196, 181, 253, 0.28)' - : isHovered - ? 'rgba(196, 181, 253, 0.16)' - : 'rgba(196, 181, 253, 0.08)', - }; + // Home tile renders logo.png (full Element 1 badge with #000 bg) + // via object-cover; the badge IS the visible tile fill, so no + // separate button background is needed. The button's overflow-hidden + // + rounded-[20px → 13px] morph clips the opaque badge cleanly, + // giving the same hover/active feedback shape as space tiles with + // custom icons. + return undefined; } // Space type — if it has a custom icon image, no gradient needed @@ -101,7 +93,7 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe const spaceGrad = getSpaceGradient(id, name, avatarColor); return { background: spaceGrad.gradient }; - }, [type, id, name, icon, avatarColor, isHovered, active]); + }, [type, id, name, icon, avatarColor, isHovered]); const getButtonClasses = () => { const base = 'w-10 h-10 flex items-center justify-center duration-200 overflow-hidden [transition:border-radius_0.2s,background_0.2s,color_0.2s]'; diff --git a/scripts/gen-icons.README.md b/scripts/gen-icons.README.md index 67f044d2..113c431e 100644 --- a/scripts/gen-icons.README.md +++ b/scripts/gen-icons.README.md @@ -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. diff --git a/scripts/gen-icons.mjs b/scripts/gen-icons.mjs index e5fc3f6e..7b5b0cb9 100755 --- a/scripts/gen-icons.mjs +++ b/scripts/gen-icons.mjs @@ -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) => {