@marioschmidt/design-system-tokens 1.1.0 → 1.2.0

package/dist/ios/brands/bild/semantic/color/ColorsLight.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: ColorScheme light
@@ -13,178 +13,207 @@ import SwiftUI
 
 /// Protocol for type-safe color access across Light/Dark modes
 public protocol BildColorScheme: Sendable {
-    /// Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds). Behavior: Constant — maintains identical red tone across Light and Dark mode.
+    /// Brand-colored text for emphasis and highlights (e.g., highlighted keywords, brand callouts, promotional text). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorBrand: Color { get }
-    /// Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
+    /// Brand text color in light mode, neutral white in dark mode (e.g., subtle brand accents that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorBrandLightOnly: Color { get }
-    /// Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces. Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds.
+    /// Primary text color for static content like body copy and labels (e.g., article text, titles, form labels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorPrimary: Color { get }
-    /// Muted text tone for subtle information, timestamps, or inactive text elements. Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode.
+    /// Secondary text color for static supporting content (e.g., captions, timestamps, meta information, descriptions). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorSecondary: Color { get }
-    /// Secondary text color used for supportive information, subtitles, and less prominent text. Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
+    /// Tertiary text color for static de-emphasized content (e.g., placeholder text, helper text, footnotes). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorTertiary: Color { get }
-    /// Used for kicker text and category labels placed directly on standard surface backgrounds. Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes.
+    /// Kicker text color for category labels above headlines on standard surface backgrounds. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var kickerTextColor: Color { get }
-    /// Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition. Behavior: Dynamic — dark text in Light mode, light text in Dark mode.
+    /// Headline text color for article titles and major headings. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var headlineTextColor: Color { get }
-    /// Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes. Behavior: Constant — remains white in both Light and Dark mode.
+    /// Text color for content overlaid on images, mode-independent (e.g., image captions, teaser headlines on photos). Behavior: Static — same value in light and dark mode.
     var textColorOnImage: Color { get }
-    /// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. L&D:093
+    /// Secondary text on dark solid surfaces, mode-independent. Behavior: Static — same value in light and dark mode.
     var textColorSecondaryOnDark: Color { get }
-    /// Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds). Behavior: Constant — same tone across Light and Dark mode.
+    /// Primary text on light solid surfaces, mode-independent (e.g., text on light colored backgrounds). Behavior: Static — same value in light and dark mode.
     var textColorPrimaryOnLight: Color { get }
     /// Applied to kicker or meta text on dark colored backgrounds to maintain high legibility. Behavior: Constant — always uses semi-transparent white for consistent readability.
     var kickerTextColorOnDark: Color { get }
     /// Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance. Behavior: Constant — remains semi-transparent black across both modes.
     var kickerTextColorOnLight: Color { get }
-    /// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+    /// Primary text on dark solid surfaces, mode-independent (e.g., button labels on dark buttons). Behavior: Static — same value in light and dark mode.
     var textColorPrimaryOnDark: Color { get }
-    /// Primary label color used for labels, badges, or tag text on light backgrounds. Ensures strong readability and visual hierarchy. Behavior: Dynamic — dark neutral in Light mode, light neutral in Dark mode. L: 015 D:093
+    /// Default text color for interactive/clickable elements in idle state (e.g., text links, navigation items, clickable labels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorIdle: Color { get }
-    /// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. L:085 D:035
+    /// Text color for disabled elements (e.g., inactive button labels, disabled input text/links). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorDisabled: Color { get }
+    /// Text color for interactive/clickable elements on hover (e.g., link hover, navigation item hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorHover: Color { get }
+    /// Text color for interactive/clickable elements in active or visited state (e.g., visited links, active navigation item, current page). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var textColorActive: Color { get }
-    /// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
+    /// Primary static text on inverted/contrast backgrounds (e.g., body text in dark sections, footer copy). Not for interactive elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var textColorPrimaryInverse: Color { get }
+    /// Secondary static text on inverted/contrast backgrounds (e.g., meta info in dark sections). Not for interactive elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var textColorSecondaryInverse: Color { get }
+    /// High contrast inverse text for maximum readability on inverted surfaces (e.g., white text on dark buttons). Behavior: Inverted — swaps light and dark values.
     var textColorInverseHighContrast: Color { get }
-    /// Used for positive or success-related messages (e.g., “Saved”, “Success”, or confirmation text) on success surface colors. Behavior: Constant — green tone remains consistent across both modes.
+    /// Success text color for confirmation messages and positive feedback. Behavior: Dynamic — adapts between light and dark mode.
     var textColorSuccess: Color { get }
-    /// Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+    /// Error text color for error messages and validation feedback. Behavior: Dynamic — adapts between light and dark mode.
     var textColorError: Color { get }
-    /// Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
+    /// Warning text color for caution messages and alerts. Behavior: Dynamic — adapts between light and dark mode.
     var textColorWarning: Color { get }
-    /// Primary surface color used for main backgrounds and large layout areas (e.g., page background, primary containers). Behavior: Dynamic — adapts between light and dark surface tokens to maintain legibility and hierarchy.
+    /// Primary background color for main surfaces and page backgrounds (e.g., page background, primary containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific in dark mode.
     var bgColorPrimary: Color { get }
-    /// Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity. Behavior: Dynamic - slightly lighter in Light mode and darker in Dark mode to remain visually accessible.
+    /// Background color for disabled interactive elements (e.g., inactive buttons, disabled inputs). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorDisabled: Color { get }
-    /// Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface.  Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast.
+    /// Secondary background for elevated containers (e.g., cards on primary background, sidebar panels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorSecondary: Color { get }
-    /// A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts. Behavior: Constant — identical across Light and Dark mode.
+    /// Dark background that remains constant regardless of color mode (e.g. media containers). Behavior: Static — same value in light and dark mode. Brand-specific.
     var bgColorPrimaryConstDark: Color { get }
-    /// HIghtest elevation surface color, typically used for grouping or background accents to differentiate themselves from all previous surface color options. Uses corresponding light/dark tones for consistent layering.
+    /// Quaternary background for fourth-level elements (e.g., pressed states, nested backgrounds). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorQuaternary: Color { get }
-    /// Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces. Behavior: Dynamic — switches between light and dark tertiary tones.
+    /// Tertiary background for third-level containers (e.g., input fields, nested cards, hover states). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorTertiary: Color { get }
-    /// Use this on elements that must maintain the white color even in dark mode.
+    /// Light background that remains constant regardless of color mode (e.g., fixed white elements). Behavior: Static — same value in light and dark mode. Brand-specific.
     var bgColorPrimaryConstLight: Color { get }
+    /// Quintenary background for fifth-level elements and high-contrast utility surfaces. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorQuintenary: Color { get }
-    /// Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone.
+    /// Brand background in light mode, neutral white in dark mode (e.g., accent elements that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorBrandLightOnly: Color { get }
-    /// Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode.
+    /// Solid brand background for primary CTAs and brand-emphasized elements (e.g., primary buttons, badges). Behavior: Static — same value in light and dark mode. Brand-specific.
     var bgColorBrandSolid: Color { get }
+    /// Solid brand background for hover interactions (e.g., CTA button hover). Behavior: Static — same value in light and dark mode. Brand-specific.
     var bgColorBrandSolidHover: Color { get }
+    /// Solid brand background for active/pressed state (e.g., CTA button pressed). Behavior: Static — same value in light and dark mode. Brand-specific.
     var bgColorBrandSolidActive: Color { get }
+    /// Subtle brand tint background for soft brand presence (e.g., notification backgrounds, selected list items). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorBrandTint: Color { get }
+    /// Subtle brand tint background for hover state (e.g., secondary button hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorBrandTintHover: Color { get }
-    /// Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections). Behavior: Dynamic — switches between dark and light values depending on mode.
+    /// nverted primary background for contrast sections (e.g., dark header on light page, footer). Behavior: Inverted — swaps light and dark values. Brand-specific.
     var bgColorPrimaryInverse: Color { get }
-    /// Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards). Behavior: Dynamic — swaps values between modes for contrast preservation.
+    /// Inverted tertiary background for nested contrast elements (e.g., code blocks, nested menus). Behavior: Inverted — swaps light and dark values. Brand-specific.
     var bgColorTertiaryInverse: Color { get }
-    /// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
+    /// Inverted quaternary background for subtle contrast distinctions. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var bgColorQuaternaryInverse: Color { get }
-    /// Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections). Behavior: Dynamic — switches between dark and light values depending on mode.
+    /// Inverted secondary background for elevated contrast elements (e.g., tooltips, popovers). Behavior: Inverted — swaps light and dark values. Brand-specific.
     var bgColorSecondaryInverse: Color { get }
-    /// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
+    /// Inverted quintenary background for high-contrast inverse elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var bgColorQuintenaryInverse: Color { get }
-    /// Success-related background used for positive notifications, confirmation surfaces, or success banners. Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
+    /// Success feedback background for positive states (e.g., success message background, validated field). Behavior: Dynamic — adapts between light and dark mode.
     var bgColorSuccessTint: Color { get }
-    /// Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency. L&D:070
+    /// Solid success background for positive actions (e.g., confirm button, success badge). Behavior: Static — same value in light and dark mode.
     var bgColorSuccessSolid: Color { get }
-    /// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. L&D: green40
+    /// Solid success background for hover state (e.g., confirm button hover). Behavior: Static — same value in light and dark mode.
     var bgColorSuccessSolidHover: Color { get }
-    /// Success-related background used for positive notifications, confirmation surfaces, or success banners. Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
+    /// Success feedback background for hover state (e.g., success notification hover). Behavior: Dynamic — adapts between light and dark mode.
     var bgColorSuccessTintHover: Color { get }
-    /// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. L&D: green40
+    /// Solid success background for active/pressed state (e.g., confirm button pressed). Behavior: Static — same value in light and dark mode.
     var bgColorSuccessSolidActive: Color { get }
-    /// Represents tertiary-level gradient background. Currently used on skeletons.
+    /// Gradient stop color for tertiary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorTertiaryGradientStop: Color { get }
-    /// Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode.
+    /// Gradient stop color for primary background fade effects (e.g., scroll shadows, content fade-outs). Behavior: Dynamic — adapts between light and dark mode.
     var bgColorPrimaryGradientStop: Color { get }
-    /// Used for secondary surface gradients or subtle depth layers across backgrounds. Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+    /// Gradient stop color for secondary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var bgColorSecondaryGradientStop: Color { get }
     /// A semi-transparent black overlay used to dim background content when modals, drawers, or dialogs are active. Identical opacity and tone in both Light and Dark mode to ensure consistent overlay depth.
     var overlayScrimBlackConst: Color { get }
     /// A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels. Behavior: Constant — same opacity level across modes to preserve uniform layering behavior.
     var overlayScrimWhiteConst: Color { get }
+    /// Error feedback background for error states (e.g., error message background, invalid field highlight). Behavior: Dynamic — adapts between light and dark mode.
     var bgColorErrorTint: Color { get }
+    /// Error feedback background for hover state (e.g., error notification hover). Behavior: Dynamic — adapts between light and dark mode.
     var bgColorErrorTintHover: Color { get }
+    /// Solid error background for critical actions (e.g., delete button, error badge). Behavior: Static — same value in light and dark mode.
     var bgColorErrorSolid: Color { get }
+    /// Solid error background for hover state (e.g., destructive button hover). Behavior: Static — same value in light and dark mode.
     var bgColorErrorSolidHover: Color { get }
+    /// Warning feedback background for caution states (e.g., warning banner, attention indicators). Behavior: Dynamic — adapts between light and dark mode.
     var bgColorWarningTint: Color { get }
+    /// Warning feedback background for hover state. Behavior: Dynamic — adapts between light and dark mode.
     var bgColorWarningTintHover: Color { get }
+    /// Solid warning background for caution indicators (e.g., warning badge, alert background). Behavior: Static — same value in light and dark mode.
     var bgColorWarningSolid: Color { get }
+    /// Solid warning background for hover state. Behavior: Static — same value in light and dark mode.
     var bgColorWarningSolidHover: Color { get }
-    /// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+    /// Default border color for static containers and separators (e.g., card borders, section dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorDefault: Color { get }
-    /// Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers). Dynamic - light gray 093 in Light mode, dark gray 035 in Dark mode.
+    /// Subtle low-contrast border for soft static separations (e.g., list separators, subtle dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorSubtle: Color { get }
-    /// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+    /// Extra strong border for maximum static contrast (e.g., critical sections, strong separations). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorExtraStrong: Color { get }
-    /// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+    /// Strong border for static emphasis (e.g., highlighted sections, important containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorStrong: Color { get }
-    /// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. L&D: 093
+    /// Subtle border on dark solid backgrounds (e.g., subtle dividers on dark UI). Behavior: Static — same value in light and dark mode. Brand-specific.
     var borderColorSubtleOnDark: Color { get }
-    /// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+    /// Default border on dark solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
     var borderColorDefaultOnDark: Color { get }
-    /// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. L&D: 093
+    /// Subtle border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
     var borderColorSubtleOnLight: Color { get }
-    /// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+    /// Default border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
     var borderColorDefaultOnLight: Color { get }
-    /// Used for success states and validation borders (e.g., input success outlines or confirmation frames). Behavior: Constant — same success tone across modes for consistent feedback semantics.
+    /// Success border for valid states (e.g., validated input, successful upload). Behavior: Dynamic — adapts between light and dark mode.
     var borderColorSuccess: Color { get }
-    /// Defines border color for warning and error-related components, typically used for input validation or caution zones. Behavior: Constant — retains the same red warning tone in both Light and Dark modes.
+    /// Error border for invalid states (e.g., form validation error, required field indicator). Behavior: Dynamic — adapts between light and dark mode.
     var borderColorError: Color { get }
+    /// Warning border for caution states (e.g., field warning, attention required). Behavior: Dynamic — adapts between light and dark mode.
     var borderColorWarning: Color { get }
-    var borderColorInfo: Color { get }
-    /// Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
+    /// Border color for disabled elements (e.g., disabled input borders, inactive containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorDisabled: Color { get }
-    var borderColorFocus: Color { get }
+    /// Border for selected elements (e.g., selected checkbox, active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+    var borderColorSelected: Color { get }
+    /// Border for active elements (e.g., active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorActive: Color { get }
-    /// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+    /// Default border color for interactive elements in idle state (e.g., input fields, buttons, selectable items). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorIdle: Color { get }
+    /// Default border on inverted surfaces. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var borderColorDefaultInverse: Color { get }
+    /// Subtle border on inverted surfaces (e.g., subtle separators in dark sections). Behavior: Inverted — swaps light and dark values. Brand-specific.
     var borderColorSubtleInverse: Color { get }
+    /// Brand-colored border for emphasis (e.g., active tabs, selected items, brand highlights). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorBrand: Color { get }
+    /// Brand border in light mode, neutral white in dark mode (e.g., accent borders that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorBrandLightOnly: Color { get }
+    /// Brand border that remains constant regardless of color mode. Behavior: Static — same value in light and dark mode. Brand-specific.
     var borderColorBrandConst: Color { get }
+    /// Zero-contrast border matching surface color (e.g., invisible borders for layout, spacing helpers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var borderColorNoContrast: Color { get }
-    /// Primary icon color on primary surfaces.
+    /// Default icon color for interactive/clickable icons in idle state (e.g., icon buttons, navigation icons, action icons). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorIdle: Color { get }
-    /// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. L:085 D:035
+    /// Icon color for disabled elements (e.g., inactive button icons, disabled controls). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorDisabled: Color { get }
+    /// Icon color for interactive/clickable icons on hover (e.g., icon button hover, navigation icon hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorHover: Color { get }
+    /// Icon color for interactive/clickable icons in active or selected state (e.g., active navigation, selected action). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorActive: Color { get }
-    /// Used for icons that must remain visually consistent regardless of mode (e.g.,  icons that are on surfaces that don't change color). Identical tone in both Light and Dark mode.
+    /// Secondary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
     var iconColorSecondaryOnLight: Color { get }
-    /// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+    /// Primary icon on dark solid surfaces (e.g., icons on dark buttons, player controls). Behavior: Static — same value in light and dark mode.
     var iconColorPrimaryOnDark: Color { get }
-    /// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. L&D:093
+    /// Secondary icon on dark solid surfaces. Behavior: Static — same value in light and dark mode.
     var iconColorSecondaryOnDark: Color { get }
-    /// Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds). Behavior: Constant — same tone across Light and Dark mode.
+    /// Primary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
     var iconColorPrimaryOnLight: Color { get }
-    /// Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes. Behavior: Constant — remains white in both Light and Dark mode.
+    /// Icon color for elements overlaid on images (e.g., play button on video thumbnail). Mode-independent. Behavior: Static — same value in light and dark mode.
     var iconColorConstOnImage: Color { get }
-    /// Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode.
+    /// Success icon color for success indicators (e.g., checkmark icon, completion indicator). Behavior: Dynamic — adapts between light and dark mode.
     var iconColorSuccess: Color { get }
-    /// Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+    /// Error icon color for error indicators (e.g., error badge icon, validation error icon). Behavior: Dynamic — adapts between light and dark mode.
     var iconColorError: Color { get }
-    /// Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
+    /// Warning icon color for caution indicators (e.g., warning triangle, alert icon). Behavior: Dynamic — adapts between light and dark mode.
     var iconColorWarning: Color { get }
-    /// Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds). Behavior: Constant — maintains identical red tone across Light and Dark mode.
+    /// Brand-colored icon for emphasis (e.g., featured icons, brand indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorBrand: Color { get }
-    /// Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
+    /// Brand icon color in light mode, neutral white in dark mode. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorBrandLightOnly: Color { get }
-    /// Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces. Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds.
+    /// Primary icon color for static/decorative icons (e.g., section icons, illustrative icons, status indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorPrimary: Color { get }
-    /// Muted text tone for subtle information, timestamps, or inactive text elements. Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode.
+    /// Secondary icon color for static supporting icons (e.g., metadata icons, decorative icons, list markers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorSecondary: Color { get }
-    /// Secondary text color used for supportive information, subtitles, and less prominent text. Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
+    /// Tertiary icon color for static de-emphasized icons (e.g., subtle indicators, background icons).  Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
     var iconColorTertiary: Color { get }
-    /// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
+    /// Primary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var iconColorPrimaryInverse: Color { get }
+    /// Secondary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.
     var iconColorSecondaryInverse: Color { get }
+    /// High contrast inverse icon for maximum visibility on inverted surfaces. Behavior: Inverted — swaps light and dark values.
     var iconColorInverseHighContrast: Color { get }
     /// Layer opacity value at 5% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity05: Double { get }
@@ -288,9 +317,8 @@ public struct BildLightColors: BildColorScheme, DesignColorScheme {
     public let borderColorSuccess: Color = Color(hex: 0x006E3E)
     public let borderColorError: Color = Color(hex: 0xDD0000)
     public let borderColorWarning: Color = Color(hex: 0xC65502)
-    public let borderColorInfo: Color = Color(hex: 0x8C9196)
     public let borderColorDisabled: Color = Color(hex: 0xDDE1E2)
-    public let borderColorFocus: Color = Color(hex: 0x40464D)
+    public let borderColorSelected: Color = Color(hex: 0x40464D)
     public let borderColorActive: Color = Color(hex: 0xDD0000)
     public let borderColorIdle: Color = Color(hex: 0x8C9196)
     public let borderColorDefaultInverse: Color = Color(hex: 0x565A5F)

package/dist/ios/brands/bild/semantic/effects/EffectsDark.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Effects light

package/dist/ios/brands/bild/semantic/effects/EffectsLight.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Effects light

package/dist/ios/brands/bild/semantic/sizeclass/SizingCompact.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: SizingScheme compact

package/dist/ios/brands/bild/semantic/sizeclass/SizingRegular.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: SizingScheme regular

package/dist/ios/brands/bild/semantic/typography/TypographySizeclassCompact.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Typography compact

package/dist/ios/brands/bild/semantic/typography/TypographySizeclassRegular.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Typography regular

package/dist/ios/brands/bild/theme/BildTheme.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: SwiftUI Theme Provider

package/dist/ios/brands/sportbild/components/.DSDocsStyles/.DSDocsStylesTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: .DSDocsStyles
@@ -33,7 +33,6 @@ public enum .DSDocsStylesTokens {
         var bildDesignSideMenu: TextStyle { get }
         var bildDesignSideMenuActive: TextStyle { get }
         var bildDesignSideMenuHover: TextStyle { get }
-        var verticalVideosMockHeadlines: TextStyle { get }
         var tokenSpecL: TextStyle { get }
         var specsSpecsXs: TextStyle { get }
         var specsSpecsS: TextStyle { get }
@@ -64,7 +63,6 @@ public enum .DSDocsStylesTokens {
             public let bildDesignSideMenu: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let bildDesignSideMenuActive: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .underline )
             public let bildDesignSideMenuHover: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .semibold, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
-            public let verticalVideosMockHeadlines: TextStyle = TextStyle( fontFamily: "Gotham Condensed", fontWeight: .semibold, fontSize: 22, lineHeight: 22, letterSpacing: 0, textCase: .original, textDecoration: .underline )
             public let tokenSpecL: TextStyle = TextStyle( fontFamily: "Source Code Pro", fontWeight: .medium, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let specsSpecsXs: TextStyle = TextStyle( fontFamily: "Gotham", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let specsSpecsS: TextStyle = TextStyle( fontFamily: "Gotham", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
@@ -85,7 +83,6 @@ public enum .DSDocsStylesTokens {
             public let bildDesignSideMenu: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let bildDesignSideMenuActive: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .underline )
             public let bildDesignSideMenuHover: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .semibold, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
-            public let verticalVideosMockHeadlines: TextStyle = TextStyle( fontFamily: "Gotham Condensed", fontWeight: .semibold, fontSize: 32, lineHeight: 32, letterSpacing: 0, textCase: .original, textDecoration: .underline )
             public let tokenSpecL: TextStyle = TextStyle( fontFamily: "Source Code Pro", fontWeight: .medium, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let specsSpecsXs: TextStyle = TextStyle( fontFamily: "Gotham", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let specsSpecsS: TextStyle = TextStyle( fontFamily: "Gotham", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .original, textDecoration: .none )

package/dist/ios/brands/sportbild/components/Alert/AlertTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Alert

package/dist/ios/brands/sportbild/components/Article/ArticleTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Article

package/dist/ios/brands/sportbild/components/AudioPlayer/AudioPlayerTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: AudioPlayer

package/dist/ios/brands/sportbild/components/Avatar/AvatarTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Avatar
@@ -131,8 +131,8 @@ public enum AvatarTokens {
             public let appAvatar: TextStyle = TextStyle( fontFamily: "AntennaCond", fontWeight: .heavy, fontSize: 12, lineHeight: 12, letterSpacing: 0, textCase: .upper, textDecoration: .none )
             public let avatarDefault: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .bold, fontSize: 13, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let avatarHover: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .bold, fontSize: 13, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .underline )
-            public let avatarSecondaryInfo: TextStyle = TextStyle( fontFamily: "UNRESOLVED_VariableID:18321:11220", fontWeight: .regular, fontSize: 13, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .none )
-            public let avatarSecondaryInfoHover: TextStyle = TextStyle( fontFamily: "UNRESOLVED_VariableID:18321:11220", fontWeight: .regular, fontSize: 13, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .underline )
+            public let avatarSecondaryInfo: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 13, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .none )
+            public let avatarSecondaryInfoHover: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 13, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .underline )
         }
 
         public struct Regular: AvatarTypographyTokens {
@@ -141,8 +141,8 @@ public enum AvatarTokens {
             public let appAvatar: TextStyle = TextStyle( fontFamily: "AntennaCond", fontWeight: .heavy, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .upper, textDecoration: .none )
             public let avatarDefault: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .bold, fontSize: 15, lineHeight: 23, letterSpacing: 0, textCase: .original, textDecoration: .none )
             public let avatarHover: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .bold, fontSize: 15, lineHeight: 23, letterSpacing: 0, textCase: .original, textDecoration: .underline )
-            public let avatarSecondaryInfo: TextStyle = TextStyle( fontFamily: "UNRESOLVED_VariableID:18321:11220", fontWeight: .regular, fontSize: 15, lineHeight: 23, letterSpacing: 0, textCase: .original, textDecoration: .none )
-            public let avatarSecondaryInfoHover: TextStyle = TextStyle( fontFamily: "UNRESOLVED_VariableID:18321:11220", fontWeight: .regular, fontSize: 15, lineHeight: 23, letterSpacing: 0, textCase: .original, textDecoration: .underline )
+            public let avatarSecondaryInfo: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 15, lineHeight: 23, letterSpacing: 0, textCase: .original, textDecoration: .none )
+            public let avatarSecondaryInfoHover: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 15, lineHeight: 23, letterSpacing: 0, textCase: .original, textDecoration: .underline )
         }
     }
 }

