refactor: migrating SCSS features

docs/getStarted.adoc

@@ -118,12 +118,31 @@ It will copy on *npm build* the content of *core/dist* folder to *dist* folder i
 You can use the overall scss file or pick the relevant parts.
 E.g. you can import the overall scss files to your `src/styles.scss` by adding the following imports based on your bundler in use.
 
-#### Webpack based bundlers (e.g. Angular or Vue CLI)
+
+#### Rollup based bundlers (e.g. Parcel, Vite)
+
+For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
 
 [source,scss]
 ----
-@import "@db-ui/core/sources/css/webpack.assets-paths";
-@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+  $icons-path: rollupAssetsPaths.$icons-path,
+  $images-path: rollupAssetsPaths.$images-path,
+  $fonts-path: rollupAssetsPaths.$fonts-path
+);
+----
+
+#### Webpack based bundlers (e.g. older Angular or Vue CLI versions)
+
+[source,scss]
+----
+@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+  $icons-path: webpackAssetsPaths.$icons-path,
+  $images-path: webpackAssetsPaths.$images-path,
+  $fonts-path: webpackAssetsPaths.$fonts-path
+);
 ----
 
 Please keep in mind, that you would need to set your include path within the `angular.json` configuration file, like this:
@@ -155,16 +174,6 @@ module.exports = {
 };
 ----
 
-#### Rollup based bundlers (e.g. Vue with Vite)
-
-For Rollup based bundlers like Vite or Parcel we're providing the following SCSS endpoint:
-
-[source,scss]
-----
-@import "@db-ui/core/sources/css/rollup.assets-paths";
-@import "@db-ui/core/sources/css/enterprise/db-ui-core";
-----
-
 
 ### Use css files:
 

docs/migrationGuide.adoc

@@ -4,6 +4,54 @@ As with every release you're recommended to do a visual regression testing for y
 
 Especially the following aspects have changed through the various different releases and would need your review and probably adaptions within your code base.
 
+== DB UI Core 4.0.0 Migration Guide
+
+=== SASS Migration
+
+We'd like to support the SASS feature `@use` and that for replace the deprecated `@import` feature. So you'll have to replace the `@import` declarations by `@use` within our consuming files.
+
+Especially the following general imports would need to get replaced:
+
+==== Webpack
+
+The following `@import` syntax …
+
+```scss
+@import "@db-ui/core/sources/css/webpack.assets-paths";
+@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+```
+
+… would need to replaced by `@use` syntax:
+
+```scss
+@use "@db-ui/core/sources/css/webpack.assets-paths" as webpackAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+  $icons-path: webpackAssetsPaths.$icons-path,
+  $images-path: webpackAssetsPaths.$images-path,
+  $fonts-path: webpackAssetsPaths.$fonts-path
+);
+```
+
+==== Rollup bundler based software
+
+The following `@import` syntax …
+
+```scss
+@import "@db-ui/core/sources/css/rollup.assets-paths";
+@import "@db-ui/core/sources/css/enterprise/db-ui-core";
+```
+
+… would need to replaced by `@use` syntax:
+
+```scss
+@use "@db-ui/core/sources/css/rollup.assets-paths" as rollupAssetsPaths;
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+  $icons-path: rollupAssetsPaths.$icons-path,
+  $images-path: rollupAssetsPaths.$images-path,
+  $fonts-path: rollupAssetsPaths.$fonts-path
+);
+```
+
 == DB UI Core 3.0.0 Migration Guide
 
 === Chip

source/_patterns/00-base/colors/_colors.scss

@@ -1,2 +1,2 @@
 // * Attention ! Please expect that these declarations will get moved to DB UI Base sooner than later for easier consumption
-@import "colors.variables";
+@use "colors.variables";

source/_patterns/00-base/colors/_colors.variables.scss

@@ -1,3 +1,3 @@
 // * Marketingportal brand colors
 
-@import "@db-ui/base/build/scss/variables";
+@use "@db-ui/base/build/scss/variables";

source/_patterns/00-base/colors/enterprise/_colors.variables.scss

@@ -1,20 +1,21 @@
 // DB colors
-@import "../colors.variables";
+@use "../colors.variables";
+@use "@db-ui/base/build/scss/variables";
 
 // EDS semantic colors (TODO: probably leftovers, those would most likely need to get replaced again as soon as the Enterprise extension is finalized)
 
