[Sprint 1] feat: Implement theme tools (4 tools) #175

New Issue

lmiranda · 2026-01-26T16:21:10Z

lmiranda commented

2026-01-26 16:21:10 +00:00

Description

Implement the design token-based theming system for consistent visual styling.

Acceptance Criteria

Create mcp_server/theme_tools.py
Create mcp_server/theme_store.py for theme persistence
Implement theme_create tool:
- Input: name: string, tokens: object
- Tokens: colors, spacing, typography, radii (per proposal spec)
- Stores theme in user/project location
Implement theme_extend tool:
- Input: base_theme: string, overrides: object
- Create new theme extending existing one
Implement theme_validate tool:
- Input: theme_name: string
- Check completeness (all required tokens present)
- Output: validation report
Implement theme_export_css tool:
- Input: theme_name: string
- Output: CSS custom properties file content
Theme storage locations:
- User-level: ~/.config/claude/themes/
- Project-level: .viz-platform/themes/
- Project takes precedence

Technical Notes

Design token structure from proposal:

tokens:
  colors:
    primary: "#228be6"
    secondary: "#868e96"
    background: {base: "#ffffff", subtle: "#f8f9fa"}
    text: {primary: "#212529", muted: "#868e96"}
  spacing: {xs: "4px", sm: "8px", md: "16px", lg: "24px"}
  typography: {fontFamily: "Inter, sans-serif", fontSize: {sm: "14px", md: "16px"}}
  radii: {sm: "4px", md: "8px"}

Dependencies

Depends on #170 (MCP server foundation)

## Description Implement the design token-based theming system for consistent visual styling. ## Acceptance Criteria - [ ] Create `mcp_server/theme_tools.py` - [ ] Create `mcp_server/theme_store.py` for theme persistence - [ ] Implement `theme_create` tool: - Input: `name: string, tokens: object` - Tokens: colors, spacing, typography, radii (per proposal spec) - Stores theme in user/project location - [ ] Implement `theme_extend` tool: - Input: `base_theme: string, overrides: object` - Create new theme extending existing one - [ ] Implement `theme_validate` tool: - Input: `theme_name: string` - Check completeness (all required tokens present) - Output: validation report - [ ] Implement `theme_export_css` tool: - Input: `theme_name: string` - Output: CSS custom properties file content - [ ] Theme storage locations: - User-level: `~/.config/claude/themes/` - Project-level: `.viz-platform/themes/` - Project takes precedence ## Technical Notes Design token structure from proposal: ```yaml tokens: colors: primary: "#228be6" secondary: "#868e96" background: {base: "#ffffff", subtle: "#f8f9fa"} text: {primary: "#212529", muted: "#868e96"} spacing: {xs: "4px", sm: "8px", md: "16px", lg: "24px"} typography: {fontFamily: "Inter, sans-serif", fontSize: {sm: "14px", md: "16px"}} radii: {sm: "4px", md: "8px"} ``` ## Dependencies - Depends on #170 (MCP server foundation)

lmiranda added the Tech/Python Component/Backend Type/Feature Complexity/Complex Effort/L Priority/High labels 2026-01-26 16:21:10 +00:00

lmiranda referenced this issue

2026-01-26 16:21:43 +00:00

[Sprint 1] feat: Create viz-platform agents (3 agents) #179

lmiranda referenced this issue

2026-01-26 16:22:13 +00:00

[Sprint 1] test: Create viz-platform MCP server tests #182

lmiranda commented

2026-01-26 16:53:31 +00:00

Completed: Theme tools implemented.

Tools Added:

theme_create - Create themes with design tokens (colors, spacing, typography, radii)
theme_extend - Extend existing themes with overrides
theme_validate - Validate theme completeness
theme_export_css - Export as CSS custom properties

Features:

ThemeStore for persistence (user: ~/.config/claude/themes/, project: .viz-platform/themes/)
Default theme based on Mantine with 47 CSS variables
Deep merge for token inheritance
Validation for required tokens (colors.primary, background, text)

Test Results:

Theme creation with dark mode colors works
Theme extension with single override works
CSS export produces valid :root variables

Commit: 797b306

Completed: Theme tools implemented. **Tools Added:** 1. `theme_create` - Create themes with design tokens (colors, spacing, typography, radii) 2. `theme_extend` - Extend existing themes with overrides 3. `theme_validate` - Validate theme completeness 4. `theme_export_css` - Export as CSS custom properties **Features:** - ThemeStore for persistence (user: `~/.config/claude/themes/`, project: `.viz-platform/themes/`) - Default theme based on Mantine with 47 CSS variables - Deep merge for token inheritance - Validation for required tokens (colors.primary, background, text) **Test Results:** - Theme creation with dark mode colors works - Theme extension with single override works - CSS export produces valid :root variables **Commit:** 797b306

lmiranda closed this issue

2026-01-26 16:53:37 +00:00

lmiranda referenced this issue from a commit

2026-01-26 18:53:14 +00:00

feat(viz-platform): implement theme tools (#175)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: personal-projects/leo-claude-mktplace#175