@marioschmidt/design-system-components 1.0.70

package/dist/www/css/bild/components/newsticker.css

@@ -0,0 +1,103 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | 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="bild"] .news-ticker-time-stamp,
+:host([data-content-brand="bild"]) .news-ticker-time-stamp {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: 16px;
+  line-height: 20.8px;
+}
+
+[data-content-brand="bild"] .news-ticker-kicker,
+:host([data-content-brand="bild"]) .news-ticker-kicker {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--kicker-3-font-size, 16px);
+  line-height: var(--kicker-3-line-height, 17.6px);
+}
+
+[data-content-brand="bild"] .news-ticker-headline,
+:host([data-content-brand="bild"]) .news-ticker-headline {
+  font-family: var(--font-family-gotham-cond, Gotham Condensed);
+  font-weight: 900;
+  font-size: var(--headline-3-font-size, 28px);
+  line-height: var(--headline-3-line-height, 28px);
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+  --news-ticker-time-font-size: 16px;
+  --news-ticker-time-font-weight: var(--font-weight-bold, 700);
+  --news-ticker-time-font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  --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="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"]) {
+    --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="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;
+    --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);
+  }
+}
+
+/* === OTHER TOKENS === */
+
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --news-ticker-timestamp-color: var(--label-color-tertiary);
+  --news-ticker-badge-icons-color: var(--label-color-tertiary);
+}

package/dist/www/css/bild/components/pagination.css

@@ -0,0 +1,70 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Pagination 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
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
+
+[data-color-brand="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  --pagination-element-color-default: var(--color-neutral-85, #CED4DA);
+  --scroll-bar-track-bg-color: var(--alpha-black-10, rgba(0, 0, 0, 0.1));
+  --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
+}
+
+/* === COLOR TOKENS (DARK MODE) === */
+
+[data-color-brand="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  --pagination-element-color-default: var(--color-neutral-60, #8C9196);
+  --scroll-bar-track-bg-color: var(--alpha-white-10, rgba(255, 255, 255, 0.1));
+  --scroll-bar-thumb-bg-color: var(--color-neutral-60, #8C9196);
+}
+
+/* === TYPOGRAPHY TOKENS === */
+
+[data-content-brand="bild"] .numbered-pagination-active,
+:host([data-content-brand="bild"]) .numbered-pagination-active {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--label-1-font-size, 17px);
+  line-height: var(--label-1-line-height, 17px);
+  letter-spacing: var(--letter-space-0-p-25, 0.25px);
+  text-decoration: underline;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+  --gallery-pagination-item-height-size: var(--size-0-p-5-x, 4px);
+  --gallery-pagination-container-web-inline-space: var(--inline-space-const-sm);
+  --gallery-pagination-container-stack-space: var(--stack-space-const-md);
+  --gallery-pagination-container-app-inline-space: var(--inline-space-const-md);
+  --scroll-bar-thickness-size: var(--size-1-x, 8px);
+}
+
+@media (min-width: 600px) {
+  [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);
+  }
+}
+
+/* === OTHER TOKENS === */
+
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --pagination-element-color-active: var(--accent-color-primary);
+  --gallery-pagination-element-active-opacity: var(--layer-opacity-100);
+}

package/dist/www/css/bild/components/partnerlinks.css

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: PartnerLinks 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
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
+
+[data-color-brand="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
+  --partner-links-border-color-active: var(--color-neutral-15, #232629);
+  --partner-links-bg-color-idle: var(--color-neutral-100, #FFFFFF);
+  --partner-links-bg-color-active: var(--color-neutral-93, #E9ECEF);
+  --partner-links-container-border-color: var(--color-neutral-85, #CED4DA);
+
+}
+
+/* === COLOR TOKENS (DARK MODE) === */
+
+[data-color-brand="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --partner-links-border-color-idle: var(--color-neutral-85, #CED4DA);
+  --partner-links-border-color-active: var(--color-neutral-93, #E9ECEF);
+  --partner-links-bg-color-idle: var(--color-neutral-25, #343C41);
+  --partner-links-bg-color-active: var(--color-neutral-60, #8C9196);
+  --partner-links-container-border-color: var(--color-neutral-35, #4B525A);
+
+}

package/dist/www/css/bild/components/paywall.css

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Paywall 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="bild"] .paywall-card-price-tag,
+:host([data-content-brand="bild"]) .paywall-card-price-tag {
+  font-family: var(--font-family-gotham, Gotham);
+  font-weight: var(--font-weight-black, 800);
+  font-size: var(--size-8-x, 64px);
+  line-height: var(--size-8-x, 64px);
+  letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
+}
+
+[data-content-brand="bild"] .paywall-card-note,
+:host([data-content-brand="bild"]) .paywall-card-note {
+  font-family: var(--font-family-gotham, Gotham);
+  font-weight: var(--font-weight-black, 800);
+  font-size: var(--size-5-x, 40px);
+  line-height: var(--size-5-x, 40px);
+  letter-spacing: var(--letter-space-neg-0-p-5, -0.5px);
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+  --paywall-container-gap-space: -48px;
+  --paywall-header-bottom-stack-space: var(--space-10-x, 80px);
+  --paywall-card-max-width-size: 346px;
+  --paywall-card-price-tag-font-size: var(--size-8-x, 64px);
+  --paywall-card-price-tag-line-height: var(--size-8-x, 64px);
+  --paywall-card-price-note-line-height: var(--size-5-x, 40px);
+  --paywall-card-price-note-font-size: var(--size-5-x, 40px);
+}

package/dist/www/css/bild/components/quote.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Quote 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="bild"],
+:host([data-content-brand="bild"]) {
+  --quote-container-inline-space: var(--inline-space-const-lg);
+  --quote-container-stack-space: var(--stack-space-resp-lg);
+  --quote-quotation-marks-font-size: var(--size-3-p-5-x, 28px);
+  --quote-content-gap-space: var(--gap-space-const-lg);
+}
+
+@media (min-width: 600px) {
+  [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);
+  }
+}
+
+@media (min-width: 1024px) {
+  [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);
+  }
+}

package/dist/www/css/bild/components/radiobutton.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: RadioButton 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="bild"],
+:host([data-content-brand="bild"]) {
+  --radio-selector-size: var(--size-2-p-5-x, 20px);
+  --radio-selector-dot-active-size: var(--size-1-p-5-x, 12px);
+}

package/dist/www/css/bild/components/search.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Search 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="bild"],
+:host([data-content-brand="bild"]) {
+  --search-result-badge-height-size: var(--size-2-p-25-x, 18px);
+}

package/dist/www/css/bild/components/sectiontitle.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: SectionTitle 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="bild"],
+:host([data-content-brand="bild"]) {
+  --section-title-inner-stack-bottom-space: var(--space-1-p-5-x, 12px);
+  --section-title-height-size: var(--size-4-x, 32px);
+  --section-title-arrow-inline-space: 5px;
+  --section-title-arrow-inline-space-active: 5px;
+}
+
+@media (min-width: 1024px) {
+  [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;
+  }
+}

package/dist/www/css/bild/components/selection.css

@@ -0,0 +1,37 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Selection 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
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
+
+[data-color-brand="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --selection-border-color: var(--color-neutral-35, #4B525A);
+
+}
+
+/* === COLOR TOKENS (DARK MODE) === */
+
+[data-color-brand="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --selection-border-color: var(--color-neutral-60, #8C9196);
+
+}

package/dist/www/css/bild/components/separator.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Separator 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="bild"],
+:host([data-content-brand="bild"]) {
+  --separator-thickness-size: var(--border-width-thick);
+}

