@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

npm install @metropolle/design-system

🚀 Usage

React Components

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

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

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

CSS Variables

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

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

📚 Documentation

• Storybook - Interactive component documentation
• Design Tokens - Token reference
• Components - Component examples

🛠️ Development

# 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.