@marioschmidt/design-system-tokens 1.0.63 → 1.0.65

package/README.android.md

@@ -118,18 +118,22 @@ All brands implement common interfaces for polymorphic access:
 
 | Interface | Purpose | Implementations |
 |-----------|---------|-----------------|
-| `DesignColorScheme` | All color tokens | `BildColorScheme`, `SportbildColorScheme` |
-| `DesignSizingScheme` | All sizing tokens | `BildSizingScheme`, `SportbildSizingScheme`, `AdvertorialSizingScheme` |
+| `DesignColorScheme` | All color tokens | `BildLightColors`, `BildDarkColors`, `SportbildLightColors`, `SportbildDarkColors` |
+| `DesignSizingScheme` | All sizing tokens | `BildSizingCompact`, `BildSizingMedium`, `BildSizingExpanded`, `SportbildSizing*`, `AdvertorialSizing*` |
+| `DesignTypographyScheme` | All text styles | `BildTypographyCompact`, `BildTypographyMedium`, `BildTypographyExpanded`, `SportbildTypography*`, `AdvertorialTypography*` |
+| `DesignEffectsScheme` | All shadow tokens | `EffectsLight`, `EffectsDark` (brand-independent, shared) |
 
 ```kotlin
 // Polymorphic access - works with any brand
 val colors: DesignColorScheme = DesignSystemTheme.colors
 val sizing: DesignSizingScheme = DesignSystemTheme.sizing
+val typography: DesignTypographyScheme = DesignSystemTheme.typography
+val effects: DesignEffectsScheme = DesignSystemTheme.effects  // Brand-independent
 
 // Access tokens without knowing the specific brand
 Text(
     color = colors.textColorPrimary,  // Works for Bild, Sportbild
-    fontSize = sizing.headline1FontSize  // Works for all brands
+    style = typography.headline1.toComposeTextStyle()  // Works for all brands
 )
 ```
 
