@marioschmidt/design-system-tokens 1.0.62 → 1.0.64

package/dist/ios/shared/DesignSystemTheme.swift

@@ -0,0 +1,489 @@
+//
+// Do not edit directly, this file was auto-generated.
+//
+// BILD Design System Tokens v1.0.64
+// Generated by Style Dictionary
+//
+// Copyright (c) 2024 Axel Springer Deutschland GmbH
+//
+
+import SwiftUI
+
+// MARK: - Unified Protocols
+
+/// Unified color scheme protocol for all color brands (BILD, SportBILD)
+/// Allows interchangeable color schemes across content brands
+public protocol DesignColorScheme: Sendable {
+    var textColorAccentConstant: Color { get }
+    var textColorPrimary: Color { get }
+    var textColorMuted: Color { get }
+    var textColorPrimaryInverse: Color { get }
+    var textColorPrimaryConstant: Color { get }
+    var textColorSuccessConstant: Color { get }
+    var textColorPrimaryInverseConstant: Color { get }
+    var textColorSecondary: Color { get }
+    var textColorAttentionHigh: Color { get }
+    var textColorAccent: Color { get }
+    var textColorAttentionMedium: Color { get }
+    var textColorOnDarkSurface: Color { get }
+    var surfaceColorPrimary: Color { get }
+    var surfaceColorSecondary: Color { get }
+    var surfaceColorPrimaryInverse: Color { get }
+    var surfaceColorPrimaryConstantLight: Color { get }
+    var surfaceColorPrimaryConstantDark: Color { get }
+    var surfaceColorQuartenary: Color { get }
+    var surfaceColorSuccess: Color { get }
+    var surfaceColorTertiary: Color { get }
+    var surfaceColorTertiaryGradientStop: Color { get }
+    var surfaceColorTertiaryInverse: Color { get }
+    var surfaceColorPrimaryGradientStop: Color { get }
+    var surfaceColorSecondaryGradientStop: Color { get }
+    var surfaceColorQuartenaryInverse: Color { get }
+    var kickerTextColorOnSurface: Color { get }
+    var headlineColorPrimary: Color { get }
+    var headlineColorWhiteConst: Color { get }
+    var kickerTextColorOnRed: Color { get }
+    var kickerTextColorOnDarkBg: Color { get }
+    var kickerTextColorOnBrightBg: Color { get }
+    var colorSecondaryActive: Color { get }
+    var colorPrimaryActive: Color { get }
+    var colorSecondaryDisabled: Color { get }
+    var colorPrimaryDisabled: Color { get }
+    var colorSecondaryActiveInverse: Color { get }
+    var colorTertiaryActive: Color { get }
+    var colorTertiaryDisabled: Color { get }
+    var borderColorMediumContrast: Color { get }
+    var borderColorLowContrast: Color { get }
+    var borderColorHighContrast: Color { get }
+    var borderColorLowContrastConstant: Color { get }
+    var borderColorSuccess: Color { get }
+    var borderColorWarning: Color { get }
+    var borderColorPrimaryDisabled: Color { get }
+    var borderColorSecondaryDisabled: Color { get }
+    var coreColorPrimary: Color { get }
+    var coreColorSecondary: Color { get }
+    var coreColorTertiary: Color { get }
+    var coreColorSecondaryConstant: Color { get }
+    var coreColorTertiaryConstant: Color { get }
+    var iconColorPrimary: Color { get }
+    var iconColorInverse: Color { get }
+    var iconColorSecondaryConstant: Color { get }
+    var iconColorConstantOnDark: Color { get }
+    var iconColorPrimaryConstant: Color { get }
+    var iconColorSuccess: Color { get }
+    var labelColorPrimary: Color { get }
+    var labelColorSecondary: Color { get }
+    var labelColorDisabled: Color { get }
+    var labelColorPrimaryConstant: Color { get }
+    var labelColorPrimaryInverseConstant: Color { get }
+    var labelColorTertiary: Color { get }
+    var labelColorPrimaryInverse: Color { get }
+    var attentionColorHigh: Color { get }
+    var accentColorPrimary: Color { get }
+    var attentionColorMedium: Color { get }
+    var attentionColorLow: Color { get }
+    var accentColorPrimaryConstant: Color { get }
+    var attentionColorSuccessPrimary: Color { get }
+    var attentionColorExtraLow: Color { get }
+    var attentionColorSuccessSecondary: Color { get }
+    var overlayScrimBlack: Color { get }
+    var overlayScrimWhite: Color { get }
+}
+
+/// Unified sizing scheme protocol for all content brands
+public protocol DesignSizingScheme: Sendable {
+    var gridSpaceRespLg: CGFloat { get }
+    var gridSpaceRespXl: CGFloat { get }
+    var gridSpaceRespBase: CGFloat { get }
+    var gridSpaceRespSm: CGFloat { get }
+    var pageInlineSpace: CGFloat { get }
+    var gridSpaceConstLg: CGFloat { get }
+    var gridSpaceConstSm: CGFloat { get }
+    var layoutGuideGridColums: CGFloat { get }
+    var sectionSpaceBase: CGFloat { get }
+    var sectionSpaceLg: CGFloat { get }
+    var paragraphEndSpace: CGFloat { get }
+    var sectionSpaceSm: CGFloat { get }
+    var breakpointMinWidthSize: CGFloat { get }
+    var breakpointMaxWidthSize: CGFloat { get }
+    var canvasHeightSizeWeb: CGFloat { get }
+    var contentMaxWidthMedium: CGFloat { get }
+    var contentMaxWidthFull: CGFloat { get }
+    var canvasWidthSizeWeb: CGFloat { get }
+    var canvasWidthSizeApp: CGFloat { get }
+    var canvasHeightSizeApp: CGFloat { get }
+    var title1FontSize: CGFloat { get }
+    var title2FontSize: CGFloat { get }
+    var display1FontSize: CGFloat { get }
+    var display2FontSize: CGFloat { get }
+    var display3FontSize: CGFloat { get }
+    var headline1FontSize: CGFloat { get }
+    var headline2FontSize: CGFloat { get }
+    var headline3FontSize: CGFloat { get }
+    var headline4FontSize: CGFloat { get }
+    var bodyFontSize: CGFloat { get }
+    var label3FontSize: CGFloat { get }
+    var label2FontSize: CGFloat { get }
+    var label1FontSize: CGFloat { get }
+    var label1FontSizeResponsive: CGFloat { get }
+    var label4FontSize: CGFloat { get }
+    var callout1FontSize: CGFloat { get }
+    var footnote1FontSize: CGFloat { get }
+    var footnote2FontSize: CGFloat { get }
+    var kicker1FontSize: CGFloat { get }
+    var kicker2FontSize: CGFloat { get }
+    var kicker3FontSize: CGFloat { get }
+    var kicker4FontSize: CGFloat { get }
+    var subheadline1FontSize: CGFloat { get }
+    var quoteFontSize: CGFloat { get }
+    var bodyFontFamily: String { get }
+    var calloutFontFamily: String { get }
+    var headlineFontFamily: String { get }
+    var footnoteFontFamily: String { get }
+    var labelFontFamily: String { get }
+    var kickerFontFamily: String { get }
+    var subheadlineFontFamily: String { get }
+    var titleFontFamily: String { get }
+    var quoteFontFamily: String { get }
+    var displayFontFamily: String { get }
+    var calloutFontWeight: CGFloat { get }
+    var labelFontWeightBold: CGFloat { get }
+    var labelFontWeightBook: CGFloat { get }
+    var bodyFontWeightBook: CGFloat { get }
+    var bodyFontWeightBold: CGFloat { get }
+    var kickerFontWeight: CGFloat { get }
+    var kickerFontWeightSt: String { get }
+    var subheadlineFontWeight: CGFloat { get }
+    var headline1FontWeight: CGFloat { get }
+    var headline2FontWeight: CGFloat { get }
+    var headline3FontWeight: CGFloat { get }
+    var headline4FontWeight: CGFloat { get }
+    var headline1FontWeightSt: String { get }
+    var titleFontWeight: CGFloat { get }
+    var displayFontWeight: CGFloat { get }
+    var quoteFontWeight: CGFloat { get }
+    var footnoteFontWeightBook: CGFloat { get }
+    var footnoteFontWeightBold: CGFloat { get }
+    var bodyLineHeight: CGFloat { get }
+    var kicker4LineHeight: CGFloat { get }
+    var kicker3LineHeight: CGFloat { get }
+    var kicker2LineHeight: CGFloat { get }
+    var kicker1LineHeight: CGFloat { get }
+    var label3LineHeight: CGFloat { get }
+    var label1LineHeight: CGFloat { get }
+    var label1ResponsiveLineHeight: CGFloat { get }
+    var label2LineHeight: CGFloat { get }
+    var label4LineHeight: CGFloat { get }
+    var display1LineHeight: CGFloat { get }
+    var display2LineHeight: CGFloat { get }
+    var display3LineHeight: CGFloat { get }
+    var title1LineHeight: CGFloat { get }
+    var title2LineHeight: CGFloat { get }
+    var quoteLineHeight: CGFloat { get }
+    var footnote1LineHeight: CGFloat { get }
+    var footnote2LineHeight: CGFloat { get }
+    var headline1LineHeight: CGFloat { get }
+    var headline2LineHeight: CGFloat { get }
+    var headline3LineHeight: CGFloat { get }
+    var headline4LineHeight: CGFloat { get }
+    var calloutLineHeight: CGFloat { get }
+    var subheadline1LineHeight: CGFloat { get }
+    var letterSpacingPositiveSm: CGFloat { get }
+    var letterSpacingPositiveLg: CGFloat { get }
+    var letterSpacingPositiveMd: CGFloat { get }
+    var letterSpacingNone: CGFloat { get }
+    var letterSpacingNegativeSm: CGFloat { get }
+    var letterSpacingNegativeMd: CGFloat { get }
+    var letterSpacingNegativeLg: CGFloat { get }
+    var letterSpacingNegativeXs: CGFloat { get }
+    var letterSpacingPositiveXs: CGFloat { get }
+    var display1LetterSpacing: CGFloat { get }
+    var display2LetterSpacing: CGFloat { get }
+    var display3LetterSpacing: CGFloat { get }
+    var borderRadiusXs: CGFloat { get }
+    var borderRadiusMd: CGFloat { get }
+    var borderRadiusSm: CGFloat { get }
+    var borderRadiusXl: CGFloat { get }
+    var borderRadiusLg: CGFloat { get }
+    var borderRadiusNone: CGFloat { get }
+    var borderRadiusFull: CGFloat { get }
+    var borderWidthThin: CGFloat { get }
+    var borderWidthThick: CGFloat { get }
+    var borderWidthHairline: CGFloat { get }
+    var changeOnLg: String { get }
+    var changeOnMd: String { get }
+    var bpSpecificWeb: String { get }
+    var bpSpecificApp: String { get }
+    var inlineSpaceRespSm: CGFloat { get }
+    var inlineSpaceRespMd: CGFloat { get }
+    var inlineSpaceRespLg: CGFloat { get }
+    var inlineSpaceResp2Xl: CGFloat { get }
+    var inlineSpaceRespXl: CGFloat { get }
+    var inlineSpaceConstSm: CGFloat { get }
+    var inlineSpaceConstMd: CGFloat { get }
+    var inlineSpaceConstLg: CGFloat { get }
+    var inlineSpaceConst2Xl: CGFloat { get }
+    var inlineSpaceConstXl: CGFloat { get }
+    var inlineSpaceConstXs: CGFloat { get }
+    var inlineSpaceConst3Xs: CGFloat { get }
+    var inlineSpaceConst2Xs: CGFloat { get }
+    var stackSpaceRespMd: CGFloat { get }
+    var stackSpaceRespLg: CGFloat { get }
+    var stackSpaceResp2Xl: CGFloat { get }
+    var stackSpaceRespSm: CGFloat { get }
+    var stackSpaceRespXl: CGFloat { get }
+    var stackSpaceConstSm: CGFloat { get }
+    var stackSpaceConstMd: CGFloat { get }
+    var stackSpaceConstLg: CGFloat { get }
+    var stackSpaceConst2Xl: CGFloat { get }
+    var stackSpaceConstXl: CGFloat { get }
+    var stackSpaceConstXs: CGFloat { get }
+    var stackSpaceConst3Xs: CGFloat { get }
+    var stackSpaceConst2Xs: CGFloat { get }
+    var gapSpaceRespXs: CGFloat { get }
+    var gapSpaceRespLg: CGFloat { get }
+    var gapSpaceRespXl: CGFloat { get }
+    var gapSpaceResp2Xl: CGFloat { get }
+    var gapSpaceRespMd: CGFloat { get }
+    var gapSpaceRespSm: CGFloat { get }
+    var gapSpaceResp2Xs: CGFloat { get }
+    var gapSpaceResp3Xl: CGFloat { get }
+    var gapSpaceConst2Xs: CGFloat { get }
+    var gapSpaceConstXs: CGFloat { get }
+    var gapSpaceConstSm: CGFloat { get }
+    var gapSpaceConstMd: CGFloat { get }
+    var gapSpaceConstLg: CGFloat { get }
+    var gapSpaceConstXl: CGFloat { get }
+    var gapSpaceConst2Xl: CGFloat { get }
+    var gapSpaceConst3Xl: CGFloat { get }
+    var sizeConst3Xs: CGFloat { get }
+    var sizeConst2Xs: CGFloat { get }
+    var sizeConstXs: CGFloat { get }
+    var sizeConstSm: CGFloat { get }
+    var sizeConstMd: CGFloat { get }
+    var sizeConstLg: CGFloat { get }
+    var sizeConstXl: CGFloat { get }
+    var sizeConst3Xl: CGFloat { get }
+    var sizeConst4Xl: CGFloat { get }
+    var sizeConst2Xl: CGFloat { get }
+    var sizeConst4Xs: CGFloat { get }
+    var sizeResp3Xs: CGFloat { get }
+    var sizeResp2Xs: CGFloat { get }
+    var sizeRespXs: CGFloat { get }
+    var sizeRespSm: CGFloat { get }
+    var sizeRespMd: CGFloat { get }
+    var sizeRespLg: CGFloat { get }
+    var sizeRespXl: CGFloat { get }
+    var sizeResp2Xl: CGFloat { get }
+    var sizeResp3Xl: CGFloat { get }
+    var sizeResp4Xl: CGFloat { get }
+    var sizeResp4Xs: CGFloat { get }
+    var breakpointName: String { get }
+}
+
+/// Unified effects scheme protocol for all color brands
+public protocol DesignEffectsScheme: Sendable {
+    var shadowSoftSm: ShadowStyle { get }
+    var shadowSoftMd: ShadowStyle { get }
+    var shadowSoftLg: ShadowStyle { get }
+    var shadowSoftXl: ShadowStyle { get }
+    var shadowHardSm: ShadowStyle { get }
+    var shadowHardMd: ShadowStyle { get }
+    var shadowHardLg: ShadowStyle { get }
+    var shadowHardXl: ShadowStyle { get }
+}
+
+/// Unified typography scheme protocol for all content brands
+public protocol DesignTypographyScheme: Sendable {
+    var display1: TextStyle { get }
+    var display2: TextStyle { get }
+    var display3: TextStyle { get }
+    var headline1: TextStyle { get }
+    var headline2: TextStyle { get }
+    var headline3: TextStyle { get }
+    var headline4: TextStyle { get }
+    var subheadline1: TextStyle { get }
+    var kicker1: TextStyle { get }
+    var kicker2: TextStyle { get }
+    var kicker3: TextStyle { get }
+    var kicker4: TextStyle { get }
+    var title1: TextStyle { get }
+    var title1Uppercase: TextStyle { get }
+    var title2: TextStyle { get }
+    var title2Uppercase: TextStyle { get }
+    var callout: TextStyle { get }
+    var body: TextStyle { get }
+    var bodyItalic: TextStyle { get }
+    var bodyBold: TextStyle { get }
+    var bodyBoldItalic: TextStyle { get }
+    var textLink: TextStyle { get }
+    var textLinkItalic: TextStyle { get }
+    var textLinkBold: TextStyle { get }
+    var textLinkHover: TextStyle { get }
+    var textLinkBoldHover: TextStyle { get }
+    var footnote1: TextStyle { get }
+    var footnote1Bold: TextStyle { get }
+    var footnote2: TextStyle { get }
+    var footnote2Bold: TextStyle { get }
+    var label1: TextStyle { get }
+    var label1Bold: TextStyle { get }
+    var label1BoldResp: TextStyle { get }
+    var label1UppercaseBold: TextStyle { get }
+    var label2: TextStyle { get }
+    var label2Uppercase: TextStyle { get }
+    var label2Bold: TextStyle { get }
+    var label2UppercaseBold: TextStyle { get }
+    var label3: TextStyle { get }
+    var label3Uppercase: TextStyle { get }
+    var label3Bold: TextStyle { get }
+    var label3UppercaseBold: TextStyle { get }
+    var label4: TextStyle { get }
+    var quote: TextStyle { get }
+}
+
+// MARK: - Dual-Axis Theme Provider
+
+/// Multi-brand theme provider with dual-axis architecture
+/// - ColorBrand axis: Defines colors and effects (BILD, SportBILD)
+/// - ContentBrand axis: Defines sizing, typography, layout (BILD, SportBILD, Advertorial)
+///
+/// Example usage:
+/// ```swift
+/// // Advertorial content with BILD colors
+/// DesignSystemTheme(colorBrand: .bild, contentBrand: .advertorial)
+///
+/// // Advertorial content with SportBILD colors
+/// DesignSystemTheme(colorBrand: .sportbild, contentBrand: .advertorial)
+/// ```
+@Observable
+public final class DesignSystemTheme: @unchecked Sendable {
+
+    // MARK: - Shared Instance
+    public static let shared = DesignSystemTheme()
+
+    // MARK: - Theme State (Dual-Axis)
+
+    /// Color brand determines the color palette and effects
+    public var colorBrand: ColorBrand = .bild
+
+    /// Content brand determines sizing, typography, and layout
+    public var contentBrand: ContentBrand = .bild
+
+    /// Dark/Light mode
+    public var isDarkTheme: Bool = false
+
+    /// Size class for responsive layouts
+    public var sizeClass: SizeClass = .compact
+
+    /// Density mode
+    public var density: Density = .default
+
+    private init() {}
+
+    // MARK: - Factory
+
+    public init(
+        colorBrand: ColorBrand = .bild,
+        contentBrand: ContentBrand = .bild,
+        isDarkTheme: Bool = false,
+        sizeClass: SizeClass = .compact,
+        density: Density = .default
+    ) {
+        self.colorBrand = colorBrand
+        self.contentBrand = contentBrand
+        self.isDarkTheme = isDarkTheme
+        self.sizeClass = sizeClass
+        self.density = density
+    }
+
+    // MARK: - Color Access (based on colorBrand)
+
+    /// Current color scheme based on colorBrand and isDarkTheme
+    public var colors: any DesignColorScheme {
+        switch colorBrand {
+        case .bild:
+            return isDarkTheme ? BildDarkColors.shared : BildLightColors.shared
+        case .sportbild:
+            return isDarkTheme ? SportbildDarkColors.shared : SportbildLightColors.shared
+        }
+    }
+
+    /// Current effects scheme based on colorBrand and isDarkTheme
+    public var effects: any DesignEffectsScheme {
+        switch colorBrand {
+        case .bild:
+            return isDarkTheme ? BildEffectsDark.shared : BildEffectsLight.shared
+        case .sportbild:
+            return isDarkTheme ? SportbildEffectsDark.shared : SportbildEffectsLight.shared
+        }
+    }
+
+    // MARK: - Sizing Access (based on contentBrand)
+
+    /// Current sizing scheme based on contentBrand and sizeClass
+    public var sizing: any DesignSizingScheme {
+        switch contentBrand {
+        case .bild:
+            return sizeClass == .compact ? BildSizingCompact.shared : BildSizingRegular.shared
+        case .sportbild:
+            return sizeClass == .compact ? SportbildSizingCompact.shared : SportbildSizingRegular.shared
+        case .advertorial:
+            return sizeClass == .compact ? AdvertorialSizingCompact.shared : AdvertorialSizingRegular.shared
+        }
+    }
+
+    // MARK: - Typography Access (based on contentBrand)
+
+    /// Current typography scheme based on contentBrand and sizeClass
+    public var typography: any DesignTypographyScheme {
+        switch contentBrand {
+        case .bild:
+            return sizeClass == .compact ? BildTypographyCompact.shared : BildTypographyRegular.shared
+        case .sportbild:
+            return sizeClass == .compact ? SportbildTypographyCompact.shared : SportbildTypographyRegular.shared
+        case .advertorial:
+            return sizeClass == .compact ? AdvertorialTypographyCompact.shared : AdvertorialTypographyRegular.shared
+        }
+    }
+}
+
+// MARK: - Environment Integration
+
+private struct DesignSystemThemeKey: EnvironmentKey {
+    static let defaultValue = DesignSystemTheme.shared
+}
+
+public extension EnvironmentValues {
+    var designSystemTheme: DesignSystemTheme {
+        get { self[DesignSystemThemeKey.self] }
+        set { self[DesignSystemThemeKey.self] = newValue }
+    }
+}
+
+// MARK: - View Modifier
+
+public extension View {
+    /// Apply design system theme with dual-axis brand selection
+    /// - Parameters:
+    ///   - colorBrand: Brand for colors and effects (BILD or SportBILD)
+    ///   - contentBrand: Brand for sizing, typography, layout (BILD, SportBILD, or Advertorial)
+    ///   - darkTheme: Enable dark mode
+    ///   - sizeClass: Size class for responsive layouts
+    ///   - density: UI density mode
+    func designSystemTheme(
+        colorBrand: ColorBrand = .bild,
+        contentBrand: ContentBrand = .bild,
+        darkTheme: Bool = false,
+        sizeClass: SizeClass = .compact,
+        density: Density = .default
+    ) -> some View {
+        let theme = DesignSystemTheme(
+            colorBrand: colorBrand,
+            contentBrand: contentBrand,
+            isDarkTheme: darkTheme,
+            sizeClass: sizeClass,
+            density: density
+        )
+        return self.environment(\.designSystemTheme, theme)
+    }
+}