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

@marioschmidt/design-system-tokens 1.0.65 → 1.0.67

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

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -16,15 +16,15 @@
      ============================================ */
   /* BILD - red */
-  --color-bild-red50: #DD0000;
-  --color-bild-red35: #AF0002;
-  --color-bild-red53: #F52D2D;
+  --color-bild-red-50: #DD0000;
+  --color-bild-red-35: #AF0002;
+  --color-bild-red-53: #F52D2D;
   /* BILD - purple */
-  --color-bild-purple20: #551937;
+  --color-bild-purple-20: #551937;
   /* BILD - alpha */
-  --alpha-red50a80: rgba(221, 0, 0, 0.8);
+  --alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
   /* ============================================
@@ -32,55 +32,55 @@
      ============================================ */
   /* Shared - neutral */
-  --color-neutral15: #232629;
-  --color-neutral100: #FFFFFF;
-  --color-neutral85: #CED4DA;
-  --color-neutral35: #4B525A;
-  --color-neutral25: #343C41;
-  --color-neutral60: #8C9196;
-  --color-neutral96: #F2F4F5;
-  --color-neutral93: #E9ECEF;
-  --color-neutral73: #AEB4B9;
-  --color-neutral45: #666B70;
-  --color-neutral10: #1C1C1C;
-  --color-neutral20: #2C3138;
-  --color-neutral0: #000000;
+  --color-neutral-15: #232629;
+  --color-neutral-100: #FFFFFF;
+  --color-neutral-85: #CED4DA;
+  --color-neutral-35: #4B525A;
+  --color-neutral-25: #343C41;
+  --color-neutral-60: #8C9196;
+  --color-neutral-96: #F2F4F5;
+  --color-neutral-93: #E9ECEF;
+  --color-neutral-73: #AEB4B9;
+  --color-neutral-45: #666B70;
+  --color-neutral-10: #1C1C1C;
+  --color-neutral-20: #2C3138;
+  --color-neutral-0: #000000;
   /* Shared - orange */
-  --color-orange67: #FD8227;
+  --color-orange-67: #FD8227;
   /* Shared - green */
-  --color-green70: #00C373;
-  --color-green63: #00AF67;
-  --color-green93: #CEF4E4;
-  --color-green40: #006E3E;
-  --color-green56: #18995C;
+  --color-green-70: #00C373;
+  --color-green-63: #00AF67;
+  --color-green-93: #CEF4E4;
+  --color-green-40: #006E3E;
+  --color-green-56: #18995C;
   /* Shared - yellow */
-  --color-yellow80: #FFBF00;
+  --color-yellow-80: #FFBF00;
   /* Shared - alpha */
