Web UI: dual-theme design system + new shell chrome - #237
Closed
srikanth-bitdynamics wants to merge 1 commit into
Closed
Web UI: dual-theme design system + new shell chrome#237srikanth-bitdynamics wants to merge 1 commit into
srikanth-bitdynamics wants to merge 1 commit into
Conversation
Restyle the Web UI to the provided design and add a light theme
alongside the existing dark one, without changing the app's flow or
information architecture.
Theming
- index.css now defines the full token ramp as CSS variables with a
dark default (:root) and a light override (:root[data-theme]). The
W.* tokens in tokens.ts resolve through those variables, so every
screen that already used W.* themes for both palettes with no
per-screen color edit — one architecture change instead of touching
19 screens by hand.
- theme.ts owns the active theme: written to data-theme on <html>,
persisted to localStorage, applied before first paint (no flash).
useTheme() drives the topbar toggle.
- The 55 `${W.x}NN` hex-alpha concatenations that would become invalid
once W.x is a variable (var(--accent)1A is not a color) are replaced
with a tint() helper backed by color-mix. The handful of hardcoded
hexes that actually break in light mode — dark text meant to sit on
the cobalt fill, dark switch-track backgrounds — move to W.onAccent /
W.borderHi so they flip; the dataviz mid-tones (teal/amber/green
series colors) stay fixed since they read on either background.
Shell chrome
- Topbar: page title, an instance-switcher pill with a status dot and
wide-caps label, a Commands button that opens the ⌘K palette, a
Connected health pill, the light/dark toggle, and a Docs link.
- Sidebar: a LocalNet group label, icon + label nav (one stroke glyph
per route), and a pinned footer showing loopback-only and the live
schema version.
- CommandPalette gains an openPalette() event hook so the topbar
button can open it while the component keeps ownership of its state.
Verified: tsc clean, 218/218 frontend tests, Go UI suite, make lint
0 issues, and both themes reviewed live against a running LocalNet
(Overview, Explorer, DAR, Agent Skills) — the toggle flips the entire
app.
Collaborator
Author
|
Superseded by #241, which carries this dual-theme + shell-chrome work rebased onto current main, plus the Carbon Slate palette, the console design polish, and the token-demo V1 fix — all in one branch. Closing in favour of that PR. |
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.
Restyles the Web UI to the provided mockup and adds a light theme alongside the existing dark one, keeping the app's flow and information architecture unchanged.
Theming
index.cssnow defines the full token ramp as CSS variables with a dark default (:root) and a light override (:root[data-theme="light"]). TheW.*tokens intokens.tsresolve through those variables, so every screen that already usedW.*themes for both palettes with no per-screen color edit — one architecture change instead of touching 19 screens by hand.theme.tsowns the active theme: written todata-themeon<html>, persisted tolocalStorage, applied before first paint (no flash).useTheme()drives the topbar toggle.${W.x}NNhex-alpha concatenations that would become invalid onceW.xis a variable (var(--accent)1Ais not a color) are replaced with atint()helper backed bycolor-mix. The few hardcoded hexes that actually break in light mode — dark text meant to sit on the cobalt fill, dark switch-track backgrounds — move toW.onAccent/W.borderHiso they flip; the dataviz mid-tones (teal/amber/green series colors) stay fixed since they read on either background.Shell chrome
LocalNetgroup label, icon + label nav (one stroke glyph per route), and a pinned footer showing loopback-only and the live schema version.CommandPalettegains anopenPalette()event hook so the topbar button can open it while the component keeps ownership of its state.Scope
Design-only: the existing Overview and every screen's flow are restyled, not re-architected. The mockup's denser consolidated Overview (JWT generator / app-config tabs on the Overview page) was intentionally not adopted, since that would change the flow.
Verification
tscclean, 218/218 frontend tests, Go UI suite,make lint0 issuesNote: the exact accent/neutral color pairings are being revisited in follow-up work; this PR lands the dual-theme architecture and shell, which that tuning builds on.