@marioschmidt/design-system-tokens 1.0.20 → 1.0.21

package/dist/js/shared/colorprimitive.js

@@ -1,10 +1,45 @@
 /**
- * Do not edit directly, this file was auto-generated.
+ * colorprimitive.js
+ * Generiert am: 2025-11-24T20:34:53.374Z
+ * Nicht manuell bearbeiten!
  */
 
-export const bildred = "#DD0000";
-export const bildred035 = "#AF0002";
-export const bildred053 = "#F52D2D";
+// ============================================
+// 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";
+
+// BILD - gray
 export const bild015 = "#232629";
 export const bild085 = "#CED4DA";
 export const bild035 = "#4B525A";
@@ -12,60 +47,50 @@ 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 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";
+
+// BILD - green
 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)";
+/** This value of green was found in a text field's text color. */
 export const bildgreen040 = "#006E3E";
 export const bildgreen056 = "#18995C";
-export const bildyellow = "#FFBF00";
+
+// 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";
-export const alphaBlack20 = "rgba(0, 0, 0, 0.20000000298023224)";
-export const alphaBlack10 = "rgba(0, 0, 0, 0.10000000149011612)";
-export const alphaBlack60 = "rgba(0, 0, 0, 0.6000000238418579)";
-export const alphaBlack30 = "rgba(0, 0, 0, 0.30000001192092896)";
-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)";
-export const alphaWhite60 = "rgba(255, 255, 255, 0.6000000238418579)";
-export const alphaWhite70 = "rgba(255, 255, 255, 0.699999988079071)";
-export const alphaWhite35 = "rgba(255, 255, 255, 0.3499999940395355)";
-export const alphaBildred80 = "rgba(221, 0, 0, 0.800000011920929)";
-export const alphaBlack80 = "rgba(0, 0, 0, 0.800000011920929)";
-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)";
-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 - 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 spobiBlue0160 = "rgba(10, 39, 80, 0)";
+export const spobiBlue01670 = "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:34:53.454Z
+ * 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:34:53.512Z
+ * 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:34:53.560Z
+ * Nicht manuell bearbeiten!
  */
 
+// ============================================
+// OTHER
+// ============================================
+
 export const space1x = "8px";
 export const space05x = "4px";
 export const space025x = "2px";
@@ -27,3 +33,4 @@ export const space12x = "96px";
 export const space175x = "14px";
 export const space85x = "68px";
 export const space35x = "28px";
+

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2025-11-24T15:10:53.750Z",
+  "generated": "2025-11-24T20:34:59.367Z",
   "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:34:56.339Z
+// 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:34:56.379Z
+// 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:34:56.419Z
+// 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;
+