@itzcull/tokens-itzcull-ui

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

Installation

pnpm add @itzcull/tokens-itzcull-ui

Usage

Basic Setup

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

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

Custom Configuration

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:

<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:

: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