@marioschmidt/design-system-tokens 1.0.35 → 1.0.37

package/dist/js/brands/sportbild/semantic/color/colormode-light.js

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  * 
- * BILD Design System Tokens v1.0.35
+ * BILD Design System Tokens v1.0.37
  * Generated by Style Dictionary v4.0.0
  * 
  * Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -17,7 +17,7 @@
 // Semantic - Text
 /** Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds).
 Behavior: Constant — maintains identical red tone across Light and Dark mode. */
-export const textColorAccentConstant = "#DD0000";
+export const textColorAccentConstant = "#174482";
 /** Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces.
 Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds. */
 export const textColorPrimary = "#232629";
@@ -43,7 +43,7 @@ export const textColorSecondary = "#8C9196";
 Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition. */
 export const textColorAttentionHigh = "#DD0000";
 /** Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode. */
-export const textColorAccent = "#DD0000";
+export const textColorAccent = "#174482";
 /** Represents medium attention states, often used in warnings or pending states.
 Behavior: Constant — same orange tone across Light and Dark mode. */
 export const textColorAttentionMedium = "#FD8227";
@@ -57,16 +57,16 @@ Behavior: Dynamic — adapts between light and dark surface tokens to maintain l
 export const surfaceColorPrimary = "#FFFFFF";
 /** Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface. .
 Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast. */
-export const surfaceColorSecondary = "#F2F4F5";
+export const surfaceColorSecondary = "#F7F9FD";
 /** Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections).
 Behavior: Dynamic — switches between dark and light values depending on mode. */
-export const surfaceColorPrimaryInverse = "#232629";
+export const surfaceColorPrimaryInverse = "#081828";
 /** A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts).
 Behavior: Constant — remains the same in both modes. */
 export const surfaceColorPrimaryConstantLight = "#FFFFFF";
 /** A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
 Behavior: Constant — identical across Light and Dark mode. */
-export const surfaceColorPrimaryConstantDark = "#232629";
+export const surfaceColorPrimaryConstantDark = "#081828";
 /** HIghtest elevation surface color, typically used for grouping or background accents to differentiate themselves from all previous surface color options. Uses corresponding light/dark tones for consistent layering. */
 export const surfaceColorQuartenary = "#CED4DA";
 /** Success-related background used for positive notifications, confirmation surfaces, or success banners.
@@ -74,13 +74,13 @@ Behavior: Constant — remains the same across Light and Dark mode to ensure bra
 export const surfaceColorSuccess = "#CEF4E4";
 /** Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces.
 Behavior: Dynamic — switches between light and dark tertiary tones. */
-export const surfaceColorTertiary = "#E9ECEF";
+export const surfaceColorTertiary = "#BDCADB";
 /** Represents tertiary-level gradient background.
 Currently used on skeletons. */
 export const surfaceColorTertiaryGradientStop = "rgba(233, 236, 239, 0)";
 /** Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards).
 Behavior: Dynamic — swaps values between modes for contrast preservation. */
-export const surfaceColorTertiaryInverse = "#343C41";
+export const surfaceColorTertiaryInverse = "#174482";
 /** Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode. */
 export const surfaceColorPrimaryGradientStop = "rgba(255, 255, 255, 0)";
 /** Used for secondary surface gradients or subtle depth layers across backgrounds.
@@ -93,10 +93,10 @@ export const surfaceColorQuartenaryInverse = "#4B525A";
 // Semantic - Heading
 /** Used for kicker text and category labels placed directly on standard surface backgrounds.
 Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes. */
-export const kickerTextColorOnSurface = "#DD0000";
+export const kickerTextColorOnSurface = "#8C9196";
 /** Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition.
 Behavior: Dynamic — dark text in Light mode, light text in Dark mode. */
-export const headlineColorPrimary = "#232629";
+export const headlineColorPrimary = "#0A2750";
 /** Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes.
 Behavior: Constant — remains white in both Light and Dark mode. */
 export const headlineColorWhiteConst = "#FFFFFF";