-  --alpha-neutral85a50: rgba(206, 212, 218, 0.5);
-  --alpha-green93a50: rgba(206, 244, 228, 0.5);
-  --color-green56a50: rgba(0, 155, 90, 0.5);
-  --alpha-black20: rgba(0, 0, 0, 0.2);
-  --alpha-black10: rgba(0, 0, 0, 0.1);
-  --alpha-black60: rgba(0, 0, 0, 0.6);
-  --alpha-black30: rgba(0, 0, 0, 0.3);
-  --alpha-black70: rgba(0, 0, 0, 0.7);
-  --alpha-white10: rgba(255, 255, 255, 0.1);
-  --alpha-white20: rgba(255, 255, 255, 0.2);
-  --alpha-white30: rgba(255, 255, 255, 0.3);
-  --alpha-white60: rgba(255, 255, 255, 0.6);
-  --alpha-white70: rgba(255, 255, 255, 0.7);
-  --alpha-white35: rgba(255, 255, 255, 0.35);
-  --alpha-black80: rgba(0, 0, 0, 0.8);
-  --alpha-white80: rgba(255, 255, 255, 0.8);
-  --alpha-black35: rgba(0, 0, 0, 0.35);
-  --alpha-black0: rgba(0, 0, 0, 0);
-  --alpha-black50: rgba(0, 0, 0, 0.5);
-  --alpha-black5: rgba(0, 0, 0, 0.05);
-  --alpha-white0: rgba(255, 255, 255, 0);
+  --alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
+  --alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
+  --color-green-56-a-50: rgba(0, 155, 90, 0.5);
+  --alpha-black-20: rgba(0, 0, 0, 0.2);
+  --alpha-black-10: rgba(0, 0, 0, 0.1);
+  --alpha-black-60: rgba(0, 0, 0, 0.6);
+  --alpha-black-30: rgba(0, 0, 0, 0.3);
+  --alpha-black-70: rgba(0, 0, 0, 0.7);
+  --alpha-white-10: rgba(255, 255, 255, 0.1);
+  --alpha-white-20: rgba(255, 255, 255, 0.2);
+  --alpha-white-30: rgba(255, 255, 255, 0.3);
+  --alpha-white-60: rgba(255, 255, 255, 0.6);
+  --alpha-white-70: rgba(255, 255, 255, 0.7);
+  --alpha-white-35: rgba(255, 255, 255, 0.35);
+  --alpha-black-80: rgba(0, 0, 0, 0.8);
+  --alpha-white-80: rgba(255, 255, 255, 0.8);
+  --alpha-black-35: rgba(0, 0, 0, 0.35);
+  --alpha-black-0: rgba(0, 0, 0, 0);
+  --alpha-black-50: rgba(0, 0, 0, 0.5);
+  --alpha-black-5: rgba(0, 0, 0, 0.05);
+  --alpha-white-0: rgba(255, 255, 255, 0);
   /* ============================================
@@ -93,9 +93,9 @@
   --color-partner-travelbook: #8EF0ED;
   --color-partner-techbook: #93E4FF;
   --color-partner-kaufberater: #55476E;
-  --color-bz-red50: #E3001B;
-  --color-aubi-red50: #F00000;
-  --color-cobi-red50: #DC231C;
+  --color-bz-red-50: #E3001B;
+  --color-aubi-red-50: #F00000;
+  --color-cobi-red-50: #DC231C;
   /* ============================================
@@ -103,36 +103,36 @@
      ============================================ */
   /* SportBILD - blue */
-  --color-spobi-blue98: #F7F9FD;
-  --color-spobi-blue81: #BDCADB;
-  --color-spobi-blue29: #174482;
-  --color-spobi-blue16: #0A2750;
-  --color-spobi-blue10: #081828;
-  --color-spobi-blue38: #315998;
+  --color-spobi-blue-98: #F7F9FD;
+  --color-spobi-blue-81: #BDCADB;
+  --color-spobi-blue-29: #174482;
+  --color-spobi-blue-16: #0A2750;
+  --color-spobi-blue-10: #081828;
+  --color-spobi-blue-38: #315998;
   /* SportBILD - red */
-  --color-spobi-red50: #E52528;
+  --color-spobi-red-50: #E52528;
   /* SportBILD - alpha */
-  --color-spobi-blue16a0: rgba(10, 39, 80, 0);
-  --color-spobi-blue16a70: rgba(10, 39, 80, 0.7);
+  --color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
+  --color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
   /* ============================================
      OPACITY
      ============================================ */
-  --opacity05: 0.05;
-  --opacity10: 0.1;
-  --opacity20: 0.2;
-  --opacity40: 0.4;
-  --opacity60: 0.6;
-  --opacity80: 0.8;
-  --opacity100: 1;
-  --opacity90: 0.9;
-  --opacity30: 0.3;
-  --opacity50: 0.5;
-  --opacity00: 0;
-  --opacity70: 0.7;
+  --opacity-05: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+  --opacity-100: 1;
+  --opacity-90: 0.9;
+  --opacity-30: 0.3;
+  --opacity-50: 0.5;
+  --opacity-00: 0;
+  --opacity-70: 0.7;
 }

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * BILD Design System Tokens v1.0.65
+ * BILD Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -38,7 +38,7 @@
   --font-weight-book: 400;
   --font-weight-ultra: 1000;
   --font-weight-black: 800;
-  --font-weight-book350: 350;
+  --font-weight-book-350: 350;
   --font-weight-semi-bold: 600;
   --font-weight-thin: 100;
   --font-weight-light: 300;
@@ -50,17 +50,17 @@
      LETTERSPACING
      ============================================ */
