@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);
}

Stylesheets

Every stylesheet the package publishes, by its exports entry:

| Import | File | What it styles | | --- | --- | --- | | @metropolle/design-system/css | dist/css/tokens.css | Design tokens as CSS variables (--mds-*) | | @metropolle/design-system/css/components | dist/css/components.css | The React components of this package | | @metropolle/design-system/css/mermaid.css | dist/css/mermaid.css | Mermaid diagrams themed with the tokens | | @metropolle/design-system/css/liquid-glass.css | dist/css/liquid-glass.css | Liquid-glass surfaces |

@import '@metropolle/design-system/css';
@import '@metropolle/design-system/css/components';

📚 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

# Lint and type-check
npm run lint
npm run type-check

# Build the static Storybook
npm run build:storybook

Guides in docs/: integration, version management, git workflow and dashboard components.

Validação pré-merge (mq-integration)

No protocolo mq1 (Fatia 3-1), cada candidato composto em merge-queue/design/<job>/<attempt> executa o workflow .github/workflows/integration.yml (npm ci, npm run build e npm run build:storybook, sem publicação e sem credenciais) antes do push fast-forward em develop.

📄 License

MIT License - see LICENSE file for details.