@marioschmidt/design-system-tokens 1.0.66 → 1.0.68

package/dist/stencil/www/css/advertorial/components/chip.css

@@ -0,0 +1,38 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Chip Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .chip-label,
+:host([data-content-brand="advertorial"]) .chip-label {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--size-2-x, 16px);
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --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-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+    --chip-font-size: var(--size-2-p-25-x, 18px);
+  }
+}

package/dist/stencil/www/css/advertorial/components/datepicker.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Datepicker Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --datepicker-item-day-width-size: 44px;
+  --datepicker-item-height-size: 44px;
+  --datepicker-item-year-width-size: 77px;
+}

package/dist/stencil/www/css/advertorial/components/drawers.css

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Drawers Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --mobile-menu-drawer-stack-space: 20px;
+  --mobile-menu-drawer-left-inline-space: 20px;
+  --mobile-menu-drawer-right-inline-space: 16px;
+  --mobile-menu-drawer-max-width-size: 400px;
+}

package/dist/stencil/www/css/advertorial/components/dropdown.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Dropdown Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --drop-down-border-radius: var(--border-radius-sm);
+  --drop-down-item-stack-space: var(--space-1-x, 8px);
+  --drop-down-item-inline-space: var(--grid-space-resp-base);
+}

package/dist/stencil/www/css/advertorial/components/footer.css

@@ -0,0 +1,56 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Footer Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .footer-card-link,
+:host([data-content-brand="advertorial"]) .footer-card-link {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-book, 400);
+  font-size: var(--label-2-font-size, 15px);
+  text-decoration: underline;
+}
+
+[data-content-brand="advertorial"] .footer-link-separator,
+:host([data-content-brand="advertorial"]) .footer-link-separator {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-book, 400);
+}
+
+[data-content-brand="advertorial"] .footer-links,
+:host([data-content-brand="advertorial"]) .footer-links {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: 11px;
+  line-height: 14px;
+}
+
+[data-content-brand="advertorial"] .footer-link-user-offer-pages,
+:host([data-content-brand="advertorial"]) .footer-link-user-offer-pages {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-book, 400);
+  font-size: 18px;
+  line-height: 26px;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --footer-font-size: 11px;
+  --footer-line-height: 14px;
+  --footer-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  --footer-font-size-user-offer-pages: 18px;
+  --footer-line-height-user-offer-pages: 26px;
+}

package/dist/stencil/www/css/advertorial/components/icon.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Icon Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --icon-size: var(--size-const-2-xs);
+  --icon-size-embedd-media: 40px;
+}

package/dist/stencil/www/css/advertorial/components/infoelement.css

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: InfoElement Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --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-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);
+  }
+}
+
+@media (min-width: 1024px) {
+  [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;
+    --info-element-teaser-badge-margin-space: var(--space-1-x, 8px);
+  }
+}

package/dist/stencil/www/css/advertorial/components/inputfield.css

