@marioschmidt/design-system-tokens 1.0.19 → 1.0.21

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

@@ -1,6 +1,6 @@
 /**
  * Effect Classes - Bild / dark
- * Generiert am: 2025-11-24T09:19:12.712Z
+ * Generiert am: 2025-11-24T20:34:59.102Z
  * Nicht manuell bearbeiten!
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * Effect Classes - Bild / light
- * Generiert am: 2025-11-24T09:19:12.635Z
+ * Generiert am: 2025-11-24T20:34:59.036Z
  * Nicht manuell bearbeiten!
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Bild / lg
- * Generiert am: 2025-11-24T09:19:11.276Z
+ * Generiert am: 2025-11-24T20:34:57.854Z
  * Nicht manuell bearbeiten!
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Bild / md
- * Generiert am: 2025-11-24T09:19:11.110Z
+ * Generiert am: 2025-11-24T20:34:57.708Z
  * Nicht manuell bearbeiten!
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Bild / sm
- * Generiert am: 2025-11-24T09:19:10.955Z
+ * Generiert am: 2025-11-24T20:34:57.563Z
  * Nicht manuell bearbeiten!
  */
 

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

@@ -1,6 +1,6 @@
 /**
  * Typography Classes - Bild / xs
- * Generiert am: 2025-11-24T09:19:10.760Z
+ * Generiert am: 2025-11-24T20:34:57.405Z
  * Nicht manuell bearbeiten!
  */
 

package/dist/css/brands/sportbild/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:54.973Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --component-button-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. */
-  --component-button-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. */
-  --component-button-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 */
-  --component-button-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-inputfield-input-field-inline-space: 16px;
-  --component-inputfield-input-field-stack-space: 6px;
-  --component-inputfield-input-field-height-size: 36px;
-  --component-inputfield-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 */
+  /* ============================================
+     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;
+  /**
+   * 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/sportbild/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:55.013Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --component-button-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. */
-  --component-button-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. */
-  --component-button-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 */
-  --component-button-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-inputfield-input-field-inline-space: 16px;
-  --component-inputfield-input-field-stack-space: 8px;
-  --component-inputfield-input-field-height-size: 40px;
-  --component-inputfield-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 */
+  /* ============================================
+     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;
+  /**
+   * 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/sportbild/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:55.054Z
+ * Nicht manuell bearbeiten!
  */
 
 :root {
-  --component-button-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. */
-  --component-button-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. */
-  --component-button-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 */
-  --component-button-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-inputfield-input-field-inline-space: 16px;
-  --component-inputfield-input-field-stack-space: 12px;
-  --component-inputfield-input-field-height-size: 48px;
-  --component-inputfield-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 */
+  /* ============================================
+     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;
+  /**
+   * 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/sportbild/overrides/brandcolormapping.css

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