feat: add filled base-icon properties (#168)

* feat: add filled base-icon properties

* style: allow custom font family for icons

Co-authored-by: Anna Schoderer <anna.schoderer@deutschebahn.com>

Author: nmerget

package.json

@@ -17,7 +17,7 @@
     "build:style-dictionary": "node style-dictionary.js && npm run copy:scss",
     "build:documentation-css": "sass source/css/documentation.scss:out/css/documentation.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/:build/css/ --load-path=node_modules",
+    "build: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/scss-typography-generator.js

@@ -71,6 +71,8 @@ ${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-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};
@@ -89,6 +91,8 @@ ${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-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};
@@ -109,6 +113,8 @@ ${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-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};

scss/icon/_icon-family-calc.scss

@@ -3,34 +3,52 @@
 @use "sass:list";
 
 $all-icon-sizes: (
-	16: "icons-16-outline",
-	20: "icons-20-outline",
-	24: "icons-24-outline",
-	32: "icons-32-outline",
-	48: "icons-48-outline",
-	64: "icons-64-outline"
+	16: "icons-16-",
+	20: "icons-20-",
+	24: "icons-24-",
+	32: "icons-32-",
+	48: "icons-48-",
+	64: "icons-64-"
 );
 
-@function get-icon-family($font-size, $line-height) {
+@function get-icon-family($font-size, $line-height, $font-style: "outline") {
 	$icon-size: (math.div($font-size, 1rem) * 16 * $line-height);
 	$valid-sizes: "";
 
 	@if ($icon-size<20) {
-		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 16));
+		$valid-sizes: append(
+			$valid-sizes,
+			#{map.get($all-icon-sizes, 16) + $font-style}
+		);
 	}
 	@if ($icon-size<24) {
-		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 20));
+		$valid-sizes: append(
+			$valid-sizes,
+			#{map.get($all-icon-sizes, 20) + $font-style}
+		);
 	}
 	@if ($icon-size<32) {
-		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 24));
+		$valid-sizes: append(
+			$valid-sizes,
+			#{map.get($all-icon-sizes, 24) + $font-style}
+		);
 	}
 	@if ($icon-size<48) {
-		$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 32));
+		$valid-sizes: append(
+			$valid-sizes,
+			#{map.get($all-icon-sizes, 32) + $font-style}
+		);
 	}
 	@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, 48) + $font-style}
+		);
 	}
-	$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 64));
+	$valid-sizes: append(
+		$valid-sizes,
+		#{map.get($all-icon-sizes, 16) + $font-style}
+	);
 
 	$result-string: "";
 	@each $size in $valid-sizes {

scss/icon/_icons.helpers.scss

@@ -7,12 +7,15 @@
 	$size: $icon-size,
 	$style: $icon-style,
 	$position: "before",
-	$partial: false
+	$partial: false,
+	$defaultFontProperties: true
 ) {
 	&::#{$position} {
-		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
-			"missing-icons";
-		--icon-font-size: #{to-rem($pxValue: $size)};
+		@if $defaultFontProperties {
+			--icon-font-family: "#{"icons-" + $size + "-" + $style}",
+				"missing-icons";
+			--icon-font-size: #{to-rem($pxValue: $size)};
+		}
 
 		@if $position == "before" {
 			margin-inline-end: var(--icon-margin-after, #{$icon-content-space});