apply_theme_tokens
Map theme token definitions to components by generating CSS custom property overrides. Produces per-component CSS blocks and a global :root block for applying your theme tokens to specific components.
Instructions
Map a theme token definition to specific components, showing how to apply it with correct CSS custom property overrides. Accepts a map of CSS variable names to values, then generates per-component CSS blocks and a global :root block. Use this after create_theme to wire your theme tokens to individual component CSS properties.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| themeTokens | Yes | Map of CSS custom property names to their values. E.g. { "--hx-color-primary": "#0066cc", "--hx-spacing-md": "1rem" }. Property names that match component CSS properties generate per-component CSS blocks. | |
| tagNames | No | Optional list of component tag names to filter results. When omitted, all components with CSS properties are included. | |
| libraryId | No | Optional multi-library dispatch hint. When set, src/mcp/index.ts uses it to pick the correct CEM before invoking this tool. |