From c13d7c7bf1c74b0b907ff0a3ed7e30f7fa8d3b42 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 30 Nov 2022 08:34:00 +0100
Subject: [PATCH] refactor: changed typography to use only css-properties
 (#174)

* refactor: changed typography to use only css-properties
---
 scripts/scss-scaling-generator.js             |  10 +-
 scripts/scss-typography-generator.js          | 161 +++++++-----------
 scss/_tonality.scss                           | 124 ++++++++------
 scss/icon/_icon-family-calc.scss              |   2 +-
 .../typography/_examples.demonstration.scss   |   0
 source/_patterns/typography/examples.hbs      |  15 ++
 source/_patterns/typography/usage.hbs         |  12 +-
 source/css/documentation.scss                 |   4 +-
 style-dictionary.config.json                  |  20 ---
 style-dictionary.js                           |  21 +--
 10 files changed, 159 insertions(+), 210 deletions(-)
 create mode 100644 source/_patterns/typography/_examples.demonstration.scss

diff --git a/scripts/scss-scaling-generator.js b/scripts/scss-scaling-generator.js
index e28866599..df40e5ab4 100644
--- a/scripts/scss-scaling-generator.js
+++ b/scripts/scss-scaling-generator.js
@@ -5,18 +5,14 @@ const fileHeader =
 	new Date().toString() +
 	'\n';
 
-const generateSpacings = (utility) => {
+const generateScaling = () => {
 	let allClasses = fileHeader;
 
-	if (utility) {
-		allClasses += `@use "scaling-placeholder" as *;\n`;
-	}
-
 	const scaleTypeKey = ['regular', 'functional', 'expressive'];
 
 	for (const scale of scaleTypeKey) {
 		allClasses += `
-${utility ? '.' : '%'}db-scaling-${scale}{
+%db-scaling-${scale}{
 \t--db-sizing-xs: #{$db-sizing-${scale}-xs};
 \t--db-sizing-sm: #{$db-sizing-${scale}-s};
 \t--db-sizing-md: #{$db-sizing-${scale}-m};
@@ -58,4 +54,4 @@ ${utility ? '.' : '%'}db-scaling-${scale}{
 	return allClasses;
 };
 
-module.exports = generateSpacings;
+module.exports = generateScaling;
diff --git a/scripts/scss-typography-generator.js b/scripts/scss-typography-generator.js
index 4786280b2..ad44540ec 100644
--- a/scripts/scss-typography-generator.js
+++ b/scripts/scss-typography-generator.js
@@ -1,12 +1,12 @@
 const prefix = 'db';
 
 const fileHeader = `
-	@use "variables" as *;
-	@use "icon/icon-family-calc" as *;
-	// Do not edit directly
-	// Generated on
-	// ${new Date().toString()}
-	`;
+@use "variables" as *;
+@use "icon/icon-family-calc" as *;
+// Do not edit directly
+// Generated on
+// ${new Date().toString()}
+`;
 
 const getShortSize = (size) => {
 	if (size === '3xlarge') {
@@ -48,99 +48,44 @@ const getShortSize = (size) => {
 	return size;
 };
 
-const getUtilityClass = (utility, scale, textType, size) => {
-	const isHeadline = textType === 'headline';
-
-	let result = `
-${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
-`;
-	result += `
-	line-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
-	font-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
-`;
-
-	if (isHeadline) {
-		result += `
-	font-weight: 700;
-
-    &-light,
-    &[data-variant="light"] {
-        font-weight: 300;
-    }
+/**
+ *
+ * @param properties {{scale: string, textType:string, size:string, sSize:string, isHeadline:boolean, mQuery: string}}
+ */
+const getMediaQueryProperties = (properties) => {
+	const { textType, sSize, scale, size, isHeadline, mQuery } = properties;
+	let result = `--db-type-${textType}-font-size-${sSize}: #{$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size};
+	--db-type-${textType}-line-height-${sSize}: #{$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-line-height};
 	`;
-	} else {
-		result += `
-	--db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
-	--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size,
-	$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height)};
-	--db-base-icon-font-family-filled: #{get-icon-family($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size,
-	$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height,"filled")};
-	--db-type-body-font-size-${getShortSize(
-		size
-	)}: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
-	--db-type-body-line-height-${getShortSize(
-		size
-	)}: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height};
-		`;
-	}
-
-	result += `
-	@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: #{get-icon-family($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size,
-		$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height)};
-		--db-base-icon-font-family-filled: #{get-icon-family($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size,
-		$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height,"filled")};
-		--db-type-body-font-size-${getShortSize(
-			size
-		)}: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
-		--db-type-body-line-height-${getShortSize(
-			size
-		)}: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height};
-		`;
-	}
-
-	result += `}\n`;
 
-	result += `
-	@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: #{get-icon-family($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size,
-		$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height)};
-		--db-base-icon-font-family-filled: #{get-icon-family($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size,
-		$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height,"filled")};
-		--db-type-body-font-size-${getShortSize(
-			size
-		)}: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
-		--db-type-body-line-height-${getShortSize(
-			size
-		)}: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height};
+	--db-base-icon-font-size-${sSize}: #{$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size};
+	--db-base-icon-font-family-${sSize}: #{get-icon-family($${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size,
+	$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-line-height)};
+	--db-base-icon-font-family-filled-${sSize}: #{get-icon-family($${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size,
+	$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-line-height,"filled")};
 		`;
 	}
 
-	result += `}`;
-
-	result += `
-}
-	`;
-
 	return result;
 };
 
-const generateClasses = (typography, utility) => {
-	let allClasses = fileHeader;
+const getSizeProperties = (scale, textType, size, mQuery) => {
+	const isHeadline = textType === 'headline';
+	const sSize = getShortSize(size);
+	return getMediaQueryProperties({
+		scale,
+		size,
+		textType,
+		sSize,
+		isHeadline,
+		mQuery
+	});
+};
 
-	if (utility) {
-		allClasses += `@use "variables" as *;\n@use "typography-placeholder" as *;\n`;
-	}
+const generateTypography = (typography) => {
+	let allClasses = fileHeader;
 
 	// ScaleTypeKey = [regular, functional, expressive]
 	for (const scaleTypeKey of Object.keys(typography)) {
@@ -154,14 +99,38 @@ const generateClasses = (typography, utility) => {
 			for (const textTypeKey of Object.keys(firstMediaQueryObject)) {
 				const textTypeObject = firstMediaQueryObject[textTypeKey];
 				// SizeKey = [3xlarge - 3xsmall]
-				for (const sizeKey of Object.keys(textTypeObject)) {
-					allClasses += getUtilityClass(
-						utility,
-						scaleTypeKey,
-						textTypeKey,
-						sizeKey
-					);
+				allClasses += `
+%${prefix}-typography-${textTypeKey}-${scaleTypeKey}{
+	`;
+				for (const mQuery of ['mobile', 'tablet', 'desktop']) {
+					if (mQuery !== 'mobile') {
+						allClasses += `@media only screen and (min-width: ${
+							mQuery === 'tablet'
+								? '#{$db-screens-md}'
+								: '#{$db-screens-lg}'
+						}) {
+	`;
+					}
+
+					for (const sizeKey of Object.keys(textTypeObject)) {
+						allClasses += getSizeProperties(
+							scaleTypeKey,
+							textTypeKey,
+							sizeKey,
+							mQuery
+						);
+					}
+
+					if (mQuery !== 'mobile') {
+						allClasses += `}
+
+	`;
+					}
 				}
+
+				allClasses += `
+}
+`;
 			}
 		}
 	}
@@ -169,4 +138,4 @@ const generateClasses = (typography, utility) => {
 	return allClasses;
 };
 
-module.exports = generateClasses;
+module.exports = generateTypography;
diff --git a/scss/_tonality.scss b/scss/_tonality.scss
index e97410594..f2ccc47ba 100644
--- a/scss/_tonality.scss
+++ b/scss/_tonality.scss
@@ -3,80 +3,94 @@
 @use "typography-placeholder" as *;
 @use "scaling-placeholder" as *;
 
-:root {
-	font-family: $db-font-family-sans;
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-family: $db-font-family-head;
-	}
+@mixin body-style($size) {
+	--db-base-icon-font-size: var(--db-base-icon-font-size-#{$size});
+	--db-base-icon-font-family: var(--db-base-icon-font-family-#{$size});
+	--db-base-icon-font-family-filled: var(
+		--db-base-icon-font-family-filled-#{$size}
+	);
+	line-height: var(--db-type-body-line-height-#{$size});
+	font-size: var(--db-type-body-font-size-#{$size});
 }
 
-@mixin styles($styles...) {
-	@for $i from 0 to length($styles) {
-		%db-ui-#{nth($styles, $i + 1)},
-		.db-ui-#{nth($styles, $i + 1)} {
-			@extend %db-scaling-#{nth($styles, $i + 1)};
+$sizes: "2xl", "xl", "lg", "md", "sm", "xs", "2xs";
+
+:root {
+	font-family: $db-font-family-sans;
 
+	@each $size in $sizes {
+		@if ($size == "md") {
 			*, // TODO: let's check whether we could even also enable this without the asterisk just by inheriting line-height and font-size on non-inheriting elements like buttons
 			[data-size="medium"],
-			%db-body-md {
-				@extend %db-#{nth($styles, $i + 1)}-body-md;
+			%db-body-#{$size} {
+				@include body-style($size);
 			}
-
+		} @else if($size == "sm") {
 			small,
 			[data-size="small"],
-			%db-body-sm {
-				@extend %db-#{nth($styles, $i + 1)}-body-sm;
+			%db-body-#{$size} {
+				@include body-style($size);
 			}
-
-			%db-body-2xl {
-				@extend %db-#{nth($styles, $i + 1)}-body-2xl;
-			}
-
-			%db-body-xl {
-				@extend %db-#{nth($styles, $i + 1)}-body-xl;
+		} @else {
+			%db-body-#{$size} {
+				@include body-style($size);
 			}
+		}
+	}
 
-			%db-body-lg {
-				@extend %db-#{nth($styles, $i + 1)}-body-lg;
-			}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: $db-font-family-head;
+		font-weight: 700;
 
-			%db-body-xs {
-				@extend %db-#{nth($styles, $i + 1)}-body-xs;
-			}
+		&[data-variant="light"] {
+			font-weight: 300;
+		}
+	}
 
-			%db-body-2xs {
-				@extend %db-#{nth($styles, $i + 1)}-body-2xs;
-			}
+	h1 {
+		line-height: var(--db-type-headline-line-height-xl);
+		font-size: var(--db-type-headline-font-size-xl);
+	}
 
-			h1 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-xl;
-			}
+	h2 {
+		line-height: var(--db-type-headline-line-height-lg);
+		font-size: var(--db-type-headline-font-size-lg);
+	}
 
-			h2 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-lg;
-			}
+	h3 {
+		line-height: var(--db-type-headline-line-height-md);
+		font-size: var(--db-type-headline-font-size-md);
+	}
 
-			h3 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-md;
-			}
+	h4 {
+		line-height: var(--db-type-headline-line-height-sm);
+		font-size: var(--db-type-headline-font-size-sm);
+	}
 
-			h4 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-sm;
-			}
+	h5 {
+		line-height: var(--db-type-headline-line-height-xs);
+		font-size: var(--db-type-headline-font-size-xs);
+	}
 
-			h5 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-xs;
-			}
+	h6 {
+		line-height: var(--db-type-headline-line-height-2xs);
+		font-size: var(--db-type-headline-font-size-2xs);
+	}
+}
 
-			h6 {
-				@extend %db-#{nth($styles, $i + 1)}-headline-2xs;
-			}
+@mixin styles($styles...) {
+	@for $i from 0 to length($styles) {
+		%db-ui-#{nth($styles, $i + 1)},
+		.db-ui-#{nth($styles, $i + 1)},
+		[data-tonality="#{nth($styles, $i + 1)}"] {
+			@extend %db-scaling-#{nth($styles, $i + 1)};
+			@extend %db-typography-headline-#{nth($styles, $i + 1)};
+			@extend %db-typography-body-#{nth($styles, $i + 1)};
 		}
 	}
 }
diff --git a/scss/icon/_icon-family-calc.scss b/scss/icon/_icon-family-calc.scss
index 8aee3a94c..39abc58fc 100644
--- a/scss/icon/_icon-family-calc.scss
+++ b/scss/icon/_icon-family-calc.scss
@@ -47,7 +47,7 @@ $all-icon-sizes: (
 	}
 	$valid-sizes: append(
 		$valid-sizes,
-		#{map.get($all-icon-sizes, 16) + $font-style}
+		#{map.get($all-icon-sizes, 64) + $font-style}
 	);
 
 	$result-string: "";
diff --git a/source/_patterns/typography/_examples.demonstration.scss b/source/_patterns/typography/_examples.demonstration.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/source/_patterns/typography/examples.hbs b/source/_patterns/typography/examples.hbs
index 4e1485da8..722b9a137 100644
--- a/source/_patterns/typography/examples.hbs
+++ b/source/_patterns/typography/examples.hbs
@@ -21,9 +21,24 @@
 			<h6 data-variant="light">Headline 6</h6>
 		</db-tab>
 		<db-tab label="Body" name="tab-bar">
+			<h1>functional</h1>
 			<p>Primary font: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</p>
 			<p><em>Primary font italic: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</em></p>
 			<p><strong>Primary font bold: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</strong></p>
+
+			<div data-tonality="regular">
+				<h1>regular</h1>
+				<p>Primary font: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</p>
+				<p><em>Primary font italic: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</em></p>
+				<p><strong>Primary font bold: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</strong></p>
+			</div>
+
+			<div data-tonality="expressive">
+				<h1>expressive</h1>
+				<p>Primary font: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</p>
+				<p><em>Primary font italic: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</em></p>
+				<p><strong>Primary font bold: "DB Screen Sans", "Helvetica", "Arial", sans-serif;</strong></p>
+			</div>
 		</db-tab>
 	</db-tab-bar>
 
diff --git a/source/_patterns/typography/usage.hbs b/source/_patterns/typography/usage.hbs
index 7d853d4ba..f8a60bda2 100644
--- a/source/_patterns/typography/usage.hbs
+++ b/source/_patterns/typography/usage.hbs
@@ -29,7 +29,7 @@
 <code class="language-scss">/* ./index.scss */
 @import "@db-ui/base/build/scss/db-ui-base";
 
-body {
+:root {
 	@extend %db-ui-functional;
 }
 
@@ -41,16 +41,6 @@ body {
 			<strong>Example html &lt;small&gt;:</strong>
 			<p>Default: <strong>14px</strong></p>
 			<small>SM: <strong>12px</strong></small>
-			<h3>With utility classes</h3>
-			<pre>
-<code class="language-scss">/* ./index.scss */
-... see default
-@import "@db-ui-base/scss/typography-classes";
-</code>
-			</pre>
-			<strong>Example html (class='db-regular-body-xs'):</strong>
-			<p>Default: <strong>14px</strong></p>
-			<p class='db-regular-body-xs'>SM: <strong>12px</strong></p>
 
 		</db-tab>
 		<db-tab label="Tailwind" name="tab-bar">
diff --git a/source/css/documentation.scss b/source/css/documentation.scss
index 05b9cd651..46d1f3402 100644
--- a/source/css/documentation.scss
+++ b/source/css/documentation.scss
@@ -1,9 +1,8 @@
 @use "../../build/scss/variables" as *;
 @use "../../build/scss/db-ui-base" as *;
-@use "../../build/scss/typography-classes" as *;
 @use "../../build/scss/color-classes" as *;
 
-body {
+:root {
 	@extend %db-ui-functional;
 }
 
@@ -21,6 +20,7 @@ textarea {
 @import "../_patterns/logo/examples.demonstration";
 @import "../_patterns/spacings/examples.demonstration";
 @import "../_patterns/elevation/examples.demonstration";
+@import "../_patterns/typography/examples.demonstration";
 
 main {
 	padding: $db-spacing-fixed-regular-xs $db-spacing-fixed-regular-l;
diff --git a/style-dictionary.config.json b/style-dictionary.config.json
index 567a046b2..d9cc54d2d 100644
--- a/style-dictionary.config.json
+++ b/style-dictionary.config.json
@@ -94,16 +94,6 @@
 				}
 			]
 		},
-		"db-core-typography-classes": {
-			"transformGroup": "scss",
-			"buildPath": "build/scss/",
-			"files": [
-				{
-					"destination": "typography-classes.scss",
-					"format": "db-core-typography-classes"
-				}
-			]
-		},
 		"db-core-typography-placeholder": {
 			"transformGroup": "scss",
 			"buildPath": "build/scss/",
@@ -114,16 +104,6 @@
 				}
 			]
 		},
-		"db-core-scaling-classes": {
-			"transformGroup": "scss",
-			"buildPath": "build/scss/",
-			"files": [
-				{
-					"destination": "scaling-classes.scss",
-					"format": "db-core-scaling-classes"
-				}
-			]
-		},
 		"db-core-scaling-placeholder": {
 			"transformGroup": "scss",
 			"buildPath": "build/scss/",
diff --git a/style-dictionary.js b/style-dictionary.js
index c6cbd62be..a49ffc9ba 100644
--- a/style-dictionary.js
+++ b/style-dictionary.js
@@ -7,7 +7,7 @@ const transforms = require('style-dictionary/lib/common/transforms');
 const SCSSPlaceholders = require('./scripts/color-placeholders-generator');
 const SCSSClasses = require('./scripts/color-classes-generator');
 
-const generateClasses = require('./scripts/scss-typography-generator');
+const generateTypography = require('./scripts/scss-typography-generator');
 const generateScaling = require('./scripts/scss-scaling-generator');
 
 const modifyTailwind = (dictionary) => {
@@ -39,33 +39,18 @@ StyleDictionary.registerFormat({
 	}
 });
 
-StyleDictionary.registerFormat({
-	name: 'db-core-typography-classes',
-	formatter({ dictionary }) {
-		const typography = dictionary.tokens.typography;
-		return generateClasses(typography, true);
-	}
-});
-
 StyleDictionary.registerFormat({
 	name: 'db-core-typography-placeholder',
 	formatter({ dictionary }) {
 		const typography = dictionary.tokens.typography;
-		return generateClasses(typography, false);
-	}
-});
-
-StyleDictionary.registerFormat({
-	name: 'db-core-scaling-classes',
-	formatter() {
-		return generateScaling(true);
+		return generateTypography(typography);
 	}
 });
 
 StyleDictionary.registerFormat({
 	name: 'db-core-scaling-placeholder',
 	formatter() {
-		return generateScaling(false);
+		return generateScaling();
 	}
 });