Repository navigation
feat(ui): unify corner system with concentric radii and softer actions - #32
Merged
Merged
Conversation
Apply the concentric rule (inner = outer radius minus padding and border) to every nested rounded pair, extend squircle continuity to the remaining large surfaces, and soften the near-black action buttons: - ActionMenu and LangNav dropdown items: 8px -> 5px (12px container, 6px padding + 1px border), so the first/last item corners form an exact concentric fan with the menu container - ModeSwitcher active pill and LangNav label pill: 8px -> 7px (12px container, 4px padding + 1px border) - SharePanel and the day-group header gain squircle continuity to match cards, composer, and menus (>=12px large surfaces) - file list container unified to 8px across main and public pages, matching the code-block container at the same nesting level - text scroll fades widened from one to two lines (h-6 -> h-12) for a smoother penumbra on long voice-transcript items - primary card actions (copy/download) and edit-mode Save softened from stone-900 to stone-700 (hover stone-600) Verified by screenshot + vision-model audit of every affected surface (cards, menus, panels, toggle, hover states) before and after.
…nu rows - LangNav trigger, LangNav dropdown, and ModeSwitcher container gain squircle continuity to match ActionMenu trigger/popover (same-layer corner language for 12px menu-family containers) - ModeSwitcher outer radius 12px -> 16px (reads better at its size); active pill follows concentrically at 11px - ActionMenu items keep 5px on fine pointers but use 8px on pointer-coarse, where 5px read boxy against 44px touch rows - hide hardware shortcut badges (kbd-hint) in ActionMenu on touch, matching the existing edit-hint behavior Verified by desktop + iPhone-emulated vision audits: toggle 16px well-proportioned with concentric pill; mobile fades still two lines and smooth; menu rows proportionate with badges hidden; composer 8px coarse fallback coherent with cards.
Geometric concentric value for the 16px container is 11px, but inner corners read larger than they are at small sizes; 9px keeps the channel visually parallel while losing the bubbly feel the 11px pill had.
The 16px container forced an 11px concentric pill that read too round; trimming the pill to 9px alone broke the fan (16-5 != 9). Pairing a 14px container with the 9px pill satisfies the concentric equation exactly (14 - 4px padding - 1px border = 9) while keeping the outer radius above the original 12px.
- LangNav trigger matches the mode toggle: 14px squircle outer + 9px concentric label pill (14 - 4 - 1 = 9), one header corner language - both dropdown menus (ActionMenu, LangNav) use a 15px squircle container on pointer-coarse with 8px items: concentric on touch too (15 - 6 - 1 = 8), proportional to 44px rows, replacing the 12px/8px flare the uniform 5px rows would have avoided but at boxy proportion
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
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.
What
A corner-geometry audit driven by screenshot + vision-model verification (desktop and iPhone-emulated passes; every surface captured and judged before and after), applying the concentric rule — inner radius = outer radius − (padding + border) — across the app, plus the two requested visual adjustments. Final state after review iterations:
Concentric system
All values satisfy the concentric equation exactly (e.g. 14 − 4 − 1 = 9; 15 − 6 − 1 = 8). The 14/9 toggle pair went through three review rounds (12/7 → 16/11 → 16/9 rejected as non-concentric → 14/9) — outer radius up from original, pill stays modest, fan strict.
Corner language + hierarchy
squirclecontinuity (≥12px large surfaces join cards/composer/menus); hover pill verified harmonious with cards.Visual adjustments
h-6→h-12); vision audit measured a smooth symmetric ~48px penumbra, no banding, no leak into card padding (verified at desktop and 393px mobile).stone-900→stone-700(hoverstone-600); sampled fill #1c1917 → #44403c.kbd-hint), matching the existing edit-hint behavior.Noted, deliberately not changed
{@html}) are pre-existing patterns outside this diff.Verification
mise run checkgreen (svelte-check 275 files 0/0, tsc);pnpm vitest run40/40; svelte MCP autofixer clean on all touched edits.geometrically exact, uniform 6px channel; toggle 14/9concentric — 0°/45°/90° channel equal; header pairidentical corner language, no residual mismatch; SharePanelG2-like continuity consistent with card; fadestwo lines, smooth; copy button fill sampled at stone-700; mobile menu containers clean, badges hidden, rows proportionate.