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>
This commit is contained in:
117
plugins/viz-platform/commands/theme-new.md
Normal file
117
plugins/viz-platform/commands/theme-new.md
Normal file
@@ -0,0 +1,117 @@
|
||||
---
|
||||
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:
|
||||
|
||||
```python
|
||||
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
|
||||
|
||||
1. **User invokes**: `/theme-new corporate`
|
||||
2. **Agent asks**: Primary color preference?
|
||||
3. **Agent asks**: Light or dark color scheme?
|
||||
4. **Agent asks**: Font family preference?
|
||||
5. **Agent creates**: Theme with `theme_create`
|
||||
6. **Agent validates**: Theme with `theme_validate`
|
||||
7. **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
|
||||
|
||||
```python
|
||||
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:
|
||||
|
||||
```python
|
||||
theme_extend(
|
||||
base_theme="dark",
|
||||
name="dark-corporate",
|
||||
overrides={
|
||||
"primary_color": "indigo",
|
||||
"font_family": "Roboto, sans-serif"
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/theme {name}` - Apply a theme
|
||||
- `/theme-css {name}` - Export theme as CSS
|
||||
Reference in New Issue
Block a user