Interface VariantToken

A style recipe applied on top of a semantic color. Shared by every component that takes a variant prop.

interface VariantToken {
    background: "fill" | "tint" | "none";
    border: "none" | "color" | "neutral";
    text: "color" | "neutral" | "on";
}

Properties

background: "fill" | "tint" | "none"

fill: the color itself; tint: a translucent wash of the color; none: transparent.

border: "none" | "color" | "neutral"

color: the semantic color; neutral: the neutral border color; none: no visible border.

text: "color" | "neutral" | "on"

on: the color's foreground; color: the semantic color; neutral: the default text color.