Colors
Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.
Configure and use it
This is the smallest useful starting point. Copy it into the indicated application file or run it from the project root, then adjust the documented values for your product.
<Button color="primary">Save</Button>
<Alert color="danger">Unable to save</Alert>What changes after this
Status and hierarchy use named semantic roles that remain understandable in both light and dark modes.
Semantic roles
Primary and secondary communicate hierarchy; success, warning, danger, and info communicate state. Use roles consistently instead of choosing colors by appearance.
Component colors
Every maintained component accepts the shared color contract. Prefer the color prop for supported variants and tokens for application-owned surfaces.
Accessible combinations
Check text, icons, borders, hover, focus, selected, and disabled states. Never make color the only carrier of meaning.
Brand overrides
Define brand values once through theme tokens. Derived surfaces and on-colors keep contrast coherent across light and dark modes.
Verify the result
Type-check the application, inspect the resolved package and styles, and build the production artifact. Test the page at a narrow viewport, with keyboard navigation, and in both color modes before shipping.
bunx wrnexus typecheck .
bunx wrnexus inspect packages .
bunx wrnexus inspect styles .
bunx wrnexus build .Expected result
The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.