From d89a6f431a409e554fd5fe4719d38a9a9f56e88d Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Wed, 28 Sep 2022 22:43:35 +0200
Subject: [PATCH 01/10] feat: generate color utilities

---
 scripts/scss-utility-classes-generator.js | 85 +++++++++++++++++++++++
 style-dictionary.config.json              | 10 +++
 style-dictionary.js                       | 19 ++++-
 3 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 scripts/scss-utility-classes-generator.js

diff --git a/scripts/scss-utility-classes-generator.js b/scripts/scss-utility-classes-generator.js
new file mode 100644
index 000000000..c8370bb98
--- /dev/null
+++ b/scripts/scss-utility-classes-generator.js
@@ -0,0 +1,85 @@
+const fs = require('fs');
+const colors = require('../tokens/zeplin.json');
+
+const prefix = 'db';
+
+const generateInteractiveVariants = (currentColorObj, cssProp) => {
+	return `
+        &:hover {
+            ${cssProp}: $${prefix}-${currentColorObj.hover.name};
+        }
+
+        &:active {
+            ${cssProp}: $${prefix}-${currentColorObj.pressed.name};
+        }`;
+};
+
+exports.generateColorUtilitityClasses = (colorToken) => {
+	//let colors2JSON = JSON.parse(JSON.stringify(colors)).colors;
+	//console.log('geladene Farben: ', colors, colors2JSON.primary);
+	console.log('generate Color Utlities', colorToken);
+	let output = '';
+
+	Object.keys(colorToken).forEach((value, index) => {
+		// text colors
+		output += `
+%${prefix}-text-${value}, 
+.${prefix}-text-${value} {
+    color: $${prefix}-${colorToken[value].on.enabled.name};
+}
+`;
+		// text and background colors
+		output += `
+%${prefix}-bg-${value},
+.${prefix}-bg-${value} {
+    background-color: $${prefix}-${colorToken[value].enabled.name};
+    color: $${prefix}-${colorToken[value].on.enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        ${generateInteractiveVariants(colorToken[value], 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+         ${generateInteractiveVariants(colorToken[value].on, 'color')}
+    }
+}`;
+
+		// special case neutral has no default value for enabled
+		if (colorToken[value].bg.enabled) {
+			// weak variants
+			output += `
+%${prefix}-bg-${value}-light,
+.${prefix}-bg-${value}-light {    
+    background-color: $${prefix}-${colorToken[value].bg.enabled.name};
+    color: $${prefix}-${colorToken[value].on.bg.enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        ${generateInteractiveVariants(colorToken[value].bg, 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+         ${generateInteractiveVariants(colorToken[value].on.bg, 'color')}
+    }
+
+    .db-text-weak {
+        color: $${prefix}-${colorToken[value].on.bg.weak.enabled.name};
+
+        &-ia,
+        &[data-variant="ia"] {
+            ${generateInteractiveVariants(
+				colorToken[value].on.bg.weak,
+				'color'
+			)}
+        }
+    }
+}
+`;
+		}
+	});
+
+	return output;
+};
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index d1fc8b74d..d19501ebe 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -83,6 +83,16 @@
 				}
 			]
 		},
