feat: generate color utilities

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,

scripts/color-classes-generator.js

@@ -0,0 +1,100 @@
+/**
+ * Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
+ * according to definitions made by DB UI v3
+ */
+
+const prefix = 'db';
+
+/**
+ * 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) => {
+	return `
+.${prefix}-bg-${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          
+**/
+`;
+		// text colors with interactive variant, e.g. primary
+		if (colorToken[value].enabled) {
+			output += `
+.${prefix}-text-${value} {
+    @extend %${prefix}-text-${value};
+
+    &-ia,
+    &[data-variant="ia"],
+    a {
+        @extend %${prefix}-text-${value}-ia;
+    }
+}`;
+
+			output += `
+.${prefix}-bg-${value} {
+    @extend %${prefix}-bg-${value};
+
+    &-ia,
+    &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value}-ia;
+    }
+
+    a {
+        @extend %${prefix}-bg-${value}-text-ia;
+    }
+}`;
+		}
+
+		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;
+};

scripts/color-placeholders-generator.js

@@ -0,0 +1,128 @@
+/**
+ * Generate Color Utilities (Classes and SCSS Placeholders) for color dependencies
+ * according to definitions made by DB UI v3
+ */
+
+const prefix = 'db';
+
+const generateInteractiveVariants = (currentColorObj, cssProp) => {
+	return `
+        &:hover {
+            ${cssProp}: $${prefix}-${currentColorObj.hover.name};
+        }
+
+        &:active {
+            ${cssProp}: $${prefix}-${currentColorObj.pressed.name};
+        }
+        `;
+};
+
+/**
+ * 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) => {
+	return `
+%${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')}
+    }
+
+    %weak {
+        color: $${prefix}-${baseColorObj.weak.enabled.name};
+
+        &-ia,
+        &[data-variant="ia"] {
+            color: $${prefix}-${baseColorObj.weak.enabled.name};
+            ${generateInteractiveVariants(baseColorObj.weak, 'color')}
+        }
+    }
+}
+`;
+};
+
+/**
+ * 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.generateColorUtilitityPlaceholder = (colorToken) => {
+	let output = '';
+
+	Object.keys(colorToken).forEach((value, index) => {
+		output += `/**
+* ${value.toUpperCase()} - Placeholder Utilities          
+**/
+`;
+		// 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};
+
+    &-ia,
+    &[data-variant="ia"] {
+        @extend %${prefix}-bg-${value};
+        ${generateInteractiveVariants(colorToken[value], 'background-color')}
+    }
+
+    &-text-ia,
+    &[data-variant="text-ia"] {
+       color: $${prefix}-${colorToken[value].on.enabled.name};       
+        ${generateInteractiveVariants(colorToken[value].on, 'color')}
+    }
+}`;
+		}
+
+		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;
+};

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) => {

source/_patterns/logo/_examples.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};
 		}
 	}
 }

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;
 }

source/css/db-ui-base.scss

@@ -1,7 +1,12 @@
 @import "../../build/scss/variables";
 @import "../../build/scss/font-faces";
 @import "../../build/scss/typography-classes";
+@import "../../build/scss/color-placeholder";
+@import "../../build/scss/color-classes";
 
+/* body {
+	font-family: var(--asset-font-db-screensans-regular-name);
+} */
 body,
 button,
 input,

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;
 }