---
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
```