@moto-nrw/design-system 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ganztagshelden / moto-nrw
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+<p align="center">
+  <img src="docs/logo.png" alt="Ganztagshelden Logo" width="120" />
+</p>
+
+<h1 align="center">Ganztagshelden - Design System</h1>
+
+<p align="center">
+  Shared component library and design tokens for the Ganztagshelden ecosystem.<br/>
+  Consumed by <strong>project-phoenix</strong>, <strong>PyrePortal</strong>, and <strong>website</strong>.
+</p>
+
+<p align="center">
+  <a href="https://moto-nrw.github.io/design-system/"><strong>📖 Storybook</strong></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://github.com/moto-nrw/design-system/actions"><img src="https://github.com/moto-nrw/design-system/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
+</p>
+
+---
+
+## Brand Color System
+
+<img src="docs/brand-palette.png" alt="Brand Color Palette" width="100%" />
+
+| Palette | Steps | Usage |
+|---------|-------|-------|
+| **Steel** | 50–900 (10) | Logo, text, borders, backgrounds |
+| **Sage** | 100–900 (5) | Primary accent — buttons, CTAs, links, success |
+| **Warm** | 50–900 (10) | Secondary accent — warnings, highlights, badges |
+| **Red** | 50–600 (6) | Warm terracotta — error, destructive states |
+
+## Components (26)
+
+| Category | Components |
+|----------|-----------|
+| **Brand** | Logo |
+| **Actions** | Button (7 variants, loading) |
+| **Input** | Input (password toggle), Textarea, Select, SearchBar, Checkbox, Radio, Toggle |
+| **Navigation** | Tabs (sliding indicator), FilterChips |
+| **Feedback** | Alert, Toast, Spinner, Skeleton, StatusDot, Pill (6 colors) |
+| **Overlay** | Modal, ConfirmationModal, DropdownMenu |
+| **Data** | Badge, Avatar |
+| **Layout** | Card (hoverable glow), Accordion, Divider |
+| **Icons** | [Lucide](https://lucide.dev) (peer dependency) |
+
+## Quick Start
+
+```bash
+pnpm install
+pnpm storybook    # localhost:6006
+```
+
+## Usage in Consumer Repos
+
+### 1. Setup (one-time)
+
+Add `.npmrc` to the repo root:
+
+```
+@moto-nrw:registry=https://npm.pkg.github.com
+```
+
+Install:
+
+```bash
+pnpm add @moto-nrw/design-system lucide-react
+```
+
+### 2. Import Tokens
+
+For **Tailwind v4** consumers (recommended):
+
+```css
+/* globals.css */
+@import "tailwindcss";
+@import "@moto-nrw/design-system/tailwind";
+```
+
+Or import CSS variables directly:
+
+```tsx
+import "@moto-nrw/design-system/tokens";
+```
+
+### 3. Use Components
+
+```tsx
+import { Button, Card, Modal, Pill } from "@moto-nrw/design-system";
+import { Search, Settings } from "lucide-react";
+
+function Example() {
+  return (
+    <Card hoverable>
+      <Button variant="primary">Speichern</Button>
+      <Pill label="Aktiv" color="green" />
+    </Card>
+  );
+}
+```
+
+### Package Exports
+
+```tsx
+import { Button, Card, ... } from "@moto-nrw/design-system";     // components
+import "@moto-nrw/design-system/tokens";                          // CSS variables
+import "@moto-nrw/design-system/tailwind";                        // Tailwind v4 theme
+```
+
+## CI Setup (GitHub Actions)
+
+```yaml
+- uses: actions/setup-node@v6
+  with:
+    registry-url: https://npm.pkg.github.com
+    scope: "@moto-nrw"
+
+- run: pnpm install
+  env:
+    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+```
+
+## Development
+
+| Command | Purpose |
+|---------|---------|
+| `pnpm build` | Full production build (tokens + tsup + validation) |
+| `pnpm storybook` | Component playground on localhost:6006 |
+| `pnpm test:run` | Run tests |
+| `pnpm lint` | Lint with Biome |
+| `pnpm tokens` | Regenerate CSS vars from token JSONs |
+| `pnpm knip` | Find unused code |
+
+## Release Workflow
+
+1. Make changes + `pnpm changeset` to describe what changed
+2. Commit and push to `development`
+3. CI creates a "Version Packages" PR (bumps version + CHANGELOG)
+4. Merge that PR — CI publishes to GitHub Packages
+
+Consumer repos get auto-updated via Dependabot.
+
+## License
+
+MIT