@marioschmidt/design-system-tokens 1.0.79 → 1.2.0

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

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.79
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: ColorScheme light
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/ios.md
@@ -13,165 +13,231 @@ 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.
-    var textColorAccentConstant: 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.
+    /// 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 }
+    /// 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 }
+    /// 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.
-    var textColorMuted: 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.
-    var textColorPrimaryInverse: 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.
-    var textColorPrimaryConstant: 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.
-    var textColorSuccessConstant: Color { get }
-    /// Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards). Behavior: Constant — unchanged across modes.
-    var textColorPrimaryInverseConstant: 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.
+    /// 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 }
-    /// Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
-    var textColorAttentionHigh: 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.
-    var textColorAccent: Color { get }
-    /// Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
-    var textColorAttentionMedium: 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.
-    var textColorOnDarkSurface: 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.
-    var surfaceColorPrimary: 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.
-    var surfaceColorSecondary: 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.
-    var surfaceColorPrimaryInverse: Color { get }
-    /// A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts). Behavior: Constant — remains the same in both modes.
-    var surfaceColorPrimaryConstantLight: 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.
-    var surfaceColorPrimaryConstantDark: 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.
-    var surfaceColorQuartenary: 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.
-    var surfaceColorSuccess: 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.
-    var surfaceColorTertiary: Color { get }
-    /// Represents tertiary-level gradient background. Currently used on skeletons.
-    var surfaceColorTertiaryGradientStop: 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.
-    var surfaceColorTertiaryInverse: 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.
-    var surfaceColorPrimaryGradientStop: Color { get }
-    /// Used for secondary surface gradients or subtle depth layers across backgrounds. Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
-    var surfaceColorSecondaryGradientStop: 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.
-    var surfaceColorQuartenaryInverse: 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.
-    var kickerTextColorOnSurface: 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.
-    var headlineColorPrimary: 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.
-    var headlineColorWhiteConst: Color { get }
-    /// Specialized kicker color for use on red or brand-colored backgrounds (e.g., red kicker bg within teaser cards). Behavior: Constant — remains consistent across light and darkmode.
-    var kickerTextColorOnRed: Color { get }
+    /// 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 }
+    /// 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 }
+    /// Headline text color for article titles and major headings. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+    var headlineTextColor: Color { get }
+    /// 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 }
+    /// Secondary text on dark solid surfaces, mode-independent. Behavior: Static — same value in light and dark mode.
+    var textColorSecondaryOnDark: Color { get }
+    /// 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 kickerTextColorOnDarkBg: Color { get }
+    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 kickerTextColorOnBrightBg: Color { get }
-    /// Defines the active state color for secondary actions (e.g., secondary buttons, tabs, or toggles). Behavior: Dynamic - light gray in Light mode and bright gray in Dark mode to maintain perceptual balance.
-    var colorSecondaryActive: Color { get }
-    /// Used to represent the active or pressed state of primary actions such as tabs or links. Behavior: Constant - identical value across modes for consistent interaction feedback.
-    var colorPrimaryActive: Color { get }
-    /// Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility. Behavior: Dynamic - adapts neutral tones based on theme brightness.
-    var colorSecondaryDisabled: 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.
-    var colorPrimaryDisabled: Color { get }
-    /// Inverse variant of the secondary active state, applied on dark backgrounds or inverse layouts. Behavior: Dynamic - switches between bright and dark tones depending on the background.
-    var colorSecondaryActiveInverse: Color { get }
-    /// Represents active or pressed states for tertiary elements (e.g., link highlights, icons, or subtle interactive surfaces). Behavior: Constant - uses the same green success tone across Light and Dark mode.
-    var colorTertiaryActive: Color { get }
-    /// Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention. Behavior: Dynamic - adjusts between gray tones for Light and Dark mode consistency.
-    var colorTertiaryDisabled: 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.
-    var borderColorMediumContrast: 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.
-    var borderColorLowContrast: 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.
-    var borderColorHighContrast: 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.
-    var borderColorLowContrastConstant: 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.
+    var kickerTextColorOnLight: Color { get }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// Success text color for confirmation messages and positive feedback. Behavior: Dynamic — adapts between light and dark mode.
+    var textColorSuccess: Color { get }
+    /// Error text color for error messages and validation feedback. Behavior: Dynamic — adapts between light and dark mode.
+    var textColorError: Color { get }
+    /// Warning text color for caution messages and alerts. Behavior: Dynamic — adapts between light and dark mode.
+    var textColorWarning: Color { get }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// Inverted quaternary background for subtle contrast distinctions. Behavior: Inverted — swaps light and dark values. Brand-specific.
+    var bgColorQuaternaryInverse: Color { get }
+    /// Inverted secondary background for elevated contrast elements (e.g., tooltips, popovers). Behavior: Inverted — swaps light and dark values. Brand-specific.
+    var bgColorSecondaryInverse: Color { get }
+    /// Inverted quintenary background for high-contrast inverse elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
+    var bgColorQuintenaryInverse: Color { get }
+    /// 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 }
+    /// 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 }
+    /// 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 feedback background for hover state (e.g., success notification hover). Behavior: Dynamic — adapts between light and dark mode.
+    var bgColorSuccessTintHover: Color { get }
+    /// 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 }
+    /// Gradient stop color for tertiary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+    var bgColorTertiaryGradientStop: Color { get }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// Default border on dark solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
+    var borderColorDefaultOnDark: Color { get }
+    /// Subtle border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
+    var borderColorSubtleOnLight: Color { get }
+    /// Default border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
+    var borderColorDefaultOnLight: Color { get }
+    /// 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 }
-    /// Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
-    var borderColorPrimaryDisabled: Color { get }
-    /// Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines).
-    var borderColorSecondaryDisabled: Color { get }
-    /// Used as the main brand color for key interactive elements such as primary buttons, active states, and prominent highlights. It remains constant across Light and Dark Mode.
-    var coreColorPrimary: Color { get }
-    /// Defines the secondary brand tone. This variable changes across Light and Dark Mode.
-    var coreColorSecondary: Color { get }
-    /// Represents tertiary brand accents. This variable changes across Light and Dark Mode.
-    var coreColorTertiary: Color { get }
-    /// Use this on elements that must maintain the white color even in dark mode.
-    var coreColorSecondaryConstant: Color { get }
-    /// Use this on elements that need to maintain the dark color across themes and color modes.
-    var coreColorTertiaryConstant: Color { get }
-    /// Primary icon color on primary surfaces.
-    var iconColorPrimary: Color { get }
-    /// Inverse icon color for use on contrasting backgrounds (e.g., light icons on dark surfaces or dark icons on bright surfaces). Behavior: Dynamic - switches between light and dark.
-    var iconColorInverse: Color { get }
-    /// Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes.
-    var iconColorSecondaryConstant: Color { get }
-    /// Used for icons displayed on dark backgrounds that don´t change colors, ensuring sufficient contrast and legibility. Behavior: Constant - always uses a neutral bright value.
-    var iconColorConstantOnDark: 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.
-    var iconColorPrimaryConstant: Color { get }
-    /// Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode.
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// Secondary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
+    var iconColorSecondaryOnLight: Color { get }
+    /// 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 }
+    /// Secondary icon on dark solid surfaces. Behavior: Static — same value in light and dark mode.
+    var iconColorSecondaryOnDark: Color { get }
+    /// Primary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
+    var iconColorPrimaryOnLight: Color { get }
+    /// 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 }
+    /// Success icon color for success indicators (e.g., checkmark icon, completion indicator). Behavior: Dynamic — adapts between light and dark mode.
     var iconColorSuccess: 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.
