← Commit history

1.10.1: currentColor renders BLACK in a favicon (isolated document); hardcode #e6edf3 for img-loaded icons

John Lauer ·d3e2f43b4e ·1mo ago ·parent 87f44bc
2 files changed +16−7
package.json+1−1
@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.10.0",+  "version": "1.10.1",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.",   "dependencies": {},
skills/icons/SKILL.md+15−6
@@ -34,9 +34,15 @@ same brother-from-another-mother problem the dashboard contract fixed, in miniat 1. **Line drawing, not a silhouette.** Strokes describe the shape; the interior stays empty.    `fill="none"` on the paths, `stroke="currentColor"`, `stroke-width` 1.5 to 2 at a    `viewBox="0 0 24 24"`, `stroke-linecap="round"`, `stroke-linejoin="round"`.-2. **White or currentColor. Never a brand color.** `#e6edf3` or, better, `currentColor` so-   the icon inherits its surface. The ONLY place brand color is allowed is marketing art:-   the wiki hero and the page thumbnail.+2. **White. Never a brand color.** The ONLY place brand color is allowed is marketing art:+   the wiki hero and the page thumbnail. Which white depends on HOW the icon is loaded, and+   getting this backwards ships an invisible icon:+   - **Inline SVG** (pasted into your markup): `currentColor`, so it inherits the surface.+   - **Tab favicon, `<img src>`, `background-image`, anything loaded as its own file:**+     hardcode `#e6edf3`. A favicon is an ISOLATED DOCUMENT with no host to inherit from, so+     `currentColor` resolves to black and your icon vanishes on the dark tab strip. (Found+     the hard way by nb on 2026-08-24: shipped with currentColor, rendered at 16px on+     `#161b22`, and it was effectively invisible.) `webview.favicon` is always this case. 3. **Transparent background. Always.** No rounded-rect plate, no colored tile, no white    card behind the glyph. On a dark tab strip the icon reads as white lines on the strip's    own dark; that is the intended look, and it is why transparency matters more than@@ -86,8 +92,8 @@ The file must satisfy every rule above. A tab strip of six apps should read as o </svg> ``` -No `<rect>` background, no `fill` on paths, no hardcoded hex unless you genuinely cannot-inherit color, in which case use `#e6edf3`.+No `<rect>` background, no `fill` on paths. Swap `currentColor` for `#e6edf3` in the file+you point `webview.favicon` at, per rule 2.  ## Pre-publish audit (all four return zero hits) @@ -99,4 +105,7 @@ ls path/to/icon.png 2>/dev/null                     # a raster where an SVG belo ```  Then LOOK at it: render the icon at 16px on `#161b22` next to two other Adom app icons. If-yours is the one that stands out, it is wrong, however nice it is on its own.+yours is the one that stands out, it is wrong, however nice it is on its own. Look for the+invisible case too: an icon that inherited black on a dark strip reads as "no icon", which+is easy to miss when you are checking whether it looks RIGHT rather than whether it is+THERE.