@marioschmidt/design-system-tokens 1.0.63 → 1.0.64

package/README.tokens.md

@@ -154,15 +154,15 @@ Figma token types (`$type`) are automatically mapped to platform-specific types:
 | `fontSize` | `var(--token)` (px) | `CGFloat` | `TextUnit` (.sp) |
 | `lineHeight` | `var(--token)` (px) | `CGFloat` | `TextUnit` (.sp) |
 | `letterSpacing` | `var(--token)` (px) | `CGFloat` | `TextUnit` (.sp) |
-| `fontWeight` | `var(--token)` | `CGFloat` | `Int` |
+| `fontWeight` | `var(--token)` | `FontWeight` | `FontWeight` |
 | `number` | `var(--token)` | `CGFloat` | `Float` |
 | `fontFamily` | `var(--token)` | `String` | `String` |
 | `string` | `var(--token)` | `String` | `String` |
 | `boolean` | `var(--token)` | `Bool` | `Boolean` |
-| `opacity` | `var(--token)` (0-100) | `Int` | `Int` |
+| `opacity` | `var(--token)` (0-1) | `CGFloat` | `Float` |
 | `color` | `var(--token)` (hex/rgba) | `Color` | `Color` |
-| `shadow` | `box-shadow` | `ShadowStyle` | `Shadow` |
-| `typography` | CSS classes | `TextStyle` | `TextStyle` |
+| `shadow` | `box-shadow` | `ShadowStyle` | `ShadowStyle` |
+| `typography` | CSS classes | `TextStyle` | `DesignTextStyle` |
 
 ### Token Type Distribution
 
@@ -286,21 +286,30 @@ Separates color selection from content selection:
 
 #### Unified Interfaces (Polymorphic Access)
 
-| Interface | Purpose | Property Count |
-|-----------|---------|----------------|
-| `DesignColorScheme` | All color tokens | 80+ colors |
-| `DesignSizingScheme` | All sizing tokens | 180+ sizing values |
+Both iOS and Android implement identical unified protocols/interfaces for polymorphic theme access:
+
+| Interface | Purpose | Property Count | iOS Type | Android Type |
+|-----------|---------|----------------|----------|--------------|
+| `DesignColorScheme` | All color tokens | 80+ colors | `Color` | `Color` |
+| `DesignSizingScheme` | All sizing tokens | 180+ values | `CGFloat` | `Dp` |
+| `DesignTypographyScheme` | All text styles | 37 styles | `TextStyle` | `DesignTextStyle` |
+| `DesignEffectsScheme` | Shadow tokens (brand-independent) | 8 shadows | `ShadowStyle` | `ShadowStyle` |
+
+> **Note:** Full iOS/Android architecture parity. Both platforms provide `theme.colors`, `theme.sizing`, `theme.typography`, and `theme.effects` accessors with polymorphic brand switching at runtime.
 
 #### Component Token Accessors
 
 All Component Tokens provide theme-aware `current()` accessors:
 
-| Accessor | Selects based on | Values |
-|----------|-----------------|--------|
-| `Colors.current()` | `DesignSystemTheme.isDarkTheme` | Light / Dark |
-| `Sizing.current()` | `DesignSystemTheme.sizeClass` | Compact / Regular |
-| `Typography.current()` | `DesignSystemTheme.sizeClass` | Compact / Regular |
-| `Density.current()` | `DesignSystemTheme.density` | Dense / Default / Spacious |
+| Accessor | Selects based on | iOS Values | Android Values |
+|----------|-----------------|------------|----------------|
+| `Colors.current()` | `isDarkTheme` | Light / Dark | Light / Dark |
+| `Sizing.current()` | `sizeClass` | Compact / Regular | Compact / Medium / Expanded |
+| `Typography.current()` | `sizeClass` | Compact / Regular | Compact / Medium / Expanded |
+| `Density.current()` | `density` | Dense / Default / Spacious | Dense / Default / Spacious |
+| `Effects.current()` | `isDarkTheme` | Light / Dark | Light / Dark |
+
+> **Note:** Android uses Material 3 WindowSizeClass with 3 values (Compact/Medium/Expanded), while iOS uses Apple's 2-value system (compact/regular).
 
 ### iOS SwiftUI (Dual-Axis Architecture)
 
