@marioschmidt/design-system-tokens 1.0.35 → 1.0.36

package/dist/css/brands/bild/semantic/color/colormode-dark.css

@@ -1,16 +1,18 @@
 /**
  * Do not edit directly, this file was auto-generated.
  * 
- * BILD Design System Tokens v1.0.35
+ * BILD Design System Tokens v1.0.36
  * Generated by Style Dictionary v4.0.0
  * 
+ * Brand: Bild | Context: theme: dark
+ * 
  * Copyright (c) 2024 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  * 
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
  */
 
-:root {
+[data-brand="bild"][data-theme="dark"] {
   /* ============================================
      SEMANTIC
      ============================================ */
@@ -401,273 +403,4 @@ Behavior: Constant — same opacity level across modes to preserve uniform layer
   --layer-opacity100: 100px;
   --layer-opacity00: 0px;
 
-
-  /* ============================================
-     COMPONENT
-     ============================================ */
-
-  /* Component - Subheader */
-  --subheaders-color: #E9ECEF;
-
-  /* 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
-   */
-  --breadcrumb-text-color-idle: #F2F4F5;
-  /**
-   * 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
-   */
-  --breadcrumb-text-color-hover: #FFFFFF;
-
-  /* Component - BreakingNews */
-  --breaking-news-title-surface-color: #FD8227;
-  --breaking-news-surface-color: #E9ECEF;
-  --breaking-news-text-content-color: #232629;
-  --breaking-news-top-title-text-color: #1C1C1C;
-  --breaking-news-bottom-title-text-color: #1C1C1C;
-
-  /* Component - Menu */
-  --menu-surface-color: #232629;
-  /**
-   * Used on a thin part at the top of header in navigation menu.
-   */
-  --menu-scrolled-surface-gradient-color: rgba(35, 38, 41, 0.949999988079071);
-  --menu-link-lane-surface-color: #232629;
-  --menu-link-lane-label-color: #8C9196;
-  --menu-link-lane-label-color-active: #FFFFFF;
-  --app-top-bar-surface-color: #343C41;
-  --app-top-bar-icon-color: #8C9196;
-  --app-top-bar-text-color-primary: #E9ECEF;
-  --app-tob-bar-tab-nav-bottom-border: #4B525A;
-  --app-tob-bar-tab-nav-bottom-border-active: #FFFFFF;
-
-  /* Component - PartnerLinks */
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-border-color-idle: #CED4DA;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-border-color-active: #E9ECEF;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-bg-color-idle: #343C41;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-bg-color-active: #8C9196;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-container-border-color: #4B525A;
-
-  /* Component - SocialShareButton */
-  --social-share-button-label-color-default: #FFFFFF;
-  --social-share-button-label-color-active: #FFFFFF;
-  --social-share-button-bg-color-active: #343C41;
-  --social-share-button-bg-color-default: #4B525A;
-
-  /* Component - Button - Primary */
-  --button-primary-brand-bg-color-idle: #DD0000;
-  --button-primary-brand-bg-color-hover: #AF0002;
-  --button-primary-label-color: #FFFFFF;
-  --button-primary-success-color-idle: #18995C;
-  --button-primary-success-color-hover: #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
-   */
-  --button-primary-neutral-bg-color-idle: #FFFFFF;
-  --button-primary-neutral-bg-color-hover: #E9ECEF;
-
-  /* Component - Button - Tertiary */
-  --button-tertiary-label-color: #F2F4F5;
-  --button-tertiary-border-color-idle: #4B525A;
-  --button-tertiary-border-color-hover: #FFFFFF;
-  --button-tertiary-success-bg-color-hover: rgba(0, 155, 90, 0.5);
-  --button-tertiary-success-border-color: #18995C;
-
-  /* Component - Button - Secondary */
-  --button-secondary-bg-color-hover: rgba(206, 212, 218, 0.5);
-  --button-secondary-label-color: #E9ECEF;
-  --button-secondary-bg-color-idle: #4B525A;
-
-  /* Component - Button */
-  --button-live-ticker-load-new-surface-color: #232629;
-  --button-live-ticker-load-new-label-color: #F2F4F5;
-
-  /* Component - Button - Ghost */
-  --button-ghost-bg-color-hover: rgba(206, 212, 218, 0.5);
-
-  /* Component - InputField */
-  --input-field-border-color-idle: #8C9196;
-  --input-field-border-color-active: #E9ECEF;
-  --input-field-border-color-dark: #CED4DA;
-  --input-field-border-color-dark-active: #FFFFFF;
-  --input-field-bg-color-dark-low-contrast: #343C41;
-  --input-field-bg-color-dark-medium-contrast: #4B525A;
-  --input-field-bg-color-dark-high-contrast: #E9ECEF;
-
-  /* Component - Dropdown */
-  --dropdown-bg-color-hover: #4B525A;
-  --dropdown-bg-color-idle: #343C41;
-
-  /* Component - TextLink */
-  --text-link-color-secondary: #CED4DA;
-  --text-link-color-secondary-active: #E9ECEF;
-  --text-link-color-primary: #8C9196;
-
-  /* Component - Tab */
-  --tab-bg-color-hover: #343C41;
-  --tab-label-color-active: #F2F4F5;
-  --tab-label-color-default: #FFFFFF;
-  --app-bottom-tab-bar-bg-color: #343C41;
-
-  /* Component - MenuItem */
-  --menu-item-border-color-active: #FFFFFF;
-  --menu-item-label-color-primary: #8C9196;
-  --menu-item-label-color-primary-active: #F2F4F5;
-  /**
-   * 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.
-   */
-  --menu-item-label-color-secondary: #FFFFFF;
-
-  /* Component - Foldout */
-  --foldout-label-color-active: #F2F4F5;
-  --foldout-label-color-idle: #CED4DA;
-
-  /* Component - Newsticker */
-  --news-ticker-timestamp-color: #8C9196;
-  --news-ticker-badge-icons-color: #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
-   */
-  --alert-surface-color: #343C41;
-  /**
-   * On marketing offer surfaces this variable is  used.
-   */
-  --alert-surface-color-constant: #FFFFFF;
-
-  /* Component - Empties */
-  --empties-bg-color: #343C41;
-  --empties-logo-color: #2C3138;
-
-  /* Component - Chips */
-  --chips-bg-color-hover: #CED4DA;
-  --chips-label-color-hover: #232629;
-  --chips-bg-color-active: #FFFFFF;
-  --chips-bg-color-idle: #4B525A;
-  --chips-label-color-idle: #FFFFFF;
-
-  /* Component - Card */
-  --card-surface-bg-color: #2C3138;
-
-  /* Component - Selection */
-  /**
-   * Checkboxes and Radio buttons use this variable for their border.
-   */
-  --selection-border-color: #8C9196;
-
-  /* Component - _DSysDoc */
-  /**
-   * This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages.
-   */
-  --dsys-docs-label-text-surface-color-primary-primitive-name: BILD010;
-  /**
-   * 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.
-   */
-  --dsys-docs-label-text-color-mode: (Dark Mode);
-  --ds-doc-spacing-item-bg-color: rgba(255, 255, 255, 0.20000000298023224);
-  --ds-doc-spacing-item-border-color: rgba(255, 255, 255, 0.800000011920929);
-
-  /* Component - Hey */
-  --hey-fav-input-field-surface-color: #4B525A;
-  --hey-text-color: #E9ECEF;
-  --hey-icon-util-color: #FFFFFF;
-  /**
-   * This is the most used color for separators across Bild products.
-   */
-  --hey-separator-color: #666B70;
-  --hey-drawer-surface-color: #343C41;
-
-  /* Component - Pagination */
-  --pagination-element-color-default: #8C9196;
-  --pagination-element-color-active: #FFFFFF;
-  /**
-   * Use this on gallery slider pagination elements. This can also be applied to hover states of those elements.
-   */
-  --gallery-pagination-element-active-opacity: 100px;
-  /**
-   * Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements.
-   */
-  --scroll-bar-track-bg-color: rgba(255, 255, 255, 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.
-   */
-  --scroll-bar-thumb-bg-color: #8C9196;
-
-  /* Component - Kicker - Standard */
-  --kicker-bg-color-on-surface: #8C9196;
-
-  /* Component - Kicker - Partner */
-  --kicker-fitbook-bg-color: #FF97B7;
-  --kicker-petbook-bg-color: #B9DB91;
-  --kicker-myhomebook-bg-color: #66CCCC;
-  --kicker-travelbook-bg-color: #8EF0ED;
-  --kicker-techbook-bg-color: #93E4FF;
-  --kicker-kaufberater-bg-color: #55476E;
-  --kicker-cobi-bg-color: #DC231C;
-  --kicker-aubi-bg-color: #F00000;
-  --kicker-spobi-bg-color: #174482;
-  --kicker-bz-bg-color: #E3001B;
-
-  /* Component - Teaser */
-  /**
-   * When users hover over graphical teasers the image reduces opacity to 80%.
-   */
-  --teaser-hover-opacity: 80px;
-  --teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
-  --teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
-
-  /* Component - Slider */
-  /**
-   * When users hover on gallery slider buttons the opacity changes to 90%.
-   */
-  --slider-button-opacity: 90px;
-  /**
-   * This variable is used on audio player slider bars. It references a pure white with 35% opacity.
-   */
-  --slider-track-bg-color: rgba(255, 255, 255, 0.3499999940395355);
-
-  /* Component - Mediaplayer */
-  --vid-player-controls-autoplay-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
-  /**
-   * This variable is used for hover states of video player control buttons.
-   */
-  --vid-player-control-buttons-bg-hover-color: rgba(221, 0, 0, 0.800000011920929);
-  --vid-player-control-buttons-bg-color-hover: rgba(0, 0, 0, 0.20000000298023224);
-  --vid-player-overlay-scrim-color: rgba(0, 0, 0, 0.5);
-  --audio-player-play-button-bg-color: rgba(255, 255, 255, 0.30000001192092896);
-  --vid-player-tooltip-bg-color: rgba(0, 0, 0, 0.699999988079071);
-  --vid-player-control-buttons-bg-color-pressed: rgba(0, 0, 0, 0.05000000074505806);
-  --vid-player-progress-bar-preload-bg-color: rgba(255, 255, 255, 0.30000001192092896);
-  --vid-player-unmute-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
-  --vid-player-unmute-button-bg-color-hover: rgba(0, 0, 0, 0.3499999940395355);
-
-  /* Component - Avatar */
-  /**
-   * 09-2025 css --article-author-name-color
-   */
-  --avatar-label-color: #FFFFFF;
-  /**
-   * 09-2025 css --article-author-name-color
-   */
-  --avatar-label-color-hover: #DD0000;
-
-  /* Component - Gallery */
-  --app-image-lightbox-gallery-bg-color: #000000;
-
 }

package/dist/css/brands/bild/semantic/color/colormode-light.css

@@ -1,16 +1,18 @@
 /**
  * Do not edit directly, this file was auto-generated.
  * 
- * BILD Design System Tokens v1.0.35
+ * BILD Design System Tokens v1.0.36
  * Generated by Style Dictionary v4.0.0
  * 
+ * Brand: Bild | Context: theme: light
+ * 
  * Copyright (c) 2024 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  * 
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
  */
 
-:root {
+[data-brand="bild"][data-theme="light"] {
   /* ============================================
      SEMANTIC
      ============================================ */
@@ -401,273 +403,4 @@ Behavior: Constant — same opacity level across modes to preserve uniform layer
   --layer-opacity100: 100px;
   --layer-opacity00: 0px;
 
-
-  /* ============================================
-     COMPONENT
-     ============================================ */
-
-  /* Component - Subheader */
-  --subheaders-color: #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
-   */
-  --breadcrumb-text-color-idle: #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
-   */
-  --breadcrumb-text-color-hover: #232629;
-
-  /* Component - BreakingNews */
-  --breaking-news-title-surface-color: #FD8227;
-  --breaking-news-surface-color: #232629;
-  --breaking-news-text-content-color: #FFFFFF;
-  --breaking-news-top-title-text-color: #1C1C1C;
-  --breaking-news-bottom-title-text-color: #1C1C1C;
-
-  /* Component - Menu */
-  --menu-surface-color: #FFFFFF;
-  /**
-   * Used on a thin part at the top of header in navigation menu.
-   */
-  --menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.949999988079071);
-  --menu-link-lane-surface-color: #FFFFFF;
-  --menu-link-lane-label-color: #4B525A;
-  --menu-link-lane-label-color-active: #232629;
-  --app-top-bar-surface-color: #FFFFFF;
-  --app-top-bar-icon-color: #4B525A;
-  --app-top-bar-text-color-primary: #232629;
-  --app-tob-bar-tab-nav-bottom-border: #E9ECEF;
-  --app-tob-bar-tab-nav-bottom-border-active: #DD0000;
-
-  /* Component - PartnerLinks */
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-border-color-idle: #CED4DA;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-border-color-active: #232629;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-bg-color-idle: #FFFFFF;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-bg-color-active: #E9ECEF;
-  /**
-   * !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons.
-   */
-  --partner-links-container-border-color: #CED4DA;
-
-  /* Component - SocialShareButton */
-  --social-share-button-label-color-default: #FFFFFF;
-  --social-share-button-label-color-active: #FFFFFF;
-  --social-share-button-bg-color-active: #343C41;
-  --social-share-button-bg-color-default: #4B525A;
-
-  /* Component - Button - Primary */
-  --button-primary-brand-bg-color-idle: #DD0000;
-  --button-primary-brand-bg-color-hover: #AF0002;
-  --button-primary-label-color: #FFFFFF;
-  --button-primary-success-color-idle: #18995C;
-  --button-primary-success-color-hover: #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
-   */
-  --button-primary-neutral-bg-color-idle: #232629;
-  --button-primary-neutral-bg-color-hover: #4B525A;
-
-  /* Component - Button - Tertiary */
-  --button-tertiary-label-color: #4B525A;
-  --button-tertiary-border-color-idle: #CED4DA;
-  --button-tertiary-border-color-hover: #4B525A;
-  --button-tertiary-success-bg-color-hover: #CEF4E4;
-  --button-tertiary-success-border-color: #18995C;
-
-  /* Component - Button - Secondary */
-  --button-secondary-bg-color-hover: #CED4DA;
-  --button-secondary-label-color: #4B525A;
-  --button-secondary-bg-color-idle: #E9ECEF;
-
-  /* Component - Button */
-  --button-live-ticker-load-new-surface-color: #FFFFFF;
-  --button-live-ticker-load-new-label-color: #8C9196;
-
-  /* Component - Button - Ghost */
-  --button-ghost-bg-color-hover: #CED4DA;
-
-  /* Component - InputField */
-  --input-field-border-color-idle: #CED4DA;
-  --input-field-border-color-active: #4B525A;
-  --input-field-border-color-dark: #8C9196;
-  --input-field-border-color-dark-active: #232629;
-  --input-field-bg-color-dark-low-contrast: #343C41;
-  --input-field-bg-color-dark-medium-contrast: #4B525A;
-  --input-field-bg-color-dark-high-contrast: #E9ECEF;
-
-  /* Component - Dropdown */
-  --dropdown-bg-color-hover: #F2F4F5;
-  --dropdown-bg-color-idle: #FFFFFF;
-
-  /* Component - TextLink */
-  --text-link-color-secondary: #8C9196;
-  --text-link-color-secondary-active: #232629;
-  --text-link-color-primary: #232629;
-
-  /* Component - Tab */
-  --tab-bg-color-hover: #E9ECEF;
-  --tab-label-color-active: #343C41;
-  --tab-label-color-default: #4B525A;
-  --app-bottom-tab-bar-bg-color: #FFFFFF;
-
-  /* Component - MenuItem */
-  --menu-item-border-color-active: #DD0000;
-  --menu-item-label-color-primary: #4B525A;
-  --menu-item-label-color-primary-active: #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.
-   */
-  --menu-item-label-color-secondary: #FFFFFF;
-
-  /* Component - Foldout */
-  --foldout-label-color-active: #DD0000;
-  --foldout-label-color-idle: #4B525A;
-
-  /* Component - Newsticker */
-  --news-ticker-timestamp-color: #8C9196;
-  --news-ticker-badge-icons-color: #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
-   */
-  --alert-surface-color: #FFFFFF;
-  /**
-   * On marketing offer surfaces this variable is  used.
-   */
-  --alert-surface-color-constant: #FFFFFF;
-
-  /* Component - Empties */
-  --empties-bg-color: #F2F4F5;
-  --empties-logo-color: #CED4DA;
-
-  /* Component - Chips */
-  --chips-bg-color-hover: #AF0002;
-  --chips-label-color-hover: #FFFFFF;
-  --chips-bg-color-active: #DD0000;
-  --chips-bg-color-idle: #E9ECEF;
-  --chips-label-color-idle: #232629;
-
-  /* Component - Card */
-  --card-surface-bg-color: #FFFFFF;
-
-  /* Component - Selection */
-  /**
-   * Checkboxes and Radio buttons use this variable for their border.
-   */
-  --selection-border-color: #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.
-   */
-  --dsys-docs-label-text-surface-color-primary-primitive-name: 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.
-   */
-  --dsys-docs-label-text-color-mode: (Light Mode);
-  --ds-doc-spacing-item-bg-color: rgba(221, 0, 0, 0.10000000149011612);
-  --ds-doc-spacing-item-border-color: rgba(221, 0, 0, 0.5);
-
-  /* Component - Hey */
-  --hey-fav-input-field-surface-color: #E9ECEF;
-  --hey-text-color: #4B525A;
-  --hey-icon-util-color: #4B525A;
-  /**
-   * This is the most used color for separators across Bild products.
-   */
-  --hey-separator-color: #CED4DA;
-  --hey-drawer-surface-color: #F2F4F5;
-
-  /* Component - Pagination */
-  --pagination-element-color-default: #CED4DA;
-  --pagination-element-color-active: #DD0000;
-  /**
-   * Use this on gallery slider pagination elements. This can also be applied to hover states of those elements.
-   */
-  --gallery-pagination-element-active-opacity: 100px;
-  /**
-   * Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements.
-   */
-  --scroll-bar-track-bg-color: 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.
-   */
-  --scroll-bar-thumb-bg-color: #8C9196;
-
-  /* Component - Kicker - Standard */
-  --kicker-bg-color-on-surface: #DD0000;
-
-  /* Component - Kicker - Partner */
-  --kicker-fitbook-bg-color: #FF97B7;
-  --kicker-petbook-bg-color: #B9DB91;
-  --kicker-myhomebook-bg-color: #66CCCC;
-  --kicker-travelbook-bg-color: #8EF0ED;
-  --kicker-techbook-bg-color: #93E4FF;
-  --kicker-kaufberater-bg-color: #55476E;
-  --kicker-cobi-bg-color: #DC231C;
-  --kicker-aubi-bg-color: #F00000;
-  --kicker-spobi-bg-color: #174482;
-  --kicker-bz-bg-color: #E3001B;
-
-  /* Component - Teaser */
-  /**
-   * When users hover over graphical teasers the image reduces opacity to 80%.
-   */
-  --teaser-hover-opacity: 80px;
-  --teaser-title-background-gradient-start: rgba(0, 0, 0, 0.699999988079071);
-  --teaser-title-background-gradient-stop: rgba(0, 0, 0, 0);
-
-  /* Component - Slider */
-  /**
-   * When users hover on gallery slider buttons the opacity changes to 90%.
-   */
-  --slider-button-opacity: 90px;
-  /**
-   * This variable is used on audio player slider bars. It references a pure white with 35% opacity.
-   */
-  --slider-track-bg-color: rgba(255, 255, 255, 0.3499999940395355);
-
-  /* Component - Mediaplayer */
-  --vid-player-controls-autoplay-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
-  /**
-   * This variable is used for hover states of video player control buttons.
-   */
-  --vid-player-control-buttons-bg-hover-color: rgba(221, 0, 0, 0.800000011920929);
-  --vid-player-control-buttons-bg-color-hover: rgba(0, 0, 0, 0.20000000298023224);
-  --vid-player-overlay-scrim-color: rgba(0, 0, 0, 0.5);
-  --audio-player-play-button-bg-color: rgba(255, 255, 255, 0.30000001192092896);
-  --vid-player-tooltip-bg-color: rgba(0, 0, 0, 0.699999988079071);
-  --vid-player-control-buttons-bg-color-pressed: rgba(0, 0, 0, 0.05000000074505806);
-  --vid-player-progress-bar-preload-bg-color: rgba(255, 255, 255, 0.30000001192092896);
-  --vid-player-unmute-button-bg-color: rgba(0, 0, 0, 0.20000000298023224);
-  --vid-player-unmute-button-bg-color-hover: rgba(0, 0, 0, 0.3499999940395355);
-
-  /* Component - Avatar */
-  /**
-   * 09-2025 css --article-author-name-color
-   */
-  --avatar-label-color: #232629;
-  /**
-   * 09-2025 css --article-author-name-color
-   */
-  --avatar-label-color-hover: #DD0000;
-
-  /* Component - Gallery */
-  --app-image-lightbox-gallery-bg-color: #000000;
-
 }

package/dist/css/brands/bild/semantic/effects/effects-dark.css

@@ -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.36
  * Generated by Style Dictionary v4.0.0
  * 
  * Brand: Bild | Context: Mode: dark
@@ -17,22 +17,22 @@
    ============================================ */
 
 /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-.shadowsoftsm {
+[data-brand="bild"][data-theme="dark"] .shadowsoftsm {
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.03999999910593033), 0px 2px 6px 0px rgba(0, 0, 0, 0.07999999821186066);
 }
 
 /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-.shadowsoftmd {
+[data-brand="bild"][data-theme="dark"] .shadowsoftmd {
   box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.029999999329447746), 0px 4px 12px 0px rgba(0, 0, 0, 0.07000000029802322);
 }
 
 /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-.shadowsoftlg {
+[data-brand="bild"][data-theme="dark"] .shadowsoftlg {
   box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.029999999329447746), 0px 8px 16px 0px rgba(0, 0, 0, 0.07000000029802322);
 }
 
 /* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-.shadowsoftxl {
+[data-brand="bild"][data-theme="dark"] .shadowsoftxl {
   box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05000000074505806), 0px 16px 32px 0px rgba(0, 0, 0, 0.10000000149011612);
 }
 
@@ -42,57 +42,22 @@
    ============================================ */
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-.shadowhardsm {
+[data-brand="bild"][data-theme="dark"] .shadowhardsm {
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20000000298023224), 0px 1px 3px 1px rgba(0, 0, 0, 0.10000000149011612);
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-.shadowhardmd {
+[data-brand="bild"][data-theme="dark"] .shadowhardmd {
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10000000149011612), 0px 2px 4px 0px rgba(0, 0, 0, 0.1599999964237213);
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-.shadowhardlg {
+[data-brand="bild"][data-theme="dark"] .shadowhardlg {
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.20000000298023224), 0px 6px 10px 4px rgba(0, 0, 0, 0.10000000149011612);
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-.shadowhardxl {
+[data-brand="bild"][data-theme="dark"] .shadowhardxl {
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.20000000298023224), 0px 8px 12px 6px rgba(0, 0, 0, 0.10000000149011612);
 }
 
-
-/* ============================================
-   ALERT
-   ============================================ */
-
-.alertshadowdown {
-  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.20000000298023224);
-}
-
-.alertshadowup {
-  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.20000000298023224);
-}
-
-
-/* ============================================
-   MENU
-   ============================================ */
-
-.menushadow {
-  box-shadow: 0px 8px 10px -8px rgba(0, 0, 0, 0.10000000149011612);
-}
-
-.heyinputshadow {
-  box-shadow: 0px 8px 10px -8px rgba(0, 0, 0, 0);
-}
-
-
-/* ============================================
-   TEASER
-   ============================================ */
-
-.teaserheadlinesshadow {
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6000000238418579);
-}
-