@marioschmidt/design-system-tokens 1.0.20 → 1.0.22

package/dist/js/shared/colorprimitive.js

@@ -1,71 +1,96 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * colorprimitive.js
+ * Generiert am: 2025-11-24T20:37:07.295Z
+ * Nicht manuell bearbeiten!
  */
 
-export const bildred = "#DD0000";
-export const bildred035 = "#AF0002";
-export const bildred053 = "#F52D2D";
-export const bild015 = "#232629";
-export const bild085 = "#CED4DA";
-export const bild035 = "#4B525A";
-export const bild025 = "#343C41";
-export const bild060 = "#8C9196";
-export const bild096 = "#F2F4F5";
-export const bild093 = "#E9ECEF";
-export const bild08550 = "rgba(206, 212, 218, 0.5)";
-export const bild073 = "#AEB4B9";
-export const bild045 = "#666B70";
-export const bild010 = "#1C1C1C";
-export const bild020 = "#2C3138";
-export const bild100 = "#FFFFFF";
-export const bildblack = "#000000";
-export const bildorange = "#FD8227";
-export const bildgreen070 = "#00C373";
-export const bildgreen063 = "#00AF67";
-export const bildgreen093 = "#CEF4E4";
-export const bildgreen09350 = "rgba(206, 244, 228, 0.5)";
-export const bildgreen05650 = "rgba(0, 155, 90, 0.5)";
-export const bildgreen040 = "#006E3E";
-export const bildgreen056 = "#18995C";
-export const bildyellow = "#FFBF00";
-export const bildberry = "#551937";
+// ============================================
+// BILD
+// ============================================
+
+// BILD - alpha
 export const alphaBlack20 = "rgba(0, 0, 0, 0.20000000298023224)";
 export const alphaBlack10 = "rgba(0, 0, 0, 0.10000000149011612)";
+/** Used on elevation effects. */
 export const alphaBlack60 = "rgba(0, 0, 0, 0.6000000238418579)";
 export const alphaBlack30 = "rgba(0, 0, 0, 0.30000001192092896)";
+/** Used on elevation effects. */
 export const alphaBlack70 = "rgba(0, 0, 0, 0.699999988079071)";
 export const alphaWhite10 = "rgba(255, 255, 255, 0.10000000149011612)";
 export const alphaWhite20 = "rgba(255, 255, 255, 0.20000000298023224)";
 export const alphaWhite30 = "rgba(255, 255, 255, 0.30000001192092896)";
+/** Used on elevation effects. */
 export const alphaWhite60 = "rgba(255, 255, 255, 0.6000000238418579)";
+/** Used on elevation effects. */
 export const alphaWhite70 = "rgba(255, 255, 255, 0.699999988079071)";
 export const alphaWhite35 = "rgba(255, 255, 255, 0.3499999940395355)";
+/** Used on elevation effects. */
 export const alphaBildred80 = "rgba(221, 0, 0, 0.800000011920929)";
+/** Used on elevation effects. */
 export const alphaBlack80 = "rgba(0, 0, 0, 0.800000011920929)";
+/** Used on elevation effects. */
 export const alphaWhite80 = "rgba(255, 255, 255, 0.800000011920929)";
 export const alphaBlack35 = "rgba(0, 0, 0, 0.3499999940395355)";
 export const alphaBlack0 = "rgba(0, 0, 0, 0)";
 export const alphaBlack50 = "rgba(0, 0, 0, 0.5)";
 export const alphaBlack05 = "rgba(0, 0, 0, 0.05000000074505806)";
+
+// BILD - blue
+/** This Blue color was taken from the Weather 2024 project. Tone: 069 */
 export const bildblue = "#00B1FF";
