@marioschmidt/design-system-tokens 1.0.9

package/dist/scss/mapping/brand-color-bild.scss

@@ -0,0 +1,71 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$global-core-core-color-primary: #de0000; // 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: #242629; // Bild: 015 ; SpoBi: 010
+$global-core-core-color-tertiary: #242629; // Bild: 015 ; SpoBi: 010
+$global-core-core-color-tertiary-dark: #ffffff; // Bild&SpoBi: 100
+$global-attention-accent-color-primary: #de0000; // 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: #ffffff; // Bild: 100 ; SpoBi: 098
+$global-surface-surface-color-primary: #ffffff; // Bild: 100 ; SpoBi: 100
+$global-surface-surface-color-primary-dark: #242629; // Bild: 015 ; SpoBi: 010
+$global-surface-surface-color-secondary: #f2f5f5; // Bild: 096 ; SpoBi: 098
+$global-surface-surface-color-secondary-dark: #2b3038; // Bild: 020 ; SpoBi: 016
+$global-surface-surface-color-tertiary: #e8edf0; // Bild: 093 ; SpoBi: 081
+$global-surface-surface-color-tertiary-dark: #333d40; // Bild: 025 ; SpoBi: 029
+$global-surface-surface-color-quartenary: #cfd4d9; // Bild: 085 ; SpoBi: 085
+$global-surface-surface-color-quartenary-dark: #4a5259; // Bild: 035 ; SpoBi: 035
+$global-state-color-primary-active: #de0000; // Bild: 046 ; SpoBi: 029
+$global-state-color-primary-active-dark: #de0000; // Bild: 046 ; SpoBi: 098
+$global-text-text-color-primary: #242629; // Bild & SpoBi: Tone 015
+$global-text-text-color-primary-dark: #e8edf0; // Bild & SpoBi: Tone 093
+$global-text-text-color-secondary: #8c9196; // Bild & SpoBi: Tone 060
+$global-text-text-color-secondary-dark: #8c9196; // Bild & SpoBi: Tone 060
+$global-text-headline-color-primary: #242629; // 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: #de0000; // 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-kicker-bg-color-on-surface: #de0000; // 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-avatar-avatar-label-color: #242629; // 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
+$component-avatar-avatar-label-color-dark: #ffffff; // 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
+$component-avatar-avatar-label-color-hover: #de0000; // This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
+$component-chip-color-active: #de0000;
+$component-breaking-news-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
+$component-breaking-news-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
+$component-breaking-news-breaking-news-title-surface-color: #fc8226; // This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
+$component-breaking-news-breaking-news-surface-color: #242629; // This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081
+$component-breaking-news-breaking-news-surface-color-dark: #e8edf0; // 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: #ffffff; // 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-text-content-color-dark: #242629; // This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015
+$component-button-primary-brand-button-primary-bg-color-idle: #de0000; // Bild: 046 ; SpoBi: 029
+$component-button-primary-brand-button-primary-bg-color-hover: #b00003; // Bild: 035 ; SpoBi: 016
+$component-button-primary-brand-button-primary-bg-color-idle-dark: #de0000; // 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-dark: #b00003; // This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
+$component-button-primary-neutral-button-primary-bg-color-idle: #242629; // Bild & SpoBi: Tone 015
+$component-button-primary-neutral-button-primary-bg-color-hover: #4a5259; // 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: #e8edf0; // Bild: 093 ; SpoBi: 081
+$component-menu-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.
+$component-menu-menu-link-lane-surface-color-dark: #242629; // 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-lane-label-color: #4a5259; // 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-active: #242629; // 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-menu-link-lane-label-color-dark: #8c9196;
+$component-menu-menu-link-color-border-active: #de0000;
+$component-menu-menu-link-color-border-active-dark: #ffffff;
+$component-menu-app-bottom-tab-bar-bg-color: #ffffff;
+$component-menu-app-top-bar-bg-color-dark: #333d40;
+$component-menu-app-bottom-tab-bar-bg-dark: #333d40;
+$component-menu-app-top-bar-surface-color: #ffffff;
+$component-menu-app-top-bar-icon-color: #4a5259;
+$component-menu-app-top-bar-icon-color-dark: #8c9196;
+$component-menu-app-top-bar-text-color: #242629;
+$component-menu-app-top-bar-text-color-dark: #e8edf0;
+$component-menu-app-tob-bar-tab-nav-bottom-border: #e8edf0;
+$component-menu-app-tob-bar-tab-nav-bottom-border-dark: #4a5259;
+$component-menu-app-tob-bar-tab-nav-bottom-border-active: #de0000;
+$component-menu-app-tob-bar-tab-nav-bottom-border-active-dark: #ffffff;
+$component-teaser-teaser-title-background-gradient-start: rgba(0, 0, 0, 0.7);
+$component-teaser-teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);

package/dist/scss/mapping/brand-color-sportbild.scss

