Skip to content

fix(log-viewer): follow the colour theme everywhere - #896

Open
lukecotter wants to merge 2 commits into
certinia:mainfrom
lukecotter:feat-appearance-tokens
Open

fix(log-viewer): follow the colour theme everywhere#896
lukecotter wants to merge 2 commits into
certinia:mainfrom
lukecotter:feat-appearance-tokens

Conversation

@lukecotter

Copy link
Copy Markdown
Collaborator

Splits the first slice out of #894.

Every colour, radius, space, shadow and border width in the webview was a literal. Four surfaces were literal and dark-only, so no colour theme could reach them: the Timeline error card (a light card in a dark editor), the loading skeleton, the progress bar, and the grid's sort arrows and error text.

What this does

  • Adds log-viewer/src/styles/tokens.css — a --lana-* semantic layer, imported from Main.ts and injected into document.head, so the tokens inherit through every shadow boundary. Each one is var(--vscode-…, <literal fallback>); the fallback is the seam a standalone (non-webview) host overrides with a single stylesheet.
  • Replaces the literals across the lit components, the timeline styles and the grid styles. No visual change in a webview.
  • Points the four unreachable surfaces at host colours: --vscode-inputValidation-error*, --vscode-editorWidget-background, --vscode-progressBar-background, --vscode-icon-foreground / --vscode-errorForeground.
  • Removes components/panelTokens.ts, which the token layer replaces.
  • Records the no-hardcoded-values rule in .claude/rules/log-viewer.md, with the data-palette exception (the timeline category palettes and the metric-strip tiers encode meaning, not chrome).

Verification

tsc -b, eslint lana log-viewer and the full jest run (1264 tests) are clean. Checked in a light and a dark theme, and on stable VS Code, where --vscode-surface-* is absent — every token still resolves to a host colour through its var() chain rather than a literal.

Follow-ups

Two sibling PRs carry the rest of #894: live settings push, and live re-theming of the canvas timeline. A fourth (modern/cards chrome) follows once this and the settings PR merge.

Add a --lana-* semantic token layer in styles/tokens.css, injected into
the document so the tokens inherit into every shadow root. Each token is
var(--vscode-…, <literal fallback>); the fallback is the seam a
standalone host overrides.

Replace the hardcoded literals in the lit components, the timeline
styles and the grid styles with the tokens, and point four surfaces no
colour theme could reach at host colours: the timeline error card, the
loading skeleton, the progress bar, and the grid sort arrows and error
text. Removes components/panelTokens.ts, which the token layer replaces.
The two skeleton components each repeated the radius on .skeleton-text, which overrode the token on .skeleton. Also routes the dock action bar's hairline through --lana-panel-divider, drops the unused --lana-radius-lg, and states that older literals are converted as they are touched.
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