lmiranda
b5d36865ee
Add single-line visual headers to 66 command files across 10 plugins: - clarity-assist (2 commands): 💬 - claude-config-maintainer (5 commands): ⚙️ - cmdb-assistant (11 commands): 🖥️ - code-sentinel (3 commands): 🔒 - contract-validator (5 commands): ✅ - data-platform (10 commands): 📊 - doc-guardian (5 commands): 📝 - git-flow (8 commands): 🔀 - pr-review (7 commands): 🔍 - viz-platform (10 commands): 🎨 Each command now displays a consistent header at execution start: ┌────────────────────────────────────────────────────────────────┐ │ [icon] PLUGIN-NAME · Command Description │ └────────────────────────────────────────────────────────────────┘ Addresses #275 (other plugin commands visual output) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
130 lines
3.0 KiB
Markdown
130 lines
3.0 KiB
Markdown
---
|
|
description: Create a new custom theme with design tokens
|
|
---
|
|
|
|
# Create New Theme
|
|
|
|
## Visual Output
|
|
|
|
When executing this command, display the plugin header:
|
|
|
|
```
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
│ 🎨 VIZ-PLATFORM · New Theme │
|
|
└──────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
Then proceed with the theme creation.
|
|
|
|
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
|