@marioschmidt/design-system-tokens 1.0.20 → 1.0.21

package/dist/scss/brands/sportbild/density/density-compact.scss

@@ -1,11 +1,27 @@
+//
+// density-compact.scss
+// Generiert am: 2025-11-24T20:34:54.974Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
+// ============================================
+// COMPONENT
+// ============================================
 
-$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 - 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/scss/brands/sportbild/density/density-default.scss

@@ -1,11 +1,27 @@
+//
+// density-default.scss
+// Generiert am: 2025-11-24T20:34:55.014Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
+// ============================================
+// COMPONENT
+// ============================================
 
-$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 - 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/scss/brands/sportbild/density/density-spacious.scss

@@ -1,11 +1,27 @@
+//
+// density-spacious.scss
+// Generiert am: 2025-11-24T20:34:55.054Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
+// ============================================
+// COMPONENT
+// ============================================
 
-$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 - 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/scss/brands/sportbild/overrides/brandcolormapping.scss

@@ -1,58 +1,71 @@
+//
+// brandcolormapping.scss
+// Generiert am: 2025-11-24T20:34:56.171Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
-
-$core-color-primary: #0A2750; // Bild: 046; SpoBi: 016 current css calls this variable main tenant color
-$core-color-secondary: #FFFFFF; // Bild&SpoBi Tone 100
-$core-color-secondary-dark: #081828; // Bild: 015 ; SpoBi: 010
-$core-color-tertiary: #081828; // Bild: 015 ; SpoBi: 010
-$core-color-tertiary-dark: #FFFFFF; // Bild&SpoBi: 100
-$accent-color-primary: #174482; // Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers.
-$accent-color-primary-dark: #F7F9FD; // Bild: 100 ; SpoBi: 098
-$surface-color-primary: #FFFFFF; // Bild: 100 ; SpoBi: 100
-$surface-color-primary-dark: #081828; // Bild: 015 ; SpoBi: 010
-$surface-color-secondary: #F7F9FD; // Bild: 096 ; SpoBi: 098
-$surface-color-secondary-dark: #0A2750; // Bild: 020 ; SpoBi: 016
-$surface-color-tertiary: #BDCADB; // Bild: 093 ; SpoBi: 081
-$surface-color-tertiary-dark: #174482; // Bild: 025 ; SpoBi: 029
-$surface-color-quartenary: #CED4DA; // Bild: 085 ; SpoBi: 085
-$surface-color-quartenary-dark: #4B525A; // Bild: 035 ; SpoBi: 035
-$color-primary-active: #174482; // Bild: 046 ; SpoBi: 029
-$color-primary-active-dark: #F7F9FD; // Bild: 046 ; SpoBi: 098
-$text-color-primary: #232629; // Bild & SpoBi: Tone 015
-$text-color-primary-dark: #E9ECEF; // Bild & SpoBi: Tone 093
-$headline-color-primary: #0A2750; // 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: #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
-$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: #174482; // 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: #BDCADB; // Bild: 093 ; SpoBi: 081
-$button-primary-bg-color-idle: #174482; // Bild: 046 ; SpoBi: 029
-$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
-$button-primary-bg-color-hover: #0A2750; // Bild: 035 ; SpoBi: 016
-$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
-$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
-$breaking-news-surface-color: #FFBF00; // This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
-$breaking-news-title-surface-color: #0A2750; // This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
-$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
-$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
-$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: #FFFFFF; // 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(10, 39, 80, 0.699999988079071);
-$teaser-title-background-gradient-stop: rgba(10, 39, 80, 0);
-$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.
-$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
+// ============================================
+
+$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;
-$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.
+// 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;
-$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.
+// 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;
@@ -65,7 +78,79 @@ $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;
-$avatar-label-color: #666B70; // 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
-$avatar-label-color-dark: #E9ECEF; // 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
-$avatar-label-color-hover: #174482; // This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
-$chip-color-active: #174482;
+
+// 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;
+