@marioschmidt/design-system-tokens 1.0.18 → 1.0.20

package/dist/flutter/brands/sportbild/density/density-compact.dart

@@ -12,12 +12,20 @@ import 'dart:ui';
 class DensityCompact {
     DensityCompact._();
 
-    static const componentButtonButtonContentGapSpace = 96.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentButtonButtonInlineSpace = 256.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentButtonButtonLabelFontSize = 240.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
-    static const componentButtonButtonStackSpace = 96.00; /** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentInputfieldInputFieldHeightSize = 576.00;
-    static const componentInputfieldInputFieldInlineSpace = 256.00;
-    static const componentInputfieldInputFieldLabelFontSize = 256.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
-    static const componentInputfieldInputFieldStackSpace = 96.00;
-}
+    // Component - Button
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonContentGapSpace = "6px";
+    /** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonStackSpace = "6px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
+    static const buttonLabelFontSize = "15px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonInlineSpace = "16px";
+
+    // Component - Inputfield
+    static const inputFieldInlineSpace = "16px";
+    static const inputFieldStackSpace = "6px";
+    static const inputFieldHeightSize = "36px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
+    static const inputFieldLabelFontSize = "16px";
+}

package/dist/flutter/brands/sportbild/density/density-default.dart

@@ -12,12 +12,20 @@ import 'dart:ui';
 class DensityDefault {
     DensityDefault._();
 
-    static const componentButtonButtonContentGapSpace = 128.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentButtonButtonInlineSpace = 320.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentButtonButtonLabelFontSize = 272.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
-    static const componentButtonButtonStackSpace = 128.00; /** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentInputfieldInputFieldHeightSize = 640.00;
-    static const componentInputfieldInputFieldInlineSpace = 256.00;
-    static const componentInputfieldInputFieldLabelFontSize = 272.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
-    static const componentInputfieldInputFieldStackSpace = 128.00;
-}
+    // Component - Button
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonContentGapSpace = "8px";
+    /** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonStackSpace = "8px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
+    static const buttonLabelFontSize = "17px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonInlineSpace = "20px";
+
+    // Component - Inputfield
+    static const inputFieldInlineSpace = "16px";
+    static const inputFieldStackSpace = "8px";
+    static const inputFieldHeightSize = "40px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
+    static const inputFieldLabelFontSize = "17px";
+}

package/dist/flutter/brands/sportbild/density/density-spacious.dart

@@ -12,12 +12,20 @@ import 'dart:ui';
 class DensitySpacious {
     DensitySpacious._();
 
-    static const componentButtonButtonContentGapSpace = 128.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentButtonButtonInlineSpace = 384.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentButtonButtonLabelFontSize = 304.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
-    static const componentButtonButtonStackSpace = 192.00; /** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
-    static const componentInputfieldInputFieldHeightSize = 768.00;
-    static const componentInputfieldInputFieldInlineSpace = 256.00;
-    static const componentInputfieldInputFieldLabelFontSize = 304.00; /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
-    static const componentInputfieldInputFieldStackSpace = 192.00;
-}
+    // Component - Button
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonContentGapSpace = "8px";
+    /** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonStackSpace = "12px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
+    static const buttonLabelFontSize = "19px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+    static const buttonInlineSpace = "24px";
+
+    // Component - Inputfield
+    static const inputFieldInlineSpace = "16px";
+    static const inputFieldStackSpace = "12px";
+    static const inputFieldHeightSize = "48px";
+    /** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
+    static const inputFieldLabelFontSize = "19px";
+}

package/dist/flutter/brands/sportbild/overrides/brandcolormapping.dart

@@ -12,72 +12,145 @@ import 'dart:ui';
 class Brandcolormapping {
     Brandcolormapping._();
 
-    static const componentAvatarAvatarLabelColor = Color(0xFF666B70); /** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
-    static const componentAvatarAvatarLabelColorDark = Color(0xFFE9ECEF); /** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
-    static const componentAvatarAvatarLabelColorHover = Color(0xFF174482); /** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
-    static const componentBreakingNewsBreakingNewsBottomTitleTextColor = Color(0xFFFFFFFF); /** This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100 */
-    static const componentBreakingNewsBreakingNewsSurfaceColor = Color(0xFFFFBF00); /** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
-    static const componentBreakingNewsBreakingNewsSurfaceColorDark = Color(0xFFFFBF00); /** This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode.  Bild: 093 ; SpoBi: 081 */
-    static const componentBreakingNewsBreakingNewsTextContentColor = Color(0xFF232629); /** This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015 */
-    static const componentBreakingNewsBreakingNewsTextContentColorDark = Color(0xFF232629); /** This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015 */
-    static const componentBreakingNewsBreakingNewsTitleSurfaceColor = Color(0xFF0A2750); /** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
-    static const componentBreakingNewsBreakingNewsTopTitleTextColor = Color(0xFFFFBF00); /** This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081 */
-    static const componentButtonPrimaryBrandButtonPrimaryBgColorHover = Color(0xFF0A2750); /** Bild: 035 ; SpoBi: 016 */
-    static const componentButtonPrimaryBrandButtonPrimaryBgColorHoverDark = Color(0xFF174482); /** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
-    static const componentButtonPrimaryBrandButtonPrimaryBgColorIdle = Color(0xFF174482); /** Bild: 046 ; SpoBi: 029 */
-    static const componentButtonPrimaryBrandButtonPrimaryBgColorIdleDark = Color(0xFF315998); /** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
-    static const componentButtonPrimaryNeutralButtonPrimaryBgColorHover = Color(0xFF4B525A); /** Bild & SpoBi: Tone 035 */
-    static const componentButtonPrimaryNeutralButtonPrimaryBgColorHoverDark = Color(0xFFBDCADB); /** Bild: 093 ; SpoBi: 081 */
-    static const componentButtonPrimaryNeutralButtonPrimaryBgColorIdle = Color(0xFF232629); /** Bild & SpoBi: Tone 015 */
-    static const componentButtonPrimaryNeutralButtonPrimaryBgColorIdleDark = Color(0xFFFFFFFF); /** Bild & SpoBi: Tone 100 */
-    static const componentChipColorActive = Color(0xFF174482);
-    static const componentMenuAppBottomTabBarBgColor = Color(0xFFFFFFFF);
-    static const componentMenuAppBottomTabBarBgDark = Color(0xFF2C3138);
-    static const componentMenuAppTobBarTabNavBottomBorder = Color(0xFF174482);
-    static const componentMenuAppTobBarTabNavBottomBorderActive = Color(0xFFCED4DA);
-    static const componentMenuAppTobBarTabNavBottomBorderActiveDark = Color(0xFFFFFFFF);
-    static const componentMenuAppTobBarTabNavBottomBorderDark = Color(0xFF174482);
-    static const componentMenuAppTopBarBgColorDark = Color(0xFF2C3138);
-    static const componentMenuAppTopBarIconColor = Color(0xFF8C9196);
-    static const componentMenuAppTopBarIconColorDark = Color(0xFF8C9196);
-    static const componentMenuAppTopBarSurfaceColor = Color(0xFF2C3138);
-    static const componentMenuAppTopBarTextColor = Color(0xFFE9ECEF);
-    static const componentMenuAppTopBarTextColorDark = Color(0xFFE9ECEF);
-    static const componentMenuMenuLinkColorBorderActive = Color(0xFF0A2750);
-    static const componentMenuMenuLinkColorBorderActiveDark = Color(0xFFF7F9FD);
-    static const componentMenuMenuLinkLaneLabelColor = Color(0xFFCED4DA); /** This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component. */
-    static const componentMenuMenuLinkLaneLabelColorActive = Color(0xFFFFFFFF); /** This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component. */
-    static const componentMenuMenuLinkLaneLabelColorDark = Color(0xFFAEB4B9);
-    static const componentMenuMenuLinkLaneSurfaceColor = Color(0xFF0A2750); /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component. */
-    static const componentMenuMenuLinkLaneSurfaceColorDark = Color(0xFF0A2750); /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component on Dark mode. */
-    static const componentTeaserTeaserTitleBackgroundGradientStart = Color(0xB20A2750);
-    static const componentTeaserTeaserTitleBackgroundGradientStop = Color(0x000A2750);
-    static const globalAttentionAccentColorPrimary = Color(0xFF174482); /** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
-    static const globalAttentionAccentColorPrimaryDark = Color(0xFFF7F9FD); /** Bild: 100 ; SpoBi: 098 */
-    static const globalCoreCoreColorPrimary = Color(0xFF0A2750); /** Bild: 046; SpoBi: 016 current css calls this variable main tenant color */
-    static const globalCoreCoreColorSecondary = Color(0xFFFFFFFF); /** Bild&SpoBi Tone 100 */
-    static const globalCoreCoreColorSecondaryDark = Color(0xFF081828); /** Bild: 015 ; SpoBi: 010 */
-    static const globalCoreCoreColorTertiary = Color(0xFF081828); /** Bild: 015 ; SpoBi: 010 */
-    static const globalCoreCoreColorTertiaryDark = Color(0xFFFFFFFF); /** Bild&SpoBi: 100 */
-    static const globalStateColorPrimaryActive = Color(0xFF174482); /** Bild: 046 ; SpoBi: 029 */
-    static const globalStateColorPrimaryActiveDark = Color(0xFFF7F9FD); /** Bild: 046 ; SpoBi: 098 */
-    static const globalSurfaceSurfaceColorPrimary = Color(0xFFFFFFFF); /** Bild: 100 ; SpoBi: 100 */
-    static const globalSurfaceSurfaceColorPrimaryDark = Color(0xFF081828); /** Bild: 015 ; SpoBi: 010 */
-    static const globalSurfaceSurfaceColorQuartenary = Color(0xFFCED4DA); /** Bild: 085 ; SpoBi: 085 */
-    static const globalSurfaceSurfaceColorQuartenaryDark = Color(0xFF4B525A); /** Bild: 035 ; SpoBi: 035 */
-    static const globalSurfaceSurfaceColorSecondary = Color(0xFFF7F9FD); /** Bild: 096 ; SpoBi: 098 */
-    static const globalSurfaceSurfaceColorSecondaryDark = Color(0xFF0A2750); /** Bild: 020 ; SpoBi: 016 */
-    static const globalSurfaceSurfaceColorTertiary = Color(0xFFBDCADB); /** Bild: 093 ; SpoBi: 081 */
-    static const globalSurfaceSurfaceColorTertiaryDark = Color(0xFF174482); /** Bild: 025 ; SpoBi: 029 */
-    static const globalTextHeadlineColorPrimary = Color(0xFF0A2750); /** Bild: 015 ; SpoBi: 016 */
-    static const globalTextHeadlineColorPrimaryDark = Color(0xFFFFFFFF); /** Bild&SpoBi: Tone 100 */
-    static const globalTextKickerBgColorOnSurface = Color(0xFF174482); /** Use this variable for the color immediately behind the bounding box of the kicker text element. Bild: 046 ; SpoBi: 029 */
-    static const globalTextKickerBgColorOnSurfaceDark = Color(0xFF8C9196); /** Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060 */
-    static const globalTextKickerTextColorOnBg = Color(0xFFFFFFFF); /** This variable is used on kicker texts that are on top of a color that is different from the outer color of the overall user interface. Bild & SpoBi: Tone 100 */
-    static const globalTextKickerTextColorOnSurface = Color(0xFF8C9196); /** This variable is used for the color of kicker texts that are not no top of a different color of the overall user interface. Bild: 046 ; SpoBi: 060 */
-    static const globalTextKickerTextColorOnSurfaceDark = Color(0xFF8C9196); /** Use this variable for kicker texts that are directly on top of the color of the overall user interface. Bild & SpoBi tone 060. */
-    static const globalTextTextColorPrimary = Color(0xFF232629); /** Bild & SpoBi: Tone 015 */
-    static const globalTextTextColorPrimaryDark = Color(0xFFE9ECEF); /** Bild & SpoBi: Tone 093 */
-    static const globalTextTextColorSecondary = Color(0xFF8C9196); /** Bild & SpoBi: Tone 060 */
-    static const globalTextTextColorSecondaryDark = Color(0xFF8C9196); /** Bild & SpoBi: Tone 060 */
-}
+    // Component
+    static const chipColorActive = Color(0xFF174482);
+
+    // Component - Avatar
+    /** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
+    static const avatarLabelColor = Color(0xFF666B70);
+    /** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
+    static const avatarLabelColorDark = Color(0xFFE9ECEF);
+    /** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
+    static const avatarLabelColorHover = Color(0xFF174482);
+
+    // Component - BreakingNews
+    /** This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015 */
+    static const breakingNewsTextContentColor = Color(0xFF232629);
+    /** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
+    static const breakingNewsSurfaceColor = Color(0xFFFFBF00);
+    /** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
+    static const breakingNewsTitleSurfaceColor = Color(0xFF0A2750);
+    /** This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081 */
+    static const breakingNewsTopTitleTextColor = Color(0xFFFFBF00);
+    /** This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode.  Bild: 093 ; SpoBi: 081 */
+    static const breakingNewsSurfaceColorDark = Color(0xFFFFBF00);
+    /** This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015 */
+    static const breakingNewsTextContentColorDark = Color(0xFF232629);
+    /** This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100 */
+    static const breakingNewsBottomTitleTextColor = Color(0xFFFFFFFF);
+
+    // Component - Button - PrimaryBrand
+    /** Bild: 046 ; SpoBi: 029 */
+    static const primaryBrandButtonPrimaryBgColorIdle = Color(0xFF174482);
+    /** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
+    static const primaryBrandButtonPrimaryBgColorIdleDark = Color(0xFF315998);
+    /** Bild: 035 ; SpoBi: 016 */
+    static const primaryBrandButtonPrimaryBgColorHover = Color(0xFF0A2750);
+    /** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
+    static const primaryBrandButtonPrimaryBgColorHoverDark = Color(0xFF174482);
+
+    // Component - Button - PrimaryNeutral
+    /** Bild & SpoBi: Tone 015 */
+    static const primaryNeutralButtonPrimaryBgColorIdle = Color(0xFF232629);
+    /** Bild & SpoBi: Tone 035 */
+    static const primaryNeutralButtonPrimaryBgColorHover = Color(0xFF4B525A);
+    /** Bild & SpoBi: Tone 100 */
+    static const primaryNeutralButtonPrimaryBgColorIdleDark = Color(0xFFFFFFFF);
+    /** Bild: 093 ; SpoBi: 081 */
+    static const primaryNeutralButtonPrimaryBgColorHoverDark = Color(0xFFBDCADB);
+
+    // Component - Menu
+    /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component. */
+    static const menuLinkLaneSurfaceColor = Color(0xFF0A2750);
+    /** This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component. */
+    static const menuLinkLaneLabelColor = Color(0xFFCED4DA);
+    static const menuLinkLaneLabelColorDark = Color(0xFFAEB4B9);
+    /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component on Dark mode. */
+    static const menuLinkLaneSurfaceColorDark = Color(0xFF0A2750);
+    static const menuLinkColorBorderActive = Color(0xFF0A2750);
+    static const menuLinkColorBorderActiveDark = Color(0xFFF7F9FD);
+    /** This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component. */
+    static const menuLinkLaneLabelColorActive = Color(0xFFFFFFFF);
+    static const appTopBarSurfaceColor = Color(0xFF2C3138);
+    static const appTopBarBgColorDark = Color(0xFF2C3138);
+    static const appBottomTabBarBgColor = Color(0xFFFFFFFF);
+    static const appBottomTabBarBgDark = Color(0xFF2C3138);
+    static const appTopBarIconColor = Color(0xFF8C9196);
+    static const appTopBarIconColorDark = Color(0xFF8C9196);
+    static const appTopBarTextColor = Color(0xFFE9ECEF);
+    static const appTopBarTextColorDark = Color(0xFFE9ECEF);
+    static const appTobBarTabNavBottomBorder = Color(0xFF174482);
+    static const appTobBarTabNavBottomBorderDark = Color(0xFF174482);
+    static const appTobBarTabNavBottomBorderActive = Color(0xFFCED4DA);
+    static const appTobBarTabNavBottomBorderActiveDark = Color(0xFFFFFFFF);
+
+    // Component - Teaser
+    static const teaserTitleBackgroundGradientStart = Color(0xb20a2750);
+    static const teaserTitleBackgroundGradientStop = Color(0x000a2750);
+
+    // Global - Attention
+    /** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
+    static const accentColorPrimary = Color(0xFF174482);
+    /** Bild: 100 ; SpoBi: 098 */
+    static const accentColorPrimaryDark = Color(0xFFF7F9FD);
+
+    // Global - Core
+    /** Bild: 046; SpoBi: 016 current css calls this variable main tenant color */
+    static const coreColorPrimary = Color(0xFF0A2750);
+    /** Bild&SpoBi Tone 100 */
+    static const coreColorSecondary = Color(0xFFFFFFFF);
+    /** Bild: 015 ; SpoBi: 010 */
+    static const coreColorSecondaryDark = Color(0xFF081828);
+    /** Bild: 015 ; SpoBi: 010 */
+    static const coreColorTertiary = Color(0xFF081828);
+    /** Bild&SpoBi: 100 */
+    static const coreColorTertiaryDark = Color(0xFFFFFFFF);
+
+    // Global - State
+    /** Bild: 046 ; SpoBi: 029 */
+    static const colorPrimaryActive = Color(0xFF174482);
+    /** Bild: 046 ; SpoBi: 098 */
+    static const colorPrimaryActiveDark = Color(0xFFF7F9FD);
+
+    // Global - Surface
+    /** Bild: 100 ; SpoBi: 100 */
+    static const surfaceColorPrimary = Color(0xFFFFFFFF);
+    /** Bild: 015 ; SpoBi: 010 */
+    static const surfaceColorPrimaryDark = Color(0xFF081828);
+    /** Bild: 096 ; SpoBi: 098 */
+    static const surfaceColorSecondary = Color(0xFFF7F9FD);
+    /** Bild: 020 ; SpoBi: 016 */
+    static const surfaceColorSecondaryDark = Color(0xFF0A2750);
+    /** Bild: 093 ; SpoBi: 081 */
+    static const surfaceColorTertiary = Color(0xFFBDCADB);
+    /** Bild: 025 ; SpoBi: 029 */
+    static const surfaceColorTertiaryDark = Color(0xFF174482);
+    /** Bild: 085 ; SpoBi: 085 */
+    static const surfaceColorQuartenary = Color(0xFFCED4DA);
+    /** Bild: 035 ; SpoBi: 035 */
+    static const surfaceColorQuartenaryDark = Color(0xFF4B525A);
+
+    // Global - Text
+    /** Bild & SpoBi: Tone 015 */
+    static const textColorPrimary = Color(0xFF232629);
+    /** Bild & SpoBi: Tone 093 */
+    static const textColorPrimaryDark = Color(0xFFE9ECEF);
+    /** Bild: 015 ; SpoBi: 016 */
+    static const headlineColorPrimary = Color(0xFF0A2750);
+    /** Bild&SpoBi: Tone 100 */
+    static const headlineColorPrimaryDark = Color(0xFFFFFFFF);
+    /** This variable is used on kicker texts that are on top of a color that is different from the outer color of the overall user interface. Bild & SpoBi: Tone 100 */
+    static const kickerTextColorOnBg = Color(0xFFFFFFFF);
+    /** This variable is used for the color of kicker texts that are not no top of a different color of the overall user interface. Bild: 046 ; SpoBi: 060 */
+    static const kickerTextColorOnSurface = Color(0xFF8C9196);
+    /** Use this variable for kicker texts that are directly on top of the color of the overall user interface. Bild & SpoBi tone 060. */
+    static const kickerTextColorOnSurfaceDark = Color(0xFF8C9196);
+    /** Bild & SpoBi: Tone 060 */
+    static const textColorSecondary = Color(0xFF8C9196);
+    /** Bild & SpoBi: Tone 060 */
+    static const textColorSecondaryDark = Color(0xFF8C9196);
+    /** Use this variable for the color immediately behind the bounding box of the kicker text element. Bild: 046 ; SpoBi: 029 */
+    static const kickerBgColorOnSurface = Color(0xFF174482);
+    /** Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060 */
+    static const kickerBgColorOnSurfaceDark = Color(0xFF8C9196);
+}