@marioschmidt/design-system-tokens 1.0.65 → 1.0.67

package/dist/css/bild/components/chip.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Chip Component Tokens
@@ -19,11 +19,11 @@
      OTHER
      ============================================ */
 
-  --chip-bg-color-hover: var(--color-bild-red35, #AF0002);
+  --chip-bg-color-hover: var(--color-bild-red-35, #AF0002);
   --chip-label-color-hover: var(--core-color-secondary-constant);
-  --chip-bg-color-active: var(--color-bild-red50, #DD0000);
-  --chip-bg-color-idle: var(--color-neutral93, #E9ECEF);
-  --chip-label-color-idle: var(--color-neutral15, #232629);
+  --chip-bg-color-active: var(--color-bild-red-50, #DD0000);
+  --chip-bg-color-idle: var(--color-neutral-93, #E9ECEF);
+  --chip-label-color-idle: var(--color-neutral-15, #232629);
 
 }
 
@@ -34,11 +34,11 @@
      OTHER
      ============================================ */
 
-  --chip-bg-color-hover: var(--color-neutral85, #CED4DA);
+  --chip-bg-color-hover: var(--color-neutral-85, #CED4DA);
   --chip-label-color-hover: var(--core-color-tertiary-constant);
-  --chip-bg-color-active: var(--color-neutral100, #FFFFFF);
-  --chip-bg-color-idle: var(--color-neutral35, #4B525A);
-  --chip-label-color-idle: var(--color-neutral100, #FFFFFF);
+  --chip-bg-color-active: var(--color-neutral-100, #FFFFFF);
+  --chip-bg-color-idle: var(--color-neutral-35, #4B525A);
+  --chip-label-color-idle: var(--color-neutral-100, #FFFFFF);
 
 }
 
@@ -48,7 +48,7 @@
   .chip-label {
     font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
     font-weight: var(--font-weight-bold, 700);
-    font-size: var(--size2x, 16px);
+    font-size: var(--size-2-x, 16px);
   }
 
 }
@@ -56,13 +56,13 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --chip-font-size: var(--size2x, 16px);
+  --chip-font-size: var(--size-2-x, 16px);
   --chip-inline-space: var(--inline-space-const-md);
   --chip-stack-space: var(--stack-space-const-sm);
 }
 
 @media (min-width: 1024px) {
   [data-brand="bild"] {
-    --chip-font-size: var(--size2p25x, 18px);
+    --chip-font-size: var(--size-2-p-25-x, 18px);
   }
 }

package/dist/css/bild/components/datepicker.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Datepicker Component Tokens

package/dist/css/bild/components/drawers.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Drawers Component Tokens

package/dist/css/bild/components/dropdown.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Dropdown Component Tokens
@@ -40,6 +40,6 @@
 
 [data-brand="bild"] {
   --drop-down-border-radius: var(--border-radius-sm);
-  --drop-down-item-stack-space: var(--space1x, 8px);
+  --drop-down-item-stack-space: var(--space-1-x, 8px);
   --drop-down-item-inline-space: var(--grid-space-resp-base);
 }

package/dist/css/bild/components/empties.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Empties Component Tokens
@@ -20,7 +20,7 @@
      ============================================ */
 
   --empties-bg-color: var(--surface-color-secondary);
-  --empties-logo-color: var(--color-neutral85, #CED4DA);
+  --empties-logo-color: var(--color-neutral-85, #CED4DA);
 
 }
 
@@ -32,6 +32,6 @@
      ============================================ */
 
   --empties-bg-color: var(--surface-color-tertiary);
-  --empties-logo-color: var(--color-neutral20, #2C3138);
+  --empties-logo-color: var(--color-neutral-20, #2C3138);
 
 }

package/dist/css/bild/components/foldout.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Foldout Component Tokens

package/dist/css/bild/components/footer.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Footer Component Tokens
@@ -18,7 +18,7 @@
   .footer-card-link {
     font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
     font-weight: var(--font-weight-book, 400);
-    font-size: var(--label2-font-size, 15px);
+    font-size: var(--label-2-font-size, 15px);
     text-decoration: underline;
   }
 

package/dist/css/bild/components/gallery.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Gallery Component Tokens
@@ -19,7 +19,7 @@
      OTHER
      ============================================ */
 
-  --app-image-lightbox-gallery-bg-color: var(--color-neutral0, #000000);
+  --app-image-lightbox-gallery-bg-color: var(--color-neutral-0, #000000);
 
 }
 
@@ -30,6 +30,6 @@
      OTHER
      ============================================ */
 
-  --app-image-lightbox-gallery-bg-color: var(--color-neutral0, #000000);
+  --app-image-lightbox-gallery-bg-color: var(--color-neutral-0, #000000);
 
 }

package/dist/css/bild/components/hey.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Hey Component Tokens
@@ -19,10 +19,10 @@
      OTHER
      ============================================ */
 
-  --hey-fav-input-field-surface-color: var(--color-neutral93, #E9ECEF);
-  --hey-text-color: var(--color-neutral35, #4B525A);
-  --hey-icon-util-color: var(--color-neutral35, #4B525A);
-  --hey-separator-color: var(--color-neutral85, #CED4DA);
+  --hey-fav-input-field-surface-color: var(--color-neutral-93, #E9ECEF);
+  --hey-text-color: var(--color-neutral-35, #4B525A);
+  --hey-icon-util-color: var(--color-neutral-35, #4B525A);
+  --hey-separator-color: var(--color-neutral-85, #CED4DA);
   --hey-drawer-surface-color: var(--surface-color-secondary);
 
 }
@@ -34,10 +34,10 @@
      OTHER
      ============================================ */
 
-  --hey-fav-input-field-surface-color: var(--color-neutral35, #4B525A);
-  --hey-text-color: var(--color-neutral93, #E9ECEF);
-  --hey-icon-util-color: var(--color-neutral100, #FFFFFF);
-  --hey-separator-color: var(--color-neutral45, #666B70);
+  --hey-fav-input-field-surface-color: var(--color-neutral-35, #4B525A);
+  --hey-text-color: var(--color-neutral-93, #E9ECEF);
+  --hey-icon-util-color: var(--color-neutral-100, #FFFFFF);
+  --hey-separator-color: var(--color-neutral-45, #666B70);
   --hey-drawer-surface-color: var(--surface-color-tertiary);
 
 }

package/dist/css/bild/components/icon.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Icon Component Tokens
@@ -15,6 +15,6 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --icon-size: var(--size-const2-xs);
+  --icon-size: var(--size-const-2-xs);
   --icon-size-embedd-media: 40px;
 }

package/dist/css/bild/components/infoelement.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: InfoElement Component Tokens
@@ -15,24 +15,24 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --info-element-teaser-badge-height-size: var(--size2x, 16px);
-  --info-element-teaser-image-height-size: var(--size10x, 80px);
-  --info-element-teaser-image-width-size: var(--size10x, 80px);
-  --info-element-teaser-badge-margin-space: var(--space0p5x, 4px);
+  --info-element-teaser-badge-height-size: var(--size-2-x, 16px);
+  --info-element-teaser-image-height-size: var(--size-10-x, 80px);
+  --info-element-teaser-image-width-size: var(--size-10-x, 80px);
+  --info-element-teaser-badge-margin-space: var(--space-0-p-5-x, 4px);
 }
 
 @media (min-width: 600px) {
   [data-brand="bild"] {
     --info-element-teaser-image-height-size: 83px;
-    --info-element-teaser-image-width-size: var(--size18p5x, 148px);
+    --info-element-teaser-image-width-size: var(--size-18-p-5-x, 148px);
   }
 }
 
 @media (min-width: 1024px) {
   [data-brand="bild"] {
-    --info-element-teaser-badge-height-size: var(--size3x, 24px);
+    --info-element-teaser-badge-height-size: var(--size-3-x, 24px);
     --info-element-teaser-image-height-size: 133px;
     --info-element-teaser-image-width-size: 236px;
-    --info-element-teaser-badge-margin-space: var(--space1x, 8px);
+    --info-element-teaser-badge-margin-space: var(--space-1-x, 8px);
   }
 }

package/dist/css/bild/components/inputfield.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: InputField Component Tokens
@@ -15,23 +15,23 @@
 /* === COLOR TOKENS (LIGHT MODE) === */
 
 [data-brand="bild"][data-theme="light"] {
-  --input-field-border-color-idle: var(--color-neutral85, #CED4DA);
-  --input-field-border-color-active: var(--color-neutral35, #4B525A);
-  --input-field-border-color-dark: var(--color-neutral60, #8C9196);
-  --input-field-bg-color-dark-low-contrast: var(--color-neutral25, #343C41);
-  --input-field-bg-color-dark-medium-contrast: var(--color-neutral35, #4B525A);
-  --input-field-bg-color-dark-high-contrast: var(--color-neutral93, #E9ECEF);
+  --input-field-border-color-idle: var(--color-neutral-85, #CED4DA);
+  --input-field-border-color-active: var(--color-neutral-35, #4B525A);
+  --input-field-border-color-dark: var(--color-neutral-60, #8C9196);
+  --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
+  --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
+  --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
 }
 
 /* === COLOR TOKENS (DARK MODE) === */
 
 [data-brand="bild"][data-theme="dark"] {
-  --input-field-border-color-idle: var(--color-neutral60, #8C9196);
-  --input-field-border-color-active: var(--color-neutral93, #E9ECEF);
-  --input-field-border-color-dark: var(--color-neutral85, #CED4DA);
-  --input-field-bg-color-dark-low-contrast: var(--color-neutral25, #343C41);
-  --input-field-bg-color-dark-medium-contrast: var(--color-neutral35, #4B525A);
-  --input-field-bg-color-dark-high-contrast: var(--color-neutral93, #E9ECEF);
+  --input-field-border-color-idle: var(--color-neutral-60, #8C9196);
+  --input-field-border-color-active: var(--color-neutral-93, #E9ECEF);
+  --input-field-border-color-dark: var(--color-neutral-85, #CED4DA);
+  --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
+  --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
+  --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
 }
 
 /* === DENSITY TOKENS === */
@@ -41,9 +41,9 @@
      OTHER
      ============================================ */
 
-  --density-input-field-inline-space: var(--space2x, 16px);
-  --density-input-field-stack-space: var(--space1x, 8px);
-  --density-input-field-height-size: var(--size5x, 40px);
+  --density-input-field-inline-space: var(--space-2-x, 16px);
+  --density-input-field-stack-space: var(--space-1-x, 8px);
+  --density-input-field-height-size: var(--size-5-x, 40px);
   --density-input-field-label-font-size: 17px;
 
 }
@@ -53,9 +53,9 @@
      OTHER
      ============================================ */
 
-  --density-input-field-inline-space: var(--space2x, 16px);
-  --density-input-field-stack-space: var(--space0p75x, 6px);
-  --density-input-field-height-size: var(--size4p5x, 36px);
+  --density-input-field-inline-space: var(--space-2-x, 16px);
+  --density-input-field-stack-space: var(--space-0-p-75-x, 6px);
+  --density-input-field-height-size: var(--size-4-p-5-x, 36px);
   --density-input-field-label-font-size: 16px;
 
 }
@@ -65,9 +65,9 @@
      OTHER
      ============================================ */
 
-  --density-input-field-inline-space: var(--space2x, 16px);
-  --density-input-field-stack-space: var(--space1p5x, 12px);
-  --density-input-field-height-size: var(--size6x, 48px);
+  --density-input-field-inline-space: var(--space-2-x, 16px);
+  --density-input-field-stack-space: var(--space-1-p-5-x, 12px);
+  --density-input-field-height-size: var(--size-6-x, 48px);
   --density-input-field-label-font-size: 19px;
 
 }
@@ -89,7 +89,7 @@
 [data-brand="bild"] {
   --input-field-stack-space: var(--density-input-field-stack-space, 6px);
   --input-field-inline-space: var(--density-input-field-inline-space, 16px);
-  --input-field-mini-label-inline-space: var(--space0p5x, 4px);
+  --input-field-mini-label-inline-space: var(--space-0-p-5-x, 4px);
   --input-field-font-size: var(--density-input-field-label-font-size, 16px);
   --input-field-imessage-inline-space: var(--inline-space-const-lg);
   --input-field-height-size: var(--density-input-field-height-size, 36px);

package/dist/css/bild/components/kicker.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Kicker Component Tokens
@@ -19,7 +19,7 @@
      STANDARD
      ============================================ */
 
-  --kicker-bg-color-on-surface: var(--color-bild-red50, #DD0000);
+  --kicker-bg-color-on-surface: var(--color-bild-red-50, #DD0000);
 
 
   /* ============================================
@@ -32,10 +32,10 @@
   --kicker-travelbook-bg-color: var(--color-partner-travelbook, #8EF0ED);
   --kicker-techbook-bg-color: var(--color-partner-techbook, #93E4FF);
   --kicker-kaufberater-bg-color: var(--color-partner-kaufberater, #55476E);
-  --kicker-cobi-bg-color: var(--color-cobi-red50, #DC231C);
-  --kicker-aubi-bg-color: var(--color-aubi-red50, #F00000);
-  --kicker-spobi-bg-color: var(--color-spobi-blue29, #174482);
-  --kicker-bz-bg-color: var(--color-bz-red50, #E3001B);
+  --kicker-cobi-bg-color: var(--color-cobi-red-50, #DC231C);
+  --kicker-aubi-bg-color: var(--color-aubi-red-50, #F00000);
+  --kicker-spobi-bg-color: var(--color-spobi-blue-29, #174482);
+  --kicker-bz-bg-color: var(--color-bz-red-50, #E3001B);
 
 }
 
@@ -46,7 +46,7 @@
      STANDARD
      ============================================ */
 
-  --kicker-bg-color-on-surface: var(--color-neutral60, #8C9196);
+  --kicker-bg-color-on-surface: var(--color-neutral-60, #8C9196);
 
 
   /* ============================================
@@ -59,9 +59,9 @@
   --kicker-travelbook-bg-color: var(--color-partner-travelbook, #8EF0ED);
   --kicker-techbook-bg-color: var(--color-partner-techbook, #93E4FF);
   --kicker-kaufberater-bg-color: var(--color-partner-kaufberater, #55476E);
-  --kicker-cobi-bg-color: var(--color-cobi-red50, #DC231C);
-  --kicker-aubi-bg-color: var(--color-aubi-red50, #F00000);
-  --kicker-spobi-bg-color: var(--color-spobi-blue29, #174482);
-  --kicker-bz-bg-color: var(--color-bz-red50, #E3001B);
+  --kicker-cobi-bg-color: var(--color-cobi-red-50, #DC231C);
+  --kicker-aubi-bg-color: var(--color-aubi-red-50, #F00000);
+  --kicker-spobi-bg-color: var(--color-spobi-blue-29, #174482);
+  --kicker-bz-bg-color: var(--color-bz-red-50, #E3001B);
 
 }

package/dist/css/bild/components/liveticker.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: LiveTicker Component Tokens
@@ -38,7 +38,7 @@
   --live-ticker-headlines-font-size: 22px;
   --time-stamp-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
   --live-ticker-time-stamp-font-size: 14px;
-  --live-ticker-time-headline-stack-space: var(--space0p5x, 4px);
+  --live-ticker-time-headline-stack-space: var(--space-0-p-5-x, 4px);
   --live-ticker-slider-item-width-max-size: 257px;
   --live-ticker-app-card-height-size: 96px;
   --live-ticker-app-card-width-size: 250px;

package/dist/css/bild/components/mediaplayer.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: MediaPlayer Component Tokens
@@ -19,16 +19,16 @@
      OTHER
      ============================================ */
 
-  --vid-player-controls-autoplay-button-bg-color: var(--alpha-black20, rgba(0, 0, 0, 0.2));
-  --vid-player-control-buttons-bg-hover-color: var(--alpha-red50a80, rgba(221, 0, 0, 0.8));
-  --vid-player-control-buttons-bg-color-hover: var(--alpha-black20, rgba(0, 0, 0, 0.2));
-  --vid-player-overlay-scrim-color: var(--alpha-black50, rgba(0, 0, 0, 0.5));
-  --audio-player-play-button-bg-color: var(--alpha-white30, rgba(255, 255, 255, 0.3));
-  --vid-player-tooltip-bg-color: var(--alpha-black70, rgba(0, 0, 0, 0.7));
-  --vid-player-control-buttons-bg-color-pressed: var(--alpha-black5, rgba(0, 0, 0, 0.05));
-  --vid-player-progress-bar-preload-bg-color: var(--alpha-white30, rgba(255, 255, 255, 0.3));
-  --vid-player-unmute-button-bg-color: var(--alpha-black20, rgba(0, 0, 0, 0.2));
-  --vid-player-unmute-button-bg-color-hover: var(--alpha-black35, rgba(0, 0, 0, 0.35));
+  --vid-player-controls-autoplay-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
+  --vid-player-control-buttons-bg-hover-color: var(--alpha-red-50-a-80, rgba(221, 0, 0, 0.8));
+  --vid-player-control-buttons-bg-color-hover: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
+  --vid-player-overlay-scrim-color: var(--alpha-black-50, rgba(0, 0, 0, 0.5));
+  --audio-player-play-button-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
+  --vid-player-tooltip-bg-color: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
+  --vid-player-control-buttons-bg-color-pressed: var(--alpha-black-5, rgba(0, 0, 0, 0.05));
+  --vid-player-progress-bar-preload-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
+  --vid-player-unmute-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
+  --vid-player-unmute-button-bg-color-hover: var(--alpha-black-35, rgba(0, 0, 0, 0.35));
 
 }
 
@@ -39,16 +39,16 @@
      OTHER
      ============================================ */
 
-  --vid-player-controls-autoplay-button-bg-color: var(--alpha-black20, rgba(0, 0, 0, 0.2));
-  --vid-player-control-buttons-bg-hover-color: var(--alpha-red50a80, rgba(221, 0, 0, 0.8));
-  --vid-player-control-buttons-bg-color-hover: var(--alpha-black20, rgba(0, 0, 0, 0.2));
-  --vid-player-overlay-scrim-color: var(--alpha-black50, rgba(0, 0, 0, 0.5));
-  --audio-player-play-button-bg-color: var(--alpha-white30, rgba(255, 255, 255, 0.3));
-  --vid-player-tooltip-bg-color: var(--alpha-black70, rgba(0, 0, 0, 0.7));
-  --vid-player-control-buttons-bg-color-pressed: var(--alpha-black5, rgba(0, 0, 0, 0.05));
-  --vid-player-progress-bar-preload-bg-color: var(--alpha-white30, rgba(255, 255, 255, 0.3));
-  --vid-player-unmute-button-bg-color: var(--alpha-black20, rgba(0, 0, 0, 0.2));
-  --vid-player-unmute-button-bg-color-hover: var(--alpha-black35, rgba(0, 0, 0, 0.35));
+  --vid-player-controls-autoplay-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
+  --vid-player-control-buttons-bg-hover-color: var(--alpha-red-50-a-80, rgba(221, 0, 0, 0.8));
+  --vid-player-control-buttons-bg-color-hover: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
+  --vid-player-overlay-scrim-color: var(--alpha-black-50, rgba(0, 0, 0, 0.5));
+  --audio-player-play-button-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
+  --vid-player-tooltip-bg-color: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
+  --vid-player-control-buttons-bg-color-pressed: var(--alpha-black-5, rgba(0, 0, 0, 0.05));
+  --vid-player-progress-bar-preload-bg-color: var(--alpha-white-30, rgba(255, 255, 255, 0.3));
+  --vid-player-unmute-button-bg-color: var(--alpha-black-20, rgba(0, 0, 0, 0.2));
+  --vid-player-unmute-button-bg-color-hover: var(--alpha-black-35, rgba(0, 0, 0, 0.35));
 
 }
 
@@ -81,12 +81,12 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --podcast-play-button-size: var(--size6x, 48px);
+  --podcast-play-button-size: var(--size-6-x, 48px);
   --vid-player-bottom-bar-gap-space: 0px;
-  --audio-player-header-stack-space: var(--size7x, 56px);
+  --audio-player-header-stack-space: var(--size-7-x, 56px);
   --video-time-badge-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
-  --vid-player-control-button-size: var(--size5p25x, 42px);
-  --vid-player-control-button-icon-size-hover: var(--size3p5x, 28px);
+  --vid-player-control-button-size: var(--size-5-p-25-x, 42px);
+  --vid-player-control-button-icon-size-hover: var(--size-3-p-5-x, 28px);
   --vid-player-timecode-font-size: 14px;
   --vid-player-timecode-container-min-width-size: 45px;
   --vid-player-progress-bar-container-height-size: 24px;