@@ -0,0 +1,71 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$global-core-core-color-primary: #0a264f; // 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: #081729; // Bild: 015 ; SpoBi: 010
+$global-core-core-color-tertiary: #081729; // Bild: 015 ; SpoBi: 010
+$global-core-core-color-tertiary-dark: #ffffff; // Bild&SpoBi: 100
+$global-attention-accent-color-primary: #174582; // 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: #f7fafc; // Bild: 100 ; SpoBi: 098
+$global-surface-surface-color-primary: #ffffff; // Bild: 100 ; SpoBi: 100
+$global-surface-surface-color-primary-dark: #081729; // Bild: 015 ; SpoBi: 010
+$global-surface-surface-color-secondary: #f7fafc; // Bild: 096 ; SpoBi: 098
+$global-surface-surface-color-secondary-dark: #0a264f; // Bild: 020 ; SpoBi: 016
+$global-surface-surface-color-tertiary: #bdc9db; // Bild: 093 ; SpoBi: 081
+$global-surface-surface-color-tertiary-dark: #174582; // Bild: 025 ; SpoBi: 029
+$global-surface-surface-color-quartenary: #cfd4d9; // Bild: 085 ; SpoBi: 085
+$global-surface-surface-color-quartenary-dark: #4a5259; // Bild: 035 ; SpoBi: 035
+$global-state-color-primary-active: #174582; // Bild: 046 ; SpoBi: 029
+$global-state-color-primary-active-dark: #f7fafc; // Bild: 046 ; SpoBi: 098
+$global-text-text-color-primary: #242629; // Bild & SpoBi: Tone 015
+$global-text-text-color-primary-dark: #e8edf0; // Bild & SpoBi: Tone 093
+$global-text-text-color-secondary: #8c9196; // Bild & SpoBi: Tone 060
+$global-text-text-color-secondary-dark: #8c9196; // Bild & SpoBi: Tone 060
+$global-text-headline-color-primary: #0a264f; // 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-kicker-bg-color-on-surface: #174582; // 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-avatar-avatar-label-color: #666b70; // 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045
+$component-avatar-avatar-label-color-dark: #e8edf0; // 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093
+$component-avatar-avatar-label-color-hover: #174582; // This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029
+$component-chip-color-active: #174582;
+$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-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-breaking-news-breaking-news-title-surface-color: #0a264f; // This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016
+$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-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: #242629; // 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-text-content-color-dark: #242629; // This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015
+$component-button-primary-brand-button-primary-bg-color-idle: #174582; // Bild: 046 ; SpoBi: 029
+$component-button-primary-brand-button-primary-bg-color-hover: #0a264f; // Bild: 035 ; SpoBi: 016
+$component-button-primary-brand-button-primary-bg-color-idle-dark: #305999; // 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-dark: #174582; // This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029
+$component-button-primary-neutral-button-primary-bg-color-idle: #242629; // Bild & SpoBi: Tone 015
+$component-button-primary-neutral-button-primary-bg-color-hover: #4a5259; // 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: #bdc9db; // Bild: 093 ; SpoBi: 081
+$component-menu-menu-link-lane-surface-color: #0a264f; // 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-surface-color-dark: #0a264f; // 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-lane-label-color: #cfd4d9; // 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-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-menu-link-lane-label-color-dark: #adb5ba;
+$component-menu-menu-link-color-border-active: #0a264f;
+$component-menu-menu-link-color-border-active-dark: #f7fafc;
+$component-menu-app-bottom-tab-bar-bg-color: #ffffff;
+$component-menu-app-top-bar-bg-color-dark: #0a264f;
+$component-menu-app-bottom-tab-bar-bg-dark: #0a264f;
+$component-menu-app-top-bar-surface-color: #0a264f;
+$component-menu-app-top-bar-icon-color: #8c9196;
+$component-menu-app-top-bar-icon-color-dark: #8c9196;
+$component-menu-app-top-bar-text-color: #e8edf0;
+$component-menu-app-top-bar-text-color-dark: #e8edf0;
+$component-menu-app-tob-bar-tab-nav-bottom-border: #174582;
+$component-menu-app-tob-bar-tab-nav-bottom-border-dark: #174582;
+$component-menu-app-tob-bar-tab-nav-bottom-border-active: #cfd4d9;
+$component-menu-app-tob-bar-tab-nav-bottom-border-active-dark: #ffffff;
+$component-teaser-teaser-title-background-gradient-start: rgba(10, 38, 79, 0.7);
+$component-teaser-teaser-title-background-gradient-stop: rgba(10, 38, 79, 0);

package/dist/scss/mapping/brand-sportbild.scss

