@marioschmidt/design-system-components 1.4.1 → 1.4.3

package/dist/www/css/bild/components/tab.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: Tab Component Tokens
@@ -77,14 +77,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;

package/dist/www/css/bild/components/table.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: Table Component Tokens
@@ -28,7 +28,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);
@@ -41,7 +41,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);

package/dist/www/css/bild/components/teaser.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: Teaser Component Tokens
@@ -115,7 +115,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);
@@ -136,7 +136,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);
@@ -150,3 +150,8 @@
 :host([data-color-brand="bild"]) {
   --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);
+}

package/dist/www/css/bild/components/toggleswitch.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: ToggleSwitch Component Tokens
@@ -33,7 +33,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;
   }
@@ -41,7 +41,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;
   }

package/dist/www/css/bild/components/video.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: Video Component Tokens
@@ -30,7 +30,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);
@@ -45,7 +45,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);

package/dist/www/css/bild/theme.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: Theme (Color tokens + Effects for light/dark mode)

package/dist/www/css/bild/tokens.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: Tokens (Responsive breakpoints + Typography + Density)
@@ -209,7 +209,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;
@@ -227,7 +227,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;
@@ -311,7 +311,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);

package/dist/www/css/bundles/advertorial.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: Advertorial | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -573,7 +573,7 @@
 
 @media (min-width: 390px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --canvas-min-width-size: 390px;
     --canvas-max-width-size: 599px;
     --canvas-height-size-web: 844px;
@@ -591,7 +591,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --grid-space-resp-lg: var(--space-4-x, 32px);
     --grid-space-resp-xl: var(--space-8-x, 64px);
     --layout-guide-grid-columns: 8;
@@ -669,7 +669,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -1330,7 +1330,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -1343,7 +1343,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --article-headings-stack-space: var(--space-2-x, 16px);
     --article-image-landscape-inline-space: var(--space-2-x, 16px);
     --article-content-inline-space: 162px;
@@ -1376,7 +1376,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --audio-player-font-size: 18px;
   }
 }
@@ -1440,7 +1440,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --avatar-author-page-size: var(--size-16-p-25, 130px);
     --avatar-lane-gap-space: var(--space-3-x, 24px);
   }
@@ -1448,7 +1448,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --avatar-label-font-size: 15px;
     --avatar-label-line-height: 23px;
   }
@@ -1525,7 +1525,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --breadcrumb-font-size: 12px;
     --breadcrumb-inline-space: 0px;
     --breadcrumb-line-height: 12px;
@@ -1577,7 +1577,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --breaking-news-badge-upper-title-font-size: 17px;
     --breaking-news-badge-lower-title-font-size: 30px;
     --breaking-news-badge-upper-title-line-height: 12px;
@@ -1588,7 +1588,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --breaking-news-badge-inline-space: var(--size-3-p-25-x, 26px);
   }
 }
@@ -1678,7 +1678,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --partner-link-button-label-font-size: 18px;
   }
 }
@@ -1694,7 +1694,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --search-result-card-image-width-size: 260px;
   }
 }
@@ -1714,7 +1714,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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;
@@ -1726,7 +1726,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --standard-teaser-gallery-teaser-width-web: 300px;
     --standard-teaser-gallery-teaser-width-app: 464px;
   }
@@ -1752,7 +1752,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --chip-font-size: var(--size-2-p-25-x, 18px);
   }
 }
@@ -1864,7 +1864,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --info-element-teaser-image-height-size: 83px;
     --info-element-teaser-image-width-size: var(--size-18-p-5-x, 148px);
   }
@@ -1872,7 +1872,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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;
@@ -1952,7 +1952,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --hey-input-container-inline-space: var(--inline-space-const-lg);
     --input-field-label-line-height: var(--density-input-field-label-font-size);
   }
@@ -1992,7 +1992,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --live-ticker-headlines-font-size: 32px;
     --live-ticker-time-stamp-font-size: 16px;
     --live-ticker-app-card-height-size: 128px;
@@ -2002,7 +2002,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --live-ticker-slider-item-width-max-size: 537px;
   }
 }
@@ -2051,7 +2051,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --vid-player-timecode-font-size: 16px;
     --vid-player-timecode-container-min-width-size: 58px;
   }
@@ -2059,7 +2059,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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;
@@ -2136,7 +2136,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --app-topbar-title-font-size: 14px;
     --app-topbar-stage-title-height: 17px;
     --i-osapp-top-bar-height-size: 48px;
@@ -2147,7 +2147,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2213,14 +2213,14 @@
 
 @media (min-width: 390px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --news-ticker-time-font-family: var(--label-font-family);
   }
 }
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2234,7 +2234,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --news-ticker-time-font-size: 18px;
     --news-ticker-time-line-height: 23.4px;
     --news-ticker-titles-inline-space: 30px;
@@ -2269,7 +2269,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --gallery-pagination-container-web-inline-space: var(--inline-space-const-md);
     --gallery-pagination-container-stack-space: var(--stack-space-const-lg);
   }
@@ -2320,7 +2320,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --quote-quotation-marks-font-size: var(--size-4-x, 32px);
     --quote-content-gap-space: var(--gap-space-const-3-xl);
   }
@@ -2328,7 +2328,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --quote-container-inline-space: var(--space-3-p-5-x, 28px);
     --quote-quotation-marks-font-size: var(--size-4-p-5-x, 36px);
   }
@@ -2361,7 +2361,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --section-title-height-size: var(--size-5-x, 40px);
     --section-title-arrow-inline-space-active: 8px;
   }
@@ -2386,7 +2386,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2423,7 +2423,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --special-navi-inline-space: var(--space-4-x, 32px);
   }
 }
@@ -2439,7 +2439,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --video-spinner-size: var(--size-10-x, 80px);
     --video-spinner-stroke-size: 4px;
     --video-spinner-size-0-5-x: 40px;
@@ -2487,14 +2487,14 @@
 
 @media (min-width: 390px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --apps-tabs-label-font-size: 12px;
   }
 }
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --android-tabbar-height-size: 74px;
     --tab-label-font-size-line: 16px;
     --apps-tabs-label-font-size: 16px;
@@ -2518,7 +2518,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2531,7 +2531,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2627,7 +2627,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2648,7 +2648,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2677,7 +2677,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --app-toggle-item-label-font-size: 16px;
     --app-toggle-item-label-line-height: 16.2px;
   }
@@ -2685,7 +2685,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --app-toggle-item-label-font-size: 18px;
     --app-toggle-item-label-line-height: 18.2px;
   }
@@ -2709,7 +2709,7 @@
 
 @media (min-width: 600px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);
@@ -2724,7 +2724,7 @@
 
 @media (min-width: 1024px) {
   [data-content-brand="advertorial"],
-:host([data-content-brand="advertorial"]) {
+  :host([data-content-brand="advertorial"]) {
     --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);