-export const fitbookCore = "#FF97B7";
-export const petbookCore = "#B9DB91";
-export const myhomeCore = "#66CCCC";
-export const travelbookCore = "#8EF0ED";
-export const techbookCore = "#93E4FF";
-export const kaufberaterCore = "#55476E";
-export const bzCore = "#E3001B";
-export const aubiCore = "#F00000";
-export const cobiCore = "#DC231C";
-export const spobiBlue098 = "#F7F9FD";
-export const spobiBlue081 = "#BDCADB";
-export const spobiBlue029 = "#174482";
-export const spobiBlue016 = "#0A2750";
-export const spobiBlue010 = "#081828";
-export const spobiBlue038 = "#315998";
-export const spobiRed = "#E52528";
-export const spobiBlue0160 = "rgba(10, 39, 80, 0)";
-export const spobiBlue01670 = "rgba(10, 39, 80, 0.699999988079071)";
+
+// BILD - gray
+export const bild015 = "#232629";
+export const bild085 = "#CED4DA";
+export const bild035 = "#4B525A";
+export const bild025 = "#343C41";
+export const bild060 = "#8C9196";
+export const bild096 = "#F2F4F5";
+export const bild093 = "#E9ECEF";
+/** The 50% opacity on this color makes it equivalent to BILD093. */
+export const bild085Alpha50 = "rgba(206, 212, 218, 0.5)";
+export const bild073 = "#AEB4B9";
+export const bild045 = "#666B70";
+export const bild010 = "#1C1C1C";
+export const bild020 = "#2C3138";
+
+// BILD - green
+export const bildgreen070 = "#00C373";
+export const bildgreen063 = "#00AF67";
+export const bildgreen093 = "#CEF4E4";
+export const bildgreen093Alpha50 = "rgba(206, 244, 228, 0.5)";
+export const bildgreen056Alpha50 = "rgba(0, 155, 90, 0.5)";
+/** This value of green was found in a text field's text color. */
+export const bildgreen040 = "#006E3E";
+export const bildgreen056 = "#18995C";
+
+// BILD - neutral
+export const bild100 = "#FFFFFF";
+export const bildblack = "#000000";
+
+// BILD - orange
+/** Tone: 067 */
+export const bildorange = "#FD8227";
+
+// BILD - purple
+/** Tone: 020 */
+export const bildberry = "#551937";
+
+// BILD - red
+/** Tone 046 */
+export const bildred = "#DD0000";
+export const bildred035 = "#AF0002";
+export const bildred053 = "#F52D2D";
+
+// BILD - yellow
+/** Tone: 081 */
+export const bildyellow = "#FFBF00";
+
+
+// ============================================
+// OPACITY
+// ============================================
+
 export const opacity05 = "5px";
 export const opacity10 = "10px";
 export const opacity20 = "20px";
@@ -78,3 +103,58 @@ export const opacity30 = "30px";
 export const opacity50 = "50px";
 export const opacity00 = "0px";
 export const opacity70 = "70px";
+
+
+// ============================================
+// PARTNER
+// ============================================
+
+// Partner - Aubi
+export const aubiCore = "#F00000";
+
+// Partner - Bz
+export const bzCore = "#E3001B";
+
+// Partner - ComputerBILD
+export const cobiCore = "#DC231C";
+
+// Partner - Fitbook
+export const fitbookCore = "#FF97B7";
+
+// Partner - Kaufberater
+export const kaufberaterCore = "#55476E";
+
+// Partner - MyHome
+export const myhomeCore = "#66CCCC";
+
+// Partner - Petbook
+export const petbookCore = "#B9DB91";
+
+// Partner - Techbook
+export const techbookCore = "#93E4FF";
+
+// Partner - Travelbook
+export const travelbookCore = "#8EF0ED";
+
+
+// ============================================
+// SPORTBILD
+// ============================================
+
+// SportBILD - alpha
+export const spobiBlue016Alpha0 = "rgba(10, 39, 80, 0)";
+export const spobiBlue016Alpha70 = "rgba(10, 39, 80, 0.699999988079071)";
+
+// SportBILD - blue
+export const spobiBlue098 = "#F7F9FD";
+export const spobiBlue081 = "#BDCADB";
+/** This variable in the current online CSS is called secondary-tenant-color */
+export const spobiBlue029 = "#174482";
+/** This variable in the current online CSS is called main-tenant-color for the spobi tenant. */
+export const spobiBlue016 = "#0A2750";
+export const spobiBlue010 = "#081828";
+export const spobiBlue038 = "#315998";
+
+// SportBILD - red
+export const spobiRed = "#E52528";
+

package/dist/js/shared/fontprimitive.js

@@ -1,47 +1,89 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * fontprimitive.js
+ * Generiert am: 2025-11-24T20:37:07.377Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// FONTFAMILY
+// ============================================
+
+// FontFamily - Advertorial
+export const fontFamilyLucidaGrande = "Lucida Grande";
+
+// FontFamily - BILD
 export const fontFamilyGothamXnarrow = "Gotham XNarrow";
 export const fontFamilyGothamCond = "Gotham Condensed";
 export const fontFamilyGotham = "Gotham";
