From 0eb666a8defaaf75cb4d0b69708066d53f359790 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 18 Oct 2024 07:25:58 +0200
Subject: [PATCH] build(deps-dev): bump sass from 1.79.5 to 1.80.1 (#280)

* build(deps-dev): bump sass from 1.79.5 to 1.80.1

Bumps [sass](https://github.com/sass/dart-sass) from 1.79.5 to 1.80.1.
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.79.5...1.80.1)

---
updated-dependencies:
- dependency-name: sass
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* refactor: migrated @import to @use

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 scss/global.scss  | 24 +++++++++++++-----------
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8de29eed..bd1ff56f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "nodemon": "^3.1.7",
         "npm-run-all": "^4.1.5",
         "prettier": "^3.3.3",
-        "sass": "^1.79.5",
+        "sass": "^1.80.1",
         "vue": "^3.2.31"
       }
     },
@@ -2030,9 +2030,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.79.5",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz",
-      "integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==",
+      "version": "1.80.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.1.tgz",
+      "integrity": "sha512-9lBwDZ7j3y/1DKj5Ec249EVGo5CVpwnzIyIj+cqlCjKkApLnzsJ/l9SnV4YnORvW9dQwQN+gQvh/mFZ8CnDs7Q==",
       "dev": true,
       "dependencies": {
         "@parcel/watcher": "^2.4.1",
@@ -3825,9 +3825,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.79.5",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz",
-      "integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==",
+      "version": "1.80.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.1.tgz",
+      "integrity": "sha512-9lBwDZ7j3y/1DKj5Ec249EVGo5CVpwnzIyIj+cqlCjKkApLnzsJ/l9SnV4YnORvW9dQwQN+gQvh/mFZ8CnDs7Q==",
       "dev": true,
       "requires": {
         "@parcel/watcher": "^2.4.1",
diff --git a/package.json b/package.json
index e043fec5..152c4444 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "nodemon": "^3.1.7",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
-    "sass": "^1.79.5",
+    "sass": "^1.80.1",
     "vue": "^3.2.31"
   },
   "private": true
diff --git a/scss/global.scss b/scss/global.scss
index 7c270369..3186a7ce 100644
--- a/scss/global.scss
+++ b/scss/global.scss
@@ -1,25 +1,27 @@
-$icons-path: "../icons/";
-$images-path: "../images/";
-$fonts-path: "../fonts/";
+@use "@db-ui/core/sources/css/enterprise/db-ui-core" with (
+	$icons-path: "../icons/",
+	$images-path: "../images/",
+	$fonts-path: "../fonts/"
+);
 
-@import "@db-ui/core/sources/css/enterprise/db-ui-core";
-
-@import "@db-ui/core/sources/_patterns/00-base/colors/enterprise/colors.variables";
+@use "@db-ui/core/sources/_patterns/00-base/colors/enterprise/colors.variables";
 
 $ora-100: #fff4d8;
 $blu-100: #e0effb;
 
-@import "./helpers/helperclasses";
-@import "./modules/navigation";
+@use "helpers/helperclasses";
+@use "modules/navigation";
 
-@import "./elements/buttons";
-@import "./elements/icons";
+@use "elements/buttons";
+@use "elements/icons";
 
 html {
 	background: #fff;
 	//background: var(--db-03-01);
 	font-family: "DB Sans", "Helvetica", "Arial", sans-serif;
-	transition: color 250ms, background-color 250ms;
+	transition:
+		color 250ms,
+		background-color 250ms;
 	font-size: 16px;
 }
 body {