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

@marioschmidt/design-system-tokens 1.0.64 → 1.0.65

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 (3048) hide show

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * SPORTBILD Design System Tokens v1.0.64
+ * SPORTBILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Sportbild | Bundle: Theme (Color tokens + Effects for light/dark mode)
@@ -20,98 +20,98 @@
      ============================================ */
   /* Semantic - Text */
-  --text-color-accent-constant: var(--spobi-blue029, #174482);
-  --text-color-primary: var(--bild015, #232629);
-  --text-color-muted: var(--bild045, #666B70);
-  --text-color-primary-inverse: var(--bild093, #E9ECEF);
-  --text-color-primary-constant: var(--bild015, #232629);
-  --text-color-success-constant: var(--bildgreen040, #006E3E);
-  --text-color-primary-inverse-constant: var(--bild093, #E9ECEF);
-  --text-color-secondary: var(--bild060, #8C9196);
-  --text-color-attention-high: var(--bildred, #DD0000);
-  --text-color-accent: var(--spobi-blue029, #174482);
-  --text-color-attention-medium: var(--bildorange, #FD8227);
-  --text-color-on-dark-surface: var(--white100, #FFFFFF);
+  --text-color-accent-constant: var(--color-spobi-blue29, #174482);
+  --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-spobi-blue29, #174482);
+  --text-color-attention-medium: var(--color-orange67, #FD8227);
+  --text-color-on-dark-surface: var(--color-neutral100, #FFFFFF);
   /* Semantic - Surface */
-  --surface-color-primary: var(--white100, #FFFFFF);
-  --surface-color-secondary: var(--spobi-blue098, #F7F9FD);
-  --surface-color-primary-inverse: var(--spobi-blue010, #081828);
-  --surface-color-primary-constant-light: var(--white100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--spobi-blue010, #081828);
-  --surface-color-quartenary: var(--bild085, #CED4DA);
-  --surface-color-success: var(--bildgreen093, #CEF4E4);
-  --surface-color-tertiary: var(--spobi-blue081, #BDCADB);
+  --surface-color-primary: var(--color-neutral100, #FFFFFF);
+  --surface-color-secondary: var(--color-spobi-blue98, #F7F9FD);
+  --surface-color-primary-inverse: var(--color-spobi-blue10, #081828);
+  --surface-color-primary-constant-light: var(--color-neutral100, #FFFFFF);
+  --surface-color-primary-constant-dark: var(--color-spobi-blue10, #081828);
+  --surface-color-quartenary: var(--color-neutral85, #CED4DA);
+  --surface-color-success: var(--color-green93, #CEF4E4);
+  --surface-color-tertiary: var(--color-spobi-blue81, #BDCADB);
   --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
-  --surface-color-tertiary-inverse: var(--spobi-blue029, #174482);
+  --surface-color-tertiary-inverse: var(--color-spobi-blue29, #174482);
   --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(--bild035, #4B525A);
+  --surface-color-quartenary-inverse: var(--color-neutral35, #4B525A);
   /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--bild060, #8C9196);
-  --headline-color-primary: var(--spobi-blue016, #0A2750);
-  --headline-color-white-const: var(--white100, #FFFFFF);
-  --kicker-text-color-on-red: var(--white100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--white-alpha80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--black-alpha70, rgba(0, 0, 0, 0.7));
+  --kicker-text-color-on-surface: var(--color-neutral60, #8C9196);
+  --headline-color-primary: var(--color-spobi-blue16, #0A2750);
+  --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));
   /* Semantic - State */
-  --color-secondary-active: var(--bild015, #232629);
-  --color-primary-active: var(--spobi-blue029, #174482);
-  --color-secondary-disabled: var(--bild093, #E9ECEF);
-  --color-primary-disabled: var(--bild096, #F2F4F5);
-  --color-secondary-active-inverse: var(--bild096, #F2F4F5);
-  --color-tertiary-active: var(--bildgreen070, #00C373);
-  --color-tertiary-disabled: var(--bild060, #8C9196);
+  --color-secondary-active: var(--color-neutral15, #232629);
+  --color-primary-active: var(--color-spobi-blue29, #174482);
+  --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);
   /* Semantic - Border */
-  --border-color-medium-contrast: var(--bild085, #CED4DA);
-  --border-color-low-contrast: var(--bild093, #E9ECEF);
-  --border-color-high-contrast: var(--bild015, #232629);
-  --border-color-low-contrast-constant: var(--bild093, #E9ECEF);
-  --border-color-success: var(--bildgreen070, #00C373);
-  --border-color-warning: var(--bildred, #DD0000);
-  --border-color-primary-disabled: var(--bild096, #F2F4F5);
-  --border-color-secondary-disabled: var(--bild093, #E9ECEF);
+  --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);
   /* Semantic - Core */
-  --core-color-primary: var(--spobi-blue016, #0A2750);
-  --core-color-secondary: var(--white100, #FFFFFF);
-  --core-color-tertiary: var(--spobi-blue010, #081828);
-  --core-color-secondary-constant: var(--white100, #FFFFFF);
-  --core-color-tertiary-constant: var(--spobi-blue010, #081828);
+  --core-color-primary: var(--color-spobi-blue16, #0A2750);
+  --core-color-secondary: var(--color-neutral100, #FFFFFF);
+  --core-color-tertiary: var(--color-spobi-blue10, #081828);
+  --core-color-secondary-constant: var(--color-neutral100, #FFFFFF);
+  --core-color-tertiary-constant: var(--color-spobi-blue10, #081828);
   /* Semantic - Icon */
-  --icon-color-primary: var(--bild035, #4B525A);
-  --icon-color-inverse: var(--bild085, #CED4DA);
-  --icon-color-secondary-constant: var(--bild060, #8C9196);
-  --icon-color-constant-on-dark: var(--bild096, #F2F4F5);
-  --icon-color-primary-constant: var(--bild035, #4B525A);
-  --icon-color-success: var(--bildgreen070, #00C373);
+  --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);
   /* Semantic - Label */
-  --label-color-primary: var(--bild015, #232629);
-  --label-color-secondary: var(--bild035, #4B525A);
-  --label-color-disabled: var(--bild085, #CED4DA);
-  --label-color-primary-constant: var(--bild015, #232629);
-  --label-color-primary-inverse-constant: var(--bild093, #E9ECEF);
-  --label-color-tertiary: var(--bild060, #8C9196);
-  --label-color-primary-inverse: var(--bild093, #E9ECEF);
+  --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);
   /* Semantic - Attention */
-  --attention-color-high: var(--bildred, #DD0000);
-  --accent-color-primary: var(--spobi-blue029, #174482);
-  --attention-color-medium: var(--bildorange, #FD8227);
-  --attention-color-low: var(--bildyellow, #FFBF00);
-  --accent-color-primary-constant: var(--spobi-blue029, #174482);
-  --attention-color-success-primary: var(--bildgreen070, #00C373);
-  --attention-color-extra-low: var(--white100, #FFFFFF);
-  --attention-color-success-secondary: var(--bildgreen040, #006E3E);
+  --attention-color-high: var(--color-bild-red50, #DD0000);
+  --accent-color-primary: var(--color-spobi-blue29, #174482);
+  --attention-color-medium: var(--color-orange67, #FD8227);
+  --attention-color-low: var(--color-yellow80, #FFBF00);
+  --accent-color-primary-constant: var(--color-spobi-blue29, #174482);
+  --attention-color-success-primary: var(--color-green70, #00C373);
+  --attention-color-extra-low: var(--color-neutral100, #FFFFFF);
+  --attention-color-success-secondary: var(--color-green40, #006E3E);
   /* Semantic - Overlay */
-  --overlay-scrim-black: var(--black-alpha70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--white-alpha70, rgba(255, 255, 255, 0.7));
+  --overlay-scrim-black: var(--alpha-black70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white: var(--alpha-white70, rgba(255, 255, 255, 0.7));
   /* Semantic - LayerOpacity */
   --layer-opacity05: var(--opacity05, 0.05);
@@ -137,98 +137,98 @@
      ============================================ */
   /* Semantic - Text */
-  --text-color-accent-constant: var(--spobi-blue029, #174482);
-  --text-color-primary: var(--bild093, #E9ECEF);
-  --text-color-muted: var(--bild085, #CED4DA);
-  --text-color-primary-inverse: var(--bild015, #232629);
-  --text-color-primary-constant: var(--bild015, #232629);
-  --text-color-success-constant: var(--bildgreen040, #006E3E);
-  --text-color-primary-inverse-constant: var(--bild093, #E9ECEF);
-  --text-color-secondary: var(--bild060, #8C9196);
-  --text-color-attention-high: var(--bildred, #DD0000);
-  --text-color-accent: var(--spobi-blue098, #F7F9FD);
-  --text-color-attention-medium: var(--bildorange, #FD8227);
-  --text-color-on-dark-surface: var(--white100, #FFFFFF);
+  --text-color-accent-constant: var(--color-spobi-blue29, #174482);
+  --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-spobi-blue98, #F7F9FD);
+  --text-color-attention-medium: var(--color-orange67, #FD8227);
+  --text-color-on-dark-surface: var(--color-neutral100, #FFFFFF);
   /* Semantic - Surface */
-  --surface-color-primary: var(--spobi-blue010, #081828);
-  --surface-color-secondary: var(--spobi-blue016, #0A2750);
-  --surface-color-primary-inverse: var(--white100, #FFFFFF);
-  --surface-color-primary-constant-light: var(--white100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--spobi-blue010, #081828);
-  --surface-color-quartenary: var(--bild035, #4B525A);
-  --surface-color-success: var(--bildgreen093, #CEF4E4);
-  --surface-color-tertiary: var(--spobi-blue029, #174482);
+  --surface-color-primary: var(--color-spobi-blue10, #081828);
+  --surface-color-secondary: var(--color-spobi-blue16, #0A2750);
+  --surface-color-primary-inverse: var(--color-neutral100, #FFFFFF);
+  --surface-color-primary-constant-light: var(--color-neutral100, #FFFFFF);
+  --surface-color-primary-constant-dark: var(--color-spobi-blue10, #081828);
+  --surface-color-quartenary: var(--color-neutral35, #4B525A);
+  --surface-color-success: var(--color-green93, #CEF4E4);
+  --surface-color-tertiary: var(--color-spobi-blue29, #174482);
   --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-  --surface-color-tertiary-inverse: var(--spobi-blue081, #BDCADB);
+  --surface-color-tertiary-inverse: var(--color-spobi-blue81, #BDCADB);
   --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(--bild085, #CED4DA);
+  --surface-color-quartenary-inverse: var(--color-neutral85, #CED4DA);
   /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--bild060, #8C9196);
-  --headline-color-primary: var(--white100, #FFFFFF);
-  --headline-color-white-const: var(--white100, #FFFFFF);
-  --kicker-text-color-on-red: var(--white100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--white-alpha80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--black-alpha70, rgba(0, 0, 0, 0.7));
+  --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));
   /* Semantic - State */
-  --color-secondary-active: var(--bild096, #F2F4F5);
-  --color-primary-active: var(--spobi-blue029, #174482);
-  --color-secondary-disabled: var(--bild035, #4B525A);
-  --color-primary-disabled: var(--bild025, #343C41);
-  --color-secondary-active-inverse: var(--bild015, #232629);
-  --color-tertiary-active: var(--bildgreen070, #00C373);
-  --color-tertiary-disabled: var(--bild045, #666B70);
+  --color-secondary-active: var(--color-neutral96, #F2F4F5);
+  --color-primary-active: var(--color-spobi-blue29, #174482);
+  --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);
   /* Semantic - Border */
-  --border-color-medium-contrast: var(--bild045, #666B70);
-  --border-color-low-contrast: var(--bild035, #4B525A);
-  --border-color-high-contrast: var(--white100, #FFFFFF);
-  --border-color-low-contrast-constant: var(--bild093, #E9ECEF);
-  --border-color-success: var(--bildgreen070, #00C373);
-  --border-color-warning: var(--bildred, #DD0000);
-  --border-color-primary-disabled: var(--bild025, #343C41);
-  --border-color-secondary-disabled: var(--bild035, #4B525A);
+  --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);
   /* Semantic - Core */
-  --core-color-primary: var(--spobi-blue016, #0A2750);
-  --core-color-secondary: var(--spobi-blue010, #081828);
-  --core-color-tertiary: var(--white100, #FFFFFF);
-  --core-color-secondary-constant: var(--white100, #FFFFFF);
-  --core-color-tertiary-constant: var(--spobi-blue010, #081828);
+  --core-color-primary: var(--color-spobi-blue16, #0A2750);
+  --core-color-secondary: var(--color-spobi-blue10, #081828);
+  --core-color-tertiary: var(--color-neutral100, #FFFFFF);
+  --core-color-secondary-constant: var(--color-neutral100, #FFFFFF);
+  --core-color-tertiary-constant: var(--color-spobi-blue10, #081828);
   /* Semantic - Icon */
-  --icon-color-primary: var(--bild060, #8C9196);
-  --icon-color-inverse: var(--bild035, #4B525A);
-  --icon-color-secondary-constant: var(--bild060, #8C9196);
-  --icon-color-constant-on-dark: var(--bild096, #F2F4F5);
-  --icon-color-primary-constant: var(--bild035, #4B525A);
-  --icon-color-success: var(--bildgreen070, #00C373);
+  --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);
   /* Semantic - Label */
-  --label-color-primary: var(--bild093, #E9ECEF);
-  --label-color-secondary: var(--bild085, #CED4DA);
-  --label-color-disabled: var(--bild035, #4B525A);
-  --label-color-primary-constant: var(--bild015, #232629);
-  --label-color-primary-inverse-constant: var(--bild093, #E9ECEF);
-  --label-color-tertiary: var(--bild060, #8C9196);
-  --label-color-primary-inverse: var(--bild015, #232629);
+  --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);
   /* Semantic - Attention */
-  --attention-color-high: var(--bildred, #DD0000);
-  --accent-color-primary: var(--spobi-blue098, #F7F9FD);
-  --attention-color-medium: var(--bildorange, #FD8227);
-  --attention-color-low: var(--bildyellow, #FFBF00);
-  --accent-color-primary-constant: var(--spobi-blue029, #174482);
-  --attention-color-success-primary: var(--bildgreen070, #00C373);
-  --attention-color-extra-low: var(--bild025, #343C41);
-  --attention-color-success-secondary: var(--bildgreen040, #006E3E);
+  --attention-color-high: var(--color-bild-red50, #DD0000);
+  --accent-color-primary: var(--color-spobi-blue98, #F7F9FD);
+  --attention-color-medium: var(--color-orange67, #FD8227);
+  --attention-color-low: var(--color-yellow80, #FFBF00);
+  --accent-color-primary-constant: var(--color-spobi-blue29, #174482);
+  --attention-color-success-primary: var(--color-green70, #00C373);
+  --attention-color-extra-low: var(--color-neutral25, #343C41);
+  --attention-color-success-secondary: var(--color-green40, #006E3E);
   /* Semantic - Overlay */
-  --overlay-scrim-black: var(--black-alpha70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--white-alpha70, rgba(255, 255, 255, 0.7));
+  --overlay-scrim-black: var(--alpha-black70, rgba(0, 0, 0, 0.7));
+  --overlay-scrim-white: var(--alpha-white70, rgba(255, 255, 255, 0.7));
   /* Semantic - LayerOpacity */
   --layer-opacity05: var(--opacity05, 0.05);
@@ -280,22 +280,22 @@
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="light"] .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--black-alpha20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--black-alpha10, rgba(0, 0, 0, 0.1));
+  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));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="light"] .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--black-alpha10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  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);
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="light"] .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--black-alpha20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--black-alpha10, rgba(0, 0, 0, 0.1));
+  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));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="light"] .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--black-alpha20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--black-alpha10, rgba(0, 0, 0, 0.1));
+  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));
 }
 /* Effects - Dark */
@@ -330,20 +330,20 @@
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="dark"] .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--black-alpha20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--black-alpha10, rgba(0, 0, 0, 0.1));
+  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));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="dark"] .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--black-alpha10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
+  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);
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="dark"] .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--black-alpha20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--black-alpha10, rgba(0, 0, 0, 0.1));
+  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));
 }
 /* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
 [data-brand="sportbild"][data-theme="dark"] .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--black-alpha20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--black-alpha10, rgba(0, 0, 0, 0.1));
+  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));
 }

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * SPORTBILD Design System Tokens v1.0.64
+ * SPORTBILD Design System Tokens v1.0.65
  * Generated by Style Dictionary v4.0.0
  *
  * Brand: Sportbild | Bundle: Tokens (Responsive breakpoints + Typography + Density)
@@ -12,83 +12,6 @@
  * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
  */
-/* === DENSITY TOKENS === */
-/* Density: default */
-[data-brand="sportbild"][data-density="default"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --density-button-content-gap-space: var(--space1x, 8px);
-  --density-button-stack-space: var(--space1x, 8px);
-  --density-button-label-font-size: 17px;
-  --density-button-inline-space: var(--space2p5x, 20px);
-}
-[data-brand="sportbild"][data-density="default"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --density-input-field-inline-space: var(--space2x, 16px);
-  --density-input-field-stack-space: var(--space1x, 8px);
-  --density-input-field-height-size: var(--size5x, 40px);
-  --density-input-field-label-font-size: 17px;
-}
-/* Density: dense */
-[data-brand="sportbild"][data-density="dense"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --density-button-content-gap-space: var(--space0p75x, 6px);
-  --density-button-stack-space: var(--space0p75x, 6px);
-  --density-button-label-font-size: 15px;
-  --density-button-inline-space: var(--space2x, 16px);
-}
-[data-brand="sportbild"][data-density="dense"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --density-input-field-inline-space: var(--space2x, 16px);
-  --density-input-field-stack-space: var(--space0p75x, 6px);
-  --density-input-field-height-size: var(--size4p5x, 36px);
-  --density-input-field-label-font-size: 16px;
-}
-/* Density: spacious */
-[data-brand="sportbild"][data-density="spacious"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --density-button-content-gap-space: var(--space1x, 8px);
-  --density-button-stack-space: var(--space1p5x, 12px);
-  --density-button-label-font-size: 19px;
-  --density-button-inline-space: var(--space3x, 24px);
-}
-[data-brand="sportbild"][data-density="spacious"] {
-  /* ============================================
-     OTHER
-     ============================================ */
-  --density-input-field-inline-space: var(--space2x, 16px);
-  --density-input-field-stack-space: var(--space1p5x, 12px);
-  --density-input-field-height-size: var(--size6x, 48px);
-  --density-input-field-label-font-size: 19px;
-}
 /* === RESPONSIVE BREAKPOINT TOKENS === */
 [data-brand="sportbild"] {
@@ -202,7 +125,7 @@
   --display3-letter-spacing: var(--letter-space-neg0p5, -0.5);
   --border-radius-xs: var(--size0p25x, 2px);
   --border-radius-md: var(--size1x, 8px);
-  --border-radius-sm: var(--size0-5x, 4px);
+  --border-radius-sm: var(--size0p5x, 4px);
   --border-radius-xl: var(--size3x, 24px);
   --border-radius-lg: var(--size2x, 16px);
   --border-radius-none: var(--size0x, 0px);
@@ -384,16 +307,10 @@
 @media (min-width: 1024px) {
   [data-brand="sportbild"] {
-    --grid-space-resp-lg: var(--space4x, 32px);
-    --grid-space-resp-xl: var(--space8x, 64px);
     --grid-space-resp-base: var(--space2x, 16px);
     --grid-space-resp-sm: var(--space1x, 8px);
     --page-inline-space: var(--space2x, 16px);
     --layout-guide-grid-colums: 12;
-    --section-space-base: var(--space6x, 48px);
-    --section-space-lg: var(--space12x, 96px);
-    --paragraph-end-space: var(--space4x, 32px);
-    --section-space-sm: var(--space4p5x, 36px);
     --breakpoint-min-width-size: 1024px;
     --breakpoint-max-width-size: 1024px;
     --canvas-height-size-web: 768px;
@@ -408,20 +325,17 @@
     --headline1-font-size: 80px;
     --headline2-font-size: 50px;
     --headline3-font-size: 34px;
-    --headline4-font-size: 26px;
     --label1-font-size-responsive: 17px;
-    --callout1-font-size: 24px;
     --footnote1-font-size: 15px;
     --footnote2-font-size: 13px;
     --kicker1-font-size: 32px;
-    --kicker2-font-size: 26px;
     --kicker3-font-size: 22px;
     --kicker4-font-size: 18px;
     --subheadline1-font-size: 26px;
     --quote-font-size: 20px;
+    --body-line-height: 28.05;
     --kicker4-line-height: 19.8;
     --kicker3-line-height: 24.2;
-    --kicker2-line-height: 28.6;
     --kicker1-line-height: 35.2;
     --label1-responsive-line-height: 20.4;
     --display1-line-height: 120;
@@ -436,18 +350,12 @@
     --headline2-line-height: 57.6;
     --headline3-line-height: 39.1;
     --headline4-line-height: 29.9;
-    --callout-line-height: 31.2;
     --subheadline1-line-height: 33.8;
     --letter-spacing-positive-lg: var(--letter-space3, 3);
-    --letter-spacing-negative-sm: var(--letter-space-neg0p25, -0.25);
     --letter-spacing-negative-lg: var(--letter-space-neg3, -3);
     --display1-letter-spacing: var(--letter-space-neg2, -2);
-    --display2-letter-spacing: var(--letter-space-neg1, -1);
-    --display3-letter-spacing: var(--letter-space-neg1, -1);
     --change-on-lg: lg;
-    --change-on-md: md/lg;
     --bp-specific-web: lg;
-    --bp-specific-app: regular;
     --inline-space-resp-sm: var(--space2x, 16px);
     --inline-space-resp-md: var(--space3x, 24px);
     --inline-space-resp-lg: var(--space4x, 32px);
@@ -467,7 +375,6 @@
     --gap-space-resp2-xs: var(--space0p75x, 6px);
     --gap-space-resp3-xl: var(--space12x, 96px);
     --size-resp3-xs: var(--size3x, 24px);
-    --size-resp2-xs: var(--size4x, 32px);
     --size-resp-xs: var(--size6x, 48px);
     --size-resp-sm: var(--size7x, 56px);
     --size-resp-md: var(--size9x, 72px);

package/dist/ios/README.md CHANGED Viewed

@@ -747,6 +747,8 @@ RoundedRectangle(cornerRadius: 8)
 |----------|-------------|
 | [README.md](./README.md) | Project Overview |
 | [README.tokens.md](./README.tokens.md) | All Platforms |
+| [README.css.md](./README.css.md) | CSS Custom Properties |
+| [README.js.md](./README.js.md) | JavaScript/React Integration |
 | [README.android.md](./README.android.md) | Android Jetpack Compose Integration |
 | [CLAUDE.md](./CLAUDE.md) | Build Pipeline Details |

package/dist/ios/brands/advertorial/components/.DSDocsStyles/.DSDocsStylesTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: .DSDocsStyles | Brand: Advertorial

package/dist/ios/brands/advertorial/components/Accordion/AccordionTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: Accordion | Brand: Advertorial

package/dist/ios/brands/advertorial/components/Alert/AlertTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: Alert | Brand: Advertorial

package/dist/ios/brands/advertorial/components/Article/ArticleTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: Article | Brand: Advertorial

package/dist/ios/brands/advertorial/components/AudioPlayer/AudioPlayerTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: AudioPlayer | Brand: Advertorial

package/dist/ios/brands/advertorial/components/Avatar/AvatarTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: Avatar | Brand: Advertorial

package/dist/ios/brands/advertorial/components/Badge/BadgeTokens.swift CHANGED Viewed

@@ -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
 //
 // Component: Badge | Brand: Advertorial