npm package: @jsoncss/cli
Description: CLI for JsonCSS - transforms JSON design tokens into CSS Variables
Author: Anderson Marques
Latest version: 0.1.0

# @jsoncss/cli

Command-line interface for JsonCSS - A modern design token compiler that transforms JSON into CSS Variables.

## Installation

```bash
npm install -g @jsoncss/cli
# or
pnpm add -g @jsoncss/cli
```

## Quick Start

```bash
# Initialize a new project with modern themes
jsoncss init

# Compile tokens to CSS
jsoncss compile

# Watch mode for development
jsoncss watch

# Export to Tailwind configuration
jsoncss export-tailwind
```

## Commands

### `jsoncss init`
Initialize a new JsonCSS project with modern default themes.

**Options:**
- `-d, --data <json>` - Provide configuration as JSON to skip prompts

**Example:**
```bash
jsoncss init --data '{"projectName":"my-design-system","tokenDir":"./tokens","outputFile":"./styles/variables.css","includeThemes":true,"darkTheme":"dark","lightTheme":"light","minify":false,"watch":false}'
```

### `jsoncss compile [input]`
Compile JSON tokens to CSS variables.

**Options:**
- `-o, --output <file>` - Output file path
- `-m, --minify` - Minify the output CSS
- `-c, --config <file>` - Path to config file

### `jsoncss watch [input]`
Watch for changes and recompile automatically.

**Options:**
- `-o, --output <file>` - Output file path
- `-m, --minify` - Minify the output CSS

### `jsoncss add`
Add a new token file or theme interactively.

### `jsoncss export-tailwind [input]`
Export design tokens as Tailwind CSS configuration.

**Options:**
- `-o, --output <file>` - Output file path (default: "./tailwind-theme.js")
- `-f, --format <format>` - Output format: js, json, esm (default: "js")
- `-p, --prefix <prefix>` - CSS variable prefix (default: "theme")

**Example:**
```bash
# Export as JavaScript module
jsoncss export-tailwind

# Export as JSON
jsoncss export-tailwind -f json -o colors.json

# Custom prefix
jsoncss export-tailwind -p custom
```

### `jsoncss playground`
Open an interactive playground to test your tokens (opens in browser).

## Configuration

Create a `jsoncss.config.json` file in your project root:

```json
{
  "name": "my-design-system",
  "input": "./tokens",
  "output": "./styles/variables.css",
  "minify": false,
  "watch": false,
  "prefix": "theme",
  "themes": {
    "dark": {
      "default": "dark"
    },
    "light": {
      "default": "light"
    }
  }
}
```

## Token File Structure

Create JSON files in your tokens directory:

```json
{
  "name": "dark",
  "description": "Dark theme tokens",
  "colors": {
    "surface": "rgb(26, 26, 27)",
    "bg": "rgb(17, 17, 17)",
    "content": "rgb(250, 250, 250)",
    "accent": "59, 130, 246",
    "accent.on": "rgb(108, 174, 255)"
  }
}
```

## CSS Output

The compiled CSS will generate:

```css
.dark {
  --theme-surface: rgb(26, 26, 27);
  --theme-bg: rgb(17, 17, 17);
  --theme-content: rgb(250, 250, 250);
  --theme-accent: 59, 130, 246;
  --theme-accent-on: rgb(108, 174, 255);
}
```

## Default Themes

JsonCSS comes with beautiful, modern default themes inspired by Linear, Vercel, and GitHub. See [THEME-COLORS.md](./THEME-COLORS.md) for the complete color system documentation.

## License

MIT