-    var labelColorPrimary: Color { get }
-    /// Secondary label tone used for less prominent text such as secondary badges or supporting labels. Behavior: Dynamic — adapts between mid-grays for Light and Dark surfaces.
-    var labelColorSecondary: 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.
-    var labelColorDisabled: Color { get }
-    /// Used when primary label color should remain unchanged across modes in static UI areas. Behavior: Constant — identical tone in both Light and Dark mode.
-    var labelColorPrimaryConstant: 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.
-    var labelColorPrimaryInverseConstant: Color { get }
-    /// Tertiary label tone for subtle, low-emphasis UI text such as placeholder text or tertiary badges. Behavior: Constant — identical tone across both modes for stable hierarchy.
-    var labelColorTertiary: Color { get }
-    /// Inverse version of the primary label color, used on dark or colored backgrounds. Behavior: Dynamic — switches between light and dark.
-    var labelColorPrimaryInverse: Color { get }
-    /// High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition.
-    var attentionColorHigh: 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.
-    var accentColorPrimary: Color { get }
-    /// Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes.
-    var attentionColorMedium: Color { get }
-    /// Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition.
-    var attentionColorLow: 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.
-    var accentColorPrimaryConstant: 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.
-    var attentionColorSuccessPrimary: Color { get }
-    /// Very low-contrast background tone used for information or system-neutral surfaces, often for tooltips or quiet information highlights. Dynamic — light neutral in Light mode and dark neutral in Dark mode.
-    var attentionColorExtraLow: Color { get }
-    /// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity.
-    var attentionColorSuccessSecondary: 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 overlayScrimBlack: 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 overlayScrimWhite: Color { get }
+    /// 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 }
+    /// Warning icon color for caution indicators (e.g., warning triangle, alert icon). Behavior: Dynamic — adapts between light and dark mode.
+    var iconColorWarning: Color { get }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// 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 }
+    /// Layer opacity value at 10% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity10: Double { get }
+    /// Layer opacity value at 20% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity20: Double { get }
+    /// Layer opacity value at 30% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity30: Double { get }
+    /// Layer opacity value at 40% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity40: Double { get }
+    /// Layer opacity value at 50% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity50: Double { get }
+    /// Layer opacity value at 60% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity60: Double { get }
+    /// Layer opacity value at 70% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity70: Double { get }
+    /// Layer opacity value at 80% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity80: Double { get }
+    /// Layer opacity value at 90% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity90: Double { get }
+    /// Layer opacity value at 100% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity100: Double { get }
+    /// Layer opacity value at 00% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
     var layerOpacity00: Double { get }
 }
 
