lmiranda
5152cda161
Extract shared knowledge from 10 commands into 7 reusable skills: - mcp-tools-reference.md: All viz-platform MCP tool signatures - theming-system.md: Theme tokens, CSS variables, color palettes - accessibility-rules.md: WCAG contrast, color-blind safe palettes - dmc-components.md: DMC categories, validation, common props - responsive-design.md: Breakpoints, mobile-first, grid config - chart-types.md: Plotly chart types, export formats, resolution - layout-templates.md: Dashboard templates, filter types All commands now reference skills via "Skills to Load" section. Commands reduced from 1396 lines total to 427 lines (69% reduction). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
105 lines
2.1 KiB
Markdown
105 lines
2.1 KiB
Markdown
# Theming System
|
|
|
|
## Design Tokens
|
|
|
|
Themes define design tokens for consistent styling across components.
|
|
|
|
### Theme Properties
|
|
|
|
| Category | Properties |
|
|
|----------|------------|
|
|
| Colors | `primary_color`, `color_scheme`, `colors` |
|
|
| Typography | `font_family`, `heading_font_family` |
|
|
| Spacing | `border_radius`, `spacing_scale` |
|
|
|
|
### Color Scheme
|
|
- `light` - Light background, dark text
|
|
- `dark` - Dark background, light text
|
|
|
|
### Border Radius Scale
|
|
| Size | Value |
|
|
|------|-------|
|
|
| xs | 0.125rem |
|
|
| sm | 0.25rem |
|
|
| md | 0.5rem |
|
|
| lg | 1rem |
|
|
| xl | 2rem |
|
|
|
|
## Mantine Color Palette
|
|
|
|
Available primary colors:
|
|
- blue, cyan, teal, green, lime
|
|
- yellow, orange, red, pink, grape
|
|
- violet, indigo, gray, dark
|
|
|
|
Each color has 10 shades (0-9), where 5 is the primary shade.
|
|
|
|
## Custom Color Definition
|
|
|
|
```python
|
|
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
|
|
]
|
|
}
|
|
```
|
|
|
|
## CSS Custom Properties
|
|
|
|
Exported themes use Mantine CSS variable naming:
|
|
|
|
```css
|
|
:root {
|
|
/* Colors */
|
|
--mantine-color-scheme: light;
|
|
--mantine-primary-color: indigo;
|
|
--mantine-color-primary-0: #edf2ff;
|
|
--mantine-color-primary-5: #5c7cfa;
|
|
--mantine-color-primary-9: #364fc7;
|
|
|
|
/* Typography */
|
|
--mantine-font-family: Inter, sans-serif;
|
|
--mantine-font-size-xs: 0.75rem;
|
|
--mantine-font-size-md: 1rem;
|
|
|
|
/* Spacing */
|
|
--mantine-spacing-xs: 0.625rem;
|
|
--mantine-spacing-md: 1rem;
|
|
|
|
/* Border Radius */
|
|
--mantine-radius-sm: 0.25rem;
|
|
--mantine-radius-md: 0.5rem;
|
|
|
|
/* Shadows */
|
|
--mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--mantine-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
```
|
|
|
|
## Theme Inheritance
|
|
|
|
Create themes based on existing ones:
|
|
```python
|
|
theme_extend(
|
|
base_theme="dark",
|
|
name="dark-corporate",
|
|
overrides={"primary_color": "indigo"}
|
|
)
|
|
```
|
|
|
|
## Built-in Themes
|
|
|
|
| Theme | Description |
|
|
|-------|-------------|
|
|
| `light` | Mantine default light mode |
|
|
| `dark` | Mantine default dark mode |
|