+		"db-core-classes": {
+			"transformGroup": "scss",
+			"buildPath": "build/scss/",
+			"files": [
+				{
+					"destination": "_color-utilities.scss",
+					"format": "db-core-classes"
+				}
+			]
+		},
 		"android": {
 			"transformGroup": "android",
 			"buildPath": "build/android/src/main/res/values/",
diff --git a/style-dictionary.js b/style-dictionary.js
index b3fa78b62..d7530f7ef 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -3,6 +3,7 @@ const StyleDictionary = require('style-dictionary').extend(
 );
 
 const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary');
+const SCSSUtilities = require('../base/scripts/scss-utility-classes-generator');
 
 const flattenColors = (dictionary) => {
 	const colors = dictionary['color'];
@@ -18,9 +19,11 @@ const flattenColors = (dictionary) => {
 				Object.keys(colors[colorKey]).forEach((subColorKey) => {
 					// TODO: We should be able to removed this with Amazon Style Dictionary 4, as this might allow parallel "nesting" of a value and subentries
 					if (subColorKey === '_') {
-						flatColors[`${colorKey}`] = colors[colorKey][subColorKey];
+						flatColors[`${colorKey}`] =
+							colors[colorKey][subColorKey];
 					} else if (subColorKey.includes('small')) {
-						flatColors[`${colorKey}-sm`] = colors[colorKey][subColorKey];
+						flatColors[`${colorKey}-sm`] =
+							colors[colorKey][subColorKey];
 					} else {
 						flatColors[`${colorKey}-${subColorKey}`] =
 							colors[colorKey][subColorKey];
@@ -41,4 +44,16 @@ StyleDictionary.registerFormat({
 	}
 });
 
+StyleDictionary.registerFormat({
+	name: 'db-core-classes',
+	formatter: function ({ dictionary, platform, options, file }) {
+		const colors = dictionary.tokens.colors;
+
+		// console.log('db-core-classes', colors);
+
+		//console.log(SCSSUtilities.generateColorUtilitityClasses(colors));
+		return SCSSUtilities.generateColorUtilitityClasses(colors);
+	}
+});
+
 StyleDictionary.buildAllPlatforms();

From 11da3f98169952a2b3c13440bb75d076a1bf87a1 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Thu, 29 Sep 2022 10:26:40 +0200
Subject: [PATCH 02/10] feat: utilities for neutral variants

---
 scripts/scss-utility-classes-generator.js | 55 +++++++++++++++++++++--
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/scripts/scss-utility-classes-generator.js b/scripts/scss-utility-classes-generator.js
index c8370bb98..b94068522 100644
--- a/scripts/scss-utility-classes-generator.js
+++ b/scripts/scss-utility-classes-generator.js
@@ -11,7 +11,42 @@ const generateInteractiveVariants = (currentColorObj, cssProp) => {
 
         &:active {
             ${cssProp}: $${prefix}-${currentColorObj.pressed.name};
-        }`;
+        }
+        `;
+};
+
+const generateNeutralVariants = (
+	value,
+	index,
+	currentColorObj,
+	baseColorObj
+) => {
+	return `
+%${prefix}-bg-${value}-${index},
+.${prefix}-bg-${value}-${index} {    
+    background-color: $${prefix}-${currentColorObj.enabled.name};
+    color: $${prefix}-${baseColorObj.enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        ${generateInteractiveVariants(currentColorObj, 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+         ${generateInteractiveVariants(baseColorObj, 'color')}
+    }
+
+    .db-text-weak {
+        color: $${prefix}-${baseColorObj.weak.enabled.name};
+
+        &-ia,
+        &[data-variant="ia"] {
+            ${generateInteractiveVariants(baseColorObj.weak, 'color')}
+        }
+    }
+}
+`;
 };
 
 exports.generateColorUtilitityClasses = (colorToken) => {
@@ -21,11 +56,14 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 	let output = '';
 
 	Object.keys(colorToken).forEach((value, index) => {
+		output += `/**
+* ${value.toUpperCase()} - Utilities          
+**/
+`;
 		// text colors
-		output += `
-%${prefix}-text-${value}, 
+		output += `%${prefix}-text-${value}, 
 .${prefix}-text-${value} {
-    color: $${prefix}-${colorToken[value].on.enabled.name};
+    color: $${prefix}-${colorToken[value].enabled.name};
 }
 `;
 		// text and background colors
@@ -78,6 +116,15 @@ exports.generateColorUtilitityClasses = (colorToken) => {
     }
 }
 `;
+		} else {
+			Object.keys(colorToken[value].bg).forEach((variant) => {
+				output += generateNeutralVariants(
+					value,
+					variant,
+					colorToken[value].bg[variant],
+					colorToken[value].on.bg
+				);
+			});
 		}
 	});
 

From 8ec922adf8faaef4fa8d029c82ccffd196901d1f Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Wed, 28 Sep 2022 22:43:35 +0200
Subject: [PATCH 03/10] feat: generate color utilities

---
 scripts/scss-utility-classes-generator.js | 85 +++++++++++++++++++++++
 style-dictionary.config.json              | 10 +++
 style-dictionary.js                       | 13 +++-
 3 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 scripts/scss-utility-classes-generator.js

diff --git a/scripts/scss-utility-classes-generator.js b/scripts/scss-utility-classes-generator.js
new file mode 100644
index 000000000..c8370bb98
--- /dev/null
+++ b/scripts/scss-utility-classes-generator.js
@@ -0,0 +1,85 @@
+const fs = require('fs');
+const colors = require('../tokens/zeplin.json');
+
+const prefix = 'db';
+
+const generateInteractiveVariants = (currentColorObj, cssProp) => {
+	return `
+        &:hover {
+            ${cssProp}: $${prefix}-${currentColorObj.hover.name};
+        }
+
+        &:active {
+            ${cssProp}: $${prefix}-${currentColorObj.pressed.name};
+        }`;
+};
+
+exports.generateColorUtilitityClasses = (colorToken) => {
+	//let colors2JSON = JSON.parse(JSON.stringify(colors)).colors;
+	//console.log('geladene Farben: ', colors, colors2JSON.primary);
+	console.log('generate Color Utlities', colorToken);
+	let output = '';
+
+	Object.keys(colorToken).forEach((value, index) => {
+		// text colors
+		output += `
+%${prefix}-text-${value}, 
+.${prefix}-text-${value} {
+    color: $${prefix}-${colorToken[value].on.enabled.name};
+}
+`;
+		// text and background colors
+		output += `
+%${prefix}-bg-${value},
+.${prefix}-bg-${value} {
+    background-color: $${prefix}-${colorToken[value].enabled.name};
+    color: $${prefix}-${colorToken[value].on.enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        ${generateInteractiveVariants(colorToken[value], 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+         ${generateInteractiveVariants(colorToken[value].on, 'color')}
+    }
+}`;
+
+		// special case neutral has no default value for enabled
+		if (colorToken[value].bg.enabled) {
+			// weak variants
+			output += `
+%${prefix}-bg-${value}-light,
+.${prefix}-bg-${value}-light {    
+    background-color: $${prefix}-${colorToken[value].bg.enabled.name};
+    color: $${prefix}-${colorToken[value].on.bg.enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        ${generateInteractiveVariants(colorToken[value].bg, 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+         ${generateInteractiveVariants(colorToken[value].on.bg, 'color')}
+    }
+
+    .db-text-weak {
+        color: $${prefix}-${colorToken[value].on.bg.weak.enabled.name};
+
+        &-ia,
+        &[data-variant="ia"] {
+            ${generateInteractiveVariants(
+				colorToken[value].on.bg.weak,
+				'color'
+			)}
+        }
+    }
+}
+`;
+		}
+	});
+
+	return output;
+};
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index 81ee57dfc..2c42f813d 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -94,6 +94,16 @@
 				}
 			]
 		},
+		"db-color-utilities": {
+			"transformGroup": "scss",
+			"buildPath": "build/scss/",
+			"files": [
+				{
+					"destination": "_color-utilities.scss",
+					"format": "db-color-utilities"
+				}
+			]
+		},
 		"android": {
 			"transformGroup": "android",
 			"buildPath": "build/android/src/main/res/values/",
diff --git a/style-dictionary.js b/style-dictionary.js
index ed91c9b1f..ed8615be3 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -3,7 +3,7 @@ const StyleDictionary = require('style-dictionary').extend(
 );
 
 const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary');
-
+const SCSSUtilities = require('../base/scripts/scss-utility-classes-generator');
 const transforms = require('style-dictionary/lib/common/transforms');
 
 const modifyTailwind = (dictionary) => {
@@ -24,6 +24,16 @@ StyleDictionary.registerFormat({
 	}
 });
 
+
+StyleDictionary.registerFormat({
+	name: 'db-color-utilities',
+	formatter: function ({ dictionary, platform, options, file }) {
+		const colors = dictionary.tokens.colors;
+		return SCSSUtilities.generateColorUtilitityClasses(colors);
+	}
+});
+
+
 const getPathTransform = (orgTransform, token, options) => {
 	return transforms[orgTransform].transformer(
 		{
@@ -80,4 +90,5 @@ StyleDictionary.registerTransformGroup({
 		'font/flutter/literal'
 	]
 });
+
 StyleDictionary.buildAllPlatforms();

From 3089be277c92a4236fc22fc2f20240ef409f7318 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Thu, 29 Sep 2022 10:26:40 +0200
Subject: [PATCH 04/10] feat: utilities for neutral variants

---
 scripts/scss-utility-classes-generator.js | 55 +++++++++++++++++++++--
 1 file changed, 51 insertions(+), 4 deletions(-)

diff --git a/scripts/scss-utility-classes-generator.js b/scripts/scss-utility-classes-generator.js
index c8370bb98..b94068522 100644
--- a/scripts/scss-utility-classes-generator.js
+++ b/scripts/scss-utility-classes-generator.js
@@ -11,7 +11,42 @@ const generateInteractiveVariants = (currentColorObj, cssProp) => {
 
         &:active {
             ${cssProp}: $${prefix}-${currentColorObj.pressed.name};
-        }`;
+        }
+        `;
+};
+
+const generateNeutralVariants = (
+	value,
+	index,
+	currentColorObj,
+	baseColorObj
+) => {
+	return `
+%${prefix}-bg-${value}-${index},
+.${prefix}-bg-${value}-${index} {    
+    background-color: $${prefix}-${currentColorObj.enabled.name};
+    color: $${prefix}-${baseColorObj.enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        ${generateInteractiveVariants(currentColorObj, 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+         ${generateInteractiveVariants(baseColorObj, 'color')}
+    }
+
+    .db-text-weak {
+        color: $${prefix}-${baseColorObj.weak.enabled.name};
+
+        &-ia,
+        &[data-variant="ia"] {
+            ${generateInteractiveVariants(baseColorObj.weak, 'color')}
+        }
+    }
+}
+`;
 };
 
 exports.generateColorUtilitityClasses = (colorToken) => {
@@ -21,11 +56,14 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 	let output = '';
 
 	Object.keys(colorToken).forEach((value, index) => {
+		output += `/**
+* ${value.toUpperCase()} - Utilities          
+**/
+`;
 		// text colors
-		output += `
-%${prefix}-text-${value}, 
+		output += `%${prefix}-text-${value}, 
 .${prefix}-text-${value} {
-    color: $${prefix}-${colorToken[value].on.enabled.name};
+    color: $${prefix}-${colorToken[value].enabled.name};
 }
 `;
 		// text and background colors
@@ -78,6 +116,15 @@ exports.generateColorUtilitityClasses = (colorToken) => {
     }
 }
 `;
+		} else {
+			Object.keys(colorToken[value].bg).forEach((variant) => {
+				output += generateNeutralVariants(
+					value,
+					variant,
+					colorToken[value].bg[variant],
+					colorToken[value].on.bg
+				);
+			});
 		}
 	});
 

From e8a45318554fd73a80be7b1dea94bf81f7d446b7 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Thu, 29 Sep 2022 10:48:22 +0200
Subject: [PATCH 05/10] refactor: removed unused properties

---
 ...erator.js => color-utilities-generator.js} | 30 +++++++++++--------
 style-dictionary.js                           |  6 ++--
 2 files changed, 20 insertions(+), 16 deletions(-)
 rename scripts/{scss-utility-classes-generator.js => color-utilities-generator.js} (80%)

diff --git a/scripts/scss-utility-classes-generator.js b/scripts/color-utilities-generator.js
similarity index 80%
rename from scripts/scss-utility-classes-generator.js
rename to scripts/color-utilities-generator.js
index b94068522..15f357896 100644
--- a/scripts/scss-utility-classes-generator.js
+++ b/scripts/color-utilities-generator.js
@@ -1,5 +1,7 @@
-const fs = require('fs');
-const colors = require('../tokens/zeplin.json');
+/**
+ * Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
+ * according to definitions made by DB UI v3
+ */
 
 const prefix = 'db';
 
@@ -15,12 +17,12 @@ const generateInteractiveVariants = (currentColorObj, cssProp) => {
         `;
 };
 
-const generateNeutralVariants = (
-	value,
-	index,
-	currentColorObj,
-	baseColorObj
-) => {
+/**
+ * some backgrounds have more than one variant with the same color for text (on-color)
+ * e.g. neutral with variants 1-6
+ */
+
+const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
 	return `
 %${prefix}-bg-${value}-${index},
 .${prefix}-bg-${value}-${index} {    
@@ -49,10 +51,14 @@ const generateNeutralVariants = (
 `;
 };
 
+/**
+ * generates color utility classes and scss placeholders for non-interactive and interactive variants
+ * of color combination (background-color and color) based on definitions made by DB UI v3
+ *
+ * @param {*} colorToken scss transform obj generated by styleDictionary
+ * @returns scss string
+ */
 exports.generateColorUtilitityClasses = (colorToken) => {
-	//let colors2JSON = JSON.parse(JSON.stringify(colors)).colors;
-	//console.log('geladene Farben: ', colors, colors2JSON.primary);
-	console.log('generate Color Utlities', colorToken);
 	let output = '';
 
 	Object.keys(colorToken).forEach((value, index) => {
@@ -118,7 +124,7 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 `;
 		} else {
 			Object.keys(colorToken[value].bg).forEach((variant) => {
-				output += generateNeutralVariants(
+				output += generateBGVariants(
 					value,
 					variant,
 					colorToken[value].bg[variant],
diff --git a/style-dictionary.js b/style-dictionary.js
index ed8615be3..f9be68845 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -3,7 +3,7 @@ const StyleDictionary = require('style-dictionary').extend(
 );
 
 const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary');
-const SCSSUtilities = require('../base/scripts/scss-utility-classes-generator');
+const SCSSUtilities = require('./scripts/color-utilities-generator');
 const transforms = require('style-dictionary/lib/common/transforms');
 
 const modifyTailwind = (dictionary) => {
@@ -24,16 +24,14 @@ StyleDictionary.registerFormat({
 	}
 });
 
-
 StyleDictionary.registerFormat({
 	name: 'db-color-utilities',
-	formatter: function ({ dictionary, platform, options, file }) {
+	formatter: function ({ dictionary }) {
 		const colors = dictionary.tokens.colors;
 		return SCSSUtilities.generateColorUtilitityClasses(colors);
 	}
 });
 
-
 const getPathTransform = (orgTransform, token, options) => {
 	return transforms[orgTransform].transformer(
 		{

From 5d8d9917a70fb8217e9730f8830d776e91fa0e1c Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Thu, 29 Sep 2022 21:44:14 +0200
Subject: [PATCH 06/10] fix: add color for child elements

---
 scripts/color-utilities-generator.js | 33 +++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/scripts/color-utilities-generator.js b/scripts/color-utilities-generator.js
index 15f357896..50c20077c 100644
--- a/scripts/color-utilities-generator.js
+++ b/scripts/color-utilities-generator.js
@@ -27,15 +27,22 @@ const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
 %${prefix}-bg-${value}-${index},
 .${prefix}-bg-${value}-${index} {    
     background-color: $${prefix}-${currentColorObj.enabled.name};
-    color: $${prefix}-${baseColorObj.enabled.name};
+    
+    > * {
+        color: $${prefix}-${baseColorObj.enabled.name};
+    }
 
     &-ia,
     &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value}-${index};
+
         ${generateInteractiveVariants(currentColorObj, 'background-color')}
     }
 
     &-text-ia,
     &[data-variant="text-ia"] {
+        color: $${prefix}-${baseColorObj.enabled.name};
+
          ${generateInteractiveVariants(baseColorObj, 'color')}
     }
 
@@ -44,6 +51,8 @@ const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
 
         &-ia,
         &[data-variant="ia"] {
+            color: $${prefix}-${baseColorObj.weak.enabled.name};
+
             ${generateInteractiveVariants(baseColorObj.weak, 'color')}
         }
     }
@@ -77,16 +86,22 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 %${prefix}-bg-${value},
 .${prefix}-bg-${value} {
     background-color: $${prefix}-${colorToken[value].enabled.name};
-    color: $${prefix}-${colorToken[value].on.enabled.name};
+    
+    > * {
+        color: $${prefix}-${colorToken[value].on.enabled.name};
+    }
 
     &-ia,
     &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value};
         ${generateInteractiveVariants(colorToken[value], 'background-color')}
     }
 
     &-text-ia,
     &[data-variant="text-ia"] {
-         ${generateInteractiveVariants(colorToken[value].on, 'color')}
+       color: $${prefix}-${colorToken[value].on.enabled.name};
+       
+        ${generateInteractiveVariants(colorToken[value].on, 'color')}
     }
 }`;
 
@@ -97,16 +112,22 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 %${prefix}-bg-${value}-light,
 .${prefix}-bg-${value}-light {    
     background-color: $${prefix}-${colorToken[value].bg.enabled.name};
-    color: $${prefix}-${colorToken[value].on.bg.enabled.name};
+    
+    > * {
+        color: $${prefix}-${colorToken[value].on.bg.enabled.name};
+    }
 
     &-ia,
     &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value}-light;
         ${generateInteractiveVariants(colorToken[value].bg, 'background-color')}
     }
 
     &-text-ia,
     &[data-variant="text-ia"] {
-         ${generateInteractiveVariants(colorToken[value].on.bg, 'color')}
+        color: $${prefix}-${colorToken[value].on.bg.enabled.name};
+
+        ${generateInteractiveVariants(colorToken[value].on.bg, 'color')}
     }
 
     .db-text-weak {
@@ -114,6 +135,8 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 
         &-ia,
         &[data-variant="ia"] {
+            color: $${prefix}-${colorToken[value].on.bg.weak.enabled.name};
+
             ${generateInteractiveVariants(
 				colorToken[value].on.bg.weak,
 				'color'

From 57f97e6eb97acf12d338c25158d7987ac9960402 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Wed, 5 Oct 2022 14:02:46 +0200
Subject: [PATCH 07/10] feat: color utilities generator

---
 scripts/color-classes-generator.js            | 109 ++++++++++++++++++
 ...tor.js => color-placeholders-generator.js} |  44 +++----
 source/css/db-ui-base.scss                    |   3 +
 style-dictionary.config.json                  |  16 ++-
 style-dictionary.js                           |  15 ++-
 5 files changed, 153 insertions(+), 34 deletions(-)
 create mode 100644 scripts/color-classes-generator.js
 rename scripts/{color-utilities-generator.js => color-placeholders-generator.js} (82%)

diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js
new file mode 100644
index 000000000..caa8851e0
--- /dev/null
+++ b/scripts/color-classes-generator.js
@@ -0,0 +1,109 @@
+/**
+ * Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
+ * according to definitions made by DB UI v3
+ */
+
+const prefix = 'db';
+
+/**
+ * some backgrounds have more than one variant with the same color for text (on-color)
+ * e.g. neutral with variants 1-6
+ */
+
+const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
+	return `
+.${prefix}-${value}-${index} {    
+    @extend %${prefix}-bg-${value}-${index}; 
+
+    &-ia,
+    &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value}-${index}-ia;
+    }
+
+    a {
+         @extend %${prefix}-bg-${value}-${index}-text-ia;
+    }
+
+    .db-weak {
+        @extend %weak;
+
+        &-ia,
+        &[data-variant="ia"],
+        a {
+             @extend %weak-ia;
+        }
+    }
+}
+`;
+};
+
+/**
+ * generates color utility classes and scss placeholders for non-interactive and interactive variants
+ * of color combination (background-color and color) based on definitions made by DB UI v3
+ *
+ * @param {*} colorToken scss transform obj generated by styleDictionary
+ * @returns scss string
+ */
+exports.generateColorUtilitityClasses = (colorToken) => {
+	let output = '';
+
+	Object.keys(colorToken).forEach((value, index) => {
+		output += `/**
+* ${value.toUpperCase()} - Utility Classes          
+**/
+`;
+		output += `
+.${prefix}-${value} {
+    @extend %${prefix}-bg-${value};
+        
+    &-ia,
+    &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value}-ia;
+    }
+
+    a {
+        @extend %${prefix}-bg-${value}-text-ia;
+    }
+}`;
+
+		// special case neutral has no default value for enabled
+		if (colorToken[value].bg.enabled) {
+			// weak variants
+			output += `
+.${prefix}-${value}-light {    
+     @extend %${prefix}-bg-${value}-light;
+    
+    &-ia,
+    &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value}-light-ia;
+    }
+
+    a {
+         @extend %${prefix}-bg-${value}-light-text-ia;
+    }
+
+    .db-weak {
+        @extend %weak;
+
+        &-ia,
+        &[data-variant="ia"],
+        a {
+            @extend %weak-ia;
+        }
+    }
+}
+`;
+		} else {
+			Object.keys(colorToken[value].bg).forEach((variant) => {
+				output += generateBGVariants(
+					value,
+					variant,
+					colorToken[value].bg[variant],
+					colorToken[value].on.bg
+				);
+			});
+		}
+	});
+
+	return output;
+};
diff --git a/scripts/color-utilities-generator.js b/scripts/color-placeholders-generator.js
similarity index 82%
rename from scripts/color-utilities-generator.js
rename to scripts/color-placeholders-generator.js
index 50c20077c..3f512cf7f 100644
--- a/scripts/color-utilities-generator.js
+++ b/scripts/color-placeholders-generator.js
@@ -24,13 +24,9 @@ const generateInteractiveVariants = (currentColorObj, cssProp) => {
 
 const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
 	return `
-%${prefix}-bg-${value}-${index},
-.${prefix}-bg-${value}-${index} {    
+%${prefix}-bg-${value}-${index}{    
     background-color: $${prefix}-${currentColorObj.enabled.name};
-    
-    > * {
-        color: $${prefix}-${baseColorObj.enabled.name};
-    }
+    color: $${prefix}-${baseColorObj.enabled.name};
 
     &-ia,
     &[data-variant="ia"] {
@@ -46,7 +42,7 @@ const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
          ${generateInteractiveVariants(baseColorObj, 'color')}
     }
 
-    .db-text-weak {
+    %weak {
         color: $${prefix}-${baseColorObj.weak.enabled.name};
 
         &-ia,
@@ -67,30 +63,26 @@ const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
  * @param {*} colorToken scss transform obj generated by styleDictionary
  * @returns scss string
  */
-exports.generateColorUtilitityClasses = (colorToken) => {
+exports.generateColorUtilitityPlaceholder = (colorToken) => {
 	let output = '';
 
 	Object.keys(colorToken).forEach((value, index) => {
 		output += `/**
-* ${value.toUpperCase()} - Utilities          
+* ${value.toUpperCase()} - Placeholder Utilities          
 **/
 `;
-		// text colors
-		output += `%${prefix}-text-${value}, 
-.${prefix}-text-${value} {
-    color: $${prefix}-${colorToken[value].enabled.name};
-}
-`;
+		// 		// text colors
+		// 		output += `%${prefix}-text-${value},
+		// .${prefix}-text-${value} {
+		//     color: $${prefix}-${colorToken[value].enabled.name};
+		// }
+		// `;
 		// text and background colors
 		output += `
-%${prefix}-bg-${value},
-.${prefix}-bg-${value} {
+%${prefix}-bg-${value} {
     background-color: $${prefix}-${colorToken[value].enabled.name};
+    color: $${prefix}-${colorToken[value].on.enabled.name};
     
-    > * {
-        color: $${prefix}-${colorToken[value].on.enabled.name};
-    }
-
     &-ia,
     &[data-variant="ia"] {
         @extend %${prefix}-bg-${value};
@@ -109,14 +101,10 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 		if (colorToken[value].bg.enabled) {
 			// weak variants
 			output += `
-%${prefix}-bg-${value}-light,
-.${prefix}-bg-${value}-light {    
+%${prefix}-bg-${value}-light {    
     background-color: $${prefix}-${colorToken[value].bg.enabled.name};
+    color: $${prefix}-${colorToken[value].on.bg.enabled.name};
     
-    > * {
-        color: $${prefix}-${colorToken[value].on.bg.enabled.name};
-    }
-
     &-ia,
     &[data-variant="ia"] {
         @extend %${prefix}-bg-${value}-light;
@@ -130,7 +118,7 @@ exports.generateColorUtilitityClasses = (colorToken) => {
         ${generateInteractiveVariants(colorToken[value].on.bg, 'color')}
     }
 
-    .db-text-weak {
+    %weak {
         color: $${prefix}-${colorToken[value].on.bg.weak.enabled.name};
 
         &-ia,
diff --git a/source/css/db-ui-base.scss b/source/css/db-ui-base.scss
index deb91f911..b7e6e5f0e 100644
--- a/source/css/db-ui-base.scss
+++ b/source/css/db-ui-base.scss
@@ -1,6 +1,9 @@
 @import "../../build/scss/variables";
 @import url("variables.css");
 
+@import "../../build/scss/color-placeholder";
+@import "../../build/scss/color-classes";
+
 /* body {
 	font-family: var(--asset-font-db-screensans-regular-name);
 } */
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index 2c42f813d..8baffb5f0 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -94,13 +94,23 @@
 				}
 			]
 		},
-		"db-color-utilities": {
+		"db-color-placeholders": {
 			"transformGroup": "scss",
 			"buildPath": "build/scss/",
 			"files": [
 				{
-					"destination": "_color-utilities.scss",
-					"format": "db-color-utilities"
+					"destination": "_color-placeholder.scss",
+					"format": "db-color-placeholders"
+				}
+			]
+		},
+		"db-color-classes": {
+			"transformGroup": "scss",
+			"buildPath": "build/scss/",
+			"files": [
+				{
+					"destination": "_color-classes.scss",
+					"format": "db-color-classes"
 				}
 			]
 		},
diff --git a/style-dictionary.js b/style-dictionary.js
index f9be68845..7a5be8aef 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -3,7 +3,8 @@ const StyleDictionary = require('style-dictionary').extend(
 );
 
 const minifyDictionary = require('style-dictionary/lib/common/formatHelpers/minifyDictionary');
-const SCSSUtilities = require('./scripts/color-utilities-generator');
+const SCSSPlaceholders = require('./scripts/color-placeholders-generator');
+const SCSSClasses = require('./scripts/color-classes-generator');
 const transforms = require('style-dictionary/lib/common/transforms');
 
 const modifyTailwind = (dictionary) => {
@@ -25,10 +26,18 @@ StyleDictionary.registerFormat({
 });
 
 StyleDictionary.registerFormat({
-	name: 'db-color-utilities',
+	name: 'db-color-placeholders',
 	formatter: function ({ dictionary }) {
 		const colors = dictionary.tokens.colors;
-		return SCSSUtilities.generateColorUtilitityClasses(colors);
+		return SCSSPlaceholders.generateColorUtilitityPlaceholder(colors);
+	}
+});
+
+StyleDictionary.registerFormat({
+	name: 'db-color-classes',
+	formatter: function ({ dictionary }) {
+		const colors = dictionary.tokens.colors;
+		return SCSSClasses.generateColorUtilitityClasses(colors);
 	}
 });
 

From 36a9759cdf3e382eeb9bd95bcb205126123d4c42 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Tue, 11 Oct 2022 15:49:45 +0200
Subject: [PATCH 08/10] fix: remove console logs

---
 helpers/flat-colors.js                        |   43 +-
 scripts/color-classes-generator.js            |   91 +-
 scripts/color-placeholders-generator.js       |   87 +-
 scripts/zeplin-styleguide.js                  |    2 +-
 .../_patterns/logo/_logo.demonstration.scss   |    4 +-
 source/css/pattern-scaffolding.css            |   21 +-
 tokens/zeplin.json                            | 1095 +++++++++++++----
 7 files changed, 984 insertions(+), 359 deletions(-)

diff --git a/helpers/flat-colors.js b/helpers/flat-colors.js
index 479a9147e..f0de45ab0 100644
--- a/helpers/flat-colors.js
+++ b/helpers/flat-colors.js
@@ -141,17 +141,20 @@ module.exports = function (Handlebars) {
 		let resultString = '';
 
 		Object.keys(context.data.root.colors).forEach((header) => {
-			resultString += `<h2>${header}</h2>`;
+			resultString += `<h2>${header}</h2>`; // e.g. neutral, primary
 			const headerObject = context.data.root.colors[header];
 			if (headerObject) {
 				const headerObjKeysRest = Object.keys(headerObject).filter(
 					(k) => k !== 'bg'
 				);
-				resultString += addList(
-					header,
-					headerObject,
-					headerObjKeysRest
-				);
+				// neutral has no enabled color
+				if (context.data.root.colors[header].enabled) {
+					resultString += addList(
+						header,
+						headerObject,
+						headerObjKeysRest
+					);
+				}
 				const onBgObject = headerObject['on'];
 				const bgObject = headerObject['bg'];
 				if (bgObject) {
@@ -162,10 +165,28 @@ module.exports = function (Handlebars) {
 						} else {
 							// Only happens in neutral colors
 							bgKeys.forEach((bgKey) => {
-								bgObject[bgKey] = {
-									...bgObject[bgKey],
-									on: onBgObject['bg']
-								};
+								if (
+									Object.keys(bgObject[bgKey]).find(
+										(key) => key === 'enabled'
+									)
+								) {
+									bgObject[bgKey] = {
+										...bgObject[bgKey],
+										on: onBgObject['bg']
+									};
+								} else {
+									Object.keys(bgObject[bgKey]).forEach(
+										(bgChildKey) => {
+											bgObject[`${bgKey}-${bgChildKey}`] =
+												{
+													...bgObject[bgKey][
+														bgChildKey
+													],
+													on: onBgObject['bg']
+												};
+										}
+									);
+								}
 							});
 						}
 					}
@@ -174,7 +195,7 @@ module.exports = function (Handlebars) {
 					const otherChildren = bgKeys.filter(
 						(key) => !isDefaultChild(key)
 					);
-					resultString += `<h3>${header} backgrounds light (only)</h3>`;
+					resultString += `<h3>${header} backgrounds</h3>`;
 					resultString += addList(
 						`${header}-bg`,
 						bgObject,
diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js
index caa8851e0..55be5a570 100644
--- a/scripts/color-classes-generator.js
+++ b/scripts/color-classes-generator.js
@@ -10,9 +10,9 @@ const prefix = 'db';
  * e.g. neutral with variants 1-6
  */
 
-const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
+const generateBGVariants = (value, index) => {
 	return `
-.${prefix}-${value}-${index} {    
+.${prefix}-bg-${value}-${index} {    
     @extend %${prefix}-bg-${value}-${index}; 
 
     &-ia,
@@ -52,57 +52,80 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 * ${value.toUpperCase()} - Utility Classes          
 **/
 `;
-		output += `
-.${prefix}-${value} {
-    @extend %${prefix}-bg-${value};
+		// text colors with interactive variant, e.g. primary
+		if (colorToken[value].enabled) {
+			output += `
+.${prefix}-text-${value} {
+    @extend %${prefix}-text-${value};
         
     &-ia,
     &[data-variant="ia"] {
-        @extend %${prefix}-bg-${value}-ia;
+        @extend %${prefix}-text-${value}-ia;
     }
 
     a {
-        @extend %${prefix}-bg-${value}-text-ia;
+        @extend %${prefix}-text-${value}-ia;
     }
 }`;
 
-		// special case neutral has no default value for enabled
-		if (colorToken[value].bg.enabled) {
-			// weak variants
 			output += `
-.${prefix}-${value}-light {    
-     @extend %${prefix}-bg-${value}-light;
-    
+.${prefix}-bg-${value} {
+    @extend %${prefix}-bg-${value};
+        
     &-ia,
     &[data-variant="ia"] {
-        @extend %${prefix}-bg-${value}-light-ia;
+        @extend %${prefix}-bg-${value}-ia;
     }
 
     a {
-         @extend %${prefix}-bg-${value}-light-text-ia;
+        @extend %${prefix}-bg-${value}-text-ia;
     }
+}`;
+		}
 
-    .db-weak {
-        @extend %weak;
+		// 		// special case neutral has no default value for enabled
+		// 		if (colorToken[value].bg.enabled) {
+		// 			// weak variants
+		// 			output += `
+		// .${prefix}-${value}-light {
+		//      @extend %${prefix}-bg-${value}-light;
 
-        &-ia,
-        &[data-variant="ia"],
-        a {
-            @extend %weak-ia;
-        }
-    }
-}
-`;
-		} else {
-			Object.keys(colorToken[value].bg).forEach((variant) => {
-				output += generateBGVariants(
-					value,
-					variant,
-					colorToken[value].bg[variant],
-					colorToken[value].on.bg
+		//     &-ia,
+		//     &[data-variant="ia"] {
+		//         @extend %${prefix}-bg-${value}-light-ia;
+		//     }
+
+		//     a {
+		//          @extend %${prefix}-bg-${value}-light-text-ia;
+		//     }
+
+		//     .db-weak {
+		//         @extend %weak;
+
+		//         &-ia,
+		//         &[data-variant="ia"],
+		//         a {
+		//             @extend %weak-ia;
+		//         }
+		//     }
+		// }
+		// `;
+		// 		} else {
+		Object.keys(colorToken[value].bg).forEach((variant) => {
+			if (colorToken[value].bg[variant].enabled) {
+				output += generateBGVariants(value, variant);
+			} else {
+				Object.keys(colorToken[value].bg[variant]).forEach(
+					(childVariant) => {
+						output += generateBGVariants(
+							value,
+							variant + '-' + childVariant
+						);
+					}
 				);
-			});
-		}
+			}
+		});
+		//}
 	});
 
 	return output;
diff --git a/scripts/color-placeholders-generator.js b/scripts/color-placeholders-generator.js
index 3f512cf7f..220dd5bb4 100644
--- a/scripts/color-placeholders-generator.js
+++ b/scripts/color-placeholders-generator.js
@@ -24,21 +24,19 @@ const generateInteractiveVariants = (currentColorObj, cssProp) => {
 
 const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
 	return `
-%${prefix}-bg-${value}-${index}{    
+%${prefix}-bg-${value}-${index} {    
     background-color: $${prefix}-${currentColorObj.enabled.name};
     color: $${prefix}-${baseColorObj.enabled.name};
 
     &-ia,
     &[data-variant="ia"] {
         @extend %${prefix}-bg-${value}-${index};
-
         ${generateInteractiveVariants(currentColorObj, 'background-color')}
     }
 
     &-text-ia,
     &[data-variant="text-ia"] {
         color: $${prefix}-${baseColorObj.enabled.name};
-
          ${generateInteractiveVariants(baseColorObj, 'color')}
     }
 
@@ -48,7 +46,6 @@ const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {
         &-ia,
         &[data-variant="ia"] {
             color: $${prefix}-${baseColorObj.weak.enabled.name};
-
             ${generateInteractiveVariants(baseColorObj.weak, 'color')}
         }
     }
@@ -71,14 +68,21 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => {
 * ${value.toUpperCase()} - Placeholder Utilities          
 **/
 `;
-		// 		// text colors
-		// 		output += `%${prefix}-text-${value},
-		// .${prefix}-text-${value} {
-		//     color: $${prefix}-${colorToken[value].enabled.name};
-		// }
-		// `;
-		// text and background colors
-		output += `
+		// text colors with interactive variant, e.g. primary
+		if (colorToken[value].enabled) {
+			output += `%${prefix}-text-${value} {
+    color: $${prefix}-${colorToken[value].enabled.name};
+
+    &-ia,
+    &[data-variant="ia"] {
+        color: $${prefix}-${colorToken[value].enabled.name};
+        ${generateInteractiveVariants(colorToken[value], 'color')}
+    }
+}
+`;
+
+			// text and background colors
+			output += `
 %${prefix}-bg-${value} {
     background-color: $${prefix}-${colorToken[value].enabled.name};
     color: $${prefix}-${colorToken[value].on.enabled.name};
@@ -91,58 +95,33 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => {
 
     &-text-ia,
     &[data-variant="text-ia"] {
-       color: $${prefix}-${colorToken[value].on.enabled.name};
-       
+       color: $${prefix}-${colorToken[value].on.enabled.name};       
         ${generateInteractiveVariants(colorToken[value].on, 'color')}
     }
 }`;
+		}
 
-		// special case neutral has no default value for enabled
-		if (colorToken[value].bg.enabled) {
-			// weak variants
-			output += `
-%${prefix}-bg-${value}-light {    
-    background-color: $${prefix}-${colorToken[value].bg.enabled.name};
-    color: $${prefix}-${colorToken[value].on.bg.enabled.name};
-    
-    &-ia,
-    &[data-variant="ia"] {
-        @extend %${prefix}-bg-${value}-light;
-        ${generateInteractiveVariants(colorToken[value].bg, 'background-color')}
-    }
-
-    &-text-ia,
-    &[data-variant="text-ia"] {
-        color: $${prefix}-${colorToken[value].on.bg.enabled.name};
-
-        ${generateInteractiveVariants(colorToken[value].on.bg, 'color')}
-    }
-
-    %weak {
-        color: $${prefix}-${colorToken[value].on.bg.weak.enabled.name};
-
-        &-ia,
-        &[data-variant="ia"] {
-            color: $${prefix}-${colorToken[value].on.bg.weak.enabled.name};
-
-            ${generateInteractiveVariants(
-				colorToken[value].on.bg.weak,
-				'color'
-			)}
-        }
-    }
-}
-`;
-		} else {
-			Object.keys(colorToken[value].bg).forEach((variant) => {
+		Object.keys(colorToken[value].bg).forEach((variant) => {
+			if (colorToken[value].bg[variant].enabled) {
 				output += generateBGVariants(
 					value,
 					variant,
 					colorToken[value].bg[variant],
 					colorToken[value].on.bg
 				);
-			});
-		}
+			} else {
+				Object.keys(colorToken[value].bg[variant]).forEach(
+					(childVariant) => {
+						output += generateBGVariants(
+							value,
+							variant + '-' + childVariant,
+							colorToken[value].bg[variant][childVariant],
+							colorToken[value].on.bg
+						);
+					}
+				);
+			}
+		});
 	});
 
 	return output;
diff --git a/scripts/zeplin-styleguide.js b/scripts/zeplin-styleguide.js
index 777763dda..0c83eac14 100644
--- a/scripts/zeplin-styleguide.js
+++ b/scripts/zeplin-styleguide.js
@@ -31,7 +31,7 @@ const correctColor = (key) => {
 	) {
 		correctKey = `${correctKey}-enabled`;
 	}
-	return correctKey.replace('backgroundonly', 'bg');
+	return correctKey.replace('background', 'bg');
 };
 
 const combineDataRecursive = (data, currentKey, keyArray, value) => {
diff --git a/source/_patterns/logo/_logo.demonstration.scss b/source/_patterns/logo/_logo.demonstration.scss
index f0ffcf038..9da7de03d 100644
--- a/source/_patterns/logo/_logo.demonstration.scss
+++ b/source/_patterns/logo/_logo.demonstration.scss
@@ -21,7 +21,7 @@
 		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
 			background-color: $db-colors-primary-enabled;
 
-			--db-logo-color: #{$db-colors-neutral-enabled};
+			--db-logo-color: #{$db-colors-neutral-bg-0-enabled};
 		}
 		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-image {
 			background-image: url(https://marketingportal.extranet.deutschebahn.com/sites/default/files/2021-12-13/Ausn01.png);
@@ -36,7 +36,7 @@
 			width: 600px;
 			height: 340px;
 
-			--db-logo-backgroundcolor: #{$db-colors-neutral-enabled};
+			--db-logo-backgroundcolor: #{$db-colors-neutral-bg-0-enabled};
 		}
 	}
 }
diff --git a/source/css/pattern-scaffolding.css b/source/css/pattern-scaffolding.css
index fecc0d5ce..4f8da59c3 100644
--- a/source/css/pattern-scaffolding.css
+++ b/source/css/pattern-scaffolding.css
@@ -31,9 +31,9 @@
 .sg-colors {
 	display: grid;
 	grid-gap: var(--pl-grid-gap);
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
 	list-style: none !important;
-	margin: 0 !important;
+	margin: 0.75rem 0 2 rem;
 	padding: 0 !important;
 }
 
@@ -44,13 +44,15 @@
 	flex: auto;
 	flex: auto;
 	margin: 0 0.5em 0.5em 0;
-	max-width: 14em;
+	max-width: 20em;
 	min-width: 5em;
-	padding: 0.3em;
+	padding: 0.75em;
+	font-size: 16px;
+	line-height: 1rem;
 }
 
 .sg-swatch {
-	border: #000 dashed 1px;
+	border: rgba(0, 0, 0, 0.06) solid 1px;
 	border-radius: 5px;
 	display: flex;
 	margin-bottom: 0.3em;
@@ -59,12 +61,15 @@
 }
 
 .sg-label {
-	font-size: 90%;
-	line-height: 1;
+	font-size: 0.75rem;
+}
+
+.sg-label strong {
+	font-size: 1.2em;
 }
 
 .sg-swatch .sg-label {
-	font-size: 80%;
+	font-size: 0.7rem;
 	margin: auto;
 }
 
diff --git a/tokens/zeplin.json b/tokens/zeplin.json
index 0aab8745d..dcea784b9 100644
--- a/tokens/zeplin.json
+++ b/tokens/zeplin.json
@@ -3,428 +3,1025 @@
 		"title": {
 			"large": {
 				"desktop": {
-					"lineHeight": { "value": 144 },
-					"fontSize": { "value": 120 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 144
+					},
+					"fontSize": {
+						"value": 120
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 96 },
-					"fontSize": { "value": 80 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 96
+					},
+					"fontSize": {
+						"value": 80
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 48 },
-					"fontSize": { "value": 40 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 48
+					},
+					"fontSize": {
+						"value": 40
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			},
 			"medium": {
 				"desktop": {
-					"lineHeight": { "value": 120 },
-					"fontSize": { "value": 96 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 120
+					},
+					"fontSize": {
+						"value": 96
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 80 },
-					"fontSize": { "value": 64 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 80
+					},
+					"fontSize": {
+						"value": 64
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 48 },
-					"fontSize": { "value": 40 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 48
+					},
+					"fontSize": {
+						"value": 40
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			},
 			"small": {
 				"desktop": {
-					"lineHeight": { "value": 96 },
-					"fontSize": { "value": 80 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 96
+					},
+					"fontSize": {
+						"value": 80
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 64 },
-					"fontSize": { "value": 48 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 64
+					},
+					"fontSize": {
+						"value": 48
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 48 },
-					"fontSize": { "value": 40 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 48
+					},
+					"fontSize": {
+						"value": 40
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			}
 		},
 		"headline": {
 			"extralarge": {
 				"desktop": {
-					"lineHeight": { "value": 80 },
-					"fontSize": { "value": 64 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 80
+					},
+					"fontSize": {
+						"value": 64
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 48 },
-					"fontSize": { "value": 40 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 48
+					},
+					"fontSize": {
+						"value": 40
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 40 },
-					"fontSize": { "value": 32 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 40
+					},
+					"fontSize": {
+						"value": 32
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			},
 			"large": {
 				"desktop": {
-					"lineHeight": { "value": 64 },
-					"fontSize": { "value": 48 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 64
+					},
+					"fontSize": {
+						"value": 48
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 40 },
-					"fontSize": { "value": 32 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 40
+					},
+					"fontSize": {
+						"value": 32
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 32 },
-					"fontSize": { "value": 28 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 32
+					},
+					"fontSize": {
+						"value": 28
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			},
 			"medium": {
 				"desktop": {
-					"lineHeight": { "value": 40 },
-					"fontSize": { "value": 32 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 40
+					},
+					"fontSize": {
+						"value": 32
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 24 },
-					"fontSize": { "value": 24 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 24
+					},
+					"fontSize": {
+						"value": 24
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 28 },
-					"fontSize": { "value": 24 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 28
+					},
+					"fontSize": {
+						"value": 24
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			},
 			"small": {
 				"desktop": {
-					"lineHeight": { "value": 28 },
-					"fontSize": { "value": 24 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 28
+					},
+					"fontSize": {
+						"value": 24
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 24 },
-					"fontSize": { "value": 20 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 24
+					},
+					"fontSize": {
+						"value": 20
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 24 },
-					"fontSize": { "value": 20 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 24
+					},
+					"fontSize": {
+						"value": 20
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			},
 			"xsmall": {
 				"desktop": {
-					"lineHeight": { "value": 20 },
-					"fontSize": { "value": 16 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 20
+					},
+					"fontSize": {
+						"value": 16
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 20 },
-					"fontSize": { "value": 16 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 20
+					},
+					"fontSize": {
+						"value": 16
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 20 },
-					"fontSize": { "value": 16 },
-					"fontWeight": { "value": 900 }
+					"lineHeight": {
+						"value": 20
+					},
+					"fontSize": {
+						"value": 16
+					},
+					"fontWeight": {
+						"value": 900
+					}
 				}
 			}
 		},
 		"body": {
 			"large": {
 				"desktop": {
-					"lineHeight": { "value": 32 },
-					"fontSize": { "value": 24 },
-					"fontWeight": { "value": 400 }
+					"lineHeight": {
+						"value": 32
+					},
+					"fontSize": {
+						"value": 24
+					},
+					"fontWeight": {
+						"value": 400
+					}
 				},
 				"tablet": {
-					"lineHeight": { "value": 32 },
-					"fontSize": { "value": 24 },
-					"fontWeight": { "value": 400 }
+					"lineHeight": {
+						"value": 32
+					},
+					"fontSize": {
+						"value": 24
+					},
+					"fontWeight": {
+						"value": 400
+					}
 				},
 				"mobile": {
-					"lineHeight": { "value": 28 },
-					"fontSize": { "value": 20 },
-					"fontWeight": { "value": 400 }
+					"lineHeight": {
+						"value": 28
+					},
+					"fontSize": {
+						"value": 20
+					},
+					"fontWeight": {
+						"value": 400
+					}
 				}
 			},
 			"medium": {
-				"lineHeight": { "value": 24 },
-				"fontSize": { "value": 16 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 24
+				},
+				"fontSize": {
+					"value": 16
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			},
 			"small": {
-				"lineHeight": { "value": 20 },
-				"fontSize": { "value": 14 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 20
+				},
+				"fontSize": {
+					"value": 14
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			},
 			"xsmall": {
-				"lineHeight": { "value": 16 },
-				"fontSize": { "value": 12 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 16
+				},
+				"fontSize": {
+					"value": 12
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			}
 		},
 		"link": {
 			"medium": {
-				"lineHeight": { "value": 20 },
-				"fontSize": { "value": 16 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 20
+				},
+				"fontSize": {
+					"value": 16
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			},
 			"xsmall": {
-				"lineHeight": { "value": 16 },
-				"fontSize": { "value": 12 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 16
+				},
+				"fontSize": {
+					"value": 12
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			},
 			"small": {
-				"lineHeight": { "value": 20 },
-				"fontSize": { "value": 14 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 20
+				},
+				"fontSize": {
+					"value": 14
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			}
 		},
 		"system": {
 			"xxsmall": {
-				"lineHeight": { "value": 12 },
-				"fontSize": { "value": 10 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 12
+				},
+				"fontSize": {
+					"value": 10
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			},
 			"large": {
-				"lineHeight": { "value": 28 },
-				"fontSize": { "value": 20 },
-				"fontWeight": { "value": 400 }
+				"lineHeight": {
+					"value": 28
+				},
+				"fontSize": {
+					"value": 20
+				},
+				"fontWeight": {
+					"value": 400
+				}
 			}
 		}
 	},
 	"spacing": {
-		"1": { "value": "8px" },
-		"2": { "value": "16px" },
-		"3": { "value": "24px" },
-		"4": { "value": "32px" },
-		"5": { "value": "40px" },
-		"6": { "value": "48px" },
-		"8": { "value": "64px" },
-		"10": { "value": "80px" },
-		"12": { "value": "96px" },
-		"15": { "value": "120px" },
-		"20": { "value": "160px" },
-		"30": { "value": "240px" },
-		"40": { "value": "320px" },
-		"60": { "value": "480px" },
-		"80": { "value": "640px" },
-		"100": { "value": "800px" },
-		"120": { "value": "960px" },
-		"0.5": { "value": "4px" },
-		"2.5": { "value": "20px" },
-		"1.5": { "value": "12px" }
+		"1": {
+			"value": "8px"
+		},
+		"2": {
+			"value": "16px"
+		},
+		"3": {
+			"value": "24px"
+		},
+		"4": {
+			"value": "32px"
+		},
+		"5": {
+			"value": "40px"
+		},
+		"6": {
+			"value": "48px"
+		},
+		"8": {
+			"value": "64px"
+		},
+		"10": {
+			"value": "80px"
+		},
+		"12": {
+			"value": "96px"
+		},
+		"15": {
+			"value": "120px"
+		},
+		"20": {
+			"value": "160px"
+		},
+		"30": {
+			"value": "240px"
+		},
+		"40": {
+			"value": "320px"
+		},
+		"60": {
+			"value": "480px"
+		},
+		"80": {
+			"value": "640px"
+		},
+		"100": {
+			"value": "800px"
+		},
+		"120": {
+			"value": "960px"
+		},
+		"0.5": {
+			"value": "4px"
+		},
+		"2.5": {
+			"value": "20px"
+		},
+		"1.5": {
+			"value": "12px"
+		}
 	},
 	"colors": {
 		"neutral": {
-			"enabled": { "value": "rgb(255, 255, 255)" },
-			"hover": { "value": "rgb(235, 235, 235)" },
-			"pressed": { "value": "rgb(214, 214, 214)" },
 			"bg": {
+				"0": {
+					"enabled": {
+						"value": "rgb(255, 255, 255)"
+					},
+					"hover": {
+						"value": "rgb(224, 224, 224)"
+					},
+					"pressed": {
+						"value": "rgb(194, 194, 194)"
+					}
+				},
 				"1": {
-					"enabled": { "value": "rgb(248, 249, 249)" },
-					"hover": { "value": "rgb(228, 229, 229)" },
-					"pressed": { "value": "rgb(208, 208, 208)" }
+					"enabled": {
+						"value": "rgb(248, 249, 249)"
+					},
+					"hover": {
+						"value": "rgb(217, 218, 218)"
+					},
+					"pressed": {
+						"value": "rgb(188, 189, 189)"
+					}
 				},
 				"2": {
-					"enabled": { "value": "rgb(242, 243, 244)" },
-					"hover": { "value": "rgb(223, 223, 224)" },
-					"pressed": { "value": "rgb(203, 203, 204)" }
+					"enabled": {
+						"value": "rgb(242, 243, 244)"
+					},
+					"hover": {
+						"value": "rgb(212, 213, 214)"
+					},
+					"pressed": {
+						"value": "rgb(184, 184, 185)"
+					}
 				},
 				"3": {
-					"enabled": { "value": "rgb(236, 236, 237)" },
-					"pressed": { "value": "rgb(198, 198, 198)" },
-					"hover": { "value": "rgb(217, 217, 218)" }
+					"enabled": {
+						"value": "rgb(236, 236, 237)"
+					},
+					"pressed": {
+						"value": "rgb(179, 179, 180)"
+					},
+					"hover": {
+						"value": "rgb(207, 207, 208)"
+					}
 				},
 				"4": {
-					"enabled": { "value": "rgb(230, 230, 232)" },
-					"hover": { "value": "rgb(211, 211, 213)" },
-					"pressed": { "value": "rgb(193, 193, 194)" }
+					"enabled": {
+						"value": "rgb(230, 230, 232)"
+					},
+					"hover": {
+						"value": "rgb(202, 202, 203)"
+					},
+					"pressed": {
+						"value": "rgb(174, 174, 176)"
+					}
 				},
 				"5": {
-					"enabled": { "value": "rgb(224, 225, 227)" },
-					"hover": { "value": "rgb(206, 207, 209)" },
-					"pressed": { "value": "rgb(187, 188, 190)" }
+					"enabled": {
+						"value": "rgb(224, 225, 227)"
+					},
+					"hover": {
+						"value": "rgb(196, 197, 199)"
+					},
+					"pressed": {
+						"value": "rgb(170, 171, 172)"
+					}
 				},
 				"6": {
-					"enabled": { "value": "rgb(217, 219, 221)" },
-					"hover": { "value": "rgb(199, 201, 203)" },
-					"pressed": { "value": "rgb(182, 183, 185)" }
+					"enabled": {
+						"value": "rgb(217, 219, 221)"
+					},
+					"hover": {
+						"value": "rgb(190, 192, 194)"
+					},
+					"pressed": {
+						"value": "rgb(165, 166, 168)"
+					}
+				},
+				"transparent": {
+					"full": {
+						"enabled": {
+							"value": "rgba(0, 0, 0, 0.0)"
+						},
+						"pressed": {
+							"value": "rgba(0, 0, 0, 0.24)"
+						},
+						"hover": {
+							"value": "rgba(0, 0, 0, 0.12)"
+						}
+					},
+					"semi": {
+						"enabled": {
+							"value": "rgba(0, 0, 0, 0.04)"
+						},
+						"pressed": {
+							"value": "rgba(0, 0, 0, 0.24)"
+						},
+						"hover": {
+							"value": "rgba(0, 0, 0, 0.12)"
+						}
+					}
 				}
 			},
 			"on": {
-				"enabled": { "value": "rgb(40, 45, 55)" },
 				"bg": {
-					"enabled": { "value": "rgb(40, 45, 55)" },
-					"pressed": { "value": "rgba(40, 45, 55, 0.5)" },
-					"hover": { "value": "rgba(40, 45, 55, 0.75)" },
+					"enabled": {
+						"value": "rgb(40, 45, 55)"
+					},
+					"hover": {
+						"value": "rgba(40, 45, 55, 0.75)"
+					},
+					"pressed": {
+						"value": "rgba(40, 45, 55, 0.5)"
+					},
 					"weak": {
-						"enabled": { "value": "rgba(40, 45, 55, 0.75)" },
-						"pressed": { "value": "rgba(40, 45, 55, 0.25)" },
-						"hover": { "value": "rgba(40, 45, 55, 0.5)" }
+						"enabled": {
+							"value": "rgba(40, 45, 55, 0.75)"
+						},
+						"pressed": {
+							"value": "rgba(40, 45, 55, 0.25)"
+						},
+						"hover": {
+							"value": "rgba(40, 45, 55, 0.5)"
+						}
 					}
-				},
-				"hover": { "value": "rgba(40, 45, 55, 0.75)" },
-				"pressed": { "value": "rgba(40, 45, 55, 0.5)" }
+				}
 			}
 		},
 		"primary": {
-			"enabled": { "value": "rgb(236, 0, 22)" },
-			"hover": { "value": "rgb(217, 0, 20)" },
-			"pressed": { "value": "rgb(199, 0, 18)" },
+			"enabled": {
+				"value": "rgb(236, 0, 22)"
+			},
+			"hover": {
+				"value": "rgb(217, 0, 20)"
+			},
+			"pressed": {
+				"value": "rgb(199, 0, 18)"
+			},
 			"bg": {
-				"enabled": { "value": "rgb(250, 191, 196)" },
-				"hover": { "value": "rgb(246, 161, 169)" },
-				"pressed": { "value": "rgb(246, 139, 149)" }
+				"light": {
+					"enabled": {
+						"value": "rgb(250, 191, 196)"
+					},
+					"hover": {
+						"value": "rgb(246, 161, 169)"
+					},
+					"pressed": {
+						"value": "rgb(246, 139, 149)"
+					}
+				},
+				"transparent": {
+					"semi": {
+						"enabled": {
+							"value": "rgba(236, 0, 22, 0.04)"
+						},
+						"hover": {
+							"value": "rgba(236, 0, 22, 0.12)"
+						},
+						"pressed": {
+							"value": "rgba(236, 0, 22, 0.24)"
+						}
+					}
+				}
 			},
 			"on": {
 				"bg": {
-					"enabled": { "value": "rgb(85, 0, 7)" },
-					"pressed": { "value": "rgba(85, 0, 7, 0.5)" },
-					"hover": { "value": "rgba(85, 0, 7, 0.75)" },
+					"enabled": {
+						"value": "rgb(85, 0, 7)"
+					},
+					"pressed": {
+						"value": "rgba(85, 0, 7, 0.5)"
+					},
+					"hover": {
+						"value": "rgba(85, 0, 7, 0.75)"
+					},
 					"weak": {
-						"enabled": { "value": "rgba(85, 0, 7, 0.75)" },
-						"hover": { "value": "rgba(85, 0, 7, 0.5)" },
-						"pressed": { "value": "rgba(85, 0, 7, 0.25)" }
+						"enabled": {
+							"value": "rgba(85, 0, 7, 0.75)"
+						},
+						"hover": {
+							"value": "rgba(85, 0, 7, 0.5)"
+						},
+						"pressed": {
+							"value": "rgba(85, 0, 7, 0.25)"
+						}
 					}
 				},
-				"enabled": { "value": "rgb(255, 255, 255)" },
-				"hover": { "value": "rgba(255, 255, 255, 0.75)" },
-				"pressed": { "value": "rgba(255, 255, 255, 0.5)" }
+				"enabled": {
+					"value": "rgb(255, 255, 255)"
+				},
+				"hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				}
 			}
 		},
-		"secondary": {
-			"enabled": { "value": "rgb(40, 45, 55)" },
-			"hover": { "value": "rgb(66, 70, 79)" },
-			"pressed": { "value": "rgb(91, 95, 102)" },
+		"critical": {
 			"bg": {
-				"enabled": { "value": "rgb(195, 196, 199)" },
-				"hover": { "value": "rgb(176, 177, 181)" },
-				"pressed": { "value": "rgb(158, 160, 164)" }
+				"transparent": {
+					"semi": {
+						"enabled": {
+							"value": "rgba(236, 0, 22, 0.04)"
+						},
+						"hover": {
+							"value": "rgba(236, 0, 22, 0.12)"
+						},
+						"pressed": {
+							"value": "rgba(236, 0, 22, 0.24)"
+						}
+					}
+				},
+				"light": {
+					"enabled": {
+						"value": "rgb(249, 184, 190)"
+					},
+					"hover": {
+						"value": "rgb(247, 167, 175)"
+					},
+					"pressed": {
+						"value": "rgb(246, 139, 149)"
+					}
+				}
+			},
+			"enabled": {
+				"value": "rgb(236, 0, 22)"
+			},
+			"hover": {
+				"value": "rgb(217, 0, 20)"
+			},
+			"pressed": {
+				"value": "rgb(198, 0, 18)"
 			},
 			"on": {
-				"enabled": { "value": "rgb(255, 255, 255)" },
-				"hover": { "value": "rgba(255, 255, 255, 0.75)" },
-				"pressed": { "value": "rgba(255, 255, 255, 0.25)" },
+				"enabled": {
+					"value": "rgb(255, 255, 255)"
+				},
+				"hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
 				"bg": {
-					"enabled": { "value": "rgb(14, 16, 19)" },
-					"pressed": { "value": "rgba(14, 16, 19, 0.5)" },
-					"hover": { "value": "rgba(14, 16, 19, 0.75)" },
+					"enabled": {
+						"value": "rgb(85, 0, 7)"
+					},
+					"pressed": {
+						"value": "rgba(85, 0, 7, 0.5)"
+					},
+					"hover": {
+						"value": "rgba(85, 0, 7, 0.75)"
+					},
 					"weak": {
-						"enabled": { "value": "rgba(14, 16, 19, 0.75)" },
-						"pressed": { "value": "rgba(14, 16, 19, 0.25)" },
-						"hover": { "value": "rgba(14, 16, 19, 0.5)" }
+						"enabled": {
+							"value": "rgba(85, 0, 7, 0.75)"
+						},
+						"hover": {
+							"value": "rgba(85, 0, 7, 0.5)"
+						},
+						"pressed": {
+							"value": "rgba(85, 0, 7, 0.25)"
+						}
 					}
 				}
 			}
 		},
-		"success": {
-			"enabled": { "value": "rgb(67, 122, 18)" },
-			"hover": { "value": "rgb(61, 113, 16)" },
-			"pressed": { "value": "rgb(57, 104, 15)" },
+		"secondary": {
+			"enabled": {
+				"value": "rgb(40, 45, 55)"
+			},
 			"bg": {
-				"enabled": { "value": "rgb(206, 222, 191)" },
-				"hover": { "value": "rgb(190, 212, 170)" },
-				"pressed": { "value": "rgb(175, 201, 151)" }
+				"transparent": {
+					"semi": {
+						"enabled": {
+							"value": "rgba(40, 45, 55, 0.04)"
+						},
+						"hover": {
+							"value": "rgba(40, 45, 55, 0.12)"
+						},
+						"pressed": {
+							"value": "rgba(40, 45, 55, 0.24)"
+						}
+					}
+				},
+				"light": {
+					"enabled": {
+						"value": "rgb(195, 196, 199)"
+					},
+					"hover": {
+						"value": "rgb(176, 177, 181)"
+					},
+					"pressed": {
+						"value": "rgb(158, 160, 164)"
+					}
+				}
+			},
+			"hover": {
+				"value": "rgb(66, 70, 79)"
+			},
+			"pressed": {
+				"value": "rgb(91, 95, 102)"
 			},
 			"on": {
-				"enabled": { "value": "rgb(255, 255, 255)" },
-				"hover": { "value": "rgba(255, 255, 255, 0.75)" },
-				"pressed": { "value": "rgba(255, 255, 255, 0.5)" },
+				"enabled": {
+					"value": "rgb(255, 255, 255)"
+				},
+				"hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"pressed": {
+					"value": "rgba(255, 255, 255, 0.25)"
+				},
 				"bg": {
-					"enabled": { "value": "rgb(28, 50, 9)" },
-					"pressed": { "value": "rgba(28, 50, 9, 0.5)" },
-					"hover": { "value": "rgba(28, 50, 9, 0.75)" },
+					"enabled": {
+						"value": "rgb(14, 16, 19)"
+					},
+					"pressed": {
+						"value": "rgba(14, 16, 19, 0.5)"
+					},
+					"hover": {
+						"value": "rgba(14, 16, 19, 0.75)"
+					},
 					"weak": {
-						"enabled": { "value": "rgba(28, 50, 9, 0.75)" },
-						"pressed": { "value": "rgba(28, 50, 9, 0.25)" },
-						"hover": { "value": "rgba(28, 50, 9, 0.5)" }
+						"enabled": {
+							"value": "rgba(14, 16, 19, 0.75)"
+						},
+						"pressed": {
+							"value": "rgba(14, 16, 19, 0.25)"
+						},
+						"hover": {
+							"value": "rgba(14, 16, 19, 0.5)"
+						}
 					}
 				}
 			}
 		},
-		"critical": {
-			"enabled": { "value": "rgb(236, 0, 22)" },
-			"hover": { "value": "rgb(217, 0, 20)" },
-			"pressed": { "value": "rgb(198, 0, 18)" },
+		"success": {
+			"enabled": {
+				"value": "rgb(67, 122, 18)"
+			},
+			"hover": {
+				"value": "rgb(61, 113, 16)"
+			},
+			"pressed": {
+				"value": "rgb(57, 104, 15)"
+			},
 			"bg": {
-				"enabled": { "value": "rgb(249, 184, 190)" },
-				"hover": { "value": "rgb(247, 167, 175)" },
-				"pressed": { "value": "rgb(246, 139, 149)" }
+				"light": {
+					"enabled": {
+						"value": "rgb(206, 222, 191)"
+					},
+					"hover": {
+						"value": "rgb(190, 212, 170)"
+					},
+					"pressed": {
+						"value": "rgb(175, 201, 151)"
+					}
+				},
+				"transparent": {
+					"semi": {
+						"enabled": {
+							"value": "rgba(67, 122, 18, 0.04)"
+						},
+						"pressed": {
+							"value": "rgba(67, 122, 18, 0.24)"
+						},
+						"hover": {
+							"value": "rgba(67, 122, 18, 0.12)"
+						}
+					}
+				}
 			},
 			"on": {
-				"enabled": { "value": "rgb(255, 255, 255)" },
-				"hover": { "value": "rgba(255, 255, 255, 0.75)" },
-				"pressed": { "value": "rgba(255, 255, 255, 0.5)" },
+				"enabled": {
+					"value": "rgb(255, 255, 255)"
+				},
+				"hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
+				"pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
 				"bg": {
-					"enabled": { "value": "rgb(85, 0, 7)" },
-					"pressed": { "value": "rgba(85, 0, 7, 0.5)" },
-					"hover": { "value": "rgba(85, 0, 7, 0.75)" },
+					"enabled": {
+						"value": "rgb(28, 50, 9)"
+					},
+					"pressed": {
+						"value": "rgba(28, 50, 9, 0.5)"
+					},
+					"hover": {
+						"value": "rgba(28, 50, 9, 0.75)"
+					},
 					"weak": {
-						"enabled": { "value": "rgba(85, 0, 7, 0.75)" },
-						"hover": { "value": "rgba(85, 0, 7, 0.5)" },
-						"pressed": { "value": "rgba(85, 0, 7, 0.25)" }
+						"enabled": {
+							"value": "rgba(28, 50, 9, 0.75)"
+						},
+						"pressed": {
+							"value": "rgba(28, 50, 9, 0.25)"
+						},
+						"hover": {
+							"value": "rgba(28, 50, 9, 0.5)"
+						}
 					}
 				}
 			}
 		},
 		"warning": {
-			"enabled": { "value": "rgb(240, 80, 0)" },
-			"hover": { "value": "rgb(221, 73, 0)" },
-			"pressed": { "value": "rgb(201, 67, 0)" },
+			"enabled": {
+				"value": "rgb(240, 80, 0)"
+			},
 			"bg": {
-				"enabled": { "value": "rgb(250, 206, 184)" },
-				"hover": { "value": "rgb(248, 190, 161)" },
-				"pressed": { "value": "rgb(248, 175, 139)" }
+				"transparent": {
+					"semi": {
+						"enabled": {
+							"value": "rgba(240, 80, 0, 0.04)"
+						},
+						"hover": {
+							"value": "rgba(240, 80, 0, 0.12)"
+						},
+						"pressed": {
+							"value": "rgba(240, 80, 0, 0.24)"
+						}
+					}
+				},
+				"light": {
+					"enabled": {
+						"value": "rgb(250, 206, 184)"
+					},
+					"hover": {
+						"value": "rgb(248, 190, 161)"
+					},
+					"pressed": {
+						"value": "rgb(248, 175, 139)"
+					}
+				}
+			},
+			"hover": {
+				"value": "rgb(221, 73, 0)"
+			},
+			"pressed": {
+				"value": "rgb(201, 67, 0)"
 			},
 			"on": {
-				"enabled": { "value": "rgb(255, 255, 255)" },
-				"pressed": { "value": "rgba(255, 255, 255, 0.5)" },
-				"hover": { "value": "rgba(255, 255, 255, 0.75)" },
+				"enabled": {
+					"value": "rgb(255, 255, 255)"
+				},
+				"pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
 				"bg": {
 					"weak": {
-						"enabled": { "value": "rgba(86, 28, 0, 0.75)" },
-						"pressed": { "value": "rgba(86, 28, 0, 0.25)" },
-						"hover": { "value": "rgba(86, 28, 0, 0.5)" }
+						"enabled": {
+							"value": "rgba(86, 28, 0, 0.75)"
+						},
+						"pressed": {
+							"value": "rgba(86, 28, 0, 0.25)"
+						},
+						"hover": {
+							"value": "rgba(86, 28, 0, 0.5)"
+						}
+					},
+					"enabled": {
+						"value": "rgb(86, 28, 0)"
 					},
-					"enabled": { "value": "rgb(86, 28, 0)" },
-					"pressed": { "value": "rgba(86, 28, 0, 0.5)" },
-					"hover": { "value": "rgba(86, 28, 0, 0.75)" }
+					"pressed": {
+						"value": "rgba(86, 28, 0, 0.5)"
+					},
+					"hover": {
+						"value": "rgba(86, 28, 0, 0.75)"
+					}
 				}
 			}
 		},
 		"information": {
-			"enabled": { "value": "rgb(0, 135, 185)" },
-			"hover": { "value": "rgb(0, 124, 170)" },
-			"pressed": { "value": "rgb(0, 113, 155)" },
+			"enabled": {
+				"value": "rgb(0, 135, 185)"
+			},
+			"hover": {
+				"value": "rgb(0, 124, 170)"
+			},
+			"pressed": {
+				"value": "rgb(0, 113, 155)"
+			},
 			"bg": {
-				"enabled": { "value": "rgb(184, 221, 235)" },
-				"hover": { "value": "rgb(161, 210, 228)" },
-				"pressed": { "value": "rgb(139, 200, 222)" }
+				"light": {
+					"enabled": {
+						"value": "rgb(184, 221, 235)"
+					},
+					"hover": {
+						"value": "rgb(161, 210, 228)"
+					},
+					"pressed": {
+						"value": "rgb(139, 200, 222)"
+					}
+				},
+				"transparent": {
+					"semi": {
+						"enabled": {
+							"value": "rgba(0, 135, 185, 0.04)"
+						},
+						"pressed": {
+							"value": "rgba(0, 135, 185, 0.24)"
+						},
+						"hover": {
+							"value": "rgba(0, 135, 185, 0.12)"
+						}
+					}
+				}
 			},
 			"on": {
-				"enabled": { "value": "rgb(255, 255, 255)" },
-				"pressed": { "value": "rgba(255, 255, 255, 0.5)" },
-				"hover": { "value": "rgba(255, 255, 255, 0.75)" },
+				"enabled": {
+					"value": "rgb(255, 255, 255)"
+				},
+				"pressed": {
+					"value": "rgba(255, 255, 255, 0.5)"
+				},
+				"hover": {
+					"value": "rgba(255, 255, 255, 0.75)"
+				},
 				"bg": {
-					"enabled": { "value": "rgb(0, 48, 66)" },
-					"pressed": { "value": "rgba(0, 48, 66, 0.5)" },
-					"hover": { "value": "rgba(0, 48, 66, 0.75)" },
+					"enabled": {
+						"value": "rgb(0, 48, 66)"
+					},
+					"pressed": {
+						"value": "rgba(0, 48, 66, 0.5)"
+					},
+					"hover": {
+						"value": "rgba(0, 48, 66, 0.75)"
+					},
 					"weak": {
-						"pressed": { "value": "rgba(0, 48, 66, 0.25)" },
-						"enabled": { "value": "rgba(0, 48, 66, 0.75)" },
-						"hover": { "value": "rgba(0, 48, 66, 0.5)" }
+						"pressed": {
+							"value": "rgba(0, 48, 66, 0.25)"
+						},
+						"enabled": {
+							"value": "rgba(0, 48, 66, 0.75)"
+						},
+						"hover": {
+							"value": "rgba(0, 48, 66, 0.5)"
+						}
 					}
 				}
 			}

From 3389a898017c81f8269c1f8663d087b75fc4baef Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Tue, 11 Oct 2022 16:17:40 +0200
Subject: [PATCH 09/10] fix: removed comments

---
 scripts/color-classes-generator.js      | 33 ++-----------------------
 scripts/color-placeholders-generator.js |  4 +--
 2 files changed, 4 insertions(+), 33 deletions(-)

diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js
index 55be5a570..01cc90ff9 100644
--- a/scripts/color-classes-generator.js
+++ b/scripts/color-classes-generator.js
@@ -6,8 +6,8 @@
 const prefix = 'db';
 
 /**
- * some backgrounds have more than one variant with the same color for text (on-color)
- * e.g. neutral with variants 1-6
+ * backgrounds have more than one variant with the same color for text (on-color)
+ * e.g. neutral with variants 1-6 or transparent-full and transparent-semi
  */
 
 const generateBGVariants = (value, index) => {
@@ -83,34 +83,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 }`;
 		}
 
-		// 		// special case neutral has no default value for enabled
-		// 		if (colorToken[value].bg.enabled) {
-		// 			// weak variants
-		// 			output += `
-		// .${prefix}-${value}-light {
-		//      @extend %${prefix}-bg-${value}-light;
-
-		//     &-ia,
-		//     &[data-variant="ia"] {
-		//         @extend %${prefix}-bg-${value}-light-ia;
-		//     }
-
-		//     a {
-		//          @extend %${prefix}-bg-${value}-light-text-ia;
-		//     }
-
-		//     .db-weak {
-		//         @extend %weak;
-
-		//         &-ia,
-		//         &[data-variant="ia"],
-		//         a {
-		//             @extend %weak-ia;
-		//         }
-		//     }
-		// }
-		// `;
-		// 		} else {
 		Object.keys(colorToken[value].bg).forEach((variant) => {
 			if (colorToken[value].bg[variant].enabled) {
 				output += generateBGVariants(value, variant);
@@ -125,7 +97,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 				);
 			}
 		});
-		//}
 	});
 
 	return output;
diff --git a/scripts/color-placeholders-generator.js b/scripts/color-placeholders-generator.js
index 220dd5bb4..6db106970 100644
--- a/scripts/color-placeholders-generator.js
+++ b/scripts/color-placeholders-generator.js
@@ -18,8 +18,8 @@ const generateInteractiveVariants = (currentColorObj, cssProp) => {
 };
 
 /**
- * some backgrounds have more than one variant with the same color for text (on-color)
- * e.g. neutral with variants 1-6
+ * backgrounds have more than one variant with the same color for text (on-color)
+ * e.g. neutral with variants 1-6 or transparent-full or transparent-semi
  */
 
 const generateBGVariants = (value, index, currentColorObj, baseColorObj) => {

From e7987a319c93d9085572d9c778d5e4af8e512ab0 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Tue, 11 Oct 2022 17:19:08 +0200
Subject: [PATCH 10/10] fix: included pr feedback

---
 scripts/color-classes-generator.js                     | 5 +----
 source/_patterns/spacings/_examples.demonstration.scss | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/scripts/color-classes-generator.js b/scripts/color-classes-generator.js
index 01cc90ff9..e31b076c8 100644
--- a/scripts/color-classes-generator.js
+++ b/scripts/color-classes-generator.js
@@ -59,10 +59,7 @@ exports.generateColorUtilitityClasses = (colorToken) => {
     @extend %${prefix}-text-${value};
         
     &-ia,
-    &[data-variant="ia"] {
-        @extend %${prefix}-text-${value}-ia;
-    }
-
+    &[data-variant="ia"],
     a {
         @extend %${prefix}-text-${value}-ia;
     }
diff --git a/source/_patterns/spacings/_examples.demonstration.scss b/source/_patterns/spacings/_examples.demonstration.scss
index dca24e8af..99fe0f882 100644
--- a/source/_patterns/spacings/_examples.demonstration.scss
+++ b/source/_patterns/spacings/_examples.demonstration.scss
@@ -1,4 +1,4 @@
 .DO-NOT-COPY-THIS-CLASS-example-spacing {
 	height: 8px;
-	background-color: $db-colors-primary-bg-enabled;
+	background-color: $db-colors-primary-bg-light-enabled;
 }