design-system-v1: token foundation + main-screen overhaul#174
Merged
Conversation
…er + Fontsource - Tailwind v4 @theme inline aliases bound to :root CSS vars; light theme via [data-theme="light"] - Self-hosted variable fonts via @fontsource-variable/{fraunces,inter,jetbrains-mono} - @phosphor-icons/react added (consumed in later tasks) - ThemeProvider context — dark/light/system, prefers-color-scheme aware, localStorage-persisted (NOT Zustand persist mw — different state category; preserves Batch H rule) - Existing components unchanged; they still render via built-in Tailwind colors not affected by @theme
- App.tsx mounts ThemeToggle in topbar; removes legacy bg-gray-900/text-gray-100 classes; adds <main> slot - ThemeToggle: 3-state cycle (dark → light → system) via Phosphor MoonIcon/SunIcon/MonitorIcon - aria-label encodes current mode + next action for screen readers
- StatusBar: bg-card / border-border / text-muted-foreground; Backup button uses bg-secondary + design-token focus ring - NotificationStack: toasts use bg-popover + shadow-e2; error variant uses bg-destructive/10; container moved to top-4 right-4 with pointer-events isolation - No logic changed — className-only refactor
…Bar + ViewModeToggle) - ScanButton: bg-primary capsule with DownloadSimpleIcon; preserves existing dialog + scanMutation flow - SearchBar: bg-input capsule with MagnifyingGlassIcon prefix; debounce/MIN_QUERY_LEN logic untouched - ViewModeToggle: bg-secondary segmented with GridFourIcon/ListIcon; active state via bg-accent
A11y gap surfaced in T4 review — segmented buttons inside the bg-secondary pill had no visible focus indicator (Tailwind preflight resets browser default). Adds focus-visible:ring-2 ring-ring with offset-0 so the indicator stays inside the pill instead of breaking its rounded edge.
…Table + FileSidebar) - FileGrid: bg-card tiles + shadow-e1 → shadow-e2 hover; aspect-square moved to thumbnail wrapper so tile fits filename + tags without cropping - FileTable: hairline rows on border-border; selected row uses bg-accent; mono-metadata for hash/path/volume cells; eyebrow class for column headers - FileSidebar: bg-popover panel widened to w-96; XIcon close button; mono-metadata for hashes; primary capsule for Compute action; click-to-copy hover uses text-primary
- TagSidebar: bg-card panel widened to w-64; bg-accent active row; rounded-md hover; tabular-nums on count badges - TagChip: uniform bg-muted capsule (drops 12-color procedural palette); XIcon replaces × on removable variant; text-sm
…osition - Outer wrapper: bg-background; h-full instead of flex-1 (route fills the App.tsx <main> slot) - Center pane: <section> with min-w-0 overflow-y-auto; drops redundant p-4 (children pad themselves) - All data-flow + Zustand selectors byte-identical
- CollisionPill: bg-warning pill (unverified) / bg-success pill (all verified) with CopyIcon; drops blue/green/amber text colors - dedup route: collision cards use bg-card + shadow-e1 + border-border; verify-all = bg-warning capsule; cancel = bg-destructive capsule; per-group verify = bg-primary capsule - All data-testid + virtualizer config + handler logic byte-identical
…trum + theme palette - Hidden route; no nav link; reach via #/type - Static demo of typography classes + Fraunces opsz×weight grid + spectrum specimens + token-color swatches - Useful for designer iteration and font swaps; survives shipping
…tchMedia mock - ThemeProvider wraps the test render tree so useTheme() consumers don't crash - jsdom matchMedia mock installed once at module load (vs per-test beforeEach) - Defaults to system mode → dark effective theme; tests needing light set localStorage["perima-theme"] in beforeEach - Cast window to unknown to bypass lib.dom.d.ts "always-defined" typing for the runtime guard
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.
Summary
@theme inlinetoken system; shadcn-compatible names@fontsource-variable/{fraunces,inter,jetbrains-mono}@phosphor-icons/react/typehidden route — type scale + opsz grid + spectrum + theme palette swatchesTest plan
bun run buildcleanbun test100% passbun run lintzero warningscargo nextest run -p perima-desktoppass (no Rust touched, sanity)just bindingsno specta driftbun run tauri devboots cleanly; no console errors at startuptauri devrestart (localStorage)#/typeroute renders the full type scale + spectrum + opsz grid