---
name: Token Extraction
description: Extract design tokens from CSS, SCSS, Tailwind, and JSON sources
globs:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.sass"
  - "**/tailwind.config.*"
  - "**/tokens.json"
  - "**/theme.json"
  - "**/*.tokens.json"
alwaysApply: false
---

# Token Extraction

## Overview

This skill enables extraction of design tokens from multiple source formats and merging them into a unified token collection.

## When to Use

Use this skill when the user asks to:
- Extract tokens from CSS/SCSS files
- Parse Tailwind configuration for tokens
- Import tokens from JSON files
- Merge tokens from multiple sources
- Convert existing styles to tokens

## Supported Sources

### CSS
- Custom properties (--variable-name)
- Color values in declarations
- Font and typography values
- Spacing values

### SCSS
- Variables ($variable-name)
- Maps and nested structures
- Mixins with token values
- Function outputs

### Tailwind
- Theme configuration
- Extended colors
- Custom spacing
- Typography settings

### JSON
- Design token format (W3C Draft)
- Style Dictionary format
- Figma export format
- Custom JSON structures

## Workflow

1. **Identify Sources**
   - Determine which file types contain tokens
   - Locate configuration files
   - Check for existing token files

2. **Extract Tokens**
   ```
   Use dss_extract_tokens with path and source types
   ```

3. **Review Extraction**
   - Check token count
   - Verify token categories
   - Review token values

4. **Merge if Needed**
   - Combine tokens from multiple sources
   - Resolve conflicts
   - Normalize naming

## Token Categories

| Category | Examples |
|----------|----------|
| color | primary, secondary, error, success |
| typography | font-family, font-size, line-height |
| spacing | margin, padding, gap values |
| sizing | width, height, border-radius |
| shadow | box-shadow, drop-shadow |
| border | border-width, border-color |
| opacity | transparency values |
| z-index | stacking order values |

## Example Interaction

**User:** "Extract all design tokens from my project's styles"

**Assistant Response:**
```
I'll extract design tokens from your project.

[Uses dss_extract_tokens tool with sources: css, scss, tailwind]

**Extraction Results:**

From CSS (23 tokens):
- 12 color tokens
- 5 spacing tokens
- 6 typography tokens

From SCSS (45 tokens):
- 20 color tokens (including variants)
- 15 spacing tokens
- 10 typography tokens

From Tailwind (32 tokens):
- Custom colors defined in theme
- Extended spacing scale
- Custom font families

**Merged Collection:** 78 unique tokens
- Duplicates resolved using latest value
- Naming normalized to kebab-case

Would you like me to generate theme files from these tokens?
```

## Merge Strategies

| Strategy | Description |
|----------|-------------|
| PREFER_LATEST | Use most recently encountered value |
| PREFER_FIRST | Keep first encountered value |
| ERROR_ON_CONFLICT | Fail if conflicts exist |
| MERGE_ARRAYS | Combine array values |

## Related Tools

- `dss_extract_tokens` - Main extraction tool
- `dss_generate_theme` - Generate theme from tokens
- `dss_transform_tokens` - Convert between formats

## Output Format

```json
{
  "color": {
    "primary": {
      "value": "#0066cc",
      "type": "color",
      "description": "Primary brand color"
    }
  },
  "spacing": {
    "sm": {
      "value": "8px",
      "type": "dimension"
    }
  }
}
```