@@ -154,7 +158,7 @@ fun MyApp() {
         colorBrand = ColorBrand.Bild,           // or .Sportbild
         contentBrand = ContentBrand.Bild,       // or .Sportbild, .Advertorial
         darkTheme = isSystemInDarkTheme(),
-        sizeClass = WindowSizeClass.Compact,    // or .Regular
+        sizeClass = WindowSizeClass.Compact,    // or .Medium, .Expanded
         density = Density.Default               // or .Dense, .Spacious
     ) {
         // Your app content
@@ -172,7 +176,15 @@ fun MyApp() {
 | `sizeClass` | `WindowSizeClass` | `Compact` | Responsive Layout |
 | `density` | `Density` | `Default` | UI Density |
 
-### Calculating WindowSizeClass
+### Calculating WindowSizeClass (Material 3)
+
+The Design System uses Material 3 WindowSizeClass breakpoints:
+
+| WindowSizeClass | Width Range | Typical Devices |
+|-----------------|-------------|-----------------|
+| `Compact` | < 600dp | Phones (portrait) |
+| `Medium` | 600dp – 839dp | Small tablets, foldables |
+| `Expanded` | ≥ 840dp | Large tablets, desktops |
 
 ```kotlin
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
@@ -183,7 +195,8 @@ fun rememberDesignSystemSizeClass(activity: Activity): WindowSizeClass {
     val windowSizeClass = calculateWindowSizeClass(activity)
     return when (windowSizeClass.widthSizeClass) {
         WindowWidthSizeClass.Compact -> WindowSizeClass.Compact
-        else -> WindowSizeClass.Regular
+        WindowWidthSizeClass.Medium -> WindowSizeClass.Medium
+        WindowWidthSizeClass.Expanded -> WindowSizeClass.Expanded
     }
 }
 ```
@@ -204,10 +217,21 @@ fun SemanticExample() {
     val bgColor = DesignSystemTheme.colors.surfaceColorPrimary
     val accentColor = DesignSystemTheme.colors.textColorAccent
 
-    // Sizing - automatically Compact/Regular, polymorphic type
+    // Sizing - automatically Compact/Medium/Expanded, polymorphic type
     val headlineSize = DesignSystemTheme.sizing.headline1FontSize
     val bodySize = DesignSystemTheme.sizing.bodyFontSize
 
+    // Typography - composite DesignTextStyle objects
+    val headlineStyle = DesignSystemTheme.typography.headline1
+    Text(
+        text = "Hello",
+        style = headlineStyle.toComposeTextStyle()
+    )
+
+    // Effects/Shadows - brand-independent, only Light/Dark
+    val cardShadow = DesignSystemTheme.effects.shadowSoftMd
+    Box(modifier = Modifier.then(cardShadow.toModifier())) { ... }
+
     // Query theme state
     val isDark = DesignSystemTheme.isDarkTheme
     val sizeClass = DesignSystemTheme.sizeClass
@@ -224,7 +248,7 @@ For component-specific tokens with automatic theme selection:
 ```kotlin
 import com.bild.designsystem.bild.components.ButtonTokens
 import com.bild.designsystem.bild.components.CardTokens
-import com.bild.designsystem.bild.components.TeaserTokens
+import com.bild.designsystem.bild.components.MenuTokens
 
 @Composable
 fun ComponentExample() {
@@ -232,14 +256,20 @@ fun ComponentExample() {
     val buttonBg = ButtonTokens.Colors.current().buttonPrimaryBgColorIdle
     val buttonHover = ButtonTokens.Colors.current().buttonPrimaryBgColorHover
 
-    // Sizing - automatically Compact/Regular
+    // Sizing - automatically Compact/Medium/Expanded
     val buttonHeight = ButtonTokens.Sizing.current().buttonContentMinHeightSize
     val cardRadius = CardTokens.Sizing.current().cardBorderRadius
 
-    // Typography - automatically Compact/Regular
-    val fontFamily = ButtonTokens.Typography.current().buttonLabelFontFamily
-    val fontSize = ButtonTokens.Typography.current().buttonLabelFontSize
-    val fontWeight = ButtonTokens.Typography.current().buttonLabelFontWeight
+    // Typography - composite DesignTextStyle objects (Compact/Medium/Expanded)
+    val buttonLabel: DesignTextStyle = ButtonTokens.Typography.current().buttonLabel
+    Text(
+        text = "Click me",
+        style = buttonLabel.toComposeTextStyle()
+    )
+
+    // Effects - automatically Light/Dark (for components with shadows)
+    val menuShadow = MenuTokens.Effects.current().menuShadow
+    Box(modifier = Modifier.then(menuShadow.toModifier())) { ... }
 
     // Density - automatically Dense/Default/Spacious
     val gap = ButtonTokens.Density.current().denseButtonContentGapSpace
@@ -255,9 +285,10 @@ When you need a specific mode explicitly:
 val lightColor = ButtonTokens.Colors.Light.buttonPrimaryBgColorIdle
 val darkColor = ButtonTokens.Colors.Dark.buttonPrimaryBgColorIdle
 
-// Direct Compact/Regular access
+// Direct Compact/Medium/Expanded access
 val compactSize = ButtonTokens.Sizing.Compact.buttonLabelFontSize
-val regularSize = ButtonTokens.Sizing.Regular.buttonLabelFontSize
+val mediumSize = ButtonTokens.Sizing.Medium.buttonLabelFontSize
+val expandedSize = ButtonTokens.Sizing.Expanded.buttonLabelFontSize
 
 // Direct Dense/Default/Spacious access
 val denseGap = ButtonTokens.Density.Dense.denseButtonContentGapSpace
@@ -369,26 +400,38 @@ com/bild/designsystem/
 ├── shared/                              # Brand-independent
 │   ├── DesignTokenPrimitives.kt         # All Primitives
 │   ├── Density.kt                       # Dense/Default/Spacious
-│   ├── WindowSizeClass.kt               # Compact/Regular
+│   ├── WindowSizeClass.kt               # Compact/Medium/Expanded (Material 3)
 │   ├── ColorBrand.kt                    # Bild/Sportbild (colors only)
 │   ├── ContentBrand.kt                  # Bild/Sportbild/Advertorial (all)
 │   ├── DesignColorScheme.kt             # Unified color interface
 │   ├── DesignSizingScheme.kt            # Unified sizing interface
+│   ├── DesignTypographyScheme.kt        # Unified typography interface
+│   ├── DesignTextStyle.kt               # Typography composite type
+│   ├── DesignEffectsScheme.kt           # Unified effects interface
+│   ├── DropShadow.kt                    # Shadow layer data class
+│   ├── ShadowStyle.kt                   # Shadow composite with toModifier()
+│   ├── EffectsLight.kt                  # Light mode shadows (brand-independent)
+│   ├── EffectsDark.kt                   # Dark mode shadows (brand-independent)
 │   └── DesignSystemTheme.kt             # Central Dual-Axis Theme Provider
 │
 ├── bild/                                # Brand: BILD
 │   ├── semantic/
 │   │   ├── color/
-│   │   │   ├── ColorsLight.kt           # BildColorScheme : DesignColorScheme
+│   │   │   ├── ColorsLight.kt           # BildLightColors : DesignColorScheme
 │   │   │   └── ColorsDark.kt            # BildDarkColors
-│   │   └── sizeclass/
-│   │       ├── SizingCompact.kt         # BildSizingScheme : DesignSizingScheme
-│   │       └── SizingRegular.kt         # BildSizingRegular
+│   │   ├── sizeclass/
+│   │   │   ├── SizingCompact.kt         # BildSizingCompact : DesignSizingScheme
+│   │   │   ├── SizingMedium.kt          # BildSizingMedium
+│   │   │   └── SizingExpanded.kt        # BildSizingExpanded
+│   │   └── typography/
+│   │       ├── TypographyCompact.kt     # BildTypographyCompact : DesignTypographyScheme
+│   │       ├── TypographyMedium.kt      # BildTypographyMedium
+│   │       └── TypographyExpanded.kt    # BildTypographyExpanded
 │   └── components/
 │       ├── Button/
 │       │   └── ButtonTokens.kt          # Colors/Sizing/Typography/Density
-│       ├── Card/
-│       │   └── CardTokens.kt
+│       ├── Menu/
+│       │   └── MenuTokens.kt            # Colors/Sizing/Typography/Density/Effects
 │       └── ... (50+ Components)
 │
 ├── sportbild/                           # Brand: SportBILD
@@ -396,9 +439,14 @@ com/bild/designsystem/
 │
 └── advertorial/                         # Brand: Advertorial
     └── semantic/                        # No colors (uses ColorBrand)
-        └── sizeclass/                   # Own sizing only
-            ├── SizingCompact.kt
-            └── SizingRegular.kt
+        ├── sizeclass/                   # Own sizing
+        │   ├── SizingCompact.kt
+        │   ├── SizingMedium.kt
+        │   └── SizingExpanded.kt
+        └── typography/                  # Own typography
+            ├── TypographyCompact.kt
+            ├── TypographyMedium.kt
+            └── TypographyExpanded.kt
 ```
 
 ---
@@ -413,15 +461,15 @@ Figma token types (`$type`) are automatically mapped to Kotlin types during buil
 | `fontSize` | `TextUnit` | `16.sp` |
 | `lineHeight` | `TextUnit` | `24.sp` |
 | `letterSpacing` | `TextUnit` | `(-0.5).sp` |
-| `fontWeight` | `Int` | `700` |
+| `fontWeight` | `FontWeight` | `FontWeight.Bold` |
 | `number` | `Float` | `4.5f` |
 | `fontFamily` | `String` | `"Gotham XNarrow"` |
 | `string` | `String` | `"xs/sm/md"` |
 | `boolean` | `Boolean` | `true` / `false` |
 | `opacity` | `Int` | `50` (0-100 %) |
 | `color` | `Color` | `Color(0xFFDD0000)` |
-| `shadow` | `Shadow` | (composite type) |
-| `typography` | `TextStyle` | (composite type) |
+| `shadow` | `ShadowStyle` | (composite type with multiple `DropShadow` layers) |
+| `typography` | `DesignTextStyle` | (composite type with font properties) |
 
 ### Example Generated Code
 
@@ -472,8 +520,9 @@ enum class Density {
 }
 
 enum class WindowSizeClass {
-    Compact,    // Phones (Portrait)
-    Regular     // Tablets, Phones (Landscape)
+    Compact,    // Phones (Portrait) - width < 600dp
+    Medium,     // Small Tablets, Foldables - 600dp ≤ width < 840dp
+    Expanded    // Large Tablets, Desktops - width ≥ 840dp
 }
 ```
 
@@ -498,25 +547,83 @@ interface DesignSizingScheme {
     val headline1FontSize: TextUnit
     // ... 180+ sizing properties
 }
+
+// Polymorphic typography access (composite DesignTextStyle objects)
+@Stable
+interface DesignTypographyScheme {
+    val headline1: DesignTextStyle
+    val headline2: DesignTextStyle
+    val body: DesignTextStyle
+    // ... 30+ text style properties
+}
+
+// Polymorphic effects access (brand-independent shadows)
+@Stable
+interface DesignEffectsScheme {
+    val shadowSoftSm: ShadowStyle
+    val shadowSoftMd: ShadowStyle
+    val shadowSoftLg: ShadowStyle
+    val shadowSoftXl: ShadowStyle
+    val shadowHardSm: ShadowStyle
+    val shadowHardMd: ShadowStyle
+    val shadowHardLg: ShadowStyle
+    val shadowHardXl: ShadowStyle
+}
+```
+
+### Composite Types
+
+```kotlin
+// Typography composite - use .toComposeTextStyle() for Text composable
+@Immutable
+data class DesignTextStyle(
+    val fontFamily: String,
+    val fontWeight: FontWeight,
+    val fontSize: TextUnit,
+    val lineHeight: TextUnit,
+    val letterSpacing: TextUnit,
+    val textCase: DesignTextCase,
+    val textDecoration: TextDecoration
+) {
+    fun toComposeTextStyle(): TextStyle
+}
+
+// Shadow composite - use .toModifier() to apply shadows
+@Immutable
+data class ShadowStyle(val layers: List<DropShadow>) {
+    fun toModifier(): Modifier
+}
+
+@Immutable
+data class DropShadow(
+    val color: Color,
+    val offsetX: Float,
+    val offsetY: Float,
+    val blur: Float,
+    val spread: Float
+)
 ```
 
 ### Theme Object
 
 ```kotlin
 object DesignSystemTheme {
-    val colors: DesignColorScheme      // Current colors (polymorphic)
-    val sizing: DesignSizingScheme     // Current sizing (polymorphic)
-    val density: Density               // Current density
-    val sizeClass: WindowSizeClass     // Current size class
-    val isDarkTheme: Boolean           // Is dark mode active?
-    val colorBrand: ColorBrand         // Current color brand
-    val contentBrand: ContentBrand     // Current content brand
+    val colors: DesignColorScheme          // Current colors (polymorphic)
+    val sizing: DesignSizingScheme         // Current sizing (polymorphic)
+    val typography: DesignTypographyScheme // Current typography (polymorphic)
+    val effects: DesignEffectsScheme       // Current effects (brand-independent)
+    val density: Density                   // Current density
+    val sizeClass: WindowSizeClass         // Current size class
+    val isDarkTheme: Boolean               // Is dark mode active?
+    val colorBrand: ColorBrand             // Current color brand
+    val contentBrand: ContentBrand         // Current content brand
 }
 ```
 
 ### Component Token Accessors
 
 ```kotlin
+// Standard component (most components have Colors, Sizing, Typography, Density)
 object ButtonTokens {
     object Colors {
         fun current(): ColorTokens    // Theme-aware (Light/Dark)
@@ -524,14 +631,16 @@ object ButtonTokens {
         object Dark : ColorTokens
     }
     object Sizing {
-        fun current(): SizingTokens   // Theme-aware (Compact/Regular)
+        fun current(): SizingTokens   // Theme-aware (Compact/Medium/Expanded)
         object Compact : SizingTokens
-        object Regular : SizingTokens
+        object Medium : SizingTokens
+        object Expanded : SizingTokens
     }
     object Typography {
-        fun current(): TypographyTokens  // Theme-aware (Compact/Regular)
+        fun current(): TypographyTokens  // Theme-aware (Compact/Medium/Expanded)
         object Compact : TypographyTokens
-        object Regular : TypographyTokens
+        object Medium : TypographyTokens
+        object Expanded : TypographyTokens
     }
     object Density {
         fun current(): DensityTokens  // Theme-aware (Dense/Default/Spacious)
@@ -540,6 +649,23 @@ object ButtonTokens {
         object Spacious : DensityTokens
     }
 }
+
+// Components with Effects (Menu, Alert, Teaser, etc.)
+object MenuTokens {
+    object Colors { ... }
+    object Sizing { ... }
+    object Typography { ... }
+    object Effects {
+        fun current(): EffectsTokens  // Theme-aware (Light/Dark)
+        object Light : EffectsTokens
+        object Dark : EffectsTokens
+
+        interface EffectsTokens {
+            val menuShadow: ShadowStyle
+            val heyInputShadow: ShadowStyle
+        }
+    }
+}
 ```
 
 ---
@@ -578,14 +704,15 @@ val color = ButtonTokens.Colors.current().buttonPrimaryBgColorIdle
 val lightColor = ButtonTokens.Colors.Light.buttonPrimaryBgColorIdle
 ```
 
-### 4. WindowSizeClass for Responsive Layouts
+### 4. WindowSizeClass for Responsive Layouts (Material 3)
 
 ```kotlin
 @Composable
 fun ResponsiveLayout() {
     when (DesignSystemTheme.sizeClass) {
         WindowSizeClass.Compact -> PhoneLayout()
-        WindowSizeClass.Regular -> TabletLayout()
+        WindowSizeClass.Medium -> SmallTabletLayout()
+        WindowSizeClass.Expanded -> LargeTabletLayout()
     }
 }
 ```
@@ -614,6 +741,8 @@ dependencies {
 |----------|-------------|
 | [README.md](./README.md) | Project Overview |
 | [README.tokens.md](./README.tokens.md) | All Platforms |
+| [README.css.md](./README.css.md) | CSS Custom Properties |
+| [README.js.md](./README.js.md) | JavaScript/React Integration |
 | [README.ios.md](./README.ios.md) | iOS SwiftUI Integration |
 | [CLAUDE.md](./CLAUDE.md) | Build Pipeline Details |