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

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

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.63
+ * 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"] {
@@ -188,21 +111,21 @@
   --headline4-line-height: 23.1;
   --callout-line-height: 23.4;
   --subheadline1-line-height: 23.4;
-  --letter-spacing-positive-sm: var(--letter-space0-5, 0.5);
+  --letter-spacing-positive-sm: var(--letter-space0p5, 0.5);
   --letter-spacing-positive-lg: var(--letter-space2, 2);
   --letter-spacing-positive-md: var(--letter-space1, 1);
   --letter-spacing-none: var(--letter-space0, 0);
-  --letter-spacing-negative-sm: var(--letter-space-neg0-5, -0.5);
+  --letter-spacing-negative-sm: var(--letter-space-neg0p5, -0.5);
   --letter-spacing-negative-md: var(--letter-space-neg1, -1);
   --letter-spacing-negative-lg: var(--letter-space-neg2, -2);
-  --letter-spacing-negative-xs: var(--letter-space-neg0-25, -0.25);
-  --letter-spacing-positive-xs: var(--letter-space0-25, 0.25);
-  --display1-letter-spacing: var(--letter-space-neg0-5, -0.5);
-  --display2-letter-spacing: var(--letter-space-neg0-5, -0.5);
-  --display3-letter-spacing: var(--letter-space-neg0-5, -0.5);
+  --letter-spacing-negative-xs: var(--letter-space-neg0p25, -0.25);
+  --letter-spacing-positive-xs: var(--letter-space0p25, 0.25);
+  --display1-letter-spacing: var(--letter-space-neg0p5, -0.5);
+  --display2-letter-spacing: var(--letter-space-neg0p5, -0.5);
+  --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);
@@ -343,7 +266,7 @@
     --headline4-line-height: 28.6;
     --callout-line-height: 31.2;
     --subheadline1-line-height: 28.6;
-    --letter-spacing-negative-sm: var(--letter-space-neg0-25, -0.25);
+    --letter-spacing-negative-sm: var(--letter-space-neg0p25, -0.25);
     --display1-letter-spacing: var(--letter-space-neg1, -1);
     --display2-letter-spacing: var(--letter-space-neg1, -1);
     --display3-letter-spacing: var(--letter-space-neg1, -1);
@@ -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-neg0-25, -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);
@@ -489,7 +396,7 @@
     font-weight: var(--font-weight-black, 800);
     font-size: var(--display1-font-size, 38px);
     line-height: var(--display1-line-height, 40px);
-    letter-spacing: var(--letter-space-neg0-5, -0.5px);
+    letter-spacing: var(--letter-space-neg0p5, -0.5px);
   }
   .display2 {
@@ -497,7 +404,7 @@
     font-weight: var(--font-weight-black, 800);
     font-size: var(--display2-font-size, 34px);
     line-height: var(--display2-line-height, 36px);
-    letter-spacing: var(--letter-space-neg0-5, -0.5px);
+    letter-spacing: var(--letter-space-neg0p5, -0.5px);
   }
   .display3 {
@@ -505,7 +412,7 @@
     font-weight: var(--font-weight-black, 800);
     font-size: var(--display3-font-size, 27px);
     line-height: var(--display3-line-height, 28px);
-    letter-spacing: var(--letter-space-neg0-5, -0.5px);
+    letter-spacing: var(--letter-space-neg0p5, -0.5px);
   }
   .headline1 {
@@ -720,7 +627,7 @@
     font-weight: var(--font-weight-book, 400);
     font-size: var(--label1-font-size, 17px);
     line-height: var(--label1-line-height, 20.4px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label1-bold {
@@ -728,7 +635,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label1-font-size, 17px);
     line-height: var(--label1-line-height, 20.4px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label1-bold-resp {
@@ -736,7 +643,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label1-font-size-responsive, 10px);
     line-height: var(--label1-responsive-line-height, 12px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label1-uppercase-bold {
@@ -744,7 +651,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label1-font-size, 17px);
     line-height: var(--label1-line-height, 20.4px);
-    letter-spacing: var(--letter-space0-5, 0.5px);
+    letter-spacing: var(--letter-space0p5, 0.5px);
     text-transform: uppercase;
   }
@@ -753,7 +660,7 @@
     font-weight: var(--font-weight-book, 400);
     font-size: var(--label2-font-size, 15px);
     line-height: var(--label2-line-height, 19.2px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label2-uppercase {
@@ -761,7 +668,7 @@
     font-weight: var(--font-weight-book, 400);
     font-size: var(--label2-font-size, 15px);
     line-height: var(--label2-line-height, 19.2px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
     text-transform: uppercase;
   }
@@ -770,7 +677,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label2-font-size, 15px);
     line-height: var(--label2-line-height, 19.2px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label2-uppercase-bold {
@@ -778,7 +685,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label2-font-size, 15px);
     line-height: var(--label2-line-height, 19.2px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
     text-transform: uppercase;
   }
@@ -787,7 +694,7 @@
     font-weight: var(--font-weight-book, 400);
     font-size: var(--label3-font-size, 12px);
     line-height: var(--label3-line-height, 14.4px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label3-uppercase {
@@ -795,7 +702,7 @@
     font-weight: var(--font-weight-book, 400);
     font-size: var(--label3-font-size, 12px);
     line-height: var(--label3-line-height, 14.4px);
-    letter-spacing: var(--letter-space0-5, 0.5px);
+    letter-spacing: var(--letter-space0p5, 0.5px);
     text-transform: uppercase;
   }
@@ -804,7 +711,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label3-font-size, 12px);
     line-height: var(--label3-line-height, 14.4px);
-    letter-spacing: var(--letter-space0-25, 0.25px);
+    letter-spacing: var(--letter-space0p25, 0.25px);
   }
   .label3-uppercase-bold {
@@ -812,7 +719,7 @@
     font-weight: var(--font-weight-bold, 700);
     font-size: var(--label3-font-size, 12px);
     line-height: var(--label3-line-height, 14.4px);
-    letter-spacing: var(--letter-space0-5, 0.5px);
+    letter-spacing: var(--letter-space0p5, 0.5px);
     text-transform: uppercase;
   }