@@ -116,7 +116,7 @@ Behavior: Dynamic — light gray in Light mode and bright gray in Dark mode to m
 export const colorSecondaryActive = "#232629";
 /** Used to represent the active or pressed state of primary actions such as tabs or links.
 Behavior: Constant — identical value across modes for consistent interaction feedback. */
-export const colorPrimaryActive = "#DD0000";
+export const colorPrimaryActive = "#174482";
 /** Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
 Behavior: Dynamic — adapts neutral tones based on theme brightness. */
 export const colorSecondaryDisabled = "#E9ECEF";
@@ -158,15 +158,15 @@ export const borderColorSecondaryDisabled = "#E9ECEF";
 
 // Semantic - Core
 /** Used as the main brand color for key interactive elements such as primary buttons, active states, and prominent highlights. It remains constant across Light and Dark Mode. */
-export const coreColorPrimary = "#DD0000";
+export const coreColorPrimary = "#0A2750";
 /** Defines the secondary brand tone. This variable changes across Light and Dark Mode. */
 export const coreColorSecondary = "#FFFFFF";
 /** Represents tertiary brand accents. This variable changes across Light and Dark Mode. */
-export const coreColorTertiary = "#232629";
+export const coreColorTertiary = "#081828";
 /** Use this on elements that must maintain the white color even in dark mode. */
 export const coreColorSecondaryConstant = "#FFFFFF";
 /** Use this on elements that need to maintain the dark color across themes and color modes. */
-export const coreColorTertiaryConstant = "#232629";
+export const coreColorTertiaryConstant = "#081828";
 /** this is a test for the token pipeline */
 export const pipeTestRenaming = "#476D93";
 
@@ -215,13 +215,13 @@ export const labelColorPrimaryInverse = "#E9ECEF";
 /** High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition. */
 export const attentionColorHigh = "#DD0000";
 /** Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone. */
-export const accentColorPrimary = "#DD0000";
+export const accentColorPrimary = "#174482";
 /** Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. */
 export const attentionColorMedium = "#FD8227";
 /** Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition. */
 export const attentionColorLow = "#FFBF00";
 /** Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode. */
-export const accentColorPrimaryConstant = "#DD0000";
+export const accentColorPrimaryConstant = "#174482";
 /** Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency. */
 export const attentionColorSuccessPrimary = "#00C373";
 /** Very low-contrast background tone used for information or system-neutral surfaces, often for tooltips or quiet information highlights. Dynamic — light neutral in Light mode and dark neutral in Dark mode. */
@@ -250,222 +250,3 @@ export const layerOpacity90 = "90px";
 export const layerOpacity100 = "100px";
 export const layerOpacity00 = "0px";
 