-$DBdarkgray: $db-color-cool-gray-500; // DB Dunkelgrau/DB dark gray
-$DBblue: $db-color-cyan-600; // DB Blau/DB blue
-$DBwhitegray: $db-color-cool-gray-200; // DB Weißgrau/DB white-gray
-$DBlightgray: $db-color-cool-gray-300; // DB light-gray
-$DBgray: $db-color-cool-gray-400; // DB gray
+$DBdarkgray: variables.$db-color-cool-gray-500; // DB Dunkelgrau/DB dark gray
+$DBblue: variables.$db-color-cyan-600; // DB Blau/DB blue
+$DBwhitegray: variables.$db-color-cool-gray-200; // DB Weißgrau/DB white-gray
+$DBlightgray: variables.$db-color-cool-gray-300; // DB light-gray
+$DBgray: variables.$db-color-cool-gray-400; // DB gray
 
 // * General
-$black: $db-color-cool-gray-800;
-$black-bis: $db-color-cool-gray-700;
-$black-ter: $db-color-cool-gray-600;
+$black: variables.$db-color-cool-gray-800;
+$black-bis: variables.$db-color-cool-gray-700;
+$black-ter: variables.$db-color-cool-gray-600;
 
-$gray-darker: $db-color-cool-gray-600;
+$gray-darker: variables.$db-color-cool-gray-600;
 $gray-dark: $DBdarkgray;
 $gray: $DBgray;
 $gray-light: $DBlightgray;
@@ -24,32 +25,32 @@ $gray-lighter: $DBwhitegray;
 // $white-bis:
 // $white:
 
-$orange: $db-color-yellow-900;
+$orange: variables.$db-color-yellow-900;
 // $yellow:
-$green: $db-color-green-600;
+$green: variables.$db-color-green-600;
 // $turquoise:
 // $cyan:
-$blue: $db-color-cyan-600;
+$blue: variables.$db-color-cyan-600;
 // $purple:
-$red: $db-color-red;
+$red: variables.$db-color-red;
 $red-invert: #fff;
 
 // * Enterprise Design System
 
 // Enterprise Design System Colors
-$Text: $db-color-cool-gray-800; // Text
-$Background: $db-color-cool-gray-700; // Background, buttons
-$Buttons: $db-color-cool-gray-700; // Background, buttons
-$Icons: $db-color-cool-gray-600; // Icons, divider
-$divider01: $db-color-cool-gray-700; // Icons, divider
+$Text: variables.$db-color-cool-gray-800; // Text
+$Background: variables.$db-color-cool-gray-700; // Background, buttons
+$Buttons: variables.$db-color-cool-gray-700; // Background, buttons
+$Icons: variables.$db-color-cool-gray-600; // Icons, divider
+$divider01: variables.$db-color-cool-gray-700; // Icons, divider
 $inputfields: $DBdarkgray; // Input fields
-$selected: $db-color-cool-gray-400; // selected -> to be changed
-$divider02: $db-color-cool-gray-200; // Divider
-$hover: $db-color-cool-gray-200; // hover -> to be changed
+$selected: variables.$db-color-cool-gray-400; // selected -> to be changed
+$divider02: variables.$db-color-cool-gray-200; // Divider
+$hover: variables.$db-color-cool-gray-200; // hover -> to be changed
 $LightBG: #fdfdfd; // Background
-$highlight-color01: $db-color-red; // Highlight color
+$highlight-color01: variables.$db-color-red; // Highlight color
 $highlight-color02: $blue; // Highlight color
-$hover-buttons: $db-color-red-600; // hover Buttons
+$hover-buttons: variables.$db-color-red-600; // hover Buttons
 
 // Semantic color codes
 // * light background

source/_patterns/00-base/colors/enterprise/colors.scss

@@ -1,2 +1,2 @@
-@import "colors.variables";
-@import "../colors";
+@use "colors.variables";
+@use "../colors" as colors2;

source/_patterns/00-base/icons/_icons.custom-properties.scss

@@ -1,4 +1,4 @@
-@import "icons.variables";
+@use "icons.variables";
 
 // TODO: The following construct was especially meant to enable a branch (EDS & FV) specific result - probably we could refactor this the sooner the later
 [data-icon]:not([data-icon-variant]),
@@ -15,18 +15,18 @@
 }
 
 // DB UX Icons
