css

import { css } from "@pitlane/theme";

function css<node>(styles): ThemedCSSMixin<node>;

Brand-enforced wrapper over remix/component's css() mixin. Token-mapped longhands accept the matching token brand, CSS-wide keywords, property keywords, and 0; anything else — including a raw color: "#ff0000" — is a type error. Every other CSS property carries csstype's value union, so display, position, resize, and the rest of the closed-grammar properties accept only their real keywords. Nested selectors, at-rules, and custom properties recurse.

Branded token refs are already var() strings and pass through; an array value joins with spaces, which is how the box shorthands take a 1–4 tuple. A comma list needs a template string.

Inline css() infers its node type from mix. Reusable descriptors need an explicit type, such as css<HTMLAnchorElement>(styles), matching their elements.

Interpolating a token into a template string (`1px solid ${t.color.line}`) yields a plain string, which the open-grammar shorthands accept.

Type Parameters

node

node extends Element = Element

Parameters

styles

ThemedCSSProps

Returns

ThemedCSSMixin<node>

See

• ThemedCSSProps for the accepted per-property values.
• ThemedCSSMixin for the returned descriptor.
• Theme guide: Use tokens in styles

Example

<div
    mix={css({
        color: t.color.bg,
        padding: [t.space.sm, t.space.md],
        margin: 0,
        "&:hover": { color: t.color.gray[900] },
    })}
/>