refactor: changed typography to use only css-properties (#174)

* refactor: changed typography to use only css-properties
db-ui · Nov 30, 2022 · c13d7c7 · c13d7c7
1 parent 344f053
commit c13d7c7
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 210 deletions.
diff --git 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
@@ -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,19 +99,43 @@ 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 += `
+}
+`;
 			}
 		}
 	}
 
 	return allClasses;
 };
 
-module.exports = generateClasses;
+module.exports = generateTypography;
diff --git 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
@@ -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