@marioschmidt/design-system-tokens 1.0.19 → 1.0.21

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

@@ -1,12 +1,27 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * density-compact.js
+ * Generiert am: 2025-11-24T20:34:54.974Z
+ * Nicht manuell bearbeiten!
  */
 
-export const ComponentButtonButtonContentGapSpace = "6px";
-export const ComponentButtonButtonStackSpace = "6px";
-export const ComponentButtonButtonLabelFontSize = "15px";
-export const ComponentButtonButtonInlineSpace = "16px";
-export const ComponentInputfieldInputFieldInlineSpace = "16px";
-export const ComponentInputfieldInputFieldStackSpace = "6px";
-export const ComponentInputfieldInputFieldHeightSize = "36px";
-export const ComponentInputfieldInputFieldLabelFontSize = "16px";
+// ============================================
+// 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. */
+export const buttonContentGapSpace = "6px";
+/** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+export const buttonStackSpace = "6px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
+export const buttonLabelFontSize = "15px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+export const buttonInlineSpace = "16px";
+
+// Component - Inputfield
+export const inputFieldInlineSpace = "16px";
+export const inputFieldStackSpace = "6px";
+export const inputFieldHeightSize = "36px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
+export const inputFieldLabelFontSize = "16px";
+

package/dist/js/brands/sportbild/density/density-default.js

@@ -1,12 +1,27 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * density-default.js
+ * Generiert am: 2025-11-24T20:34:55.015Z
+ * Nicht manuell bearbeiten!
  */
 
-export const ComponentButtonButtonContentGapSpace = "8px";
-export const ComponentButtonButtonStackSpace = "8px";
-export const ComponentButtonButtonLabelFontSize = "17px";
-export const ComponentButtonButtonInlineSpace = "20px";
-export const ComponentInputfieldInputFieldInlineSpace = "16px";
-export const ComponentInputfieldInputFieldStackSpace = "8px";
-export const ComponentInputfieldInputFieldHeightSize = "40px";
-export const ComponentInputfieldInputFieldLabelFontSize = "17px";
+// ============================================
+// 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. */
+export const buttonContentGapSpace = "8px";
+/** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+export const buttonStackSpace = "8px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
+export const buttonLabelFontSize = "17px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+export const buttonInlineSpace = "20px";
+
+// Component - Inputfield
+export const inputFieldInlineSpace = "16px";
+export const inputFieldStackSpace = "8px";
+export const inputFieldHeightSize = "40px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
+export const inputFieldLabelFontSize = "17px";
+

package/dist/js/brands/sportbild/density/density-spacious.js

@@ -1,12 +1,27 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * density-spacious.js
+ * Generiert am: 2025-11-24T20:34:55.055Z
+ * Nicht manuell bearbeiten!
  */
 
-export const ComponentButtonButtonContentGapSpace = "8px";
-export const ComponentButtonButtonStackSpace = "12px";
-export const ComponentButtonButtonLabelFontSize = "19px";
-export const ComponentButtonButtonInlineSpace = "24px";
-export const ComponentInputfieldInputFieldInlineSpace = "16px";
-export const ComponentInputfieldInputFieldStackSpace = "12px";
-export const ComponentInputfieldInputFieldHeightSize = "48px";
-export const ComponentInputfieldInputFieldLabelFontSize = "19px";
+// ============================================
+// 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. */
+export const buttonContentGapSpace = "8px";
+/** This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+export const buttonStackSpace = "12px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19 */
+export const buttonLabelFontSize = "19px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes. */
+export const buttonInlineSpace = "24px";
+
+// Component - Inputfield
+export const inputFieldInlineSpace = "16px";
+export const inputFieldStackSpace = "12px";
+export const inputFieldHeightSize = "48px";
+/** This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19 */
+export const inputFieldLabelFontSize = "19px";
+

package/dist/js/brands/sportbild/overrides/brandcolormapping.js

@@ -1,76 +1,156 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * brandcolormapping.js
+ * Generiert am: 2025-11-24T20:34:56.173Z
+ * Nicht manuell bearbeiten!
  */
 
