---
name: ds-create-token
description: Create design tokens for a component from its CSS variables
---

# ds-create-token

Create component design tokens from CSS variables defined in a component's SCSS file. The skill analyzes `vars.local()` calls and variant `--mod-` variables, suggests component token paths, and creates them in `Base.tokens.json`.

## Usage

```
/ds-create-token <component-name>
```

Examples:

```
/ds-create-token badge
/ds-create-token button
/ds-create-token footer
```

## Workflow

### Step 1: Extract & Display

- Parses component SCSS files for `@include vars.local()` and `--mod-` variables
- Shows a table with:
  - Component variable name
  - Current value (alias/global/hardcoded)
  - Value type
  - Status indicator
- Displays **preview** of component tokens that will be created
- User confirms to proceed to Step 2

### Step 2: Suggest Paths & Confirm

For each variable:

- **Hardcoded values** → Uses `ds-find-token` skill to find matching alias tokens
  - If no match found → Suggests creating new Alias token (user confirms)
- **Global tokens** → Suggests replacing with Alias equivalent
- Proposes component token path following: `--ds-[component]-[variant]-[element]-[category]-[property]-[state]`
  - Missing segments are skipped (no placeholders)
  - State segment only included if multiple states exist
- User can review, edit, or confirm each mapping

### Step 3: Write & Compile

- **Backs up** `Base.tokens.json`
- Writes new tokens to `Base.tokens.json`
- Creates any new Alias tokens needed
- Runs `pnpm tokens` to compile outputs
- Shows success summary with created tokens

## Token Path Structure

Component tokens always follow this structure:

```
--ds-[component]-[variant]-[element]-[category]-[property]-[state]
```

**Example:** `--ds-badge-primary-color-base-text`

- `component`: badge
- `variant`: primary
- `element`: (skipped if not present)
- `category`: color
- `property`: text
- `state`: base

## Requirements

- Component must exist in `packages/core/src/components/`
- Component must have a `.host.scss` file with `vars.local()` definitions
- Design tokens must already be compiled (run `pnpm tokens` first if needed)

## Important Notes

**JSDoc Comments:** When generating or updating JSDoc comments in the SCSS file, do NOT include default values in parentheses. Only include the property name and description. Example:

- ✓ `@prop --button-color: Text color of the button`
- ✗ `@prop --button-color: Text color of the button (default: --ds-alias-text-color-white)`