Design Tokens
CDX UI design tokens live in CdxConfig, a Flutter ThemeExtension registered by createCdxTheme, and in cdxColorScheme, the one default colour scheme. The tokens define shared control height, spacing, radius, icon sizing, selected and hover tints, the colour scheme, and the semantic status colors that Material does not provide by default.
One source of colour
CDX is the single source of colour. Every colour a product shows comes from three places in vyuh_cdx_ui:
| Source | What it defines |
|---|---|
cdxColorScheme(Brightness) | Every ColorScheme role, light and dark: brand (primary, secondary, tertiary, error and their containers), the surface ladder from surfaceContainerLowest to surfaceContainerHighest, text (onSurface, onSurfaceVariant), outlines and the inverse roles |
CdxConfig | The status tones (statusToneOf, infoOf, successOf, warningOf, criticalOf, neutralOf and their container pairs), borders, hover, selected and disabled tints |
CdxChartPalette | Eight colour-blind-safe categorical colours and a sequential ramp from the primary colour |
Light is cobalt on white cards over a cool light-grey page. Dark sits on slate blue, a cool blue-tinted grey lighter than charcoal: the page, cards and raised surfaces (dialogs, menus) step up in slate, lines carry the slate, and text stays neutral grey. There is no navy or charcoal dark palette and no seed-derived scheme; a colour changes in cdx_color_scheme.dart and nowhere else.
Products built on CDX, such as Blueprint and the apps built on it, define no colours of their own. Blueprint's BlueprintTheme resolves to cdxColorScheme and CdxConfig; a product that needs a brand accent sets it on CdxConfig (primary, ...), which createCdxTheme folds into the scheme, rather than writing a scheme by hand.
The Vyuh Design System Explorer shows the complete palette, light and dark side by side, read from CDX at runtime.
Live Example
Open the full route: Design Tokens in the Vyuh Design System Explorer.
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 |
| Colour scheme | cdxColorScheme(brightness): every ColorScheme role |
| Semantic colors | success, warning, neutral, critical, info and their container pairs; statusToneOf for a fill, border and text |
| Charts | CdxChartPalette: categorical colours and a sequential ramp |
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.