@marioschmidt/design-system-components 1.4.1 → 1.4.3

package/dist/www/css/bundles/bild.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.4.1
+ * BILD Design System Tokens v1.4.3
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -1039,7 +1039,7 @@
 
 @media (min-width: 390px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --canvas-min-width-size: 390px;
     --canvas-max-width-size: 599px;
     --canvas-height-size-web: 844px;
@@ -1057,7 +1057,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --grid-space-resp-lg: var(--space-4-x, 32px);
     --grid-space-resp-xl: var(--space-8-x, 64px);
     --layout-guide-grid-columns: 8;
@@ -1141,7 +1141,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --grid-space-resp-base: var(--space-2-x, 16px);
     --grid-space-resp-sm: var(--space-1-x, 8px);
     --page-inline-space: var(--space-2-x, 16px);
@@ -1738,6 +1738,16 @@
 
 /* === OTHER TOKENS === */
 
+[data-color-brand="bild"] .alert-shadow-down,
+:host([data-color-brand="bild"]) .alert-shadow-down {
+  box-shadow: 0px 6px 10px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+}
+
+[data-color-brand="bild"] .alert-shadow-up,
+:host([data-color-brand="bild"]) .alert-shadow-up {
+  box-shadow: 0px -2px 10px 0px var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
+}
+
 /* === TYPOGRAPHY TOKENS === */
 
 [data-content-brand="bild"] .article-kicker,
@@ -1806,7 +1816,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --aricle-mobile-1-col-grid-image-margin-space: var(--space-9-x, 72px);
     --article-image-landscape-inline-space: var(--space-1-p-5-x, 12px);
     --article-content-inline-space: var(--space-9-x, 72px);
@@ -1821,7 +1831,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --article-headings-stack-space: var(--space-2-x, 16px);
     --article-image-landscape-inline-space: var(--space-2-x, 16px);
     --article-content-inline-space: 162px;
@@ -1852,7 +1862,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --audio-player-font-size: 18px;
   }
 }
@@ -1930,7 +1940,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --avatar-author-page-size: var(--size-16-p-25, 130px);
     --avatar-lane-gap-space: var(--space-3-x, 24px);
   }
@@ -1938,7 +1948,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --avatar-label-font-size: 18px;
     --avatar-label-line-height: 23px;
   }
@@ -2022,7 +2032,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --breadcrumb-font-size: 12px;
     --breadcrumb-inline-space: 0px;
     --breadcrumb-line-height: 12px;
@@ -2114,7 +2124,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --breaking-news-badge-upper-title-font-size: 17px;
     --breaking-news-badge-lower-title-font-size: 30px;
     --breaking-news-badge-upper-title-line-height: 12px;
@@ -2125,7 +2135,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --breaking-news-badge-inline-space: var(--size-3-p-25-x, 26px);
   }
 }
@@ -2215,7 +2225,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --partner-link-button-label-font-size: 18px;
   }
 }
@@ -2291,7 +2301,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --search-result-card-image-width-size: 260px;
   }
 }
@@ -2311,7 +2321,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --gallery-teaser-title-bottom-space: var(--space-4-p-5-x, 36px);
     --gallery-teaser-app-gap-space: var(--gap-space-const-sm);
     --app-epaper-carousel-item-focus-width: 240px;
@@ -2323,7 +2333,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --standard-teaser-gallery-teaser-width-web: 300px;
     --standard-teaser-gallery-teaser-width-app: 464px;
   }
@@ -2365,7 +2375,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --chip-font-size: var(--size-2-p-25-x, 18px);
   }
 }
@@ -2563,7 +2573,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --info-element-teaser-image-height-size: 83px;
     --info-element-teaser-image-width-size: var(--size-18-p-5-x, 148px);
   }
@@ -2571,7 +2581,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --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;
@@ -2651,7 +2661,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --hey-input-container-inline-space: var(--inline-space-const-lg);
     --input-field-label-line-height: var(--density-input-field-label-font-size);
   }
@@ -2756,7 +2766,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --live-ticker-headlines-font-size: 32px;
     --live-ticker-time-stamp-font-size: 16px;
     --live-ticker-app-card-height-size: 128px;
@@ -2766,7 +2776,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --live-ticker-slider-item-width-max-size: 537px;
   }
 }
@@ -2861,7 +2871,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --vid-player-timecode-font-size: 16px;
     --vid-player-timecode-container-min-width-size: 58px;
   }
@@ -2869,7 +2879,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --vid-player-bottom-bar-gap-space: var(--gap-space-const-lg);
     --vid-player-timecode-font-size: 18px;
     --vid-player-progress-bar-container-height-size: 42px;
@@ -2974,7 +2984,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --app-topbar-title-font-size: 14px;
     --app-topbar-stage-title-height: 17px;
     --i-osapp-top-bar-height-size: 48px;
@@ -2985,7 +2995,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --menu-logo-default-size: var(--size-18-p-5-x, 148px);
     --menu-special-navi-item-height-size: 56px;
     --menu-utility-links-container-height-size: var(--size-12-p-5-x, 100px);
@@ -3008,6 +3018,16 @@
   --app-top-bar-icon-color: var(--icon-color-secondary);
 }
 