-
-// ============================================
-// COMPONENT
-// ============================================
-
-// Component - Subheader
-export const subheadersColor = "#232629";
-
-// Component - Breadcrumb
-/** Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096 */
-export const breadcrumbTextColorIdle = "#4B525A";
-/** Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100 */
-export const breadcrumbTextColorHover = "#232629";
-
-// Component - BreakingNews
-export const breakingNewsTitleSurfaceColor = "#FD8227";
-export const breakingNewsSurfaceColor = "#232629";
-export const breakingNewsTextContentColor = "#FFFFFF";
-export const breakingNewsTopTitleTextColor = "#1C1C1C";
-export const breakingNewsBottomTitleTextColor = "#1C1C1C";
-
-// Component - Menu
-export const menuSurfaceColor = "#FFFFFF";
-/** Used on a thin part at the top of header in navigation menu. */
-export const menuScrolledSurfaceGradientColor = "rgba(255, 255, 255, 0.949999988079071)";
-export const menuLinkLaneSurfaceColor = "#FFFFFF";
-export const menuLinkLaneLabelColor = "#4B525A";
-export const menuLinkLaneLabelColorActive = "#232629";
-export const appTopBarSurfaceColor = "#FFFFFF";
-export const appTopBarIconColor = "#4B525A";
-export const appTopBarTextColorPrimary = "#232629";
-export const appTobBarTabNavBottomBorder = "#E9ECEF";
-export const appTobBarTabNavBottomBorderActive = "#DD0000";
-
-// Component - PartnerLinks
-/** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-export const partnerLinksBorderColorIdle = "#CED4DA";
-/** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-export const partnerLinksBorderColorActive = "#232629";
-/** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-export const partnerLinksBgColorIdle = "#FFFFFF";
-/** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-export const partnerLinksBgColorActive = "#E9ECEF";
-/** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
-export const partnerLinksContainerBorderColor = "#CED4DA";
-
-// Component - SocialShareButton
-export const socialShareButtonLabelColorDefault = "#FFFFFF";
-export const socialShareButtonLabelColorActive = "#FFFFFF";
-export const socialShareButtonBgColorActive = "#343C41";
-export const socialShareButtonBgColorDefault = "#4B525A";
-
-// Component - Button - Primary
-export const buttonPrimaryBrandBgColorIdle = "#DD0000";
-export const buttonPrimaryBrandBgColorHover = "#AF0002";
-export const buttonPrimaryLabelColor = "#FFFFFF";
-export const buttonPrimarySuccessColorIdle = "#18995C";
-export const buttonPrimarySuccessColorHover = "#006E3E";
-/** Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100 */
-export const buttonPrimaryNeutralBgColorIdle = "#232629";
-export const buttonPrimaryNeutralBgColorHover = "#4B525A";
-
-// Component - Button - Tertiary
-export const buttonTertiaryLabelColor = "#4B525A";
-export const buttonTertiaryBorderColorIdle = "#CED4DA";
-export const buttonTertiaryBorderColorHover = "#4B525A";
-export const buttonTertiarySuccessBgColorHover = "#CEF4E4";
-export const buttonTertiarySuccessBorderColor = "#18995C";
-
-// Component - Button - Secondary
-export const buttonSecondaryBgColorHover = "#CED4DA";
-export const buttonSecondaryLabelColor = "#4B525A";
-export const buttonSecondaryBgColorIdle = "#E9ECEF";
-
-// Component - Button
-export const buttonLiveTickerLoadNewSurfaceColor = "#FFFFFF";
-export const buttonLiveTickerLoadNewLabelColor = "#8C9196";
-
-// Component - Button - Ghost
-export const buttonGhostBgColorHover = "#CED4DA";
-
-// Component - InputField
-export const inputFieldBorderColorIdle = "#CED4DA";
-export const inputFieldBorderColorActive = "#4B525A";
-export const inputFieldBorderColorDark = "#8C9196";
-export const inputFieldBorderColorDarkActive = "#232629";
-export const inputFieldBgColorDarkLowContrast = "#343C41";
-export const inputFieldBgColorDarkMediumContrast = "#4B525A";
-export const inputFieldBgColorDarkHighContrast = "#E9ECEF";
-
-// Component - Dropdown
-export const dropdownBgColorHover = "#F2F4F5";
-export const dropdownBgColorIdle = "#FFFFFF";
-
-// Component - TextLink
-export const textLinkColorSecondary = "#8C9196";
-export const textLinkColorSecondaryActive = "#232629";
-export const textLinkColorPrimary = "#232629";
-
-// Component - Tab
-export const tabBgColorHover = "#E9ECEF";
-export const tabLabelColorActive = "#343C41";
-export const tabLabelColorDefault = "#4B525A";
-export const appBottomTabBarBgColor = "#FFFFFF";
-
-// Component - MenuItem
-export const menuItemBorderColorActive = "#DD0000";
-export const menuItemLabelColorPrimary = "#4B525A";
-export const menuItemLabelColorPrimaryActive = "#232629";
-/** The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes. */
-export const menuItemLabelColorSecondary = "#FFFFFF";
-
-// Component - Foldout
-export const foldoutLabelColorActive = "#DD0000";
-export const foldoutLabelColorIdle = "#4B525A";
-
-// Component - Newsticker
-export const newsTickerTimestampColor = "#8C9196";
-export const newsTickerBadgeIconsColor = "#8C9196";
-
-// Component - Alert
-/** On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025 */
-export const alertSurfaceColor = "#FFFFFF";
-/** On marketing offer surfaces this variable is  used. */
-export const alertSurfaceColorConstant = "#FFFFFF";
-
-// Component - Empties
-export const emptiesBgColor = "#F2F4F5";
-export const emptiesLogoColor = "#CED4DA";
-
-// Component - Chips
-export const chipsBgColorHover = "#AF0002";
-export const chipsLabelColorHover = "#FFFFFF";
-export const chipsBgColorActive = "#DD0000";
-export const chipsBgColorIdle = "#E9ECEF";
-export const chipsLabelColorIdle = "#232629";
-
-// Component - Card
-export const cardSurfaceBgColor = "#FFFFFF";
-
-// Component - Selection
-/** Checkboxes and Radio buttons use this variable for their border. */
-export const selectionBorderColor = "#4B525A";
-
-// Component - _DSysDoc
-/** This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages. */
-export const dsysDocsLabelTextSurfaceColorPrimaryPrimitiveName = "BILD100";
-/** This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts. */
-export const dsysDocsLabelTextColorMode = "(Light Mode)";
-export const dsDocSpacingItemBgColor = "rgba(221, 0, 0, 0.10000000149011612)";
-export const dsDocSpacingItemBorderColor = "rgba(221, 0, 0, 0.5)";
-
-// Component - Hey
-export const heyFavInputFieldSurfaceColor = "#E9ECEF";
-export const heyTextColor = "#4B525A";
-export const heyIconUtilColor = "#4B525A";
-/** This is the most used color for separators across Bild products. */
-export const heySeparatorColor = "#CED4DA";
-export const heyDrawerSurfaceColor = "#F2F4F5";
-
-// Component - Pagination
-export const paginationElementColorDefault = "#CED4DA";
-export const paginationElementColorActive = "#DD0000";
-/** Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. */
-export const galleryPaginationElementActiveOpacity = "100px";
-/** Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements. */
-export const scrollBarTrackBgColor = "rgba(0, 0, 0, 0.10000000149011612)";
-/** Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space. */
-export const scrollBarThumbBgColor = "#8C9196";
-
-// Component - Kicker - Standard
-export const kickerBgColorOnSurface = "#DD0000";
-
-// Component - Kicker - Partner
-export const kickerFitbookBgColor = "#FF97B7";
-export const kickerPetbookBgColor = "#B9DB91";
-export const kickerMyhomebookBgColor = "#66CCCC";
-export const kickerTravelbookBgColor = "#8EF0ED";
-export const kickerTechbookBgColor = "#93E4FF";
-export const kickerKaufberaterBgColor = "#55476E";
-export const kickerCobiBgColor = "#DC231C";
-export const kickerAubiBgColor = "#F00000";
-export const kickerSpobiBgColor = "#174482";
-export const kickerBzBgColor = "#E3001B";
-
-// Component - Teaser
-/** When users hover over graphical teasers the image reduces opacity to 80%. */
-export const teaserHoverOpacity = "80px";
-export const teaserTitleBackgroundGradientStart = "rgba(0, 0, 0, 0.699999988079071)";
-export const teaserTitleBackgroundGradientStop = "rgba(0, 0, 0, 0)";
-
-// Component - Slider
-/** When users hover on gallery slider buttons the opacity changes to 90%. */
-export const sliderButtonOpacity = "90px";
-/** This variable is used on audio player slider bars. It references a pure white with 35% opacity. */
-export const sliderTrackBgColor = "rgba(255, 255, 255, 0.3499999940395355)";
-
-// Component - Mediaplayer
-export const vidPlayerControlsAutoplayButtonBgColor = "rgba(0, 0, 0, 0.20000000298023224)";
-/** This variable is used for hover states of video player control buttons. */
-export const vidPlayerControlButtonsBgHoverColor = "rgba(221, 0, 0, 0.800000011920929)";
-export const vidPlayerControlButtonsBgColorHover = "rgba(0, 0, 0, 0.20000000298023224)";
-export const vidPlayerOverlayScrimColor = "rgba(0, 0, 0, 0.5)";
-export const audioPlayerPlayButtonBgColor = "rgba(255, 255, 255, 0.30000001192092896)";
-export const vidPlayerTooltipBgColor = "rgba(0, 0, 0, 0.699999988079071)";
-export const vidPlayerControlButtonsBgColorPressed = "rgba(0, 0, 0, 0.05000000074505806)";
-export const vidPlayerProgressBarPreloadBgColor = "rgba(255, 255, 255, 0.30000001192092896)";
-export const vidPlayerUnmuteButtonBgColor = "rgba(0, 0, 0, 0.20000000298023224)";
-export const vidPlayerUnmuteButtonBgColorHover = "rgba(0, 0, 0, 0.3499999940395355)";
-
-// Component - Avatar
-/** 09-2025 css --article-author-name-color */
-export const avatarLabelColor = "#232629";
-/** 09-2025 css --article-author-name-color */
-export const avatarLabelColorHover = "#DD0000";
-
-// Component - Gallery
-export const appImageLightboxGalleryBgColor = "#000000";
-

