@marioschmidt/design-system-tokens 1.0.20 → 1.0.21

package/dist/css/brands/advertorial/semantic/effects/effects-dark.css

@@ -1,6 +1,6 @@
 /**
  * Effect Classes - Advertorial / dark
- * Generiert am: 2025-11-24T15:10:53.723Z
+ * Generiert am: 2025-11-24T20:34:59.347Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/advertorial/semantic/effects/effects-light.css

@@ -1,6 +1,6 @@
 /**
  * Effect Classes - Advertorial / light
- * Generiert am: 2025-11-24T15:10:53.657Z
+ * Generiert am: 2025-11-24T20:34:59.283Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/advertorial/semantic/typography/typography-lg.css

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Advertorial / lg
- * Generiert am: 2025-11-24T15:10:53.245Z
+ * Generiert am: 2025-11-24T20:34:58.906Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/advertorial/semantic/typography/typography-md.css

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Advertorial / md
- * Generiert am: 2025-11-24T15:10:53.083Z
+ * Generiert am: 2025-11-24T20:34:58.767Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/advertorial/semantic/typography/typography-sm.css

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Advertorial / sm
- * Generiert am: 2025-11-24T15:10:52.946Z
+ * Generiert am: 2025-11-24T20:34:58.643Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/advertorial/semantic/typography/typography-xs.css

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Advertorial / xs
- * Generiert am: 2025-11-24T15:10:52.782Z
+ * Generiert am: 2025-11-24T20:34:58.496Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/bild/density/density-compact.css

@@ -1,14 +1,39 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * density-compact.css
+ * Generiert am: 2025-11-24T20:34:53.601Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --button-content-gap-space: 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. */
-  --button-stack-space: 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. */
-  --button-label-font-size: 15px; /** 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 */
-  --button-inline-space: 16px; /** 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. */
+  /* ============================================
+     COMPONENT
+     ============================================ */
+
+  /* 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.
+   */
+  --button-content-gap-space: 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.
+   */
+  --button-stack-space: 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
+   */
+  --button-label-font-size: 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.
+   */
+  --button-inline-space: 16px;
+
+  /* Component - Inputfield */
   --input-field-inline-space: 16px;
   --input-field-stack-space: 6px;
   --input-field-height-size: 36px;
-  --input-field-label-font-size: 16px; /** 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 */
+  /**
+   * 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
+   */
+  --input-field-label-font-size: 16px;
+
 }

package/dist/css/brands/bild/density/density-default.css

@@ -1,14 +1,39 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * density-default.css
+ * Generiert am: 2025-11-24T20:34:53.643Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --button-content-gap-space: 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. */
-  --button-stack-space: 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. */
-  --button-label-font-size: 17px; /** 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 */
-  --button-inline-space: 20px; /** 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. */
+  /* ============================================
+     COMPONENT
+     ============================================ */
+
+  /* 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.
+   */
+  --button-content-gap-space: 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.
+   */
+  --button-stack-space: 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
+   */
+  --button-label-font-size: 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.
+   */
+  --button-inline-space: 20px;
+
+  /* Component - Inputfield */
   --input-field-inline-space: 16px;
   --input-field-stack-space: 8px;
   --input-field-height-size: 40px;
-  --input-field-label-font-size: 17px; /** 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 */
+  /**
+   * 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
+   */
+  --input-field-label-font-size: 17px;
+
 }

package/dist/css/brands/bild/density/density-spacious.css

@@ -1,14 +1,39 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * density-spacious.css
+ * Generiert am: 2025-11-24T20:34:53.685Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --button-content-gap-space: 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. */
-  --button-stack-space: 12px; /** 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. */
-  --button-label-font-size: 19px; /** 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 */
-  --button-inline-space: 24px; /** 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. */
+  /* ============================================
+     COMPONENT
+     ============================================ */
+
+  /* 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.
+   */
+  --button-content-gap-space: 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.
+   */
+  --button-stack-space: 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
+   */
+  --button-label-font-size: 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.
+   */
+  --button-inline-space: 24px;
+
+  /* Component - Inputfield */
   --input-field-inline-space: 16px;
   --input-field-stack-space: 12px;
   --input-field-height-size: 48px;
