feat(ui,web): consume the design system everywhere + brand distinctiveness pass#127
Merged
Zach Dunn (zachdunn) merged 5 commits intoJul 13, 2026
Merged
Conversation
- BaseHead.astro: shared head baseline importing @uploads/ui/styles.css
with font preloads and the shared favicon
- Brand.astro: mirror Brand.tsx (ul-brand classes, var(--panel) mark fill,
href/size/label props) instead of a drifted fork
- one font pipeline: drop @fontsource-variable/geist{,-mono} and the
duplicate checked-in Geist Pixel binary; all three woff2s now ship
from packages/ui/fonts via @uploads/ui/styles.css
- @uploads/ui: export ./fonts/* for preload URLs
Replace 11 hand-copied :root token blocks and per-page favicon/meta boilerplate with the shared BaseHead component. Canonicalize renamed tokens (--ok/--green-ok to --green, --danger to --red, --purple to --accent, --bezel to --line, --cyan to --body, --purple-dim to --muted) and swap radius literals matching DS tokens to var(--radius-*). Intended visual fixes riding along: auth + admin surfaces now actually load Geist Mono Variable (was declared but never loaded), and the public gallery pages get the brand font stacks back.
- live regions: console #out, admin .invite-status, copy buttons - Callout: role=alert for error tone; Field: real label association - sr-only h1 on console/account/admin/gallery item; sect-head p to h2 - panel switcher moves focus to shown panel heading - docs TOC breakpoint 1200 to 1240px (calc went negative below 1220) - landing header wraps; star count hidden under 420px - touch targets: ul-btn--sm, login submit, sidebar nav padding bumps - muted token #7d7d77 to #8a8a83 (4.5:1 to ~5.5:1 on panel) - reduced-motion fallback for file spinner; aria-hidden on decorative icons; aria-current on active breadcrumb - account file browsers mount via IntersectionObserver
…ent, ELSH morph - Callout: replace the left-stripe status block with the uploads CLI's own output grammar — a tone-colored '>>' marker, mono text, hairline border with a faint tone tint. Tone works via modifier class or data-state so the plain-HTML auth pages share the exact DS treatment; the five pages' hand-rolled .status CSS is deleted in favor of ul-callout classes - accent evolves #b794ff -> #c27eff (more chroma, still 7.3:1 on bg); all fallback literals and the favicon updated - Brand wordmark morphs along Geist Pixel's ELSH axis on hover/focus (Square 1 -> Circle 20), gated on prefers-reduced-motion - Divider gains a chevron variant; GalleryTile's empty thumb shows the faint stacked-chevron mark instead of a bare gray box - Surface body face is now mono by intent (CLI-first identity) - persist impeccable overused-font ignores for Geist/Geist Mono with the recorded rationale
|
Important Review skippedAuto reviews are limited based on label configuration. 🏷️ Required labels (at least one) (2)
🚫 Excluded labels (none allowed) (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
uploads-api | c21fddf | Commit Preview URL Branch Preview URL |
Jul 13 2026, 03:27 PM |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
uploads-auth | c21fddf | Commit Preview URL Branch Preview URL |
Jul 13 2026, 03:27 PM |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
uploads-web | 2a760e2 | Commit Preview URL Branch Preview URL |
Jul 13 2026, 03:35 PM |
Port the branch's work onto the #125/#126 restructure: - AccountLayout/AdminLayout adopt BaseHead (DS tokens/fonts/favicon); SITE_FAVICON removed from signed-in-page.ts - signed-in-shell.css drops its :root copy and the side-stripe .status; session-gate blocks render as ul-callout (data-state=error for denied) and each shell gets an sr-only h1 - workspaces.astro: file browsers mount via IntersectionObserver; invite copy buttons announce via aria-live - account-shell.ts taken from main wholesale (hash-panel focus fix is obsolete under path-based navigation)
This was referenced Jul 13, 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
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.
Follow-up to #121, executing the brand-distinctiveness handoff
(
.context/2026-07-13-uploads-brand-distinctiveness-handoff.md). An/impeccable audit(three parallel auditors; full report + plan in
.context/2026-07-13-impeccable-audit-and-agent-plan.md) scored the tree 10/20, with oneroot cause behind most findings: the design system existed but 13 of 14 pages didn't
consume it. This PR fixes the architecture, the audit's a11y/responsive findings, and
ships the first distinctiveness pass with the agreed direction (mono-first, evolve the
purple, no left stripes).
What changed
1. One design-system pipeline (was: 11 hand-copied
:rootblocks)BaseHead.astrogives every page the@uploads/uistylesheet, favicon, and fontpreloads; all inline token blocks and renamed aliases (
--ok,--danger,--purple,--bezel,--cyan,--purple-dim) are gone.@fontsource-variable/geist{,-mono}and a duplicatechecked-in Geist Pixel binary (the build shipped byte-identical woff2s twice). Auth +
admin pages now actually load Geist Mono (they declared it but never loaded it);
public gallery pages get the brand fonts back.
Brand.astronow mirrorsBrand.tsx(ul-brandclasses) instead of a drifted forkwith a hardcoded mark fill.
2. A11y + responsive fixes (audit P1/P2s)
#out, admin invite status, all copy buttons;Calloutusesrole="alert"for errors;Fieldrenders a real associated<label>.<h1>on console/account/admin/gallery item; landing section headsare real
<h2>s; panel switcher moves focus.touch-target bumps;
--mutedlifted to#8a8a83(~5.5:1 on panel); reduced-motionfallback for the file spinner; account file browsers mount lazily.
3. Distinctiveness pass (per the handoff levers)
tell, hand-copied on 5 pages) is replaced by the product's own output grammar: a
tone-colored
>>marker, mono text, hairline border + faint tint. Works via modifierclass or
data-state, so the plain-HTML auth pages share the exact DS treatment.#b794ff→#c27eff(more chroma, still 7.3:1 on bg).Geist Pixel's ELSH axis animates Square→Circle onhover/focus, gated on
prefers-reduced-motion.Dividerchevron variant;GalleryTileempty thumbs showthe faint stacked-chevron mark.
.ul-surfacebody face is mono by intent (CLI-first identity); impeccableoverused-fontignores persisted for Geist/Geist Mono with the recorded rationale.Screenshots
Verification
pnpm --filter @uploads/ui typecheck,astro check(0 errors),@uploads/webvitest 4 files / 24 tests green, full
astro buildgreen.zero console errors, callout tones render via both class and
data-state, mobileheader wraps at 375px.
side-tabfindings remain (was the flaggedtell); remaining warnings are the persisted font decision and prose-style nits.
Not in this PR
.ds-syncharness isephemeral and needs regeneration; spun off as a follow-up task.
invite.astrostill uses a system-mono body stack by design of this pass (neverreferenced the brand tokens); candidate for the next mono-first sweep.