Gradient

The token-driven per-severity gradient system — one background-image variable per severity (color.gradient.<severity>.from/via/to in @idinstudio/tokens), consumed by Button, Badge, and GradientText's variant="gradient"/severity, plus the raw bg-gradient-*/text-gradient-* utilities directly. direction sets data-gradient-dir, which reassigns the shared --gradient-angle var — default is to-br (135deg).

Button — variant="gradient"

Solid-emphasis diagonal fill, per severity. Every severity's darkest stop clears WCAG AA against text-on-primary. Hover brightens + adds a glow; direction controls the diagonal angle.

severity

direction

radial

Badge — variant="gradient"

Same token-driven diagonal, sized for an inline pill label. No direction prop — Badge always paints the default to-br diagonal. Severity list is one shorter than Button/GradientText: no gradient.help compound variant is defined.

severity

primarysecondarysuccessinfowarningdangerneutral

GradientText

Inline text filled with the same per-severity diagonal via background-clip: text. `as` picks the semantic element (defaults to span) independently of the gradient fill; direction shares the exact same contract as Button/Badge.

severity

Ship faster.

direction

to-r

to-br

to-b

to-bl

to-l

to-tl

to-t

to-tr

bg-gradient-* / text-gradient-* utilities

The underlying Tailwind theme utilities every component above resolves to — reach for these directly on a bare element (a hero panel, a section background) when no component wraps the case you need. Both share the same --background-image-gradient-<severity> var, so they never drift apart.

bg-gradient-*

primary

secondary

success

info

warning

danger

neutral

text-gradient-*

primaryThe quick brown fox

secondaryThe quick brown fox

successThe quick brown fox

infoThe quick brown fox

warningThe quick brown fox

dangerThe quick brown fox

neutralThe quick brown fox