@marioschmidt/design-system-tokens 1.0.61 → 1.0.63

package/README.md

@@ -36,7 +36,7 @@ The BILD Design Ops Pipeline transforms design assets from Figma into production
 
 | Pipeline | Input | Output | Platforms |
 |----------|-------|--------|-----------|
-| **🎨 Token Pipeline** | Figma Variables | Design Tokens | 6 platforms (Flutter disabled) |
+| **🎨 Token Pipeline** | Figma Variables | Design Tokens | 6 platforms (Flutter/Android XML disabled) |
 | **🖼️ Icon Pipeline** | Figma Icons (SVG) | Multi-format Icons | 5 platforms |
 
 Both pipelines use the **TokenSync Figma Plugin** for automated exports.
@@ -49,6 +49,8 @@ Both pipelines use the **TokenSync Figma Plugin** for automated exports.
 |---------|-------------|---------|---------------|
 | **@marioschmidt/design-system-tokens** | Multi-platform design tokens | [![npm](https://img.shields.io/npm/v/@marioschmidt/design-system-tokens.svg)](https://www.npmjs.com/package/@marioschmidt/design-system-tokens) | [📖 README.tokens.md](./README.tokens.md) |
 | **@marioschmidt/design-system-icons** | Multi-platform icon assets | [![npm](https://img.shields.io/npm/v/@marioschmidt/design-system-icons.svg)](https://www.npmjs.com/package/@marioschmidt/design-system-icons) | [📖 README.icons.md](./README.icons.md) |
+| **Android Compose** | Jetpack Compose (Dual-Axis) | - | [📖 README.android.md](./README.android.md) |
+| **iOS SwiftUI** | SwiftUI (Dual-Axis) | - | [📖 README.ios.md](./README.ios.md) |
 
 ---
 
@@ -113,8 +115,8 @@ Both pipelines use the **TokenSync Figma Plugin** for automated exports.
 │  ├── js/      (ES Modules)  │    │  ├── flutter/  (TTF + Dart) │
 │  ├── json/    (Raw Data)    │    │  └── ios/      (xcassets)   │
 │  ├── ios/     (Swift)       │    │                             │
-│  └── android/ (XML)         │    │                             │
-│  (flutter/ disabled)        │    │                             │
+│  └── android/ (Compose/Kt)  │    │                             │
+│  (flutter/XML disabled)     │    │                             │
 └──────────────┬──────────────┘    └──────────────┬──────────────┘
                │                                  │
                │  npm publish                     │  npm publish
@@ -163,6 +165,43 @@ view.backgroundColor = StyleDictionary.textColorPrimary
 let padding: CGFloat = StyleDictionary.space2x
 ```
 
+```kotlin
+// Android Jetpack Compose
+import com.bild.designsystem.bild.theme.BildTheme
+import com.bild.designsystem.bild.components.ButtonTokens
+import com.bild.designsystem.shared.Density
+import com.bild.designsystem.shared.WindowSizeClass
+
+@Composable
+fun MyApp() {
+    BildTheme(
+        darkTheme = isSystemInDarkTheme(),
+        sizeClass = WindowSizeClass.Compact,
+        density = Density.Default
+    ) {
+        Button(
+            colors = ButtonDefaults.buttonColors(
+                // Theme-aware: auto-selects Light/Dark
+                containerColor = ButtonTokens.Colors.current().buttonPrimaryBgColorIdle
+            )
+        ) {
+            Text(
+                // Semantic tokens via Theme
+                color = BildTheme.colors.textColorPrimary,
+                // Component typography: auto-selects Compact/Regular
+                fontSize = ButtonTokens.Typography.current().buttonLabelFontSize
+            )
+        }
+    }
+}
+
+// Multi-brand apps: Use DesignSystemTheme
+import com.bild.designsystem.shared.Brand
+import com.bild.designsystem.shared.DesignSystemTheme
+
+DesignSystemTheme(brand = Brand.Bild) { /* ... */ }
+```
+
 ### Icon Usage
 
 ```tsx
@@ -327,7 +366,8 @@ npm run clean:icons        # Remove dist/icons/
 | JavaScript | ES6 Modules | `dist/js/**/*.js` | ✅ Production |
 | JSON | Raw Data | `dist/json/**/*.json` | ✅ Production |
 | iOS Swift | UIColor, CGFloat | `dist/ios/**/*.swift` | ✅ Production |
-| Android | XML Resources | `dist/android/**/*.xml` | ✅ Production |
+| Android | Jetpack Compose (Kotlin) | `dist/android/compose/**/*.kt` | ✅ Production |
+| Android | XML Resources | `dist/android/**/*.xml` | ⏸️ Disabled |
 | Flutter | Dart Classes | `dist/flutter/**/*.dart` | ⏸️ Disabled |
 
 ### 🖼️ Icon Platforms
@@ -348,6 +388,8 @@ npm run clean:icons        # Remove dist/icons/
 |----------|-------------|
 | [📖 README.tokens.md](./README.tokens.md) | Complete token pipeline documentation |
 | [📖 README.icons.md](./README.icons.md) | Complete icon pipeline documentation |
+| [📖 README.android.md](./README.android.md) | Android Jetpack Compose (Dual-Axis) |
+| [📖 README.ios.md](./README.ios.md) | iOS SwiftUI (Dual-Axis) |
 
 ### Quick Links
 
@@ -422,5 +464,5 @@ MIT License - See [LICENSE](./LICENSE) file.
 | Tokens | Icons |
 |--------|-------|
 | ~970 files | 5 platforms |
-| 6 platforms | TypeScript support |
+| 6 platforms (incl. Compose) | TypeScript support |
 | 3 brands | Accessibility ready |

package/README.tokens.md

@@ -32,7 +32,7 @@ Multi-platform design token transformation pipeline powered by **Style Dictionar
 This pipeline processes the multi-layer, multi-brand BILD Design System architecture:
 
 - **3 Brands**: BILD, SportBILD, Advertorial
-- **6 Platforms**: CSS, SCSS, JavaScript, JSON, iOS (Swift), Android (XML) *(Flutter disabled)*
+- **6 Platforms**: CSS, SCSS, JavaScript, JSON, iOS (Swift), Android (Jetpack Compose) *(Flutter/XML disabled)*
 - **Multiple Modes**: Density (3), Breakpoints (4), Color Modes (2)
 - **Token Types**: Primitives, Semantic Tokens, Component Tokens (~970 files)
 
@@ -56,7 +56,7 @@ This pipeline processes the multi-layer, multi-brand BILD Design System architec
 │  ─────────────────────────────────────────────────────────────────────────  │
 │  BrandColorMapping: Color Primitives → Brands                               │
 │  BrandTokenMapping: Other Primitives → Brands                               │
-│  Density: compact, default, spacious                                        │
+│  Density: default, dense, spacious                                          │
 │  Modes: BILD, SportBILD, Advertorial                                        │
 ├─────────────────────────────────────────────────────────────────────────────┤
 │  LAYER 1: Primitives (Global)                                                │
@@ -144,6 +144,44 @@ npm run build:tokens   # Style Dictionary → 7 platforms
 npm run build:bundles  # Generate CSS bundle files
 ```
 
+## Token Type Mapping
+
+Figma token types (`$type`) are automatically mapped to platform-specific types:
+
+| Figma `$type` | CSS | Swift (iOS) | Kotlin (Android) |
+|---------------|-----|-------------|------------------|
+| `dimension` | `var(--token)` (px) | `CGFloat` | `Dp` (.dp) |
+| `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` |
+| `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` |
+| `color` | `var(--token)` (hex/rgba) | `Color` | `Color` |
+| `shadow` | `box-shadow` | `ShadowStyle` | `Shadow` |
+| `typography` | CSS classes | `TextStyle` | `TextStyle` |
+
+### Token Type Distribution
+
+| $type | Count | Description |
+|-------|-------|-------------|
+| `dimension` | 3557 | Spacing, sizing, layout values |
+| `typography` | 1356 | Composite font definitions |
+| `fontSize` | 1086 | Font size values |
+| `color` | 1012 | Color values (hex, rgba) |
+| `lineHeight` | 840 | Line height values |
+| `fontWeight` | 318 | Font weight values (100-1000) |
+| `fontFamily` | 307 | Font family names |
+| `letterSpacing` | 155 | Letter spacing values |
+| `string` | 133 | String values (e.g., breakpoint names) |
+| `boolean` | 102 | Boolean flags |
+| `shadow` | 78 | Drop shadow definitions |
+| `opacity` | 72 | Opacity percentages (0-100) |
+| `number` | 24 | Generic numeric values |
+
 ## Platform Usage
 
 ### CSS
@@ -201,7 +239,122 @@ Container(
 )
 ```
 
-### Android XML
+### Android Jetpack Compose (Dual-Axis Architecture)
+
+> **See [README.android.md](./README.android.md) for complete documentation**
+
+```kotlin
+import com.bild.designsystem.shared.DesignSystemTheme
+import com.bild.designsystem.shared.ColorBrand
+import com.bild.designsystem.shared.ContentBrand
+import com.bild.designsystem.bild.components.ButtonTokens
+
+@Composable
+fun MyScreen() {
+    // Dual-Axis Theme Provider
+    DesignSystemTheme(
+        colorBrand = ColorBrand.Bild,        // Color palette (Bild or Sportbild)
+        contentBrand = ContentBrand.Bild,    // Sizing/Typography (Bild, Sportbild, Advertorial)
+        darkTheme = isSystemInDarkTheme(),
+        sizeClass = WindowSizeClass.Compact,
+        density = Density.Default
+    ) {
+        // Polymorphic access via unified interfaces
+        Text(color = DesignSystemTheme.colors.textColorPrimary)
+        val fontSize = DesignSystemTheme.sizing.headline1FontSize
+
+        // Component tokens via current() accessors
+        val bgColor = ButtonTokens.Colors.current().buttonPrimaryBgColorIdle
+    }
+}
+
+// Advertorial with SportBILD colors (key use case)
+DesignSystemTheme(
+    colorBrand = ColorBrand.Sportbild,
+    contentBrand = ContentBrand.Advertorial
+) { AdvertorialContent() }
+```
+
+#### Dual-Axis Architecture
+
+Separates color selection from content selection:
+
+| Axis | Enum | Values | Purpose |
+|------|------|--------|---------|
+| **Color** | `ColorBrand` | `Bild`, `Sportbild` | Color palette & effects |
+| **Content** | `ContentBrand` | `Bild`, `Sportbild`, `Advertorial` | Sizing, typography, layout |
+
+#### Unified Interfaces (Polymorphic Access)
+
+| Interface | Purpose | Property Count |
+|-----------|---------|----------------|
+| `DesignColorScheme` | All color tokens | 80+ colors |
+| `DesignSizingScheme` | All sizing tokens | 180+ sizing values |
+
+#### 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 |
+
+### iOS SwiftUI (Dual-Axis Architecture)
+
+> **See [README.ios.md](./README.ios.md) for complete documentation**
+
+```swift
+import SwiftUI
+
+struct MyApp: App {
+    var body: some Scene {
+        WindowGroup {
+            ContentView()
+                .designSystemTheme(
+                    colorBrand: .bild,        // Color palette
+                    contentBrand: .bild,      // Sizing/Typography
+                    darkTheme: false,
+                    sizeClass: .compact
+                )
+        }
+    }
+}
+
+struct MyView: View {
+    @Environment(\.designSystemTheme) var theme
+
+    var body: some View {
+        Text("Hello")
+            .foregroundColor(theme.colors.textColorPrimary)
+
+        // Component tokens
+        Button("Click") { }
+            .background(ButtonTokens.Colors.light.buttonPrimaryBrandBgColorIdle)
+    }
+}
+
+// Advertorial with SportBILD colors
+.designSystemTheme(
+    colorBrand: .sportbild,
+    contentBrand: .advertorial
+)
+```
+
+#### iOS Unified Protocols
+
+| Protocol | Purpose |
+|----------|---------|
+| `DesignColorScheme` | All color tokens |
+| `DesignSizingScheme` | All sizing tokens |
+| `DesignEffectsScheme` | Shadow/effect tokens |
+
+### Android XML (Disabled)
+
+> **Note:** Android XML output is disabled by default. Jetpack Compose is the preferred format.
+> Set `ANDROID_XML_ENABLED = true` in build.js to re-enable.
 
 ```xml
 <TextView
@@ -286,9 +439,25 @@ lg (1024px) ────┘
 | SCSS | `kebab-case` with `$` | `$text-color-primary` |
 | JavaScript | `camelCase` | `textColorPrimary` |
 | iOS Swift | `camelCase` | `textColorPrimary` |
-| Android | `snake_case` | `text_color_primary` |
+| Android Compose | `camelCase` | `textColorPrimary` |
+| Android XML | `snake_case` | `text_color_primary` |
 | Flutter | `camelCase` | `textColorPrimary` |
 
+### Name Transformations
+
+The pipeline applies these transformations to token names:
+
+| Input | CSS/SCSS | JS/Swift/Compose | Notes |
+|-------|----------|------------------|-------|
+| `TextColorPrimary` | `text-color-primary` | `textColorPrimary` | CamelCase → kebab/camel |
+| `bildred` | `bildred` | `bildred` | Lowercase preserved |
+| `bild085` | `bild085` | `bild085` | Numbers allowed |
+| `alpha-black-20` | `alpha-black-20` | `alphaBlack20` | Numbers at end OK |
+| `space2x` | `space2x` | `space2x` | Dimension pattern |
+| `700-black` | `700-black` | `n700Black` | Number prefix → `n` prefix |
+
+**Important:** Tokens with numeric prefixes (e.g., `700-black-font-weight`) get an `n` prefix in camelCase platforms to ensure valid identifiers.
+
 ### Token Types
 
 #### Colors
@@ -297,8 +466,9 @@ lg (1024px) ────┘
 |----------|--------|---------|
 | CSS | `#HEX` / `rgba()` | `#DD0000` |
 | iOS Swift | `UIColor()` object | `UIColor(red: 0.867, ...)` |
+| Android Compose | `Color(0xFF...)` | `Color(0xFFDD0000)` |
+| Android XML | `#hex` resource | `#dd0000` |
 | Flutter | `Color(0xFF...)` | `Color(0xFFDD0000)` |
-| Android | `#hex` resource | `#dd0000` |
 
 #### Dimensions
 
@@ -306,9 +476,23 @@ lg (1024px) ────┘
 |----------|--------|---------|
 | CSS | `Xpx` | `16px` |
 | iOS Swift | `CGFloat` number | `16` |
-| Android | `Xpx` dimen | `16px` |
+| Android Compose | `X.dp` | `16.dp` |
+| Android XML | `Xpx` dimen | `16px` |
 | Flutter | `"Xpx"` string | `"16px"` |
 
+#### Typography (Compose)
+
+Typography tokens in Compose use `.sp` for accessibility scaling:
+
+| Property | Format | Example |
+|----------|--------|---------|
+| `fontSize` | `X.sp` | `16.sp` |
+| `lineHeight` | `X.sp` | `24.sp` |
+| `letterSpacing` | `Xf.sp` | `0.5f.sp` |
+| `fontWeight` | `Int` | `700` |
+| `fontStyle` | `FontStyle` | `FontStyle.Italic` |
+| `fontFamily` | `String` | `"Gotham XNarrow"` |
+
 #### Opacity
 
 | Platform | Format | Example |
@@ -328,6 +512,8 @@ The build pipeline supports toggles to enable/disable specific outputs:
 
 // Platform output toggles
 const FLUTTER_ENABLED = false;        // Disables dist/flutter/ output
+const COMPOSE_ENABLED = true;         // Enables dist/android/compose/ output
+const ANDROID_XML_ENABLED = false;    // Disables Android XML output
 
 // Token type toggles
 const BOOLEAN_TOKENS_ENABLED = false; // Excludes visibility tokens
@@ -335,6 +521,8 @@ const BOOLEAN_TOKENS_ENABLED = false; // Excludes visibility tokens
 
 | Toggle | Default | Description |
 |--------|---------|-------------|
+| `COMPOSE_ENABLED` | `true` | Jetpack Compose Kotlin output in `dist/android/compose/` |
+| `ANDROID_XML_ENABLED` | `false` | Android XML resources (disabled, Compose preferred) |
 | `FLUTTER_ENABLED` | `false` | Flutter Dart output in `dist/flutter/` |
 | `BOOLEAN_TOKENS_ENABLED` | `false` | Boolean/visibility tokens (13 tokens like `hideOnMobile`) |
 
@@ -360,21 +548,93 @@ dist/
 ├── js/                              # Same structure
 ├── json/                            # Same structure
 ├── ios/                             # Swift Classes
-├── android/                         # XML Resources
+├── android/
+│   └── compose/                     # Jetpack Compose (Kotlin)
+│       ├── shared/
+│       │   ├── DesignTokenPrimitives.kt   # All primitives consolidated
+│       │   ├── Density.kt                 # Dense/Default/Spacious enum
+│       │   ├── WindowSizeClass.kt         # Compact/Regular 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
+│           │   ├── color/
+│           │   │   ├── ColorsLight.kt     # BildColorScheme interface + BildLightColors
+│           │   │   └── ColorsDark.kt      # BildDarkColors object
+│           │   └── sizeclass/
+│           │       ├── SizingCompact.kt   # BildSizingScheme interface + BildSizingCompact
+│           │       └── SizingRegular.kt   # BildSizingRegular object
+│           └── theme/
+│               └── {Brand}Theme.kt        # CompositionLocal Theme Provider
 └── flutter/                         # Dart Classes (disabled by default)
 ```
 
+### Compose File Organization
+
+Compose output is optimized for Android development:
+
+**Shared Files (brand-independent):**
+
+| File | Content | Access Pattern |
+|------|---------|----------------|
+| `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) { }` |
+
+**Brand Files:**
+
+| File | Content | Access Pattern |
+|------|---------|----------------|
+| `{Brand}Theme.kt` | CompositionLocal Theme Provider | `BildTheme { }`, `BildTheme.colors.x`, `BildTheme.sizing.x` |
+| `{Brand}SemanticTokens.kt` | Colors + Sizing aggregated | `BildSemanticTokens.Colors.Light.textColorPrimary` |
+| `ColorsLight.kt` / `ColorsDark.kt` | ColorScheme interface + impl | Used by BildTheme internally |
+| `SizingCompact.kt` / `SizingRegular.kt` | SizingScheme interface + impl | Used by BildTheme internally |
+| `{Component}Tokens.kt` | Component tokens with `current()` | `ButtonTokens.Colors.current().buttonPrimaryBgColorIdle` |
+
 ## 🔗 Figma Integration & Dependencies
 
 ### Supported Figma Scopes
 
 | Scope | Assigned Type | Output Format |
 |-------|---------------|---------------|
+| `FONT_SIZE` | `fontSize` | px (CSS), `.sp` (Compose) |
+| `LINE_HEIGHT` | `lineHeight` | px (CSS), `.sp` (Compose) |
+| `LETTER_SPACING` | `letterSpacing` | px (CSS), `.sp` (Compose) |
+| `FONT_WEIGHT` | `fontWeight` | Unitless integer (100-900) |
+| `FONT_FAMILY` | `fontFamily` | String |
+| `FONT_STYLE` | `fontStyle` | String, `FontStyle.Italic` (Compose) |
 | `OPACITY` | `opacity` | 0-1 decimal (÷100) |
-| `WIDTH_HEIGHT` | `dimension` | px (CSS), CGFloat (iOS) |
-| `GAP` | `dimension` | Same as above |
-| `FONT_SIZE` | `fontSize` | px with transform |
-| `FONT_WEIGHT` | `fontWeight` | Unitless integer |
+| `WIDTH_HEIGHT` | `dimension` | px (CSS), `.dp` (Compose) |
+| `GAP` | `dimension` | px (CSS), `.dp` (Compose) |
+| `CORNER_RADIUS` | `dimension` | px (CSS), `.dp` (Compose) |
+| `STROKE_FLOAT` | `dimension` | px (CSS), `.dp` (Compose) |
+| `PARAGRAPH_SPACING` | `dimension` | px (CSS), `.dp` (Compose) |
+| `PARAGRAPH_INDENT` | `dimension` | px (CSS), `.dp` (Compose) |
+| `ALL_FILLS`, `FRAME_FILL`, `SHAPE_FILL`, `TEXT_FILL` | `color` | #HEX, `Color(0xFF...)` |
+| `STROKE_COLOR`, `EFFECT_COLOR` | `color` | #HEX, `Color(0xFF...)` |
+
+### Compose Unit Mapping
+
+Android Compose uses type-safe units. The pipeline automatically maps token types:
+
+| Token Type | Compose Unit | Example Output |
+|------------|--------------|----------------|
+| `fontSize` | `.sp` | `16.sp` |
+| `lineHeight` | `.sp` | `24.sp` |
+| `letterSpacing` | `.sp` | `0.5f.sp` |
+| `dimension` | `.dp` | `16.dp` |
+| `fontWeight` | `Int` | `700` |
+| `fontStyle` | `FontStyle` | `FontStyle.Italic` |
+| `fontFamily` | `String` | `"Gotham XNarrow"` |
+| `color` | `Color` | `Color(0xFFDD0000)` |
+| `opacity` | `Int` | `50` (percentage) |
+
+**Note:** `.sp` (scale-independent pixels) is used for text-related measurements to support accessibility scaling. `.dp` (density-independent pixels) is used for layout dimensions.
 
 ### Stable Changes
 
@@ -479,9 +739,11 @@ MIT License - See [LICENSE](./LICENSE) file.
 
 | Feature | Status |
 |---------|--------|
-| 6 Platforms | ✅ (Flutter disabled) |
+| 6 Platforms | ✅ (Flutter/XML disabled) |
 | 3 Brands | ✅ |
 | ~970 Files | ✅ |
 | Figma Scopes | ✅ |
 | var() Aliases | ✅ |
 | Responsive CSS | ✅ |
+| Jetpack Compose | ✅ |
+| Theme Provider | ✅ |

package/dist/android/compose/brands/advertorial/components/.DSDocsStyles/.DSDocsStylesTokens.kt

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.63
+ * Generated by Style Dictionary
+ *
+ * Component: .DSDocsStyles | Brand: Advertorial
+ * Aggregated component tokens with all modes
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ */
+
+package com.bild.designsystem.advertorial.components
+
+import androidx.compose.runtime.Immutable
+
+/**
+ * .DSDocsStyles Design Tokens
+ *
+ * Usage:
+ *   .DSDocsStylesTokens.Colors.Light.primaryBgIdle
+ *   .DSDocsStylesTokens.Sizing.Compact.height
+ *   .DSDocsStylesTokens.Density.Default.contentGap
+ */
+object .DSDocsStylesTokens {
+}

package/dist/android/compose/brands/advertorial/components/Accordion/AccordionTokens.kt

@@ -0,0 +1,108 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.63
+ * Generated by Style Dictionary
+ *
+ * Component: Accordion | Brand: Advertorial
+ * Aggregated component tokens with all modes
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ */
+
+package com.bild.designsystem.advertorial.components
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Composable
+import com.bild.designsystem.shared.DesignSystemTheme
+import com.bild.designsystem.shared.WindowSizeClass
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.unit.TextUnit
+
+/**
+ * Accordion Design Tokens
+ *
+ * Usage:
+ *   AccordionTokens.Colors.Light.primaryBgIdle
+ *   AccordionTokens.Sizing.Compact.height
+ *   AccordionTokens.Density.Default.contentGap
+ */
+object AccordionTokens {
+
+    // ══════════════════════════════════════════════════════════════
+    // SIZING (WindowSizeClass)
+    // ══════════════════════════════════════════════════════════════
+    object Sizing {
+        /**
+         * Returns sizing tokens for the current window size class.
+         * Automatically resolves to Compact or Regular based on DesignSystemTheme.sizeClass
+         *
+         * Usage:
+         *   val fontSize = AccordionTokens.Sizing.current().labelFontSize
+         */
+        @Composable
+        fun current(): SizingTokens = when (DesignSystemTheme.sizeClass) {
+            WindowSizeClass.Compact -> Compact
+            WindowSizeClass.Regular -> Regular
+        }
+
+        /**
+         * Interface for sizing tokens
+         */
+        interface SizingTokens {
+            val accordionLabelFontFamily: Dp
+        }
+
+        object Compact : SizingTokens {
+            override val accordionLabelFontFamily = "Lucida Grande"
+        }
+        object Regular : SizingTokens {
+            override val accordionLabelFontFamily = "Lucida Grande"
+        }
+    }
+
+    // ══════════════════════════════════════════════════════════════
+    // TYPOGRAPHY
+    // ══════════════════════════════════════════════════════════════
+    object Typography {
+        /**
+         * Returns typography tokens for the current window size class.
+         * Automatically resolves to Compact or Regular based on DesignSystemTheme.sizeClass
+         *
+         * Usage:
+         *   val fontFamily = AccordionTokens.Typography.current().labelFontFamily
+         */
+        @Composable
+        fun current(): TypographyTokens = when (DesignSystemTheme.sizeClass) {
+            WindowSizeClass.Compact -> Compact
+            WindowSizeClass.Regular -> Regular
+        }
+
+        /**
+         * Interface for typography tokens
+         */
+        interface TypographyTokens {
+            val accordionLabelFontFamily: String
+            val accordionLabelFontWeight: Int
+            val accordionLabelFontSize: TextUnit
+            val accordionLabelLetterSpacing: TextUnit
+            val accordionLabelTextCase: String
+        }
+
+        object Compact : TypographyTokens {
+            override val accordionLabelFontFamily = "Lucida Grande"
+            override val accordionLabelFontWeight = 700
+            override val accordionLabelFontSize = 17.sp
+            override val accordionLabelLetterSpacing = 0f.sp
+            override val accordionLabelTextCase = "ORIGINAL"
+        }
+        object Regular : TypographyTokens {
+            override val accordionLabelFontFamily = "Lucida Grande"
+            override val accordionLabelFontWeight = 700
+            override val accordionLabelFontSize = 17.sp
+            override val accordionLabelLetterSpacing = 0f.sp
+            override val accordionLabelTextCase = "ORIGINAL"
+        }
+    }
+}