npm package: @itzcull/tokens-itzcull-ui
Description: UnoCSS preset for itzcull design system tokens
Author: Will Cullen
Latest version: 0.0.2

# @itzcull/tokens-itzcull-ui

UnoCSS preset for the itzcull design system. Provides utility classes based on design tokens extracted from Figma.

## Installation

```bash
pnpm add @itzcull/tokens-itzcull-ui
```

## Usage

### Basic Setup

```ts
import { presetItzcullUI } from '@itzcull/tokens-itzcull-ui'
// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetItzcullUI(),
  ],
})
```

### Custom Configuration

```ts
import { presetItzcullUI } from '@itzcull/tokens-itzcull-ui'
// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetItzcullUI({
      // Custom breakpoints
      breakpoints: {
        mobile: '480px',
        tablet: '768px',
        desktop: '1024px',
      },
      // Disable preflight reset
      preflight: false,
      // Custom CSS variable prefix
      prefix: 'custom',
    }),
  ],
})
```

## Available Classes

### Typography

- `text-title-1` through `text-title-6` - Title styles
- `text-featured-1` through `text-featured-3` - Featured text styles
- `text-body-1` through `text-body-3` - Body text styles
- `text-caption-1` through `text-caption-2` - Caption styles
- `font-regular`, `font-medium`, `font-bold` - Font weights

### Colors

#### Background Colors
- `bg-page`, `bg-page-faded`
- `bg-primary`, `bg-primary-faded`
- `bg-positive`, `bg-positive-faded`
- `bg-warning`, `bg-warning-faded`
- `bg-critical`, `bg-critical-faded`
- `bg-neutral`, `bg-neutral-faded`
- `bg-disabled`, `bg-disabled-faded`

#### Text Colors
- `text-neutral`, `text-neutral-faded`
- `text-primary`
- `text-positive`, `text-warning`, `text-critical`
- `text-disabled`

#### Border Colors
- `border-neutral`, `border-neutral-faded`
- `border-primary`, `border-primary-faded`
- `border-positive`, `border-positive-faded`
- `border-warning`, `border-warning-faded`
- `border-critical`, `border-critical-faded`
- `border-disabled`

### Spacing

Uses a 4px base unit system:

- `p-x1` through `p-x20` - Padding (4px to 80px)
- `m-x1` through `m-x20` - Margin
- `gap-x1` through `gap-x20` - Gap
- Directional variants: `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`

### Border Radius

- `rounded-small` (4px)
- `rounded-medium` (8px)
- `rounded-large` (12px)
- `rounded-circular` (999px)
- Directional variants: `rounded-t-`, `rounded-r-`, `rounded-b-`, `rounded-l-`

### Shadows

- `shadow-raised` - Subtle elevation
- `shadow-raised-reverse` - Reverse subtle elevation
- `shadow-overlay` - Modal/overlay shadow
- `shadow-overlay-reverse` - Reverse overlay shadow

## Responsive Design

All classes support responsive variants using your configured breakpoints:

```html
<div class="text-body-2 md:text-featured-1 lg:text-title-6">
  Responsive typography
</div>

<div class="p-x2 sm:p-x4 lg:p-x6">
  Responsive padding
</div>
```

## CSS Variables

The preset automatically generates CSS variables for all design tokens. You can override these in your CSS:

```css
:root {
  --itz-color-foreground-primary: #your-custom-blue;
  --itz-unit-x4: 20px; /* Custom spacing */
}
```

## Design Tokens

All design tokens are based on the Figma design system and are expressed as CSS variables for maximum flexibility and theming capabilities.

## Contributing

This package is part of the `@itzcull/tokens` monorepo. To contribute:

1. Clone the repository
2. Install dependencies: `pnpm install`
3. Make your changes
4. Run tests: `pnpm typecheck && pnpm lint`
5. Build: `pnpm build`

## License

MIT