Bruno Sarlo
4de266de61
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
This reverts commit 72cb7319f5.
107 lines
2.1 KiB
Markdown
107 lines
2.1 KiB
Markdown
---
|
|
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
|
|
```
|