@marioschmidt/design-system-tokens 1.0.64 → 1.0.66

package/dist/scss/shared/colorprimitive.scss

@@ -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.66
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -16,113 +16,97 @@
 
 // BILD - red
 // Tone 046
-$bildred: #DD0000;
-$bildred035: #AF0002;
-$bildred053: #F52D2D;
-// Used on elevation effects.
-$bild-red-alpha80: rgba(221, 0, 0, 0.8);
-
-// BILD - gray
-$bild015: #232629;
-$bild085: #CED4DA;
-$bild035: #4B525A;
-$bild025: #343C41;
-$bild060: #8C9196;
-$bild096: #F2F4F5;
-$bild093: #E9ECEF;
-// The 50% opacity on this color makes it equivalent to BILD093.
-$bild085-alpha50: rgba(206, 212, 218, 0.5);
-$bild073: #AEB4B9;
-$bild045: #666B70;
-$bild010: #1C1C1C;
-$bild020: #2C3138;
-
-// BILD - white
-$white100: #FFFFFF;
-$white-alpha10: rgba(255, 255, 255, 0.1);
-$white-alpha20: rgba(255, 255, 255, 0.2);
-$white-alpha30: rgba(255, 255, 255, 0.3);
-// Used on elevation effects.
-$white-alpha60: rgba(255, 255, 255, 0.6);
-// Used on elevation effects.
-$white-alpha70: rgba(255, 255, 255, 0.7);
-$white-alpha35: rgba(255, 255, 255, 0.35);
-// Used on elevation effects.
-$white-alpha80: rgba(255, 255, 255, 0.8);
-
-// BILD - orange
-// Tone: 067
-$bildorange: #FD8227;
-
-// BILD - green
-$bildgreen070: #00C373;
-$bildgreen063: #00AF67;
-$bildgreen093: #CEF4E4;
-$bildgreen093alpha50: rgba(206, 244, 228, 0.5);
-$bildgreen056-alpha50: rgba(0, 155, 90, 0.5);
-// This value of green was found in a text field's text color.
-$bildgreen040: #006E3E;
-$bildgreen056: #18995C;
-
-// BILD - yellow
-// Tone: 081
-$bildyellow: #FFBF00;
+$color-bild-red-50: #DD0000;
+$color-bild-red-35: #AF0002;
+$color-bild-red-53: #F52D2D;
 
 // BILD - purple
 // Tone: 020
-$bildberry: #551937;
+$color-bild-purple-20: #551937;
 
-// BILD - black
-$black-alpha20: rgba(0, 0, 0, 0.2);
-$black-alpha10: rgba(0, 0, 0, 0.1);
-// Used on elevation effects.
-$black-alpha60: rgba(0, 0, 0, 0.6);
-$black-alpha30: rgba(0, 0, 0, 0.3);
-// Used on elevation effects.
-$black-alpha70: rgba(0, 0, 0, 0.7);
-$black100: #000000;
+// BILD - alpha
 // Used on elevation effects.
-$black-alpha80: rgba(0, 0, 0, 0.8);
-$black-alpha35: rgba(0, 0, 0, 0.35);
-$black-alpha0: rgba(0, 0, 0, 0);
-$black-alpha50: rgba(0, 0, 0, 0.5);
-$black-alpha05: rgba(0, 0, 0, 0.05);
-
-// BILD - blue
-// This Blue color was taken from the Weather 2024 project. Tone: 069
-$bild-blue: #00B1FF;
+$alpha-red-50-a-80: rgba(221, 0, 0, 0.8);
 
 
 // ============================================
-// PARTNER
+// SHARED
 // ============================================
 
-// Partner - Fitbook
-$fitbook-core: #FF97B7;
-
-// Partner - Petbook
-$petbook-core: #B9DB91;
-
-// Partner - MyHome
-$myhome-core: #66CCCC;
+// Shared - neutral
+$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
+// Tone: 067
+$color-orange-67: #FD8227;
 
-// Partner - Travelbook
-$travelbook-core: #8EF0ED;
+// Shared - green
+$color-green-70: #00C373;
+$color-green-63: #00AF67;
+$color-green-93: #CEF4E4;
+$color-green-40: #006E3E;
+$color-green-56: #18995C;
 
-// Partner - Techbook
-$techbook-core: #93E4FF;
+// Shared - yellow
+// Tone: 081
+$color-yellow-80: #FFBF00;
 
