@marioschmidt/design-system-components 1.5.0 → 1.7.0

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.5.0
+ * BILD Design System Tokens v1.7.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Teaser Component Tokens
@@ -34,16 +34,16 @@
 :host([data-content-brand="bild"]) .a-teaser-a-teaser-kicker {
   font-family: var(--kicker-font-family);
   font-weight: 700;
-  font-size: var(--kicker-3-font-size);
-  line-height: var(--kicker-3-font-size);
+  font-size: var(--a-teaser-kicker-font-size);
+  line-height: var(--a-teaser-kicker-line-height);
 }
 
 [data-content-brand="bild"] .a-teaser-a-teaser-headline,
 :host([data-content-brand="bild"]) .a-teaser-a-teaser-headline {
   font-family: var(--headline-font-family);
   font-weight: 900;
-  font-size: var(--headline-3-font-size);
-  line-height: var(--headline-3-font-size);
+  font-size: var(--a-teaser-headline-font-size);
+  line-height: var(--a-teaser-headline-line-height);
 }
 
 [data-content-brand="bild"] .m-qteaser-m-qteaser-kicker,
@@ -58,16 +58,16 @@
 :host([data-content-brand="bild"]) .m-qteaser-m-qteaser-headline {
   font-family: var(--headline-font-family);
   font-weight: 900;
-  font-size: var(--headline-4-font-size);
-  line-height: var(--headline-4-line-height);
+  font-size: var(--m-qteaser-headline-font-size);
+  line-height: var(--m-qteaser-headline-line-height);
 }
 
 [data-content-brand="bild"] .q-teaser-q-teaser-headline,
 :host([data-content-brand="bild"]) .q-teaser-q-teaser-headline {
   font-family: var(--headline-font-family);
   font-weight: 900;
-  font-size: var(--headline-1-font-size);
-  line-height: var(--headline-1-line-height);
+  font-size: var(--quad-headline-font-size);
+  line-height: var(--quad-headline-line-height);
 }
 
 [data-content-brand="bild"] .std-teaser-std-teaser-headline,

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.5.0
+ * BILD Design System Tokens v1.7.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: ToggleSwitch Component Tokens
@@ -18,8 +18,8 @@
 :host([data-content-brand="bild"]) .app-toogle-item-label {
   font-family: var(--title-font-family);
   font-weight: var(--title-font-weight);
-  font-size: 14px;
-  line-height: 14.1px;
+  font-size: var(--app-toggle-item-label-font-size);
+  line-height: var(--app-toggle-item-label-line-height);
   text-transform: uppercase;
 }
 
@@ -28,14 +28,13 @@
 [data-content-brand="bild"],
 :host([data-content-brand="bild"]) {
   --app-toggle-item-label-font-size: 14px;
-  --app-toggle-item-label-line-height: 14.1px;
+  --app-toggle-item-label-line-height: 1.01;
 }
 
 @media (min-width: 600px) {
   [data-content-brand="bild"],
   :host([data-content-brand="bild"]) {
     --app-toggle-item-label-font-size: 16px;
-    --app-toggle-item-label-line-height: 16.2px;
   }
 }
 
@@ -43,6 +42,5 @@
   [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.5.0
+ * BILD Design System Tokens v1.7.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Video Component Tokens
@@ -21,7 +21,7 @@
   --video-time-badge-size: var(--size-3-x, 24px);
   --video-red-play-icon-width-size: var(--size-1-x, 8px);
   --video-red-play-icon-height-size: var(--size-1-p-25-x, 10px);
-  --video-badge-time-line-height: 21px;
+  --video-badge-time-line-height: 1.31;
   --video-skeleton-container-height: 180px;
   --video-frame-inline-space: 0px;
   --vertical-video-mock-headline-font-size: 22px;
@@ -35,7 +35,7 @@
     --video-time-badge-size: var(--size-4-x, 32px);
     --video-red-play-icon-width-size: var(--size-1-p-5-x, 12px);
     --video-red-play-icon-height-size: var(--size-1-p-75-x, 14px);
-    --video-badge-time-line-height: 23.8px;
+    --video-badge-time-line-height: 1.32;
     --video-skeleton-container-height: 464px;
     --video-frame-inline-space: var(--grid-space-resp-base);
     --vertical-video-mock-headline-font-size: 32px;

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.5.0
+ * BILD Design System Tokens v1.7.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Theme (Color tokens + Effects for light/dark mode)
@@ -197,7 +197,7 @@
   --shadow-color-soft-ambient-md: var(--color-neutral-0-a-3, rgba(0, 0, 0, 0.03));
   --shadow-color-soft-ambient-lg: var(--color-neutral-0-a-3, rgba(0, 0, 0, 0.03));
   --shadow-color-soft-ambient-xl: var(--color-neutral-0-a-5, rgba(0, 0, 0, 0.05));
-  --shadow-color-soft-keyt-xl: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
+  --shadow-color-soft-key-xl: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
   --shadow-color-soft-key-sm: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
   --shadow-color-soft-key-md: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
   --shadow-color-soft-key-lg: var(--color-neutral-0-a-7, rgba(0, 0, 0, 0.07));
@@ -393,7 +393,7 @@
   --shadow-color-soft-ambient-md: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
   --shadow-color-soft-ambient-lg: var(--color-neutral-0-a-10, rgba(0, 0, 0, 0.1));
   --shadow-color-soft-ambient-xl: var(--color-neutral-0-a-15, rgba(0, 0, 0, 0.15));
-  --shadow-color-soft-keyt-xl: var(--color-neutral-0-a-30, rgba(0, 0, 0, 0.3));
+  --shadow-color-soft-key-xl: var(--color-neutral-0-a-30, rgba(0, 0, 0, 0.3));
   --shadow-color-soft-key-sm: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
   --shadow-color-soft-key-md: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
   --shadow-color-soft-key-lg: var(--color-neutral-0-a-20, rgba(0, 0, 0, 0.2));
@@ -410,11 +410,11 @@
 :host([data-color-brand="bild"]) {
   --shadow-soft-sm: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-soft-key-sm), var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-sm);
   --shadow-soft-md: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-1-p-5-x, 12px) var(--size-0-x, 0px) var(--shadow-color-soft-key-md), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-2-x, 16px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-md);
