npm package: @lawpath-tech/styling-tool
Description: Lawpath Next Tailwind config with design token injection
Author: Lawpath
Latest version: 1.1.2

# @lawpath-tech/tailwind-config

LawPath Tailwind CSS configuration with design tokens and automated injection script.

## Features

- 🎨 **44 Design System Colors** - Complete LawPath color palette
- 📱 **5 Responsive Breakpoints** - Mobile-first responsive design
- 🔧 **Smart Config Injection** - Automatically merges with existing configs
- 💾 **Backup Protection** - Creates backups before making changes
- 🔄 **Conflict Resolution** - Existing project tokens take priority

## Installation

```bash
npm install -D @lawpath-tech/tailwind-config
```

## Usage

### NPX Command (Recommended)

Inject LawPath design tokens into your project:

```bash
# In your project root
npx @lawpath-tech/tailwind-config

# Or specify a target directory
npx @lawpath-tech/tailwind-config ./path/to/project
```

### Package Script

```bash
# Run from the package directory
pnpm inject-config [target-path]
```

## What Gets Injected

### Colors
- **Primary**: `#1A81D5`
- **Secondary**: `#2CCAE2` 
- **Error**: `#CD133F`
- **Success**: `#16987C`
- **Warning**: `#DB8300`
- **Upgrade**: `#993DDC`
- **Neutral**: `#697BA5`
- **Content**: `dark`, `medium`, `light`
- **Surface**: `dark0`, `dark1`, `dark2`, `light0`, `light1`, `light2`
- **Overlay**: `light`, `dark`

### Breakpoints
- **sm**: `640px`
- **md**: `768px`
- **lg**: `1024px`
- **xl**: `1280px`
- **2xl**: `1536px`

## Smart Merging

The injection script intelligently merges LawPath tokens with your existing config:

✅ **Preserves existing tokens** - Your custom colors/breakpoints are kept  
✅ **Adds new LawPath tokens** - Only missing tokens are added  
✅ **Creates automatic backups** - Original config is backed up  
✅ **Maintains structure** - Existing content, plugins, etc. are preserved  

### Example

**Before:**
```typescript
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0066cc',
        primary: '#custom-primary', // This will be kept
      }
    }
  }
}
```

**After:**
```typescript
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0066cc',         // ✅ Preserved
        primary: '#custom-primary',      // ✅ Preserved (takes priority)
        secondary: '#2CCAE2',           // ➕ Added from LawPath
        error: '#CD133F',               // ➕ Added from LawPath
        // ... 40+ more LawPath colors
      },
      screens: {
        sm: '640px',                    // ➕ Added from LawPath
        md: '768px',                    // ➕ Added from LawPath
        // ... more breakpoints
      }
    }
  }
}
```

## Manual Usage

You can also import the design tokens directly:

```typescript
import { colors, breakpoints } from '@lawpath-tech/tailwind-config'

export default {
  theme: {
    extend: {
      colors,
      screens: {
        sm: `${breakpoints.sm}px`,
        md: `${breakpoints.md}px`,
        lg: `${breakpoints.lg}px`,
        xl: `${breakpoints.xl}px`,
        '2xl': `${breakpoints['2xl']}px`,
      }
    }
  }
}
```

## Development

```bash
# Build the package
pnpm build

# Test injection locally
pnpm inject-config ./test-project

# Publish
pnpm release
```

## Requirements

- Node.js 14+
- Tailwind CSS 3.0+
- TypeScript (for .ts configs)

## License

MIT