-// Partner - Kaufberater
-$kaufberater-core: #55476E;
+// Shared - alpha
+// The 50% opacity on this color makes it equivalent to BILD093.
+$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);
+// Used on elevation effects.
+$alpha-black-60: rgba(0, 0, 0, 0.6);
+$alpha-black-30: rgba(0, 0, 0, 0.3);
+// Used on elevation effects.
+$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);
+// Used on elevation effects.
+$alpha-white-60: rgba(255, 255, 255, 0.6);
+// Used on elevation effects.
+$alpha-white-70: rgba(255, 255, 255, 0.7);
+$alpha-white-35: rgba(255, 255, 255, 0.35);
+// Used on elevation effects.
+$alpha-black-80: rgba(0, 0, 0, 0.8);
+// Used on elevation effects.
+$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);
 
-// Partner - Bz
-$bz-core: #E3001B;
 
-// Partner - Aubi
-$aubi-core: #F00000;
+// ============================================
+// PARTNER
+// ============================================
 
-// Partner - ComputerBILD
-$cobi-core: #DC231C;
+$color-partner-fitbook: #FF97B7;
+$color-partner-petbook: #B9DB91;
+$color-partner-myhome: #66CCCC;
+$color-partner-travelbook: #8EF0ED;
+$color-partner-techbook: #93E4FF;
+$color-partner-kaufberater: #55476E;
+$color-bz-red-50: #E3001B;
+$color-aubi-red-50: #F00000;
+$color-cobi-red-50: #DC231C;
 
 
 // ============================================
@@ -130,37 +114,39 @@ $cobi-core: #DC231C;
 // ============================================
 
 // SportBILD - blue
-$spobi-blue098: #F7F9FD;
-$spobi-blue081: #BDCADB;
+$color-spobi-blue-98: #F7F9FD;
+$color-spobi-blue-81: #BDCADB;
 // This variable in the current online CSS is called secondary-tenant-color
-$spobi-blue029: #174482;
+$color-spobi-blue-29: #174482;
 // This variable in the current online CSS is called main-tenant-color for the spobi tenant.
-$spobi-blue016: #0A2750;
-$spobi-blue010: #081828;
-$spobi-blue038: #315998;
+$color-spobi-blue-16: #0A2750;
+$color-spobi-blue-10: #081828;
+$color-spobi-blue-38: #315998;
 
 // SportBILD - red
-$spobi-red: #E52528;
+$color-spobi-red-50: #E52528;
 
 // SportBILD - alpha
-$spobi-blue016alpha0: rgba(10, 39, 80, 0);
-$spobi-blue016alpha70: rgba(10, 39, 80, 0.7);
+// This primitive is used for creating the teaser title background gradient.
+$color-spobi-blue-16-a-0: rgba(10, 39, 80, 0);
+// This primitive is used for creating the teaser title background gradient.
+$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/scss/shared/fontprimitive.scss

@@ -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.66
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -38,7 +38,7 @@ $font-weight-extra-black: 900;
 $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;
@@ -51,27 +51,27 @@ $font-weight-medium: 500;
 // ============================================
 
 // 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.
-$letter-space-neg0p25: -0.25;
+$letter-space-neg-0-p-25: -0.25;
 // This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0.
-$letter-space0: 0;
+$letter-space-0: 0;
 // This variable is a primitive for use in creating semantic text styles that need to use a positive letter spacing value of 1.
-$letter-space1: 1;
+$letter-space-1: 1;
 // 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.
-$letter-space0p5: 0.5;
+$letter-space-0-p-5: 0.5;
 // 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.
-$letter-space0p25: 0.25;
+$letter-space-0-p-25: 0.25;
 // This variable is a primitive for use in creating semantic variables that need to use a subtle negative letter spacing value of -0.5.
-$letter-space-neg0p5: -0.5;
+$letter-space-neg-0-p-5: -0.5;
 // This variable is a primitive for use in creating semantic text styles that need to use a large letter spacing value of 2.
-$letter-space2: 2;
+$letter-space-2: 2;
 // This variable is a primitive for use in creating semantic variables that need to use a negative letter spacing value of -1.
-$letter-space-neg1: -1;
+$letter-space-neg-1: -1;
 // 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.
-$letter-space-neg2: -2;
+$letter-space-neg-2: -2;
 // 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.
-$letter-space3: 3;
+$letter-space-3: 3;
 // 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.
-$letter-space-neg3: -3;
+$letter-space-neg-3: -3;
 
 
 // ============================================