-  --shadow-soft-lg: 0px 8px 16px 0px var(--shadow-color-soft-key-lg), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-3-x, 24px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-lg);
-  --shadow-soft-xl: var(--size-0-x, 0px) var(--size-2-x, 16px) var(--size-4-x, 32px) var(--size-0-x, 0px) var(--shadow-color-soft-keyt-xl), var(--size-0-x, 0px) var(--size-0-x, 0px) var(--size-8-x, 64px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-xl);
+  --shadow-soft-lg: var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-2-x, 16px) var(--size-0-x, 0px) var(--shadow-color-soft-key-lg), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-3-x, 24px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-lg);
+  --shadow-soft-xl: var(--size-0-x, 0px) var(--size-2-x, 16px) var(--size-4-x, 32px) var(--size-0-x, 0px) var(--shadow-color-soft-key-xl), var(--size-0-x, 0px) var(--size-0-x, 0px) var(--size-8-x, 64px) var(--size-0-x, 0px) var(--shadow-color-soft-ambient-xl);
   --shadow-hard-sm: var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-25-x, 2px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-125-x, 1px) var(--size-0-p-5-x, 4px) var(--size-0-p-125-x, 1px) var(--shadow-color-hard-ambient);
-  --shadow-hard-md: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-1-x, 8px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-ambient);
-  --shadow-hard-lg: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-75-x, 6px) var(--size-1-p-5-x, 12px) var(--size-0-p-5-x, 4px) var(--shadow-color-hard-ambient);
+  --shadow-hard-md: var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-25-x, 2px) var(--size-1-x, 8px) var(--size-0-x, 0px) var(--shadow-color-hard-ambient);
+  --shadow-hard-lg: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-0-p-75-x, 6px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-0-p-75-x, 6px) var(--size-1-p-5-x, 12px) var(--size-0-p-5-x, 4px) var(--shadow-color-hard-ambient);
   --shadow-hard-xl: var(--size-0-x, 0px) var(--size-0-p-5-x, 4px) var(--size-0-p-5-x, 4px) var(--size-0-x, 0px) var(--shadow-color-hard-key), var(--size-0-x, 0px) var(--size-1-x, 8px) var(--size-1-p-5-x, 12px) var(--size-0-p-75-x, 6px) var(--shadow-color-hard-ambient);
 }
 

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.5.0
+ * BILD Design System Tokens v1.7.0
  * Generated by Style Dictionary v5.1.4
  *
  * Brand: Bild | Bundle: Tokens (Responsive breakpoints + Typography + Density)
@@ -38,7 +38,7 @@
   --content-max-width-full: 1024px;
   --title-1-font-size: 22px;
   --title-2-font-size: var(--font-size-2-x, 16px);
-  --display-1-font-size: 40px;
+  --display-1-font-size: var(--font-size-5-x, 40px);
   --display-2-font-size: 36px;
   --display-3-font-size: 28px;
   --headline-1-font-size: 48px;
@@ -92,28 +92,28 @@
   --quote-font-weight: var(--font-weight-black, 800);
   --footnote-font-weight-book: var(--font-weight-book, 400);
   --footnote-font-weight-bold: var(--font-weight-bold, 700);
