@marioschmidt/design-system-tokens 1.0.62 → 1.0.64

package/dist/scss/shared/colorprimitive.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.62
+// BILD Design System Tokens v1.0.64
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -19,6 +19,8 @@
 $bildred: #DD0000;
 $bildred035: #AF0002;
 $bildred053: #F52D2D;
+// Used on elevation effects.
+$bild-red-alpha80: rgba(221, 0, 0, 0.8);
 
 // BILD - gray
 $bild015: #232629;
@@ -35,9 +37,18 @@ $bild045: #666B70;
 $bild010: #1C1C1C;
 $bild020: #2C3138;
 
-// BILD - neutral
-$bild100: #FFFFFF;
-$bildblack: #000000;
+// BILD - white
+$white100: #FFFFFF;
+$white-alpha10: rgba(255, 255, 255, 0.1);
+$white-alpha20: rgba(255, 255, 255, 0.2);
+$white-alpha30: rgba(255, 255, 255, 0.3);
+// Used on elevation effects.
+$white-alpha60: rgba(255, 255, 255, 0.6);
+// Used on elevation effects.
+$white-alpha70: rgba(255, 255, 255, 0.7);
+$white-alpha35: rgba(255, 255, 255, 0.35);
+// Used on elevation effects.
+$white-alpha80: rgba(255, 255, 255, 0.8);
 
 // BILD - orange
 // Tone: 067
@@ -47,7 +58,7 @@ $bildorange: #FD8227;
 $bildgreen070: #00C373;
 $bildgreen063: #00AF67;
 $bildgreen093: #CEF4E4;
-$bildgreen093-alpha50: rgba(206, 244, 228, 0.5);
+$bildgreen093alpha50: rgba(206, 244, 228, 0.5);
 $bildgreen056-alpha50: rgba(0, 155, 90, 0.5);
 // This value of green was found in a text field's text color.
 $bildgreen040: #006E3E;
@@ -61,36 +72,25 @@ $bildyellow: #FFBF00;
 // Tone: 020
 $bildberry: #551937;
 
-// BILD - alpha
-$alpha-black20: rgba(0, 0, 0, 0.2);
-$alpha-black10: rgba(0, 0, 0, 0.1);
-// Used on elevation effects.
-$alpha-black60: rgba(0, 0, 0, 0.6);
-$alpha-black30: rgba(0, 0, 0, 0.3);
-// Used on elevation effects.
-$alpha-black70: rgba(0, 0, 0, 0.7);
-$alpha-white10: rgba(255, 255, 255, 0.1);
-$alpha-white20: rgba(255, 255, 255, 0.2);
-$alpha-white30: rgba(255, 255, 255, 0.3);
-// Used on elevation effects.
-$alpha-white60: rgba(255, 255, 255, 0.6);
-// Used on elevation effects.
-$alpha-white70: rgba(255, 255, 255, 0.7);
-$alpha-white35: rgba(255, 255, 255, 0.35);
+// BILD - black
+$black-alpha20: rgba(0, 0, 0, 0.2);
+$black-alpha10: rgba(0, 0, 0, 0.1);
 // Used on elevation effects.
-$alpha-bildred80: rgba(221, 0, 0, 0.8);
+$black-alpha60: rgba(0, 0, 0, 0.6);
+$black-alpha30: rgba(0, 0, 0, 0.3);
 // Used on elevation effects.
-$alpha-black80: rgba(0, 0, 0, 0.8);
+$black-alpha70: rgba(0, 0, 0, 0.7);
+$black100: #000000;
 // Used on elevation effects.
-$alpha-white80: rgba(255, 255, 255, 0.8);
-$alpha-black35: rgba(0, 0, 0, 0.35);
-$alpha-black0: rgba(0, 0, 0, 0);
-$alpha-black50: rgba(0, 0, 0, 0.5);
-$alpha-black05: rgba(0, 0, 0, 0.05);
+$black-alpha80: rgba(0, 0, 0, 0.8);
+$black-alpha35: rgba(0, 0, 0, 0.35);
+$black-alpha0: rgba(0, 0, 0, 0);
+$black-alpha50: rgba(0, 0, 0, 0.5);
+$black-alpha05: rgba(0, 0, 0, 0.05);
 
 // BILD - blue
 // This Blue color was taken from the Weather 2024 project. Tone: 069
-$bildblue: #00B1FF;
+$bild-blue: #00B1FF;
 
 
 // ============================================
