npm - @marioschmidt/design-system-tokens - Versions diffs - 1.1.0 → 1.2.0 - Mend

@marioschmidt/design-system-tokens 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1690) hide show

package/dist/css/bild/theme.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Theme (Color tokens + Effects for light/dark mode)
@@ -126,11 +126,10 @@
   --border-color-success: var(--color-green-40, #006E3E);
   --border-color-error: var(--color-bild-red-50, #DD0000);
   --border-color-warning: var(--color-orange-50, #C65502);
-  --border-color-info: var(--color-neutral-60, #8C9196);
   /* Semantic - Border - Interactive */
   --border-color-disabled: var(--color-neutral-90, #DDE1E2);
-  --border-color-focus: var(--color-neutral-30, #40464D);
+  --border-color-selected: var(--color-neutral-30, #40464D);
   --border-color-active: var(--color-bild-red-50, #DD0000);
   --border-color-idle: var(--color-neutral-60, #8C9196);
@@ -308,11 +307,10 @@
   --border-color-success: var(--color-green-70, #00C373);
   --border-color-error: var(--color-bild-red-70, #FF8989);
   --border-color-warning: var(--color-orange-70, #FD8227);
-  --border-color-info: var(--color-neutral-40, #565A5F);
   /* Semantic - Border - Interactive */
   --border-color-disabled: var(--color-neutral-25, #343C41);
-  --border-color-focus: var(--color-neutral-80, #C4C9CF);
+  --border-color-selected: var(--color-neutral-80, #C4C9CF);
   --border-color-active: var(--color-bild-red-60, #F75849);
   --border-color-idle: var(--color-neutral-50, #6E787C);

package/dist/css/bild/tokens.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Tokens (Responsive breakpoints + Typography + Density)
@@ -519,18 +519,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-4-x, 32px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 12px;
-  --density-md-stack-space-resp-md: 16px;
-  --density-md-stack-space-resp-lg: 24px;
-  --density-md-stack-space-resp-xl: 32px;
-  --density-md-stack-space-resp-2-xl: 48px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-xl: var(--space-4-x, 32px);
+  --density-md-stack-space-resp-2-xl: var(--space-6-x, 48px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 16px;
-  --density-lg-stack-space-resp-md: 24px;
-  --density-lg-stack-space-resp-lg: 32px;
-  --density-lg-stack-space-resp-xl: 40px;
-  --density-lg-stack-space-resp-2-xl: 64px;
+  --density-lg-stack-space-resp-sm: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-md: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-lg: var(--space-4-x, 32px);
+  --density-lg-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-2-xl: var(--space-8-x, 64px);
 }
@@ -565,18 +565,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-3-x, 24px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 8px;
-  --density-md-stack-space-resp-md: 12px;
-  --density-md-stack-space-resp-lg: 16px;
-  --density-md-stack-space-resp-xl: 24px;
-  --density-md-stack-space-resp-2-xl: 36px;
+  --density-md-stack-space-resp-sm: var(--space-1-x, 8px);
+  --density-md-stack-space-resp-md: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-lg: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-xl: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-2-xl: var(--space-4-p-5-x, 36px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 12px;
-  --density-lg-stack-space-resp-md: 16px;
-  --density-lg-stack-space-resp-lg: 24px;
-  --density-lg-stack-space-resp-xl: 28px;
-  --density-lg-stack-space-resp-2-xl: 48px;
+  --density-lg-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-lg-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-2-xl: var(--space-6-x, 48px);
 }
@@ -611,17 +611,17 @@
   --density-sm-stack-space-resp-2-xl: var(--space-5-x, 40px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 14px;
-  --density-md-stack-space-resp-md: 20px;
-  --density-md-stack-space-resp-lg: 28px;
-  --density-md-stack-space-resp-xl: 40px;
-  --density-md-stack-space-resp-2-xl: 60px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-75-x, 14px);
+  --density-md-stack-space-resp-md: var(--space-2-p-5-x, 20px);
+  --density-md-stack-space-resp-lg: var(--space-3-p-5-x, 28px);
+  --density-md-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-md-stack-space-resp-2-xl: var(--space-7-p-5-x, 60px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 20px;
-  --density-lg-stack-space-resp-md: 28px;
-  --density-lg-stack-space-resp-lg: 40px;
-  --density-lg-stack-space-resp-xl: 48px;
-  --density-lg-stack-space-resp-2-xl: 80px;
+  --density-lg-stack-space-resp-sm: var(--space-2-p-5-x, 20px);
+  --density-lg-stack-space-resp-md: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-lg: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-xl: var(--space-6-x, 48px);
+  --density-lg-stack-space-resp-2-xl: var(--space-10-x, 80px);
 }

package/dist/css/bundles/advertorial.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Advertorial | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -875,18 +875,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-4-x, 32px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 12px;
-  --density-md-stack-space-resp-md: 16px;
-  --density-md-stack-space-resp-lg: 24px;
-  --density-md-stack-space-resp-xl: 32px;
-  --density-md-stack-space-resp-2-xl: 48px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-xl: var(--space-4-x, 32px);
+  --density-md-stack-space-resp-2-xl: var(--space-6-x, 48px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 16px;
-  --density-lg-stack-space-resp-md: 24px;
-  --density-lg-stack-space-resp-lg: 32px;
-  --density-lg-stack-space-resp-xl: 40px;
-  --density-lg-stack-space-resp-2-xl: 64px;
+  --density-lg-stack-space-resp-sm: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-md: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-lg: var(--space-4-x, 32px);
+  --density-lg-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-2-xl: var(--space-8-x, 64px);
 }
@@ -921,18 +921,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-3-x, 24px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 8px;
-  --density-md-stack-space-resp-md: 12px;
-  --density-md-stack-space-resp-lg: 16px;
-  --density-md-stack-space-resp-xl: 24px;
-  --density-md-stack-space-resp-2-xl: 36px;
+  --density-md-stack-space-resp-sm: var(--space-1-x, 8px);
+  --density-md-stack-space-resp-md: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-lg: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-xl: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-2-xl: var(--space-4-p-5-x, 36px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 12px;
-  --density-lg-stack-space-resp-md: 16px;
-  --density-lg-stack-space-resp-lg: 24px;
-  --density-lg-stack-space-resp-xl: 28px;
-  --density-lg-stack-space-resp-2-xl: 48px;
+  --density-lg-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-lg-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-2-xl: var(--space-6-x, 48px);
 }
@@ -967,18 +967,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-5-x, 40px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 14px;
-  --density-md-stack-space-resp-md: 20px;
-  --density-md-stack-space-resp-lg: 28px;
-  --density-md-stack-space-resp-xl: 40px;
-  --density-md-stack-space-resp-2-xl: 60px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-75-x, 14px);
+  --density-md-stack-space-resp-md: var(--space-2-p-5-x, 20px);
+  --density-md-stack-space-resp-lg: var(--space-3-p-5-x, 28px);
+  --density-md-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-md-stack-space-resp-2-xl: var(--space-7-p-5-x, 60px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 20px;
-  --density-lg-stack-space-resp-md: 28px;
-  --density-lg-stack-space-resp-lg: 40px;
-  --density-lg-stack-space-resp-xl: 48px;
-  --density-lg-stack-space-resp-2-xl: 80px;
+  --density-lg-stack-space-resp-sm: var(--space-2-p-5-x, 20px);
+  --density-lg-stack-space-resp-md: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-lg: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-xl: var(--space-6-x, 48px);
+  --density-lg-stack-space-resp-2-xl: var(--space-10-x, 80px);
 }
@@ -990,16 +990,6 @@
 /* === TYPOGRAPHY TOKENS === */
-[data-content-brand="advertorial"] .accordion-label,
-:host([data-content-brand="advertorial"]) .accordion-label {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-1-font-size);
-  line-height: var(--label-1-line-height);
-}
-/* === TYPOGRAPHY TOKENS === */
 [data-content-brand="advertorial"] .article-kicker,
 :host([data-content-brand="advertorial"]) .article-kicker {
   font-family: var(--kicker-font-family);
@@ -1129,7 +1119,7 @@
 [data-content-brand="advertorial"] .video-ad-badge,
 :host([data-content-brand="advertorial"]) .video-ad-badge {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-family: var(--body-font-family);
   font-weight: var(--font-weight-book, 400);
   font-size: 14px;
   text-transform: uppercase;

package/dist/css/bundles/bild.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -484,11 +484,10 @@
   --border-color-success: var(--color-green-40, #006E3E);
   --border-color-error: var(--color-bild-red-50, #DD0000);
   --border-color-warning: var(--color-orange-50, #C65502);
-  --border-color-info: var(--color-neutral-60, #8C9196);
   /* Semantic - Border - Interactive */
   --border-color-disabled: var(--color-neutral-90, #DDE1E2);
-  --border-color-focus: var(--color-neutral-30, #40464D);
+  --border-color-selected: var(--color-neutral-30, #40464D);
   --border-color-active: var(--color-bild-red-50, #DD0000);
   --border-color-idle: var(--color-neutral-60, #8C9196);
@@ -666,11 +665,10 @@
   --border-color-success: var(--color-green-70, #00C373);
   --border-color-error: var(--color-bild-red-70, #FF8989);
   --border-color-warning: var(--color-orange-70, #FD8227);
-  --border-color-info: var(--color-neutral-40, #565A5F);
   /* Semantic - Border - Interactive */
   --border-color-disabled: var(--color-neutral-25, #343C41);
-  --border-color-focus: var(--color-neutral-80, #C4C9CF);
+  --border-color-selected: var(--color-neutral-80, #C4C9CF);
   --border-color-active: var(--color-bild-red-60, #F75849);
   --border-color-idle: var(--color-neutral-50, #6E787C);
@@ -1349,18 +1347,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-4-x, 32px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 12px;
-  --density-md-stack-space-resp-md: 16px;
-  --density-md-stack-space-resp-lg: 24px;
-  --density-md-stack-space-resp-xl: 32px;
-  --density-md-stack-space-resp-2-xl: 48px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-xl: var(--space-4-x, 32px);
+  --density-md-stack-space-resp-2-xl: var(--space-6-x, 48px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 16px;
-  --density-lg-stack-space-resp-md: 24px;
-  --density-lg-stack-space-resp-lg: 32px;
-  --density-lg-stack-space-resp-xl: 40px;
-  --density-lg-stack-space-resp-2-xl: 64px;
+  --density-lg-stack-space-resp-sm: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-md: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-lg: var(--space-4-x, 32px);
+  --density-lg-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-2-xl: var(--space-8-x, 64px);
 }
@@ -1395,18 +1393,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-3-x, 24px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 8px;
-  --density-md-stack-space-resp-md: 12px;
-  --density-md-stack-space-resp-lg: 16px;
-  --density-md-stack-space-resp-xl: 24px;
-  --density-md-stack-space-resp-2-xl: 36px;
+  --density-md-stack-space-resp-sm: var(--space-1-x, 8px);
+  --density-md-stack-space-resp-md: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-lg: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-xl: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-2-xl: var(--space-4-p-5-x, 36px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 12px;
-  --density-lg-stack-space-resp-md: 16px;
-  --density-lg-stack-space-resp-lg: 24px;
-  --density-lg-stack-space-resp-xl: 28px;
-  --density-lg-stack-space-resp-2-xl: 48px;
+  --density-lg-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-lg-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-2-xl: var(--space-6-x, 48px);
 }
@@ -1441,18 +1439,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-5-x, 40px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 14px;
-  --density-md-stack-space-resp-md: 20px;
-  --density-md-stack-space-resp-lg: 28px;
-  --density-md-stack-space-resp-xl: 40px;
-  --density-md-stack-space-resp-2-xl: 60px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-75-x, 14px);
+  --density-md-stack-space-resp-md: var(--space-2-p-5-x, 20px);
+  --density-md-stack-space-resp-lg: var(--space-3-p-5-x, 28px);
+  --density-md-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-md-stack-space-resp-2-xl: var(--space-7-p-5-x, 60px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 20px;
-  --density-lg-stack-space-resp-md: 28px;
-  --density-lg-stack-space-resp-lg: 40px;
-  --density-lg-stack-space-resp-xl: 48px;
-  --density-lg-stack-space-resp-2-xl: 80px;
+  --density-lg-stack-space-resp-sm: var(--space-2-p-5-x, 20px);
+  --density-lg-stack-space-resp-md: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-lg: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-xl: var(--space-6-x, 48px);
+  --density-lg-stack-space-resp-2-xl: var(--space-10-x, 80px);
 }
@@ -1462,16 +1460,6 @@
    COMPONENTS
    ============================================================ */
-/* === TYPOGRAPHY TOKENS === */
-[data-content-brand="bild"] .accordion-label,
-:host([data-content-brand="bild"]) .accordion-label {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-1-font-size);
-  line-height: var(--label-1-line-height);
-}
 /* === OTHER TOKENS === */
 /* === TYPOGRAPHY TOKENS === */
@@ -1626,7 +1614,7 @@
 [data-content-brand="bild"] .video-ad-badge,
 :host([data-content-brand="bild"]) .video-ad-badge {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-family: var(--body-font-family);
   font-weight: var(--font-weight-book, 400);
   font-size: 14px;
   text-transform: uppercase;
@@ -1851,7 +1839,7 @@
   --button-primary-brand-bg-color-active: var(--bg-color-brand-solid-active);
   --button-tertiary-neutral-label-color: var(--text-color-active);
   --button-tertiary-neutral-border-color-idle: var(--border-color-idle);
-  --button-tertiary-neutral-border-color-hover: var(--border-color-focus);
+  --button-tertiary-neutral-border-color-hover: var(--border-color-selected);
   --button-tertiary-neutral-bg-color-hover: var(--bg-color-secondary);
   --button-tertiary-neutral-bg-color-active: var(--bg-color-tertiary);
   --button-secondary-bg-color-hover: var(--bg-color-quaternary);
@@ -2283,7 +2271,7 @@
 [data-color-brand="bild"],
 :host([data-color-brand="bild"]) {
   --input-field-border-color-idle: var(--border-color-idle);
-  --input-field-border-color-active: var(--border-color-focus);
+  --input-field-border-color-active: var(--border-color-selected);
   --input-field-border-color-disabled: var(--border-color-disabled);
 }

package/dist/css/bundles/sportbild.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Sportbild | Bundle: Full Bundle (Primitives + Theme + Tokens + Components)
@@ -484,11 +484,10 @@
   --border-color-success: var(--color-green-40, #006E3E);
   --border-color-error: var(--color-bild-red-50, #DD0000);
   --border-color-warning: var(--color-orange-50, #C65502);
-  --border-color-info: var(--color-neutral-60, #8C9196);
   /* Semantic - Border - Interactive */
   --border-color-disabled: var(--color-spobi-blue-90, #D6E1F2);
-  --border-color-focus: var(--color-spobi-blue-30, #174482);
+  --border-color-selected: var(--color-spobi-blue-30, #174482);
   --border-color-active: var(--color-spobi-blue-30, #174482);
   --border-color-idle: var(--color-spobi-blue-60, #6A91CF);
@@ -666,11 +665,10 @@
   --border-color-success: var(--color-green-70, #00C373);
   --border-color-error: var(--color-bild-red-70, #FF8989);
   --border-color-warning: var(--color-orange-70, #FD8227);
-  --border-color-info: var(--color-neutral-40, #565A5F);
   /* Semantic - Border - Interactive */
   --border-color-disabled: var(--color-spobi-blue-25, #113B72);
-  --border-color-focus: var(--color-spobi-blue-70, #8FACDB);
+  --border-color-selected: var(--color-spobi-blue-70, #8FACDB);
   --border-color-active: var(--color-spobi-blue-60, #6A91CF);
   --border-color-idle: var(--color-spobi-blue-50, #4676C3);
@@ -1354,18 +1352,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-4-x, 32px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 12px;
-  --density-md-stack-space-resp-md: 16px;
-  --density-md-stack-space-resp-lg: 24px;
-  --density-md-stack-space-resp-xl: 32px;
-  --density-md-stack-space-resp-2-xl: 48px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-xl: var(--space-4-x, 32px);
+  --density-md-stack-space-resp-2-xl: var(--space-6-x, 48px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 16px;
-  --density-lg-stack-space-resp-md: 24px;
-  --density-lg-stack-space-resp-lg: 32px;
-  --density-lg-stack-space-resp-xl: 40px;
-  --density-lg-stack-space-resp-2-xl: 64px;
+  --density-lg-stack-space-resp-sm: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-md: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-lg: var(--space-4-x, 32px);
+  --density-lg-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-2-xl: var(--space-8-x, 64px);
 }
@@ -1400,18 +1398,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-3-x, 24px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 8px;
-  --density-md-stack-space-resp-md: 12px;
-  --density-md-stack-space-resp-lg: 16px;
-  --density-md-stack-space-resp-xl: 24px;
-  --density-md-stack-space-resp-2-xl: 36px;
+  --density-md-stack-space-resp-sm: var(--space-1-x, 8px);
+  --density-md-stack-space-resp-md: var(--space-1-p-5-x, 12px);
+  --density-md-stack-space-resp-lg: var(--space-2-x, 16px);
+  --density-md-stack-space-resp-xl: var(--space-3-x, 24px);
+  --density-md-stack-space-resp-2-xl: var(--space-4-p-5-x, 36px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 12px;
-  --density-lg-stack-space-resp-md: 16px;
-  --density-lg-stack-space-resp-lg: 24px;
-  --density-lg-stack-space-resp-xl: 28px;
-  --density-lg-stack-space-resp-2-xl: 48px;
+  --density-lg-stack-space-resp-sm: var(--space-1-p-5-x, 12px);
+  --density-lg-stack-space-resp-md: var(--space-2-x, 16px);
+  --density-lg-stack-space-resp-lg: var(--space-3-x, 24px);
+  --density-lg-stack-space-resp-xl: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-2-xl: var(--space-6-x, 48px);
 }
@@ -1446,18 +1444,18 @@
   --density-sm-stack-space-resp-2-xl: var(--space-5-x, 40px);
   /* Global - StackSpace - Responsive - Md */
-  --density-md-stack-space-resp-sm: 14px;
-  --density-md-stack-space-resp-md: 20px;
-  --density-md-stack-space-resp-lg: 28px;
-  --density-md-stack-space-resp-xl: 40px;
-  --density-md-stack-space-resp-2-xl: 60px;
+  --density-md-stack-space-resp-sm: var(--space-1-p-75-x, 14px);
+  --density-md-stack-space-resp-md: var(--space-2-p-5-x, 20px);
+  --density-md-stack-space-resp-lg: var(--space-3-p-5-x, 28px);
+  --density-md-stack-space-resp-xl: var(--space-5-x, 40px);
+  --density-md-stack-space-resp-2-xl: var(--space-7-p-5-x, 60px);
   /* Global - StackSpace - Responsive - Lg */
-  --density-lg-stack-space-resp-sm: 20px;
-  --density-lg-stack-space-resp-md: 28px;
-  --density-lg-stack-space-resp-lg: 40px;
-  --density-lg-stack-space-resp-xl: 48px;
-  --density-lg-stack-space-resp-2-xl: 80px;
+  --density-lg-stack-space-resp-sm: var(--space-2-p-5-x, 20px);
+  --density-lg-stack-space-resp-md: var(--space-3-p-5-x, 28px);
+  --density-lg-stack-space-resp-lg: var(--space-5-x, 40px);
+  --density-lg-stack-space-resp-xl: var(--space-6-x, 48px);
+  --density-lg-stack-space-resp-2-xl: var(--space-10-x, 80px);
 }
@@ -1467,16 +1465,6 @@
    COMPONENTS
    ============================================================ */
-/* === TYPOGRAPHY TOKENS === */
-[data-content-brand="sportbild"] .accordion-label,
-:host([data-content-brand="sportbild"]) .accordion-label {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-bold);
-  font-size: var(--label-1-font-size);
-  line-height: var(--label-1-line-height);
-}
 /* === OTHER TOKENS === */
 /* === TYPOGRAPHY TOKENS === */
@@ -1632,7 +1620,7 @@
 [data-content-brand="sportbild"] .video-ad-badge,
 :host([data-content-brand="sportbild"]) .video-ad-badge {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+  font-family: var(--body-font-family);
   font-weight: var(--font-weight-book, 400);
   font-size: 14px;
   text-transform: uppercase;
@@ -1858,7 +1846,7 @@
   --button-primary-brand-bg-color-active: var(--bg-color-brand-solid-active);
   --button-tertiary-neutral-label-color: var(--text-color-active);
   --button-tertiary-neutral-border-color-idle: var(--border-color-idle);
-  --button-tertiary-neutral-border-color-hover: var(--border-color-focus);
+  --button-tertiary-neutral-border-color-hover: var(--border-color-selected);
   --button-tertiary-neutral-bg-color-hover: var(--bg-color-secondary);
   --button-tertiary-neutral-bg-color-active: var(--bg-color-tertiary);
   --button-secondary-bg-color-hover: var(--bg-color-quaternary);
@@ -2290,7 +2278,7 @@
 [data-color-brand="sportbild"],
 :host([data-color-brand="sportbild"]) {
   --input-field-border-color-idle: var(--border-color-idle);
-  --input-field-border-color-active: var(--border-color-focus);
+  --input-field-border-color-active: var(--border-color-selected);
   --input-field-border-color-disabled: var(--border-color-disabled);
 }

package/dist/css/shared/colorprimitive.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Copyright (c) 2026 Axel Springer Deutschland GmbH

package/dist/css/shared/fontprimitive.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Copyright (c) 2026 Axel Springer Deutschland GmbH

package/dist/css/shared/primitives.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Bundle: Primitives (Base values: space, size, colors, fonts)

package/dist/css/shared/sizeprimitive.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Copyright (c) 2026 Axel Springer Deutschland GmbH

package/dist/css/shared/spaceprimitive.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Copyright (c) 2026 Axel Springer Deutschland GmbH

package/dist/css/sportbild/components/_dsysdoc.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Sportbild | Bundle: _DSysDoc Component Tokens

package/dist/css/sportbild/components/_dsysdocs.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Sportbild | Bundle: _DSysDocs Component Tokens

package/dist/css/sportbild/components/alert.css CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.1.0
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Sportbild | Bundle: Alert Component Tokens