Fill a coloured folder in, rather than outlining it #42

New Issue

Closed

opened 2026-08-25 20:04:55 +00:00 by jcoffey-dev · 0 comments

jcoffey-dev commented

2026-08-25 20:04:55 +00:00

Owner

A tinted outline barely registered against the sidebar. The icon is now filled with the colour, which is what makes it findable at a glance in a list of a dozen folders.

CSS only — four lines, no logic touched.

Two details it needed

The fill has to come from CSS. Lucide writes fill="none" as a presentation attribute on the svg, and a CSS rule beats a presentation attribute — so fill: var(--folder-color) wins where an inline style fight would have been awkward.

The strokes are drawn in --bg, not the colour. My first attempt filled and stroked in the same colour, which swallowed the detail inside any icon that has some: Archive lost the lid and handle of its box and became an orange blob. Knocking the strokes out against the background restores them, and because it uses the --bg token rather than a pinned colour it inverts correctly in the light theme instead of vanishing.

Verified

By pixels and by eye, in both themes. The coloured area of the icon went from an outline to 55% of its box. Archive, Newsletters and Work are all still recognisably themselves rather than three coloured lozenges — the failure mode I'd have shipped without looking at it.

npm run typecheck, npm test — 224 web + 88 server passing, unchanged, since this touches no logic.

🤖 Generated with Claude Code

Merged 2026-08-25 as coffey-labs/ihasmail@ca2c4544dc

_{Rebuilt from: git history, session transcript.}

A tinted outline barely registered against the sidebar. The icon is now **filled** with the colour, which is what makes it findable at a glance in a list of a dozen folders. CSS only — four lines, no logic touched. ## Two details it needed **The fill has to come from CSS.** Lucide writes `fill="none"` as a presentation attribute on the `svg`, and a CSS rule beats a presentation attribute — so `fill: var(--folder-color)` wins where an inline style fight would have been awkward. **The strokes are drawn in `--bg`, not the colour.** My first attempt filled *and* stroked in the same colour, which swallowed the detail inside any icon that has some: **Archive** lost the lid and handle of its box and became an orange blob. Knocking the strokes out against the background restores them, and because it uses the `--bg` token rather than a pinned colour it inverts correctly in the light theme instead of vanishing. ## Verified By pixels and by eye, in both themes. The coloured area of the icon went from an outline to **55% of its box**. Archive, Newsletters and Work are all still recognisably themselves rather than three coloured lozenges — the failure mode I'd have shipped without looking at it. `npm run typecheck`, `npm test` — 224 web + 88 server passing, unchanged, since this touches no logic. 🤖 Generated with [Claude Code](https://claude.com/claude-code) **Merged** 2026-08-25 as coffey-labs/ihasmail@ca2c4544dcbd <sub>Rebuilt from: git history, session transcript.</sub>

This repo is archived. You cannot comment on issues.

1 Participants

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coffey-labs/ihasmail-github-archive#42