-  --body-line-height: 28px;
-  --kicker-4-line-height: 15.4px;
-  --kicker-3-line-height: 17.6px;
-  --kicker-2-line-height: 19.8px;
-  --kicker-1-line-height: 19.8px;
-  --label-3-line-height: 14.4px;
-  --label-1-line-height: 17px;
-  --label-2-line-height: 16px;
-  --display-1-line-height: 40px;
-  --display-2-line-height: 36px;
-  --display-3-line-height: 28px;
-  --title-1-line-height: 22px;
-  --title-2-line-height: 17.6px;
-  --quote-line-height: 16px;
-  --footnote-1-line-height: 21px;
-  --footnote-2-line-height: 15.6px;
-  --headline-1-line-height: 48px;
-  --headline-2-line-height: 40px;
-  --headline-3-line-height: 28px;
-  --headline-4-line-height: 22px;
-  --callout-line-height: 18px;
-  --subheadline-1-line-height: 24px;
+  --body-line-height: 1.33;
+  --kicker-4-line-height: 1.1;
+  --kicker-3-line-height: 1.1;
+  --kicker-2-line-height: 1.1;
+  --kicker-1-line-height: 1.1;
+  --label-3-line-height: 1.2;
+  --label-1-line-height: 1;
+  --label-2-line-height: 1.07;
+  --display-1-line-height: 1;
+  --display-2-line-height: 1;
+  --display-3-line-height: 1;
+  --title-1-line-height: 1;
+  --title-2-line-height: 1.1;
+  --quote-line-height: 1;
+  --footnote-1-line-height: 1.31;
+  --footnote-2-line-height: 1.3;
+  --headline-1-line-height: 1;
+  --headline-2-line-height: 1;
+  --headline-3-line-height: 1;
+  --headline-4-line-height: 1;
+  --callout-line-height: 1;
+  --subheadline-1-line-height: 1;
   --letter-space-positive-sm: var(--letter-space-0-p-5, 0.5px);
   --letter-space-positive-lg: var(--letter-space-2, 2px);
   --letter-space-positive-md: var(--letter-space-1, 1px);
@@ -256,21 +256,11 @@
     --kicker-4-font-size: 16px;
     --subheadline-1-font-size: 32px;
     --quote-font-size: var(--font-size-2-p-25-x, 18px);
-    --kicker-4-line-height: 17.6px;
-    --kicker-3-line-height: 18px;
-    --kicker-2-line-height: 22px;
-    --kicker-1-line-height: 22px;
-    --display-1-line-height: 72px;
-    --display-2-line-height: 42px;
-    --display-3-line-height: 32px;
-    --title-2-line-height: 19.8px;
-    --quote-line-height: 18px;
-    --footnote-2-line-height: 15.8px;
-    --headline-1-line-height: 72px;
-    --headline-2-line-height: 48px;
-    --headline-3-line-height: 36px;
-    --callout-line-height: 22px;
-    --subheadline-1-line-height: 32px;
+    --kicker-3-line-height: 1;
+    --kicker-2-line-height: 1;
+    --kicker-1-line-height: 1;
+    --footnote-2-line-height: 1.32;
+    --headline-4-line-height: 0.85;
     --letter-space-negative-sm: var(--letter-space-neg-0-p-25, -0.25px);
     --display-1-letter-space: var(--letter-space-neg-1, -1px);
     --display-2-letter-space: var(--letter-space-neg-1, -1px);
@@ -338,24 +328,12 @@
     --kicker-3-font-size: 20px;
     --subheadline-1-font-size: 36px;
     --quote-font-size: 20px;
-    --body-line-height: 32px;
-    --kicker-4-line-height: 16px;
-    --kicker-3-line-height: 20px;
-    --kicker-2-line-height: 24px;
-    --kicker-1-line-height: 30px;
-    --display-1-line-height: 120px;
-    --display-2-line-height: 64px;
-    --display-3-line-height: 40px;
-    --title-1-line-height: 28px;
-    --title-2-line-height: 22px;
-    --quote-line-height: 22px;
-    --footnote-1-line-height: 23px;
-    --footnote-2-line-height: 21px;
-    --headline-1-line-height: 100px;
-    --headline-2-line-height: 64px;
-    --headline-3-line-height: 40px;
-    --headline-4-line-height: 30px;
-    --subheadline-1-line-height: 36px;
+    --body-line-height: 1.52;
+    --kicker-4-line-height: 1;
+    --quote-line-height: 1.1;
+    --footnote-1-line-height: 1.28;
+    --footnote-2-line-height: 1.31;
+    --headline-4-line-height: 0.94;
     --letter-space-positive-lg: var(--letter-space-3, 3px);
     --letter-space-negative-lg: var(--letter-space-neg-3, -3px);
     --display-1-letter-space: var(--letter-space-neg-2, -2px);
@@ -760,6 +738,14 @@
   line-height: var(--quote-line-height);
 }
 
+[data-content-brand="bild"] .test-style,
+:host([data-content-brand="bild"]) .test-style {
+  font-family: var(--body-font-family);
+  font-weight: 400;
+  font-size: var(--body-font-size);
+  line-height: 0.06;
+}
+
 /* === SEMANTIC DENSITY TOKENS === */
 
 [data-content-brand="bild"][data-density="default"],