-export const fontFamilyLucidaGrande = "Lucida Grande";
+
+// FontFamily - SportBILD
 export const fontFamilyAntennaExtraCond = "AntennaExtraCond";
 export const fontFamilyAntennaCond = "AntennaCond";
 export const fontFamilyInter = "Inter";
-export const _700BlackFontWeight = 700;
-export const _900ExtraBlackFontWeight = 900;
-export const _400BookFontWeight = 400;
-export const _1000UltraFontWeight = 1000;
-export const _800BlackFontWeight = 800;
-export const _350BookFontWeight = 350;
-export const _600BoldFontWeight = 600;
-export const _100ThinFontWeight = 100;
-export const _300LightFontWeight = 300;
-export const _200ExtraLightFontWeight = 200;
-export const _500MediumFontWeight = 500;
+
+
+// ============================================
+// FONTWEIGHT
+// ============================================
+
+/** 700 is considered black weight because Gotham Condensed is the primary font family (most used in headlines). In other font families 700 is not black weight but bold. */
+export const fontWeight700BlackFontWeight = "700";
+export const fontWeight900ExtraBlackFontWeight = "900";
+export const fontWeight400BookFontWeight = "400";
+export const fontWeight1000UltraFontWeight = "1000";
+export const fontWeight800BlackFontWeight = "800";
+export const fontWeight350BookFontWeight = "350";
+export const fontWeight600BoldFontWeight = "600";
+export const fontWeight100ThinFontWeight = "100";
+export const _300LightFontWeight = "300";
+export const fontWeight200ExtraLightFontWeight = "200";
+export const fontWeight500MediumFontWeight = "500";
 export const boldItalicFontWeightSt = "Bold Italic";
 export const blackFontWeightSt = "Black";
-export const letterSpace025 = "-0.25px";
-export const letterSpace0 = "0px";
-export const letterSpace1 = "1px";
-export const letterSpace05 = "0.5px";
-export const letterSpace025 = "0.25px";
-export const letterSpace05 = "-0.5px";
-export const letterSpace2 = "2px";
-export const letterSpace1 = "-1px";
-export const letterSpace2 = "-2px";
-export const letterSpace3 = "3px";
-export const letterSpace3 = "-3px";
-export const _1000UltraFontWeight = "1000";
-export const _900ExtraBlackFontWeight = "900";
-export const _800BlackFontWeight = "800";
-export const _700BlackFontWeight = "700";
-export const _600BoldFontWeight = "600";
-export const _500MediumFontWeight = "500";
-export const _400BookFontWeight = "400";
-export const _350BookFontWeight = "350";
-export const _200ExtraLightFontWeight = "200";
-export const _100ThinFontWeight = "100";
+
+
+// ============================================
+// FONTWEIGHTSTRING
+// ============================================
+
+export const fontWeightString1000UltraFontWeight = "1000";
+export const fontWeightString900ExtraBlackFontWeight = "900";
+export const fontWeightString800BlackFontWeight = "800";
+export const fontWeightString700BlackFontWeight = "700";
+export const fontWeightString600BoldFontWeight = "600";
+export const fontWeightString500MediumFontWeight = "500";
+export const fontWeightString400BookFontWeight = "400";
+export const fontWeightString350BookFontWeight = "350";
+export const fontWeightString200ExtraLightFontWeight = "200";
+export const fontWeightString100ThinFontWeight = "100";
 export const _600BoldItalicFontWeight = "Bold Italic";
 export const _700BlackItalicFontWeight = "Black Italic";
+
+
+// ============================================
+// LETTERSPACING
+// ============================================
+
+/** This variable is a primitive for use in creating semantic text styles that need to use a subtle small letter spacing value of -0.25. */
+export const letterSpacingLetterSpace025 = "-0.25px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0. */
+export const letterSpace0 = "0px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a positive letter spacing value of 1. */
+export const letterSpacingLetterSpace1 = "1px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a slight positive letter spacing value of 0.5. */
+export const letterSpacingLetterSpace05 = "0.5px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a subtle positive letter spacing value of 0.25. */
+export const letterSpacingLetterSpace025 = "0.25px";
+/** This variable is a primitive for use in creating semantic variables that need to use a subtle negative letter spacing value of -0.5. */
+export const letterSpacingLetterSpace05 = "-0.5px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a large letter spacing value of 2. */
+export const letterSpacingLetterSpace2 = "2px";
+/** This variable is a primitive for use in creating semantic variables that need to use a negative letter spacing value of -1. */
+export const letterSpacingLetterSpace1 = "-1px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -2. This is usually reserved for large texts styles that are used on titles or headlines. */
+export const letterSpacingLetterSpace2 = "-2px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a much larger letter spacing value of 3. Text styles that have smaller font sizes should use increasingly positive values for their letter spacings on smaller device sizes. */
+export const letterSpacingLetterSpace3 = "3px";
+/** This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -3. Text styles that have larger font sizes should use increasingly negative values for their letter spacings on larger device sizes. */
+export const letterSpacingLetterSpace3 = "-3px";
+

