Publisher UI refresh — Foundation (design tokens)#274
Draft
Hackshaven wants to merge 3 commits into
Draft
Conversation
…the UI refresh The publisher redesign wireframes specify a flat, dark, sans-chrome / mono-data console. Colors, radii, and the accent-opacity ramp already exist as tokens and match the wireframe; the font-family, type-scale, and spacing scales were only ever inline fallbacks. Formalize them in the hand-maintained composite block of the token generator so the restyle PRs can reference var(--font-mono), var(--text-md), var(--space-lg), etc. consistently: - --font-sans / --font-mono (system stacks, zero web-font fetch) - --text-2xs … --text-3xl (dense, rem-based, base 0.75rem) - --space-2xs … --space-2xl + --space-edge (dense, rem-based) Additive: the only prior consumer, var(--font-mono, monospace), now resolves to the real stack instead of the bare fallback. tokens.css is regenerated on build (npm run tokens). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E Signed-off-by: Claude <noreply@anthropic.com>
Replace the horizontal glass topbar with the wireframe's left-rail
sidebar: a 212px flat rail down the inline-start edge with the brand +
back-to-Terraviz, section links clustered into labelled groups
(Catalog / Current events / Insights / Settings) with mono uppercase
eyebrows, and an account footer (Profile + Sign out) pinned to the
block-end. Active links carry an accent inline-start border + tint.
- components/sidebar.ts replaces components/topbar.ts (same router
wiring, SPA-intercept, aria-current, route-change listener; grouped
nav + admin-gated visibility + account footer). teardownSidebar for
tests. 18 unit tests port + extend the topbar suite.
- index.ts boots renderSidebar; .publisher-portal becomes a two-column
flex shell (rail + scrollable content column).
- publisher.css: flat rail surfaces (--color-surface-alt + subtle
border, no glass), grouped nav, sans chrome / mono group eyebrows,
and a mobile fallback that stacks the rail into a horizontal
top strip.
- i18n: publisher.nav.group.{catalog,events,insights,settings}.
- scenes/smoke: shell selector .publisher-topbar -> .publisher-sidebar.
- CLAUDE.md module-map row updated.
Colors/type/spacing all reference the design tokens formalized in the
prior commit. tsc + 477 publisher tests + doc-coverage + locales green.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E
Signed-off-by: Claude <noreply@anthropic.com>
The redesign removes frosted glass everywhere. Redefine the shared .publisher-glass hook to a flat white-alpha surface (--color-surface-alt + subtle border, --radius-2xl) instead of a backdrop-filter blur, so all ~30 call sites flatten at once with no churn. Completes the Foundation PR's no-glass discipline (the Events tab already flattened in #241; the sidebar shell landed flat in the prior commit). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E Signed-off-by: Claude <noreply@anthropic.com>
Contributor
🖼️ Visual report66 shot(s) · 2 viewport(s) (desktop, mobile) · 6 with problems · 12 problem(s) total Regression: 45 shot(s) changed, 0 new (baseline-less, soft pass), threshold 0.001.
Shots with problems
Full report → Advisory — this check never fails the build. Visual review only. |
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.
Publisher UI refresh — Phase 3e, Foundation PR
Kicks off the wireframe-driven publisher-portal redesign. Opened early as a draft so the visual direction can be reviewed as commits land, before it propagates to the other portal pages.
Source of truth: the Claude Design board covering all 17 portal surfaces (Overview, Datasets, Dataset editor/Licensing, Workflows, Import, Events, Feeds — News/Media, Tours, Blog, Right now, Analytics, Feedback, Account, Team, Node profile).
What the wireframes specify
A flat, dark, sans-chrome / mono-data console:
#0d0d12, accent#4da6ffwith a full opacity ramp0.04→0.15), subtle borders — no glassScope of this PR (the shared foundation)
The colors, radii, and accent-opacity ramp already existed as tokens and already matched the wireframe (the Events-tab redesign was effectively the pilot). This PR fills the gaps and lays down the shell every page inherits:
--font-sans/--font-mono(system stacks, zero web-font fetch), the dense--text-2xs … --text-3xltype scale, and--space-2xs … --space-2xl+--space-edgespacing. Formalized in the token generator;tokens.cssregenerates on build.components/sidebar.tsreplaces the horizontaltopbar.ts. A 212px flat rail: brand + back-to-Terraviz, section links clustered into labelled groups (Catalog / Current events / Insights / Settings) with mono uppercase eyebrows, active links carrying an accent inline-start border + tint, and an account footer (Profile + Sign out)..publisher-portalbecomes a two-column flex shell; a mobile fallback stacks the rail into a horizontal top strip..publisher-glasshook is redefined to a flat white-alpha surface (nobackdrop-filter), so all ~30 card call sites flatten at once.Verification
tsc --noEmit(root + functions + cli) clean; 477 publisher unit tests + the new 18-testsidebar.test.tsgreen;check:i18n-strings,check:doc-coverage,check:localespass. (check:protocol-schemasneeds a dev dep absent from the local sandbox; unaffected by this change and runs in CI.)Sequencing (next)
This is the shared base. The remaining 16 pages follow in grouped restyle PRs — Datasets/Editor/Import · Events*/Feeds/Tours/Blog/Right-now · Analytics/Feedback · Account/Team/Node-profile — each screenshot-reviewed against its frame. (*Events already flattened in #241.)
🤖 Generated with Claude Code
https://claude.ai/code/session_0127MmwB678BaV8Pfg1KG18E