-  --letter-space-neg0p25: -0.25;
-  --letter-space0: 0;
-  --letter-space1: 1;
-  --letter-space0p5: 0.5;
-  --letter-space0p25: 0.25;
-  --letter-space-neg0p5: -0.5;
-  --letter-space2: 2;
-  --letter-space-neg1: -1;
-  --letter-space-neg2: -2;
-  --letter-space3: 3;
-  --letter-space-neg3: -3;
+  --letter-space-neg-0-p-25: -0.25;
+  --letter-space-0: 0;
+  --letter-space-1: 1;
+  --letter-space-0-p-5: 0.5;
+  --letter-space-0-p-25: 0.25;
+  --letter-space-neg-0-p-5: -0.5;
+  --letter-space-2: 2;
+  --letter-space-neg-1: -1;
+  --letter-space-neg-2: -2;
+  --letter-space-3: 3;
+  --letter-space-neg-3: -3;
   /* ============================================
@@ -74,7 +74,7 @@
   --st-font-weight-semi-bold: 600;
   --st-font-weight-medium: 500;
   --st-font-weight-st-book: 400;
-  --st-font-weight-book350: 350;
+  --st-font-weight-book-350: 350;
   --st-font-weight-extra-light: 200;
   --st-font-weight-thin: 100;
   --st-font-weight-bold-italic: 700;

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

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
  *
- * SHARED Design System Tokens v1.0.65
+ * SHARED Design System Tokens v1.0.67
  * Generated by Style Dictionary v4.0.0
  *
  * Bundle: Primitives (Base values: space, size, colors, fonts)
@@ -20,15 +20,15 @@
      ============================================ */
   /* BILD - red */
-  --color-bild-red50: #DD0000;
-  --color-bild-red35: #AF0002;
-  --color-bild-red53: #F52D2D;
+  --color-bild-red-50: #DD0000;
+  --color-bild-red-35: #AF0002;
+  --color-bild-red-53: #F52D2D;
   /* BILD - purple */
-  --color-bild-purple20: #551937;
+  --color-bild-purple-20: #551937;
   /* BILD - alpha */
-  --alpha-red50a80: rgba(221, 0, 0, 0.8);
+  --alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
   /* ============================================
@@ -36,55 +36,55 @@
      ============================================ */
   /* Shared - neutral */
-  --color-neutral15: #232629;
-  --color-neutral100: #FFFFFF;
-  --color-neutral85: #CED4DA;
-  --color-neutral35: #4B525A;
-  --color-neutral25: #343C41;
-  --color-neutral60: #8C9196;
-  --color-neutral96: #F2F4F5;
-  --color-neutral93: #E9ECEF;
-  --color-neutral73: #AEB4B9;
-  --color-neutral45: #666B70;
-  --color-neutral10: #1C1C1C;
-  --color-neutral20: #2C3138;
-  --color-neutral0: #000000;
+  --color-neutral-15: #232629;
+  --color-neutral-100: #FFFFFF;
+  --color-neutral-85: #CED4DA;
+  --color-neutral-35: #4B525A;
+  --color-neutral-25: #343C41;
+  --color-neutral-60: #8C9196;
+  --color-neutral-96: #F2F4F5;
+  --color-neutral-93: #E9ECEF;
+  --color-neutral-73: #AEB4B9;
+  --color-neutral-45: #666B70;
+  --color-neutral-10: #1C1C1C;
+  --color-neutral-20: #2C3138;
+  --color-neutral-0: #000000;
   /* Shared - orange */
-  --color-orange67: #FD8227;
+  --color-orange-67: #FD8227;
   /* Shared - green */
-  --color-green70: #00C373;
-  --color-green63: #00AF67;
-  --color-green93: #CEF4E4;
-  --color-green40: #006E3E;
-  --color-green56: #18995C;
+  --color-green-70: #00C373;
+  --color-green-63: #00AF67;
+  --color-green-93: #CEF4E4;
+  --color-green-40: #006E3E;
+  --color-green-56: #18995C;
   /* Shared - yellow */
-  --color-yellow80: #FFBF00;
+  --color-yellow-80: #FFBF00;
   /* Shared - alpha */
