Theme Token Usage Patterns

Common patterns for using theme tokens

Basic Usage

const Button = styled("button", {
  padding: "$medium $large",
  color: "$text",
  backgroundColor: "$primary",
});
Copy

Complex Values

Mix tokens with literals:

const Box = styled("div", {
  border: "2px solid $primary",
  borderRadius: "$radii.default",
  padding: "$space.small $space.medium",
});
Copy

Multiple Tokens

Use multiple tokens in a single value:

const Card = styled("div", {
  padding: "$small $medium $large $xlarge",
  margin: "$medium 0",
});
Copy

Gradients

Use tokens in gradients:

const GradientBox = styled("div", {
  background: "linear-gradient(135deg, $primary 0%, $text 100%)",
});
Copy

Focus States

Use tokens in focus outlines:

const Input = styled("input", {
  "&:focus-visible": {
    outline: "2px solid $primary",
    outlineOffset: "$small",
  },
});
Copy

Tokens in Complex Expressions

Tokens work in complex CSS expressions using regex replacement:

const Box = styled("div", {
  // Tokens in calc() expressions
  width: "calc(100% - $medium)",
  margin: "calc($large * 2)",

  // Tokens in transform functions
  transform: "translateY($medium)",
  transform: "scale($opacity.hover)",

  // Tokens in gradients
  background: "linear-gradient(135deg, $primary 0%, $secondary 100%)",

  // Multiple tokens in single value
  border: "2px solid $border",
  boxShadow: "$shadows.default, 0 0 0 1px $border",
});
Copy

Note: Tokens in complex expressions are replaced using regex, so they work anywhere a token appears in a string value.