Density & Sizing

CDX controls derive their geometry from CdxConfig so a single override retunes every button, dropdown trigger, segmented tab, and chip in the app. There are three sizing axes:

1. Control height — vertical rhythm of standalone controls
2. Compact size — dense rows (toolbars, inline chips)
3. Header height — chrome bands across page tops

controlHeight (default 36)

The baseline height of every CDX control that builds its own frame:

• Button.filled / .outlined / .text — CDX baseline button height
• SplitActionButton (outlined variant) — outer frame
• CdxSegmentedTabs — height parameter falls back to controlHeight
• Dropdown triggers in .field mode

Tune once on CdxConfig and every control follows.

CdxConfig(controlHeight: 36) // tighter app
CdxConfig(controlHeight: 44) // roomier touch-friendly app

compactControlSize (default 32)

The dense-row size for inline / list-row contexts:

• Button.icon(compact: true) — 32 px square
• CdxChip(size: CdxChipSize.compact) — 32 px hit target
• CdxDismissAffordance(size: regular) — paired with compact controls
• SplitActionButton(compact: true) — 32 px outer height with 8 px h-padding

Use compact: true only inside dense contexts (toolbars, list-row trailing slots). Don't use it as a global default — it breaks the standard 40 px tap target.

headerHeight (default 70)

The shared band height for chrome headers — list headers, panel headers, dialog headers — that span the top of a surface and host a 40 px control plus 16 px vertical breathing room. Keeps headers aligned when they share a horizontal band.

Padding tokens

Token	Default	Use
controlPadding	4	Base unit for badge / chip padding (multiplied — small chips use cp * 2 h, cp * 1 v)
containerPadding	16	SectionCard body padding, Banner h-padding, LockedSurface padding
horizontalGap	16	Dialog footer actions, toolbars, sibling controls in a Row
verticalGap	16	Stacked form groups, setting sections, sibling controls in a Column

Reading sizing in custom controls

For custom controls that build their own frames, read the scaled CdxConfig directly. CdxConfig.of(context) falls back to defaults when no extension is registered and scales dimensions with the ambient MediaQuery.textScaler.

import 'package:vyuh_cdx_ui/vyuh_cdx_ui.dart';

final cdx = CdxConfig.of(context);

final radius = cdx.controlBorderRadius;
final height = cdx.controlHeight;
final gap = cdx.horizontalGap;
final compact = cdx.compactControlSize;
final icon = cdx.iconSize;

Icon size convention

Default icon size across CDX is 16 px. The chip body, dialog action icons, dropdown trigger leading icons, segmented tab icons, and timeline indicators all use 16. Don't shrink to 12/14 to compress vertical rhythm — adjust vertical padding via controlPadding instead.

Cross-links

• Theming — full CdxConfig token table
• Buttons — compact, isActive, IconButtonStyle
• Badges — CdxChipSize.small / .compact