@marioschmidt/design-system-tokens 1.0.20 → 1.0.21

package/dist/js/brands/bild/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:53.602Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// 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/bild/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:53.644Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// 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/bild/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:53.686Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// 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/bild/overrides/brandcolormapping.js

@@ -1,59 +1,70 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * brandcolormapping.js
+ * Generiert am: 2025-11-24T20:34:54.807Z
+ * Nicht manuell bearbeiten!
  */
 
-export const coreColorPrimary = "#DD0000";
-export const coreColorSecondary = "#FFFFFF";
-export const coreColorSecondaryDark = "#232629";
-export const coreColorTertiary = "#232629";
-export const coreColorTertiaryDark = "#FFFFFF";
-export const accentColorPrimary = "#DD0000";
-export const accentColorPrimaryDark = "#FFFFFF";
-export const surfaceColorPrimary = "#FFFFFF";
-export const surfaceColorPrimaryDark = "#232629";
-export const surfaceColorSecondary = "#F2F4F5";
-export const surfaceColorSecondaryDark = "#2C3138";
-export const surfaceColorTertiary = "#E9ECEF";
-export const surfaceColorTertiaryDark = "#343C41";
-export const surfaceColorQuartenary = "#CED4DA";
-export const surfaceColorQuartenaryDark = "#4B525A";
-export const colorPrimaryActive = "#DD0000";
-export const colorPrimaryActiveDark = "#DD0000";
-export const textColorPrimary = "#232629";
-export const textColorPrimaryDark = "#E9ECEF";
-export const headlineColorPrimary = "#232629";
-export const headlineColorPrimaryDark = "#FFFFFF";
-export const kickerTextColorOnBg = "#FFFFFF";
-export const kickerTextColorOnSurface = "#DD0000";
-export const kickerTextColorOnSurfaceDark = "#8C9196";
-export const textColorSecondary = "#8C9196";
-export const textColorSecondaryDark = "#8C9196";
-export const kickerBgColorOnSurface = "#DD0000";
-export const kickerBgColorOnSurfaceDark = "#8C9196";
-export const buttonPrimaryBgColorIdle = "#232629";
-export const buttonPrimaryBgColorHover = "#4B525A";
-export const buttonPrimaryBgColorIdleDark = "#FFFFFF";
-export const buttonPrimaryBgColorHoverDark = "#E9ECEF";
-export const buttonPrimaryBgColorIdle = "#DD0000";
-export const buttonPrimaryBgColorIdleDark = "#DD0000";
-export const buttonPrimaryBgColorHover = "#AF0002";
-export const buttonPrimaryBgColorHoverDark = "#AF0002";
+// ============================================
+// COMPONENT
+// ============================================
+
+export const chipColorActive = "#DD0000";
+
+// Component - Avatar
+/** 09-2025 css --article-author-name-color // Bild: 015; SpoBi: 045 */
+export const avatarLabelColor = "#232629";
+/** 09-2025 css --article-author-name-color // Bild: 100; SpoBi: 093 */
+export const avatarLabelColorDark = "#FFFFFF";
+/** This variable is used for decorating the avatar text's underline color. Bild: 046; SpoBi: 029 */
+export const avatarLabelColorHover = "#DD0000";
+
+// 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 = "#FFFFFF";
+/** This variable is used on the breaking news strip that has horizontally animated headlines. Bild: 015 ; SpoBi: 081 */
 export const breakingNewsSurfaceColor = "#232629";
+/** This variable is used for the background color of the "Breaking News" title. Bild: 067 ; SpoBi: 016 */
 export const breakingNewsTitleSurfaceColor = "#FD8227";
+/** 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 = "#1C1C1C";
+/** This variable is for the background color of the horizontally animated strip with headlines for breaking news on dark mode.  Bild: 093 ; SpoBi: 081 */
 export const breakingNewsSurfaceColorDark = "#E9ECEF";
