npm - @marioschmidt/design-system-tokens - Versions diffs - 1.0.70 → 1.0.72 - Mend

@marioschmidt/design-system-tokens 1.0.70 → 1.0.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1466) hide show

package/docs/css.md CHANGED Viewed

@@ -1,29 +1,29 @@
-# CSS - Design System Tokens
+# 🌐 CSS - Design System Tokens
-> **CSS Custom Properties für Web-Anwendungen**
+> **CSS Custom Properties for Web Applications**
 >
-> Dual-Axis Architektur, responsive, multi-brand ready.
+> Responsive, multi-brand ready with **Dual-Axis Architecture**.
 ---
-## Table of Contents
-- [Quick Start](#quick-start)
-- [Dual-Axis Architecture](#dual-axis-architecture)
-- [File Structure](#file-structure)
-- [Naming Conventions](#naming-conventions)
-- [Data Attributes](#data-attributes)
-- [Bundle Options](#bundle-options)
-- [Token Categories](#token-categories)
-- [Responsive Tokens](#responsive-tokens)
-- [Component Tokens](#component-tokens)
-- [Typography & Effects](#typography--effects)
-- [Usage Examples](#usage-examples)
-- [Storybook](#storybook)
+## 📋 Table of Contents
+- [🚀 Quick Start](#-quick-start)
+- [🔀 Dual-Axis Architecture](#-dual-axis-architecture)
+- [📁 File Structure](#-file-structure)
+- [📝 Naming Conventions](#-naming-conventions)
+- [🏷️ Data Attributes](#️-data-attributes)
+- [📦 Bundle Options](#-bundle-options)
+- [🎨 Token Categories](#-token-categories)
+- [📱 Responsive Tokens](#-responsive-tokens)
+- [🧩 Component Tokens](#-component-tokens)
+- [✍️ Typography & Effects](#️-typography--effects)
+- [💡 Usage Examples](#-usage-examples)
+- [📚 Storybook](#-storybook)
 ---
-## Quick Start
+## 🚀 Quick Start
 ### 1. HTML Setup
@@ -81,7 +81,7 @@ document.documentElement.dataset.contentBrand = 'advertorial';
 ---
-## Dual-Axis Architecture
+## 🔀 Dual-Axis Architecture
 The CSS output uses a **Dual-Axis Architecture** to separate concerns:
@@ -122,7 +122,7 @@ The CSS output uses a **Dual-Axis Architecture** to separate concerns:
 ---
-## File Structure
+## 📁 File Structure
 ```
 dist/css/
@@ -154,7 +154,7 @@ dist/css/
 ---
-## Naming Conventions
+## 📝 Naming Conventions
 CSS tokens use **kebab-case** with hyphen separation before AND after numbers:
@@ -170,7 +170,7 @@ CSS tokens use **kebab-case** with hyphen separation before AND after numbers:
 ---
-## Data Attributes
+## 🏷️ Data Attributes
 ### Required Attributes
@@ -205,7 +205,7 @@ CSS tokens use **kebab-case** with hyphen separation before AND after numbers:
 ---
-## Bundle Options
+## 📦 Bundle Options
 ### Option A: All-in-One Bundle
@@ -244,7 +244,7 @@ Best for: Using only semantic tokens, no component tokens.
 ---
-## Token Categories
+## 🎨 Token Categories
 ### 1. Primitives (shared/primitives.css)
@@ -347,7 +347,7 @@ Component-specific design decisions. Uses both axes.
 ---
-## Responsive Tokens
+## 📱 Responsive Tokens
 ### Breakpoints
@@ -380,7 +380,7 @@ Tokens only appear in media queries when values change:
 ---
-## Component Tokens
+## 🧩 Component Tokens
 ### Structure per Component
@@ -423,7 +423,7 @@ Each component file contains:
 ---
-## Typography & Effects
+## ✍️ Typography & Effects
 ### Typography Classes
@@ -471,7 +471,7 @@ Usage:
 ---
-## Usage Examples
+## 💡 Usage Examples
 ### Standard BILD App
@@ -549,7 +549,7 @@ setDensity('spacious'); // Generous spacing
 ---
-## Shadow DOM / Web Components
+## 🕸️ Shadow DOM / Web Components
 The CSS output is **Shadow DOM compatible** for use with frameworks like **Stencil**, **Lit**, or native Web Components.
@@ -709,11 +709,11 @@ src/components/
   index.html              # Dev/test page with brand switcher
 ```
-> See [CLAUDE.md](../CLAUDE.md#stencil-web-components-integration) for complete Stencil documentation.
+> See [CLAUDE.md](../../CLAUDE.md#stencil-web-components-integration) for complete Stencil documentation.
 ---
-## Storybook
+## 📚 Storybook
 The design system includes a **Storybook 8.x** setup for component development and documentation with full 4-axis token support.
@@ -803,11 +803,11 @@ These pages use MDX with `@storybook/blocks` and include styled visual elements
 | `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.
+> See [CLAUDE.md](../../CLAUDE.md#storybook-integration) for complete Storybook documentation.
 ---
-## Browser Support
+## 🌐 Browser Support
 CSS Custom Properties are supported in all modern browsers:
@@ -825,10 +825,13 @@ For legacy browser support, fallback values are included:
 ---
-## Related Documentation
+## 📖 Related Documentation
-- [JavaScript/React Tokens](./js.md)
-- [Android Compose Tokens](./android.md)
-- [iOS SwiftUI Tokens](./ios.md)
-- [Architecture Overview](../CLAUDE.md)
-- [Storybook Integration](../CLAUDE.md#storybook-integration)
+| Document | Description |
+|----------|-------------|
+| [JavaScript/React](./js.md) | ESM tokens with React ThemeProvider |
+| [Android Compose](./android.md) | Kotlin tokens for Jetpack Compose |
+| [iOS SwiftUI](./ios.md) | Swift tokens for SwiftUI |
+| [Tokens README](../README.md) | Token pipeline overview |
+| [Main README](../../README.md) | Project overview |
+| [CLAUDE.md](../../CLAUDE.md) | Architecture & build details |

package/docs/ios.md CHANGED Viewed

@@ -1,4 +1,4 @@
-# iOS SwiftUI - Design System Tokens
+# 🍎 iOS SwiftUI - Design System Tokens
 > **Swift-based Design Tokens for SwiftUI**
 >
@@ -6,20 +6,25 @@
 ---
-## Table of Contents
-- [Quick Start](#quick-start)
-- [Dual-Axis Architecture](#dual-axis-architecture)
-- [Theme Provider](#theme-provider)
-- [Token Access](#token-access)
-- [Multi-Brand Apps](#multi-brand-apps)
-- [File Structure](#file-structure)
-- [API Reference](#api-reference)
-- [Naming Conventions](#naming-conventions)
+## 📋 Table of Contents
+- [🚀 Quick Start](#-quick-start)
+- [🔀 Dual-Axis Architecture](#-dual-axis-architecture)
+- [🎨 Theme Provider](#-theme-provider)
+- [🔑 Token Access](#-token-access)
+- [🏷️ Multi-Brand Apps](#️-multi-brand-apps)
+- [📁 File Structure](#-file-structure)
+- [🔄 Token Type Mapping](#-token-type-mapping)
+- [📚 API Reference](#-api-reference)
+- [✅ Best Practices](#-best-practices)
+- [🌑 Shadow Support](#-shadow-support)
+- [⚙️ Requirements](#️-requirements)
+- [📝 Naming Conventions](#-naming-conventions)
+- [📖 Related Documentation](#-related-documentation)
 ---
-## Quick Start
+## 🚀 Quick Start
 ### 1. Copy Files
@@ -78,7 +83,7 @@ struct MyView: View {
 ---
-## Dual-Axis Architecture
+## 🔀 Dual-Axis Architecture
 The design system uses a **Dual-Axis Architecture** that separates color selection from content selection:
@@ -137,7 +142,7 @@ Text("Hello")
 ---
-## Theme Provider
+## 🎨 Theme Provider
 ### DesignSystemTheme (Central Entry Point)
@@ -226,7 +231,7 @@ struct AdaptiveView: View {
 ---
-## Token Access
+## 🔑 Token Access
 ### Semantic Tokens (via Theme)
@@ -348,7 +353,7 @@ let fontFamily = DesignTokenPrimitives.Font.gothamXNarrow
 ---
-## Multi-Brand Apps
+## 🏷️ Multi-Brand Apps
 ### Advertorial with Brand Colors
@@ -426,7 +431,7 @@ struct WhiteLabelApp: App {
 ---
-## File Structure
+## 📁 File Structure
 ```
 DesignSystem/
@@ -469,7 +474,7 @@ DesignSystem/
 ---
-## Token Type Mapping
+## 🔄 Token Type Mapping
 Figma token types (`$type`) are automatically mapped to Swift types during build:
@@ -511,7 +516,7 @@ public struct BildSizingCompact: BildSizingScheme {
 ---
-## API Reference
+## 📚 API Reference
 ### Enums
@@ -652,7 +657,7 @@ public enum ButtonTokens {
 ---
-## Best Practices
+## ✅ Best Practices
 ### 1. Use Dual-Axis for Advertorial
@@ -703,7 +708,7 @@ var sizeClass: SizeClass {
 ---
-## Shadow Support
+## 🌑 Shadow Support
 Shadows use the custom `ShadowStyle` type:
@@ -734,7 +739,7 @@ RoundedRectangle(cornerRadius: 8)
 ---
-## Requirements
+## ⚙️ Requirements
 - iOS 17.0+ (for `@Observable`)
 - Swift 5.9+
@@ -742,7 +747,7 @@ RoundedRectangle(cornerRadius: 8)
 ---
-## Naming Conventions
+## 📝 Naming Conventions
 Swift tokens use **camelCase** with lowercase letters after numbers:
@@ -774,17 +779,13 @@ theme.sizing.gridSpaceRespBase           // CGFloat
 ---
-## Related Documentation
+## 📖 Related Documentation
 | Document | Description |
 |----------|-------------|
-| [README.md](../README.md) | Project Overview |
-| [README.tokens.md](../README.tokens.md) | All Platforms |
-| [css.md](./css.md) | CSS Custom Properties |
-| [js.md](./js.md) | JavaScript/React Integration |
-| [android.md](./android.md) | Android Jetpack Compose Integration |
-| [CLAUDE.md](../CLAUDE.md) | Build Pipeline Details |
----
-**Generated by BILD Design System Token Pipeline**
+| [CSS](./css.md) | CSS Custom Properties & Shadow DOM |
+| [JavaScript/React](./js.md) | ESM tokens with React ThemeProvider |
+| [Android Compose](./android.md) | Kotlin tokens for Jetpack Compose |
+| [Tokens README](../README.md) | Token pipeline overview |
+| [Main README](../../README.md) | Project overview |
+| [CLAUDE.md](../../CLAUDE.md) | Architecture & build details |