Common patterns for using theme tokens

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

Mix tokens with literals:

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

Use multiple tokens in a single value:

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

Use tokens in gradients:

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

Use tokens in focus outlines:

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