npm - @marioschmidt/design-system-tokens - Versions diffs - 1.0.65 → 1.0.66 - Mend

@marioschmidt/design-system-tokens 1.0.65 → 1.0.66

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 (1635) 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.0.65
+ * BILD Design System Tokens v1.0.66
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Bild | Bundle: Theme (Color tokens + Effects for light/dark mode)
@@ -20,112 +20,112 @@
      ============================================ */
   /* Semantic - Text */
-  --text-color-accent-constant: var(--color-bild-red50, #DD0000);
-  --text-color-primary: var(--color-neutral15, #232629);
-  --text-color-muted: var(--color-neutral45, #666B70);
-  --text-color-primary-inverse: var(--color-neutral93, #E9ECEF);
-  --text-color-primary-constant: var(--color-neutral15, #232629);
-  --text-color-success-constant: var(--color-green40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red50, #DD0000);
-  --text-color-accent: var(--color-bild-red50, #DD0000);
-  --text-color-attention-medium: var(--color-orange67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral100, #FFFFFF);
+  --text-color-accent-constant: var(--color-bild-red-50, #DD0000);
+  --text-color-primary: var(--color-neutral-15, #232629);
+  --text-color-muted: var(--color-neutral-45, #666B70);
+  --text-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
+  --text-color-primary-constant: var(--color-neutral-15, #232629);
+  --text-color-success-constant: var(--color-green-40, #006E3E);
+  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
+  --text-color-secondary: var(--color-neutral-60, #8C9196);
+  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
+  --text-color-accent: var(--color-bild-red-50, #DD0000);
+  --text-color-attention-medium: var(--color-orange-67, #FD8227);
+  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
   /* Semantic - Surface */
-  --surface-color-primary: var(--color-neutral100, #FFFFFF);
-  --surface-color-secondary: var(--color-neutral96, #F2F4F5);
-  --surface-color-primary-inverse: var(--color-neutral15, #232629);
-  --surface-color-primary-constant-light: var(--color-neutral100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-neutral15, #232629);
-  --surface-color-quartenary: var(--color-neutral85, #CED4DA);
-  --surface-color-success: var(--color-green93, #CEF4E4);
-  --surface-color-tertiary: var(--color-neutral93, #E9ECEF);
+  --surface-color-primary: var(--color-neutral-100, #FFFFFF);
+  --surface-color-secondary: var(--color-neutral-96, #F2F4F5);
+  --surface-color-primary-inverse: var(--color-neutral-15, #232629);
+  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
+  --surface-color-primary-constant-dark: var(--color-neutral-15, #232629);
+  --surface-color-quartenary: var(--color-neutral-85, #CED4DA);
+  --surface-color-success: var(--color-green-93, #CEF4E4);
+  --surface-color-tertiary: var(--color-neutral-93, #E9ECEF);
   --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
-  --surface-color-tertiary-inverse: var(--color-neutral25, #343C41);
+  --surface-color-tertiary-inverse: var(--color-neutral-25, #343C41);
   --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
   --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral35, #4B525A);
+  --surface-color-quartenary-inverse: var(--color-neutral-35, #4B525A);
   /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-bild-red50, #DD0000);
-  --headline-color-primary: var(--color-neutral15, #232629);
-  --headline-color-white-const: var(--color-neutral100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black70, rgba(0, 0, 0, 0.7));
+  --kicker-text-color-on-surface: var(--color-bild-red-50, #DD0000);
+  --headline-color-primary: var(--color-neutral-15, #232629);
+  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
+  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
+  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
+  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
   /* Semantic - State */
-  --color-secondary-active: var(--color-neutral15, #232629);
-  --color-primary-active: var(--color-bild-red50, #DD0000);
-  --color-secondary-disabled: var(--color-neutral93, #E9ECEF);
-  --color-primary-disabled: var(--color-neutral96, #F2F4F5);
-  --color-secondary-active-inverse: var(--color-neutral96, #F2F4F5);
-  --color-tertiary-active: var(--color-green70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral60, #8C9196);
+  --color-secondary-active: var(--color-neutral-15, #232629);
+  --color-primary-active: var(--color-bild-red-50, #DD0000);
+  --color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
+  --color-primary-disabled: var(--color-neutral-96, #F2F4F5);
+  --color-secondary-active-inverse: var(--color-neutral-96, #F2F4F5);
+  --color-tertiary-active: var(--color-green-70, #00C373);
+  --color-tertiary-disabled: var(--color-neutral-60, #8C9196);
   /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral85, #CED4DA);
-  --border-color-low-contrast: var(--color-neutral93, #E9ECEF);
-  --border-color-high-contrast: var(--color-neutral15, #232629);
-  --border-color-low-contrast-constant: var(--color-neutral93, #E9ECEF);
-  --border-color-success: var(--color-green70, #00C373);
-  --border-color-warning: var(--color-bild-red50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral96, #F2F4F5);
-  --border-color-secondary-disabled: var(--color-neutral93, #E9ECEF);
+  --border-color-medium-contrast: var(--color-neutral-85, #CED4DA);
+  --border-color-low-contrast: var(--color-neutral-93, #E9ECEF);
+  --border-color-high-contrast: var(--color-neutral-15, #232629);
+  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
+  --border-color-success: var(--color-green-70, #00C373);
+  --border-color-warning: var(--color-bild-red-50, #DD0000);
+  --border-color-primary-disabled: var(--color-neutral-96, #F2F4F5);
+  --border-color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
   /* Semantic - Core */
-  --core-color-primary: var(--color-bild-red50, #DD0000);
-  --core-color-secondary: var(--color-neutral100, #FFFFFF);
-  --core-color-tertiary: var(--color-neutral15, #232629);
-  --core-color-secondary-constant: var(--color-neutral100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-neutral15, #232629);
+  --core-color-primary: var(--color-bild-red-50, #DD0000);
+  --core-color-secondary: var(--color-neutral-100, #FFFFFF);
+  --core-color-tertiary: var(--color-neutral-15, #232629);
+  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
+  --core-color-tertiary-constant: var(--color-neutral-15, #232629);
   /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral35, #4B525A);
-  --icon-color-inverse: var(--color-neutral85, #CED4DA);
-  --icon-color-secondary-constant: var(--color-neutral60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral35, #4B525A);
-  --icon-color-success: var(--color-green70, #00C373);
+  --icon-color-primary: var(--color-neutral-35, #4B525A);
+  --icon-color-inverse: var(--color-neutral-85, #CED4DA);
+  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
+  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
+  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
+  --icon-color-success: var(--color-green-70, #00C373);
   /* Semantic - Label */
-  --label-color-primary: var(--color-neutral15, #232629);
-  --label-color-secondary: var(--color-neutral35, #4B525A);
-  --label-color-disabled: var(--color-neutral85, #CED4DA);
-  --label-color-primary-constant: var(--color-neutral15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral93, #E9ECEF);
+  --label-color-primary: var(--color-neutral-15, #232629);
+  --label-color-secondary: var(--color-neutral-35, #4B525A);
+  --label-color-disabled: var(--color-neutral-85, #CED4DA);
+  --label-color-primary-constant: var(--color-neutral-15, #232629);
+  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
+  --label-color-tertiary: var(--color-neutral-60, #8C9196);
+  --label-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
   /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red50, #DD0000);
-  --accent-color-primary: var(--color-bild-red50, #DD0000);
-  --attention-color-medium: var(--color-orange67, #FD8227);
-  --attention-color-low: var(--color-yellow80, #FFBF00);
-  --accent-color-primary-constant: var(--color-bild-red50, #DD0000);
-  --attention-color-success-primary: var(--color-green70, #00C373);
-  --attention-color-extra-low: var(--color-neutral100, #FFFFFF);
-  --attention-color-success-secondary: var(--color-green40, #006E3E);
+  --attention-color-high: var(--color-bild-red-50, #DD0000);
+  --accent-color-primary: var(--color-bild-red-50, #DD0000);
+  --attention-color-medium: var(--color-orange-67, #FD8227);
+  --attention-color-low: var(--color-yellow-80, #FFBF00);
+  --accent-color-primary-constant: var(--color-bild-red-50, #DD0000);
+  --attention-color-success-primary: var(--color-green-70, #00C373);
+  --attention-color-extra-low: var(--color-neutral-100, #FFFFFF);
+  --attention-color-success-secondary: var(--color-green-40, #006E3E);
   /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white70, rgba(255, 255, 255, 0.7));
+  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
   /* Semantic - LayerOpacity */
-  --layer-opacity05: var(--opacity05, 0.05);
-  --layer-opacity10: var(--opacity10, 0.1);
-  --layer-opacity20: var(--opacity20, 0.2);
-  --layer-opacity30: var(--opacity30, 0.3);
-  --layer-opacity40: var(--opacity40, 0.4);
-  --layer-opacity50: var(--opacity50, 0.5);
-  --layer-opacity60: var(--opacity60, 0.6);
-  --layer-opacity70: var(--opacity70, 0.7);
-  --layer-opacity80: var(--opacity80, 0.8);
-  --layer-opacity90: var(--opacity90, 0.9);
-  --layer-opacity100: var(--opacity100, 1);
-  --layer-opacity00: var(--opacity00, 0);
+  --layer-opacity-05: var(--opacity-05, 0.05);
+  --layer-opacity-10: var(--opacity-10, 0.1);
+  --layer-opacity-20: var(--opacity-20, 0.2);
+  --layer-opacity-30: var(--opacity-30, 0.3);
+  --layer-opacity-40: var(--opacity-40, 0.4);
+  --layer-opacity-50: var(--opacity-50, 0.5);
+  --layer-opacity-60: var(--opacity-60, 0.6);
+  --layer-opacity-70: var(--opacity-70, 0.7);
+  --layer-opacity-80: var(--opacity-80, 0.8);
+  --layer-opacity-90: var(--opacity-90, 0.9);
+  --layer-opacity-100: var(--opacity-100, 1);
+  --layer-opacity-00: var(--opacity-00, 0);
 }
@@ -137,112 +137,112 @@
      ============================================ */
   /* Semantic - Text */
-  --text-color-accent-constant: var(--color-bild-red50, #DD0000);
-  --text-color-primary: var(--color-neutral93, #E9ECEF);
-  --text-color-muted: var(--color-neutral85, #CED4DA);
-  --text-color-primary-inverse: var(--color-neutral15, #232629);
-  --text-color-primary-constant: var(--color-neutral15, #232629);
-  --text-color-success-constant: var(--color-green40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red50, #DD0000);
-  --text-color-accent: var(--color-neutral100, #FFFFFF);
-  --text-color-attention-medium: var(--color-orange67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral100, #FFFFFF);
+  --text-color-accent-constant: var(--color-bild-red-50, #DD0000);
+  --text-color-primary: var(--color-neutral-93, #E9ECEF);
+  --text-color-muted: var(--color-neutral-85, #CED4DA);
+  --text-color-primary-inverse: var(--color-neutral-15, #232629);
+  --text-color-primary-constant: var(--color-neutral-15, #232629);
+  --text-color-success-constant: var(--color-green-40, #006E3E);
+  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
+  --text-color-secondary: var(--color-neutral-60, #8C9196);
+  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
+  --text-color-accent: var(--color-neutral-100, #FFFFFF);
+  --text-color-attention-medium: var(--color-orange-67, #FD8227);
+  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
   /* Semantic - Surface */
-  --surface-color-primary: var(--color-neutral15, #232629);
-  --surface-color-secondary: var(--color-neutral20, #2C3138);
-  --surface-color-primary-inverse: var(--color-neutral100, #FFFFFF);
-  --surface-color-primary-constant-light: var(--color-neutral100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-neutral15, #232629);
-  --surface-color-quartenary: var(--color-neutral35, #4B525A);
-  --surface-color-success: var(--color-green93, #CEF4E4);
-  --surface-color-tertiary: var(--color-neutral25, #343C41);
+  --surface-color-primary: var(--color-neutral-15, #232629);
+  --surface-color-secondary: var(--color-neutral-20, #2C3138);
+  --surface-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
+  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
+  --surface-color-primary-constant-dark: var(--color-neutral-15, #232629);
+  --surface-color-quartenary: var(--color-neutral-35, #4B525A);
+  --surface-color-success: var(--color-green-93, #CEF4E4);
+  --surface-color-tertiary: var(--color-neutral-25, #343C41);
   --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-  --surface-color-tertiary-inverse: var(--color-neutral93, #E9ECEF);
+  --surface-color-tertiary-inverse: var(--color-neutral-93, #E9ECEF);
   --surface-color-primary-gradient-stop: rgba(35, 38, 41, 0);
   --surface-color-secondary-gradient-stop: rgba(44, 49, 56, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral85, #CED4DA);
+  --surface-color-quartenary-inverse: var(--color-neutral-85, #CED4DA);
   /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral60, #8C9196);
-  --headline-color-primary: var(--color-neutral100, #FFFFFF);
-  --headline-color-white-const: var(--color-neutral100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black70, rgba(0, 0, 0, 0.7));
+  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
+  --headline-color-primary: var(--color-neutral-100, #FFFFFF);
+  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
+  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
+  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
+  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
   /* Semantic - State */
-  --color-secondary-active: var(--color-neutral96, #F2F4F5);
-  --color-primary-active: var(--color-bild-red50, #DD0000);
-  --color-secondary-disabled: var(--color-neutral35, #4B525A);
-  --color-primary-disabled: var(--color-neutral25, #343C41);
-  --color-secondary-active-inverse: var(--color-neutral15, #232629);
-  --color-tertiary-active: var(--color-green70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral45, #666B70);
+  --color-secondary-active: var(--color-neutral-96, #F2F4F5);
+  --color-primary-active: var(--color-bild-red-50, #DD0000);
+  --color-secondary-disabled: var(--color-neutral-35, #4B525A);
+  --color-primary-disabled: var(--color-neutral-25, #343C41);
+  --color-secondary-active-inverse: var(--color-neutral-15, #232629);
+  --color-tertiary-active: var(--color-green-70, #00C373);
+  --color-tertiary-disabled: var(--color-neutral-45, #666B70);
   /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral45, #666B70);
-  --border-color-low-contrast: var(--color-neutral35, #4B525A);
-  --border-color-high-contrast: var(--color-neutral100, #FFFFFF);
-  --border-color-low-contrast-constant: var(--color-neutral93, #E9ECEF);
-  --border-color-success: var(--color-green70, #00C373);
-  --border-color-warning: var(--color-bild-red50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral25, #343C41);
-  --border-color-secondary-disabled: var(--color-neutral35, #4B525A);
+  --border-color-medium-contrast: var(--color-neutral-45, #666B70);
+  --border-color-low-contrast: var(--color-neutral-35, #4B525A);
+  --border-color-high-contrast: var(--color-neutral-100, #FFFFFF);
+  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
+  --border-color-success: var(--color-green-70, #00C373);
+  --border-color-warning: var(--color-bild-red-50, #DD0000);
+  --border-color-primary-disabled: var(--color-neutral-25, #343C41);
+  --border-color-secondary-disabled: var(--color-neutral-35, #4B525A);
   /* Semantic - Core */
-  --core-color-primary: var(--color-bild-red50, #DD0000);
-  --core-color-secondary: var(--color-neutral15, #232629);
-  --core-color-tertiary: var(--color-neutral100, #FFFFFF);
-  --core-color-secondary-constant: var(--color-neutral100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-neutral15, #232629);
+  --core-color-primary: var(--color-bild-red-50, #DD0000);
+  --core-color-secondary: var(--color-neutral-15, #232629);
+  --core-color-tertiary: var(--color-neutral-100, #FFFFFF);
+  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
+  --core-color-tertiary-constant: var(--color-neutral-15, #232629);
   /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral60, #8C9196);
-  --icon-color-inverse: var(--color-neutral35, #4B525A);
-  --icon-color-secondary-constant: var(--color-neutral60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral35, #4B525A);
-  --icon-color-success: var(--color-green70, #00C373);
+  --icon-color-primary: var(--color-neutral-60, #8C9196);
+  --icon-color-inverse: var(--color-neutral-35, #4B525A);
+  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
+  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
+  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
+  --icon-color-success: var(--color-green-70, #00C373);
   /* Semantic - Label */
-  --label-color-primary: var(--color-neutral93, #E9ECEF);
-  --label-color-secondary: var(--color-neutral85, #CED4DA);
-  --label-color-disabled: var(--color-neutral35, #4B525A);
-  --label-color-primary-constant: var(--color-neutral15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral15, #232629);
+  --label-color-primary: var(--color-neutral-93, #E9ECEF);
+  --label-color-secondary: var(--color-neutral-85, #CED4DA);
+  --label-color-disabled: var(--color-neutral-35, #4B525A);
+  --label-color-primary-constant: var(--color-neutral-15, #232629);
+  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
+  --label-color-tertiary: var(--color-neutral-60, #8C9196);
+  --label-color-primary-inverse: var(--color-neutral-15, #232629);
   /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red50, #DD0000);
-  --accent-color-primary: var(--color-neutral100, #FFFFFF);
-  --attention-color-medium: var(--color-orange67, #FD8227);
-  --attention-color-low: var(--color-yellow80, #FFBF00);
-  --accent-color-primary-constant: var(--color-bild-red50, #DD0000);
-  --attention-color-success-primary: var(--color-green70, #00C373);
-  --attention-color-extra-low: var(--color-neutral25, #343C41);
-  --attention-color-success-secondary: var(--color-green40, #006E3E);
+  --attention-color-high: var(--color-bild-red-50, #DD0000);
+  --accent-color-primary: var(--color-neutral-100, #FFFFFF);
+  --attention-color-medium: var(--color-orange-67, #FD8227);
+  --attention-color-low: var(--color-yellow-80, #FFBF00);
+  --accent-color-primary-constant: var(--color-bild-red-50, #DD0000);
+  --attention-color-success-primary: var(--color-green-70, #00C373);
+  --attention-color-extra-low: var(--color-neutral-25, #343C41);
+  --attention-color-success-secondary: var(--color-green-40, #006E3E);
   /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white70, rgba(255, 255, 255, 0.7));
+  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
   /* Semantic - LayerOpacity */
-  --layer-opacity05: var(--opacity05, 0.05);
-  --layer-opacity10: var(--opacity10, 0.1);
-  --layer-opacity20: var(--opacity20, 0.2);
-  --layer-opacity30: var(--opacity30, 0.3);
-  --layer-opacity40: var(--opacity40, 0.4);
-  --layer-opacity50: var(--opacity50, 0.5);
-  --layer-opacity60: var(--opacity60, 0.6);
-  --layer-opacity70: var(--opacity70, 0.7);
-  --layer-opacity80: var(--opacity80, 0.8);
-  --layer-opacity90: var(--opacity90, 0.9);
-  --layer-opacity100: var(--opacity100, 1);
-  --layer-opacity00: var(--opacity00, 0);
+  --layer-opacity-05: var(--opacity-05, 0.05);
+  --layer-opacity-10: var(--opacity-10, 0.1);
+  --layer-opacity-20: var(--opacity-20, 0.2);
+  --layer-opacity-30: var(--opacity-30, 0.3);
+  --layer-opacity-40: var(--opacity-40, 0.4);
+  --layer-opacity-50: var(--opacity-50, 0.5);
+  --layer-opacity-60: var(--opacity-60, 0.6);
+  --layer-opacity-70: var(--opacity-70, 0.7);
+  --layer-opacity-80: var(--opacity-80, 0.8);
+  --layer-opacity-90: var(--opacity-90, 0.9);
+  --layer-opacity-100: var(--opacity-100, 1);
+  --layer-opacity-00: var(--opacity-00, 0);
 }
@@ -280,22 +280,22 @@
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="light"] .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="light"] .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="light"] .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="light"] .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 /* Effects - Dark */
@@ -330,20 +330,20 @@
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="dark"] .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="dark"] .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="dark"] .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="bild"][data-theme="dark"] .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black10, rgba(0, 0, 0, 0.1));
+  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
 }