Size every icon on TDesign's scale: four rem tokens, whole pixels
TDesign draws its glyphs on a 24px grid with a 2px stroke and sizes a component's icon 2px above its text, in whole pixels. The templates had drifted to 12 one-off sizes, most of them fractional (0.9rem = 14.4px), so strokes blurred and neighbours never matched: the tab bar's 14.4px cog beside a 12.8px +, the shortcut rows' 12px + beside an 11.2px reset and 9.6px chip x. Every <ng-icon> now takes one of --icon-size-sm (14px: beside 11-12px text, small icon buttons), -md (16px: file rows, window titles, path-bar buttons), -lg (20px) or -xl (24px: lone spinners and status marks). --action-icon goes; architecture.md and gotchas.md carry the rule. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -507,7 +507,12 @@ none`, a drawn check / square dot), selects (a `currentColor` caret; use
|
||||
`::-webkit-scrollbar`s (which make macOS scrollbars always visible).
|
||||
`@theme inline` maps tokens to Tailwind utilities (`bg-primary`,
|
||||
`text-icon-folder`, `bg-toolbar-2`, `bg-cursor-tint`). File-type icon colors
|
||||
come from Oxide's hue scales (800 steps dark, 600 light). **Interface scale** (`settings.uiScale`,
|
||||
come from Oxide's hue scales (800 steps dark, 600 light). **Icon sizes** follow
|
||||
TDesign's rule (an icon is 2px larger than its text, in whole pixels) through
|
||||
four rem tokens, and every `<ng-icon>` takes one: `--icon-size-sm` 14px (beside
|
||||
11–12px text, small icon buttons), `-md` 16px (13–14px text: file rows, window
|
||||
titles; the path-bar buttons), `-lg` 20px and `-xl` 24px (lone spinners and
|
||||
status marks). **Interface scale** (`settings.uiScale`,
|
||||
0.5–4 in 0.1 steps): one root font-size lever — `applyUiScale` sets
|
||||
`html { font-size: 16px * scale }`, and since EVERY size in the app is rem
|
||||
(panel tokens like `--row-h`, all Tailwind utilities, ng-icon sizes), the
|
||||
|
||||
@@ -76,6 +76,12 @@ touching the adjacent code.
|
||||
moment the pseudo-element is styled, WKWebView draws classic always-visible
|
||||
scrollbars that take layout width. Deliberate here (square design); don't
|
||||
reach for it to "tint" scrollbars without accepting that.
|
||||
- **An icon size is one of the four `--icon-size-*` tokens, never a one-off
|
||||
rem.** TDesign glyphs are 24-unit SVGs with 2-unit strokes, so a fractional
|
||||
size (0.9rem = 14.4px) lands every stroke between device pixels and blurs
|
||||
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.
|
||||
|
||||
## The interface scale (root font-size lever)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user