---
name: dss-extract
description: Extract design tokens from CSS, SCSS, Tailwind, or JSON sources
arguments:
  - name: path
    description: Path to file or directory containing design tokens
    required: false
  - name: sources
    description: "Comma-separated source types: css,scss,tailwind,json"
    required: false
---

# DSS Extract Command

Extract design tokens from various source formats and create a unified token collection.

## Usage

```
/dss-extract [path] [sources]
```

Examples:
```
/dss-extract
/dss-extract ./src/styles
/dss-extract ./src css,scss
/dss-extract ./tailwind.config.js tailwind
```

## What This Does

1. **Scans Sources**
   - CSS custom properties and values
   - SCSS variables and maps
   - Tailwind configuration
   - JSON token files

2. **Extracts Tokens**
   - Colors (hex, rgb, hsl)
   - Typography (fonts, sizes, weights)
   - Spacing (margins, paddings, gaps)
   - Sizing (widths, heights, radii)
   - Shadows and effects

3. **Merges Results**
   - Combines tokens from all sources
   - Resolves conflicts
   - Normalizes naming

4. **Returns Collection**
   - Categorized tokens
   - Metadata included
   - Ready for theme generation

## Instructions for Claude

When the user runs this command:

1. Parse the path argument (default to current directory)
2. Parse sources argument (default to all: css, scss, tailwind, json)
3. Use `dss_extract_tokens` tool with parsed arguments
4. Present extracted tokens organized by category:
   - Colors
   - Typography
   - Spacing
   - Sizing
   - Shadows
   - Other
5. Show token count and source breakdown
6. Offer to generate theme files with `/dss-generate`

## Example Output

```
Token Extraction: /path/to/project

SOURCES SCANNED
- CSS: 12 files
- SCSS: 8 files
- Tailwind: 1 file

TOKENS EXTRACTED

Colors (24 tokens):
  primary:     #0066cc
  secondary:   #6c757d
  success:     #28a745
  error:       #dc3545
  ...

Typography (8 tokens):
  font-family-base: "Inter", sans-serif
  font-size-base:   16px
  ...

Spacing (6 tokens):
  xs: 4px
  sm: 8px
  md: 16px
  ...

TOTAL: 38 unique tokens

Next: Run /dss-generate css to create theme files
```