feat(base-ui): desktop-native consistency sweep#34
Open
joshuapare wants to merge 16 commits into
Open
Conversation
… values Add xs/xl to size scale and discovery/secondary to color palette.
Shift all component sizing tokens to desktop-native scale (18/22/26/32/40px) and add discovery (purple) + secondary (cyan) color tokens across all 7 theme variants.
Also: IconButton removes dense prop, fixes rectangular bug with physical min-width override, adds xs/xl size support.
…dary colors Also fixes TextArea and TextField lg font-size not being set.
…ariant, new colors
…y colors Also fixes Checkbox/Radio lg label font-size hardcode.
Updates Chip, DataTable, Table, ActionList, Pagination, Tabs, EditorTabs, Banner, Badge, Progress, Spinner, StatusDot, Meter, Skeleton. Also fixes Pagination token misalignment bugs.
…nsistency Updates Card, Sheet, Popover, AlertDialog, Menu, ContextMenu, Tooltip, Toast, Avatar, Separator, ScrollArea, Slider, Toolbar, SegmentedControl, SplitButton, ToggleButton, TagInput, NumberInput, StatRow, StatusBar, Timeline, TreeList, CodeBlock, List, Skeleton, StatusDot. Adds missing variant CSS for AlertDialog, Menu, ContextMenu. Expands SplitButtonColor type.
Add visual audit story (Consistency/Size & Color Audit) with: - Size consistency grid showing all controls at xs/sm/md/lg/xl - Color x Variant matrix on dark and light surfaces - IconButton squareness check Also updates all story argTypes to include xs/xl sizes and discovery/secondary colors.
The info color existed in the type system but had no CSS rules in most interactive components. Now all components that support colors have complete info/discovery/secondary coverage.
- Fix SIZE_HEIGHTS labels (md=26, lg=32, xl=40) - Render Checkbox/Radio as control-only (no label) for fair height comparison - Add obsidian, carbon, void themes to Storybook toolbar switcher
Tab triggers with icon + text children had no gap between them. Adds gap: var(--ov-space-stack-xs) and sizes SVG icons to 1em.
- Add startDecorator prop to Tabs.Tab (matching Button pattern) - Use --_ov-tab-icon-size variable for decorator sizing per size tier - Fix inactive tab color: use fg-subtle instead of fg-muted - Remove SVG-specific fallback rules in favor of decorator wrapper - Update showcase to use startDecorator API - Remove stale dense props from showcase IconButtons
- Fix Tabs: use data-active (not data-selected) for Base UI compat - Flat variant active tab: raised bg + colored inset top shadow - EditorTabs active tab: use bg-surface-raised for better contrast - Toolbar: use control-height tokens instead of hardcoded rem - Toolbar Group: use --ov-space-stack-xs token - Showcase browser: use Toolbar component with proper Groups
…button The Trigger had full button styling (height, padding, background, border) which caused any element wrapped in a Tooltip to render with extra sizing. Now it's just display: inline-flex — visual styling comes from the child element (IconButton, Button, etc.).
|
Important Review skippedToo many files! This PR contains 199 files, which is 49 over the limit of 150. ⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (199)
You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Merging this PR will degrade performance by 21.99%
Performance Changes
Comparing 
Footnotes
|
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
Complete consistency sweep of @omniview/base-ui to prepare for omniview application migration.
discovery(purple) andsecondary(cyan) across all 7 theme variants, plus fixed missinginfocolor CSS in 30 componentsdenseprop, fixed rectangular bug (was wider than tall due to Button min-width cascade)startDecoratorprop, fixed active state (was using wrong data attribute), flat variant now has raised bg + colored indicator like browser tabs199 files changed, 4213 insertions, 507 deletions. 1008 tests passing.
Breaking Changes
All control heights decreased significantly (this is intentional — done before any consumers migrate):
IconButton.denseprop removed — usesize="xs"instead.Test plan
pnpm storybook→ Consistency/Size & Color Audit storypnpm --filter @omniview/base-ui build && pnpm --filter @omniview/editors build && pnpm --filter @omniview/ai-ui build && pnpm showcase)Known follow-ups (not in scope)