Template

Files

lmiranda 20458add3f feat(viz-platform): complete Sprint 1 - plugin structure and tests

Sprint 1 - viz-platform Plugin completed (13/13 issues):
- Commands: 7 files (initial-setup, chart, dashboard, theme, theme-new, theme-css, component)
- Agents: 3 files (theme-setup, layout-builder, component-check)
- Documentation: README.md, claude-md-integration.md
- Tests: 94 tests passing (68-99% coverage)
- CHANGELOG updated with completion status

Closes: #178, #179, #180, #181, #182

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-26 13:53:03 -05:00

2.4 KiB

Raw Blame History

description

description
Create a new custom theme with design tokens

Create New Theme

Create a new custom theme with specified design tokens.

Usage

/theme-new {name}

Arguments

name (required): Name for the new theme

Examples

/theme-new corporate
/theme-new dark-blue
/theme-new brand-theme

Tool Mapping

This command uses the theme_create MCP tool:

theme_create(
    name="corporate",
    primary_color="indigo",
    color_scheme="light",
    font_family="Inter, sans-serif",
    heading_font_family=None,        # Optional: separate heading font
    border_radius="md",              # xs, sm, md, lg, xl
    spacing_scale=1.0,               # Multiplier for spacing
    colors=None                      # Optional: custom color palette
)

Workflow

User invokes: /theme-new corporate
Agent asks: Primary color preference?
Agent asks: Light or dark color scheme?
Agent asks: Font family preference?
Agent creates: Theme with theme_create
Agent validates: Theme with theme_validate
Agent activates: New theme is ready to use

Theme Properties

Colors

primary_color: Main accent color (blue, indigo, violet, etc.)
color_scheme: "light" or "dark"
colors: Custom color palette override

Typography

font_family: Body text font
heading_font_family: Optional heading font

Spacing

border_radius: Component corner rounding
spacing_scale: Multiply default spacing values

Mantine Color Palette

Available primary colors:

blue, cyan, teal, green, lime
yellow, orange, red, pink, grape
violet, indigo, gray, dark

Custom Color Example

theme_create(
    name="brand",
    primary_color="custom",
    colors={
        "custom": [
            "#e6f7ff",  # 0 - lightest
            "#bae7ff",  # 1
            "#91d5ff",  # 2
            "#69c0ff",  # 3
            "#40a9ff",  # 4
            "#1890ff",  # 5 - primary
            "#096dd9",  # 6
            "#0050b3",  # 7
            "#003a8c",  # 8
            "#002766"   # 9 - darkest
        ]
    }
)

Extending Themes

To create a theme based on another:

theme_extend(
    base_theme="dark",
    name="dark-corporate",
    overrides={
        "primary_color": "indigo",
        "font_family": "Roboto, sans-serif"
    }
)

/theme {name} - Apply a theme
/theme-css {name} - Export theme as CSS

2.4 KiB Raw Blame History