package/dist/www/css/bild/components/skeletons.css

@@ -0,0 +1,33 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Skeletons 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="bild"],
+:host([data-content-brand="bild"]) {
+  --headlines-skeleton-image-placeholder-max-width: 282px;
+  --article-skeleton-image-inline-space: var(--grid-space-resp-base);
+  --article-skeleton-text-inline-space: 0px;
+  --article-text-skeleton-height-size: 270px;
+}
+
+@media (min-width: 600px) {
+  [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);
+    --article-text-skeleton-height-size: 720px;
+  }
+}

package/dist/www/css/bild/components/slider.css

@@ -0,0 +1,44 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Slider 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
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
+
+[data-color-brand="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
+}
+
+/* === COLOR TOKENS (DARK MODE) === */
+
+[data-color-brand="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  --slider-track-bg-color: var(--alpha-white-35, rgba(255, 255, 255, 0.35));
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+  --slider-progress-bar-idle-height-size: var(--size-0-p-5-x, 4px);
+  --slider-progress-bar-hover-height-size: var(--size-1-x, 8px);
+  --slider-progress-inactive-height-size: var(--size-0-p-25-x, 2px);
+  --vid-player-progress-bar-height-size: var(--size-1-p-5-x, 12px);
+}
+
+/* === OTHER TOKENS === */
+
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --slider-button-opacity: var(--layer-opacity-90);
+}

package/dist/www/css/bild/components/socialsharebutton.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: SocialShareButton 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
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
+
+[data-color-brand="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --social-share-button-label-color-default: var(--color-neutral-100, #FFFFFF);
+  --social-share-button-label-color-active: var(--color-neutral-100, #FFFFFF);
+  --social-share-button-bg-color-active: var(--color-neutral-25, #343C41);
+  --social-share-button-bg-color-default: var(--color-neutral-35, #4B525A);
+
+}
+
+/* === COLOR TOKENS (DARK MODE) === */
+
+[data-color-brand="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+
+  --social-share-button-label-color-default: var(--color-neutral-100, #FFFFFF);
+  --social-share-button-label-color-active: var(--color-neutral-100, #FFFFFF);
+  --social-share-button-bg-color-active: var(--color-neutral-25, #343C41);
+  --social-share-button-bg-color-default: var(--color-neutral-35, #4B525A);
+
+}

package/dist/www/css/bild/components/specialnavi.css

@@ -0,0 +1,37 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: SpecialNavi 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="bild"] .special-navi-item-label,
+:host([data-content-brand="bild"]) .special-navi-item-label {
+  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+/* === BREAKPOINT TOKENS === */
+
+[data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+  --special-navi-inline-space: var(--space-3-x, 24px);
+}
+
+@media (min-width: 1024px) {
+  [data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+    --special-navi-inline-space: var(--space-4-x, 32px);
+  }
+}

package/dist/www/css/bild/components/spinner.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Spinner 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="bild"],
+:host([data-content-brand="bild"]) {
+  --video-spinner-size: var(--size-const-sm);
+  --video-spinner-stroke-size: 2px;
+  --video-spinner-size-0-5-x: 20px;
+}
+
+@media (min-width: 600px) {
+  [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;
+  }
+}

package/dist/www/css/bild/components/subheader.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | Bundle: Subheader 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
+ */
+
+/* === OTHER TOKENS === */
+
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --subheaders-color: var(--text-color-primary);
+}