From b64024e5e4cad08349d9329ed7f5e145915ca1fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Solli?= <jorgen@memosoft.no>
Date: Wed, 2 Oct 2024 13:59:31 +0200
Subject: [PATCH 1/2] Fixed deprecation warning when using division outside of
 calc()

---
 src/sass/_rules.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/sass/_rules.scss b/src/sass/_rules.scss
index ee880317..7625d98e 100644
--- a/src/sass/_rules.scss
+++ b/src/sass/_rules.scss
@@ -6,9 +6,9 @@
     width: $slider-horizontal-width;
     height: $slider-line-height;
     .slider-track {
-      height: $slider-line-height/2;
+      height: calc($slider-line-height/2);
       width: 100%;
-      margin-top: -$slider-line-height/4;
+      margin-top: - calc($slider-line-height/4);
       top:  50%;
       left: 0;
     }
@@ -19,12 +19,12 @@
     }
     .slider-tick,
     .slider-handle {
-      margin-left: -$slider-line-height/2;
+      margin-left: - calc($slider-line-height/2);
       &.triangle {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
-        border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
+        border-width: 0 calc($slider-line-height/2) calc($slider-line-height/2) calc($slider-line-height/2);
         width: 0;
         height: 0;
         border-bottom-color: $slider-primary-bottom;
@@ -54,7 +54,7 @@
       .slider-tick,
       .slider-handle {
         margin-left: initial;
-        margin-right: -$slider-line-height/2;
+        margin-right: - calc($slider-line-height/2);
       }
       .slider-tick-container {
         left: initial;
@@ -66,7 +66,7 @@
     height: $slider-vertical-height;
     width: $slider-line-height;
     .slider-track {
-      width: $slider-line-height/2;
+      width: calc($slider-line-height/2);
       height: 100%;
       left: 25%;
       top: 0;
@@ -84,9 +84,9 @@
     }
     .slider-tick,
     .slider-handle {
-      margin-top: -$slider-line-height/2;
+      margin-top: - calc($slider-line-height/2);
       &.triangle {
-        border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
+        border-width: calc($slider-line-height/2) 0 calc($slider-line-height/2) calc($slider-line-height/2);
         width:  1px;
         height: 1px;
         border-left-color: $slider-primary-bottom;
@@ -111,7 +111,7 @@
       .slider-tick,
       .slider-handle {
         &.triangle {
-          border-width: $slider-line-height/2 $slider-line-height/2 $slider-line-height/2 0;
+          border-width: calc($slider-line-height/2) calc($slider-line-height/2) calc($slider-line-height/2) 0;
         }
       }
       .slider-tick-label-container {

From 5021d35e18d980900c500fb8e3731c1d75765458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8rgen=20Solli?= <jorgen@memosoft.no>
Date: Wed, 2 Oct 2024 14:00:13 +0200
Subject: [PATCH 2/2] Replaced deprecated darken() and lighten() with
 color.scale()

---
 src/sass/_variables.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 7d37af16..7d282264 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $slider-line-height: 20px !default;
 $slider-border-radius: 4px !default;
 $slider-horizontal-width: 210px !default;
@@ -12,9 +14,9 @@ $slider-primary: null !default;
 }
 
 $slider-primary-top: $slider-primary !default;
-$slider-primary-bottom: darken($slider-primary, 5%) !default;
-$slider-secondary-top: saturate(lighten($slider-primary, 28%), 20%) !default;
-$slider-secondary-bottom: saturate(lighten($slider-primary, 23%), 2%) !default;
+$slider-primary-bottom: color.scale($slider-primary, $lightness: -5%) !default;
+$slider-secondary-top: saturate(color.scale($slider-primary, $lightness: 28%), 20%) !default;
+$slider-secondary-bottom: saturate(color.scale($slider-primary, $lightness: 23%), 2%) !default;
 
 // grays for slider channel and disabled states
 $slider-gray-1: #BEBEBE !default;