@marioschmidt/design-system-tokens 1.0.64 → 1.0.65

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: NewsTicker Component Tokens
@@ -12,30 +12,6 @@
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
  */
 
-/* === COLOR TOKENS (LIGHT MODE) === */
-
-[data-brand="bild"][data-theme="light"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --news-ticker-timestamp-color: var(--label-color-tertiary, #8C9196);
-  --news-ticker-badge-icons-color: var(--label-color-tertiary, #8C9196);
-
-}
-
-/* === COLOR TOKENS (DARK MODE) === */
-
-[data-brand="bild"][data-theme="dark"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --news-ticker-timestamp-color: var(--label-color-tertiary, #8C9196);
-  --news-ticker-badge-icons-color: var(--label-color-tertiary, #8C9196);
-
-}
-
 /* === TYPOGRAPHY TOKENS === */
 
 [data-brand="bild"] {
@@ -69,7 +45,7 @@
   --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.8;
-  --news-ticker-content-stack-space: var(--gap-space-const-xs, 4px);
+  --news-ticker-content-stack-space: var(--gap-space-const-xs);
   --news-ticker-kicker-inner-stack-space: var(--space0p25x, 2px);
   --news-ticker-titles-inline-space: 18px;
   --news-ticker-badges-inline-space: var(--space1x, 8px);
@@ -86,13 +62,12 @@
 
 @media (min-width: 390px) {
   [data-brand="bild"] {
-    --news-ticker-time-font-family: var(--label-font-family, Gotham XNarrow);
+    --news-ticker-time-font-family: var(--label-font-family);
   }
 }
 
 @media (min-width: 600px) {
   [data-brand="bild"] {
-    --news-ticker-time-font-family: var(--label-font-family, Gotham XNarrow);
     --news-ticker-titles-inline-space: var(--space3x, 24px);
     --news-ticker-badges-inline-space: var(--space1p5x, 12px);
     --news-ticker-time-kicker-stack-space: var(--space0p75x, 6px);
@@ -107,15 +82,17 @@
 @media (min-width: 1024px) {
   [data-brand="bild"] {
     --news-ticker-time-font-size: 18px;
-    --news-ticker-time-font-family: var(--label-font-family, Gotham XNarrow);
     --news-ticker-time-line-height: 23.4;
     --news-ticker-titles-inline-space: 30px;
     --news-ticker-badges-inline-space: var(--space2x, 16px);
-    --news-ticker-time-kicker-stack-space: var(--space0p75x, 6px);
-    --news-ticker-skeleton-bottom-space: 0px;
     --news-ticker-red-dot-size: var(--size2x, 16px);
     --news-ticker-line-inline-space: var(--space1x, 8px);
-    --news-ticker-app-card-height-size: 150px;
-    --news-ticker-app-card-width-size: 300px;
   }
 }
+
+/* === OTHER TOKENS === */
+
+[data-brand="bild"] {
+  --news-ticker-timestamp-color: var(--label-color-tertiary);
+  --news-ticker-badge-icons-color: var(--label-color-tertiary);
+}

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Pagination Component Tokens
@@ -15,31 +15,17 @@
 /* === COLOR TOKENS (LIGHT MODE) === */
 
 [data-brand="bild"][data-theme="light"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --pagination-element-color-default: var(--bild085, #CED4DA);
-  --pagination-element-color-active: var(--accent-color-primary, #DD0000);
-  --gallery-pagination-element-active-opacity: var(--layer-opacity100, 1);
-  --scroll-bar-track-bg-color: var(--black-alpha10, rgba(0, 0, 0, 0.1));
-  --scroll-bar-thumb-bg-color: var(--bild060, #8C9196);
-
+  --pagination-element-color-default: var(--color-neutral85, #CED4DA);
+  --scroll-bar-track-bg-color: var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  --scroll-bar-thumb-bg-color: var(--color-neutral60, #8C9196);
 }
 
 /* === COLOR TOKENS (DARK MODE) === */
 
 [data-brand="bild"][data-theme="dark"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --pagination-element-color-default: var(--bild060, #8C9196);
-  --pagination-element-color-active: var(--accent-color-primary, #FFFFFF);
-  --gallery-pagination-element-active-opacity: var(--layer-opacity100, 1);
-  --scroll-bar-track-bg-color: var(--white-alpha10, rgba(255, 255, 255, 0.1));
-  --scroll-bar-thumb-bg-color: var(--bild060, #8C9196);
-
+  --pagination-element-color-default: var(--color-neutral60, #8C9196);
+  --scroll-bar-track-bg-color: var(--alpha-white10, rgba(255, 255, 255, 0.1));
+  --scroll-bar-thumb-bg-color: var(--color-neutral60, #8C9196);
 }
 
 /* === TYPOGRAPHY TOKENS === */
@@ -59,23 +45,23 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --gallery-pagination-item-height-size: var(--size0-5x, 4px);
-  --gallery-pagination-container-web-inline-space: var(--inline-space-const-sm, 8px);
-  --gallery-pagination-container-stack-space: var(--stack-space-const-md, 12px);
-  --gallery-pagination-container-app-inline-space: var(--inline-space-const-md, 12px);
+  --gallery-pagination-item-height-size: var(--size0p5x, 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(--size1x, 8px);
 }
 
 @media (min-width: 600px) {
   [data-brand="bild"] {
-    --gallery-pagination-container-web-inline-space: var(--inline-space-const-md, 12px);
-    --gallery-pagination-container-stack-space: var(--stack-space-const-lg, 16px);
+    --gallery-pagination-container-web-inline-space: var(--inline-space-const-md);
+    --gallery-pagination-container-stack-space: var(--stack-space-const-lg);
   }
 }
 
-@media (min-width: 1024px) {
-  [data-brand="bild"] {
-    --gallery-pagination-container-web-inline-space: var(--inline-space-const-md, 12px);
-    --gallery-pagination-container-stack-space: var(--stack-space-const-lg, 16px);
-  }
+/* === OTHER TOKENS === */
+
+[data-brand="bild"] {
+  --pagination-element-color-active: var(--accent-color-primary);
+  --gallery-pagination-element-active-opacity: var(--layer-opacity100);
 }

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: PartnerLinks Component Tokens
@@ -19,11 +19,11 @@
      OTHER
      ============================================ */
 
-  --partner-links-border-color-idle: var(--bild085, #CED4DA);
-  --partner-links-border-color-active: var(--bild015, #232629);
-  --partner-links-bg-color-idle: var(--white100, #FFFFFF);
-  --partner-links-bg-color-active: var(--bild093, #E9ECEF);
-  --partner-links-container-border-color: var(--bild085, #CED4DA);
+  --partner-links-border-color-idle: var(--color-neutral85, #CED4DA);
+  --partner-links-border-color-active: var(--color-neutral15, #232629);
+  --partner-links-bg-color-idle: var(--color-neutral100, #FFFFFF);
+  --partner-links-bg-color-active: var(--color-neutral93, #E9ECEF);
+  --partner-links-container-border-color: var(--color-neutral85, #CED4DA);
 
 }
 
@@ -34,10 +34,10 @@
      OTHER
      ============================================ */
 
-  --partner-links-border-color-idle: var(--bild085, #CED4DA);
-  --partner-links-border-color-active: var(--bild093, #E9ECEF);
-  --partner-links-bg-color-idle: var(--bild025, #343C41);
-  --partner-links-bg-color-active: var(--bild060, #8C9196);
-  --partner-links-container-border-color: var(--bild035, #4B525A);
+  --partner-links-border-color-idle: var(--color-neutral85, #CED4DA);
+  --partner-links-border-color-active: var(--color-neutral93, #E9ECEF);
+  --partner-links-bg-color-idle: var(--color-neutral25, #343C41);
+  --partner-links-bg-color-active: var(--color-neutral60, #8C9196);
+  --partner-links-container-border-color: var(--color-neutral35, #4B525A);
 
 }

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

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

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Quote Component Tokens
@@ -15,25 +15,22 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --quote-container-inline-space: var(--inline-space-const-lg, 16px);
-  --quote-container-stack-space: var(--stack-space-resp-lg, 16px);
+  --quote-container-inline-space: var(--inline-space-const-lg);
+  --quote-container-stack-space: var(--stack-space-resp-lg);
   --quote-quotation-marks-font-size: var(--size3p5x, 28px);
-  --quote-content-gap-space: var(--gap-space-const-lg, 16px);
+  --quote-content-gap-space: var(--gap-space-const-lg);
 }
 
 @media (min-width: 600px) {
   [data-brand="bild"] {
-    --quote-container-stack-space: var(--stack-space-resp-lg, 24px);
     --quote-quotation-marks-font-size: var(--size4x, 32px);
-    --quote-content-gap-space: var(--gap-space-const3-xl, 48px);
+    --quote-content-gap-space: var(--gap-space-const3-xl);
   }
 }
 
 @media (min-width: 1024px) {
   [data-brand="bild"] {
     --quote-container-inline-space: var(--space3p5x, 28px);
-    --quote-container-stack-space: var(--stack-space-resp-lg, 32px);
     --quote-quotation-marks-font-size: var(--size4p5x, 36px);
-    --quote-content-gap-space: var(--gap-space-const3-xl, 48px);
   }
 }

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Selection Component Tokens
@@ -19,7 +19,7 @@
      OTHER
      ============================================ */
 
-  --selection-border-color: var(--bild035, #4B525A);
+  --selection-border-color: var(--color-neutral35, #4B525A);
 
 }
 
@@ -30,6 +30,6 @@
      OTHER
      ============================================ */
 
-  --selection-border-color: var(--bild060, #8C9196);
+  --selection-border-color: var(--color-neutral60, #8C9196);
 
 }

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Separator Component Tokens
@@ -15,5 +15,5 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --separator-thickness-size: var(--border-width-thick, 2px);
+  --separator-thickness-size: var(--border-width-thick);
 }

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Skeletons Component Tokens
@@ -16,7 +16,7 @@
 
 [data-brand="bild"] {
   --headlines-skeleton-image-placeholder-max-width: 282px;
-  --article-skeleton-image-inline-space: var(--grid-space-resp-base, 12px);
+  --article-skeleton-image-inline-space: var(--grid-space-resp-base);
   --article-skeleton-text-inline-space: 0px;
   --article-text-skeleton-height-size: 270px;
 }
@@ -29,12 +29,3 @@
     --article-text-skeleton-height-size: 720px;
   }
 }
-
-@media (min-width: 1024px) {
-  [data-brand="bild"] {
-    --headlines-skeleton-image-placeholder-max-width: var(--size20x, 160px);
-    --article-skeleton-image-inline-space: var(--space6x, 48px);
-    --article-skeleton-text-inline-space: var(--space6x, 48px);
-    --article-text-skeleton-height-size: 720px;
-  }
-}

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Slider Component Tokens
@@ -15,32 +15,26 @@
 /* === COLOR TOKENS (LIGHT MODE) === */
 
 [data-brand="bild"][data-theme="light"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --slider-button-opacity: var(--layer-opacity90, 0.9);
-  --slider-track-bg-color: var(--white-alpha35, rgba(255, 255, 255, 0.35));
-
+  --slider-track-bg-color: var(--alpha-white35, rgba(255, 255, 255, 0.35));
 }
 
 /* === COLOR TOKENS (DARK MODE) === */
 
 [data-brand="bild"][data-theme="dark"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --slider-button-opacity: var(--layer-opacity90, 0.9);
-  --slider-track-bg-color: var(--white-alpha35, rgba(255, 255, 255, 0.35));
-
+  --slider-track-bg-color: var(--alpha-white35, rgba(255, 255, 255, 0.35));
 }
 
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --slider-progress-bar-idle-height-size: var(--size0-5x, 4px);
+  --slider-progress-bar-idle-height-size: var(--size0p5x, 4px);
   --slider-progress-bar-hover-height-size: var(--size1x, 8px);
   --slider-progress-inactive-height-size: var(--size0p25x, 2px);
   --vid-player-progress-bar-height-size: var(--size1p5x, 12px);
 }
+
+/* === OTHER TOKENS === */
+
+[data-brand="bild"] {
+  --slider-button-opacity: var(--layer-opacity90);
+}

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: SocialShareButton Component Tokens
@@ -19,10 +19,10 @@
      OTHER
      ============================================ */
 
-  --social-share-button-label-color-default: var(--white100, #FFFFFF);
-  --social-share-button-label-color-active: var(--white100, #FFFFFF);
-  --social-share-button-bg-color-active: var(--bild025, #343C41);
-  --social-share-button-bg-color-default: var(--bild035, #4B525A);
+  --social-share-button-label-color-default: var(--color-neutral100, #FFFFFF);
+  --social-share-button-label-color-active: var(--color-neutral100, #FFFFFF);
+  --social-share-button-bg-color-active: var(--color-neutral25, #343C41);
+  --social-share-button-bg-color-default: var(--color-neutral35, #4B525A);
 
 }
 
@@ -33,9 +33,9 @@
      OTHER
      ============================================ */
 
-  --social-share-button-label-color-default: var(--white100, #FFFFFF);
-  --social-share-button-label-color-active: var(--white100, #FFFFFF);
-  --social-share-button-bg-color-active: var(--bild025, #343C41);
-  --social-share-button-bg-color-default: var(--bild035, #4B525A);
+  --social-share-button-label-color-default: var(--color-neutral100, #FFFFFF);
+  --social-share-button-label-color-active: var(--color-neutral100, #FFFFFF);
+  --social-share-button-bg-color-active: var(--color-neutral25, #343C41);
+  --social-share-button-bg-color-default: var(--color-neutral35, #4B525A);
 
 }

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

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

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Spinner Component Tokens
@@ -15,7 +15,7 @@
 /* === BREAKPOINT TOKENS === */
 
 [data-brand="bild"] {
-  --video-spinner-size: var(--size-const-sm, 40px);
+  --video-spinner-size: var(--size-const-sm);
   --video-spinner-stroke-size: 2px;
   --video-spinner-size0-5x: 20px;
 }
@@ -27,11 +27,3 @@
     --video-spinner-size0-5x: 40px;
   }
 }
-
-@media (min-width: 1024px) {
-  [data-brand="bild"] {
-    --video-spinner-size: var(--size10x, 80px);
-    --video-spinner-stroke-size: 4px;
-    --video-spinner-size0-5x: 40px;
-  }
-}

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Subheader Component Tokens
@@ -12,24 +12,8 @@
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
  */
 
-/* === COLOR TOKENS (LIGHT MODE) === */
-
-[data-brand="bild"][data-theme="light"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --subheaders-color: var(--text-color-primary, #232629);
-
-}
-
-/* === COLOR TOKENS (DARK MODE) === */
-
-[data-brand="bild"][data-theme="dark"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-
-  --subheaders-color: var(--text-color-primary, #E9ECEF);
+/* === OTHER TOKENS === */
 
+[data-brand="bild"] {
+  --subheaders-color: var(--text-color-primary);
 }

package/dist/css/bild/components/tab.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Tab Component Tokens
@@ -19,10 +19,10 @@
      OTHER
      ============================================ */
 
-  --tab-bg-color-hover: var(--bild093, #E9ECEF);
-  --tab-label-color-active: var(--bild025, #343C41);
-  --tab-label-color-default: var(--bild035, #4B525A);
-  --app-bottom-tab-bar-bg-color: var(--white100, #FFFFFF);
+  --tab-bg-color-hover: var(--color-neutral93, #E9ECEF);
+  --tab-label-color-active: var(--color-neutral25, #343C41);
+  --tab-label-color-default: var(--color-neutral35, #4B525A);
+  --app-bottom-tab-bar-bg-color: var(--color-neutral100, #FFFFFF);
 
 }
 
@@ -33,10 +33,10 @@
      OTHER
      ============================================ */
 
-  --tab-bg-color-hover: var(--bild025, #343C41);
-  --tab-label-color-active: var(--bild096, #F2F4F5);
-  --tab-label-color-default: var(--white100, #FFFFFF);
-  --app-bottom-tab-bar-bg-color: var(--bild025, #343C41);
+  --tab-bg-color-hover: var(--color-neutral25, #343C41);
+  --tab-label-color-active: var(--color-neutral96, #F2F4F5);
+  --tab-label-color-default: var(--color-neutral100, #FFFFFF);
+  --app-bottom-tab-bar-bg-color: var(--color-neutral25, #343C41);
 
 }
 
@@ -92,12 +92,3 @@
     --apps-tabs-label-line-height: 23.4;
   }
 }
-
-@media (min-width: 1024px) {
-  [data-brand="bild"] {
-    --android-tabbar-height-size: 74px;
-    --tab-label-font-size-line: 16px;
-    --apps-tabs-label-font-size: 16px;
-    --apps-tabs-label-line-height: 23.4;
-  }
-}

package/dist/css/bild/components/table.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.64
+ * BILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Table Component Tokens
@@ -43,8 +43,6 @@
     --table-column-width-size2x: var(--size27p5x, 220px);
     --table-column-width-size0p5x: var(--size9x, 72px);
     --table-column-width-size1p5x: var(--size22p5x, 180px);
-    --table-column-width-size2p5x: var(--size30x, 240px);
     --table-column-width-size0p75x: var(--size12p5x, 100px);
-    --table-column-width-size3x: var(--size35x, 280px);
   }
 }