Create _icons.helpers.scss

packages/ci-cd-test/_icons.helpers.scss

@@ -0,0 +1,113 @@
+@use "sass:map";
+// Icon SCSS mixin
+@mixin icon(
+	$glyph: "",
+	$size: $icon-size,
+	$style: $icon-style,
+	$position: "before",
+	$partial: false
+) {
+	// We're setting this on the parent tag, so that it could get overwritten via data-icon=*
+	@if $glyph != "" {
+		& {
+			--icon-glyph-#{$position}: "#{$glyph}";
+		}
+	}
+
+	&::#{$position} {
+		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
+			"missing-icons" !important;
+
+		font-size: var(
+			--icon-font-size-#{$position},
+			var(--icon-font-size, #{to-rem($pxValue: $size)})
+		);
+
+		@if $position == "before" {
+			margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
+		}
+		@if $position == "after" {
+			margin-inline-start: var(
+				--icon-margin-before,
+				#{$icon-content-space}
+			);
+		}
+
+		content: var(--icon-glyph-#{$position});
+		@supports (content: ""/"") {
+			// Hiding icon from screenreaders
+			// We couldn't just add the following code line and expect an forgiving behaviour of unsupporting browser to ignore this declaration, but need to wrap it into an @supports due to a bug in WebKit / older versions of  Safari: https://github.com/db-ui/core/pull/766
+			content: var(--icon-glyph-#{$position}) / ""; // https://www.w3.org/TR/css-content-3/#alt
+		}
+
+		@if $partial {
+			& {
+				display: inline-block;
+				/*** icon - partial ***/
+				// * use !important to prevent issues with browser extensions that change fonts
+				font-family: var(--icon-font-family) !important;
+				font-style: normal;
+				font-variant: normal;
+
+				font-weight: normal; // CSS variables fallback
+				font-weight: var(--icon-font-weight, normal);
+				line-height: 1;
+				text-transform: none;
+				vertical-align: middle;
+
+				/* stylelint-disable */
+				// * Better Font Rendering ===========
+				-webkit-font-smoothing: antialiased;
+				-moz-osx-font-smoothing: grayscale;
+				/* stylelint-enable */
+
+				// Hiding icon from screenreaders
+				/* stylelint-disable */
+				-webkit-alt: "";
+				/* stylelint-enable */
+				alt: "";
+				speak: none; // Hiding icon from screenreaders, fallback by older notation
+				speak: never; // Hiding icon from screenreaders
+			}
+			@media aural {
+				content: none;
+			}
+			@media speech {
+				content: none;
+			}
+		} @else {
+			@extend %icon;
+		}
+	}
+}
+
+// SCSS mixin for elements that text should get hidden in favour of only displaying the included icon
+@mixin is-icon-text-replace($position: "before") {
+	& {
+		font-size: 0;
+	}
+
+	@if $position == "before" {
+		&::before {
+			--icon-margin-after: 0;
+		}
+	} @else {
+		&::after {
+			--icon-margin-before: 0;
+		}
+	}
+}
+
+// Icon glyph mixin
+@function glyph($glyph) {
+	@return map.get($icon-glyphs, $glyph);
+}
+
+// Icon meta data mixin
+@mixin iconMeta($size: $icon-size, $style: $icon-style, $position: "before") {
+	&::#{$position} {
+		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
+			"missing-icons" !important;
+		--icon-font-size: #{to-rem($pxValue: $size)};
+	}
+}