Radius

Luke UI themes provide semantic radius roles for custom UI. Use the role that matches the element's job instead of choosing a fixed pixel value. The public variables adapt to the active theme.

Radius roles

Luke UI exposes five radius roles, each matched to the kind of element it rounds.

Use the active theme

Import vars from @luke-ui/react/theme when a custom surface needs a radius. The value is a stable semantic CSS variable, not a theme-specific number.

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

<aside
	style={{
		backgroundColor: vars.color.surface.floating,
		borderRadius: vars.radius.surface,
		boxShadow: vars.depth.floating,
	}}
/>;

Keep nested corners concentric

When one rounded surface sits inside another, derive the wrapper's radius from the inner surface so the two corners stay concentric. Pass the space between their corners—usually the wrapper's padding—as the gap.

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

const wrapperRadius = deriveConcentricRadius(vars.radius.control, vars.space[200]);

Use wrapperRadius on the padded wrapper and vars.radius.control on the inner surface. Read Theme for the public semantic variables available to custom UI.

Best practices