-export const GlobalCoreCoreColorPrimary = "#0a2750";
-export const GlobalCoreCoreColorSecondary = "#ffffff";
-export const GlobalCoreCoreColorSecondaryDark = "#081828";
-export const GlobalCoreCoreColorTertiary = "#081828";
-export const GlobalCoreCoreColorTertiaryDark = "#ffffff";
-export const GlobalAttentionAccentColorPrimary = "#174482";
-export const GlobalAttentionAccentColorPrimaryDark = "#f7f9fd";
-export const GlobalSurfaceSurfaceColorPrimary = "#ffffff";
-export const GlobalSurfaceSurfaceColorPrimaryDark = "#081828";
-export const GlobalSurfaceSurfaceColorSecondary = "#f7f9fd";
-export const GlobalSurfaceSurfaceColorSecondaryDark = "#0a2750";
-export const GlobalSurfaceSurfaceColorTertiary = "#bdcadb";
-export const GlobalSurfaceSurfaceColorTertiaryDark = "#174482";
-export const GlobalSurfaceSurfaceColorQuartenary = "#ced4da";
-export const GlobalSurfaceSurfaceColorQuartenaryDark = "#4b525a";
-export const GlobalStateColorPrimaryActive = "#174482";
-export const GlobalStateColorPrimaryActiveDark = "#f7f9fd";
-export const GlobalTextTextColorPrimary = "#232629";
-export const GlobalTextTextColorPrimaryDark = "#e9ecef";
-export const GlobalTextHeadlineColorPrimary = "#0a2750";
-export const GlobalTextHeadlineColorPrimaryDark = "#ffffff";
-export const GlobalTextKickerTextColorOnBg = "#ffffff";
-export const GlobalTextKickerTextColorOnSurface = "#8c9196";
-export const GlobalTextKickerTextColorOnSurfaceDark = "#8c9196";
-export const GlobalTextTextColorSecondary = "#8c9196";
-export const GlobalTextTextColorSecondaryDark = "#8c9196";
-export const GlobalTextKickerBgColorOnSurface = "#174482";
-export const GlobalTextKickerBgColorOnSurfaceDark = "#8c9196";
-export const ComponentButtonPrimaryNeutralButtonPrimaryBgColorIdle = "#232629";
-export const ComponentButtonPrimaryNeutralButtonPrimaryBgColorHover = "#4b525a";
-export const ComponentButtonPrimaryNeutralButtonPrimaryBgColorIdleDark =
-  "#ffffff";
-export const ComponentButtonPrimaryNeutralButtonPrimaryBgColorHoverDark =
-  "#bdcadb";
-export const ComponentButtonPrimaryBrandButtonPrimaryBgColorIdle = "#174482";
-export const ComponentButtonPrimaryBrandButtonPrimaryBgColorIdleDark =
-  "#315998";
-export const ComponentButtonPrimaryBrandButtonPrimaryBgColorHover = "#0a2750";
-export const ComponentButtonPrimaryBrandButtonPrimaryBgColorHoverDark =
-  "#174482";
-export const ComponentBreakingNewsBreakingNewsTextContentColor = "#232629";
-export const ComponentBreakingNewsBreakingNewsSurfaceColor = "#ffbf00";
-export const ComponentBreakingNewsBreakingNewsTitleSurfaceColor = "#0a2750";
-export const ComponentBreakingNewsBreakingNewsTopTitleTextColor = "#ffbf00";
-export const ComponentBreakingNewsBreakingNewsSurfaceColorDark = "#ffbf00";
-export const ComponentBreakingNewsBreakingNewsTextContentColorDark = "#232629";
-export const ComponentBreakingNewsBreakingNewsBottomTitleTextColor = "#ffffff";
-export const ComponentTeaserTeaserTitleBackgroundGradientStart = "#0a2750b2";
-export const ComponentTeaserTeaserTitleBackgroundGradientStop = "#0a275000";
-export const ComponentMenuMenuLinkLaneSurfaceColor = "#0a2750";
-export const ComponentMenuMenuLinkLaneLabelColor = "#ced4da";
-export const ComponentMenuMenuLinkLaneLabelColorDark = "#aeb4b9";
-export const ComponentMenuMenuLinkLaneSurfaceColorDark = "#0a2750";
-export const ComponentMenuMenuLinkColorBorderActive = "#0a2750";
-export const ComponentMenuMenuLinkColorBorderActiveDark = "#f7f9fd";
-export const ComponentMenuMenuLinkLaneLabelColorActive = "#ffffff";
-export const ComponentMenuAppTopBarSurfaceColor = "#2c3138";
-export const ComponentMenuAppTopBarBgColorDark = "#2c3138";
-export const ComponentMenuAppBottomTabBarBgColor = "#ffffff";
-export const ComponentMenuAppBottomTabBarBgDark = "#2c3138";
-export const ComponentMenuAppTopBarIconColor = "#8c9196";
-export const ComponentMenuAppTopBarIconColorDark = "#8c9196";
-export const ComponentMenuAppTopBarTextColor = "#e9ecef";
-export const ComponentMenuAppTopBarTextColorDark = "#e9ecef";
-export const ComponentMenuAppTobBarTabNavBottomBorder = "#174482";
-export const ComponentMenuAppTobBarTabNavBottomBorderDark = "#174482";
-export const ComponentMenuAppTobBarTabNavBottomBorderActive = "#ced4da";
-export const ComponentMenuAppTobBarTabNavBottomBorderActiveDark = "#ffffff";
-export const ComponentAvatarAvatarLabelColor = "#666b70";
-export const ComponentAvatarAvatarLabelColorDark = "#e9ecef";
-export const ComponentAvatarAvatarLabelColorHover = "#174482";
-export const ComponentChipColorActive = "#174482";
+// ============================================
+// COMPONENT
+// ============================================
+
+export const chipColorActive = "#174482";
+
+// Component - Avatar
+/** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
+export const avatarLabelColor = "#666B70";
+/** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
+export const avatarLabelColorDark = "#E9ECEF";
+/** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
+export const avatarLabelColorHover = "#174482";
+
+// Component - BreakingNews
+/** This variable is used on the text for headlines in the horizontally animated breaking news strip. Bild: 100 ; SpoBi: 015 */
+export const breakingNewsTextContentColor = "#232629";
+/** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
+export const breakingNewsSurfaceColor = "#FFBF00";
+/** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
+export const breakingNewsTitleSurfaceColor = "#0A2750";
+/** This variable is used for the color of the "breaking" word in the "breaking news" horizontally animated headlines strip. Bild: 010 ; SpoBi: 081 */
+export const breakingNewsTopTitleTextColor = "#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 */
+export const breakingNewsSurfaceColorDark = "#FFBF00";
+/** This variable is used on the text for headlines in the horizontally animated breaking news strip on dark mode. Bild&SpoBi: 015 */
+export const breakingNewsTextContentColorDark = "#232629";
+/** This variable is used for the color of the "News" word in the breaking news horizontal animated headlines strip. Bild: 010 ; SpoBi: 100 */
+export const breakingNewsBottomTitleTextColor = "#FFFFFF";
+
+// Component - Button - PrimaryBrand
+/** Bild: 046 ; SpoBi: 029 */
+export const primaryBrandButtonPrimaryBgColorIdle = "#174482";
+/** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
+export const primaryBrandButtonPrimaryBgColorIdleDark = "#315998";
+/** Bild: 035 ; SpoBi: 016 */
+export const primaryBrandButtonPrimaryBgColorHover = "#0A2750";
+/** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
+export const primaryBrandButtonPrimaryBgColorHoverDark = "#174482";
+
+// Component - Button - PrimaryNeutral
+/** Bild & SpoBi: Tone 015 */
+export const primaryNeutralButtonPrimaryBgColorIdle = "#232629";
+/** Bild & SpoBi: Tone 035 */
+export const primaryNeutralButtonPrimaryBgColorHover = "#4B525A";
+/** Bild & SpoBi: Tone 100 */
+export const primaryNeutralButtonPrimaryBgColorIdleDark = "#FFFFFF";
+/** Bild: 093 ; SpoBi: 081 */
+export const primaryNeutralButtonPrimaryBgColorHoverDark = "#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. */
+export const menuLinkLaneSurfaceColor = "#0A2750";
+/** This variable is used for making possible the default color difference between the Bild and SportBild link lane labels inside the menu component. */
+export const menuLinkLaneLabelColor = "#CED4DA";
+export const menuLinkLaneLabelColorDark = "#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. */
+export const menuLinkLaneSurfaceColorDark = "#0A2750";
+export const menuLinkColorBorderActive = "#0A2750";
+export const menuLinkColorBorderActiveDark = "#F7F9FD";
+/** This variable is used for making possible the active color difference between the Bild and SportBild link lane labels inside the menu component. */
+export const menuLinkLaneLabelColorActive = "#FFFFFF";
+export const appTopBarSurfaceColor = "#2C3138";
+export const appTopBarBgColorDark = "#2C3138";
+export const appBottomTabBarBgColor = "#FFFFFF";
+export const appBottomTabBarBgDark = "#2C3138";
+export const appTopBarIconColor = "#8C9196";
+export const appTopBarIconColorDark = "#8C9196";
+export const appTopBarTextColor = "#E9ECEF";
+export const appTopBarTextColorDark = "#E9ECEF";
+export const appTobBarTabNavBottomBorder = "#174482";
+export const appTobBarTabNavBottomBorderDark = "#174482";
+export const appTobBarTabNavBottomBorderActive = "#CED4DA";
+export const appTobBarTabNavBottomBorderActiveDark = "#FFFFFF";
+
+// Component - Teaser
+export const teaserTitleBackgroundGradientStart = "rgba(10, 39, 80, 0.699999988079071)";
+export const teaserTitleBackgroundGradientStop = "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. */
+export const accentColorPrimary = "#174482";
+/** Bild: 100 ; SpoBi: 098 */
+export const accentColorPrimaryDark = "#F7F9FD";
+
+// Global - Core
+/** Bild: 046; SpoBi: 016 current css calls this variable main tenant color */
+export const coreColorPrimary = "#0A2750";
+/** Bild&SpoBi Tone 100 */
+export const coreColorSecondary = "#FFFFFF";
+/** Bild: 015 ; SpoBi: 010 */
+export const coreColorSecondaryDark = "#081828";
+/** Bild: 015 ; SpoBi: 010 */
+export const coreColorTertiary = "#081828";
+/** Bild&SpoBi: 100 */
+export const coreColorTertiaryDark = "#FFFFFF";
+
+// Global - State
+/** Bild: 046 ; SpoBi: 029 */
+export const colorPrimaryActive = "#174482";
+/** Bild: 046 ; SpoBi: 098 */
+export const colorPrimaryActiveDark = "#F7F9FD";
+
+// Global - Surface
+/** Bild: 100 ; SpoBi: 100 */
+export const surfaceColorPrimary = "#FFFFFF";
+/** Bild: 015 ; SpoBi: 010 */
+export const surfaceColorPrimaryDark = "#081828";
+/** Bild: 096 ; SpoBi: 098 */
+export const surfaceColorSecondary = "#F7F9FD";
+/** Bild: 020 ; SpoBi: 016 */
+export const surfaceColorSecondaryDark = "#0A2750";
+/** Bild: 093 ; SpoBi: 081 */
+export const surfaceColorTertiary = "#BDCADB";
+/** Bild: 025 ; SpoBi: 029 */
+export const surfaceColorTertiaryDark = "#174482";
+/** Bild: 085 ; SpoBi: 085 */
+export const surfaceColorQuartenary = "#CED4DA";
+/** Bild: 035 ; SpoBi: 035 */
+export const surfaceColorQuartenaryDark = "#4B525A";
+
+// Global - Text
+/** Bild & SpoBi: Tone 015 */
+export const textColorPrimary = "#232629";
+/** Bild & SpoBi: Tone 093 */
+export const textColorPrimaryDark = "#E9ECEF";
+/** Bild: 015 ; SpoBi: 016 */
+export const headlineColorPrimary = "#0A2750";
+/** Bild&SpoBi: Tone 100 */
+export const headlineColorPrimaryDark = "#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 */
+export const kickerTextColorOnBg = "#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 */
+export const kickerTextColorOnSurface = "#8C9196";
+/** Use this variable for kicker texts that are directly on top of the color of the overall user interface. Bild & SpoBi tone 060. */
+export const kickerTextColorOnSurfaceDark = "#8C9196";
+/** Bild & SpoBi: Tone 060 */
+export const textColorSecondary = "#8C9196";
+/** Bild & SpoBi: Tone 060 */
+export const textColorSecondaryDark = "#8C9196";
+/** Use this variable for the color immediately behind the bounding box of the kicker text element. Bild: 046 ; SpoBi: 029 */
+export const kickerBgColorOnSurface = "#174482";
+/** Use this variable for the dark mode color of the background immediately around the kicker text element. Bild: 060 ; SpoBi: 060 */
+export const kickerBgColorOnSurfaceDark = "#8C9196";
+