fix: issues for fonts and icons (#141)

* fix: issues for fonts and icons

Author: nmerget

scripts/scss-typography-generator.js

@@ -71,6 +71,12 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 	--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-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};
 		`;
 	}
 
@@ -83,6 +89,12 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 		--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-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};
 		`;
 	}
 
@@ -97,6 +109,12 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
 		--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-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};
 		`;
 	}
 

scss/_variables.global.scss

@@ -17,6 +17,18 @@ $db-spacing-responsive-md: var(--db-spacing-responsive-md);
 $db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
 $db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
 
-$db-type-font-size-lg: var(--db-type-body-lg);
-$db-type-font-size-md: var(--db-type-body-md);
-$db-type-font-size-sm: var(--db-type-body-sm);
+$db-type-font-size-2xl: var(--db-type-body-font-size-2xl);
+$db-type-font-size-xl: var(--db-type-body-font-size-xl);
+$db-type-font-size-lg: var(--db-type-body-font-size-lg);
+$db-type-font-size-md: var(--db-type-body-font-size-md);
+$db-type-font-size-sm: var(--db-type-body-font-size-sm);
+$db-type-font-size-xs: var(--db-type-body-font-size-xs);
+$db-type-font-size-2xs: var(--db-type-body-font-size-2xs);
+
+$db-type-line-height-2xl: var(--db-type-body-line-height-2xl);
+$db-type-line-height-xl: var(--db-type-body-line-height-xl);
+$db-type-line-height-lg: var(--db-type-body-line-height-lg);
+$db-type-line-height-md: var(--db-type-body-line-height-md);
+$db-type-line-height-sm: var(--db-type-body-line-height-sm);
+$db-type-line-height-xs: var(--db-type-body-line-height-xs);
+$db-type-line-height-2xs: var(--db-type-body-line-height-2xs);

scss/icon/_icon-family-calc.scss

@@ -15,19 +15,19 @@ $all-icon-sizes: (
 	$icon-size: (math.div($font-size, 1rem) * 16 * $line-height);
 	$valid-sizes: "";
 
-	@if ($icon-size<18) {
+	@if ($icon-size<20) {
 		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 16));
 	}
-	@if ($icon-size<22) {
+	@if ($icon-size<24) {
 		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 20));
 	}
-	@if ($icon-size<28) {
+	@if ($icon-size<32) {
 		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 24));
 	}
-	@if ($icon-size<40) {
+	@if ($icon-size<48) {
 		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 32));
 	}
-	@if ($icon-size<56) {
+	@if ($icon-size<64) {
 		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 48));
 	}
 	$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 64));