refactor(sass): version migration (#1011)

* refactor: using internal color functions

* refactor: using internal string function

* refactor: using internal map.merge function

* refactor: using internal map.get function

* refactor: using internal string.unquote function

* refactor: use the internal map.get function

* refactor: running prettier

Author: mfranzke

source/_patterns/00-base/_helpers.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @mixin rgba2hex(
 	$cssProperty,
 	$hexValue,
@@ -6,10 +7,12 @@
 	$rgbBackground: #fdfdfd
 ) {
 	#{$cssProperty}: rgb(
-		(1 - $alphaValue) * red($rgbBackground) + $alphaValue * red($hexValue),
-		(1 - $alphaValue) * green($rgbBackground) + $alphaValue *
-			green($hexValue),
-		(1 - $alphaValue) * blue($rgbBackground) + $alphaValue * blue($hexValue)
+		(1 - $alphaValue) * color.red($rgbBackground) + $alphaValue *
+			color.red($hexValue),
+		(1 - $alphaValue) * color.green($rgbBackground) + $alphaValue *
+			color.green($hexValue),
+		(1 - $alphaValue) * color.blue($rgbBackground) + $alphaValue *
+			color.blue($hexValue)
 	);
 }
 

source/_patterns/00-base/_init.global.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // *! this is an opionionated (especially based on "enhancing" normalize.css) version of minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css
 html,
 body {
@@ -61,7 +62,7 @@ a {
 
 code {
 	background-color: #f5f5f5;
-	color: darken($db-color-red, 2%);
+	color: color.adjust($db-color-red, $lightness: -2%);
 	font-size: 0.875em;
 	font-weight: normal;
 	padding: 0.25em 0.5em;

source/_patterns/00-base/icons/_icons.font-faces.scss

@@ -1,3 +1,4 @@
+@use "sass:string";
 @import "../../../css/db-ui-core.variables";
 
 @import "icons.variables";
@@ -32,7 +33,7 @@
 					url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2098")
 						format("woff");
 
-				unicode-range: unquote($icon-font-unicodes);
+				unicode-range: string.unquote($icon-font-unicodes);
 			}
 		}
 	}

source/_patterns/00-base/icons/_icons.helpers.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Icon SCSS mixin
 @mixin icon(
 	$glyph: "",
@@ -99,7 +100,7 @@
 
 // Icon glyph mixin
 @function glyph($glyph) {
-	@return map-get($icon-glyphs, $glyph);
+	@return map.get($icon-glyphs, $glyph);
 }
 
 // Icon meta data mixin

source/_patterns/00-base/icons/enterprise/_icons.variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../../css/helpers/functions";
 @import "../icons.variables";
 
@@ -81,4 +82,4 @@ $icon-glyphs-enterprise: (
 	// "upload-cloud": "\e923",
 	// "watch": "\1f552"
 );
-$icon-glyphs: map-merge($icon-glyphs-enterprise, $icon-glyphs-personenverkehr);
+$icon-glyphs: map.merge($icon-glyphs-enterprise, $icon-glyphs-personenverkehr);

source/_patterns/00-base/type/_fonts.scss

@@ -1,13 +1,14 @@
+@use "sass:map";
 @import "../../../css/db-ui-core.variables";
 @import "fonts.variables";
 
 @each $font-name, $font-meta in $font-families {
-	$font-family: map-get($font-meta, "font-family");
-	$font-filename: map-get($font-meta, "font-filename");
-	$font-weight: map-get($font-meta, "font-weight");
-	$font-style: map-get($font-meta, "font-style");
-	$font-local-name: map-get($font-meta, "font-local-name");
-	$font-local-name-short: map-get($font-meta, "font-local-name-short");
+	$font-family: map.get($font-meta, "font-family");
+	$font-filename: map.get($font-meta, "font-filename");
+	$font-weight: map.get($font-meta, "font-weight");
+	$font-style: map.get($font-meta, "font-style");
+	$font-local-name: map.get($font-meta, "font-local-name");
+	$font-local-name-short: map.get($font-meta, "font-local-name-short");
 
 	@font-face {
 		font-family: $font-family;

source/_patterns/01-elements/buttons/button.scss

@@ -1,5 +1,6 @@
 @charset "utf-8";
 
+@use "sass:string";
 @import "button.variables";
 
 .elm-button {
@@ -46,7 +47,7 @@
 		background-color: $button-brand-primary--backgroundColor;
 
 		&:disabled {
-			background-color: unquote(
+			background-color: string.unquote(
 				$button-brand-primary--backgroundColor + "40"
 			);
 		}
@@ -67,7 +68,9 @@
 		background-color: $button-primary--backgroundColor;
 
 		&:disabled {
-			background-color: unquote($button-primary--backgroundColor + "40");
+			background-color: string.unquote(
+				$button-primary--backgroundColor + "40"
+			);
 		}
 
 		&:not(:disabled) {
@@ -90,8 +93,8 @@
 		color: $db-color-cool-gray-700;
 
 		&:disabled {
-			color: unquote($db-color-cool-gray-700 + "80");
-			border-color: unquote($db-color-cool-gray-700 + "40");
+			color: string.unquote($db-color-cool-gray-700 + "80");
+			border-color: string.unquote($db-color-cool-gray-700 + "40");
 		}
 
 		&:not(:disabled) {
@@ -111,8 +114,8 @@
 		color: $db-color-cool-gray-700;
 
 		&:disabled {
-			color: unquote($db-color-cool-gray-700 + "80");
-			background-color: unquote(
+			color: string.unquote($db-color-cool-gray-700 + "80");
+			background-color: string.unquote(
 				$button-secondarySolid--backgroundColor + "40"
 			);
 		}
@@ -135,7 +138,7 @@
 		color: $db-color-cool-gray-700;
 
 		&:disabled {
-			color: unquote($db-color-cool-gray-700 + "80");
+			color: string.unquote($db-color-cool-gray-700 + "80");
 		}
 
 		&:not(:disabled) {
@@ -214,7 +217,7 @@
 	}
 
 	&:disabled {
-		color: unquote($button---color + "80");
+		color: string.unquote($button---color + "80");
 	}
 
 	// width

source/_patterns/01-elements/loading-indicator/loading-indicator.scss

@@ -1,4 +1,5 @@
 @charset "utf-8";
+@use "sass:map";
 @use "sass:math";
 
 @import "loading-indicator.variables";
@@ -17,12 +18,12 @@
 		&%size-#{$size} {
 			--loadingindicator--stroke-width: #{math.div(
 					44px,
-					map-get($db-spinner-sizes, $size)
+					map.get($db-spinner-sizes, $size)
 				) *
 				$stroke-width};
 			--loadingindicator--r: 19px;
-			height: map-get($db-spinner-sizes, $size);
-			width: map-get($db-spinner-sizes, $size);
+			height: map.get($db-spinner-sizes, $size);
+			width: map.get($db-spinner-sizes, $size);
 		}
 	}
 }