@@ -327,8 +336,13 @@ struct MyView: View {
     @Environment(\.designSystemTheme) var theme
 
     var body: some View {
+        // Polymorphic access via unified protocols
         Text("Hello")
             .foregroundColor(theme.colors.textColorPrimary)
+            .textStyle(theme.typography.headline1)  // Typography
+
+        // Sizing tokens
+        let padding = theme.sizing.gridSpaceRespBase
 
         // Component tokens
         Button("Click") { }
@@ -349,7 +363,8 @@ struct MyView: View {
 |----------|---------|
 | `DesignColorScheme` | All color tokens |
 | `DesignSizingScheme` | All sizing tokens |
-| `DesignEffectsScheme` | Shadow/effect tokens |
+| `DesignTypographyScheme` | All text styles (TextStyle composites) |
+| `DesignEffectsScheme` | Shadow tokens (ShadowStyle composites, brand-independent) |
 
 ### Android XML (Disabled)
 
@@ -408,24 +423,46 @@ Breakpoints use native `@media` queries instead of `data-breakpoint` attributes:
 
 ### Native Sizeclass Mapping (iOS/Android)
 
-For native platforms, 4 web breakpoints map to 2 size classes:
+Native platforms use different size class systems:
+
+#### iOS (2 Size Classes - Apple HIG)
 
 ```
-Web Breakpoints         Native Size Classes
-─────────────────       ───────────────────
+Web Breakpoints         iOS Size Classes
+─────────────────       ────────────────
 xs (320px) ─────┐
-                ├────→  compact (small screens)
+                ├────→  compact (Phones)
 sm (390px) ─────┘
 
 md (600px) ─────┐
-                ├────→  regular (large screens)
+                ├────→  regular (Tablets)
 lg (1024px) ────┘
 ```
 
-| Platform | Compact | Regular |
-|----------|---------|---------|
-| iOS | `UITraitCollection.horizontalSizeClass == .compact` | `.regular` |
-| Android | `sw320dp` | `sw600dp` |
+| Size Class | iOS Trait | Web Breakpoint |
+|------------|-----------|----------------|
+| `compact` | `.compact` | sm (390px) |
+| `regular` | `.regular` | lg (1024px) |
+
+#### Android (3 Size Classes - Material 3 WindowSizeClass)
+
+```
+Web Breakpoints         Android WindowSizeClass
+─────────────────       ───────────────────────
+xs (320px) ─────┐
+                ├────→  Compact (< 600dp)
+sm (390px) ─────┘
+
+md (600px) ──────────→  Medium (600-839dp)
+
+lg (1024px) ─────────→  Expanded (≥ 840dp)
+```
+
+| Size Class | Material 3 Range | Web Breakpoint |
+|------------|------------------|----------------|
+| `Compact` | width < 600dp | sm (390px) |
+| `Medium` | 600dp ≤ width < 840dp | md (600px) |
+| `Expanded` | width ≥ 840dp | lg (1024px) |
 
 ---
 
@@ -499,9 +536,10 @@ Typography tokens in Compose use `.sp` for accessibility scaling:
 |----------|--------|---------|
 | CSS | `0-1` number | `0.5` |
 | iOS Swift | `CGFloat` | `0.5` |
+| Android Compose | `Float` | `0.5f` |
 | Flutter | `double` | `0.5` |
 
-**Note:** Figma exports opacity as percentage (5, 10, 70). Transform converts to decimal: `5` → `0.05`
+**Note:** Figma exports opacity as percentage (5, 10, 70). Transform converts to decimal: `5` → `0.05`. iOS/Swift uses per-token type detection to correctly map opacity tokens to `CGFloat` in component protocols.
 
 ## Output Toggles
 
@@ -553,20 +591,21 @@ dist/
 │       ├── shared/
 │       │   ├── DesignTokenPrimitives.kt   # All primitives consolidated
 │       │   ├── Density.kt                 # Dense/Default/Spacious enum
-│       │   ├── WindowSizeClass.kt         # Compact/Regular enum
+│       │   ├── WindowSizeClass.kt         # Material 3: Compact/Medium/Expanded enum
 │       │   ├── Brand.kt                   # Bild/Sportbild/Advertorial enum
 │       │   └── DesignSystemTheme.kt       # Multi-brand theme provider
 │       └── brands/{brand}/
 │           ├── components/{Component}/
 │           │   └── {Component}Tokens.kt   # Aggregated with current() accessors
 │           ├── semantic/
-│           │   ├── {Brand}SemanticTokens.kt   # Aggregated Light/Dark + Compact/Regular
+│           │   ├── {Brand}SemanticTokens.kt   # Aggregated Light/Dark + Compact/Medium/Expanded
 │           │   ├── color/
 │           │   │   ├── ColorsLight.kt     # BildColorScheme interface + BildLightColors
 │           │   │   └── ColorsDark.kt      # BildDarkColors object
 │           │   └── sizeclass/
 │           │       ├── SizingCompact.kt   # BildSizingScheme interface + BildSizingCompact
-│           │       └── SizingRegular.kt   # BildSizingRegular object
+│           │       ├── SizingMedium.kt    # BildSizingMedium object (Material 3)
+│           │       └── SizingExpanded.kt  # BildSizingExpanded object
 │           └── theme/
 │               └── {Brand}Theme.kt        # CompositionLocal Theme Provider
 └── flutter/                         # Dart Classes (disabled by default)
@@ -582,9 +621,16 @@ Compose output is optimized for Android development:
 |------|---------|----------------|
 | `shared/DesignTokenPrimitives.kt` | All primitives (Colors, Space, Size, Font) | `DesignTokenPrimitives.Colors.bildred` |
 | `shared/Density.kt` | UI density enum | `Density.Dense`, `Density.Default`, `Density.Spacious` |
-| `shared/WindowSizeClass.kt` | Responsive layout enum | `WindowSizeClass.Compact`, `WindowSizeClass.Regular` |
-| `shared/Brand.kt` | Available brands enum | `Brand.Bild`, `Brand.Sportbild`, `Brand.Advertorial` |
-| `shared/DesignSystemTheme.kt` | Multi-brand theme provider | `DesignSystemTheme(brand = Brand.Bild) { }` |
+| `shared/WindowSizeClass.kt` | Material 3 responsive layout enum | `WindowSizeClass.Compact`, `WindowSizeClass.Medium`, `WindowSizeClass.Expanded` |
+| `shared/ColorBrand.kt`, `ContentBrand.kt` | Dual-axis brand enums | `ColorBrand.Bild`, `ContentBrand.Advertorial` |
+| `shared/DesignColorScheme.kt` | Unified color interface | `DesignSystemTheme.colors.textColorPrimary` |
+| `shared/DesignSizingScheme.kt` | Unified sizing interface | `DesignSystemTheme.sizing.gridSpaceRespBase` |
+| `shared/DesignTypographyScheme.kt` | Unified typography interface | `DesignSystemTheme.typography.headline1` |
+| `shared/DesignTextStyle.kt` | Typography composite type | `.toComposeTextStyle()` |
+| `shared/DesignEffectsScheme.kt` | Unified effects interface | `DesignSystemTheme.effects.shadowSoftMd` |
+| `shared/DropShadow.kt`, `ShadowStyle.kt` | Shadow composite types | `.toModifier()` |
+| `shared/EffectsLight.kt`, `EffectsDark.kt` | Light/Dark shadows | Brand-independent, only theme-dependent |
+| `shared/DesignSystemTheme.kt` | Multi-brand theme provider | `DesignSystemTheme(colorBrand, contentBrand) { }` |
 
 **Brand Files:**