@@ -85,7 +85,7 @@ $st-font-weight-bold: 700;
 $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/scss/shared/sizeprimitive.scss

@@ -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.66
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -14,53 +14,53 @@
 // OTHER
 // ============================================
 
-$size6x: 48px;
-$size3x: 24px;
-$size1x: 8px;
-$size0p25x: 2px;
-$size0-5x: 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;
 

package/dist/scss/shared/spaceprimitive.scss

@@ -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.66
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -14,29 +14,29 @@
 // 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;
 

package/package.json

@@ -1,21 +1,99 @@
 {
   "name": "@marioschmidt/design-system-tokens",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "description": "BILD Design System Token Pipeline with Style Dictionary - Multi-brand design tokens for BILD, SportBILD, and Advertorial",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "dist/js/index.js",
+  "module": "dist/js/index.js",
+  "types": "dist/js/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/index.js"
+    },
+    "./themes": {
+      "types": "./dist/js/themes/index.d.ts",
+      "import": "./dist/js/themes/index.js"
+    },
+    "./primitives": {
+      "types": "./dist/js/primitives/index.d.ts",
+      "import": "./dist/js/primitives/index.js"
+    },
+    "./bild": {
+      "types": "./dist/js/brands/bild/index.d.ts",
+      "import": "./dist/js/brands/bild/index.js"
+    },
+    "./bild/colors": {
+      "types": "./dist/js/brands/bild/colors.d.ts",
+      "import": "./dist/js/brands/bild/colors.js"
+    },
+    "./bild/spacing": {
+      "types": "./dist/js/brands/bild/spacing.d.ts",
+      "import": "./dist/js/brands/bild/spacing.js"
+    },
+    "./bild/typography": {
+      "types": "./dist/js/brands/bild/typography.d.ts",
+      "import": "./dist/js/brands/bild/typography.js"
+    },
+    "./bild/effects": {
+      "types": "./dist/js/brands/bild/effects.d.ts",
+      "import": "./dist/js/brands/bild/effects.js"
+    },
+    "./bild/components": {
+      "types": "./dist/js/brands/bild/components/index.d.ts",
+      "import": "./dist/js/brands/bild/components/index.js"
+    },
+    "./bild/components/*": {
+      "types": "./dist/js/brands/bild/components/*.d.ts",
+      "import": "./dist/js/brands/bild/components/*.js"
+    },
+    "./sportbild": {
+      "types": "./dist/js/brands/sportbild/index.d.ts",
+      "import": "./dist/js/brands/sportbild/index.js"
+    },
+    "./sportbild/colors": {
+      "types": "./dist/js/brands/sportbild/colors.d.ts",
+      "import": "./dist/js/brands/sportbild/colors.js"
+    },
+    "./sportbild/spacing": {
+      "types": "./dist/js/brands/sportbild/spacing.d.ts",
+      "import": "./dist/js/brands/sportbild/spacing.js"
+    },
+    "./sportbild/typography": {
+      "types": "./dist/js/brands/sportbild/typography.d.ts",
+      "import": "./dist/js/brands/sportbild/typography.js"
+    },
+    "./sportbild/effects": {
+      "types": "./dist/js/brands/sportbild/effects.d.ts",
+      "import": "./dist/js/brands/sportbild/effects.js"
+    },
+    "./sportbild/components": {
+      "types": "./dist/js/brands/sportbild/components/index.d.ts",
+      "import": "./dist/js/brands/sportbild/components/index.js"
+    },
+    "./sportbild/components/*": {
+      "types": "./dist/js/brands/sportbild/components/*.d.ts",
+      "import": "./dist/js/brands/sportbild/components/*.js"
+    },
+    "./advertorial": {
+      "types": "./dist/js/brands/advertorial/index.d.ts",
+      "import": "./dist/js/brands/advertorial/index.js"
+    },
+    "./advertorial/spacing": {
+      "types": "./dist/js/brands/advertorial/spacing.d.ts",
+      "import": "./dist/js/brands/advertorial/spacing.js"
+    },
+    "./advertorial/typography": {
+      "types": "./dist/js/brands/advertorial/typography.d.ts",
+      "import": "./dist/js/brands/advertorial/typography.js"
     },
     "./css/*": "./dist/css/*",
     "./scss/*": "./dist/scss/*",
-    "./js/*": "./dist/js/*",
     "./json/*": "./dist/json/*",
-    "./bundles/*": "./dist/bundles/*",
+    "./min": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js.min/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [