@marioschmidt/design-system-tokens 1.0.65 → 1.0.66

package/dist/css/advertorial/components/teaser.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.65
+ * ADVERTORIAL Design System Tokens v1.0.66
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Teaser Component Tokens
@@ -18,43 +18,43 @@
   .a-teaser-a-teaser-kicker {
     font-family: var(--font-family-lucida-grande, Lucida Grande);
     font-weight: 700;
-    font-size: var(--kicker3-font-size, 14px);
-    line-height: var(--kicker3-font-size, 14px);
+    font-size: var(--kicker-3-font-size, 14px);
+    line-height: var(--kicker-3-font-size, 14px);
   }
 
   .a-teaser-a-teaser-headline {
     font-family: var(--font-family-lucida-grande, Lucida Grande);
     font-weight: 900;
-    font-size: var(--headline3-font-size, 24px);
-    line-height: var(--headline3-font-size, 24px);
+    font-size: var(--headline-3-font-size, 24px);
+    line-height: var(--headline-3-font-size, 24px);
   }
 
   .m-qteaser-m-qteaser-kicker {
     font-family: var(--font-family-lucida-grande, Lucida Grande);
     font-weight: 700;
-    font-size: var(--kicker4-font-size, 12px);
-    line-height: var(--kicker4-line-height, 13.2px);
+    font-size: var(--kicker-4-font-size, 12px);
+    line-height: var(--kicker-4-line-height, 13.2px);
   }
 
   .m-qteaser-m-qteaser-headline {
     font-family: var(--font-family-lucida-grande, Lucida Grande);
     font-weight: 900;
-    font-size: var(--headline4-font-size, 16px);
-    line-height: var(--headline4-line-height, 18.4px);
+    font-size: var(--headline-4-font-size, 16px);
+    line-height: var(--headline-4-line-height, 18.4px);
   }
 
   .q-teaser-q-teaser-headline {
     font-family: var(--font-family-lucida-grande, Lucida Grande);
     font-weight: 900;
-    font-size: var(--headline1-font-size, 36px);
-    line-height: var(--headline1-line-height, 37.8px);
+    font-size: var(--headline-1-font-size, 36px);
+    line-height: var(--headline-1-line-height, 37.8px);
   }
 
   .std-teaser-std-teaser-headline {
     font-family: var(--font-family-lucida-grande, Lucida Grande);
     font-weight: 700;
-    font-size: var(--headline4-font-size, 16px);
-    line-height: var(--headline4-line-height, 18.4px);
+    font-size: var(--headline-4-font-size, 16px);
+    line-height: var(--headline-4-line-height, 18.4px);
   }
 
 }