package/dist/js/shared/sizeprimitive.js

@@ -1,7 +1,13 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * sizeprimitive.js
+ * Generiert am: 2025-11-24T20:37:07.435Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// OTHER
+// ============================================
+
 export const size6x = "48px";
 export const size3x = "24px";
 export const size1x = "8px";
@@ -51,3 +57,4 @@ export const size185x = "148px";
 export const size100x = "800px";
 export const size0x = "0px";
 export const size0125x = "1px";
+

package/dist/js/shared/spaceprimitive.js

@@ -1,7 +1,13 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * spaceprimitive.js
+ * Generiert am: 2025-11-24T20:37:07.493Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// OTHER
+// ============================================
+
 export const space1x = "8px";
 export const space05x = "4px";
 export const space025x = "2px";
@@ -17,7 +23,7 @@ export const space0x = "0px";
 export const space10x = "80px";
 export const space20x = "160px";
 export const space25x = "20px";
-export const space025x = "-2px";
+export const spaceNeg025x = "-2px";
 export const space075x = "6px";
 export const space125x = "10px";
 export const space275x = "22px";
@@ -27,3 +33,4 @@ export const space12x = "96px";
 export const space175x = "14px";
 export const space85x = "68px";
 export const space35x = "28px";
+

package/dist/json/shared/colorprimitive.json

@@ -355,7 +355,7 @@
           "BILD093"
         ]
       },
-      "BILD085-50": {
+      "BILD085-alpha50": {
         "$value": "rgba(206, 212, 218, 0.5)",
         "value": "rgba(206, 212, 218, 0.5)",
         "type": "color",
@@ -384,12 +384,12 @@
           "$type": "color",
           "comment": "The 50% opacity on this color makes it equivalent to BILD093."
         },
-        "name": "bild08550",
+        "name": "bild085Alpha50",
         "attributes": {},
         "path": [
           "BILD",
           "gray",
-          "BILD085-50"
+          "BILD085-alpha50"
         ]
       },
       "BILD073": {
@@ -750,7 +750,7 @@
           "BILDGreen093"
         ]
       },
-      "BILDGreen093-50": {
+      "BILDGreen093-alpha50": {
         "$value": "rgba(206, 244, 228, 0.5)",
         "value": "rgba(206, 244, 228, 0.5)",
         "type": "color",
@@ -777,15 +777,15 @@
           },
           "$type": "color"
         },
-        "name": "bildgreen09350",
+        "name": "bildgreen093Alpha50",
         "attributes": {},
         "path": [
           "BILD",
           "green",
-          "BILDGreen093-50"
+          "BILDGreen093-alpha50"
         ]
       },
-      "BILDGreen056-50": {
+      "BILDGreen056-alpha50": {
         "$value": "rgba(0, 155, 90, 0.5)",
         "value": "rgba(0, 155, 90, 0.5)",
         "type": "color",
@@ -812,12 +812,12 @@
           },
           "$type": "color"
         },
-        "name": "bildgreen05650",
+        "name": "bildgreen056Alpha50",
         "attributes": {},
         "path": [
           "BILD",
           "green",
-          "BILDGreen056-50"
+          "BILDGreen056-alpha50"
         ]
       },
       "BILDGreen040": {
@@ -2247,7 +2247,7 @@
       }
     },
     "alpha": {
-      "spobiBlue016-0": {
+      "spobiBlue016-alpha0": {
         "$value": "rgba(10, 39, 80, 0)",
         "value": "rgba(10, 39, 80, 0)",
         "type": "color",
@@ -2274,15 +2274,15 @@
           },
           "$type": "color"
         },
-        "name": "spobiBlue0160",
+        "name": "spobiBlue016Alpha0",
         "attributes": {},
         "path": [
           "SportBILD",
           "alpha",
-          "spobiBlue016-0"
+          "spobiBlue016-alpha0"
         ]
       },