package/dist/js/brands/sportbild/semantic/effects/effects-dark.js

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  * 
- * BILD Design System Tokens v1.0.35
+ * BILD Design System Tokens v1.0.37
  * Generated by Style Dictionary v4.0.0
  * 
  * Brand: Sportbild | Context: Mode: dark
@@ -159,66 +159,3 @@ export const shadowhardxl = [
   }
 ];
 
-
-// ============================================
-// ALERT
-// ============================================
-
-export const alertshadowdown = [
-  {
-    offsetX: 0,
-    offsetY: 6,
-    radius: 10,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.20000000298023224)"
-  }
-];
-export const alertshadowup = [
-  {
-    offsetX: 0,
-    offsetY: -2,
-    radius: 10,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.20000000298023224)"
-  }
-];
-
-
-// ============================================
-// MENU
-// ============================================
-
-export const menushadow = [
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 10,
-    spread: -8,
-    color: "rgba(0, 0, 0, 0.10000000149011612)"
-  }
-];
-export const heyinputshadow = [
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 10,
-    spread: -8,
-    color: "rgba(0, 0, 0, 0)"
-  }
-];
-
-
-// ============================================
-// TEASER
-// ============================================
-
-export const teaserheadlinesshadow = [
-  {
-    offsetX: 0,
-    offsetY: 2,
-    radius: 8,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.6000000238418579)"
-  }
-];
-