-  --alpha-neutral85a50: rgba(206, 212, 218, 0.5);
-  --alpha-green93a50: rgba(206, 244, 228, 0.5);
-  --color-green56a50: rgba(0, 155, 90, 0.5);
-  --alpha-black20: rgba(0, 0, 0, 0.2);
-  --alpha-black10: rgba(0, 0, 0, 0.1);
-  --alpha-black60: rgba(0, 0, 0, 0.6);
-  --alpha-black30: rgba(0, 0, 0, 0.3);
-  --alpha-black70: rgba(0, 0, 0, 0.7);
-  --alpha-white10: rgba(255, 255, 255, 0.1);
-  --alpha-white20: rgba(255, 255, 255, 0.2);
-  --alpha-white30: rgba(255, 255, 255, 0.3);
-  --alpha-white60: rgba(255, 255, 255, 0.6);
-  --alpha-white70: rgba(255, 255, 255, 0.7);
-  --alpha-white35: rgba(255, 255, 255, 0.35);
-  --alpha-black80: rgba(0, 0, 0, 0.8);
-  --alpha-white80: rgba(255, 255, 255, 0.8);
-  --alpha-black35: rgba(0, 0, 0, 0.35);
-  --alpha-black0: rgba(0, 0, 0, 0);
-  --alpha-black50: rgba(0, 0, 0, 0.5);
-  --alpha-black5: rgba(0, 0, 0, 0.05);
-  --alpha-white0: rgba(255, 255, 255, 0);
+  --alpha-neutral-85-a-50: rgba(206, 212, 218, 0.5);
+  --alpha-green-93-a-50: rgba(206, 244, 228, 0.5);
+  --color-green-56-a-50: rgba(0, 155, 90, 0.5);
+  --alpha-black-20: rgba(0, 0, 0, 0.2);
+  --alpha-black-10: rgba(0, 0, 0, 0.1);
+  --alpha-black-60: rgba(0, 0, 0, 0.6);
+  --alpha-black-30: rgba(0, 0, 0, 0.3);
+  --alpha-black-70: rgba(0, 0, 0, 0.7);
+  --alpha-white-10: rgba(255, 255, 255, 0.1);
+  --alpha-white-20: rgba(255, 255, 255, 0.2);
+  --alpha-white-30: rgba(255, 255, 255, 0.3);
+  --alpha-white-60: rgba(255, 255, 255, 0.6);
+  --alpha-white-70: rgba(255, 255, 255, 0.7);
+  --alpha-white-35: rgba(255, 255, 255, 0.35);
+  --alpha-black-80: rgba(0, 0, 0, 0.8);
+  --alpha-white-80: rgba(255, 255, 255, 0.8);
+  --alpha-black-35: rgba(0, 0, 0, 0.35);
+  --alpha-black-0: rgba(0, 0, 0, 0);
+  --alpha-black-50: rgba(0, 0, 0, 0.5);
+  --alpha-black-5: rgba(0, 0, 0, 0.05);
+  --alpha-white-0: rgba(255, 255, 255, 0);
   /* ============================================
@@ -97,9 +97,9 @@
   --color-partner-travelbook: #8EF0ED;
   --color-partner-techbook: #93E4FF;
   --color-partner-kaufberater: #55476E;
-  --color-bz-red50: #E3001B;
-  --color-aubi-red50: #F00000;
-  --color-cobi-red50: #DC231C;
+  --color-bz-red-50: #E3001B;
+  --color-aubi-red-50: #F00000;
+  --color-cobi-red-50: #DC231C;
   /* ============================================
@@ -107,37 +107,37 @@
      ============================================ */
   /* SportBILD - blue */
-  --color-spobi-blue98: #F7F9FD;
-  --color-spobi-blue81: #BDCADB;
-  --color-spobi-blue29: #174482;
-  --color-spobi-blue16: #0A2750;
-  --color-spobi-blue10: #081828;
-  --color-spobi-blue38: #315998;
+  --color-spobi-blue-98: #F7F9FD;
+  --color-spobi-blue-81: #BDCADB;
+  --color-spobi-blue-29: #174482;
+  --color-spobi-blue-16: #0A2750;
+  --color-spobi-blue-10: #081828;
+  --color-spobi-blue-38: #315998;
   /* SportBILD - red */
-  --color-spobi-red50: #E52528;
+  --color-spobi-red-50: #E52528;
   /* SportBILD - alpha */
