@clarityonedesign/design-system

Het centrale design system voor ClarityOne projecten. Modern blauw theme met design tokens, component styles en dark mode support.

🎨 Kleurenpalet

Brand Kleuren

• Primary (Blauw): #136dec - Betrouwbaar en professioneel
• Accent (Oranje): #F5A623 - Energie en aandacht
• Neutrals: Cool grays (#F8F9FA tot #212529)

Status Kleuren

• Success: #28A745 - Groen voor succes
• Error: #DC3545 - Rood voor fouten
• Warning: #FFC107 - Amber voor waarschuwingen
• Info: #136dec - Blauw voor informatie

Dark Mode

• Background Dark: #101822
• Card Dark: #1a2431
• Text Dark: #F8F9FA

📦 Installatie

npm install @clarityonedesign/design-system

🚀 Gebruik

Design Tokens (JavaScript)

import { colors, spacing, typography } from '@clarityonedesign/design-system';

console.log(colors.primary[500]);    // "#136dec" (helder blauw)
console.log(colors.accent[500]);     // "#F5A623" (oranje)
console.log(colors.semantic.success); // "#28A745" (groen)
console.log(spacing.md);             // "1rem"
console.log(borderRadius.lg);        // "1rem"

CSS Variabelen Genereren

import { generateCSSVariables } from '@clarityonedesign/design-system';

const cssVars = generateCSSVariables();
// Inject in <style> tag of CSS bestand

Component Styles

import { buttonStyles, cardStyles } from '@clarityonedesign/design-system';

// Gebruik in styled-components, emotion, of vanilla CSS
const PrimaryButton = styled.button`
  ${buttonStyles.base}
  ${buttonStyles.variants.primary}
  ${buttonStyles.sizes.md}
`;

const AccentButton = styled.button`
  ${buttonStyles.base}
  ${buttonStyles.variants.accent}
  ${buttonStyles.sizes.lg}
`;

const InfoCard = styled.div`
  ${cardStyles.base}
  ${cardStyles.variants.elevated}
  ${cardStyles.padding.lg}
`;

Alle Tokens Importeren

import tokens from '@clarityonedesign/design-system';

console.log(tokens.colors.primary[500]);
console.log(tokens.spacing.lg);
console.log(tokens.fontSize['2xl']);

🏗️ Apps die dit design system gebruiken

• Buddy App Maastricht - Community platform
• [Jouw App 2]
• [Jouw App 3]
• Landing Page

📝 Licentie

MIT © ClarityOne Design

🚀 Publiceren naar NPM

In de Shell:

# Login
npm login

# Publiceer
npm publish

Klaar! Je package is nu beschikbaar op: https://www.npmjs.com/package/@clarityonedesign/design-system