feat(icons): rebrand app icon; slice the full set from one master

The SVG tracer export failed, so the icon was designed collaboratively from scratch: a wooden «Э» tile with a ✻ score-subscript in Spectral Bold, wood grain and diagonal light/shadow. Construction is specified in fractions of the side in docs/ICON_BRANDBOOK.md; the reference generator, pinned Spectral font and committed masters live in assets/icons/brand/. One master -> the whole set (assets/icons/brand/build-set.mjs + build-android-res.mjs): - web (ui/public): favicon.svg (light+dark via prefers-color-scheme), favicon.ico, apple-touch, PWA any + maskable (+ dark variants), og-image reskinned to «Эрудит» / Игра в слова - Capacitor layers: ui/assets/{icon,icon-foreground,icon-background}.png - Android launcher res, all densities, NO inset, + monochrome themed layer (anydpi xml: background+foreground+monochrome) - manual-upload art: assets/icons/brand/{vk,tg,store} (square, no rounding) Primary variant light; dark where the platform can theme (favicon.svg). The old LiberationSans generator (assets/icons/build) is removed; docs/ICONS.md retargeted onto the single master. ANDROID_PLAN icon-rebrand item marked done.
2026-07-13 21:49:29 +02:00
parent 8c5b659ddf
commit dbe2c4cb94
84 changed files with 753 additions and 365 deletions
@@ -0,0 +1,47 @@
+'use strict';
+// Generate the Android launcher resources from the committed layers, at every
+// density, with NO inset (our layers already fill the 108 dp canvas) and a
+// monochrome (themed) layer. Run build-set.mjs first (it writes the layer PNGs).
+//
+//   npm i opentype.js  # (only build-icon/build-set need it; this reads PNGs)
+//   node build-set.mjs && node build-android-res.mjs
+//
+// Writes ui/android/app/src/main/res/mipmap-*/ic_launcher{,_round,_foreground,
+// _background,_monochrome}.png. The two mipmap-anydpi-v26/*.xml are committed by hand.
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const DIR = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(DIR, '..', '..', '..');
+const RES = join(ROOT, 'ui', 'android', 'app', 'src', 'main', 'res');
+const uri = p => 'data:image/png;base64,' + readFileSync(p).toString('base64');
+const BG = uri(join(ROOT, 'ui', 'assets', 'icon-background.png'));
+const FG = uri(join(ROOT, 'ui', 'assets', 'icon-foreground.png'));
+const MONO = uri(join(DIR, 'android-monochrome.png'));
+
+// density: [adaptive-layer px (108 dp), legacy launcher px (48 dp)]
+const D = { ldpi: [81, 36], mdpi: [108, 48], hdpi: [162, 72], xhdpi: [216, 96], xxhdpi: [324, 144], xxxhdpi: [432, 192] };
+
+const pw = await import(join(ROOT, 'ui', 'node_modules', '@playwright', 'test', 'index.js'));
+const { chromium } = pw.default ?? pw;
+const browser = await chromium.launch();
+const page = await browser.newPage({ deviceScaleFactor: 1 });
+const im = (u, s) => `<img src="${u}" width="${s}" height="${s}" style="display:block">`;
+async function shot(html, s, transparent) {
+  await page.setViewportSize({ width: s, height: s });
+  await page.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}#r{width:${s}px;height:${s}px}</style><div id=r>${html}</div>`, { waitUntil: 'networkidle' });
+  return page.locator('#r').screenshot({ omitBackground: !!transparent });
+}
+for (const [d, [fg, lg]] of Object.entries(D)) {
+  const dir = join(RES, `mipmap-${d}`);
+  writeFileSync(join(dir, 'ic_launcher_background.png'), await shot(im(BG, fg), fg, false));
+  writeFileSync(join(dir, 'ic_launcher_foreground.png'), await shot(im(FG, fg), fg, true));
+  writeFileSync(join(dir, 'ic_launcher_monochrome.png'), await shot(im(MONO, fg), fg, true));
+  const comp = `<div style="position:relative;width:${lg}px;height:${lg}px">${im(BG, lg)}<div style="position:absolute;inset:0">${im(FG, lg)}</div></div>`;
+  writeFileSync(join(dir, 'ic_launcher.png'), await shot(comp, lg, false));
+  const round = `<div style="width:${lg}px;height:${lg}px;border-radius:50%;overflow:hidden;position:relative">${im(BG, lg)}<div style="position:absolute;inset:0">${im(FG, lg)}</div></div>`;
+  writeFileSync(join(dir, 'ic_launcher_round.png'), await shot(round, lg, true));
+  console.log('mipmap-' + d, 'ok');
+}
+await browser.close();