# @metropolle/design-system

A unified design system for the Metropolle platform, providing consistent design tokens, React components, and styling utilities.

## 🎨 Features

- **Design Tokens**: CSS variables, JSON, and TypeScript definitions
- **React Components**: Reusable UI components with TypeScript support
- **Glass Card Design**: Modern glassmorphism components
- **Typography System**: Consistent text styling and branding
- **CSS Utilities**: Pre-built CSS classes and variables

## 📦 Installation

```bash
npm install @metropolle/design-system
```

## 🚀 Usage

### React Components

```tsx
import { GlassCard, Typography, Button } from '@metropolle/design-system';

function App() {
  return (
    <GlassCard variant="light">
      <Typography variant="brand">Welcome to Metropolle</Typography>
      <Button>Get Started</Button>
    </GlassCard>
  );
}
```

### Design Tokens

```tsx
import { tokens, getToken, getCSSVar } from '@metropolle/design-system';

// Access token values
const primaryColor = getToken('colors', 'primary');
const cssVar = getCSSVar('colors', 'primary');
```

### CSS Variables

```css
@import '@metropolle/design-system/dist/css/tokens.css';

.my-component {
  background: var(--mds-colors-primary);
  border-radius: var(--mds-spacing-borderRadius-lg);
}
```

## 📚 Documentation

- [Storybook](https://design.metropolle.com) - Interactive component documentation
- [Design Tokens](https://design.metropolle.com/?path=/docs/introduction--docs) - Token reference
- [Components](https://design.metropolle.com/?path=/docs/components-glasscard--docs) - Component examples

## 🛠️ Development

```bash
# Install dependencies
npm install

# Start Storybook
npm run dev

# Build the package
npm run build

# Run tests
npm test
```

## 📄 License

MIT License - see LICENSE file for details.