Bruno Sarlo
4de266de61
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
This reverts commit 72cb7319f5.
114 lines
2.4 KiB
Markdown
114 lines
2.4 KiB
Markdown
---
|
|
name: dss-generate
|
|
description: Generate theme files from design tokens
|
|
arguments:
|
|
- name: format
|
|
description: "Output format: css, scss, json, or js"
|
|
required: true
|
|
- name: name
|
|
description: Theme name (default is "default")
|
|
required: false
|
|
---
|
|
|
|
# DSS Generate Command
|
|
|
|
Generate platform-specific theme files from design tokens using style-dictionary.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/dss-generate <format> [name]
|
|
```
|
|
|
|
Examples:
|
|
```
|
|
/dss-generate css
|
|
/dss-generate scss dark-theme
|
|
/dss-generate json
|
|
/dss-generate js tokens
|
|
```
|
|
|
|
## Supported Formats
|
|
|
|
| Format | Output | Use Case |
|
|
|--------|--------|----------|
|
|
| css | CSS custom properties | Web projects using CSS variables |
|
|
| scss | SCSS variables | Projects using Sass |
|
|
| json | JSON structure | Framework-agnostic, APIs |
|
|
| js | JavaScript module | React, Vue, JS projects |
|
|
|
|
## What This Does
|
|
|
|
1. **Prepares Tokens**
|
|
- Validates token structure
|
|
- Organizes by category
|
|
- Applies naming conventions
|
|
|
|
2. **Transforms via Style Dictionary**
|
|
- Applies platform transforms
|
|
- Generates output files
|
|
- Creates documentation
|
|
|
|
3. **Returns Generated Files**
|
|
- Theme file content
|
|
- Usage instructions
|
|
- Integration guide
|
|
|
|
## Instructions for Claude
|
|
|
|
When the user runs this command:
|
|
|
|
1. Verify format is valid (css, scss, json, js)
|
|
2. Check if tokens are available (from previous extraction or ask for path)
|
|
3. Use `dss_generate_theme` tool with format and theme name
|
|
4. Display generated file content
|
|
5. Provide integration instructions for the format
|
|
6. Offer to generate additional formats
|
|
|
|
If no tokens available:
|
|
- Ask user to run `/dss-extract` first
|
|
- Or ask for path to tokens file
|
|
|
|
## Example Output
|
|
|
|
```
|
|
Theme Generation: dark-theme (CSS)
|
|
|
|
GENERATED FILE: theme-dark.css
|
|
|
|
:root {
|
|
/* Colors */
|
|
--color-primary: #3385d6;
|
|
--color-primary-light: #66a3e0;
|
|
--color-primary-dark: #0066cc;
|
|
--color-background: #1a1a1a;
|
|
--color-surface: #2d2d2d;
|
|
--color-text: #ffffff;
|
|
|
|
/* Typography */
|
|
--font-family-base: "Inter", sans-serif;
|
|
--font-size-sm: 14px;
|
|
--font-size-base: 16px;
|
|
--font-size-lg: 18px;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
}
|
|
|
|
USAGE
|
|
|
|
1. Import in your main CSS:
|
|
@import 'theme-dark.css';
|
|
|
|
2. Use variables in components:
|
|
.button {
|
|
background: var(--color-primary);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
Generate another format? Try /dss-generate scss dark-theme
|
|
```
|