# @overbits/dss

Design System Server - UI Developer Companion

Extract design tokens and components from Figma, generate code, and sync with your codebase.

## Installation

```bash
npm install -g @overbits/dss
# or
npx @overbits/dss
```

## Requirements

- Node.js 18+
- Python 3.8+ (auto-configured during installation)

## Quick Start

```bash
# Initialize DSS in your project
dss init

# Configure Figma access
dss config --set figmaToken=figd_your_token
dss config --set figmaFileKey=your_file_key

# Start the server
dss start

# Sync tokens from Figma
dss sync --format css

# Extract components
dss extract components
```

## Commands

### `dss init`
Initialize DSS in the current project. Creates `.dss/` directory with configuration.

### `dss start`
Start the DSS server. Options:
- `-p, --port <port>` - Port (default: 3456)
- `-d, --dev` - Development mode with auto-reload
- `--no-open` - Don't open browser

### `dss stop`
Stop the running DSS server.

### `dss sync`
Sync design tokens from Figma. Options:
- `-f, --format <format>` - Output format: css, scss, json, ts (default: css)
- `-o, --output <path>` - Output file path
- `--file-key <key>` - Figma file key

### `dss extract <type>`
Extract tokens, components, or styles from Figma. Types: tokens, components, styles, all

### `dss config`
Manage configuration. Options:
- `--set <key=value>` - Set a config value
- `--get <key>` - Get a config value
- `--list` - List all config values

### `dss status`
Check DSS server and configuration status.

## Configuration

### Global Config (stored in ~/.config/dss/)
- `figmaToken` - Figma personal access token
- `defaultPort` - Default server port
- `defaultFormat` - Default token output format

### Project Config (stored in .dss/config.json)
- `figmaFileKey` - Figma file key for this project
- `port` - Server port
- `outputDir` - Token output directory
- `tokenFormat` - Token format (css, scss, json, ts)
- `componentFramework` - Component framework (react, vue, svelte)

## Web Dashboard

Once the server is running, access the web dashboard at `http://localhost:3456`:

- **Projects** - Manage design system projects
- **Tokens** - Browse and export design tokens
- **Components** - View component gallery and generate code

## License

MIT