[Design] Refine shared tabs
MaggieAppleton opened ·
Base branch: main Branch: maggie/refine-shared-tabs Depends on: None
## Goal Give Chopin's shared tabs a deliberate, polished visual treatment that works in both the product shell and authored visual interfaces.
## Context From Planning - The `/design-audit#controls` specimen now uses the shared Base UI/shadcn-style tabs rather than a static stand-in, but the current segmented treatment still feels underdesigned. - Tabs belong to the shared Chopin foundation. The shell may use them more densely than explainers, but both should share typography, color, spacing, radii, focus, and motion tokens. - This is a design pass requiring Maggie's review before broad adoption.
## Current Behavior `packages/visuals` wraps Base UI Tabs and supplies one generic visual treatment. The active, hover, focus, disabled, overflow, and content relationships are functional but lack a strong hierarchy and do not yet cover dense shell and spacious explainer contexts convincingly.
## Desired Behavior Create a small, coherent tab family with intentional density variants, clear selected state, quiet inactive tabs, strong keyboard focus, and predictable narrow-width behavior.
## Acceptance Criteria - [ ] The design audit shows default, hover, active, focus, disabled, overflow, and keyboard-navigation states using the real shared component. - [ ] Dense shell and spacious explainer examples share the same primitives and tokens rather than separate CSS implementations. - [ ] The selected state is legible without relying on color alone; focus is visible and is not clipped. - [ ] Horizontal overflow and narrow layouts remain usable without truncating labels or panels. - [ ] Arrow-key navigation, disabled-tab skipping, accessible names, and panel ownership continue to work. - [ ] Maggie approves the audit specimens before production consumers are migrated.
## Verification Commands - `bun run types` - `bun run ci` - `bun run design-audit:test`
## Primary Surfaces - `/design-audit#controls` - Shared Tabs primitives in `packages/visuals` - Product and visual-interface consumers of shared tabs
## Expected PR Checks - Repo required checks
## Report Requirements - Before/after screenshots at desktop and narrow widths - Token and variant decisions - Keyboard and accessibility verification - Consumers migrated and any deferred consumers
## Implementation Notes - Keep Base UI behavior; this issue is visual-system work, not a new tabs implementation. - Avoid consumer-specific overrides and raw values where a shared token belongs. - Start in the audit route and stop for design review before broad migration.
## Stop Conditions - A visual direction cannot be chosen without Maggie's review. - The proposed API requires behavior changes outside the shared tabs contract.
github-actions[bot]added label triage/human-responselast month on GitHub