-  --color-spobi-blue16a0: rgba(10, 39, 80, 0);
-  --color-spobi-blue16a70: rgba(10, 39, 80, 0.7);
+  --color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
+  --color-spobi-blue-16-a-70: rgba(10, 39, 80, 0.7);
   /* ============================================
      OPACITY
      ============================================ */
-  --opacity05: 0.05;
-  --opacity10: 0.1;
-  --opacity20: 0.2;
-  --opacity40: 0.4;
-  --opacity60: 0.6;
-  --opacity80: 0.8;
-  --opacity100: 1;
-  --opacity90: 0.9;
-  --opacity30: 0.3;
-  --opacity50: 0.5;
-  --opacity00: 0;
-  --opacity70: 0.7;
+  --opacity-05: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-40: 0.4;
+  --opacity-60: 0.6;
+  --opacity-80: 0.8;
+  --opacity-100: 1;
+  --opacity-90: 0.9;
+  --opacity-30: 0.3;
+  --opacity-50: 0.5;
+  --opacity-00: 0;
+  --opacity-70: 0.7;
 }
@@ -171,7 +171,7 @@
   --font-weight-book: 400;
   --font-weight-ultra: 1000;
   --font-weight-black: 800;
-  --font-weight-book350: 350;
+  --font-weight-book-350: 350;
   --font-weight-semi-bold: 600;
   --font-weight-thin: 100;
   --font-weight-light: 300;
@@ -183,17 +183,17 @@
      LETTERSPACING
      ============================================ */
-  --letter-space-neg0p25: -0.25;
-  --letter-space0: 0;
-  --letter-space1: 1;
-  --letter-space0p5: 0.5;
-  --letter-space0p25: 0.25;
-  --letter-space-neg0p5: -0.5;
-  --letter-space2: 2;
-  --letter-space-neg1: -1;
-  --letter-space-neg2: -2;
-  --letter-space3: 3;
-  --letter-space-neg3: -3;
+  --letter-space-neg-0-p-25: -0.25;
+  --letter-space-0: 0;
+  --letter-space-1: 1;
+  --letter-space-0-p-5: 0.5;
+  --letter-space-0-p-25: 0.25;
+  --letter-space-neg-0-p-5: -0.5;
+  --letter-space-2: 2;
+  --letter-space-neg-1: -1;
+  --letter-space-neg-2: -2;
+  --letter-space-3: 3;
+  --letter-space-neg-3: -3;
   /* ============================================
@@ -207,7 +207,7 @@
   --st-font-weight-semi-bold: 600;
   --st-font-weight-medium: 500;
   --st-font-weight-st-book: 400;
-  --st-font-weight-book350: 350;
+  --st-font-weight-book-350: 350;
   --st-font-weight-extra-light: 200;
   --st-font-weight-thin: 100;
   --st-font-weight-bold-italic: 700;
@@ -222,55 +222,55 @@
      OTHER
      ============================================ */
