Spacing & Shapes

Consistent spacing and shape tokens are essential for maintaining visual harmony in your design system.

Spacing Tokens

Spacing tokens define a set of dimension strings (e.g., '16px', '1.5rem') to be used for margins, paddings, and layouts.

Usage

theme.set_spacing("xs", "4px")
theme.set_spacing("sm", "8px")
theme.set_spacing("md", "16px")
theme.set_spacing("lg", "32px")
theme.set_spacing("xl", "64px")

# Retrieve spacing values
gap = theme.get_spacing("md")  # "16px"

Management

• set_spacing(name, value): Add or update a spacing token.
• get_spacing(name): Retrieve a spacing value by name. Raises SpacingNotFoundError if missing.
• remove_spacing(name): Remove a spacing token from the theme.

---

Shape Tokens (Rounded)

Shape tokens define corner radii as dimension strings (e.g., '4px', '50%').

Usage

theme.set_rounded("none", "0")
theme.set_rounded("sm", "2px")
theme.set_rounded("md", "4px")
theme.set_rounded("lg", "8px")
theme.set_rounded("full", "9999px")
theme.set_rounded("circle", "50%")

# Retrieve rounded values
radius = theme.get_rounded("md")  # "4px"

Management

• set_rounded(name, value): Add or update a rounded (shape) token.
• get_rounded(name): Retrieve a rounded value by name. Raises RoundedNotFoundError if missing.
• remove_rounded(name): Remove a rounded token from the theme.