@@ -180,80 +246,107 @@ public struct BildLightColors: BildColorScheme, DesignColorScheme {
     public static let shared = BildLightColors()
     private init() {}
 
-    public let textColorAccentConstant: Color = Color(hex: 0xDD0000)
-    public let textColorPrimary: Color = Color(hex: 0x232629)
-    public let textColorMuted: Color = Color(hex: 0x666B70)
-    public let textColorPrimaryInverse: Color = Color(hex: 0xE9ECEF)
-    public let textColorPrimaryConstant: Color = Color(hex: 0x232629)
-    public let textColorSuccessConstant: Color = Color(hex: 0x006E3E)
-    public let textColorPrimaryInverseConstant: Color = Color(hex: 0xE9ECEF)
-    public let textColorSecondary: Color = Color(hex: 0x8C9196)
-    public let textColorAttentionHigh: Color = Color(hex: 0xDD0000)
-    public let textColorAccent: Color = Color(hex: 0xDD0000)
-    public let textColorAttentionMedium: Color = Color(hex: 0xFD8227)
-    public let textColorOnDarkSurface: Color = Color(hex: 0xFFFFFF)
-    public let surfaceColorPrimary: Color = Color(hex: 0xFFFFFF)
-    public let surfaceColorSecondary: Color = Color(hex: 0xF2F4F5)
-    public let surfaceColorPrimaryInverse: Color = Color(hex: 0x232629)
-    public let surfaceColorPrimaryConstantLight: Color = Color(hex: 0xFFFFFF)
-    public let surfaceColorPrimaryConstantDark: Color = Color(hex: 0x232629)
-    public let surfaceColorQuartenary: Color = Color(hex: 0xCED4DA)
-    public let surfaceColorSuccess: Color = Color(hex: 0xCEF4E4)
-    public let surfaceColorTertiary: Color = Color(hex: 0xE9ECEF)
-    public let surfaceColorTertiaryGradientStop: Color = Color(hex: 0xE9ECEF, alpha: 0.00)
-    public let surfaceColorTertiaryInverse: Color = Color(hex: 0x343C41)
-    public let surfaceColorPrimaryGradientStop: Color = Color(hex: 0xFFFFFF, alpha: 0.00)
-    public let surfaceColorSecondaryGradientStop: Color = Color(hex: 0xF2F4F5, alpha: 0.00)
-    public let surfaceColorQuartenaryInverse: Color = Color(hex: 0x4B525A)
-    public let kickerTextColorOnSurface: Color = Color(hex: 0xDD0000)
-    public let headlineColorPrimary: Color = Color(hex: 0x232629)
-    public let headlineColorWhiteConst: Color = Color(hex: 0xFFFFFF)
-    public let kickerTextColorOnRed: Color = Color(hex: 0xFFFFFF)
-    public let kickerTextColorOnDarkBg: Color = Color(hex: 0xFFFFFF, alpha: 0.80)
-    public let kickerTextColorOnBrightBg: Color = Color(hex: 0x000000, alpha: 0.70)
-    public let colorSecondaryActive: Color = Color(hex: 0x232629)
-    public let colorPrimaryActive: Color = Color(hex: 0xDD0000)
-    public let colorSecondaryDisabled: Color = Color(hex: 0xE9ECEF)
-    public let colorPrimaryDisabled: Color = Color(hex: 0xF2F4F5)
-    public let colorSecondaryActiveInverse: Color = Color(hex: 0xF2F4F5)
-    public let colorTertiaryActive: Color = Color(hex: 0x00C373)
-    public let colorTertiaryDisabled: Color = Color(hex: 0x8C9196)
-    public let borderColorMediumContrast: Color = Color(hex: 0xCED4DA)
-    public let borderColorLowContrast: Color = Color(hex: 0xE9ECEF)
-    public let borderColorHighContrast: Color = Color(hex: 0x232629)
-    public let borderColorLowContrastConstant: Color = Color(hex: 0xE9ECEF)
-    public let borderColorSuccess: Color = Color(hex: 0x00C373)
-    public let borderColorWarning: Color = Color(hex: 0xDD0000)
-    public let borderColorPrimaryDisabled: Color = Color(hex: 0xF2F4F5)
-    public let borderColorSecondaryDisabled: Color = Color(hex: 0xE9ECEF)
-    public let coreColorPrimary: Color = Color(hex: 0xDD0000)
-    public let coreColorSecondary: Color = Color(hex: 0xFFFFFF)
-    public let coreColorTertiary: Color = Color(hex: 0x232629)
-    public let coreColorSecondaryConstant: Color = Color(hex: 0xFFFFFF)
-    public let coreColorTertiaryConstant: Color = Color(hex: 0x232629)
-    public let iconColorPrimary: Color = Color(hex: 0x4B525A)
-    public let iconColorInverse: Color = Color(hex: 0xCED4DA)
-    public let iconColorSecondaryConstant: Color = Color(hex: 0x8C9196)
-    public let iconColorConstantOnDark: Color = Color(hex: 0xF2F4F5)
-    public let iconColorPrimaryConstant: Color = Color(hex: 0x4B525A)
-    public let iconColorSuccess: Color = Color(hex: 0x00C373)
-    public let labelColorPrimary: Color = Color(hex: 0x232629)
-    public let labelColorSecondary: Color = Color(hex: 0x4B525A)
-    public let labelColorDisabled: Color = Color(hex: 0xCED4DA)
-    public let labelColorPrimaryConstant: Color = Color(hex: 0x232629)
-    public let labelColorPrimaryInverseConstant: Color = Color(hex: 0xE9ECEF)
-    public let labelColorTertiary: Color = Color(hex: 0x8C9196)
-    public let labelColorPrimaryInverse: Color = Color(hex: 0xE9ECEF)
-    public let attentionColorHigh: Color = Color(hex: 0xDD0000)
-    public let accentColorPrimary: Color = Color(hex: 0xDD0000)
-    public let attentionColorMedium: Color = Color(hex: 0xFD8227)
-    public let attentionColorLow: Color = Color(hex: 0xFFBF00)
-    public let accentColorPrimaryConstant: Color = Color(hex: 0xDD0000)
-    public let attentionColorSuccessPrimary: Color = Color(hex: 0x00C373)
-    public let attentionColorExtraLow: Color = Color(hex: 0xFFFFFF)
-    public let attentionColorSuccessSecondary: Color = Color(hex: 0x006E3E)
-    public let overlayScrimBlack: Color = Color(hex: 0x000000, alpha: 0.70)
-    public let overlayScrimWhite: Color = Color(hex: 0xFFFFFF, alpha: 0.70)
+    public let textColorBrand: Color = Color(hex: 0xDD0000)
+    public let textColorBrandLightOnly: Color = Color(hex: 0xDD0000)
+    public let textColorPrimary: Color = Color(hex: 0x222628)
+    public let textColorSecondary: Color = Color(hex: 0x565A5F)
+    public let textColorTertiary: Color = Color(hex: 0x6E787C)
+    public let kickerTextColor: Color = Color(hex: 0xDD0000)
+    public let headlineTextColor: Color = Color(hex: 0x222628)
+    public let textColorOnImage: Color = Color(hex: 0xFFFFFF)
+    public let textColorSecondaryOnDark: Color = Color(hex: 0xDDE1E2)
+    public let textColorPrimaryOnLight: Color = Color(hex: 0x222628)
+    public let kickerTextColorOnDark: Color = Color(hex: 0xFFFFFF, alpha: 0.80)
+    public let kickerTextColorOnLight: Color = Color(hex: 0x000000, alpha: 0.70)
+    public let textColorPrimaryOnDark: Color = Color(hex: 0xFFFFFF)
+    public let textColorIdle: Color = Color(hex: 0x565A5F)
+    public let textColorDisabled: Color = Color(hex: 0xA6ABB0)
+    public let textColorHover: Color = Color(hex: 0x222628)
+    public let textColorActive: Color = Color(hex: 0x222628)
+    public let textColorPrimaryInverse: Color = Color(hex: 0xDDE1E2)
+    public let textColorSecondaryInverse: Color = Color(hex: 0xA6ABB0)
+    public let textColorInverseHighContrast: Color = Color(hex: 0xFFFFFF)
+    public let textColorSuccess: Color = Color(hex: 0x006E3E)
+    public let textColorError: Color = Color(hex: 0xC10000)
+    public let textColorWarning: Color = Color(hex: 0x9E4401)
+    public let bgColorPrimary: Color = Color(hex: 0xFFFFFF)
+    public let bgColorDisabled: Color = Color(hex: 0xF2F4F5)
+    public let bgColorSecondary: Color = Color(hex: 0xF2F4F5)
+    public let bgColorPrimaryConstDark: Color = Color(hex: 0x222628)
+    public let bgColorQuaternary: Color = Color(hex: 0xC4C9CF)
+    public let bgColorTertiary: Color = Color(hex: 0xDDE1E2)
+    public let bgColorPrimaryConstLight: Color = Color(hex: 0xFFFFFF)
+    public let bgColorQuintenary: Color = Color(hex: 0x8C9196)
+    public let bgColorBrandLightOnly: Color = Color(hex: 0xDD0000)
+    public let bgColorBrandSolid: Color = Color(hex: 0xDD0000)
+    public let bgColorBrandSolidHover: Color = Color(hex: 0xC10000)
+    public let bgColorBrandSolidActive: Color = Color(hex: 0x930000)
+    public let bgColorBrandTint: Color = Color(hex: 0xFFDADA)
+    public let bgColorBrandTintHover: Color = Color(hex: 0xFFB2B2)
+    public let bgColorPrimaryInverse: Color = Color(hex: 0x222628)
+    public let bgColorTertiaryInverse: Color = Color(hex: 0x343C41)
+    public let bgColorQuaternaryInverse: Color = Color(hex: 0x40464D)
+    public let bgColorSecondaryInverse: Color = Color(hex: 0x2C3133)
+    public let bgColorQuintenaryInverse: Color = Color(hex: 0x8C9196)
+    public let bgColorSuccessTint: Color = Color(hex: 0xDEF7E6)
+    public let bgColorSuccessSolid: Color = Color(hex: 0x158751)
+    public let bgColorSuccessSolidHover: Color = Color(hex: 0x006E3E)
+    public let bgColorSuccessTintHover: Color = Color(hex: 0xB9EFCD)
+    public let bgColorSuccessSolidActive: Color = Color(hex: 0x0D5232)
+    public let bgColorTertiaryGradientStop: Color = Color(hex: 0xDDE1E2, alpha: 0.00)
+    public let bgColorPrimaryGradientStop: Color = Color(hex: 0xFFFFFF, alpha: 0.00)
+    public let bgColorSecondaryGradientStop: Color = Color(hex: 0xF2F4F5, alpha: 0.00)
+    public let overlayScrimBlackConst: Color = Color(hex: 0x000000, alpha: 0.70)
+    public let overlayScrimWhiteConst: Color = Color(hex: 0xFFFFFF, alpha: 0.70)
+    public let bgColorErrorTint: Color = Color(hex: 0xFFECEC)
+    public let bgColorErrorTintHover: Color = Color(hex: 0xFFDADA)
+    public let bgColorErrorSolid: Color = Color(hex: 0xC10000)
+    public let bgColorErrorSolidHover: Color = Color(hex: 0x930000)
+    public let bgColorWarningTint: Color = Color(hex: 0xFFEDDF)
+    public let bgColorWarningTintHover: Color = Color(hex: 0xFEDBC1)
+    public let bgColorWarningSolid: Color = Color(hex: 0xFD8227)
+    public let bgColorWarningSolidHover: Color = Color(hex: 0xEF6702)
+    public let borderColorDefault: Color = Color(hex: 0xC4C9CF)
+    public let borderColorSubtle: Color = Color(hex: 0xDDE1E2)
+    public let borderColorExtraStrong: Color = Color(hex: 0x222628)
+    public let borderColorStrong: Color = Color(hex: 0x6E787C)
+    public let borderColorSubtleOnDark: Color = Color(hex: 0x343C41)
+    public let borderColorDefaultOnDark: Color = Color(hex: 0x565A5F)
+    public let borderColorSubtleOnLight: Color = Color(hex: 0xDDE1E2)
+    public let borderColorDefaultOnLight: Color = Color(hex: 0xC4C9CF)
+    public let borderColorSuccess: Color = Color(hex: 0x006E3E)
+    public let borderColorError: Color = Color(hex: 0xDD0000)
+    public let borderColorWarning: Color = Color(hex: 0xC65502)
+    public let borderColorDisabled: Color = Color(hex: 0xDDE1E2)
+    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)
+    public let borderColorSubtleInverse: Color = Color(hex: 0x343C41)
+    public let borderColorBrand: Color = Color(hex: 0xDD0000)
+    public let borderColorBrandLightOnly: Color = Color(hex: 0xDD0000)
+    public let borderColorBrandConst: Color = Color(hex: 0xDD0000)
+    public let borderColorNoContrast: Color = Color(hex: 0xFFFFFF)
+    public let iconColorIdle: Color = Color(hex: 0x565A5F)
+    public let iconColorDisabled: Color = Color(hex: 0xA6ABB0)
+    public let iconColorHover: Color = Color(hex: 0x222628)
+    public let iconColorActive: Color = Color(hex: 0x222628)
+    public let iconColorSecondaryOnLight: Color = Color(hex: 0x565A5F)
+    public let iconColorPrimaryOnDark: Color = Color(hex: 0xFFFFFF)
+    public let iconColorSecondaryOnDark: Color = Color(hex: 0xDDE1E2)
+    public let iconColorPrimaryOnLight: Color = Color(hex: 0x222628)
+    public let iconColorConstOnImage: Color = Color(hex: 0xFFFFFF)
+    public let iconColorSuccess: Color = Color(hex: 0x006E3E)
+    public let iconColorError: Color = Color(hex: 0xC10000)
+    public let iconColorWarning: Color = Color(hex: 0x9E4401)
+    public let iconColorBrand: Color = Color(hex: 0xDD0000)
+    public let iconColorBrandLightOnly: Color = Color(hex: 0xDD0000)
+    public let iconColorPrimary: Color = Color(hex: 0x222628)
+    public let iconColorSecondary: Color = Color(hex: 0x565A5F)
+    public let iconColorTertiary: Color = Color(hex: 0x6E787C)
+    public let iconColorPrimaryInverse: Color = Color(hex: 0xDDE1E2)
+    public let iconColorSecondaryInverse: Color = Color(hex: 0xA6ABB0)
+    public let iconColorInverseHighContrast: Color = Color(hex: 0xFFFFFF)
     public let layerOpacity05: Double = 0.05
     public let layerOpacity10: Double = 0.1
     public let layerOpacity20: Double = 0.2