surfaceControl

The raised fill a surface button or link draws: the surface token, the emphasis ink and the tactile control edge.

tsx

import { surfaceControl } from "@sdxc/ui/styles";

Usage

Paints a control as a raised surface with a transparent border, so it keeps the footprint of its solid and outline siblings, and darkens the fill a step on hover.

Signature

typescript

surfaceControl<Node extends Element = Element>(): UtilityMixin<Node>

Returns a css() mixin ready for a control's mix prop.

Examples

tsx

<button mix={[when('&[data-variant="surface"]', surfaceControl())]}>{label}</button>;