+/** 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 = "#1C1C1C";
-export const teaserTitleBackgroundGradientStart =
-  "rgba(0, 0, 0, 0.699999988079071)";
-export const teaserTitleBackgroundGradientStop = "rgba(0, 0, 0, 0)";
+
+// Component - Button - PrimaryBrand
+/** Bild: 046 ; SpoBi: 029 */
+export const primaryBrandButtonPrimaryBgColorIdle = "#DD0000";
+/** This variable controls the primary button idle color for two brands in dark mode. Bild: 046 ; SpoBi: 038 */
+export const primaryBrandButtonPrimaryBgColorIdleDark = "#DD0000";
+/** Bild: 035 ; SpoBi: 016 */
+export const primaryBrandButtonPrimaryBgColorHover = "#AF0002";
+/** This variable stores colors for the hover state of primary buttons for two brands in dark mode. Bild: 035 ; SpoBi: 029 */
+export const primaryBrandButtonPrimaryBgColorHoverDark = "#AF0002";
+
+// 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 = "#E9ECEF";
+
+// Component - Menu
+/** This variable is used for making possible the default color difference between the Bild and SportBild link lanes inside the menu component. */
 export const menuLinkLaneSurfaceColor = "#FFFFFF";
+/** 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 = "#4B525A";
 export const menuLinkLaneLabelColorDark = "#8C9196";
+/** 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 = "#232629";
 export const menuLinkColorBorderActive = "#DD0000";
 export const menuLinkColorBorderActiveDark = "#FFFFFF";
+/** 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 = "#232629";
 export const appTopBarSurfaceColor = "#FFFFFF";
 export const appTopBarBgColorDark = "#343C41";
@@ -67,7 +78,79 @@ export const appTobBarTabNavBottomBorder = "#E9ECEF";
 export const appTobBarTabNavBottomBorderDark = "#4B525A";
 export const appTobBarTabNavBottomBorderActive = "#DD0000";
 export const appTobBarTabNavBottomBorderActiveDark = "#FFFFFF";
-export const avatarLabelColor = "#232629";
-export const avatarLabelColorDark = "#FFFFFF";
-export const avatarLabelColorHover = "#DD0000";
-export const chipColorActive = "#DD0000";
+
+// Component - Teaser
+export const teaserTitleBackgroundGradientStart = "rgba(0, 0, 0, 0.699999988079071)";
+export const teaserTitleBackgroundGradientStop = "rgba(0, 0, 0, 0)";
+
+
+// ============================================
+// GLOBAL
+// ============================================
+
+// Global - Attention
+/** Bild: Tone 046 ; SpoBi: 016 This variable is used on small UI elements such as the background color for kickers. */
+export const accentColorPrimary = "#DD0000";
+/** Bild: 100 ; SpoBi: 098 */
+export const accentColorPrimaryDark = "#FFFFFF";
+
+// Global - Core
+/** Bild: 046; SpoBi: 016 current css calls this variable main tenant color */
+export const coreColorPrimary = "#DD0000";
+/** Bild&SpoBi Tone 100 */
+export const coreColorSecondary = "#FFFFFF";
+/** Bild: 015 ; SpoBi: 010 */
+export const coreColorSecondaryDark = "#232629";
+/** Bild: 015 ; SpoBi: 010 */
+export const coreColorTertiary = "#232629";
+/** Bild&SpoBi: 100 */
+export const coreColorTertiaryDark = "#FFFFFF";
+
+// Global - State
+/** Bild: 046 ; SpoBi: 029 */
+export const colorPrimaryActive = "#DD0000";
+/** Bild: 046 ; SpoBi: 098 */
+export const colorPrimaryActiveDark = "#DD0000";
+
+// Global - Surface
+/** Bild: 100 ; SpoBi: 100 */
+export const surfaceColorPrimary = "#FFFFFF";
+/** Bild: 015 ; SpoBi: 010 */
+export const surfaceColorPrimaryDark = "#232629";
+/** Bild: 096 ; SpoBi: 098 */
+export const surfaceColorSecondary = "#F2F4F5";
+/** Bild: 020 ; SpoBi: 016 */
+export const surfaceColorSecondaryDark = "#2C3138";
+/** Bild: 093 ; SpoBi: 081 */
+export const surfaceColorTertiary = "#E9ECEF";
+/** Bild: 025 ; SpoBi: 029 */
+export const surfaceColorTertiaryDark = "#343C41";
+/** 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 = "#232629";
+/** 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 = "#DD0000";
+/** 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 = "#DD0000";
+/** 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";
+