Design Tokens

CDX UI design tokens live in CdxConfig, a Flutter ThemeExtension registered by createCdxTheme. The tokens define shared control height, spacing, radius, icon sizing, selected and hover tints, and the semantic status colors that Material does not provide by default.

Live Example

Open the full route: Design Tokens.

Token Families

Family	Tokens
Shape	controlBorderRadius, containerBorderRadius
Spacing	controlPadding, containerPadding, horizontalGap, verticalGap
Sizing	controlHeight, compactControlSize, iconSize, headerHeight
Interaction	hoverTint, selectedTint, disabled button fill/text resolvers
Semantic colors	success, warning, neutral, critical, info and their container pairs

Prefer CdxConfig.of(context) in component code so dimensions scale with the ambient text scaler. Prefer resolver methods such as successOf(scheme) and selectedTintOf(scheme) instead of reading raw nullable color fields.