Skip to content

fix(desktop): unify chrome icon size via --icon-size token - #81

Merged
Astro-Han merged 1 commit into
mainfrom
claude/icon-scale
Jun 21, 2026
Merged

fix(desktop): unify chrome icon size via --icon-size token#81
Astro-Han merged 1 commit into
mainfrom
claude/icon-scale

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Jun 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Problem

The homepage chrome rendered icons at inconsistent sizes: left-nav icons were hardcoded 18px (.maka-nav-icon) while the nav-primary glyph and every buttonVariants icon sat at 1rem (15px) via size-4. The nav was the lone outlier. There was also no token for icon size — the one un-tokenized chrome dimension.

Solution: one --icon-size token, two surfaces

Introduce a single --icon-size token (16px) consumed by both chrome surfaces:

  • .maka-nav-icon / .maka-nav-primary-icon / .maka-nav-row → var(--icon-size)
  • shared buttonVariants → [&_svg]:size-[var(--icon-size,1rem)] (the 1rem fallback keeps @maka/ui self-contained when used without desktop tokens)

Nav and buttons now track one dial and can't drift apart again. Want a different value? Change the one token; both surfaces follow.

Deliberately scoped — not a blanket resize

This does not flatten every icon to one size. Dense-meta icons (12–14px: status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set at their call sites — that's intentional visual hierarchy, not drift.

An earlier attempt used a global svg.lucide { width } rule. Code review correctly flagged that it would silently resize ~100 intentional small glyphs (e.g. the Checkbox check at 11px, SessionStatusIcon at 12px) and override their stroke, and that later svg rules (e.g. .maka-chat-tab-plus svg) still beat it — so the "single authority" claim didn't even hold. That approach is dropped; the contract test now forbids a blanket svg.lucide size rule from returning. packages/ui/src/primitives/* is a separate component library with its own responsive icon scale and is untouched.

Changes

  • maka-tokens.css: add --icon-size (16px)
  • styles.css: nav icon width/height + nav-row grid column → var(--icon-size)
  • ui.tsx: buttonVariants svg size → var(--icon-size,1rem)
  • design-system.md §1.9 图标: register the token + the by-context tiers
  • icon-system-contract.test.ts: assert nav + button consume the token, forbid a blanket svg.lucide size rule; update the nav-icon assertion in localized-main-shell-contract.test.ts

5 files changed (26+/8−) + 1 new test.

Verification

  • desktop tests 1536/1536 green
  • renderer build compiles the token (built CSS carries --icon-size:16px; Tailwind emits the var(--icon-size,1rem) width/height with fallback intact)
  • screenshots (streaming-sidebar / sidebar-long-sessions / settings-about, dark) confirm uniform 16px chrome with dense status icons and hero glyphs unchanged

https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD

@Astro-Han
Astro-Han force-pushed the claude/icon-scale branch 2 times, most recently from 7528a72 to 8fed42c Compare June 21, 2026 16:16
@Astro-Han Astro-Han changed the title feat(desktop): unify lucide icon size + stroke via single CSS authority fix(desktop): unify chrome icon size via --icon-size token Jun 21, 2026
@Astro-Han
fix(desktop): unify chrome icon size via --icon-size token
ee732d7 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
@Astro-Han
Astro-Han force-pushed the claude/icon-scale branch from 8fed42c to ee732d7 Compare June 21, 2026 16:49
@Astro-Han
Astro-Han merged commit e49673d into main Jun 21, 2026
@Astro-Han
Astro-Han deleted the claude/icon-scale branch June 21, 2026 17:04
jackwener pushed a commit that referenced this pull request Jun 21, 2026
@Astro-Han
fix(desktop): unify chrome icon size via --icon-size token (#81)
ce9f952 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
jackwener pushed a commit that referenced this pull request Jun 21, 2026
@Astro-Han @jackwener
fix(desktop): unify chrome icon size via --icon-size token (#81)
62bcab0 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
jackwener pushed a commit that referenced this pull request Jun 21, 2026
@Astro-Han @jackwener
fix(desktop): unify chrome icon size via --icon-size token (#81)
a6f496e 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
jackwener pushed a commit that referenced this pull request Jun 21, 2026
@Astro-Han @jackwener
fix(desktop): unify chrome icon size via --icon-size token (#81)
f576b39 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
jackwener pushed a commit that referenced this pull request Jun 21, 2026
@Astro-Han @jackwener
fix(desktop): unify chrome icon size via --icon-size token (#81)
0b6fab5 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
jackwener pushed a commit that referenced this pull request Jun 21, 2026
@Astro-Han @jackwener
fix(desktop): unify chrome icon size via --icon-size token (#81)
1eb4852 
The homepage chrome rendered icons at inconsistent sizes: left-nav icons
were hardcoded 18px (`.maka-nav-icon`) while the nav-primary glyph and every
`buttonVariants` icon sat at 1rem (15px via `size-4`). The nav was the lone
outlier.

Introduce one `--icon-size` token (16px) consumed by both surfaces:
`.maka-nav-icon` / `.maka-nav-primary-icon` / `.maka-nav-row` and the shared
`buttonVariants` (`[&_svg]:size-[var(--icon-size,1rem)]`, 1rem fallback keeps
@maka/ui self-contained). Nav and buttons now track one dial and can't drift
apart again.

Deliberately scoped NOT to flatten everything: dense-meta icons (12-14px:
status dots, footer actions, chips) and hero/emphasis icons (20px+) stay set
at their call sites — they are intentional hierarchy, not drift. A code
review of the earlier attempt flagged that a blanket `svg.lucide { width }`
rule would silently resize ~100 of those small glyphs (e.g. the Checkbox
check at 11px, SessionStatusIcon at 12px) and override their stroke; that
approach is dropped and the contract test now forbids it from returning.
`packages/ui/src/primitives/*` is a separate component library with its own
responsive icon scale and is untouched.

- maka-tokens.css: add --icon-size (16px)
- styles.css: nav icon width/height + nav-row grid column -> var(--icon-size)
- ui.tsx: buttonVariants svg size -> var(--icon-size,1rem)
- design-system.md §1.9 图标: register the token + the by-context tiers
- icon-system-contract.test.ts: assert nav + button consume the token, and
  forbid a blanket svg.lucide size rule; update the nav-icon assertion in
  localized-main-shell-contract.test.ts

Verified: 1536/1536 desktop tests green; renderer build compiles the token
(built CSS carries --icon-size:16px); screenshots confirm uniform 16px chrome
with dense status icons and hero glyphs unchanged.

Claude-Session: https://claude.ai/code/session_01VWXzHoyncpGYuwbaDEDizD
@Astro-Han Astro-Han mentioned this pull request Jul 2, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Astro-Han