@@ -143,8 +143,8 @@ $spobi-blue038: #315998;
 $spobi-red: #E52528;
 
 // SportBILD - alpha
-$spobi-blue016-alpha0: rgba(10, 39, 80, 0);
-$spobi-blue016-alpha70: rgba(10, 39, 80, 0.7);
+$spobi-blue016alpha0: rgba(10, 39, 80, 0);
+$spobi-blue016alpha70: rgba(10, 39, 80, 0.7);
 
 
 // ============================================

package/dist/scss/shared/fontprimitive.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.62
+// BILD Design System Tokens v1.0.64
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -51,27 +51,27 @@ $font-weight-medium: 500;
 // ============================================
 
 // This variable is a primitive for use in creating semantic text styles that need to use a subtle small letter spacing value of -0.25.
-$letter-space-neg0-25: -0.25px;
+$letter-space-neg0p25: -0.25;
 // This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0.
-$letter-space0: 0px;
+$letter-space0: 0;
 // This variable is a primitive for use in creating semantic text styles that need to use a positive letter spacing value of 1.
-$letter-space1: 1px;
+$letter-space1: 1;
 // This variable is a primitive for use in creating semantic text styles that need to use a slight positive letter spacing value of 0.5.
-$letter-space0-5: 0.5px;
+$letter-space0p5: 0.5;
 // This variable is a primitive for use in creating semantic text styles that need to use a subtle positive letter spacing value of 0.25.
-$letter-space0-25: 0.25px;
+$letter-space0p25: 0.25;
 // This variable is a primitive for use in creating semantic variables that need to use a subtle negative letter spacing value of -0.5.
-$letter-space-neg0-5: -0.5px;
+$letter-space-neg0p5: -0.5;
 // This variable is a primitive for use in creating semantic text styles that need to use a large letter spacing value of 2.
-$letter-space2: 2px;
+$letter-space2: 2;
 // This variable is a primitive for use in creating semantic variables that need to use a negative letter spacing value of -1.
-$letter-space-neg1: -1px;
+$letter-space-neg1: -1;
 // This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -2. This is usually reserved for large texts styles that are used on titles or headlines.
-$letter-space-neg2: -2px;
+$letter-space-neg2: -2;
 // This variable is a primitive for use in creating semantic text styles that need to use a much larger letter spacing value of 3. Text styles that have smaller font sizes should use increasingly positive values for their letter spacings on smaller device sizes.
-$letter-space3: 3px;
+$letter-space3: 3;
 // This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -3. Text styles that have larger font sizes should use increasingly negative values for their letter spacings on larger device sizes.
-$letter-space-neg3: -3px;
+$letter-space-neg3: -3;
 
 
 // ============================================
@@ -88,6 +88,6 @@ $st-font-weight-st-book: 400;
 $st-font-weight-book350: 350;
 $st-font-weight-extra-light: 200;
 $st-font-weight-thin: 100;
-$st-font-weight-bold-italic: Bold Italic;
-$st-font-weight-black-italic: Black Italic;
+$st-font-weight-bold-italic: 700;
+$st-font-weight-black-italic: 900;
 

package/dist/scss/shared/sizeprimitive.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.62
+// BILD Design System Tokens v1.0.64
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -17,50 +17,50 @@
 $size6x: 48px;
 $size3x: 24px;
 $size1x: 8px;
-$size0-25x: 2px;
+$size0p25x: 2px;
 $size0-5x: 4px;
 $size2x: 16px;
-$size4-5x: 36px;
+$size4p5x: 36px;
 $size5x: 40px;
-$size3-5x: 28px;
-$size2-5x: 20px;
-$size12-5x: 100px;
-$size2-75x: 22px;
-$size3-25x: 26px;
+$size3p5x: 28px;
+$size2p5x: 20px;
+$size12p5x: 100px;
+$size2p75x: 22px;
+$size3p25x: 26px;
 $size4x: 32px;
-$size3-75x: 30px;
-$size2-25x: 18px;
+$size3p75x: 30px;
+$size2p25x: 18px;
 $size7x: 56px;
-$size1-5x: 12px;
-$size0-75x: 6px;
-$size22-5x: 180px;
+$size1p5x: 12px;
+$size0p75x: 6px;
+$size22p5x: 180px;
 $size40x: 320px;
 $size8x: 64px;