@@ -63,61 +63,61 @@
 
 [data-brand="advertorial"] {
   --teaser-title-inline-left-space: var(--grid-space-resp-base);
-  --teaser-title-stack-space: var(--space0p5x, 4px);
+  --teaser-title-stack-space: var(--space-0-p-5-x, 4px);
   --teaser-title-gap-space: var(--gap-space-const-xs);
   --teaser-kicker-bg-inline-space: var(--inline-space-const-xs);
-  --teaser-kicker-bg-stack-space: var(--stack-space-const3-xs);
+  --teaser-kicker-bg-stack-space: var(--stack-space-const-3-xs);
   --teaser-badges-margin-space: var(--inline-space-const-sm);
   --teaser-badges-height-size-lg: var(--size-const-xs);
-  --teaser-title-bottom-stack-space: var(--space1p5x, 12px);
-  --teaser-badges-height-size-sm: var(--size-resp2-xs);
+  --teaser-title-bottom-stack-space: var(--space-1-p-5-x, 12px);
+  --teaser-badges-height-size-sm: var(--size-resp-2-xs);
   --teaser-layout-grid-space: var(--grid-space-resp-base);
-  --m-qteaser-headline-font-size: var(--headline4-font-size);
-  --m-qteaser-headline-font-weight: var(--headline4-font-weight);
-  --m-qteaser-headline-line-height: var(--headline4-line-height);
-  --mq-teaser-title-inline-space: var(--space1x, 8px);
-  --a-teaser-kicker-font-size: var(--kicker3-font-size);
-  --a-teaser-headline-font-size: var(--headline3-font-size);
-  --a-teaser-kicker-line-height: var(--kicker3-font-size);
-  --a-teaser-headline-line-height: var(--headline3-font-size);
-  --a-teaser-title-inline-space: var(--space1x, 8px);
+  --m-qteaser-headline-font-size: var(--headline-4-font-size);
+  --m-qteaser-headline-font-weight: var(--headline-4-font-weight);
+  --m-qteaser-headline-line-height: var(--headline-4-line-height);
+  --mq-teaser-title-inline-space: var(--space-1-x, 8px);
+  --a-teaser-kicker-font-size: var(--kicker-3-font-size);
+  --a-teaser-headline-font-size: var(--headline-3-font-size);
+  --a-teaser-kicker-line-height: var(--kicker-3-font-size);
+  --a-teaser-headline-line-height: var(--headline-3-font-size);
+  --a-teaser-title-inline-space: var(--space-1-x, 8px);
   --std-teaser-image-title-gap-space: var(--gap-space-const-xs);
-  --std-teaser-badges-margin-space: var(--space0p5x, 4px);
-  --std-teaser-kicker-headline-stack-space: var(--stack-space-const3-xs);
-  --quad-headline-font-size: var(--headline1-font-size);
-  --quad-kicker-font-size: var(--kicker1-font-size);
-  --quad-headline-line-height: var(--headline1-line-height);
-  --q-teaser-title-inline-space: var(--space1x, 8px);
+  --std-teaser-badges-margin-space: var(--space-0-p-5-x, 4px);
+  --std-teaser-kicker-headline-stack-space: var(--stack-space-const-3-xs);
+  --quad-headline-font-size: var(--headline-1-font-size);
+  --quad-kicker-font-size: var(--kicker-1-font-size);
+  --quad-headline-line-height: var(--headline-1-line-height);
+  --q-teaser-title-inline-space: var(--space-1-x, 8px);
   --bild-play-teaser-width-size: 145px;
-  --super-ateaser-title-inline-space: var(--space2x, 16px);
-  --b-teaser-title-inline-space: var(--space1x, 8px);
+  --super-ateaser-title-inline-space: var(--space-2-x, 16px);
+  --b-teaser-title-inline-space: var(--space-1-x, 8px);
 }
 
 @media (min-width: 600px) {
   [data-brand="advertorial"] {
-    --teaser-title-inline-left-space: var(--space0x, 0px);
-    --teaser-title-bottom-stack-space: var(--space2x, 16px);
-    --m-qteaser-headline-font-size: var(--headline3-font-size);
-    --m-qteaser-headline-font-weight: var(--headline3-font-weight);
-    --m-qteaser-headline-line-height: var(--headline3-line-height);
-    --a-teaser-kicker-font-size: var(--kicker2-font-size);
-    --a-teaser-headline-font-size: var(--headline2-font-size);
-    --a-teaser-kicker-line-height: var(--kicker2-font-size);
-    --a-teaser-headline-line-height: var(--headline2-line-height);
-    --a-teaser-title-inline-space: var(--space1p5x, 12px);
-    --std-teaser-image-title-gap-space: var(--space0p75x, 6px);
-    --std-teaser-badges-margin-space: var(--space1x, 8px);
-    --quad-kicker-font-size: var(--kicker2-font-size);
-    --q-teaser-title-inline-space: var(--space2x, 16px);
+    --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);
+    --m-qteaser-headline-font-weight: var(--headline-3-font-weight);
+    --m-qteaser-headline-line-height: var(--headline-3-line-height);
+    --a-teaser-kicker-font-size: var(--kicker-2-font-size);
+    --a-teaser-headline-font-size: var(--headline-2-font-size);
+    --a-teaser-kicker-line-height: var(--kicker-2-font-size);
+    --a-teaser-headline-line-height: var(--headline-2-line-height);
+    --a-teaser-title-inline-space: var(--space-1-p-5-x, 12px);
+    --std-teaser-image-title-gap-space: var(--space-0-p-75-x, 6px);
+    --std-teaser-badges-margin-space: var(--space-1-x, 8px);
+    --quad-kicker-font-size: var(--kicker-2-font-size);
+    --q-teaser-title-inline-space: var(--space-2-x, 16px);
     --bild-play-teaser-width-size: 169px;
   }
 }
 
 @media (min-width: 1024px) {
   [data-brand="advertorial"] {
-    --teaser-title-stack-space: var(--space0p75x, 6px);
+    --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(--space1p5x, 12px);
+    --q-teaser-title-inline-space: var(--space-1-p-5-x, 12px);
     --bild-play-teaser-width-size: 193px;
   }
 }

package/dist/css/advertorial/components/toggleswitch.css

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

package/dist/css/advertorial/components/video.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.65
+ * ADVERTORIAL Design System Tokens v1.0.66
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Video Component Tokens
@@ -17,9 +17,9 @@
 [data-brand="advertorial"] {
   --video-time-badge-corner-size: var(--border-radius-xs);
   --video-time-badge-font-size: 16px;
-  --video-time-badge-size: var(--size3x, 24px);
-  --video-red-play-icon-width-size: var(--size1x, 8px);
-  --video-red-play-icon-height-size: var(--size1p25x, 10px);
+  --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: 21;
   --video-skeleton-container-height: 180px;
   --video-frame-inline-space: 0px;
@@ -30,9 +30,9 @@
 @media (min-width: 600px) {
   [data-brand="advertorial"] {
     --video-time-badge-font-size: 18px;
-    --video-time-badge-size: var(--size4x, 32px);
-    --video-red-play-icon-width-size: var(--size1p5x, 12px);
-    --video-red-play-icon-height-size: var(--size1p75x, 14px);
+    --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.8;
     --video-skeleton-container-height: 464px;
     --video-frame-inline-space: var(--grid-space-resp-base);
@@ -43,8 +43,8 @@
 
 @media (min-width: 1024px) {
   [data-brand="advertorial"] {
-    --video-time-badge-size: var(--size5x, 40px);
-    --video-red-play-icon-width-size: var(--size1p75x, 14px);
-    --video-red-play-icon-height-size: var(--size2p25x, 18px);
+    --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/css/advertorial/theme.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * ADVERTORIAL Design System Tokens v1.0.65
+ * ADVERTORIAL Design System Tokens v1.0.66
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Advertorial | Bundle: Theme (Color tokens + Effects for light/dark mode)
@@ -46,22 +46,22 @@
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="light"] .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="light"] .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="light"] .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="light"] .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 
 /* Effects - Dark */
@@ -96,20 +96,20 @@
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="dark"] .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="dark"] .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="dark"] .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="advertorial"][data-theme="dark"] .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }