@anyauth/design-system

Shared design system for AnyAuth projects. OKLCH color tokens and shadcn/ui components.

Installation

npm install @anyauth/design-system

Usage

Import Styles

// Import the complete design system
import '@anyauth/design-system/styles';

// Or import specific parts
import '@anyauth/design-system/theme';  // Just theme variables

Use Components

import { Button, Card, Badge } from '@anyauth/design-system';

function MyComponent() {
  return (
    <Card>
      <Button>Click me</Button>
      <Badge>New</Badge>
    </Card>
  );
}

Use Utilities

import { cn } from '@anyauth/design-system';

// Combine className with conditional classes
const className = cn('base-class', condition && 'conditional-class');

Brand Assets

This package includes the official AnyAuth brand icons in the assets/icons/ directory:

• favicon.ico - Multi-size favicon
• apple-touch-icon.png - iOS home screen icon
• icon-192.png / icon-192-maskable.png - PWA icons (192x192)
• icon-512.png / icon-512-maskable.png - PWA icons (512x512)

Using Icons in Your Project

After installing the package, copy the icons to your public directory:

cp node_modules/@anyauth/design-system/assets/icons/*.{png,ico} ./public/

See assets/README.md for detailed usage instructions.

Publishing

Automated via GitHub Actions on changes to src/ or package.json.

License

MIT