-      "spobiBlue016-70": {
+      "spobiBlue016-alpha70": {
         "$value": "rgba(10, 39, 80, 0.699999988079071)",
         "value": "rgba(10, 39, 80, 0.699999988079071)",
         "type": "color",
@@ -2309,12 +2309,12 @@
           },
           "$type": "color"
         },
-        "name": "spobiBlue01670",
+        "name": "spobiBlue016Alpha70",
         "attributes": {},
         "path": [
           "SportBILD",
           "alpha",
-          "spobiBlue016-70"
+          "spobiBlue016-alpha70"
         ]
       }
     }

package/dist/json/shared/spaceprimitive.json

@@ -494,7 +494,7 @@
       "space2_5x"
     ]
   },
-  "space-0_25x": {
+  "spaceNeg0_25x": {
     "$value": "-2px",
     "value": "-2px",
     "type": "float",
@@ -521,10 +521,10 @@
       },
       "$type": "dimension"
     },
-    "name": "space025x",
+    "name": "spaceNeg025x",
     "attributes": {},
     "path": [
-      "space-0_25x"
+      "spaceNeg0_25x"
     ]
   },
   "space0_75x": {

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2025-11-24T15:10:53.750Z",
+  "generated": "2025-11-24T20:37:13.221Z",
   "version": "2.0.0",
   "statistics": {
     "sharedPrimitives": {

package/dist/scss/brands/advertorial/density/density-compact.scss

@@ -1,11 +1,27 @@
+//
+// density-compact.scss
+// Generiert am: 2025-11-24T20:37:10.267Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
+// ============================================
+// COMPONENT
+// ============================================
 
-$button-content-gap-space: 6px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
-$button-stack-space: 6px; // This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
-$button-label-font-size: 15px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19
-$button-inline-space: 16px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+// Component - Button
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-content-gap-space: 6px;
+// This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-stack-space: 6px;
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19
+$button-label-font-size: 15px;
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-inline-space: 16px;
+
+// Component - Inputfield
 $input-field-inline-space: 16px;
 $input-field-stack-space: 6px;
 $input-field-height-size: 36px;
-$input-field-label-font-size: 16px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19
+$input-field-label-font-size: 16px;
+

package/dist/scss/brands/advertorial/density/density-default.scss

@@ -1,11 +1,27 @@
+//
+// density-default.scss
+// Generiert am: 2025-11-24T20:37:10.307Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
+// ============================================
+// COMPONENT
+// ============================================
 
-$button-content-gap-space: 8px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
-$button-stack-space: 8px; // This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
-$button-label-font-size: 17px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19
-$button-inline-space: 20px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+// Component - Button
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-content-gap-space: 8px;
+// This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-stack-space: 8px;
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19
+$button-label-font-size: 17px;
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-inline-space: 20px;
+
+// Component - Inputfield
 $input-field-inline-space: 16px;
 $input-field-stack-space: 8px;
 $input-field-height-size: 40px;
-$input-field-label-font-size: 17px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19
+$input-field-label-font-size: 17px;
+

package/dist/scss/brands/advertorial/density/density-spacious.scss

@@ -1,11 +1,27 @@
+//
+// density-spacious.scss
+// Generiert am: 2025-11-24T20:37:10.346Z
+// Nicht manuell bearbeiten!
+//
 
-// Do not edit directly, this file was auto-generated.
+// ============================================
+// COMPONENT
+// ============================================
 
-$button-content-gap-space: 8px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
-$button-stack-space: 12px; // This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
-$button-label-font-size: 19px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19
-$button-inline-space: 24px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+// Component - Button
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-content-gap-space: 8px;
+// This variable is in the SpaceScaling collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-stack-space: 12px;
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across devices: 15 - 17 - 19
+$button-label-font-size: 19px;
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling space could work across different content scaling / size / contrast themes.
+$button-inline-space: 24px;
+
+// Component - Inputfield
 $input-field-inline-space: 16px;
 $input-field-stack-space: 12px;
 $input-field-height-size: 48px;
-$input-field-label-font-size: 19px; // This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19
+// This variable is in the SpaceScaling Collection. It was made to experiment with how scaling size could work across different content scaling / size / contrast themes. Font size across scaling options: compact 15 - default 17 - spacious 19
+$input-field-label-font-size: 19px;
+