-$size11-5x: 92px;
-$size1-75x: 14px;
-$size5-25x: 42px;
-$size1-25x: 10px;
+$size11p5x: 92px;
+$size1p75x: 14px;
+$size5p25x: 42px;
+$size1p25x: 10px;
 $size80x: 640px;
-$size17-5x: 140px;
+$size17p5x: 140px;
 $size20x: 160px;
 $size128x: 1024px;
 $size124x: 992px;
 $size12x: 96px;
 $size35x: 280px;
 $size15x: 120px;
-$size16-25: 130px;
-$size87-5x: 700px;
+$size16p25: 130px;
+$size87p5x: 700px;
 $size10x: 80px;
 $size30x: 240px;
 $size25x: 200px;
 $size168x: 1344px;
 $size60x: 480px;
 $size9x: 72px;
-$size27-5x: 220px;
+$size27p5x: 220px;
 $size50x: 400px;
-$size116-25x: 930px;
-$size18-5x: 148px;
+$size116p25x: 930px;
+$size18p5x: 148px;
 $size100x: 800px;
 $size0x: 0px;
-$size0-125x: 1px;
+$size0p125x: 1px;
 

package/dist/scss/shared/spaceprimitive.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.62
+// BILD Design System Tokens v1.0.64
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -15,10 +15,10 @@
 // ============================================
 
 $space1x: 8px;
-$space0-5x: 4px;
-$space0-25x: 2px;
+$space0p5x: 4px;
+$space0p25x: 2px;
 $space2x: 16px;
-$space1-5x: 12px;
+$space1p5x: 12px;
 $space4x: 32px;
 $space3x: 24px;
 $space6x: 48px;
@@ -28,15 +28,15 @@ $space5x: 40px;
 $space0x: 0px;
 $space10x: 80px;
 $space20x: 160px;
-$space2-5x: 20px;
-$space-neg0-25x: -2px;
-$space0-75x: 6px;
-$space1-25x: 10px;
-$space2-75x: 22px;
-$space4-5x: 36px;
-$space7-5x: 60px;
+$space2p5x: 20px;
+$space-neg0p25x: -2px;
+$space0p75x: 6px;
+$space1p25x: 10px;
+$space2p75x: 22px;
+$space4p5x: 36px;
+$space7p5x: 60px;
 $space12x: 96px;
