Colour

Luke UI names colours by their job. A theme maps those roles to values for each identity and colour mode, so a component can remain consistent without knowing the underlying palette.

Surfaces and content

Surface roles describe where an element sits in the interface. Use canvas for the page, recessed for an inset area, floating for elevated UI such as menus and cards, and overlay for dialogs and other high-elevation surfaces. scrim dims the page behind an open overlay. Text uses primary and secondary roles. Borders distinguish decorative, control, and focus uses.

import { vars } from '@luke-ui/react/theme';

<section
	style={{
		backgroundColor: vars.color.surface.floating,
		borderColor: vars.color.border.decorative,
		color: vars.color.text.primary,
	}}
/>;

Choose the role that describes the element's purpose. Do not copy a resolved colour into application CSS, because it will not adapt when the identity or colour mode changes.

Intent colours

Intent roles cover neutral, accent, danger, info, success, and warning. neutral, accent, and danger are action intents: they render hover and pressed states across subtle and solid surfaces, plus matching text, border, and on-solid values where needed. info, success, and warning are static feedback intents: they render only a subtle surface, border, and text, with no hover, pressed, solid, or on-solid state. Components choose these values for their own states. Custom UI can use the same public roles.

import { vars } from '@luke-ui/react/theme';

<div
	style={{
		backgroundColor: vars.color.intent.warning.surface.subtle,
		color: vars.color.intent.warning.text,
	}}
>
	Payment details need review.
</div>;

Disabled and loading states

Use the component's disabled or loading API when it has one. Those states account for interaction and accessibility as well as colour. Disabled is a state, not a palette: interactive controls fade with reduced opacity, and only field text recolors, through the public text.disabled role. The public loadingSkeleton role is available when you are building an equivalent custom element.

Continue learning