{"_id":"@clarityonedesign/design-system","_rev":"2-2653a57059a998de89ae1a60628fbdb7","name":"@clarityonedesign/design-system","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@clarityonedesign/design-system","version":"0.1.0","keywords":["design-system","clarityone","react-components"],"author":{"name":"ClarityOne Design"},"license":"MIT","_id":"@clarityonedesign/design-system@0.1.0","maintainers":[{"name":"clarityone","email":"dominique.pauwels@clarityone.org"}],"dist":{"shasum":"4a0a828f4c8589f51f6b28183ea693b615e223e4","tarball":"https://registry.npmjs.org/@clarityonedesign/design-system/-/design-system-0.1.0.tgz","fileCount":10,"integrity":"sha512-FZS00k8FpCHn8YCbsxMlxop6sovF5lmuRk9he6/OdxnrFifsUxwCX3ybb72nOmLdn1qLRSxq7+3pn/r1dyxhjg==","signatures":[{"sig":"MEUCIFP8oi1sxp+gZRXFqGqovIy/9NPKxSFKAKs4bo1kJjKYAiEAhwnxT35QI4qVJgYh9d5cfBXGrAANAQJi0/o3CF2TsGk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10270},"main":"index.js","type":"module","gitHead":"6b04ff0dc896aea4ba299c9060edb50c2ec7746a","_npmUser":{"name":"clarityone","email":"dominique.pauwels@clarityone.org"},"_npmVersion":"10.8.2","description":"Het centrale design system voor ClarityOne projecten.","directories":{},"_nodeVersion":"20.19.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1763036192282_0.6542871491648037","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@clarityonedesign/design-system","version":"0.2.0","description":"Modern design system met helder blauw theme, design tokens en component styles voor ClarityOne projecten.","main":"index.js","type":"module","keywords":["design-system","design-tokens","clarityone","react","css-in-js","styled-components","blue-theme","dark-mode"],"author":{"name":"ClarityOne Design"},"license":"MIT","publishConfig":{"access":"public"},"peerDependencies":{"react":"^18.0.0"},"_id":"@clarityonedesign/design-system@0.2.0","gitHead":"f806d849c50f9abd55f153ec17602958559d8275","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-VVmpp6hdoOuy4EnxBwJtIyHd14z1HdpewaMM0RC8voWVdxhssQKs/R7r2tck6jnD70OJPLGnqfWF1IgTq1IDzQ==","shasum":"63ef51dcb9852fd76977be6af377b1fc63145a3b","tarball":"https://registry.npmjs.org/@clarityonedesign/design-system/-/design-system-0.2.0.tgz","fileCount":10,"unpackedSize":15492,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGecm8zmVjcWZduUlYX/w70mY7QbBlW/UB5WWCohR6fUAiBJHWywQCx8pzP0Kklw1p/s32tSynGM5HDDMOkOvyjVbQ=="}]},"_npmUser":{"name":"clarityone","email":"dominique.pauwels@clarityone.org"},"directories":{},"maintainers":[{"name":"clarityone","email":"dominique.pauwels@clarityone.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.2.0_1763124128622_0.23161346268945038"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-13T12:16:32.163Z","modified":"2025-11-14T12:42:09.067Z","0.1.0":"2025-11-13T12:16:32.490Z","0.2.0":"2025-11-14T12:42:08.827Z"},"author":{"name":"ClarityOne Design"},"license":"MIT","keywords":["design-system","design-tokens","clarityone","react","css-in-js","styled-components","blue-theme","dark-mode"],"description":"Modern design system met helder blauw theme, design tokens en component styles voor ClarityOne projecten.","maintainers":[{"name":"clarityone","email":"dominique.pauwels@clarityone.org"}],"readme":"# @clarityonedesign/design-system\n\nHet centrale design system voor ClarityOne projecten. Modern blauw theme met design tokens, component styles en dark mode support.\n\n## 🎨 Kleurenpalet\n\n### Brand Kleuren\n- **Primary (Blauw):** `#136dec` - Betrouwbaar en professioneel\n- **Accent (Oranje):** `#F5A623` - Energie en aandacht\n- **Neutrals:** Cool grays (`#F8F9FA` tot `#212529`)\n\n### Status Kleuren\n- **Success:** `#28A745` - Groen voor succes\n- **Error:** `#DC3545` - Rood voor fouten\n- **Warning:** `#FFC107` - Amber voor waarschuwingen\n- **Info:** `#136dec` - Blauw voor informatie\n\n### Dark Mode\n- **Background Dark:** `#101822`\n- **Card Dark:** `#1a2431`\n- **Text Dark:** `#F8F9FA`\n\n## 📦 Installatie\n\n```bash\nnpm install @clarityonedesign/design-system\n```\n\n## 🚀 Gebruik\n\n### Design Tokens (JavaScript)\n\n```javascript\nimport { colors, spacing, typography } from '@clarityonedesign/design-system';\n\nconsole.log(colors.primary[500]);    // \"#136dec\" (helder blauw)\nconsole.log(colors.accent[500]);     // \"#F5A623\" (oranje)\nconsole.log(colors.semantic.success); // \"#28A745\" (groen)\nconsole.log(spacing.md);             // \"1rem\"\nconsole.log(borderRadius.lg);        // \"1rem\"\n```\n\n### CSS Variabelen Genereren\n\n```javascript\nimport { generateCSSVariables } from '@clarityonedesign/design-system';\n\nconst cssVars = generateCSSVariables();\n// Inject in <style> tag of CSS bestand\n```\n\n### Component Styles\n\n```javascript\nimport { buttonStyles, cardStyles } from '@clarityonedesign/design-system';\n\n// Gebruik in styled-components, emotion, of vanilla CSS\nconst PrimaryButton = styled.button`\n  ${buttonStyles.base}\n  ${buttonStyles.variants.primary}\n  ${buttonStyles.sizes.md}\n`;\n\nconst AccentButton = styled.button`\n  ${buttonStyles.base}\n  ${buttonStyles.variants.accent}\n  ${buttonStyles.sizes.lg}\n`;\n\nconst InfoCard = styled.div`\n  ${cardStyles.base}\n  ${cardStyles.variants.elevated}\n  ${cardStyles.padding.lg}\n`;\n```\n\n### Alle Tokens Importeren\n\n```javascript\nimport tokens from '@clarityonedesign/design-system';\n\nconsole.log(tokens.colors.primary[500]);\nconsole.log(tokens.spacing.lg);\nconsole.log(tokens.fontSize['2xl']);\n```\n\n## 🏗️ Apps die dit design system gebruiken\n\n- Buddy App Maastricht - Community platform\n- [Jouw App 2]\n- [Jouw App 3]\n- Landing Page\n\n## 📝 Licentie\n\nMIT © ClarityOne Design\n\n---\n\n## 🚀 Publiceren naar NPM\n\n**In de Shell:**\n\n```bash\n# Login\nnpm login\n\n# Publiceer\nnpm publish\n```\n\nKlaar! Je package is nu beschikbaar op:\nhttps://www.npmjs.com/package/@clarityonedesign/design-system\n","readmeFilename":"README.md"}