npm package: @mattiaswikman/brillance-design-system
Description: A comprehensive design system based on the Brillance SaaS landing page template, built with React, TypeScript, and Tailwind CSS.
Latest version: 0.1.0

# @brillance/design-system

A comprehensive design system based on the Brillance SaaS landing page template, built with React, TypeScript, and Tailwind CSS.

## Features

- 🎨 **Modern Design Tokens** - OKLCH color space for better perceptual uniformity
- 🧩 **Modular Components** - Built on Radix UI primitives with consistent APIs
- 🌙 **Dark Mode Support** - Complete theme system with next-themes integration
- 📱 **Responsive Design** - Mobile-first approach with consistent breakpoints
- ♿ **Accessibility First** - WCAG compliant with proper ARIA support
- 🔧 **TypeScript** - Full type safety with excellent developer experience
- 📦 **Tree Shakeable** - Import only what you need

## Installation

\`\`\`bash
npm install @brillance/design-system
# or
yarn add @brillance/design-system
# or
pnpm add @brillance/design-system
\`\`\`

## Setup

1. **Install peer dependencies:**

\`\`\`bash
npm install react react-dom tailwindcss
\`\`\`

2. **Import the CSS in your app:**

\`\`\`tsx
// In your main CSS file or _app.tsx
import '@brillance/design-system/styles/globals.css'
\`\`\`

3. **Configure Tailwind CSS:**

\`\`\`javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@brillance/design-system/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      // The design system will automatically extend your theme
    },
  },
  plugins: [],
}
\`\`\`

## Usage

### Components

\`\`\`tsx
import { Button, Card, CardHeader, CardTitle, CardContent } from '@brillance/design-system'

function MyApp() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Brillance</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default" size="lg">
          Get Started
        </Button>
      </CardContent>
    </Card>
  )
}
\`\`\`

### Design Tokens

\`\`\`tsx
import { colors, typography, spacing } from '@brillance/design-system'

// Use design tokens in your custom components
const customStyles = {
  backgroundColor: colors.primary,
  fontFamily: typography.fontFamily.sans.join(', '),
  padding: spacing[4],
}
\`\`\`

### Utilities

\`\`\`tsx
import { cn } from '@brillance/design-system'

// Merge classes with conflict resolution
const className = cn(
  'bg-primary text-white',
  isActive && 'bg-secondary',
  'px-4 py-2'
)
\`\`\`

## Components

### Button

\`\`\`tsx
<Button variant="default" size="lg">Primary Button</Button>
<Button variant="outline" size="sm">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
\`\`\`

### Card

\`\`\`tsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    Card content goes here
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>
\`\`\`

### Input

\`\`\`tsx
<Input placeholder="Enter your email" type="email" />
\`\`\`

### Badge

\`\`\`tsx
<Badge variant="default">New</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="outline">Coming Soon</Badge>
\`\`\`

## Customization

### Custom Colors

You can override the default colors by updating your CSS custom properties:

\`\`\`css
:root {
  --primary: oklch(0.3 0.2 250); /* Custom blue */
  --secondary: oklch(0.8 0.1 120); /* Custom green */
}
\`\`\`

### Custom Components

Extend the design system with your own components:

\`\`\`tsx
import { cn, Button, type ButtonProps } from '@brillance/design-system'

interface CustomButtonProps extends ButtonProps {
  loading?: boolean
}

export function CustomButton({ loading, children, className, ...props }: CustomButtonProps) {
  return (
    <Button
      className={cn(
        loading && 'opacity-50 cursor-not-allowed',
        className
      )}
      disabled={loading}
      {...props}
    >
      {loading ? 'Loading...' : children}
    </Button>
  )
}
\`\`\`

## Development

\`\`\`bash
# Install dependencies
npm install

# Build the package
npm run build

# Start Storybook for development
npm run storybook
\`\`\`

## Publishing

1. Update the version in `package.json`
2. Build the package: `npm run build`
3. Publish to npm: `npm publish`

## License

MIT License - see LICENSE file for details.