feat(ui): adopt the Compass design-system token base on the app shell - #220
Open
seal-agent wants to merge 1 commit into
Open
feat(ui): adopt the Compass design-system token base on the app shell#220seal-agent wants to merge 1 commit into
seal-agent wants to merge 1 commit into
Conversation
Wires the merged design-system token base (`apps/ui/src/design/tokens.css` + `base.css`, authored by the compass-ux DS foundation lane) into the app's CSS load path, sets the Night Owl theme as the root default, and flips the structural app-shell chrome from the legacy GitHub-dark custom properties to the frozen `--cx-*` semantic tier. This is the adoption half of the T9 strangler step (SEA-1819 bullets 1-2); the ungated focus-ring fix (bullet 3) already shipped in #203. ### What changed - **`App.tsx`** — the single `import "./app.css"` becomes a three-import cascade, `tokens.css` → `base.css` → `app.css`. Order is load-bearing: tokens defines the `--cx-*` / `--rigel-*` vars, base lays the global reset/type/scrollbar/`:focus-visible` layer, and legacy `app.css` loads last so on any same-specificity conflict the legacy rule still wins — the strangler stays additive, no big-bang restyle. - **`index.html`** — `<html>` gains `data-theme="night"`. The `--cx-*` color tier is scoped under `[data-theme="night"]` in `tokens.css`, so without this attribute the color tokens resolve to nothing. This is the frozen D2 dark-primary default made real. - **`app.css`** — 60 structural-chrome `var()` references across the four named shell regions (topbar + view-tabs, left sidebar tree, right sidebar shell, usage bar) flipped from legacy vars to their `--cx-*` targets: surfaces (`--bg*` → `--cx-bg*`, the absent 4th `card` tier collapsing to `--cx-bg-panel`), lines (`--border*` → `--cx-border*`), text (`--text*` → `--cx-text*`), interaction accent (`--accent` → `--cx-accent`), the usage-meter hot fill (`--warn` → `--cx-warn`), and the active-nav border (`--accent-dim`, which has no direct `--cx-*` equivalent, → `--cx-accent-muted`). Every target name was verified against the merged `tokens.css`. ### Scope — structural chrome only (strangler boundary) Four shell references are deliberately left on legacy vars and deferred to a component-tier follow-up, because each carries a component or design decision rather than a clean surface mapping: the agent `.state-dot` set (a D3 component, `StateDot.tsx`), the `.daemon` status dot (semantic tier ambiguous — infra liveness, not an agent state), the warden `.role-pip` (`--purple`, which D2's one-accent rule bans from the `--cx-*` tier — a genuine design question), and the global scrollbar-thumb hover (a raw hex with no named token). The legacy `:root` token definitions stay in place; content, board, composer, and settings rules are untouched. ### Verification - `bunx tsc --noEmit` clean; `bunx vite build` succeeds (the new imports and the `@import`-free chain resolve, CSS bundles without error). - `bun test --conditions browser`: full suite green in the colocated clone (env-secrecy's git-shelling tests require a `.git` dir, which a jj-added workspace lacks — they pass here). - CSS-only surface change: no test asserts computed colors, so behavior is unchanged; the visible effect is the shell rendering in the Night Owl palette. Spec-impact: none. Refs SEA-1819 Co-authored-by: Matt Wilkinson <matt@sealedsecurity.com>
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
1 participant
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.
Wires the merged design-system token base (
apps/ui/src/design/tokens.css+base.css, authored by the compass-ux DS foundation lane) into the app's CSS load path, sets the Night Owl theme as the root default, and flips the structural app-shell chrome from the legacy GitHub-dark custom properties to the frozen--cx-*semantic tier. This is the adoption half of the T9 strangler step (SEA-1819 bullets 1-2); the ungated focus-ring fix (bullet 3) already shipped in #203.What changed
App.tsx— the singleimport "./app.css"becomes a three-import cascade,tokens.cssthenbase.cssthenapp.css. Order is load-bearing: tokens defines the--cx-*/--rigel-*vars, base lays the global reset/type/scrollbar/:focus-visiblelayer, and legacyapp.cssloads last so on any same-specificity conflict the legacy rule still wins — the strangler stays additive, no big-bang restyle.index.html—<html>gainsdata-theme="night". The--cx-*color tier is scoped under[data-theme="night"]intokens.css, so without this attribute the color tokens resolve to nothing. This is the frozen D2 dark-primary default made real.app.css— 60 structural-chromevar()references across the four named shell regions (topbar + view-tabs, left sidebar tree, right sidebar shell, usage bar) flipped from legacy vars to their--cx-*targets: surfaces (--bg*to--cx-bg*, the absent 4thcardtier collapsing to--cx-bg-panel), lines (--border*to--cx-border*), text (--text*to--cx-text*), interaction accent (--accentto--cx-accent), the usage-meter hot fill (--warnto--cx-warn), and the active-nav border (--accent-dim, which has no direct--cx-*equivalent, to--cx-accent-muted). Every target name was verified against the mergedtokens.css.Scope — structural chrome only (strangler boundary)
Four shell references are deliberately left on legacy vars and deferred to a component-tier follow-up, because each carries a component or design decision rather than a clean surface mapping: the agent
.state-dotset (a D3 component,StateDot.tsx), the.daemonstatus dot (semantic tier ambiguous — infra liveness, not an agent state), the warden.role-pip(--purple, which D2's one-accent rule bans from the--cx-*tier — a genuine design question), and the global scrollbar-thumb hover (a raw hex with no named token). The legacy:roottoken definitions stay in place; content, board, composer, and settings rules are untouched.Verification
bunx tsc --noEmitclean;bunx vite buildsucceeds (the new imports and the@import-free chain resolve, CSS bundles without error).bun test --conditions browser: full suite green in the colocated clone (env-secrecy's git-shelling tests require a.gitdir, which a jj-added workspace lacks — they pass here). 723 pass / 0 fail across 43 files.Spec-impact: none. Refs SEA-1819
Co-authored-by: Matt Wilkinson matt@sealedsecurity.com
Review
Sole adversarial review: floor CLEAN — 0 high, 0 medium, 3 low. No hard block. The reviewer independently verified the two highest-risk failure modes of a token migration: every consumed
--cx-*token is defined in the mergedtokens.css(no flip resolves to no-value), and the strangler invariant holds concretely (app.cssdeclares zero--cx-*— read-only consumption — and legacyapp.csswins every same-specificity conflict). The 3 low findings are design/component judgment calls, routed to the follow-up rather than auto-fixed (token choice is a design call).Open Questions (parked for Matt — none block this PR)
This PR is deliberately structural-chrome only. The following are deferred to SEA-1876 (component-tier + canvas adoption), which carries the full detail:
.role-pip[data-role="warden"]staysvar(--purple). D2's one-accent rule bans purple from--cx-*, so no mechanical flip exists — this is a genuine design fork needing a Matt ruling (blue / neutral / carve-out / drop). Left legacy until ruled.--accent-dimto--cx-accent-muted(a 24%-alpha wash) as a stated assumption. Reviewer's fidelity-preserving alternative is--cx-border-focus(solid blue). Reversible token-choice decision.--warn/--add) and state-dot (--st-*) — left legacy as component-tier / tier-ambiguous refs (a small within-shell amber divergence results, a documented deferral).app.css's legacybody/scrollbar globals still shadowbase.css's--cx-*versions, so the base canvas stays GitHub-dark under the Night-Owl chrome. Strangler-by-design; migrating it (and retiring the#45505fscrollbar-hover hex) is the next strangler step in SEA-1876.Refs SEA-1819. Follow-up: SEA-1876.