🛠️ToolsShed

Design Token Converter

Convert design tokens between JSON, CSS variables, and SCSS formats.

Frequently Asked Questions

Code Implementation

# Convert JSON design tokens to CSS variables
def tokens_to_css_vars(tokens: dict) -> str:
    lines = [f"  --{k}: {v};" for k, v in tokens.items()]
    return ":root {\n" + "\n".join(lines) + "\n}"

# Convert JSON design tokens to SCSS variables
def tokens_to_scss(tokens: dict) -> str:
    return "\n".join(f"${k}: {v};" for k, v in tokens.items())

tokens = {
    "color-primary": "#6366f1",
    "spacing-4": "16px",
    "border-radius": "8px"
}

print(tokens_to_css_vars(tokens))
print(tokens_to_scss(tokens))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.