Align browser extension side panel with kilo-design - #4767
Merged
Conversation
Wire Inter/Roboto Mono variable fonts via fontsource, define the kilo-design token set as a static @theme layer with type-* text-style utilities, add a JS token mirror for SVG consumers, and refresh the extension icon from old yellow (#EDFF00) to brand primary (#F7F586).
Apply the plan's brand matrix to the app shell: canvas/chrome surface ladder, brand logo, filled-secondary icon buttons, auth card/OTP wells, status-yellow warning banner, and the global brand focus-ring recipe.
Apply the message-surface recipes: user bubble on raised, agent on canvas, thinking/tool wells on inset, error chrome on delete-surface with status-red text maps, Send/Stop same-slot primary/secondary switch, donut status strokes from the JS token mirror, and re-measured virtualizer estimates (history 105, transcript 46).
…tokens Apply the unified neutral-controls rule, dense input recipes, status domains for mode icons and inline errors, card ladder roles, and retire disabled:opacity in favor of the subtle-foreground disabled recipe.
Add a Vitest drift guard banning default palette families, raw hex/rgb, arbitrary text sizes and tracking from sidepanel sources, asserting the icon.svg brand contract and DESIGN_TOKENS/style.css sync. Add Playwright computed-style cases A-E pinning shell, composer, transcript, donut, and eyebrow token paints. Firefox computed-style parity documented as Chrome-only.
Step the donut track down to surface.background so it reads as a recessed groove on the filled-secondary overlay button, and compare parsed RGB channels in the Case E old-paint scan so serialization form cannot mask legacy paint.
…design tokens Bring the upstream memory settings, pending-memory-save card, and collapsible code block onto the token recipes: card ladder roles, filled-secondary/primary/ghost control variants, inputs recipe, status inline errors, token gradient fade, and the global focus ring.
The integrated safe-mode surface exposes search_memories/get_memory; align the new computed-style fixtures with the upstream tool list.
Map the PostHog opt-out card onto the card ladder role and the toggle onto neutral surface/foreground states with the global focus ring, retiring the brand fills and disabled opacity.
Measured collapsed heights (42-46) destabilized the scroll-pin E2E on the CI browser (wheel-up poll timeouts). The estimate is only the initial guess for unmeasured rows and measureElement reconciles actual heights, so the pre-existing value stays with a recorded deviation.
jeanduplessis
approved these changes
Jul 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Align browser extension side panel with kilo-design
Full visual + voice alignment of
apps/extensionwith the canonical Kilo design system (DESIGN.md/ tokens.json v0.2.0, dark-only per kilo-design ADR 0009). No behavior changes; existing E2E suites are the regression bar and stay green.What changed
Token layer (new)
@theme statictoken set instyle.cssmirroring the contract: 6-step surface ladder, foreground roles, pre-alpha borders, brand (#F7F586), 8 status families × 4 steps, syntax, diff, radius remap (md 8px / lg 10px / xl 14px), Inter + Roboto Mono via fontsource (no remote font loads, MV3-safe).type-*text-style utilities (type-title…type-code) copied verbatim fromapps/webwith extension font vars.design-tokens.ts: tiny JS mirror for SVG consumers (donut strokes/track), kept in sync by the new drift guard.#EDFF00to brand#F7F586(SVG + all five PNGs regenerated).Component alignment
ring-brand-primary-ring+ring-offset-surface-background), disabled recipe withoutopacity-*, contract button typography (type-label).text-[10/11px]eliminated (12px is the smallest role;type-eyebrowthe only sanctioned 11px); mono for code/timestamps.Verification tooling (new)
DESIGN_TOKENS↔style.csssync; includes a plant-and-catch self-check.design-tokens.test.ts, 7 cases): shell/footer paints, Send enabled/disabled/Stop, transcript recipes (bubble, mono, error/success wells, thinking, standalone error, agent canvas), donut warn stroke + track/button distinction, historyOpeneyebrow chip + old-paint scan. Firefox computed-style parity documented Chrome-only (font-stack serialization risk).Verification
pnpm --filter kilo-extension verify— 337 unit tests pass (incl. drift guard)pnpm --filter kilo-extension build/build:firefox— pass; bundled@font-face+ 13.woff2assets verified in.outputpnpm --filter kilo-extension e2e:chrome— 70/70 passpnpm --filter kilo-extension e2e:firefox— 32/32 workflows passRecorded deviations
@theme static(not plain, notinline): plain@themetree-shakes unused variables;staticemits the full token layer.estimateSizestays at the pre-existing 52: the measured collapsed band (42–46) destabilized the scroll-pin E2E on the CI browser (wheel-up poll timeouts at 44/46/48); the estimate only seeds unmeasured rows andmeasureElementreconciles real heights regardless. HistoryestimateSize: 105(measured, green everywhere).size-6(asize-8close fills the wholeh-8pill).type-heading(18px); OTP code display keepstracking-[0.18em](guard allow-listed).surface.background(recessed groove on the filled-secondary overlay button — reviewer-found, repaired with a Case D lock).Known observation (pre-existing, not from this PR)
When the "Add to memory" card is open above the composer,
Save memory/Done/Retry(brand primary) co-exist withSend message(brand primary) — two primary fills on one surface, which sits against the contract's one-primary-per-surface rule. That role assignment came in with the upstream memory feature; this PR only tokenized it. Happy to file a follow-up if product wants the card's actions demoted to secondary.