Skip to content

Typography & visual-language standardization + loading/new-project UX polish (#83)#91

Merged
thalida merged 37 commits into
mainfrom
feat/issue-83-typography
Jul 13, 2026
Merged

Typography & visual-language standardization + loading/new-project UX polish (#83)#91
thalida merged 37 commits into
mainfrom
feat/issue-83-typography

Conversation

@thalida

@thalida thalida commented Jul 13, 2026

Copy link
Copy Markdown
Owner

Closes #83.

Started as the typography audit/standardization in #83 and grew (by request) into a broader visual-language + UX polish pass. All changes are on this branch; lint + 2492 tests green throughout.

Typography system (the #83 core)

  • Size scale renamed so md = body = the middle step (2xs…2xl); one step per role, titles/body no longer collide.
  • Text-color roles downshifted so --cc-text-primary = body copy, with --cc-text-strong for emphasis; subtitles/subtext unified on secondary.
  • Line-height tokens (tight/base/relaxed); raw values snapped.
  • Casing: uppercase reserved for eyebrow labels via .text-label; hand-rolled labels routed through it.
  • Weights tokenized (no raw numerics); decorative italics dropped (content-semantic italics kept); Info-tab spacing snapped to --cc-space-*.
  • Links compose .link; inputs standardized; focus reuses the shared outline.

Visual polish

  • Accent selected-state softened + unified on --cc-accent-bg-soft (retired ad-hoc 6%/22% mixes); tree open-folder guide tinted with it.
  • One error red (aligned --cc-error-light hue to --cc-error).
  • Neutral Active status pill in recents; image preview padding; landing wash gradient softened.

Loading UX

  • Extracted a shared LoadingProgress component — the full step list now shows in both the cold-boot overlay and the Projects-page clone (was a bare spinner).
  • Branch shown as a pill beside the repo name (loading cards + recents rows).
  • Cancel in both surfaces, full-width; cold-boot cancel aborts and returns to the project list.

New-project form

  • Unified source field (no Repo URL / Local Path tabs) — one input classifies itself; a URL gets the branch dropdown, a path opens directly.
  • Local-aware: label, placeholder, and a standing "how to enable" notice reflect allowLocalRepos; the notice hides once the input is a URL.

Header

  • Copy-source button replaces the open-repo link — copies the URL (remote) or path (local), for both kinds.

Cleanup

  • Removed dead toHttpsRepoUrl / repoUrlForBranch (orphaned by the header change).

Deferred

  • Local-repo branch picker — needs backend (the /api/branches endpoint is remote-only by design); recommend a separate issue.

🤖 Generated with Claude Code

thalida and others added 29 commits July 12, 2026 16:28
@thalida
refactor(styles): rename font-size scale so md=body anchor (#83)
9433a81
@thalida
refactor(styles): downshift text-color roles so primary=body, add str…
76df4ca 
…ong (#83)
@thalida
refactor(styles): tokenize line-height (tight/base/relaxed) (#83)
73419ba
@thalida
refactor(styles): compose title/card/label roles onto the scale (#83)
10ffcb1
@thalida
refactor(styles): drop stale muted-label color comment (#83)
9154283 
The comment described .text-label--muted as dimmer than the default
secondary color, which was true before Task 2's rename. Default is now
primary and muted equals secondary literally, so the claim is stale.
@thalida
refactor(styles): tokenize weights and align title steps (#83)
fb2fc39
@thalida @claude
fix(styles): match legend-intro to almanac-blurb; restore markdown h …
392c2e8 
…ladder (#83)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida
refactor(styles): route uppercase labels through .text-label (#83)
af5c04d 
Convert the 5 reachable hand-rolled uppercase eyebrow labels
(LegendPane x2, OverviewPane x2, StreetPane) to compose .text-label
instead of duplicating font-size/font-weight/text-transform/
letter-spacing/color. .almanac-duo-dim keeps its per-section accent
color via a .almanac-duo-dim.text-label override (higher specificity
than .text-label alone, so it wins regardless of stylesheet order).

InfoPane.css's .info-markdown h5/h6 rule is left as-is: it styles
markdown-rendered headings injected via dangerouslySetInnerHTML, not
a TSX element we control, and is legitimate prose styling rather than
a component eyebrow label.
@thalida
refactor(styles): drop decorative italics + redundant sans (#83)
ad618ec 
Removes italic from two UI-chrome-only rules (loading placeholder,
almanac note) while keeping content-semantic italics (markdown em,
hljs comment/emphasis). Drops explicit font-family: sans on
.street-label and .code-editor-banner, both of which sit outside any
mono-font ancestor and already inherit sans from body.
@thalida
refactor(styles): unify subtext color + opacity->role for text (#83)
a66f1d0 
Convert static text-dimming opacity to color roles where the opacity
only dims text (CommitPane loading/error captions -> muted); left
opacity in place where it dims an animated dot, a whole disabled
control, or an entire interactive row (AppFooter pulse/heartbeat dots,
PaneHeader disabled icon button, RecentsList unavailable row).

Reclassify almanac-language-count to secondary to match its sibling
"+N more" chip summary, which was already secondary at the same
chip-caption role.
@thalida
refactor(styles): compose .link + shared focus outline (#83)
7cb9ca5
@thalida
refactor(styles): standardize input font + label/placeholder roles (#83)
7c3fa28
@thalida
refactor(styles): route button/tab padding onto spacing tokens (#83)
92bb7ad
@thalida
refactor(styles): snap Info-tab spacing literals to the scale (#83)
b80ddfe
@thalida @claude
refactor(styles): finalize brightness roles + loading-card hierarchy (#…
732105a 
…83)

- titles unified on --cc-text-strong; eyebrow labels dimmed to secondary
- pane header title sized to match the pane tabs (chrome, not a content title)
- debug hint promoted to body copy
- loading card: repo name is the header, status verb a quiet sub-line

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(styles): align --cc-error-light hue to --cc-error (#83)
a73f20b 
Error message text and the input error border now read as one red instead of two hues.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
refactor(styles): soften + unify the accent selected state (#83)
811a83d 
- all selected states (tree/rows/search/toggle/recents/activity-bar) now use
  --cc-accent-bg-soft; retire the ad-hoc 6% and 22% accent mixes
- tree open-folder guide tinted with the same accent selected fill
- Active recents badge restyled to a neutral white status pill (dot + label)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(styles): pad the image preview viewer (#83)
c1bdc8f 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
refactor(loading): extract shared LoadingProgress; show full steps in…
944e2bc 
… ProjectsView (#83)

The stepped progress list + spinner + repo-header column was duplicated between
LoadingOverlay (cold boot) and ProjectsView (in-app switches), and ProjectsView
only rendered a single status line. Extracted a shared <LoadingProgress> (one
definition of the phase->step state mapping) that both compose, so the Projects
page clone now shows the full step list too. Also decouples the loading status
line from the .text-card-title composite (its own .loading-status), fixing the
oversized status the .loading-card-scoped rule never reached.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(loading): full-width Cancel in both surfaces; cold-boot cancel r…
4755ecf 
…eturns to project list (#83)

- Cancel now lives in the shared LoadingProgress and shows in both the
  cold-boot overlay and the ProjectsView clone (full width across the column)
- overlay Cancel aborts the load AND opens the project list (cancelLoad only
  aborts; the overlay otherwise left a blank screen)
- checklist centers as a block (rows still left-aligned)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(styles): advanced disclosure brightens on hover to match buttons (#…
be6a8ac 
…83)

Was accent-light -> accent (darkened on hover); now accent -> accent-light,
matching .btn-primary and the text buttons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(new-project): unify source input, drop URL/Path tabs (#83)
961c5b9 
One field takes either a git URL or a local path and classifies itself
(srcKind) — no more Repo URL / Local Path tabs, which let a full URL sit in the
Local tab with no validation. A URL gets the branch dropdown; a local path opens
directly; a clearly-local path typed while local repos are off shows an inline
'Local paths aren't enabled' error (looksLikePath gates it so a half-typed URL
never flickers). Rewrote the tab-era form tests for the unified field.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(branch): show branch beside the repo name on loading cards + rec…
7a60f96 
…ents (#83)

- loading card (both surfaces): branch renders as a pill next to the repo
  header instead of buried in the status line; ProjectsView now passes scan.branch
- recents rows: branch pill moved up from the URL sub-line to the title line

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(new-project): placeholder reflects URL-or-path (path example onl…
04d4672 
…y when local is on) (#83)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(new-project): field reflects local-enabled state (label, placeho…
3029883 
…lder, standing notice) (#83)

- label: 'Repo URL or local path' when local repos are on, 'Repo URL' when off
- placeholder: shows a path example only when local is on
- when local is off, a standing 'Local paths aren't enabled / How to enable'
  notice sits below the input (not just on typing a path); a typed path still
  blocks submit without the contradictory 'enter a git URL' nudge

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(new-project): hide the local-paths notice once the input is a URL (
8e66c03 
#83)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
feat(header): copy-repo-source button replaces the open-repo link (#83)
0428696 
The header external-link button (opened the git repo in a new tab, and showed
nothing for local sources) is now a CopyButton that copies the raw source — the
git URL for a remote, the path for a local — so both kinds get a one-click copy.
SourceInfo gains a raw `src` field. RepoLink deleted.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
chore(sources): remove orphaned toHttpsRepoUrl + repoUrlForBranch (#83)
2f2cff0 
Dead since the header open-repo link became a copy-source button — no production
callers, test-only. Removed both helpers and their tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
style(landing): soften the holographic wash gradient falloff (#83)
698ee6d 
Enlarge the two gem glows and add a low mid-stop so they ease out over a longer
tail instead of hard-stopping at 70%.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida thalida linked an issue Jul 13, 2026 that may be closed by this pull request
Audit and standardize typography (colors, sizes, casing) #83
Closed
@thalida @claude
fix(new-project): keep the entered source in the field after a failed…
4217b72 
… load (#83)

The form unmounts during loading and remounts on failure; if it remounted
before App's SOURCE_ERROR effect updated the prefill, useState initialized empty
and the later prefill update was ignored. Key the form on prefill.src so it
remounts cleanly with the attempted value restored.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida thalida mentioned this pull request Jul 13, 2026
Open
thalida and others added 7 commits July 12, 2026 20:14
@thalida @claude
fix(new-project): placeholder shows an absolute path, not ~ (not expa…
834cb6d 
…nded) (#83)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(new-project): make the path placeholder explicitly /absolute/path…
c6ee8ac 
…/to/repo (#83)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(recents): active row uses the resolved branch, so a local repo sh…
61c0aa9 
…ows Active (#83)

Active detection compared CURRENT_SOURCE's raw submitted branch (undefined for
a local repo) against the recent's resolved branch (the local HEAD), so a loaded
local project never matched. Compare against SOURCE_INFO instead — it resolves the
branch the same way pushRecent does.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(recents): unavailable local recents are non-clickable, not a flas…
963d342 
…hing load (#83)

A local recent while local repos are off can't load; clicking it briefly
flashed the loading/error state. It's now aria-disabled (no onOpen), cursor
not-allowed, with the title explaining why. Only its remove control acts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(api): terse local-disabled error (UI carries the how-to) (#83)
a240c61 
Was a verbose message (with an em-dash) that duplicated the form's standing
'how to enable' notice. Reduced to 'local repositories are disabled'.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
fix(recents): unavailable local recents non-clickable, keep the folde…
59dc8fa 
…r icon (#83)

A local recent while local repos are off can't load; clicking it briefly flashed
the loading/error state. Now dimmed + aria-disabled (no onOpen), cursor not-allowed,
with the title explaining why (only remove acts). Keep the standard folder icon
instead of swapping to a warning triangle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida @claude
style(landing): full-page selector uses a solid bg + blobs, no blur (#83
49e4c67 
)

Blur only makes sense in modal mode (over a loaded city). Non-dismissible
full-page mode (cold boot / nothing behind) now uses a solid --cc-bg-app surface
with the gem wash, gated on a .landing--modal class keyed on dismissible.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@thalida thalida merged commit 43754d8 into main Jul 13, 2026
1 check failed
@thalida thalida deleted the feat/issue-83-typography branch July 13, 2026 01:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Audit and standardize typography (colors, sizes, casing)

1 participant

@thalida