@@ -0,0 +1,86 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: InputField Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === DENSITY TOKENS === */
+
+[data-content-brand="advertorial"][data-density="default"],
+:host([data-content-brand="advertorial"][data-density="default"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --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;
+
+}
+
+[data-content-brand="advertorial"][data-density="dense"],
+:host([data-content-brand="advertorial"][data-density="dense"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --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;
+
+}
+
+[data-content-brand="advertorial"][data-density="spacious"],
+:host([data-content-brand="advertorial"][data-density="spacious"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --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;
+
+}
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .text-input-field-label,
+:host([data-content-brand="advertorial"]) .text-input-field-label {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-book, 400);
+  font-size: 16px;
+  line-height: 16px;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --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(--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);
+  --hey-input-container-inline-space: var(--inline-space-const-sm);
+  --input-field-message-gap-space: var(--gap-space-const-xs);
+  --input-field-font-family: var(--font-family-lucida-grande, Lucida Grande);
+}
+
+@media (min-width: 1024px) {
+  [data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+    --hey-input-container-inline-space: var(--inline-space-const-lg);
+  }
+}

package/dist/stencil/www/css/advertorial/components/liveticker.css

@@ -0,0 +1,62 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: LiveTicker Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .live-ticker-headline,
+:host([data-content-brand="advertorial"]) .live-ticker-headline {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: 22px;
+  line-height: 22px;
+}
+
+[data-content-brand="advertorial"] .live-ticker-time-stamp,
+:host([data-content-brand="advertorial"]) .live-ticker-time-stamp {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--live-ticker-time-stamp-font-size, 14px);
+  line-height: 14px;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --live-tickerheadline-font-weight: var(--font-weight-semi-bold, 600);
+  --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(--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;
+}
+
+@media (min-width: 600px) {
+  [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;
+    --live-ticker-app-card-width-size: 300px;
+  }
+}
+
+@media (min-width: 1024px) {
+  [data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+    --live-ticker-slider-item-width-max-size: 537px;
+  }
+}

package/dist/stencil/www/css/advertorial/components/mediaplayer.css

@@ -0,0 +1,72 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: MediaPlayer Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .podcast-player-label,
+:host([data-content-brand="advertorial"]) .podcast-player-label {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-book, 400);
+  font-size: 16px;
+  line-height: 16px;
+}
+
+[data-content-brand="advertorial"] .video-ad-time,
+:host([data-content-brand="advertorial"]) .video-ad-time {
+  font-family: var(--font-family-gotham, Gotham);
+  font-weight: var(--font-weight-black, 800);
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+[data-content-brand="advertorial"] .video-player-time,
+:host([data-content-brand="advertorial"]) .video-player-time {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-black, 800);
+  font-size: 14px;
+  text-transform: uppercase;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --podcast-play-button-size: var(--size-6-x, 48px);
+  --vid-player-bottom-bar-gap-space: 0px;
+  --audio-player-header-stack-space: var(--size-7-x, 56px);
+  --video-time-badge-font-family: var(--font-family-lucida-grande, Lucida Grande);
+  --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;
+  --vid-player-unmute-button-width-size: 220;
+}
+
+@media (min-width: 600px) {
+  [data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+    --vid-player-timecode-font-size: 16px;
+    --vid-player-timecode-container-min-width-size: 58px;
+  }
+}
+
+@media (min-width: 1024px) {
+  [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;
+  }
+}

package/dist/stencil/www/css/advertorial/components/menu.css

@@ -0,0 +1,109 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: Menu Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .app-topbar-stage-title,
+:host([data-content-brand="advertorial"]) .app-topbar-stage-title {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-black, 800);
+  font-size: 12px;
+  line-height: 14px;
+}
+
+[data-content-brand="advertorial"] .app-topbar-tabs-title,
+:host([data-content-brand="advertorial"]) .app-topbar-tabs-title {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-black, 800);
+  font-size: 12px;
+  line-height: 14px;
+  text-transform: uppercase;
+}
+
+[data-content-brand="advertorial"] .menu-item-label,
+:host([data-content-brand="advertorial"]) .menu-item-label {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+  text-transform: uppercase;
+}
+
+[data-content-brand="advertorial"] .menu-item-util-label,
+:host([data-content-brand="advertorial"]) .menu-item-util-label {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: 700;
+  font-size: var(--size-1-p-5-x, 12px);
+  line-height: var(--size-1-p-5-x, 12px);
+  text-transform: uppercase;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --menu-item-space: var(--space-1-x, 8px);
+  --menu-item-font-size: 15px;
+  --menu-item-util-font-size: var(--size-1-p-5-x, 12px);
+  --menu-item-util-stack-space: var(--space-1-p-25-x, 10px);
+  --menu-link-lane-height-size: var(--size-6-x, 48px);
+  --menu-utillink-item-height-size: var(--size-6-x, 48px);
+  --menu-link-item-inline-space: var(--space-0-p-5-x, 4px);
+  --menu-logo-default-size: var(--size-7-x, 56px);
+  --menu-logo-scrolled-size: var(--size-7-x, 56px);
+  --menu-special-navi-item-height-size: 48px;
+  --sub-nav-bar-height-size: var(--size-5-p-25-x, 42px);
+  --menu-utility-links-container-height-size: var(--size-const-lg);
+  --menu-top-stack-space: var(--stack-space-const-sm);
+  --menu-left-inline-space: var(--inline-space-const-sm);
+  --menu-utility-links-gap-space: var(--gap-space-const-xl);
+  --menu-right-inline-space: var(--space-0-x, 0px);
+  --menu-bottom-stack-space: var(--stack-space-const-sm);
+  --menu-utility-links-divider-height-size: var(--size-const-sm);
+  --menu-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  --hey-input-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
+  --app-topbar-title-font-size: 12px;
+  --app-topbar-stage-title-height: 14px;
+  --i-osapp-top-bar-height-size: 44px;
+  --i-osapp-top-bar-left-inline-space: 12px;
+  --i-osapp-top-bar-right-inline-space: 16px;
+}
+
+@media (min-width: 600px) {
+  [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;
+    --i-osapp-top-bar-left-inline-space: 19px;
+    --i-osapp-top-bar-right-inline-space: 19px;
+  }
+}
+
+@media (min-width: 1024px) {
+  [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);
+    --menu-top-stack-space: var(--stack-space-const-md);
+    --menu-left-inline-space: var(--inline-space-const-lg);
+    --menu-utility-links-gap-space: var(--gap-space-const-2-xl);
+    --menu-right-inline-space: var(--inline-space-const-lg);
+    --menu-bottom-stack-space: var(--space-0-x, 0px);
+    --menu-utility-links-divider-height-size: var(--size-const-md);
+    --menu-shadow-visibility: var(--alpha-black-0, rgba(0, 0, 0, 0));
+    --hey-input-shadow-visibility: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  }
+}