-  --size6x: 48px;
-  --size3x: 24px;
-  --size1x: 8px;
-  --size0p25x: 2px;
-  --size0p5x: 4px;
-  --size2x: 16px;
-  --size4p5x: 36px;
-  --size5x: 40px;
-  --size3p5x: 28px;
-  --size2p5x: 20px;
-  --size12p5x: 100px;
-  --size2p75x: 22px;
-  --size3p25x: 26px;
-  --size4x: 32px;
-  --size3p75x: 30px;
-  --size2p25x: 18px;
-  --size7x: 56px;
-  --size1p5x: 12px;
-  --size0p75x: 6px;
-  --size22p5x: 180px;
-  --size40x: 320px;
-  --size8x: 64px;
-  --size11p5x: 92px;
-  --size1p75x: 14px;
-  --size5p25x: 42px;
-  --size1p25x: 10px;
-  --size80x: 640px;
-  --size17p5x: 140px;
-  --size20x: 160px;
-  --size128x: 1024px;
-  --size124x: 992px;
-  --size12x: 96px;
-  --size35x: 280px;
-  --size15x: 120px;
-  --size16p25: 130px;
-  --size87p5x: 700px;
-  --size10x: 80px;
-  --size30x: 240px;
-  --size25x: 200px;
-  --size168x: 1344px;
-  --size60x: 480px;
-  --size9x: 72px;
-  --size27p5x: 220px;
-  --size50x: 400px;
-  --size116p25x: 930px;
-  --size18p5x: 148px;
-  --size100x: 800px;
-  --size0x: 0px;
-  --size0p125x: 1px;
+  --size-6-x: 48px;
+  --size-3-x: 24px;
+  --size-1-x: 8px;
+  --size-0-p-25-x: 2px;
+  --size-0-p-5-x: 4px;
+  --size-2-x: 16px;
+  --size-4-p-5-x: 36px;
+  --size-5-x: 40px;
+  --size-3-p-5-x: 28px;
+  --size-2-p-5-x: 20px;
+  --size-12-p-5-x: 100px;
+  --size-2-p-75-x: 22px;
+  --size-3-p-25-x: 26px;
+  --size-4-x: 32px;
+  --size-3-p-75-x: 30px;
+  --size-2-p-25-x: 18px;
+  --size-7-x: 56px;
+  --size-1-p-5-x: 12px;
+  --size-0-p-75-x: 6px;
+  --size-22-p-5-x: 180px;
+  --size-40-x: 320px;
+  --size-8-x: 64px;
+  --size-11-p-5-x: 92px;
+  --size-1-p-75-x: 14px;
+  --size-5-p-25-x: 42px;
+  --size-1-p-25-x: 10px;
+  --size-80-x: 640px;
+  --size-17-p-5-x: 140px;
+  --size-20-x: 160px;
+  --size-128-x: 1024px;
+  --size-124-x: 992px;
+  --size-12-x: 96px;
+  --size-35-x: 280px;
+  --size-15-x: 120px;
+  --size-16-p-25: 130px;
+  --size-87-p-5-x: 700px;
+  --size-10-x: 80px;
+  --size-30-x: 240px;
+  --size-25-x: 200px;
+  --size-168-x: 1344px;
+  --size-60-x: 480px;
+  --size-9-x: 72px;
+  --size-27-p-5-x: 220px;
+  --size-50-x: 400px;
+  --size-116-p-25-x: 930px;
+  --size-18-p-5-x: 148px;
+  --size-100-x: 800px;
+  --size-0-x: 0px;
+  --size-0-p-125-x: 1px;
 }
@@ -281,30 +281,30 @@
      OTHER
      ============================================ */
-  --space1x: 8px;
-  --space0p5x: 4px;
-  --space0p25x: 2px;
-  --space2x: 16px;
-  --space1p5x: 12px;
-  --space4x: 32px;
-  --space3x: 24px;
-  --space6x: 48px;
-  --space8x: 64px;
-  --space9x: 72px;
-  --space5x: 40px;
-  --space0x: 0px;
-  --space10x: 80px;
-  --space20x: 160px;
-  --space2p5x: 20px;
-  --space-neg0p25x: -2px;
-  --space0p75x: 6px;
-  --space1p25x: 10px;
-  --space2p75x: 22px;
-  --space4p5x: 36px;
-  --space7p5x: 60px;
-  --space12x: 96px;
-  --space1p75x: 14px;
-  --space8p5x: 68px;
-  --space3p5x: 28px;
+  --space-1-x: 8px;
+  --space-0-p-5-x: 4px;
+  --space-0-p-25-x: 2px;
+  --space-2-x: 16px;
+  --space-1-p-5-x: 12px;
+  --space-4-x: 32px;
+  --space-3-x: 24px;
+  --space-6-x: 48px;
+  --space-8-x: 64px;
+  --space-9-x: 72px;
+  --space-5-x: 40px;
+  --space-0-x: 0px;
+  --space-10-x: 80px;
+  --space-20-x: 160px;
+  --space-2-p-5-x: 20px;
+  --space-neg-0-p-25-x: -2px;
+  --space-0-p-75-x: 6px;
+  --space-1-p-25-x: 10px;
+  --space-2-p-75-x: 22px;
+  --space-4-p-5-x: 36px;
+  --space-7-p-5-x: 60px;
+  --space-12-x: 96px;
+  --space-1-p-75-x: 14px;
+  --space-8-p-5-x: 68px;
+  --space-3-p-5-x: 28px;
 }