refactor: changed some variables to make the button great again (#122)

* refactor: changed some variables to make the button great again

package.json

@@ -17,7 +17,7 @@
     "build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
     "build:patternlab-css": "sass source/css/patternlab.scss:out/css/patternlab.css --style=compressed --embed-sources --load-path=node_modules",
     "build:tailwind": "node scripts/tailwind-config-generator.mjs false true && cpr scripts/tailwind-config-generator.mjs build/tailwind/tailwind-config-generator.mjs -o",
-    "build-test:css": "sass build/scss/_db-ui-base.scss:build/css/db-ui-base.css --load-path=node_modules",
+    "build-test:css": "sass build/scss/:build/css/ --load-path=node_modules",
     "build": "npm-run-all copy:assets build:* pl:build",
     "clean": "rm -rf build",
     "lint": "npm-run-all -p lint:*",

scripts/color-classes-generator.js

@@ -20,18 +20,8 @@ const generateBGVariants = (value, index) => {
         @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;
-        }
     }
 }
 `;
@@ -45,7 +35,7 @@ const generateBGVariants = (value, index) => {
  * @returns scss string
  */
 exports.generateColorUtilitityClasses = (colorToken) => {
-	let output = '';
+	let output = '@import "variables";\n@import "color-placeholder";\n';
 
 	for (const [, value] of Object.keys(colorToken).entries()) {
 		output += `/**
@@ -54,17 +44,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
 `;
 		// 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};
@@ -73,10 +52,6 @@ exports.generateColorUtilitityClasses = (colorToken) => {
     &[data-variant="ia"] {
         @extend %${prefix}-bg-${value}-ia;
     }
-
-    a {
-        @extend %${prefix}-bg-${value}-text-ia;
-    }
 }`;
 		}
 

scripts/color-placeholders-generator.js

@@ -7,12 +7,16 @@ const prefix = 'db';
 
 const generateInteractiveVariants = (currentColorObject, cssProp) => {
 	return `
-        &:hover {
-            ${cssProp}: $${prefix}-${currentColorObject.hover.name};
-        }
+		&:not(:disabled) {
+			&:hover {
+				${cssProp}: $${prefix}-${currentColorObject.hover.name};
+    			--db-current-${cssProp}: #{$${prefix}-${currentColorObject.hover.name}};
+			}
 
-        &:active {
-            ${cssProp}: $${prefix}-${currentColorObject.pressed.name};
+			&:active {
+				${cssProp}: $${prefix}-${currentColorObject.pressed.name};
+				--db-current-${cssProp}: #{$${prefix}-${currentColorObject.pressed.name}};
+			}
         }
         `;
 };
@@ -24,38 +28,54 @@ const generateInteractiveVariants = (currentColorObject, cssProp) => {
 
 const generateBGVariants = (
 	value,
-	index,
+	variant,
 	currentColorObject,
 	baseColorObject
 ) => {
-	return `
-%${prefix}-bg-${value}-${index} {
+	const placeholderName = `${prefix}-bg-${value}${
+		variant ? `-${variant}` : ''
+	}`;
+	let result = `
+%${placeholderName}-ia-states {
+	${generateInteractiveVariants(currentColorObject, 'background-color')}
+}
+%${placeholderName} {
     background-color: $${prefix}-${currentColorObject.enabled.name};
     color: $${prefix}-${baseColorObject.enabled.name};
 
-    &-ia,
-    &[data-variant="ia"] {
-        @extend %${prefix}-bg-${value}-${index};
-        ${generateInteractiveVariants(currentColorObject, 'background-color')}
+    --db-current-background-color: #{$${prefix}-${
+		currentColorObject.enabled.name
+	}};
+    --db-current-color: #{$${prefix}-${baseColorObject.enabled.name}};
+
+    &-ia, &[data-variant="ia"] {
+		@extend %${placeholderName};
+		@extend %${placeholderName}-ia-states;
     }
 
-    &-text-ia,
-    &[data-variant="text-ia"] {
-        color: $${prefix}-${baseColorObject.enabled.name};
-         ${generateInteractiveVariants(baseColorObject, 'color')}
+    button {
+		@extend %${placeholderName}-ia-states;
     }
 
+    a {
+       ${generateInteractiveVariants(baseColorObject, 'color')}
+    }
+
+`;
+	if (baseColorObject.weak) {
+		result += `
     %weak {
         color: $${prefix}-${baseColorObject.weak.enabled.name};
 
-        &-ia,
-        &[data-variant="ia"] {
-            color: $${prefix}-${baseColorObject.weak.enabled.name};
-            ${generateInteractiveVariants(baseColorObject.weak, 'color')}
-        }
+		a {
+		   ${generateInteractiveVariants(baseColorObject.weak, 'color')}
+		}
     }
-}
 `;
+	}
+
+	result += `}`;
+	return result;
 };
 
 /**
@@ -75,35 +95,13 @@ exports.generateColorUtilitityPlaceholder = (colorToken) => {
 `;
 		// 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')}
-    }
-}`;
+			output += generateBGVariants(
+				value,
+				undefined,
+				colorToken[value],
+				colorToken[value].on
+			);
 		}
 
 		for (const variant of Object.keys(colorToken[value].bg)) {

scripts/scss-scaling-generator.js

@@ -8,6 +8,10 @@ const fileHeader =
 const generateSpacings = (utility) => {
 	let allClasses = fileHeader;
 
+	if (utility) {
+		allClasses += `@import "variables";\n@import "scaling-placeholder";\n`;
+	}
+
 	const scaleTypeKey = ['normal', 'functional', 'expressive'];
 
 	for (const scale of scaleTypeKey) {

scripts/scss-typography-generator.js

@@ -1,7 +1,7 @@
 const prefix = 'db';
 
 const fileHeader =
-	'\n' +
+	'@use "sass:math";\n' +
 	'// Do not edit directly\n' +
 	'// Generated on ' +
 	new Date().toString() +
@@ -54,8 +54,8 @@ const getUtilityClass = (utility, scale, textType, size) => {
 ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 `;
 	result += `
-\tline-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
-\tfont-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
+	line-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
+	font-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
 `;
 
 	if (isHeadline) {
@@ -65,20 +65,41 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
         font-weight: 300;
     }
 	`;
+	} else {
+		result += `
+	--db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
+	--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size, 1rem)
+	* 16 * $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
+		`;
 	}
 
 	result += `
-\t@media only screen and (min-width: $db-screens-md) {
-\t\tline-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
-\t\tfont-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;
-\t}\n`;
+	@media only screen and (min-width: $db-screens-md) {
+		line-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
+		font-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;`;
+	if (!isHeadline) {
+		result += `
+		--db-base-icon-font-size: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
+		--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size, 1rem)
+		* 16 * $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
+		`;
+	}
+
+	result += `}\n`;
 
 	result += `
-\t@media only screen and (min-width: $db-screens-lg) {
-\t\tline-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
-\t\tfont-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;
-\t}
+	@media only screen and (min-width: $db-screens-lg) {
+		line-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
+		font-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;`;
+	if (!isHeadline) {
+		result += `
+		--db-base-icon-font-size: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
+		--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size, 1rem)
+		* 16 * $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
 		`;
+	}
+
+	result += `}`;
 
 	result += `
 }
@@ -90,6 +111,10 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 const generateClasses = (typography, utility) => {
 	let allClasses = fileHeader;
 
+	if (utility) {
+		allClasses += `@import "variables";\n@import "typography-placeholder";\n`;
+	}
+
 	// ScaleTypeKey = [normal, functional, expressive]
 	for (const scaleTypeKey of Object.keys(typography)) {
 		const scaleObject = typography[scaleTypeKey];