package/dist/ios/brands/sportbild/components/Badge/BadgeTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Badge
@@ -80,15 +80,15 @@ public enum BadgeTokens {
         public struct Compact: BadgeTypographyTokens {
             public static let shared = Compact()
             private init() {}
-            public let videoAdBadge: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .regular, fontSize: 14, lineHeight: 14, letterSpacing: 0, textCase: .upper, textDecoration: .none )
-            public let videoTimeBadge: TextStyle = TextStyle( fontFamily: "UNRESOLVED_VariableID:18379:11164", fontWeight: .regular, fontSize: 16, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .none )
+            public let videoAdBadge: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 14, lineHeight: 14, letterSpacing: 0, textCase: .upper, textDecoration: .none )
+            public let videoTimeBadge: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 16, lineHeight: 21, letterSpacing: 0, textCase: .original, textDecoration: .none )
         }
 
         public struct Regular: BadgeTypographyTokens {
             public static let shared = Regular()
             private init() {}
-            public let videoAdBadge: TextStyle = TextStyle( fontFamily: "Gotham XNarrow", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .upper, textDecoration: .none )
-            public let videoTimeBadge: TextStyle = TextStyle( fontFamily: "UNRESOLVED_VariableID:18379:11164", fontWeight: .regular, fontSize: 18, lineHeight: 23.8, letterSpacing: 0, textCase: .original, textDecoration: .none )
+            public let videoAdBadge: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 16, lineHeight: 16, letterSpacing: 0, textCase: .upper, textDecoration: .none )
+            public let videoTimeBadge: TextStyle = TextStyle( fontFamily: "Inter", fontWeight: .regular, fontSize: 18, lineHeight: 23.8, letterSpacing: 0, textCase: .original, textDecoration: .none )
         }
     }
 }

package/dist/ios/brands/sportbild/components/Breadcrumb/BreadcrumbTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Breadcrumb

package/dist/ios/brands/sportbild/components/BreakingNews/BreakingNewsTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: BreakingNews

package/dist/ios/brands/sportbild/components/Button/ButtonTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Button

package/dist/ios/brands/sportbild/components/Card/CardTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Card

package/dist/ios/brands/sportbild/components/Carousel/CarouselTokens.swift

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.1.0
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Context: Component: Carousel