-@each $icon-style, $icon-sizes in $icon-font-families-personenverkehr {
+@each $icon-style, $icon-sizes in icons.$icon-font-families-personenverkehr {
 	@each $icon-size, $icon-categories in $icon-sizes {
-		[data-icon-variant="#{$icon-size}-#{$icon-style}"],
-		[data-icon-variant-before="#{$icon-size}-#{$icon-style}"] {
+		[data-icon-variant="#{icons.$icon-size}-#{icons.$icon-style}"],
+		[data-icon-variant-before="#{icons.$icon-size}-#{icons.$icon-style}"] {
 			&[data-icon],
 			&[data-icon-before] {
-				@include iconMeta($icon-size, $icon-style);
+				@include iconMeta(icons.$icon-size, icons.$icon-style);
 			}
 		}
-		[data-icon-variant-after="#{$icon-size}-#{$icon-style}"] {
+		[data-icon-variant-after="#{icons.$icon-size}-#{icons.$icon-style}"] {
 			&[data-icon-after] {
-				@include iconMeta($icon-size, $icon-style, "after");
+				@include iconMeta(icons.$icon-size, icons.$icon-style, "after");
 			}
 		}
 	}

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

@@ -1,36 +1,37 @@
 @use "sass:string";
-@import "../../../css/db-ui-core.variables";
+@use "../../../css/db-ui-core.variables";
 
-@import "icons.variables";
+@use "icons.variables";
 
 // Potential TODO: usage of the standard filenames described by https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Icons/Funktionale-Icons-Architektur-und-Fahrzeuge
 
 @font-face {
 	font-display: block;
 	font-family: "missing-icons";
 	src:
-		url("#{$icons-path}functional/fonts/icons-empty.woff2?4r2098")
+		url("#{db-ui-core.$icons-path}functional/fonts/icons-empty.woff2?4r2098")
 			format("woff2"),
-		url("#{$icons-path}functional/fonts/icons-empty.woff?4r2098")
+		url("#{db-ui-core.$icons-path}functional/fonts/icons-empty.woff?4r2098")
 			format("woff");
 }
 
 // DB UX Icons
-@each $icon-style, $icon-sizes in $icon-font-families-personenverkehr {
+@each $icon-style, $icon-sizes in icons.$icon-font-families-personenverkehr {
 	@each $icon-size, $icon-categories in $icon-sizes {
 		@each $icon-category, $icon-font-unicodes in $icon-categories {
 			@font-face {
-				$icon-font-family: "icons-" + $icon-size + "-" + $icon-style;
+				$icon-font-family: "icons-" + icons.$icon-size + "-" +
+					icons.$icon-style;
 
 				font-display: block;
 
 				font-family: $icon-font-family;
 				font-style: normal;
 				font-weight: normal;
 				src:
-					url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2?4r2098")
+					url("#{db-ui-core.$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2?4r2098")
 						format("woff2"),
-					url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2098")
+					url("#{db-ui-core.$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff?4r2098")
 						format("woff");
 
 				unicode-range: string.unquote($icon-font-unicodes);

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

@@ -1,10 +1,10 @@
-@import "../../../css/helpers/functions";
+@use "../../../css/helpers/functions";
 
 // Default parameters
 $icon-size: 24 !default;
 $icon-style: "outline" !default;
 $icons-font-family: '#{"icons-" + $icon-size + "-" + $icon-style}, "missing-icons"' !default;
-$icon-content-space: to-rem(
+$icon-content-space: functions.to-rem(
 	$pxValue: 6
 ) !default;
 

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

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

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

@@ -1,5 +1,5 @@
-@import "icons.variables";
+@use "icons.variables";
 
-@import "icons.custom-properties";
-@import "icons.font-faces";
-@import "../icons";
+@use "icons.custom-properties" as icons2;
+@use "icons.font-faces" as icons3;
+@use "../icons" as icons4;

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

@@ -1,21 +1,22 @@
 // @import "icons.variables";
 
-@import "icons.variables";
-@import "icons.attributes-mappings";
-@import "icons.helpers";
-@import "icons.custom-properties";
-@import "icons.font-faces";
-@import "icons.placeholder";
+@use "icons.variables";
+@use "icons.attributes-mappings" as icons3;
+@use "icons.helpers" as icons2;
+@use "icons.custom-properties" as icons4;
+@use "icons.font-faces" as icons5;
+@use "icons.placeholder" as icons6;
+@use "../../../css/helpers/functions";
 
 [data-icon],
 [data-icon-before] {
 	&::before {
 		@extend %icon;
 		content: var(--icon-glyph-before);
-		margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
+		margin-inline-end: var(--icon-margin-after, #{icons.$icon-content-space});
 		font-size: var(
 			--icon-font-size-before,
-			var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+			var(--icon-font-size, #{functions.to-rem($pxValue: icons.$icon-size)})
 		);
 	}
 }
@@ -24,10 +25,10 @@
 	&::after {
 		@extend %icon;
 		content: var(--icon-glyph-after);
-		margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
+		margin-inline-start: var(--icon-margin-before, #{icons.$icon-content-space});
 		font-size: var(
 			--icon-font-size-after,
-			var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+			var(--icon-font-size, #{functions.to-rem($pxValue: icons.$icon-size)})
 		);
 	}
 }
@@ -36,10 +37,10 @@
 .is-icon-text-replace {
 	&[data-icon],
 	&[data-icon-before] {
-		@include is-icon-text-replace();
+		@include icons2.is-icon-text-replace();
 	}
 
 	&[data-icon-after] {
-		@include is-icon-text-replace("after");
+		@include icons2.is-icon-text-replace("after");
 	}
 }