Skip to main content
Glama

theme_from_tokens

Build a validated cia theme.css from design-tokens JSON (DTCG, Tokens Studio, or flat map). Auto-detects format, inherits missing tokens, supports dark mode, returns CSS with validation and report.

Instructions

Build a complete, validated cia theme.css from a design-tokens JSON — DTCG v2025.10 ({ $value, $type }, {aliases} resolved), a Tokens Studio for Figma export ({ value, type }, single or multi-set), or a flat { "--token": value } map. Format is auto-detected. Every REQUIRED contract token the file does not supply is inherited from a shipped base theme (default boilerplate) and listed in report.inherited, so the output is always contract-complete; unmapped paths are emitted verbatim and listed in report.unmapped, never dropped. Pass dark (same format) or a single file with paired color-light/color-dark groups to get light-dark() values. Returns { css, report, validation } — validation is the same result validate_theme gives, run on the CSS before you write it anywhere. Needs css-is-awesome >= 1.17.0 installed.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
baseNoShipped theme that supplies missing required tokens. Default boilerplate.
darkNoOptional dark-mode tokens (same format) → light-dark() values.
modeNoSingle-mode color-scheme when there is no dark side. Default light.
nameYesTheme name — kebab-case slug, becomes [data-theme="<name>"].
formatNoDefault auto.
tokensYesThe tokens JSON (object, or a JSON string).
validateNoRun the validator + WCAG audit (default true).

Schema Changelog

Changes observed during successful MCP inspections.

  1. Addedv1.3.0

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses key behaviors: inherited tokens are listed in report.inherited, unmapped paths are emitted and listed in report.unmapped, output format is auto-detected, and it requires css-is-awesome >= 1.17.0. It also specifies the return object. This is substantial transparency, though it doesn't detail side effects or edge cases like file writing.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is long but every sentence contributes: purpose, format handling, inheritance guarantees, dark mode, return structure, and dependency requirement. It front-loads the core function and packs the rest efficiently without fluff.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a complex tool with 7 parameters and no output schema, the description covers the essential contract: what it builds, how it handles missing tokens, what the return contains, the validation tie-in, and the runtime dependency. An agent would know how to invoke it correctly and what to expect.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema has 100% description coverage, giving baseline 3. The description adds value by explaining the auto-detection of formats, the dark-mode pairing (color-light/color-dark groups), and the inheritance mechanism for base and dark. This goes beyond the schema's simple field descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb ('Build'), a concrete resource ('cia theme.css'), and the input source ('design-tokens JSON'). It names the exact output object and mentions sibling behavior (validation matches validate_theme), making it easy to distinguish from get_theme or validate_theme.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It provides clear context on when to use the tool (building a theme from tokens) and explains the dark-mode option and validation side-effect. It does not explicitly state when NOT to use it or mention alternatives like get_theme, but the format and inheritance details give strong usage guidance, so a minor deduction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.