-$space1-75x: 14px;
-$space8-5x: 68px;
-$space3-5x: 28px;
+$space1p75x: 14px;
+$space8p5x: 68px;
+$space3p5x: 28px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marioschmidt/design-system-tokens",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "BILD Design System Token Pipeline with Style Dictionary - Multi-brand design tokens for BILD, SportBILD, and Advertorial",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,6 +21,7 @@
   "files": [
     "dist/",
     "README.md",
+    "README.tokens.md",
     "LICENSE"
   ],
   "scripts": {

package/dist/android/compose/brands/advertorial/components/Inputfield/InputfieldTokens.kt

@@ -1,81 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- *
- * BILD Design System Tokens v1.0.62
- * Generated by Style Dictionary
- *
- * Component: Inputfield | 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.advertorial.theme.AdvertorialTheme
-import com.bild.designsystem.shared.Density
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.unit.TextUnit
-
-/**
- * Inputfield Design Tokens
- *
- * Usage:
- *   InputfieldTokens.Colors.Light.primaryBgIdle
- *   InputfieldTokens.Sizing.Compact.height
- *   InputfieldTokens.Density.Default.contentGap
- */
-object InputfieldTokens {
-
-    // ══════════════════════════════════════════════════════════════
-    // DENSITY
-    // ══════════════════════════════════════════════════════════════
-    object Density {
-        /**
-         * Returns density tokens for the current theme density.
-         * Automatically resolves to Dense, Default, or Spacious based on AdvertorialTheme.density
-         *
-         * Usage:
-         *   val gap = InputfieldTokens.Density.current().contentGap
-         */
-        @Composable
-        fun current(): DensityTokens = when (AdvertorialTheme.density) {
-            com.bild.designsystem.shared.Density.Dense -> Dense
-            com.bild.designsystem.shared.Density.Default -> Default
-            com.bild.designsystem.shared.Density.Spacious -> Spacious
-        }
-
-        /**
-         * Interface for density-dependent tokens
-         */
-        interface DensityTokens {
-            val denseInputFieldInlineSpace: Dp
-            val denseInputFieldStackSpace: Dp
-            val denseInputFieldHeightSize: Dp
-            val denseInputFieldLabelFontSize: TextUnit
-        }
-
-        object Dense : DensityTokens {
-            override val denseInputFieldInlineSpace = 16.dp
-            override val denseInputFieldStackSpace = 6.dp
-            override val denseInputFieldHeightSize = 36.dp
-            override val denseInputFieldLabelFontSize = 16.sp
-        }
-        object Default : DensityTokens {
-            override val denseInputFieldInlineSpace = 16.dp
-            override val denseInputFieldStackSpace = 8.dp
-            override val denseInputFieldHeightSize = 40.dp
-            override val denseInputFieldLabelFontSize = 17.sp
-        }
-        object Spacious : DensityTokens {
-            override val denseInputFieldInlineSpace = 16.dp
-            override val denseInputFieldStackSpace = 12.dp
-            override val denseInputFieldHeightSize = 48.dp
-            override val denseInputFieldLabelFontSize = 19.sp
-        }
-    }
-}

package/dist/android/compose/brands/advertorial/theme/AdvertorialTheme.kt

@@ -1,194 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- *
- * BILD Design System Tokens v1.0.62
- * Generated by Style Dictionary
- *
- * Theme Provider for Advertorial
- * Provides CompositionLocal-based theming for Jetpack Compose
- *
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- */
-
-package com.bild.designsystem.advertorial.theme
-
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.runtime.staticCompositionLocalOf
-// Advertorial uses shared color schemes from other brands (e.g., Bild, Sportbild)
-// Import the color scheme you want to use:
-import com.bild.designsystem.bild.semantic.BildColorScheme
-import com.bild.designsystem.bild.semantic.BildLightColors
-import com.bild.designsystem.bild.semantic.BildDarkColors
-import com.bild.designsystem.advertorial.semantic.AdvertorialSizingCompact
-import com.bild.designsystem.advertorial.semantic.AdvertorialSizingRegular
-import com.bild.designsystem.shared.Density
-
-// ══════════════════════════════════════════════════════════════════════════════
-// SIZE CLASS
-// ══════════════════════════════════════════════════════════════════════════════
-
-/**
- * Window size class for responsive layouts
- */
-enum class WindowSizeClass {
-    Compact,  // Phones in portrait
-    Regular   // Tablets, phones in landscape
-}
-
-// ══════════════════════════════════════════════════════════════════════════════
-// COMPOSITION LOCALS
-// ══════════════════════════════════════════════════════════════════════════════
-
-/**
- * CompositionLocal for current color scheme (Light/Dark)
- * Uses BildColorScheme interface for type-safe access
- */
-internal val LocalAdvertorialColors = staticCompositionLocalOf<BildColorScheme> { BildLightColors }
-
-/**
- * CompositionLocal for current size class (Compact/Regular)
- */
-internal val LocalAdvertorialSizeClass = staticCompositionLocalOf { WindowSizeClass.Compact }
-
-/**
- * CompositionLocal for current density (Dense/Default/Spacious)
- */
-internal val LocalAdvertorialDensity = staticCompositionLocalOf { Density.Default }
-
-/**
- * CompositionLocal for dark theme state
- */
-internal val LocalIsDarkTheme = staticCompositionLocalOf { false }
-
-// ══════════════════════════════════════════════════════════════════════════════
-// THEME PROVIDER
-// ══════════════════════════════════════════════════════════════════════════════
-
-/**
- * Advertorial Design System Theme Provider
- *
- * Wraps content with CompositionLocals for theming.
- * All child composables can access theme values via [AdvertorialTheme].
- *
- * Note: Advertorial does not have its own color tokens.
- * Colors can be injected from other brands (Bild or Sportbild).
- * Default: Uses BildLightColors/BildDarkColors
- *
- * @param darkTheme Whether to use dark color scheme
- * @param lightColors Light color scheme to use (allows color scheme injection)
- * @param darkColors Dark color scheme to use (allows color scheme injection)
- * @param sizeClass Current window size class for responsive sizing
- * @param density UI density for spacing adjustments
- * @param content Composable content to wrap
- *
- * Usage:
- * ```kotlin
- * AdvertorialTheme(
- *     darkTheme = isSystemInDarkTheme(),
- *     sizeClass = calculateWindowSizeClass(),
- *     density = Density.Default
- * ) {
- *     // Your app content
- *     Text(
- *         color = AdvertorialTheme.colors.textColorPrimary,
- *         fontSize = AdvertorialTheme.sizing.headline1FontSize
- *     )
- * }
- * ```
- */
-@Composable
-fun AdvertorialTheme(
-    darkTheme: Boolean = isSystemInDarkTheme(),
-    lightColors: BildColorScheme = BildLightColors,
-    darkColors: BildColorScheme = BildDarkColors,
-    sizeClass: WindowSizeClass = WindowSizeClass.Compact,
-    density: Density = Density.Default,
-    content: @Composable () -> Unit
-) {
-    val colors = if (darkTheme) darkColors else lightColors
-
-    CompositionLocalProvider(
-        LocalAdvertorialColors provides colors,
-        LocalAdvertorialSizeClass provides sizeClass,
-        LocalAdvertorialDensity provides density,
-        LocalIsDarkTheme provides darkTheme,
-        content = content
-    )
-}
-
-// ══════════════════════════════════════════════════════════════════════════════
-// THEME ACCESSOR OBJECT
-// ══════════════════════════════════════════════════════════════════════════════
-
-/**
- * Accessor object for Advertorial theme values
- *
- * Provides convenient access to current theme values from any composable.
- * Values are read from CompositionLocals set by [AdvertorialTheme].
- *
- * Usage:
- * ```kotlin
- * @Composable
- * fun MyButton() {
- *     Button(
- *         colors = ButtonDefaults.buttonColors(
- *             containerColor = AdvertorialTheme.colors.coreColorPrimary
- *         )
- *     ) {
- *         Text(
- *             text = "Click me",
- *             fontSize = AdvertorialTheme.sizing.headline1FontSize
- *         )
- *     }
- * }
- * ```
- */
-object AdvertorialTheme {
-
-    /**
-     * Current color scheme (Light or Dark based on theme)
-     * Type-safe access via BildColorScheme interface
-     */
-    val colors: BildColorScheme
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalAdvertorialColors.current
-
-    /**
-     * Current sizing values based on WindowSizeClass
-     */
-    val sizing: AdvertorialSizingScheme
-        @Composable
-        @ReadOnlyComposable
-        get() = when (LocalAdvertorialSizeClass.current) {
-            WindowSizeClass.Compact -> AdvertorialSizingCompact
-            WindowSizeClass.Regular -> AdvertorialSizingRegular
-        }
-
-    /**
-     * Current window size class
-     */
-    val sizeClass: WindowSizeClass
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalAdvertorialSizeClass.current
-
-    /**
-     * Current UI density
-     */
-    val density: Density
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalAdvertorialDensity.current
-
-    /**
-     * Whether dark theme is currently active
-     */
-    val isDarkTheme: Boolean
-        @Composable
-        @ReadOnlyComposable
-        get() = LocalIsDarkTheme.current
-}

package/dist/android/compose/brands/bild/components/Chips/ChipsTokens.kt

@@ -1,47 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- *
- * BILD Design System Tokens v1.0.62
- * Generated by Style Dictionary
- *
- * Component: Chips | Brand: Bild
- * Aggregated component tokens with all modes
- *
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- */
-
-package com.bild.designsystem.bild.components
-
-import androidx.compose.runtime.Immutable
-import androidx.compose.ui.graphics.Color
-
-/**
- * Chips Design Tokens
- *
- * Usage:
- *   ChipsTokens.Colors.Light.primaryBgIdle
- *   ChipsTokens.Sizing.Compact.height
- *   ChipsTokens.Density.Default.contentGap
- */
-object ChipsTokens {
-
-    // ══════════════════════════════════════════════════════════════
-    // COLORS
-    // ══════════════════════════════════════════════════════════════
-    object Colors {
-        object Light {
-            val chipsBgColorHover = Color(0xFFAF0002)
-            val chipsLabelColorHover = Color(0xFFFFFFFF)
-            val chipsBgColorActive = Color(0xFFDD0000)
-            val chipsBgColorIdle = Color(0xFFE9ECEF)
-            val chipsLabelColorIdle = Color(0xFF232629)
-        }
-        object Dark {
-            val chipsBgColorHover = Color(0xFFCED4DA)
-            val chipsLabelColorHover = Color(0xFF232629)
-            val chipsBgColorActive = Color(0xFFFFFFFF)
-            val chipsBgColorIdle = Color(0xFF4B525A)
-            val chipsLabelColorIdle = Color(0xFFFFFFFF)
-        }
-    }
-}