package/dist/stencil/www/css/advertorial/components/newsticker.css

@@ -0,0 +1,95 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * ADVERTORIAL Design System Tokens v1.0.68
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Advertorial | Bundle: NewsTicker Component Tokens
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
+ */
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="advertorial"] .news-ticker-time-stamp,
+:host([data-content-brand="advertorial"]) .news-ticker-time-stamp {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: 16px;
+  line-height: 20.8px;
+}
+
+[data-content-brand="advertorial"] .news-ticker-kicker,
+:host([data-content-brand="advertorial"]) .news-ticker-kicker {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--kicker-3-font-size, 14px);
+  line-height: var(--kicker-3-line-height, 15.4px);
+}
+
+[data-content-brand="advertorial"] .news-ticker-headline,
+:host([data-content-brand="advertorial"]) .news-ticker-headline {
+  font-family: var(--font-family-lucida-grande, Lucida Grande);
+  font-weight: 900;
+  font-size: var(--headline-3-font-size, 24px);
+  line-height: var(--headline-3-line-height, 26.4px);
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="advertorial"],
+:host([data-content-brand="advertorial"]) {
+  --news-ticker-time-font-size: 16px;
+  --news-ticker-time-font-weight: var(--font-weight-bold, 700);
+  --news-ticker-time-font-family: var(--font-family-lucida-grande, Lucida Grande);
+  --news-ticker-time-line-height: 20.8px;
+  --news-ticker-content-stack-space: var(--gap-space-const-xs);
+  --news-ticker-kicker-inner-stack-space: var(--space-0-p-25-x, 2px);
+  --news-ticker-titles-inline-space: 18px;
+  --news-ticker-badges-inline-space: var(--space-1-x, 8px);
+  --news-ticker-time-kicker-stack-space: var(--space-0-p-5-x, 4px);
+  --news-ticker-entries-stack-space: var(--space-2-p-75-x, 22px);
+  --news-ticker-kicker-inner-inline-space: var(--space-0-p-5-x, 4px);
+  --news-ticker-skeleton-bottom-space: var(--space-8-x, 64px);
+  --news-ticker-red-dot-size: var(--size-1-p-5-x, 12px);
+  --news-ticker-entries-left-inline-space: var(--space-2-p-75-x, 22px);
+  --news-ticker-line-inline-space: var(--space-0-p-75-x, 6px);
+  --news-ticker-app-card-height-size: 116px;
+  --news-ticker-app-card-width-size: 250px;
+}
+
+@media (min-width: 390px) {
+  [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"]) {
+    --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);
+    --news-ticker-skeleton-bottom-space: 0px;
+    --news-ticker-red-dot-size: var(--size-1-p-75-x, 14px);
+    --news-ticker-line-inline-space: 7px;
+    --news-ticker-app-card-height-size: 150px;
+    --news-ticker-app-card-width-size: 300px;
+  }
+}
+
+@media (min-width: 1024px) {
+  [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;
+    --news-ticker-badges-inline-space: var(--space-2-x, 16px);
+    --news-ticker-red-dot-size: var(--size-2-x, 16px);
+    --news-ticker-line-inline-space: var(--space-1-x, 8px);
+  }
+}