@marioschmidt/design-system-tokens 1.0.19 → 1.0.21

package/dist/flutter/brands/sportbild/semantic/color/colormode-light.dart

@@ -12,425 +12,469 @@ import 'dart:ui';
 class ColormodeLight {
     ColormodeLight._();
 
-    static const componentAlertAlertSurfaceColor = Color(0xFFFFFFFF); /** On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025 */
-    static const componentAlertAlertSurfaceColorConstant = Color(0xFFFFFFFF); /** On marketing offer surfaces this variable is  used. */
-    static const componentAvatarAvatarLabelColor = Color(0xFF232629); /** 09-2025 css --article-author-name-color */
-    static const componentAvatarAvatarLabelColorHover = Color(0xFFDD0000); /** 09-2025 css --article-author-name-color */
-    static const componentBreadcrumbBreadcrumbTextColorHover = Color(0xFF232629); /** Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100 */
-    static const componentBreadcrumbBreadcrumbTextColorIdle = Color(0xFF4B525A); /** Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096 */
-    static const componentBreakingNewsBreakingNewsBottomTitleTextColor = Color(0xFF1C1C1C);
-    static const componentBreakingNewsBreakingNewsSurfaceColor = Color(0xFF232629);
-    static const componentBreakingNewsBreakingNewsTextContentColor = Color(0xFFFFFFFF);
-    static const componentBreakingNewsBreakingNewsTitleSurfaceColor = Color(0xFFFD8227);
-    static const componentBreakingNewsBreakingNewsTopTitleTextColor = Color(0xFF1C1C1C);
-    static const componentButtonButtonLiveTickerLoadNewLabelColor = Color(0xFF8C9196);
-    static const componentButtonButtonLiveTickerLoadNewSurfaceColor = Color(0xFFFFFFFF);
-    static const componentButtonGhostButtonGhostBgColorHover = Color(0xFFCED4DA);
-    static const componentButtonPrimaryButtonPrimaryBrandBgColorHover = Color(0xFFAF0002);
-    static const componentButtonPrimaryButtonPrimaryBrandBgColorIdle = Color(0xFFDD0000);
-    static const componentButtonPrimaryButtonPrimaryLabelColor = Color(0xFFFFFFFF);
-    static const componentButtonPrimaryButtonPrimaryNeutralBgColorHover = Color(0xFF4B525A);
-    static const componentButtonPrimaryButtonPrimaryNeutralBgColorIdle = Color(0xFF232629); /** Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100 */
-    static const componentButtonPrimaryButtonPrimarySuccessColorHover = Color(0xFF006E3E);
-    static const componentButtonPrimaryButtonPrimarySuccessColorIdle = Color(0xFF18995C);
-    static const componentButtonSecondaryButtonSecondaryBgColorHover = Color(0xFFCED4DA);
-    static const componentButtonSecondaryButtonSecondaryBgColorIdle = Color(0xFFE9ECEF);
-    static const componentButtonSecondaryButtonSecondaryLabelColor = Color(0xFF4B525A);
-    static const componentButtonTertiaryButtonTertiaryBorderColorHover = Color(0xFF4B525A);
-    static const componentButtonTertiaryButtonTertiaryBorderColorIdle = Color(0xFFCED4DA);
-    static const componentButtonTertiaryButtonTertiaryLabelColor = Color(0xFF4B525A);
-    static const componentButtonTertiaryButtonTertiarySuccessBgColorHover = Color(0xFFCEF4E4);
-    static const componentButtonTertiaryButtonTertiarySuccessBorderColor = Color(0xFF18995C);
-    static const componentCardCardSurfaceBgColor = Color(0xFFFFFFFF);
-    static const componentChipsChipsBgColorActive = Color(0xFFDD0000);
-    static const componentChipsChipsBgColorHover = Color(0xFFAF0002);
-    static const componentChipsChipsBgColorIdle = Color(0xFFE9ECEF);
-    static const componentChipsChipsLabelColorHover = Color(0xFFFFFFFF);
-    static const componentChipsChipsLabelColorIdle = Color(0xFF232629);
-    static const componentDSysDocDSysDocsLabelTextColorMode = (Light Mode); /** This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts. */
-    static const componentDSysDocDSysDocsLabelTextSurfaceColorPrimaryPrimitiveName = BILD100; /** This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages. */
-    static const componentDSysDocDsDocSpacingItemBgColor = Color(0x1ADD0000);
-    static const componentDSysDocDsDocSpacingItemBorderColor = Color(0x80DD0000);
-    static const componentDropdownDropdownBgColorHover = Color(0xFFF2F4F5);
-    static const componentDropdownDropdownBgColorIdle = Color(0xFFFFFFFF);
-    static const componentEmptiesEmptiesBgColor = Color(0xFFF2F4F5);
-    static const componentEmptiesEmptiesLogoColor = Color(0xFFCED4DA);
-    static const componentFoldoutFoldoutLabelColorActive = Color(0xFFDD0000);
-    static const componentFoldoutFoldoutLabelColorIdle = Color(0xFF4B525A);
-    static const componentGalleryAppImageLightboxGalleryBgColor = Color(0xFF000000);
-    static const componentHeyHeyDrawerSurfaceColor = Color(0xFFF2F4F5);
-    static const componentHeyHeyFavInputFieldSurfaceColor = Color(0xFFE9ECEF);
-    static const componentHeyHeyIconUtilColor = Color(0xFF4B525A);
-    static const componentHeyHeySeparatorColor = Color(0xFFCED4DA); /** This is the most used color for separators across Bild products. */
-    static const componentHeyHeyTextColor = Color(0xFF4B525A);
-    static const componentInputFieldInputFieldBgColorDarkHighContrast = Color(0xFFE9ECEF);
-    static const componentInputFieldInputFieldBgColorDarkLowContrast = Color(0xFF343C41);
-    static const componentInputFieldInputFieldBgColorDarkMediumContrast = Color(0xFF4B525A);
-    static const componentInputFieldInputFieldBorderColorActive = Color(0xFF4B525A);
-    static const componentInputFieldInputFieldBorderColorDark = Color(0xFF8C9196);
-    static const componentInputFieldInputFieldBorderColorDarkActive = Color(0xFF232629);
-    static const componentInputFieldInputFieldBorderColorIdle = Color(0xFFCED4DA);
-    static const componentKickerPartnerKickerAubiBgColor = Color(0xFFF00000);
-    static const componentKickerPartnerKickerBzBgColor = Color(0xFFE3001B);
-    static const componentKickerPartnerKickerCobiBgColor = Color(0xFFDC231C);
-    static const componentKickerPartnerKickerFitbookBgColor = Color(0xFFFF97B7);
-    static const componentKickerPartnerKickerKaufberaterBgColor = Color(0xFF55476E);
-    static const componentKickerPartnerKickerMyhomebookBgColor = Color(0xFF66CCCC);
-    static const componentKickerPartnerKickerPetbookBgColor = Color(0xFFB9DB91);
-    static const componentKickerPartnerKickerSpobiBgColor = Color(0xFF174482);
-    static const componentKickerPartnerKickerTechbookBgColor = Color(0xFF93E4FF);
-    static const componentKickerPartnerKickerTravelbookBgColor = Color(0xFF8EF0ED);
-    static const componentKickerStandardKickerBgColorOnSurface = Color(0xFFDD0000);
-    static const componentMediaplayerAudioPlayerPlayButtonBgColor = Color(0x4DFFFFFF);
-    static const componentMediaplayerVidPlayerControlButtonsBgColorHover = Color(0x33000000);
-    static const componentMediaplayerVidPlayerControlButtonsBgColorPressed = Color(0x0D000000);
-    static const componentMediaplayerVidPlayerControlButtonsBgHoverColor = Color(0xCCDD0000); /** This variable is used for hover states of video player control buttons. */
-    static const componentMediaplayerVidPlayerControlsAutoplayButtonBgColor = Color(0x33000000);
-    static const componentMediaplayerVidPlayerOverlayScrimColor = Color(0x80000000);
-    static const componentMediaplayerVidPlayerProgressBarPreloadBgColor = Color(0x4DFFFFFF);
-    static const componentMediaplayerVidPlayerTooltipBgColor = Color(0xB2000000);
-    static const componentMediaplayerVidPlayerUnmuteButtonBgColor = Color(0x33000000);
-    static const componentMediaplayerVidPlayerUnmuteButtonBgColorHover = Color(0x59000000);
-    static const componentMenuAppTobBarTabNavBottomBorder = Color(0xFFE9ECEF);
-    static const componentMenuAppTobBarTabNavBottomBorderActive = Color(0xFFDD0000);
-    static const componentMenuAppTopBarIconColor = Color(0xFF4B525A);
-    static const componentMenuAppTopBarSurfaceColor = Color(0xFFFFFFFF);
-    static const componentMenuAppTopBarTextColorPrimary = Color(0xFF232629);
-    static const componentMenuItemMenuItemBorderColorActive = Color(0xFFDD0000);
-    static const componentMenuItemMenuItemLabelColorPrimary = Color(0xFF4B525A);
-    static const componentMenuItemMenuItemLabelColorPrimaryActive = Color(0xFF232629);
-    static const componentMenuItemMenuItemLabelColorSecondary = Color(0xFFFFFFFF); /** The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes. */
-    static const componentMenuMenuLinkLaneLabelColor = Color(0xFF4B525A);
-    static const componentMenuMenuLinkLaneLabelColorActive = Color(0xFF232629);
-    static const componentMenuMenuLinkLaneSurfaceColor = Color(0xFFFFFFFF);
-    static const componentMenuMenuScrolledSurfaceGradientColor = Color(0xF2FFFFFF); /** Used on a thin part at the top of header in navigation menu. */
-    static const componentMenuMenuSurfaceColor = Color(0xFFFFFFFF);
-    static const componentNewstickerNewsTickerBadgeIconsColor = Color(0xFF8C9196);
-    static const componentNewstickerNewsTickerTimestampColor = Color(0xFF8C9196);
-    static const componentPaginationGalleryPaginationElementActiveOpacity = 100px; /** Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. */
-    static const componentPaginationPaginationElementColorActive = Color(0xFFDD0000);
-    static const componentPaginationPaginationElementColorDefault = Color(0xFFCED4DA);
-    static const componentPaginationScrollBarThumbBgColor = Color(0xFF8C9196); /** Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space. */
-    static const componentPaginationScrollBarTrackBgColor = Color(0x1A000000); /** Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements. */
-    static const componentPartnerLinksPartnerLinksBgColorActive = Color(0xFFE9ECEF); /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-    static const componentPartnerLinksPartnerLinksBgColorIdle = Color(0xFFFFFFFF); /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-    static const componentPartnerLinksPartnerLinksBorderColorActive = Color(0xFF232629); /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-    static const componentPartnerLinksPartnerLinksBorderColorIdle = Color(0xFFCED4DA); /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-    static const componentPartnerLinksPartnerLinksContainerBorderColor = Color(0xFFCED4DA); /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-    static const componentSelectionSelectionBorderColor = Color(0xFF4B525A); /** Checkboxes and Radio buttons use this variable for their border. */
-    static const componentSliderSliderButtonOpacity = 90px; /** When users hover on gallery slider buttons the opacity changes to 90%. */
-    static const componentSliderSliderTrackBgColor = Color(0x59FFFFFF); /** This variable is used on audio player slider bars. It references a pure white with 35% opacity. */
-    static const componentSocialShareButtonSocialShareButtonBgColorActive = Color(0xFF343C41);
-    static const componentSocialShareButtonSocialShareButtonBgColorDefault = Color(0xFF4B525A);
-    static const componentSocialShareButtonSocialShareButtonLabelColorActive = Color(0xFFFFFFFF);
-    static const componentSocialShareButtonSocialShareButtonLabelColorDefault = Color(0xFFFFFFFF);
-    static const componentSubheaderSubheadersColor = Color(0xFF232629);
-    static const componentTabAppBottomTabBarBgColor = Color(0xFFFFFFFF);
-    static const componentTabTabBgColorHover = Color(0xFFE9ECEF);
-    static const componentTabTabLabelColorActive = Color(0xFF343C41);
-    static const componentTabTabLabelColorDefault = Color(0xFF4B525A);
-    static const componentTeaserTeaserHoverOpacity = 80px; /** When users hover over graphical teasers the image reduces opacity to 80%. */
-    static const componentTeaserTeaserTitleBackgroundGradientStart = Color(0xB2000000);
-    static const componentTeaserTeaserTitleBackgroundGradientStop = Color(0x00000000);
-    static const componentTextLinkTextLinkColorPrimary = Color(0xFF232629);
-    static const componentTextLinkTextLinkColorSecondary = Color(0xFF8C9196);
-    static const componentTextLinkTextLinkColorSecondaryActive = Color(0xFF232629);
-    static const semanticAttentionAccentColorPrimary = Color(0xFFDD0000); /** 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. */
-    static const semanticAttentionAccentColorPrimaryConstant = Color(0xFFDD0000); /** 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. */
-    static const semanticAttentionAttentionColorExtraLow = Color(0xFFFFFFFF); /** 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. */
-    static const semanticAttentionAttentionColorHigh = Color(0xFFDD0000); /** 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. */
-    static const semanticAttentionAttentionColorLow = Color(0xFFFFBF00); /** Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition. */
-    static const semanticAttentionAttentionColorMedium = Color(0xFFFD8227); /** Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. */
-    static const semanticAttentionAttentionColorSuccessPrimary = Color(0xFF00C373); /** 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. */
-    static const semanticAttentionAttentionColorSuccessSecondary = Color(0xFF006E3E); /** Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. */
-    static const /**
- * 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.
- */
-semanticBorderBorderColorHighContrast = Color(0xFF232629);
-    static const /**
- * Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers).
- * Dynamic — light gray in Light mode, dark gray in Dark mode.
- */
-semanticBorderBorderColorLowContrast = Color(0xFFE9ECEF);
-    static const semanticBorderBorderColorLowContrastConstant = Color(0xFFE9ECEF); /** 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. */
-    static const /**
- * 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.
- */
-semanticBorderBorderColorMediumContrast = Color(0xFFCED4DA);
-    static const semanticBorderBorderColorPrimaryDisabled = Color(0xFFF2F4F5); /** Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity. */
-    static const semanticBorderBorderColorSecondaryDisabled = Color(0xFFE9ECEF); /** Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines). */
-    static const /**
- * 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.
- */
-semanticBorderBorderColorSuccess = Color(0xFF00C373);
-    static const /**
- * 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.
- */
-semanticBorderBorderColorWarning = Color(0xFFDD0000);
-    static const semanticCoreCoreColorPrimary = Color(0xFFDD0000); /** 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. */
-    static const semanticCoreCoreColorSecondary = Color(0xFFFFFFFF); /** Defines the secondary brand tone. This variable changes across Light and Dark Mode. */
-    static const semanticCoreCoreColorSecondaryConstant = Color(0xFFFFFFFF); /** Use this on elements that must maintain the white color even in dark mode. */
-    static const semanticCoreCoreColorTertiary = Color(0xFF232629); /** Represents tertiary brand accents. This variable changes across Light and Dark Mode. */
-    static const semanticCoreCoreColorTertiaryConstant = Color(0xFF232629); /** Use this on elements that need to maintain the dark color across themes and color modes. */
-    static const semanticCoreCoreColorTertiaryVvPipeTest = Color(0xFF476D93); /** this is a test for the token pipeline */
-    static const semanticCoreFelipeTestColor = Color(0xFFE9580A); /** this is a test for the token pipeline */
-    static const semanticCoreGolianiTestColor = Color(0xFF00FFF2); /** this is a test for the token pipeline */
-    static const semanticCoreNpmTest = Color(0xFF476D93); /** this is a test for the token pipeline */
-    static const /**
- * 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.
- */
-semanticHeadingHeadlineColorPrimary = Color(0xFF232629);
-    static const /**
- * 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.
- */
-semanticHeadingHeadlineColorWhiteConst = Color(0xFFFFFFFF);
-    static const /**
- * 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.
- */
-semanticHeadingKickerTextColorOnBrightBg = Color(0xB2000000);
-    static const /**
- * Applied to kicker or meta text on dark colored backgrounds to maintain high legibility.
- * Behavior: Constant — always uses semi-transparent white for consistent readability.
- */
-semanticHeadingKickerTextColorOnDarkBg = Color(0xCCFFFFFF);
-    static const /**
- * 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.
- */
-semanticHeadingKickerTextColorOnRed = Color(0xFFFFFFFF);
-    static const /**
- * 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.
- */
-semanticHeadingKickerTextColorOnSurface = Color(0xFFDD0000);
-    static const /**
- * 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.
- */
-semanticIconIconColorConstantOnDark = Color(0xFFF2F4F5);
-    static const /**
- * 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.
- */
-semanticIconIconColorInverse = Color(0xFFCED4DA);
-    static const semanticIconIconColorPrimary = Color(0xFF4B525A); /** Primary icon color on primary surfaces. */
-    static const /**
- * 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.
- */
-semanticIconIconColorPrimaryConstant = Color(0xFF4B525A);
-    static const semanticIconIconColorSecondaryConstant = Color(0xFF8C9196); /** Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes. */
-    static const /**
- * Represents success or confirmation icons (e.g., checkmarks, completion indicators).
- * Behavior: Constant — same success green tone across Light and Dark mode.
- */
-semanticIconIconColorSuccess = Color(0xFF00C373);
-    static const /**
- * Disabled label tone indicating inactive or unavailable states in UI elements.
- * Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode.
- */
-semanticLabelLabelColorDisabled = Color(0xFFCED4DA);
-    static const /**
- * 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.
- */
-semanticLabelLabelColorPrimary = Color(0xFF232629);
-    static const /**
- * Used when primary label color should remain unchanged across modes in static UI areas.
- * Behavior: Constant — identical tone in both Light and Dark mode.
- */
-semanticLabelLabelColorPrimaryConstant = Color(0xFF232629);
-    static const /**
- * Inverse version of the primary label color, used on dark or colored backgrounds.
- * Behavior: Dynamic — switches between light and dark.
- */
-semanticLabelLabelColorPrimaryInverse = Color(0xFFE9ECEF);
-    static const /**
- * 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.
- */
-semanticLabelLabelColorPrimaryInverseConstant = Color(0xFFE9ECEF);
-    static const /**
- * 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.
- */
-semanticLabelLabelColorSecondary = Color(0xFF4B525A);
-    static const /**
- * 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.
- */
-semanticLabelLabelColorTertiary = Color(0xFF8C9196);
-    static const semanticLayerOpacityLayerOpacity00 = 0px;
-    static const semanticLayerOpacityLayerOpacity05 = 5px;
-    static const semanticLayerOpacityLayerOpacity10 = 10px;
-    static const semanticLayerOpacityLayerOpacity100 = 100px;
-    static const semanticLayerOpacityLayerOpacity20 = 20px;
-    static const semanticLayerOpacityLayerOpacity30 = 30px;
-    static const semanticLayerOpacityLayerOpacity40 = 40px;
-    static const semanticLayerOpacityLayerOpacity50 = 50px;
-    static const semanticLayerOpacityLayerOpacity60 = 60px;
-    static const semanticLayerOpacityLayerOpacity70 = 70px;
-    static const semanticLayerOpacityLayerOpacity80 = 80px;
-    static const semanticLayerOpacityLayerOpacity90 = 90px;
-    static const semanticOverlayOverlayScrimBlack = Color(0xB2000000); /** 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. */
-    static const /**
- * 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.
- */
-semanticOverlayOverlayScrimWhite = Color(0xB2FFFFFF);
-    static const /**
- * 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.
- */
-semanticStateColorPrimaryActive = Color(0xFFDD0000);
-    static const /**
- * 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.
- */
-semanticStateColorPrimaryDisabled = Color(0xFFF2F4F5);
-    static const /**
- * 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.
- */
-semanticStateColorSecondaryActive = Color(0xFF232629);
-    static const /**
- * 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.
- */
-semanticStateColorSecondaryActiveInverse = Color(0xFFF2F4F5);
-    static const /**
- * Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
- * Behavior: Dynamic — adapts neutral tones based on theme brightness.
- */
-semanticStateColorSecondaryDisabled = Color(0xFFE9ECEF);
-    static const /**
- * 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.
- */
-semanticStateColorTertiaryActive = Color(0xFF00C373);
-    static const /**
- * Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
- * Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency.
- */
-semanticStateColorTertiaryDisabled = Color(0xFF8C9196);
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorPrimary = Color(0xFFFFFFFF);
-    static const /**
- * A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
- * Behavior: Constant — identical across Light and Dark mode.
- */
-semanticSurfaceSurfaceColorPrimaryConstantDark = Color(0xFF232629);
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorPrimaryConstantLight = Color(0xFFFFFFFF);
-    static const semanticSurfaceSurfaceColorPrimaryGradientStop = Color(0x00FFFFFF); /** 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. */
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorPrimaryInverse = Color(0xFF232629);
-    static const semanticSurfaceSurfaceColorQuartenary = Color(0xFFCED4DA); /** 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. */
-    static const /**
- * Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
- * Behavior: Dynamic — inverts between dark and light tones depending on mode.
- */
-semanticSurfaceSurfaceColorQuartenaryInverse = Color(0xFF4B525A);
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorSecondary = Color(0xFFF2F4F5);
-    static const /**
- * Used for secondary surface gradients or subtle depth layers across backgrounds.
- * Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
- */
-semanticSurfaceSurfaceColorSecondaryGradientStop = Color(0x00F2F4F5);
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorSuccess = Color(0xFFCEF4E4);
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorTertiary = Color(0xFFE9ECEF);
-    static const /**
- * Represents tertiary-level gradient background.
- * Currently used on skeletons.
- */
-semanticSurfaceSurfaceColorTertiaryGradientStop = Color(0x00E9ECEF);
-    static const /**
- * 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.
- */
-semanticSurfaceSurfaceColorTertiaryInverse = Color(0xFF343C41);
-    static const semanticTextTextColorAccent = Color(0xFFDD0000); /** 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. */
-    static const /**
- * 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.
- */
-semanticTextTextColorAccentConstant = Color(0xFFDD0000);
-    static const /**
- * Used for strong warnings, errors, or destructive action labels.
- * Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
- */
-semanticTextTextColorAttentionHigh = Color(0xFFDD0000);
-    static const /**
- * Represents medium attention states, often used in warnings or pending states.
- * Behavior: Constant — same orange tone across Light and Dark mode.
- */
-semanticTextTextColorAttentionMedium = Color(0xFFFD8227);
-    static const /**
- * 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.
- */
-semanticTextTextColorMuted = Color(0xFF666B70);
-    static const /**
- * Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
- * Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
- */
-semanticTextTextColorOnDarkSurface = Color(0xFFFFFFFF);
-    static const /**
- * 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.
- */
-semanticTextTextColorPrimary = Color(0xFF232629);
-    static const /**
- * 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.
- */
-semanticTextTextColorPrimaryConstant = Color(0xFF232629);
-    static const /**
- * Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
- * Behavior: Dynamic — alternates between light and dark mode.
- */
-semanticTextTextColorPrimaryInverse = Color(0xFFE9ECEF);
-    static const /**
- * Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
- * Behavior: Constant — unchanged across modes.
- */
-semanticTextTextColorPrimaryInverseConstant = Color(0xFFE9ECEF);
-    static const /**
- * 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.
- */
-semanticTextTextColorSecondary = Color(0xFF8C9196);
-    static const /**
- * 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.
- */
-semanticTextTextColorSuccessConstant = Color(0xFF006E3E);
-}
+    // ============================================
+    // COMPONENT
+    // ============================================
+
+    // Component - Alert
+    /** On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025 */
+    static const alertSurfaceColor = Color(0xFFFFFFFF);
+    /** On marketing offer surfaces this variable is  used. */
+    static const alertSurfaceColorConstant = Color(0xFFFFFFFF);
+
+    // Component - Avatar
+    /** 09-2025 css --article-author-name-color */
+    static const avatarLabelColor = Color(0xFF232629);
+    /** 09-2025 css --article-author-name-color */
+    static const avatarLabelColorHover = Color(0xFFDD0000);
+
+    // Component - Breadcrumb
+    /** Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096 */
+    static const breadcrumbTextColorIdle = Color(0xFF4B525A);
+    /** Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100 */
+    static const breadcrumbTextColorHover = Color(0xFF232629);
+
+    // Component - BreakingNews
+    static const breakingNewsTitleSurfaceColor = Color(0xFFFD8227);
+    static const breakingNewsSurfaceColor = Color(0xFF232629);
+    static const breakingNewsTextContentColor = Color(0xFFFFFFFF);
+    static const breakingNewsTopTitleTextColor = Color(0xFF1C1C1C);
+    static const breakingNewsBottomTitleTextColor = Color(0xFF1C1C1C);
+
+    // Component - Button
+    static const buttonLiveTickerLoadNewSurfaceColor = Color(0xFFFFFFFF);
+    static const buttonLiveTickerLoadNewLabelColor = Color(0xFF8C9196);
+
+    // Component - Button - Ghost
+    static const buttonGhostBgColorHover = Color(0xFFCED4DA);
+
+    // Component - Button - Primary
+    static const buttonPrimaryBrandBgColorIdle = Color(0xFFDD0000);
+    static const buttonPrimaryBrandBgColorHover = Color(0xFFAF0002);
+    static const buttonPrimaryLabelColor = Color(0xFFFFFFFF);
+    static const buttonPrimarySuccessColorIdle = Color(0xFF18995C);
+    static const buttonPrimarySuccessColorHover = Color(0xFF006E3E);
+    /** Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100 */
+    static const buttonPrimaryNeutralBgColorIdle = Color(0xFF232629);
+    static const buttonPrimaryNeutralBgColorHover = Color(0xFF4B525A);
+
+    // Component - Button - Secondary
+    static const buttonSecondaryBgColorHover = Color(0xFFCED4DA);
+    static const buttonSecondaryLabelColor = Color(0xFF4B525A);
+    static const buttonSecondaryBgColorIdle = Color(0xFFE9ECEF);
+
+    // Component - Button - Tertiary
+    static const buttonTertiaryLabelColor = Color(0xFF4B525A);
+    static const buttonTertiaryBorderColorIdle = Color(0xFFCED4DA);
+    static const buttonTertiaryBorderColorHover = Color(0xFF4B525A);
+    static const buttonTertiarySuccessBgColorHover = Color(0xFFCEF4E4);
+    static const buttonTertiarySuccessBorderColor = Color(0xFF18995C);
+
+    // Component - Card
+    static const cardSurfaceBgColor = Color(0xFFFFFFFF);
+
+    // Component - Chips
+    static const chipsBgColorHover = Color(0xFFAF0002);
+    static const chipsLabelColorHover = Color(0xFFFFFFFF);
+    static const chipsBgColorActive = Color(0xFFDD0000);
+    static const chipsBgColorIdle = Color(0xFFE9ECEF);
+    static const chipsLabelColorIdle = Color(0xFF232629);
+
+    // Component - Dropdown
+    static const dropdownBgColorHover = Color(0xFFF2F4F5);
+    static const dropdownBgColorIdle = Color(0xFFFFFFFF);
+
+    // Component - Empties
+    static const emptiesBgColor = Color(0xFFF2F4F5);
+    static const emptiesLogoColor = Color(0xFFCED4DA);
+
+    // Component - Foldout
+    static const foldoutLabelColorActive = Color(0xFFDD0000);
+    static const foldoutLabelColorIdle = Color(0xFF4B525A);
+
+    // Component - Gallery
+    static const appImageLightboxGalleryBgColor = Color(0xFF000000);
+
+    // Component - Hey
+    static const heyFavInputFieldSurfaceColor = Color(0xFFE9ECEF);
+    static const heyTextColor = Color(0xFF4B525A);
+    static const heyIconUtilColor = Color(0xFF4B525A);
+    /** This is the most used color for separators across Bild products. */
+    static const heySeparatorColor = Color(0xFFCED4DA);
+    static const heyDrawerSurfaceColor = Color(0xFFF2F4F5);
+
+    // Component - InputField
+    static const inputFieldBorderColorIdle = Color(0xFFCED4DA);
+    static const inputFieldBorderColorActive = Color(0xFF4B525A);
+    static const inputFieldBorderColorDark = Color(0xFF8C9196);
+    static const inputFieldBorderColorDarkActive = Color(0xFF232629);
+    static const inputFieldBgColorDarkLowContrast = Color(0xFF343C41);
+    static const inputFieldBgColorDarkMediumContrast = Color(0xFF4B525A);
+    static const inputFieldBgColorDarkHighContrast = Color(0xFFE9ECEF);
+
+    // Component - Kicker - Partner
+    static const kickerFitbookBgColor = Color(0xFFFF97B7);
+    static const kickerPetbookBgColor = Color(0xFFB9DB91);
+    static const kickerMyhomebookBgColor = Color(0xFF66CCCC);
+    static const kickerTravelbookBgColor = Color(0xFF8EF0ED);
+    static const kickerTechbookBgColor = Color(0xFF93E4FF);
+    static const kickerKaufberaterBgColor = Color(0xFF55476E);
+    static const kickerCobiBgColor = Color(0xFFDC231C);
+    static const kickerAubiBgColor = Color(0xFFF00000);
+    static const kickerSpobiBgColor = Color(0xFF174482);
+    static const kickerBzBgColor = Color(0xFFE3001B);
+
+    // Component - Kicker - Standard
+    static const kickerBgColorOnSurface = Color(0xFFDD0000);
+
+    // Component - Mediaplayer
+    static const vidPlayerControlsAutoplayButtonBgColor = Color(0x33000000);
+    /** This variable is used for hover states of video player control buttons. */
+    static const vidPlayerControlButtonsBgHoverColor = Color(0xccdd0000);
+    static const vidPlayerControlButtonsBgColorHover = Color(0x33000000);
+    static const vidPlayerOverlayScrimColor = Color(0x80000000);
+    static const audioPlayerPlayButtonBgColor = Color(0x4dffffff);
+    static const vidPlayerTooltipBgColor = Color(0xb2000000);
+    static const vidPlayerControlButtonsBgColorPressed = Color(0x0d000000);
+    static const vidPlayerProgressBarPreloadBgColor = Color(0x4dffffff);
+    static const vidPlayerUnmuteButtonBgColor = Color(0x33000000);
+    static const vidPlayerUnmuteButtonBgColorHover = Color(0x59000000);
+
+    // Component - Menu
+    static const menuSurfaceColor = Color(0xFFFFFFFF);
+    /** Used on a thin part at the top of header in navigation menu. */
+    static const menuScrolledSurfaceGradientColor = Color(0xf2ffffff);
+    static const menuLinkLaneSurfaceColor = Color(0xFFFFFFFF);
+    static const menuLinkLaneLabelColor = Color(0xFF4B525A);
+    static const menuLinkLaneLabelColorActive = Color(0xFF232629);
+    static const appTopBarSurfaceColor = Color(0xFFFFFFFF);
+    static const appTopBarIconColor = Color(0xFF4B525A);
+    static const appTopBarTextColorPrimary = Color(0xFF232629);
+    static const appTobBarTabNavBottomBorder = Color(0xFFE9ECEF);
+    static const appTobBarTabNavBottomBorderActive = Color(0xFFDD0000);
+
+    // Component - MenuItem
+    static const menuItemBorderColorActive = Color(0xFFDD0000);
+    static const menuItemLabelColorPrimary = Color(0xFF4B525A);
+    static const menuItemLabelColorPrimaryActive = Color(0xFF232629);
+    /** The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes. */
+    static const menuItemLabelColorSecondary = Color(0xFFFFFFFF);
+
+    // Component - Newsticker
+    static const newsTickerTimestampColor = Color(0xFF8C9196);
+    static const newsTickerBadgeIconsColor = Color(0xFF8C9196);
+
+    // Component - Pagination
+    static const paginationElementColorDefault = Color(0xFFCED4DA);
+    static const paginationElementColorActive = Color(0xFFDD0000);
+    /** Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. */
+    static const galleryPaginationElementActiveOpacity = "100px";
+    /** Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements. */
+    static const scrollBarTrackBgColor = Color(0x1a000000);
+    /** Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space. */
+    static const scrollBarThumbBgColor = Color(0xFF8C9196);
+
+    // Component - PartnerLinks
+    /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+    static const partnerLinksBorderColorIdle = Color(0xFFCED4DA);
+    /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+    static const partnerLinksBorderColorActive = Color(0xFF232629);
+    /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+    static const partnerLinksBgColorIdle = Color(0xFFFFFFFF);
+    /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+    static const partnerLinksBgColorActive = Color(0xFFE9ECEF);
+    /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+    static const partnerLinksContainerBorderColor = Color(0xFFCED4DA);
+
+    // Component - Selection
+    /** Checkboxes and Radio buttons use this variable for their border. */
+    static const selectionBorderColor = Color(0xFF4B525A);
+
+    // Component - Slider
+    /** When users hover on gallery slider buttons the opacity changes to 90%. */
+    static const sliderButtonOpacity = "90px";
+    /** This variable is used on audio player slider bars. It references a pure white with 35% opacity. */
+    static const sliderTrackBgColor = Color(0x59ffffff);
+
+    // Component - SocialShareButton
+    static const socialShareButtonLabelColorDefault = Color(0xFFFFFFFF);
+    static const socialShareButtonLabelColorActive = Color(0xFFFFFFFF);
+    static const socialShareButtonBgColorActive = Color(0xFF343C41);
+    static const socialShareButtonBgColorDefault = Color(0xFF4B525A);
+
+    // Component - Subheader
+    static const subheadersColor = Color(0xFF232629);
+
+    // Component - Tab
+    static const tabBgColorHover = Color(0xFFE9ECEF);
+    static const tabLabelColorActive = Color(0xFF343C41);
+    static const tabLabelColorDefault = Color(0xFF4B525A);
+    static const appBottomTabBarBgColor = Color(0xFFFFFFFF);
+
+    // Component - Teaser
+    /** When users hover over graphical teasers the image reduces opacity to 80%. */
+    static const teaserHoverOpacity = "80px";
+    static const teaserTitleBackgroundGradientStart = Color(0xb2000000);
+    static const teaserTitleBackgroundGradientStop = Color(0x00000000);
+
+    // Component - TextLink
+    static const textLinkColorSecondary = Color(0xFF8C9196);
+    static const textLinkColorSecondaryActive = Color(0xFF232629);
+    static const textLinkColorPrimary = Color(0xFF232629);
+
+    // Component - _DSysDoc
+    /** This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages. */
+    static const dsysDocsLabelTextSurfaceColorPrimaryPrimitiveName = "BILD100";
+    /** This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts. */
+    static const dsysDocsLabelTextColorMode = "(Light Mode)";
+    static const dsDocSpacingItemBgColor = Color(0x1add0000);
+    static const dsDocSpacingItemBorderColor = Color(0x80dd0000);
+
+
+    // ============================================
+    // SEMANTIC
+    // ============================================
+
+    // Semantic - Attention
+    /** 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. */
+    static const attentionColorHigh = Color(0xFFDD0000);
+    /** 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. */
+    static const accentColorPrimary = Color(0xFFDD0000);
+    /** Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. */
+    static const attentionColorMedium = Color(0xFFFD8227);
+    /** Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition. */
+    static const attentionColorLow = Color(0xFFFFBF00);
+    /** 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. */
+    static const accentColorPrimaryConstant = Color(0xFFDD0000);
+    /** 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. */
+    static const attentionColorSuccessPrimary = Color(0xFF00C373);
+    /** 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. */
+    static const attentionColorExtraLow = Color(0xFFFFFFFF);
+    /** Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. */
+    static const attentionColorSuccessSecondary = Color(0xFF006E3E);
+
+    // Semantic - Border
+    /** 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. */
+    static const borderColorMediumContrast = Color(0xFFCED4DA);
+    /** Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers).
+Dynamic — light gray in Light mode, dark gray in Dark mode. */
+    static const borderColorLowContrast = Color(0xFFE9ECEF);
+    /** 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. */
+    static const borderColorHighContrast = Color(0xFF232629);
+    /** 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. */
+    static const borderColorLowContrastConstant = Color(0xFFE9ECEF);
+    /** 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. */
+    static const borderColorSuccess = Color(0xFF00C373);
+    /** 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. */
+    static const borderColorWarning = Color(0xFFDD0000);
+    /** Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity. */
+    static const borderColorPrimaryDisabled = Color(0xFFF2F4F5);
+    /** Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines). */
+    static const borderColorSecondaryDisabled = Color(0xFFE9ECEF);
+
+    // Semantic - Core
+    /** 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. */
+    static const coreColorPrimary = Color(0xFFDD0000);
+    /** Defines the secondary brand tone. This variable changes across Light and Dark Mode. */
+    static const coreColorSecondary = Color(0xFFFFFFFF);
+    /** Represents tertiary brand accents. This variable changes across Light and Dark Mode. */
+    static const coreColorTertiary = Color(0xFF232629);
+    /** Use this on elements that must maintain the white color even in dark mode. */
+    static const coreColorSecondaryConstant = Color(0xFFFFFFFF);
+    /** Use this on elements that need to maintain the dark color across themes and color modes. */
+    static const coreColorTertiaryConstant = Color(0xFF232629);
+    /** this is a test for the token pipeline */
+    static const coreColorTertiaryVvPipeTest = Color(0xFF476D93);
+    /** this is a test for the token pipeline */
+    static const npmTest = Color(0xFF476D93);
+    /** this is a test for the token pipeline */
+    static const felipeTestColor = Color(0xFFE9580A);
+    /** this is a test for the token pipeline */
+    static const golianiTestColor = Color(0xFF00FFF2);
+
+    // Semantic - Heading
+    /** 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. */
+    static const kickerTextColorOnSurface = Color(0xFFDD0000);
+    /** 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. */
+    static const headlineColorPrimary = Color(0xFF232629);
+    /** 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. */
+    static const headlineColorWhiteConst = Color(0xFFFFFFFF);
+    /** 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. */
+    static const kickerTextColorOnRed = Color(0xFFFFFFFF);
+    /** Applied to kicker or meta text on dark colored backgrounds to maintain high legibility.
+Behavior: Constant — always uses semi-transparent white for consistent readability. */
+    static const kickerTextColorOnDarkBg = Color(0xccffffff);
+    /** 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. */
+    static const kickerTextColorOnBrightBg = Color(0xb2000000);
+
+    // Semantic - Icon
+    /** Primary icon color on primary surfaces. */
+    static const iconColorPrimary = Color(0xFF4B525A);
+    /** 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. */
+    static const iconColorInverse = Color(0xFFCED4DA);
+    /** Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes. */
+    static const iconColorSecondaryConstant = Color(0xFF8C9196);
+    /** 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. */
+    static const iconColorConstantOnDark = Color(0xFFF2F4F5);
+    /** 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. */
+    static const iconColorPrimaryConstant = Color(0xFF4B525A);
+    /** Represents success or confirmation icons (e.g., checkmarks, completion indicators).
+Behavior: Constant — same success green tone across Light and Dark mode. */
+    static const iconColorSuccess = Color(0xFF00C373);
+
+    // Semantic - Label
+    /** 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. */
+    static const labelColorPrimary = Color(0xFF232629);
+    /** 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. */
+    static const labelColorSecondary = Color(0xFF4B525A);
+    /** Disabled label tone indicating inactive or unavailable states in UI elements.
+Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. */
+    static const labelColorDisabled = Color(0xFFCED4DA);
+    /** Used when primary label color should remain unchanged across modes in static UI areas.
+Behavior: Constant — identical tone in both Light and Dark mode. */
+    static const labelColorPrimaryConstant = Color(0xFF232629);
+    /** 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. */
+    static const labelColorPrimaryInverseConstant = Color(0xFFE9ECEF);
+    /** 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. */
+    static const labelColorTertiary = Color(0xFF8C9196);
+    /** Inverse version of the primary label color, used on dark or colored backgrounds.
+Behavior: Dynamic — switches between light and dark. */
+    static const labelColorPrimaryInverse = Color(0xFFE9ECEF);
+
+    // Semantic - LayerOpacity
+    static const layerOpacity05 = "5px";
+    static const layerOpacity10 = "10px";
+    static const layerOpacity20 = "20px";
+    static const layerOpacity30 = "30px";
+    static const layerOpacity40 = "40px";
+    static const layerOpacity50 = "50px";
+    static const layerOpacity60 = "60px";
+    static const layerOpacity70 = "70px";
+    static const layerOpacity80 = "80px";
+    static const layerOpacity90 = "90px";
+    static const layerOpacity100 = "100px";
+    static const layerOpacity00 = "0px";
+
+    // Semantic - Overlay
+    /** 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. */
+    static const overlayScrimBlack = Color(0xb2000000);
+    /** 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. */
+    static const overlayScrimWhite = Color(0xb2ffffff);
+
+    // Semantic - State
+    /** 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. */
+    static const colorSecondaryActive = Color(0xFF232629);
+    /** 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. */
+    static const colorPrimaryActive = Color(0xFFDD0000);
+    /** Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
+Behavior: Dynamic — adapts neutral tones based on theme brightness. */
+    static const colorSecondaryDisabled = Color(0xFFE9ECEF);
+    /** 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. */
+    static const colorPrimaryDisabled = Color(0xFFF2F4F5);
+    /** 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. */
+    static const colorSecondaryActiveInverse = Color(0xFFF2F4F5);
+    /** 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. */
+    static const colorTertiaryActive = Color(0xFF00C373);
+    /** Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
+Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency. */
+    static const colorTertiaryDisabled = Color(0xFF8C9196);
+
+    // Semantic - Surface
+    /** 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. */
+    static const surfaceColorPrimary = Color(0xFFFFFFFF);
+    /** 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. */
+    static const surfaceColorSecondary = Color(0xFFF2F4F5);
+    /** 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. */
+    static const surfaceColorPrimaryInverse = Color(0xFF232629);
+    /** 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. */
+    static const surfaceColorPrimaryConstantLight = Color(0xFFFFFFFF);
+    /** A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
+Behavior: Constant — identical across Light and Dark mode. */
+    static const surfaceColorPrimaryConstantDark = Color(0xFF232629);
+    /** 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. */
+    static const surfaceColorQuartenary = Color(0xFFCED4DA);
+    /** 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. */
+    static const surfaceColorSuccess = Color(0xFFCEF4E4);
+    /** 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. */
+    static const surfaceColorTertiary = Color(0xFFE9ECEF);
+    /** Represents tertiary-level gradient background.
+Currently used on skeletons. */
+    static const surfaceColorTertiaryGradientStop = Color(0x00e9ecef);
+    /** 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. */
+    static const surfaceColorTertiaryInverse = Color(0xFF343C41);
+    /** 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. */
+    static const surfaceColorPrimaryGradientStop = Color(0x00ffffff);
+    /** Used for secondary surface gradients or subtle depth layers across backgrounds.
+Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions. */
+    static const surfaceColorSecondaryGradientStop = Color(0x00f2f4f5);
+    /** Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
+Behavior: Dynamic — inverts between dark and light tones depending on mode. */
+    static const surfaceColorQuartenaryInverse = Color(0xFF4B525A);
+
+    // Semantic - Text
+    /** 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. */
+    static const textColorAccentConstant = Color(0xFFDD0000);
+    /** 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. */
+    static const textColorPrimary = Color(0xFF232629);
+    /** 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. */
+    static const textColorMuted = Color(0xFF666B70);
+    /** Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
+Behavior: Dynamic — alternates between light and dark mode. */
+    static const textColorPrimaryInverse = Color(0xFFE9ECEF);
+    /** 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. */
+    static const textColorPrimaryConstant = Color(0xFF232629);
+    /** 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. */
+    static const textColorSuccessConstant = Color(0xFF006E3E);
+    /** Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
+Behavior: Constant — unchanged across modes. */
+    static const textColorPrimaryInverseConstant = Color(0xFFE9ECEF);
+    /** 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. */
+    static const textColorSecondary = Color(0xFF8C9196);
+    /** Used for strong warnings, errors, or destructive action labels.
+Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition. */
+    static const textColorAttentionHigh = Color(0xFFDD0000);
+    /** 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. */
+    static const textColorAccent = Color(0xFFDD0000);
+    /** Represents medium attention states, often used in warnings or pending states.
+Behavior: Constant — same orange tone across Light and Dark mode. */
+    static const textColorAttentionMedium = Color(0xFFFD8227);
+    /** Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
+Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds. */
+    static const textColorOnDarkSurface = Color(0xFFFFFFFF);
+
+}