package/dist/js/brands/sportbild/semantic/effects/effects-light.js

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  * 
- * BILD Design System Tokens v1.0.35
+ * BILD Design System Tokens v1.0.37
  * Generated by Style Dictionary v4.0.0
  * 
  * Brand: Sportbild | Context: Mode: light
@@ -159,66 +159,3 @@ export const shadowhardxl = [
   }
 ];
 
-
-// ============================================
-// ALERT
-// ============================================
-
-export const alertshadowdown = [
-  {
-    offsetX: 0,
-    offsetY: 6,
-    radius: 10,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.20000000298023224)"
-  }
-];
-export const alertshadowup = [
-  {
-    offsetX: 0,
-    offsetY: -2,
-    radius: 10,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.20000000298023224)"
-  }
-];
-
-
-// ============================================
-// MENU
-// ============================================
-
-export const menushadow = [
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 10,
-    spread: -8,
-    color: "rgba(0, 0, 0, 0.10000000149011612)"
-  }
-];
-export const heyinputshadow = [
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 10,
-    spread: -8,
-    color: "rgba(0, 0, 0, 0)"
-  }
-];
-
-
-// ============================================
-// TEASER
-// ============================================
-
-export const teaserheadlinesshadow = [
-  {
-    offsetX: 0,
-    offsetY: 2,
-    radius: 8,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.6000000238418579)"
-  }
-];
-