Draw the + on the pixel grid so it stays sharp on 1x screens
On a 1x display TDesign's + smeared at every small size: its 24-grid strokes are centred on the box's middle, which at 12 or 14px is a pixel boundary, so each ~1px bar covered two pixels at half ink. A thinner stroke alone keeps the bar on the boundary. This is not Electrobun: headless Chrome renders the same. pixelAdd (icons.ts) redraws the + on the 14px grid with 1px bars at 7.5, so they fill whole pixels at 1x and 2x, half a pixel off-centre. It replaces tdesignAdd in the tab bar, the shortcut rows, the connection manager and the tab menu. Checked at 1x in the real tab-bar and shortcut-row markup: single-pixel bars at full ink. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -372,8 +372,9 @@ component; tokens → `ui/src/styles.css`.
|
||||
walker check the flag themselves.
|
||||
- `file-icons.ts` — extension → category map driving glyphs, colors
|
||||
(fixed `--icon-*` tokens from Oxide's hue scales) and the Kind column.
|
||||
- `icons.ts` — the one icon registry (TDesign, `@ng-icons/tdesign-icons`), passed to
|
||||
`provideIcons` in `app.config.ts`. Icon names are plain strings in templates and
|
||||
- `icons.ts` — the one icon registry (TDesign, `@ng-icons/tdesign-icons`, plus one
|
||||
redrawn glyph: `pixelAdd`, TDesign's + on the 14px pixel grid so it stays sharp
|
||||
on 1x screens), passed to `provideIcons` in `app.config.ts`. Icon names are plain strings in templates and
|
||||
the build never checks them: an unregistered name renders nothing (console error
|
||||
only), so every name used anywhere must be listed here.
|
||||
- `platform.ts` — preload-global readers (`PLATFORM`, `APP_MODE`,
|
||||
|
||||
@@ -82,6 +82,14 @@ touching the adjacent code.
|
||||
it. Per-template picks had drifted to 12 sizes, and neighbours stopped
|
||||
matching: a 14.4px cog beside a 12.8px +, and a 12px + beside 9.6px × in
|
||||
the shortcut chips.
|
||||
- **On a 1x screen, a TDesign line through the icon's centre smears at any
|
||||
small size.** At 12 or 14px the centre is a pixel boundary, so a ~1px bar
|
||||
covers two pixels at half ink. A 1px stroke alone doesn't help, because the
|
||||
bar stays centred on the boundary. This is geometry, not Electrobun:
|
||||
headless Chrome renders the same. So the + is `pixelAdd` (`icons.ts`),
|
||||
redrawn on the 14px grid with 1px bars at 7.5, which fill whole pixels at 1x
|
||||
and at 2x. It's tuned for `--icon-size-sm` only. Arrow shafts (↑ →) have
|
||||
the same issue if it ever shows.
|
||||
|
||||
## The interface scale (root font-size lever)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user