Skip to content

CSS Export

Armonia can export all theme tokens as CSS custom properties and classes.

Exporting Colors

The to_css_colors(prefix="--color-") method returns bare CSS custom property declarations. You can embed them in any CSS rule (:root, .dark, etc.).

theme.set_color("primary", HSLColor.from_hex("#2563eb"))
theme.set_computed_color("primary_dark", cf.darker("primary", 0.15))

print(":root {")
print(theme.to_css_colors())
print("}")

# :root {
#   --color-primary: hsl(221deg 83% 53%);
#   --color-primary_dark: hsl(221deg 83% 38%);
# }

Exporting Fonts

The to_css_fonts(prefix="font-", size_unit="px") method returns CSS classes for each font.

theme.set_font("body", typography.Font("Inter", 16.0, 400, False))

print(theme.to_css_fonts())

# .font-body {
#   font-family: "Inter";
#   font-size: 16px;
#   font-weight: 400;
#   font-style: normal;
# }

Exporting Spacing & Shapes

You can also export spacing and shape tokens as CSS custom properties.

Spacing

theme.set_spacing("md", "16px")
print(theme.to_css_spacing())
# --spacing-md: 16px;

Rounded (Shapes)

theme.set_rounded("md", "4px")
print(theme.to_css_rounded())
# --rounded-md: 4px;

Complete Example

def generate_css(theme):
    return "\n".join([
        ":root {",
        theme.to_css_colors(),
        theme.to_css_spacing(),
        theme.to_css_rounded(),
        "}",
        "",
        theme.to_css_fonts(),
    ])