feat(design-system): add Normal and Compact density - #7535
Draft
mahanti wants to merge 1 commit into
Draft
Conversation
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
This was referenced Sep 9, 2026
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.
Adds independent Normal / Compact controls alongside the theme control. Compact reduces default control height from 40px to 32px and panel padding from 24px to 16px while retaining readable text sizes. The preference applies to all design-system pages, shared components, compositions, and portaled menus/dialogs/toasts without remounting inputs or losing their state.
Geometry profiles live together in the public design-token source and generate CSS for both source and compiled consumers. Tailwind's layout rhythm participates; the navigation rail, typography, fine control marks, scrollbars, and resize hit areas keep their dimensions. Foundation pages report the selected profile's values. Density persists locally before mount, synchronizes across tabs, handles invalid saved values, and offers retry when saving fails.
Stack 5 of 6: #7522 → #7523 → #7525 → #7533 → this PR → #7537. Base:
codex/design-system-composer. All remain draft.Validation:
Production component/catalog builds and TypeScript pass.
Design-system formatting, generated-token freshness, typography, APCA/control contrast, and all 8 token/schema/renderer tests pass.
All 29 Chromium tests pass, including density switching by keyboard and pointer, preserved drafts, portal geometry, unchanged typography, persistence across reload/navigation/tabs, save failure and retry, live foundation values, Glass selection, and 390/884/1440px layouts in both themes.
Repository-wide
just cistopped in the unchanged Tauri testmanaged_agents::discovery::bounded_command::tests::returns_when_escaped_descendant_retains_pipeafter its descendant-PID parse received an empty value. The isolated rerun passed. No Rust or terminal code is changed; later repository-wide stages were not reached.Run
pnpm --filter buzz-desktop-next devand open/design/components; Density sits below the theme control. Consumers can use<html data-density="compact">with the shared stylesheet.