-  --input-field-label-font-size: 19px; /** 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 */
+  /**
+   * 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
+   */
+  --input-field-label-font-size: 19px;
+
 }

package/dist/css/brands/bild/overrides/brandcolormapping.css

@@ -1,60 +1,116 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * brandcolormapping.css
+ * Generiert am: 2025-11-24T20:34:54.804Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --core-color-primary: #DD0000; /** Bild: 046; SpoBi: 016 current css calls this variable main tenant color */
-  --core-color-secondary: #FFFFFF; /** Bild&SpoBi Tone 100 */
-  --core-color-secondary-dark: #232629; /** Bild: 015 ; SpoBi: 010 */
-  --core-color-tertiary: #232629; /** Bild: 015 ; SpoBi: 010 */
-  --core-color-tertiary-dark: #FFFFFF; /** Bild&SpoBi: 100 */
-  --accent-color-primary: #DD0000; /** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
-  --accent-color-primary-dark: #FFFFFF; /** Bild: 100 ; SpoBi: 098 */
-  --surface-color-primary: #FFFFFF; /** Bild: 100 ; SpoBi: 100 */
-  --surface-color-primary-dark: #232629; /** Bild: 015 ; SpoBi: 010 */
-  --surface-color-secondary: #F2F4F5; /** Bild: 096 ; SpoBi: 098 */
-  --surface-color-secondary-dark: #2C3138; /** Bild: 020 ; SpoBi: 016 */
-  --surface-color-tertiary: #E9ECEF; /** Bild: 093 ; SpoBi: 081 */
-  --surface-color-tertiary-dark: #343C41; /** Bild: 025 ; SpoBi: 029 */
-  --surface-color-quartenary: #CED4DA; /** Bild: 085 ; SpoBi: 085 */
-  --surface-color-quartenary-dark: #4B525A; /** Bild: 035 ; SpoBi: 035 */
-  --color-primary-active: #DD0000; /** Bild: 046 ; SpoBi: 029 */
-  --color-primary-active-dark: #DD0000; /** Bild: 046 ; SpoBi: 098 */
-  --text-color-primary: #232629; /** Bild & SpoBi: Tone 015 */
-  --text-color-primary-dark: #E9ECEF; /** Bild & SpoBi: Tone 093 */
-  --headline-color-primary: #232629; /** Bild: 015 ; SpoBi: 016 */
-  --headline-color-primary-dark: #FFFFFF; /** Bild&SpoBi: Tone 100 */
-  --kicker-text-color-on-bg: #FFFFFF; /** 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 */
-  --kicker-text-color-on-surface: #DD0000; /** 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 */
-  --kicker-text-color-on-surface-dark: #8C9196; /** Use this variable for kicker texts that are directly on top of the color of the overall user interface. Bild & SpoBi tone 060. */
-  --text-color-secondary: #8C9196; /** Bild & SpoBi: Tone 060 */
-  --text-color-secondary-dark: #8C9196; /** Bild & SpoBi: Tone 060 */
-  --kicker-bg-color-on-surface: #DD0000; /** Use this variable for the color immediately behind the bounding box of the kicker text element. Bild: 046 ; SpoBi: 029 */
-  --kicker-bg-color-on-surface-dark: #8C9196; /** Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060 */
-  --button-primary-bg-color-idle: #232629; /** Bild & SpoBi: Tone 015 */
-  --button-primary-bg-color-hover: #4B525A; /** Bild & SpoBi: Tone 035 */
-  --button-primary-bg-color-idle-dark: #FFFFFF; /** Bild & SpoBi: Tone 100 */
-  --button-primary-bg-color-hover-dark: #E9ECEF; /** Bild: 093 ; SpoBi: 081 */
-  --button-primary-bg-color-idle: #DD0000; /** Bild: 046 ; SpoBi: 029 */
-  --button-primary-bg-color-idle-dark: #DD0000; /** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
-  --button-primary-bg-color-hover: #AF0002; /** Bild: 035 ; SpoBi: 016 */
-  --button-primary-bg-color-hover-dark: #AF0002; /** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
-  --breaking-news-text-content-color: #FFFFFF; /** This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015 */
-  --breaking-news-surface-color: #232629; /** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
-  --breaking-news-title-surface-color: #FD8227; /** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
-  --breaking-news-top-title-text-color: #1C1C1C; /** This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081 */
-  --breaking-news-surface-color-dark: #E9ECEF; /** This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode.  Bild: 093 ; SpoBi: 081 */
-  --breaking-news-text-content-color-dark: #232629; /** This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015 */
-  --breaking-news-bottom-title-text-color: #1C1C1C; /** This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100 */
-  --teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
-  --teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
-  --menu-link-lane-surface-color: #FFFFFF; /** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component. */
-  --menu-link-lane-label-color: #4B525A; /** This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component. */
+  /* ============================================
+     COMPONENT
+     ============================================ */
+
+  --chip-color-active: #DD0000;
+
+  /* Component - Avatar */
+  /**
+   * 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
+   */
+  --avatar-label-color: #232629;
+  /**
+   * 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
+   */
+  --avatar-label-color-dark: #FFFFFF;
+  /**
+   * This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
+   */
+  --avatar-label-color-hover: #DD0000;
+
+  /* Component - BreakingNews */
+  /**
+   * This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015
+   */
+  --breaking-news-text-content-color: #FFFFFF;
+  /**
+   * This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
+   */
+  --breaking-news-surface-color: #232629;
+  /**
+   * This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
+   */
+  --breaking-news-title-surface-color: #FD8227;
+  /**
+   * This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081
+   */
+  --breaking-news-top-title-text-color: #1C1C1C;
+  /**
+   * This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode.  Bild: 093 ; SpoBi: 081
+   */
+  --breaking-news-surface-color-dark: #E9ECEF;
+  /**
+   * This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015
+   */
+  --breaking-news-text-content-color-dark: #232629;
+  /**
+   * This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100
+   */
+  --breaking-news-bottom-title-text-color: #1C1C1C;
+
+  /* Component - Button - PrimaryBrand */
+  /**
+   * Bild: 046 ; SpoBi: 029
+   */
+  --primary-brand-button-primary-bg-color-idle: #DD0000;
+  /**
+   * This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038
+   */
+  --primary-brand-button-primary-bg-color-idle-dark: #DD0000;
+  /**
+   * Bild: 035 ; SpoBi: 016
+   */
+  --primary-brand-button-primary-bg-color-hover: #AF0002;
+  /**
+   * This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
+   */
+  --primary-brand-button-primary-bg-color-hover-dark: #AF0002;
+
+  /* Component - Button - PrimaryNeutral */
+  /**
+   * Bild & SpoBi: Tone 015
+   */
+  --primary-neutral-button-primary-bg-color-idle: #232629;
+  /**
+   * Bild & SpoBi: Tone 035
+   */
+  --primary-neutral-button-primary-bg-color-hover: #4B525A;
+  /**
+   * Bild & SpoBi: Tone 100
+   */
+  --primary-neutral-button-primary-bg-color-idle-dark: #FFFFFF;
+  /**
+   * Bild: 093 ; SpoBi: 081
+   */
+  --primary-neutral-button-primary-bg-color-hover-dark: #E9ECEF;
+
+  /* Component - Menu */
+  /**
+   * This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component.
+   */
+  --menu-link-lane-surface-color: #FFFFFF;
+  /**
+   * This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component.
+   */
+  --menu-link-lane-label-color: #4B525A;
   --menu-link-lane-label-color-dark: #8C9196;
