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

@marioschmidt/design-system-tokens 1.0.79 → 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 (2480) hide show

package/dist/css/bild/components/button.css CHANGED Viewed

@@ -1,63 +1,17 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Button Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
  */
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="bild"][data-theme="light"],
-:host([data-color-brand="bild"][data-theme="light"]) {
-  --button-primary-brand-bg-color-idle: var(--color-bild-red-50, #DD0000);
-  --button-primary-brand-bg-color-hover: var(--color-bild-red-35, #AF0002);
-  --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
-  --button-primary-success-color-idle: var(--color-green-56, #18995C);
-  --button-primary-success-color-hover: var(--color-green-40, #006E3E);
-  --button-primary-neutral-bg-color-idle: var(--color-neutral-15, #232629);
-  --button-primary-neutral-bg-color-hover: var(--color-neutral-35, #4B525A);
-  --button-tertiary-label-color: var(--color-neutral-35, #4B525A);
-  --button-tertiary-border-color-idle: var(--color-neutral-85, #CED4DA);
-  --button-tertiary-border-color-hover: var(--color-neutral-35, #4B525A);
-  --button-tertiary-success-bg-color-hover: var(--color-green-93, #CEF4E4);
-  --button-tertiary-success-border-color: var(--color-green-56, #18995C);
-  --button-secondary-bg-color-hover: var(--color-neutral-85, #CED4DA);
-  --button-secondary-label-color: var(--color-neutral-35, #4B525A);
-  --button-secondary-bg-color-idle: var(--color-neutral-93, #E9ECEF);
-  --button-live-ticker-load-new-label-color: var(--color-neutral-60, #8C9196);
-  --button-ghost-bg-color-hover: var(--color-neutral-85, #CED4DA);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="bild"][data-theme="dark"],
-:host([data-color-brand="bild"][data-theme="dark"]) {
-  --button-primary-brand-bg-color-idle: var(--color-bild-red-50, #DD0000);
-  --button-primary-brand-bg-color-hover: var(--color-bild-red-35, #AF0002);
-  --button-primary-label-color: var(--color-neutral-100, #FFFFFF);
-  --button-primary-success-color-idle: var(--color-green-56, #18995C);
-  --button-primary-success-color-hover: var(--color-green-40, #006E3E);
-  --button-primary-neutral-bg-color-idle: var(--color-neutral-100, #FFFFFF);
-  --button-primary-neutral-bg-color-hover: var(--color-neutral-93, #E9ECEF);
-  --button-tertiary-label-color: var(--color-neutral-96, #F2F4F5);
-  --button-tertiary-border-color-idle: var(--color-neutral-35, #4B525A);
-  --button-tertiary-border-color-hover: var(--color-neutral-100, #FFFFFF);
-  --button-tertiary-success-bg-color-hover: var(--color-green-56-a-50, rgba(0, 155, 90, 0.5));
-  --button-tertiary-success-border-color: var(--color-green-56, #18995C);
-  --button-secondary-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
-  --button-secondary-label-color: var(--color-neutral-93, #E9ECEF);
-  --button-secondary-bg-color-idle: var(--color-neutral-35, #4B525A);
-  --button-live-ticker-load-new-label-color: var(--color-neutral-96, #F2F4F5);
-  --button-ghost-bg-color-hover: var(--alpha-neutral-85-a-50, rgba(206, 212, 218, 0.5));
-}
 /* === DENSITY TOKENS === */
 [data-content-brand="bild"][data-density="default"],
@@ -70,6 +24,7 @@
   --density-button-stack-space: var(--space-1-x, 8px);
   --density-button-label-font-size: 17px;
   --density-button-inline-space: var(--space-2-p-5-x, 20px);
+  --density-button-height-size: var(--size-5-x, 40px);
 }
@@ -83,6 +38,7 @@
   --density-button-stack-space: var(--space-0-p-75-x, 6px);
   --density-button-label-font-size: 15px;
   --density-button-inline-space: var(--space-2-x, 16px);
+  --density-button-height-size: var(--size-4-p-5-x, 36px);
 }
@@ -96,6 +52,7 @@
   --density-button-stack-space: var(--space-1-p-5-x, 12px);
   --density-button-label-font-size: 19px;
   --density-button-inline-space: var(--space-3-x, 24px);
+  --density-button-height-size: var(--size-6-x, 48px);
 }
@@ -107,18 +64,10 @@
   font-weight: 700;
   font-size: var(--button-label-font-size);
   line-height: var(--button-label-line-height);
-  letter-spacing: var(--letter-spacing-positive-sm);
+  letter-spacing: var(--letter-space-positive-sm);
   text-transform: uppercase;
 }
-[data-content-brand="bild"] .partner-link-button-label,
-:host([data-content-brand="bild"]) .partner-link-button-label {
-  font-family: var(--label-font-family);
-  font-weight: var(--label-font-weight-book);
-  font-size: var(--partner-link-button-label-font-size);
-  line-height: 16px;
-}
 /* === BREAKPOINT TOKENS === */
 [data-content-brand="bild"],
@@ -135,6 +84,7 @@
   --button-stack-space: var(--density-button-stack-space);
   --button-border-radius: var(--border-radius-md);
   --button-label-font-family: var(--label-font-family);
+  --button-height-size: var(--density-button-height-size);
 }
 @media (min-width: 1024px) {
@@ -148,5 +98,34 @@
 [data-color-brand="bild"],
 :host([data-color-brand="bild"]) {
-  --button-live-ticker-load-new-surface-color: var(--surface-color-primary);
+  --button-primary-brand-bg-color-idle: var(--bg-color-brand-solid);
+  --button-primary-brand-bg-color-hover: var(--bg-color-brand-solid-hover);
+  --button-primary-brand-label-color: var(--text-color-primary-on-dark);
+  --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-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);
+  --button-secondary-label-color: var(--text-color-active);
+  --button-secondary-bg-color-idle: var(--bg-color-tertiary);
+  --button-secondary-bg-color-active: var(--bg-color-quaternary);
+  --button-primary-success-bg-color-idle: var(--bg-color-success-solid);
+  --button-primary-success-bg-color-hover: var(--bg-color-success-solid-hover);
+  --button-primary-success-bg-color-active: var(--bg-color-success-solid-active);
+  --button-primary-success-label-color: var(--text-color-primary-on-dark);
+  --button-tertiary-success-bg-color-hover: var(--bg-color-success-tint-hover);
+  --button-tertiary-success-border-color: var(--border-color-success);
+  --button-tertiary-success-label-color: var(--text-color-success);
+  --button-primary-neutral-bg-color-idle: var(--bg-color-primary-inverse);
+  --button-primary-neutral-bg-color-hover: var(--bg-color-tertiary-inverse);
+  --button-primary-neutral-label-color: var(--text-color-inverse-high-contrast);
+  --button-primary-neutral-bg-color-active: var(--bg-color-quaternary-inverse);
+  --button-ghost-bg-color-hover: var(--bg-color-tertiary);
+  --button-ghost-label-color: var(--text-color-active);
+  --button-ghost-bg-color-active: var(--bg-color-quaternary);
+  --button-disabled-label-color: var(--text-color-disabled);
+  --button-disabled-bg-color: var(--bg-color-disabled);
+  --button-disabled-border-color: var(--border-color-disabled);
 }

package/dist/css/bild/components/card.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Card Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -20,7 +20,7 @@
      OTHER
      ============================================ */
-  --card-surface-bg-color: var(--surface-color-primary);
+  --card-surface-bg-color: var(--bg-color-primary);
 }
@@ -32,7 +32,7 @@
      OTHER
      ============================================ */
-  --card-surface-bg-color: var(--surface-color-secondary);
+  --card-surface-bg-color: var(--bg-color-secondary);
 }

package/dist/css/bild/components/carousel.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Carousel Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md

package/dist/css/bild/components/chip.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Chip Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -16,32 +16,16 @@
 [data-color-brand="bild"][data-theme="light"],
 :host([data-color-brand="bild"][data-theme="light"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --chip-bg-color-hover: var(--color-bild-red-35, #AF0002);
-  --chip-label-color-hover: var(--core-color-secondary-constant);
-  --chip-bg-color-active: var(--color-bild-red-50, #DD0000);
-  --chip-bg-color-idle: var(--color-neutral-93, #E9ECEF);
-  --chip-label-color-idle: var(--color-neutral-15, #232629);
+  --chip-bg-color-hover: var(--bg-color-brand-solid-hover);
+  --chip-label-color-hover: var(--text-color-primary-on-dark);
 }
 /* === COLOR TOKENS (DARK MODE) === */
 [data-color-brand="bild"][data-theme="dark"],
 :host([data-color-brand="bild"][data-theme="dark"]) {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --chip-bg-color-hover: var(--color-neutral-85, #CED4DA);
-  --chip-label-color-hover: var(--core-color-tertiary-constant);
-  --chip-bg-color-active: var(--color-neutral-100, #FFFFFF);
-  --chip-bg-color-idle: var(--color-neutral-35, #4B525A);
-  --chip-label-color-idle: var(--color-neutral-100, #FFFFFF);
+  --chip-bg-color-hover: var(--bg-color-tertiary-inverse);
+  --chip-label-color-hover: var(--text-color-primary-on-light);
 }
 /* === TYPOGRAPHY TOKENS === */
@@ -68,3 +52,13 @@
     --chip-font-size: var(--size-2-p-25-x, 18px);
   }
 }
+/* === OTHER TOKENS === */
+[data-color-brand="bild"],
+:host([data-color-brand="bild"]) {
+  --chip-bg-color-active: var(--bg-color-brand-light-only);
+  --chip-bg-color-idle: var(--bg-color-tertiary);
+  --chip-label-color-idle: var(--text-color-idle);
+  --chip-label-color-active: var(--text-color-inverse-high-contrast);
+}

package/dist/css/bild/components/datepicker.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Datepicker Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -16,7 +16,7 @@
 [data-content-brand="bild"],
 :host([data-content-brand="bild"]) {
-  --datepicker-item-day-width-size: 44px;
-  --datepicker-item-height-size: 44px;
+  --datepicker-item-day-width-size: var(--size-5-p-5-x, 44px);
+  --datepicker-item-height-size: var(--size-5-p-5-x, 44px);
   --datepicker-item-year-width-size: 77px;
 }

package/dist/css/bild/components/drawers.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Drawers Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md

package/dist/css/bild/components/dropdown.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Dropdown Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -20,8 +20,8 @@
      OTHER
      ============================================ */
-  --dropdown-bg-color-hover: var(--surface-color-secondary);
-  --dropdown-bg-color-idle: var(--surface-color-primary);
+  --dropdown-bg-color-hover: var(--bg-color-secondary);
+  --dropdown-bg-color-idle: var(--bg-color-primary);
 }
@@ -33,8 +33,8 @@
      OTHER
      ============================================ */
-  --dropdown-bg-color-hover: var(--surface-color-quartenary);
-  --dropdown-bg-color-idle: var(--surface-color-tertiary);
+  --dropdown-bg-color-hover: var(--bg-color-quaternary);
+  --dropdown-bg-color-idle: var(--bg-color-tertiary);
 }

package/dist/css/bild/components/empties.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Empties Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -20,8 +20,8 @@
      OTHER
      ============================================ */
-  --empties-bg-color: var(--surface-color-secondary);
-  --empties-logo-color: var(--color-neutral-85, #CED4DA);
+  --empties-bg-color: var(--bg-color-secondary);
+  --empties-logo-color: var(--bg-color-quaternary);
 }
@@ -33,7 +33,7 @@
      OTHER
      ============================================ */
-  --empties-bg-color: var(--surface-color-tertiary);
-  --empties-logo-color: var(--color-neutral-20, #2C3138);
+  --empties-bg-color: var(--bg-color-tertiary);
+  --empties-logo-color: var(--bg-color-secondary);
 }

package/dist/css/bild/components/footer.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Footer Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -14,43 +14,19 @@
 /* === TYPOGRAPHY TOKENS === */
-[data-content-brand="bild"] .footer-card-link,
-:host([data-content-brand="bild"]) .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);
-  text-decoration: underline;
-}
-[data-content-brand="bild"] .footer-link-separator,
-:host([data-content-brand="bild"]) .footer-link-separator {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
-  font-weight: var(--font-weight-book, 400);
-}
-[data-content-brand="bild"] .footer-links,
-:host([data-content-brand="bild"]) .footer-links {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+[data-content-brand="bild"] .footer-link,
+:host([data-content-brand="bild"]) .footer-link {
+  font-family: var(--body-font-family);
   font-weight: var(--label-font-weight-bold);
   font-size: 11px;
   line-height: 14px;
 }
-[data-content-brand="bild"] .footer-link-user-offer-pages,
-:host([data-content-brand="bild"]) .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="bild"],
 :host([data-content-brand="bild"]) {
   --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;
+  --footer-font-family: var(--body-font-family);
 }

package/dist/css/bild/components/gallery.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Gallery Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md

package/dist/css/bild/components/icon.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: Icon Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md

package/dist/css/bild/components/iconbutton.css ADDED Viewed

@@ -0,0 +1,53 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.2.0
+ * Generated by Style Dictionary v4.2.0
+ *
+ * Brand: Bild | Bundle: IconButton Component Tokens
+ *
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ *
+ * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
+ */
+/* === DENSITY TOKENS === */
+[data-content-brand="bild"][data-density="default"],
+:host([data-content-brand="bild"][data-density="default"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+  --density-icon-button-size: var(--size-6-x, 48px);
+}
+[data-content-brand="bild"][data-density="dense"],
+:host([data-content-brand="bild"][data-density="dense"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+  --density-icon-button-size: var(--size-5-x, 40px);
+}
+[data-content-brand="bild"][data-density="spacious"],
+:host([data-content-brand="bild"][data-density="spacious"]) {
+  /* ============================================
+     OTHER
+     ============================================ */
+  --density-icon-button-size: var(--size-7-x, 56px);
+}
+/* === BREAKPOINT TOKENS === */
+[data-content-brand="bild"],
+:host([data-content-brand="bild"]) {
+  --icon-button-size: var(--density-icon-button-size);
+  --icon-button-border-radius: var(--border-radius-md);
+}

package/dist/css/bild/components/infoelement.css CHANGED Viewed

@@ -1,12 +1,12 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: InfoElement Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md

package/dist/css/bild/components/inputfield.css CHANGED Viewed

@@ -1,41 +1,17 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.79
+ * BILD Design System Tokens v1.2.0
  * Generated by Style Dictionary v4.2.0
  *
  * Brand: Bild | Bundle: InputField Component Tokens
  *
- * Copyright (c) 2025 Axel Springer Deutschland GmbH
+ * Copyright (c) 2026 Axel Springer Deutschland GmbH
  * Proprietary and confidential. All rights reserved.
  *
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
  */
-/* === COLOR TOKENS (LIGHT MODE) === */
-[data-color-brand="bild"][data-theme="light"],
-:host([data-color-brand="bild"][data-theme="light"]) {
-  --input-field-border-color-idle: var(--color-neutral-85, #CED4DA);
-  --input-field-border-color-active: var(--color-neutral-35, #4B525A);
-  --input-field-border-color-dark: var(--color-neutral-60, #8C9196);
-  --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
-  --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
-  --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
-}
-/* === COLOR TOKENS (DARK MODE) === */
-[data-color-brand="bild"][data-theme="dark"],
-:host([data-color-brand="bild"][data-theme="dark"]) {
-  --input-field-border-color-idle: var(--color-neutral-60, #8C9196);
-  --input-field-border-color-active: var(--color-neutral-93, #E9ECEF);
-  --input-field-border-color-dark: var(--color-neutral-85, #CED4DA);
-  --input-field-bg-color-dark-low-contrast: var(--color-neutral-25, #343C41);
-  --input-field-bg-color-dark-medium-contrast: var(--color-neutral-35, #4B525A);
-  --input-field-bg-color-dark-high-contrast: var(--color-neutral-93, #E9ECEF);
-}
 /* === DENSITY TOKENS === */
 [data-content-brand="bild"][data-density="default"],
@@ -48,6 +24,7 @@
   --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;
+  --density-input-field-label-line-height: 17px;
 }
@@ -61,6 +38,7 @@
   --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;
+  --density-input-field-label-line-height: 16px;
 }
@@ -74,14 +52,15 @@
   --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;
+  --density-input-field-label-line-height: 19px;
 }
 /* === TYPOGRAPHY TOKENS === */
-[data-content-brand="bild"] .text-input-field-label,
-:host([data-content-brand="bild"]) .text-input-field-label {
-  font-family: var(--font-family-gotham-xnarrow, Gotham XNarrow);
+[data-content-brand="bild"] .input-field-label,
+:host([data-content-brand="bild"]) .input-field-label {
+  font-family: var(--body-font-family);
   font-weight: var(--label-font-weight-book);
   font-size: 16px;
   line-height: 16px;
@@ -93,19 +72,21 @@
 :host([data-content-brand="bild"]) {
   --input-field-stack-space: var(--density-input-field-stack-space);
   --input-field-inline-space: var(--density-input-field-inline-space);
-  --input-field-mini-label-inline-space: var(--space-0-p-5-x, 4px);
-  --input-field-font-size: var(--density-input-field-label-font-size);
+  --input-field-mini-label-inline-space: var(--inline-space-const-2-xs);
+  --input-field-label-font-size: var(--density-input-field-label-font-size);
   --input-field-imessage-inline-space: var(--inline-space-const-lg);
   --input-field-height-size: var(--density-input-field-height-size);
   --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-gotham-xnarrow, Gotham XNarrow);
+  --input-field-label-font-family: var(--body-font-family);
+  --input-field-label-line-height: var(--density-input-field-label-line-height);
 }
 @media (min-width: 1024px) {
   [data-content-brand="bild"],
 :host([data-content-brand="bild"]) {
     --hey-input-container-inline-space: var(--inline-space-const-lg);
+    --input-field-label-line-height: var(--density-input-field-label-font-size);
   }
 }
@@ -113,5 +94,7 @@
 [data-color-brand="bild"],
 :host([data-color-brand="bild"]) {
-  --input-field-border-color-dark-active: var(--border-color-high-contrast);
+  --input-field-border-color-idle: var(--border-color-idle);
+  --input-field-border-color-active: var(--border-color-selected);
+  --input-field-border-color-disabled: var(--border-color-disabled);
 }