From 26918f80256a7afbb9f686052ad20c72467af6e4 Mon Sep 17 00:00:00 2001
From: mister-ben <1676039+mister-ben@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:01:21 +0200
Subject: [PATCH] chore: update sass and change color syntax

---
 package-lock.json               | 25 +++++++++++++++++++++----
 package.json                    |  2 +-
 src/css/_private-variables.scss |  4 +++-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 04ba02d739..4cd5fa539f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12543,14 +12543,31 @@
       "dev": true
     },
     "sass": {
-      "version": "1.77.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "version": "1.79.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.79.3.tgz",
+      "integrity": "sha512-m7dZxh0W9EZ3cw50Me5GOuYm/tVAJAn91SUnohLRo9cXBixGUOdvmryN+dXpwR831bhoY3Zv7rEFt85PUwTmzA==",
       "dev": true,
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0",
+        "chokidar": "^4.0.0",
         "immutable": "^4.0.0",
         "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "dependencies": {
+        "chokidar": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+          "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+          "dev": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
+        "readdirp": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz",
+          "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
+          "dev": true
+        }
       }
     },
     "sax": {
diff --git a/package.json b/package.json
index 664e6fdb3d..b111ffa528 100644
--- a/package.json
+++ b/package.json
@@ -155,7 +155,7 @@
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-stub": "^1.2.0",
     "rollup-plugin-svg": "^2.0.0",
-    "sass": "^1.34.0",
+    "sass": "^1.79.3",
     "semver": "^5.7.0",
     "shelljs": "^0.8.5",
     "shx": "^0.3.2",
diff --git a/src/css/_private-variables.scss b/src/css/_private-variables.scss
index 410121e14c..46d7e552f4 100644
--- a/src/css/_private-variables.scss
+++ b/src/css/_private-variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Text, icons, hover states
 $primary-foreground-color: #fff !default;
 
@@ -6,7 +8,7 @@ $primary-background-color: #2B333F !default;
 $primary-background-transparency: 0.7 !default;
 
 // Hover states, slider backgrounds
-$secondary-background-color: lighten($primary-background-color, 33%) !default;
+$secondary-background-color: color.adjust($primary-background-color, $lightness: 33%, $space: hsl) !default;
 $secondary-background-transparency: 0.5 !default;
 
 // Avoiding helvetica: issue #376