+[data-color-brand="bild"] .menu-shadow,
+:host([data-color-brand="bild"]) .menu-shadow {
+  box-shadow: 0px 8px 10px -8px var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+}
+
+[data-color-brand="bild"] .hey-input-shadow,
+:host([data-color-brand="bild"]) .hey-input-shadow {
+  box-shadow: 0px 8px 10px -8px var(--color-neutral-0-a-0, rgba(0, 0, 0, 0));
+}
+
 /* === OTHER TOKENS === */
 
 [data-color-brand="bild"],
@@ -3068,14 +3088,14 @@
 
 @media (min-width: 390px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --news-ticker-time-font-family: var(--label-font-family);
   }
 }
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --news-ticker-titles-inline-space: var(--space-3-x, 24px);
     --news-ticker-badges-inline-space: var(--space-1-p-5-x, 12px);
     --news-ticker-time-kicker-stack-space: var(--space-0-p-75-x, 6px);
@@ -3089,7 +3109,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --news-ticker-time-font-size: 18px;
     --news-ticker-time-line-height: 23.4px;
     --news-ticker-titles-inline-space: 30px;
@@ -3148,7 +3168,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --gallery-pagination-container-web-inline-space: var(--inline-space-const-md);
     --gallery-pagination-container-stack-space: var(--stack-space-const-lg);
   }
@@ -3232,7 +3252,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --quote-quotation-marks-font-size: var(--size-4-x, 32px);
     --quote-content-gap-space: var(--gap-space-const-3-xl);
   }
@@ -3240,7 +3260,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --quote-container-inline-space: var(--space-3-p-5-x, 28px);
     --quote-quotation-marks-font-size: var(--size-4-p-5-x, 36px);
   }
@@ -3273,7 +3293,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --section-title-height-size: var(--size-5-x, 40px);
     --section-title-arrow-inline-space-active: 8px;
   }
@@ -3305,7 +3325,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --headlines-skeleton-image-placeholder-max-width: var(--size-20-x, 160px);
     --article-skeleton-image-inline-space: var(--space-6-x, 48px);
     --article-skeleton-text-inline-space: var(--space-6-x, 48px);
@@ -3363,7 +3383,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --special-navi-inline-space: var(--space-4-x, 32px);
   }
 }
@@ -3379,7 +3399,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --video-spinner-size: var(--size-10-x, 80px);
     --video-spinner-stroke-size: 4px;
     --video-spinner-size-0-5-x: 40px;
@@ -3458,14 +3478,14 @@
 
 @media (min-width: 390px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --apps-tabs-label-font-size: 12px;
   }
 }
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --android-tabbar-height-size: 74px;
     --tab-label-font-size-line: 16px;
     --apps-tabs-label-font-size: 16px;
@@ -3489,7 +3509,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --table-column-width-size-1-x: var(--size-12-x, 96px);
     --table-column-width-size-2-x: var(--size-22-p-5-x, 180px);
     --table-column-width-size-0-p-5-x: var(--size-6-x, 48px);
@@ -3502,7 +3522,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --table-column-width-size-1-x: var(--size-17-p-5-x, 140px);
     --table-column-width-size-2-x: var(--size-27-p-5-x, 220px);
     --table-column-width-size-0-p-5-x: var(--size-9-x, 72px);
@@ -3614,7 +3634,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --teaser-title-inline-left-space: var(--space-0-x, 0px);
     --teaser-title-bottom-stack-space: var(--space-2-x, 16px);
     --m-qteaser-headline-font-size: var(--headline-3-font-size);
@@ -3635,7 +3655,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --teaser-title-stack-space: var(--space-0-p-75-x, 6px);
     --teaser-badges-height-size-lg: var(--size-const-sm);
     --q-teaser-title-inline-space: var(--space-1-p-5-x, 12px);
@@ -3650,6 +3670,11 @@
   --teaser-hover-opacity: var(--layer-opacity-80);
 }
 
+[data-color-brand="bild"] .teaser-headlines-shadow,
+:host([data-color-brand="bild"]) .teaser-headlines-shadow {
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.6);
+}
+
 /* === TYPOGRAPHY TOKENS === */
 
 [data-content-brand="bild"] .app-toogle-item-label,
@@ -3671,7 +3696,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --app-toggle-item-label-font-size: 16px;
     --app-toggle-item-label-line-height: 16.2px;
   }
@@ -3679,7 +3704,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --app-toggle-item-label-font-size: 18px;
     --app-toggle-item-label-line-height: 18.2px;
   }
@@ -3703,7 +3728,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --video-time-badge-font-size: 18px;
     --video-time-badge-size: var(--size-4-x, 32px);
     --video-red-play-icon-width-size: var(--size-1-p-5-x, 12px);
@@ -3718,7 +3743,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
-:host([data-content-brand="bild"]) {
+  :host([data-content-brand="bild"]) {
     --video-time-badge-size: var(--size-5-x, 40px);
     --video-red-play-icon-width-size: var(--size-1-p-75-x, 14px);
     --video-red-play-icon-height-size: var(--size-2-p-25-x, 18px);