@@ -0,0 +1,274 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$global-typography-font-family-display-font-family: AntennaCond; // Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the display text style font family parameter.
+$global-typography-font-family-headline-font-family: AntennaExtraCond; // Bild: GothamCond | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the headlines text style font family parameter.
+$global-typography-font-family-subheadline-font-family: AntennaCond; // Bild: GothamCond | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the subheadlines text style font family parameter.
+$global-typography-font-family-kicker-font-family: AntennaExtraCond; // Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the kickers text styles font family parameter.
+$global-typography-font-family-title-font-family: AntennaCond; // Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the titles text style font family parameter.
+$global-typography-font-family-callout-font-family: AntennaCond; // Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the callouts text style font family parameter.
+$global-typography-font-family-body-font-family: Inter; // Bild: GothamXNarrow | SpoBi: Inter | Ads: LucidaGrande | This variable is used in the body text style font family parameter.
+$global-typography-font-family-footnote-font-family: Inter; // Bild: GothamXNarrow | SpoBi: Inter | Ads: LucidaGrande | This variable is used in the footnotes text style font family parameter.
+$global-typography-font-family-label-font-family: AntennaExtraCond; // Bild: GothamXNarrow | SpoBi: AntennaExtraCond | Ads: LucidaGrande | This variable is used in the labels text styles font family parameter.
+$global-typography-font-family-quote-font-family: AntennaCond; // Bild: Gotham | SpoBi: AntennaCond | Ads: LucidaGrande | This variable is used in the quotes text style font family parameter.
+$global-typography-font-size-display-display1-font-size-xs: 38; // Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display1 text style font size parameter for small device sizes.
+$global-typography-font-size-display-display1-font-size-sm: 38; // Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display1 text style font size parameter for small device sizes.
+$global-typography-font-size-display-display1-font-size-md: 68; // Bild: 72 | SpoBi: 68 | Ads: 70 | This variable is used in the display1 text style font size parameter for medium device sizes.
+$global-typography-font-size-display-display1-font-size-lg: 114; // Bild: 120 | SpoBi: 114 | Ads: 116 | This variable is used in the display1 text style font size parameter for large device sizes.
+$global-typography-font-size-display-display2-font-size-xs: 34; // Bild: 36 | SpoBi: 34 | Ads: 35 | This variable is used in the display2 text style font size parameter for small device sizes.
+$global-typography-font-size-display-display2-font-size-sm: 34; // Bild: 36 | SpoBi: 34 | Ads: 35 | This variable is used in the display2 text style font size parameter for small device sizes.
+$global-typography-font-size-display-display2-font-size-md: 40; // Bild: 42 | SpoBi: 40 | Ads: 41 | This variable is used in the display2 text style font size parameter for medium device sizes.
+$global-typography-font-size-display-display2-font-size-lg: 61; // Bild: 64 | SpoBi: 61 | Ads: 62 | This variable is used in the display2 text style font size parameter for large device sizes.
+$global-typography-font-size-display-display3-font-size-xs: 27; // Bild: 28 | SpoBi: 27 | Ads: 27 | This variable is used in the display3 text style font size parameter for small device sizes.
+$global-typography-font-size-display-display3-font-size-sm: 27; // Bild: 28 | SpoBi: 27 | Ads: 27 | This variable is used in the display3 text style font size parameter for small device sizes.
+$global-typography-font-size-display-display3-font-size-md: 30; // Bild: 32 | SpoBi: 30 | Ads: 31 | This variable is used in the display3 text style font size parameter for medium device sizes.
+$global-typography-font-size-display-display3-font-size-lg: 38; // Bild: 40 | SpoBi: 38 | Ads: 39 | This variable is used in the display3 text style font size parameter for large device sizes.
+$global-typography-font-size-headline-headline-text-align: left; // This variable is used for controlling the alignment of headlines across brands. current online css example var: --headline-text-align-lg
+$global-typography-font-size-headline-headline1-font-size-xs: 42; // Bild: 48 | SpoBi: 42 | Ads: 36 | This variable is used in the headline1 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline1-font-size-sm: 42; // Bild: 48 | SpoBi: 42 | Ads: 36 | This variable is used in the headline1 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline1-font-size-md: 60; // Bild: 72 | SpoBi: 60 | Ads: 54 | This variable is used in the headline1 text style font size parameter for medium device sizes.
+$global-typography-font-size-headline-headline1-font-size-lg: 80; // Bild: 100 | SpoBi: 80 | Ads: 70 | This variable is used in the headline1 text style font size parameter for large device sizes.
+$global-typography-font-size-headline-headline2-font-size-xs: 42; // Bild: 40 | SpoBi: 42 | Ads: 30 | This variable is used in the headline2 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline2-font-size-sm: 42; // Bild: 40 | SpoBi: 42 | Ads: 30 | This variable is used in the headline2 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline2-font-size-md: 44; // Bild: 48 | SpoBi: 44 | Ads: 36 | This variable is used in the headline2 text style font size parameter for medium device sizes.
+$global-typography-font-size-headline-headline2-font-size-lg: 50; // Bild: 64 | SpoBi: 50 | Ads: 48 | This variable is used in the headline2 text style font size parameter for large device sizes.
+$global-typography-font-size-headline-headline3-font-size-xs: 30; // Bild: 28 | SpoBi: 30 | Ads: 24 | This variable is used in the headline3 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline3-font-size-sm: 30; // Bild: 28 | SpoBi: 30 | Ads: 24 | This variable is used in the headline3 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline3-font-size-md: 30; // Bild: 36 | SpoBi: 30 | Ads: 26 | This variable is used in the headline3 text style font size parameter for medium device sizes.
+$global-typography-font-size-headline-headline3-font-size-lg: 34; // Bild: 40 | SpoBi: 34 | Ads: 32 | This variable is used in the headline3 text style font size parameter for large device sizes.
+$global-typography-font-size-headline-headline4-font-size-xs: 21; // Bild: 22 | SpoBi: 21 | Ads: 16 | This variable is used in the headline4 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline4-font-size-sm: 21; // Bild: 22 | SpoBi: 21 | Ads: 16 | This variable is used in the headline4 text style font size parameter for small device sizes.
+$global-typography-font-size-headline-headline4-font-size-md: 26; // Bild: 26 | SpoBi: 26 | Ads: 20 | This variable is used in the headline4 text style font size parameter for medium device sizes.
+$global-typography-font-size-headline-headline4-font-size-lg: 26; // Bild: 32 | SpoBi: 26 | Ads: 22 | This variable is used in the headline4 text style font size parameter for large device sizes.
+$global-typography-font-size-subheadline-subheadline1-font-size-xs: 18; // Bild: 24 | SpoBi: 18 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for small device sizes.
+$global-typography-font-size-subheadline-subheadline1-font-size-sm: 18; // Bild: 24 | SpoBi: 18 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for small device sizes.
+$global-typography-font-size-subheadline-subheadline1-font-size-md: 22; // Bild: 32 | SpoBi: 22 | Ads: 18 | This variable is used in the subheadline1 text style font size parameter for medium device sizes.
+$global-typography-font-size-subheadline-subheadline1-font-size-lg: 26; // Bild: 36 | SpoBi: 26 | Ads: 28 | This variable is used in the subheadline1 text style font size parameter for large device sizes.
+$global-typography-font-size-kicker-kicker1-font-size-xs: 20; // Bild: 18 | SpoBi: 20 | Ads: 16 | This variable is used in the kicker1 text style font size parameter for small device sizes. Current online css: --kicker-0-font-size-sm
+$global-typography-font-size-kicker-kicker1-font-size-sm: 20; // Bild: 18 | SpoBi: 20 | Ads: 16 | This variable is used in the kicker1 text style font size parameter for small device sizes. Current online css: --kicker-0-font-size-sm
+$global-typography-font-size-kicker-kicker1-font-size-md: 26; // Bild: 22 | SpoBi: 26 | Ads: 18 | This variable is used in the kicker1 text style font size parameter for medium device sizes. Current online css: --kicker-0-font-size-md
+$global-typography-font-size-kicker-kicker1-font-size-lg: 32; // Bild: 30 | SpoBi: 32 | Ads: 25 | This variable is used in the kicker1 text style font size parameter for large device sizes. Current online css: --kicker-0-font-size-lg
+$global-typography-font-size-kicker-kicker2-font-size-xs: 16; // Bild: 18 | SpoBi: 16 | Ads: 16 | This variable is used in the kicker2 text style font size parameter for small device sizes. Current online css: --kicker-1-font-size-sm
+$global-typography-font-size-kicker-kicker2-font-size-sm: 16; // Bild: 18 | SpoBi: 16 | Ads: 16 | This variable is used in the kicker2 text style font size parameter for small device sizes. Current online css: --kicker-1-font-size-sm
+$global-typography-font-size-kicker-kicker2-font-size-md: 26; // Bild: 22 | SpoBi: 26 | Ads: 18 | This variable is used in the kicker2 text style font size parameter for medium device sizes. Current online css: --kicker-1-font-size-md
+$global-typography-font-size-kicker-kicker2-font-size-lg: 26; // Bild: 24 | SpoBi: 26 | Ads: 21 | This variable is used in the kicker2 text style font size parameter for large device sizes. Current online css: --kicker-1-font-size-lg
+$global-typography-font-size-kicker-kicker3-font-size-xs: 16; // Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for small device sizes. Current online css: --kicker-2-font-size-sm
+$global-typography-font-size-kicker-kicker3-font-size-sm: 16; // Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for small device sizes. Current online css: --kicker-2-font-size-sm
+$global-typography-font-size-kicker-kicker3-font-size-md: 20; // Bild: 18 | SpoBi: 20 | Ads: 14 | This variable is used in the kicker3 text style font size parameter for medium device sizes. Current online css: --kicker-2-font-size-md
+$global-typography-font-size-kicker-kicker3-font-size-lg: 22; // Bild: 20 | SpoBi: 22 | Ads: 16 | This variable is used in the kicker3 text style font size parameter for large device sizes. Current online css: --kicker-2-font-size-lg
+$global-typography-font-size-kicker-kicker4-font-size-xs: 14; // Bild: 14 | SpoBi: 14 | Ads: 12 | This variable is used in the kicker4 text style font size parameter for small device sizes. Current online css: --kicker-3-font-size-sm
+$global-typography-font-size-kicker-kicker4-font-size-sm: 14; // Bild: 14 | SpoBi: 14 | Ads: 12 | This variable is used in the kicker4 text style font size parameter for small device sizes. Current online css: --kicker-3-font-size-sm
+$global-typography-font-size-kicker-kicker4-font-size-md: 16; // Bild: 16 | SpoBi: 16 | Ads: 14 | This variable is used in the kicker4 text style font size parameter for medium device sizes. Current online css: --kicker-3-font-size-md
+$global-typography-font-size-kicker-kicker4-font-size-lg: 18; // Bild: 16 | SpoBi: 18 | Ads: 14 | This variable is used in the kicker4 text style font size parameter for large device sizes. Current online css: --kicker-3-font-size-lg
+$global-typography-font-size-title-title1-font-size-xs: 24; // Bild 22 | SpoBi 24 | Ads 22 | current online css: --ressort-header-font-size-sm
+$global-typography-font-size-title-title1-font-size-sm: 24; // Bild 22 | SpoBi 24 | Ads 22 | current online css: --ressort-header-font-size-sm
+$global-typography-font-size-title-title1-font-size-md: 28; // Bild 22 | SpoBi 28 | Ads 22 | current online css: --ressort-header-font-size-md
+$global-typography-font-size-title-title1-font-size-lg: 30; // Bild 28 | SpoBi 30 | Ads 28 | current online css: --ressort-header-font-size-lg
+$global-typography-font-size-title-title2-font-size-xs: 16; // Bild 16 | SpoBi 16 | Ads 14 | current online css var: --caption-1-font-size-sm
+$global-typography-font-size-title-title2-font-size-sm: 16; // Bild 16 | SpoBi 16 | Ads 14 | current online css: --caption-1-font-size-sm
+$global-typography-font-size-title-title2-font-size-md: 18; // Bild 18 | SpoBi 18 | Ads 16 | current online css: --caption-1-font-size-md
+$global-typography-font-size-title-title2-font-size-lg: 20; // Bild 20 | SpoBi 20 | Ads 18 | current online css: --caption-1-font-size-lg
+$global-typography-font-size-callout-callout1-font-size-xs: 18; // Bild: 18 | SpoBi: 18 | Ads: 16 | This variable is used in the callout1 text style font size parameter for small device sizes. Current online css:
+$global-typography-font-size-callout-callout1-font-size-sm: 18; // Bild: 18 | SpoBi: 18 | Ads: 16 | This variable is used in the callout1 text style font size parameter for small device sizes. Current online css:
+$global-typography-font-size-callout-callout1-font-size-md: 24; // Bild: 22 | SpoBi: 24 | Ads: 22 | This variable is used in the callout1 text style font size parameter for medium device sizes. Current online css:
+$global-typography-font-size-callout-callout1-font-size-lg: 24; // Bild: 22 | SpoBi: 24 | Ads: 22 | This variable is used in the callout1 text style font size parameter for large device sizes. Current online css:
+$global-typography-font-size-body-body-font-size-xs: 17; // Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for small device sizes. Current online css: --body-font-size
+$global-typography-font-size-body-body-font-size-sm: 17; // Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for small device sizes. Current online css: --body-font-size
+$global-typography-font-size-body-body-font-size-md: 17; // Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for medium device sizes. Current online css: --body-font-size
+$global-typography-font-size-body-body-font-size-lg: 17; // Bild: 21 | SpoBi: 17 | Ads: 17 | This variable is used in the body text style font size parameter for large device sizes. Current online css: --body-font-size
+$global-typography-font-size-footnote-footnote1-font-size-xs: 13; // --footnote-font-size-sm
+$global-typography-font-size-footnote-footnote1-font-size-sm: 13; // --footnote-font-size-sm
+$global-typography-font-size-footnote-footnote1-font-size-md: 13;
+$global-typography-font-size-footnote-footnote1-font-size-lg: 15; // --footnote-font-size-lg
+$global-typography-font-size-footnote-footnote2-font-size-xs: 10;
+$global-typography-font-size-footnote-footnote2-font-size-sm: 10;
+$global-typography-font-size-footnote-footnote2-font-size-md: 10;
+$global-typography-font-size-footnote-footnote2-font-size-lg: 13;
+$global-typography-font-size-label-label1-font-size: 17;
+$global-typography-font-size-label-label1-resp-font-size-xs: 10;
+$global-typography-font-size-label-label1-resp-font-size-sm: 10;
+$global-typography-font-size-label-label1-resp-font-size-md: 15;
+$global-typography-font-size-label-label1-resp-font-size-lg: 17;
+$global-typography-font-size-label-label2-font-size: 15;
+$global-typography-font-size-label-label3-font-size: 12;
+$global-typography-font-size-label-label4-font-size: 8;
+$global-typography-font-size-quote-quote-font-size-xs: 16;
+$global-typography-font-size-quote-quote-font-size-sm: 16;
+$global-typography-font-size-quote-quote-font-size-md: 18;
+$global-typography-font-size-quote-quote-font-size-lg: 20;
+$global-typography-line-height-display-display1-line-height-xs: 40;
+$global-typography-line-height-display-display1-line-height-sm: 40;
+$global-typography-line-height-display-display1-line-height-md: 72;
+$global-typography-line-height-display-display1-line-height-lg: 120;
+$global-typography-line-height-display-display2-line-height-xs: 36;
+$global-typography-line-height-display-display2-line-height-sm: 36;
+$global-typography-line-height-display-display2-line-height-md: 42;
+$global-typography-line-height-display-display2-line-height-lg: 64;
+$global-typography-line-height-display-display3-line-height-xs: 28;
+$global-typography-line-height-display-display3-line-height-sm: 28;
+$global-typography-line-height-display-display3-line-height-md: 32;
+$global-typography-line-height-display-display3-line-height-lg: 40;
+$global-typography-line-height-headline-headline1-line-height-xs: 42;
+$global-typography-line-height-headline-headline1-line-height-sm: 42;
+$global-typography-line-height-headline-headline1-line-height-md: 69;
+$global-typography-line-height-headline-headline1-line-height-lg: 88;
+$global-typography-line-height-headline-headline2-line-height-xs: 42;
+$global-typography-line-height-headline-headline2-line-height-sm: 42;
+$global-typography-line-height-headline-headline2-line-height-md: 50.6;
+$global-typography-line-height-headline-headline2-line-height-lg: 57.6;
+$global-typography-line-height-headline-headline3-line-height-xs: 33;
+$global-typography-line-height-headline-headline3-line-height-sm: 33;
+$global-typography-line-height-headline-headline3-line-height-md: 34.5;
+$global-typography-line-height-headline-headline3-line-height-lg: 39.1;
+$global-typography-line-height-headline-headline4-line-height-xs: 23.1;
+$global-typography-line-height-headline-headline4-line-height-sm: 23.1;
+$global-typography-line-height-headline-headline4-line-height-md: 28.6;
+$global-typography-line-height-headline-headline4-line-height-lg: 29.9;
+$global-typography-line-height-subheadline-subheadline1-line-height-xs: 23.4;
+$global-typography-line-height-subheadline-subheadline1-line-height-sm: 23.4;
+$global-typography-line-height-subheadline-subheadline1-line-height-md: 28.6;
+$global-typography-line-height-subheadline-subheadline1-line-height-lg: 33.8;
+$global-typography-line-height-kicker-kicker1-line-height-xs: 22;
+$global-typography-line-height-kicker-kicker1-line-height-sm: 22;
+$global-typography-line-height-kicker-kicker1-line-height-md: 28.6;
+$global-typography-line-height-kicker-kicker1-line-height-lg: 35.2;
+$global-typography-line-height-kicker-kicker2-line-height-xs: 17.6;
+$global-typography-line-height-kicker-kicker2-line-height-sm: 17.6;
+$global-typography-line-height-kicker-kicker2-line-height-md: 28.6;
+$global-typography-line-height-kicker-kicker2-line-height-lg: 28.6;
+$global-typography-line-height-kicker-kicker3-line-height-xs: 17.6;
+$global-typography-line-height-kicker-kicker3-line-height-sm: 17.6;
+$global-typography-line-height-kicker-kicker3-line-height-md: 22;
+$global-typography-line-height-kicker-kicker3-line-height-lg: 24.2;
+$global-typography-line-height-kicker-kicker4-line-height-xs: 15.4;
+$global-typography-line-height-kicker-kicker4-line-height-sm: 15.4;
+$global-typography-line-height-kicker-kicker4-line-height-md: 17.6;
+$global-typography-line-height-kicker-kicker4-line-height-lg: 19.8;
+$global-typography-line-height-title-title1-line-height-xs: 26.4;
+$global-typography-line-height-title-title1-line-height-sm: 26.4;
+$global-typography-line-height-title-title1-line-height-md: 30.8;
+$global-typography-line-height-title-title1-line-height-lg: 33;
+$global-typography-line-height-title-title2-line-height-xs: 16.8;
+$global-typography-line-height-title-title2-line-height-sm: 20.8;
+$global-typography-line-height-title-title2-line-height-md: 23.4;
+$global-typography-line-height-title-title2-line-height-lg: 26;
+$global-typography-line-height-callout-callout1-line-height-xs: 23.4;
+$global-typography-line-height-callout-callout1-line-height-sm: 23.4;
+$global-typography-line-height-callout-callout1-line-height-md: 31.2;
+$global-typography-line-height-callout-callout1-line-height-lg: 31.2;
+$global-typography-line-height-body-body-line-height-xs: 28.05;
+$global-typography-line-height-body-body-line-height-sm: 28.05;
+$global-typography-line-height-body-body-line-height-md: 29.75;
+$global-typography-line-height-body-body-line-height-lg: 28.05;
+$global-typography-line-height-footnote-footnote1-line-height-xs: 17.03;
+$global-typography-line-height-footnote-footnote1-line-height-sm: 17.03;
+$global-typography-line-height-footnote-footnote1-line-height-md: 17.03;
+$global-typography-line-height-footnote-footnote1-line-height-lg: 19;
+$global-typography-line-height-footnote-footnote2-line-height-xs: 13;
+$global-typography-line-height-footnote-footnote2-line-height-sm: 13;
+$global-typography-line-height-footnote-footnote2-line-height-md: 13;
+$global-typography-line-height-footnote-footnote2-line-height-lg: 17.03;
+$global-typography-line-height-label-label1-line-height: 20.4; // Bild 17 | SpoBi 20.4 | Ads 20.4 | The label 1 text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label1-resp-line-height-xs: 12; // Bild 10 | SpoBi 12 | Ads 10 | The label1 responsive text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label1-resp-line-height-sm: 12; // Bild 10 | SpoBi 12 | Ads 10 | The label1 responsive text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label1-resp-line-height-md: 18; // Bild 15 | SpoBi 18 | Ads 15 | The label1 responsive text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label1-resp-line-height-lg: 20.4; // Bild 17 | SpoBi 20.4 | Ads 17 | The label1 responsive text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label2-line-height: 19.2; // Bild 16 | SpoBi 19.2 | Ads 16 | The label 2 text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label3-line-height: 14.4; // Bild 14.4 | SpoBi 14.4 | Ads 14.4 | The label 3 text style uses this variable for its line height parameter.
+$global-typography-line-height-label-label4-line-height: 10; // Bild 10 | SpoBi 10 | Ads 10 | The label 4 text style uses this variable for its line height parameter.
+$global-typography-line-height-quote-quote-line-height-xs: 20.8;
+$global-typography-line-height-quote-quote-line-height-sm: 20.8;
+$global-typography-line-height-quote-quote-line-height-md: 23.4;
+$global-typography-line-height-quote-quote-line-height-lg: 26;
+$global-typography-font-weight-display-display-font-weight: 800;
+$global-typography-font-weight-headline-headline1-font-weight: 700;
+$global-typography-font-weight-headline-headline1-font-weight-st: Bold Italic;
+$global-typography-font-weight-headline-headline2-font-weight: 700;
+$global-typography-font-weight-headline-headline2-font-weight-st: Bold Italic;
+$global-typography-font-weight-headline-headline3-font-weight: 700;
+$global-typography-font-weight-headline-headline3-font-weight-st: Bold Italic;
+$global-typography-font-weight-headline-headline4-font-weight: 700;
+$global-typography-font-weight-headline-headline4-font-weight-st: Bold Italic;
+$global-typography-font-weight-subheadline-subheadline-font-weight: 700;
+$global-typography-font-weight-kicker-kicker-font-weight: 700;
+$global-typography-font-weight-kicker-kicker-font-weight-st: Black Italic;
+$global-typography-font-weight-title-title-font-weight: 800;
+$global-typography-font-weight-callout-callout-font-weight: 800;
+$global-typography-font-weight-body-body-font-weight-book: 400;
+$global-typography-font-weight-body-body-font-weight-bold: 700;
+$global-typography-font-weight-footnote-footnote-font-weight-book: 400;
+$global-typography-font-weight-footnote-footnote-font-weight-bold: 700;
+$global-typography-font-weight-label-label-font-weight-book: 400;
+$global-typography-font-weight-label-label-font-weight-bold: 700;
+$global-typography-font-weight-quote-quote-font-weight: 800;
+$global-visibilty-hide-on-bild: true;
+$global-visibilty-hide-on-sport-bild: false;
+$global-visibilty-hide-on-advertorial: true;
+$global-visibilty-only-bild: false;
+$global-visibilty-only-sport-bild: true;
+$global-visibilty-only-advertorial: false;
+$component-button-label-font-weight-st: Bold Italic;
+$component-accordion-accordion-label-font-family: Inter;
+$component-article-font-size-article-image-caption-font-size-xs: 13; // --article-figure-caption-font-size-sm
+$component-article-font-size-article-image-caption-font-size-sm: 13; // --article-figure-caption-font-size-sm
+$component-article-font-size-article-image-caption-font-size-md: 13; // --article-figure-caption-font-size-md
+$component-article-font-size-article-image-caption-font-size-lg: 15; // --article-figure-caption-font-size-lg
+$component-article-font-size-article-image-source-font-size-xs: 13; // --article-figure-meta-font-size-sm
+$component-article-font-size-article-image-source-font-size-sm: 13; // --article-figure-meta-font-size-sm
+$component-article-font-size-article-image-source-font-size-md: 13; // --article-figure-meta-font-size-sm
+$component-article-font-size-article-image-source-font-size-lg: 15; // --article-figure-meta-font-size-lg
+$component-article-line-height-article-image-caption-line-height-xs: 16.9; // --article-figure-caption-line-height-sm ; Bild: 19.5 // SpoBi: 16.9 // Ad: 19.5
+$component-article-line-height-article-image-caption-line-height-sm: 16.9; // --article-figure-caption-line-height-sm ; Bild: 19.5 // SpoBi: 16.9 // Ad: 19.5
+$component-article-line-height-article-image-caption-line-height-md: 16.9; // --article-figure-caption-line-height-md ; Bild: 24.75 // SpoBi: 16.9 // Ad: 19.5
+$component-article-line-height-article-image-caption-line-height-lg: 19.5; // --article-figure-caption-line-height-lg ; Bild: 24.75 // SpoBi: 19.5 // Ad: 24
+$component-article-line-height-article-image-source-line-height-xs: 17; // --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
+$component-article-line-height-article-image-source-line-height-sm: 17; // --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
+$component-article-line-height-article-image-source-line-height-md: 17; // --article-figure-meta-line-height-sm ; Bild: 21 // SpoBi: 17 // Ad: 19
+$component-article-line-height-article-image-source-line-height-lg: 19; // --article-figure-meta-line-height-lg ; Bild: 23 // SpoBi: 19 // Ad: 24
+$component-avatar-avatar-font-family: Inter; // current css 09-2025 --article-author-font // Bild: GothamXNarrow; SpoBi: Inter; Ads: LucidaGrande
+$component-avatar-avatar-font-size-sm: 13; // 09-2025 css using footnote var for font sizes SM & LG // Bild: 16; SpoBi: 13; Ads: 13
+$component-avatar-avatar-font-size-lg: 15; // 09-2025 css using footnote var for font sizes SM & LG // Bild: 18; SpoBi: 15; Ads: 15
+$component-breadcrumb-font-family-breadcrumb-font-family: Inter; // --breadcrumb-font
+$component-breadcrumb-font-weight-breadcrumb-font-weight: 400; // --breadcrumb-font-size-sm
+$component-breadcrumb-font-size-breadcrumb-font-size-xs: 14; // --breadcrumb-font-size-sm
+$component-breadcrumb-font-size-breadcrumb-font-size-sm: 14; // --breadcrumb-font-size-sm
+$component-breadcrumb-font-size-breadcrumb-font-size-md: 14; // --breadcrumb-font-size-sm
+$component-breadcrumb-font-size-breadcrumb-font-size-lg: 11; // --breadcrumb-font-size-lg
+$component-breadcrumb-line-height-breadcrumb-line-height-xs: 14; // not defined as variable
+$component-breadcrumb-line-height-breadcrumb-line-height-sm: 14; // not defined as variable
+$component-breadcrumb-line-height-breadcrumb-line-height-md: 14; // not defined as variable
+$component-breadcrumb-line-height-breadcrumb-line-height-lg: 11; // not defined as variable
+$component-breaking-news-breaking-news-content-font-size: 26;
+$component-footer-footer-link-font-family: Inter;
+$component-inputfield-input-field-label-font-family: Inter;
+$component-media-player-video-time-badge-font-family: Inter;
+$component-menu-menu-item-font-size: 18; // --nav-btn-font-size
+$component-menu-menu-item-font-weight: Black Italic;
+$component-menu-app-top-bar-title-font-size-xs: 12; // --caption-1-font-size-sm
+$component-menu-app-top-bar-title-font-size-sm: 12; // --caption-1-font-size-sm
+$component-menu-app-top-bar-title-font-size-md: 13; // --caption-1-font-size-md
+$component-menu-app-top-bar-title-font-size-lg: 13; // --caption-1-font-size-lg
+$component-menu-app-top-bar-title-line-height-xs: 14;
+$component-menu-app-top-bar-title-line-height-sm: 14;
+$component-menu-app-top-bar-title-line-height-md: 17;
+$component-menu-app-top-bar-title-line-height-lg: 17;
+$component-teaser-teaser-title-inline-space-xs: 12; // --teaser-title-padding-xs
+$component-teaser-teaser-title-inline-space-sm: 12; // --teaser-title-padding-sm
+$component-teaser-teaser-title-inline-space-md: 16; // --teaser-title-padding-md
+$component-teaser-teaser-title-inline-space-lg: 16; // --teaser-title-padding-lg
+$component-teaser-quad-q-teaser-title-inline-space-xs: 12;
+$component-teaser-quad-q-teaser-title-inline-space-sm: 12;
+$component-teaser-quad-q-teaser-title-inline-space-md: 24;
+$component-teaser-quad-q-teaser-title-inline-space-lg: 24;
+$component-teaser-mini-q-mini-q-teaser-title-inline-space-xs: 12;
+$component-teaser-mini-q-mini-q-teaser-title-inline-space-sm: 12;
+$component-teaser-mini-q-mini-q-teaser-title-inline-space-md: 12;
+$component-teaser-mini-q-mini-q-teaser-title-inline-space-lg: 12;
+$component-teaser-a-teaser-a-teaser-title-inline-space-xs: 12;
+$component-teaser-a-teaser-a-teaser-title-inline-space-sm: 12;
+$component-teaser-a-teaser-a-teaser-title-inline-space-md: 16;
+$component-teaser-a-teaser-a-teaser-title-inline-space-lg: 16;
+$component-teaser-super-a-super-ateaser-title-inline-space: 24;
+$component-teaser-2xa-teaser-2xa-teaser-title-inline-space: 16;
+$component-teaser-b-teaser-b-teaser-title-inline-space: 16;
+$brand-name: SportBILD;

package/dist/scss/mapping/index.scss

@@ -0,0 +1,9 @@
+//
+// MAPPING - SCSS Index
+//
+
+@import './brand-advertorial.scss';
+@import './brand-bild.scss';
+@import './brand-color-bild.scss';
+@import './brand-color-sportbild.scss';
+@import './brand-sportbild.scss';