@marioschmidt/design-system-tokens 1.0.69 → 1.0.70

package/{dist/css/README.md → docs/css.md}

@@ -19,6 +19,7 @@
 - [Component Tokens](#component-tokens)
 - [Typography & Effects](#typography--effects)
 - [Usage Examples](#usage-examples)
+- [Storybook](#storybook)
 
 ---
 
@@ -712,6 +713,100 @@ src/components/
 
 ---
 
+## Storybook
+
+The design system includes a **Storybook 8.x** setup for component development and documentation with full 4-axis token support.
+
+### Quick Start
+
+```bash
+# Build tokens first (required)
+npm run build
+
+# Start Storybook dev server (port 6006)
+npm run storybook
+
+# Build static Storybook site
+npm run build:storybook
+```
+
+### Features
+
+**4-Axis Token Switching in Toolbar:**
+
+| Toolbar Control | Options | Description |
+|-----------------|---------|-------------|
+| Color Brand | BILD, SportBILD | Colors + effects axis |
+| Content Brand | BILD, SportBILD, Advertorial | Typography + sizing axis |
+| Dark Mode Toggle (🌙) | Light, Dark | Unified UI + content theming |
+| Density | Default, Dense, Spacious | Spacing density |
+
+### Dark Mode Integration
+
+The `storybook-dark-mode` addon provides unified dark mode:
+
+- **Moon icon (🌙)** in toolbar toggles both Storybook UI and content area
+- Design tokens (`data-theme`) sync automatically via localStorage polling
+- Custom BILD themes match the design system look
+
+### Writing Stories
+
+```typescript
+// src/components/ds-button/ds-button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './ds-button';
+
+const meta: Meta = {
+  title: 'Components/Button',
+  component: 'ds-button',
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {
+  args: { variant: 'primary' },
+  render: (args) => html`
+    <ds-button variant=${args.variant}>Primary Button</ds-button>
+  `,
+};
+```
+
+### Styleguide Documentation
+
+The `src/docs/` directory contains visual documentation pages for design system foundations:
+
+| Page | File | Description |
+|------|------|-------------|
+| Introduction | `intro.mdx` | Overview, brand architecture, links |
+| Colors | `colors.mdx` | Color palettes with visual swatches |
+| Typography | `typography.mdx` | Font families, weights, text styles |
+| Spacing | `spacing.mdx` | Spacing scale, density modes |
+| Effects | `effects.mdx` | Shadow tokens with live previews |
+
+These pages use MDX with `@storybook/blocks` and include styled visual elements like color swatches, spacing bars, and shadow cards.
+
+### Configuration
+
+| File | Purpose |
+|------|---------|
+| `build-config/storybook/main.ts` | Framework, addons, static dirs |
+| `build-config/storybook/preview.ts` | Decorators, toolbar controls |
+| `build-config/storybook/preview-body.html` | Dark mode sync script |
+| `build-config/storybook/manager.ts` | Custom BILD UI themes |
+
+> See [CLAUDE.md](../CLAUDE.md#storybook-integration) for complete Storybook documentation.
+
+---
+
 ## Browser Support
 
 CSS Custom Properties are supported in all modern browsers:
@@ -736,3 +831,4 @@ For legacy browser support, fallback values are included:
 - [Android Compose Tokens](./android.md)
 - [iOS SwiftUI Tokens](./ios.md)
 - [Architecture Overview](../CLAUDE.md)
+- [Storybook Integration](../CLAUDE.md#storybook-integration)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marioschmidt/design-system-tokens",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "description": "BILD Design System Token Pipeline with Style Dictionary - Multi-brand design tokens for BILD, SportBILD, and Advertorial",
   "main": "dist/js/index.js",
   "module": "dist/js/index.js",
@@ -90,42 +90,16 @@
     "./css/*": "./dist/css/*",
     "./scss/*": "./dist/scss/*",
     "./json/*": "./dist/json/*",
-    "./min": {
-      "types": "./dist/js/index.d.ts",
-      "import": "./dist/js.min/index.js"
-    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist/",
-    "README.md",
-    "README.tokens.md",
-    "LICENSE"
+    "docs/"
   ],
   "scripts": {
-    "preprocess": "node scripts/tokens/preprocess.js",
-    "build:tokens": "npm run preprocess && node scripts/tokens/build.js",
-    "build:bundles": "node scripts/tokens/bundles.js",
-    "build:stencil": "stencil build --config build-config/stencil/stencil.config.ts",
-    "dev:stencil": "stencil build --dev --watch --serve --config build-config/stencil/stencil.config.ts",
-    "build": "npm run build:tokens && npm run build:bundles",
-    "build:all": "npm run build && npm run build:stencil",
-    "storybook": "storybook dev -p 6006 -c build-config/storybook",
-    "prestorybook": "npm run build:all",
-    "build:storybook": "storybook build -c build-config/storybook -o dist/storybook",
-    "prebuild:storybook": "npm run build:all",
-    "watch": "nodemon --watch src/design-tokens --ext json --exec npm run build:tokens",
-    "clean": "rm -rf dist tokens",
-    "prepublishOnly": "npm run build:all"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/UXWizard25/vv-token-test-v3.git"
+    "build": "node ../../scripts/tokens/preprocess.js && node ../../scripts/tokens/build.js && node ../../scripts/tokens/bundles.js",
+    "clean": "rm -rf dist .tokens"
   },
-  "bugs": {
-    "url": "https://github.com/UXWizard25/vv-token-test-v3/issues"
-  },
-  "homepage": "https://github.com/UXWizard25/vv-token-test-v3#readme",
   "keywords": [
     "design-tokens",
     "style-dictionary",
@@ -133,33 +107,11 @@
     "design-system",
     "bild",
     "sportbild",
-    "css-variables",
-    "scss",
-    "tokens"
+    "css-variables"
   ],
-  "author": "UXWizard25",
+  "author": "BILD Design System Team",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
-  },
-  "devDependencies": {
-    "@stencil/core": "^4.38.3",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@storybook/web-components-vite": "^8.6.14",
-    "@svgr/core": "^8.1.0",
-    "@types/react": "^19.2.7",
-    "fantasticon": "^3.0.0",
-    "lit": "^3.3.1",
-    "nodemon": "^3.0.1",
-    "storybook": "^8.6.14",
-    "style-dictionary": "^4.2.0",
-    "svg2vectordrawable": "^2.9.1",
-    "svgo": "^4.0.0",
-    "typescript": "^5.9.3",
-    "vite": "^5.4.21"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 UXWizard25
-
-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.