-  --menu-link-lane-surface-color-dark: #232629; /** 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. */
+  /**
+   * 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.
+   */
+  --menu-link-lane-surface-color-dark: #232629;
   --menu-link-color-border-active: #DD0000;
   --menu-link-color-border-active-dark: #FFFFFF;
-  --menu-link-lane-label-color-active: #232629; /** This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component. */
+  /**
+   * This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component.
+   */
+  --menu-link-lane-label-color-active: #232629;
   --app-top-bar-surface-color: #FFFFFF;
   --app-top-bar-bg-color-dark: #343C41;
   --app-bottom-tab-bar-bg-color: #FFFFFF;
@@ -67,8 +123,136 @@
   --app-tob-bar-tab-nav-bottom-border-dark: #4B525A;
   --app-tob-bar-tab-nav-bottom-border-active: #DD0000;
   --app-tob-bar-tab-nav-bottom-border-active-dark: #FFFFFF;
-  --avatar-label-color: #232629; /** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
-  --avatar-label-color-dark: #FFFFFF; /** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
-  --avatar-label-color-hover: #DD0000; /** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
-  --chip-color-active: #DD0000;
+
+  /* Component - Teaser */
+  --teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
+  --teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
+
+
+  /* ============================================
+     GLOBAL
+     ============================================ */
+
+  /* Global - Attention */
+  /**
+   * Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers.
+   */
+  --accent-color-primary: #DD0000;
+  /**
+   * Bild: 100 ; SpoBi: 098
+   */
+  --accent-color-primary-dark: #FFFFFF;
+
+  /* Global - Core */
+  /**
+   * Bild: 046; SpoBi: 016 current css calls this variable main tenant color
+   */
+  --core-color-primary: #DD0000;
+  /**
+   * Bild&SpoBi Tone 100
+   */
+  --core-color-secondary: #FFFFFF;
+  /**
+   * Bild: 015 ; SpoBi: 010
+   */
+  --core-color-secondary-dark: #232629;
+  /**
+   * Bild: 015 ; SpoBi: 010
+   */
+  --core-color-tertiary: #232629;
+  /**
+   * Bild&SpoBi: 100
+   */
+  --core-color-tertiary-dark: #FFFFFF;
+
+  /* Global - State */
+  /**
+   * Bild: 046 ; SpoBi: 029
+   */
+  --color-primary-active: #DD0000;
+  /**
+   * Bild: 046 ; SpoBi: 098
+   */
+  --color-primary-active-dark: #DD0000;
+
+  /* Global - Surface */
+  /**
+   * Bild: 100 ; SpoBi: 100
+   */
+  --surface-color-primary: #FFFFFF;
+  /**
+   * Bild: 015 ; SpoBi: 010
+   */
+  --surface-color-primary-dark: #232629;
+  /**
+   * Bild: 096 ; SpoBi: 098
+   */
+  --surface-color-secondary: #F2F4F5;
+  /**
+   * Bild: 020 ; SpoBi: 016
+   */
+  --surface-color-secondary-dark: #2C3138;
+  /**
+   * Bild: 093 ; SpoBi: 081
+   */
+  --surface-color-tertiary: #E9ECEF;
+  /**
+   * Bild: 025 ; SpoBi: 029
+   */
+  --surface-color-tertiary-dark: #343C41;
+  /**
+   * Bild: 085 ; SpoBi: 085
+   */
+  --surface-color-quartenary: #CED4DA;
+  /**
+   * Bild: 035 ; SpoBi: 035
+   */
+  --surface-color-quartenary-dark: #4B525A;
+
+  /* Global - Text */
+  /**
+   * Bild & SpoBi: Tone 015
+   */
+  --text-color-primary: #232629;
+  /**
+   * Bild & SpoBi: Tone 093
+   */
+  --text-color-primary-dark: #E9ECEF;
+  /**
+   * Bild: 015 ; SpoBi: 016
+   */
+  --headline-color-primary: #232629;
+  /**
+   * Bild&SpoBi: Tone 100
+   */
+  --headline-color-primary-dark: #FFFFFF;
+  /**
+   * 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
+   */
+  --kicker-text-color-on-bg: #FFFFFF;
+  /**
+   * 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
+   */
+  --kicker-text-color-on-surface: #DD0000;
+  /**
+   * Use this variable for kicker texts that are directly on top of the color of the overall user interface. Bild & SpoBi tone 060.
+   */
+  --kicker-text-color-on-surface-dark: #8C9196;
+  /**
+   * Bild & SpoBi: Tone 060
+   */
+  --text-color-secondary: #8C9196;
+  /**
+   * Bild & SpoBi: Tone 060
+   */
+  --text-color-secondary-dark: #8C9196;
+  /**
+   * Use this variable for the color immediately behind the bounding box of the kicker text element. Bild: 046 ; SpoBi: 029
+   */
+  --kicker-bg-color-on-surface: #DD0000;
+  /**
+   * Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060
+   */
+  --kicker-bg-color-on-surface-dark: #8C9196;
+
 }