Skip to content

style(log-viewer): one type scale and one mono family - #928

Open
lukecotter wants to merge 2 commits into
certinia:mainfrom
lukecotter:style-log-viewer-type-scale
Open

style(log-viewer): one type scale and one mono family#928
lukecotter wants to merge 2 commits into
certinia:mainfrom
lukecotter:style-log-viewer-type-scale

Conversation

@lukecotter

@lukecotter lukecotter commented Aug 12, 2026

Copy link
Copy Markdown
Collaborator

What

One type scale and one mono family for the whole webview, replacing hand-written pixel sizes and bare monospace literals.

Why

Text sizes were set per component, so the same kind of text read at a different size depending on where it sat, and none of it followed the reader's VS Code font size. Code-shaped text picked its family per file.

How

  • Type scale on VS Code's own ramp, in styles/tokens.css:
    • --lana-text-lg--vscode-bodyFontSize (13px)
    • --lana-text-base--vscode-bodyFontSize-small (12px)
    • --lana-text-sm--vscode-bodyFontSize-xSmall (11px)
    • --lana-text-xs → 0.84 × base (10px)
    • --lana-text-caps + --lana-text-caps-tracking for section headers
  • One mono token--lana-font-monovar(--vscode-editor-font-family, monospace) — carries the only non-VS-Code-host fallback. Applied to the table name columns, group rows, tooltips and code blocks.
  • All-caps runs step one size down: caps reach cap height on every glyph, so at the same nominal size they read larger than the mixed-case text beside them.
  • Canvas text is untouched — a PIXI font string cannot read a CSS variable.

Notes

  • No behaviour change; sizes and families only.
  • The grid still sets its cell size from --vscode-editor-font-size, so a large editor font puts grid cells a step above the app base. Left as is — a separate decision.

Testing

  • tsc -b --force, eslint, jest (1771 tests / 131 suites) and the production build all pass.
  • Checked in a dark and a light theme, and with the editor font size changed.

Merged with main

main tokenised colour and space on many of the same declarations this branch tokenised size on, so
both sides are kept. --lana-text-md, added by that sweep, is gone: its one user (the timeline key)
now reads --lana-text-base, the registered 12px it approximated.

Both branches touched the same declarations: main tokenised colour and space,
this branch tokenised size. Resolutions keep both.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant