8 files changed, 30 insertions, 15 deletions

diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
index 698628149..73a23eb7f 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -8,7 +10,7 @@ $form-base-input-width: 340px;
   @include settings-big-title;
 
   &.account-title-danger {
-    color: lighten($color: #c54130, $amount: 10);
+    color: color.adjust($color: #c54130, $lightness: 10%);
   }
 }
 
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 559a00251..1c4ca533f 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -1,9 +1,12 @@
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
+
 @use 'bootstrap/scss/functions' as *;
 
 tr.banned > td {
-  background-color: lighten($color: $red, $amount: 40) !important;
+  background-color: color.adjust($color: $red, $lightness: 40%) !important;
 }
 
 .banned-info {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 3d686a146..5d406ed5d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 @use 'bootstrap/scss/functions' as *;
@@ -6,7 +8,7 @@
   @include settings-big-title;
 
   &.account-title-danger {
-    color: lighten($color: #c54130, $amount: 10);
+    color: color.adjust($color: #c54130, $lightness: 10%);
   }
 }
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 2c364afb4..4cac94f67 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:color';
 
 @use '_variables' as *;
 @use '_mixins' as *;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 7a100a53d..a25741d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 
 @import '_bootstrap-mixins';
@@ -220,7 +222,7 @@
 }
 
 @mixin danger-button {
-  $color: lighten($color: #c54130, $amount: 10);
+  $color: color.adjust($color: #c54130, $lightness: 10%);
   $text: #fff6f5;
 
   @include button-focus(scale-color($color, $alpha: -95%));
@@ -233,7 +235,7 @@
   &:focus,
   &[disabled],
   &.disabled {
-    background-color: lighten($color: $color, $amount: 10);
+    background-color: color.adjust($color: $color, $lightness: 10%);
   }
 
   &[disabled],
@@ -676,7 +678,7 @@
     transition: width 0.6s ease;
 
     &.red {
-      background-color: lighten($color: #c54130, $amount: 10);
+      background-color: color.adjust($color: #c54130, $lightness: 10%);
     }
   }
 }
@@ -721,7 +723,7 @@
 
   > div {
     box-sizing: border-box;
-    flex: 0 0 percentage(math.div(1, 3));
+    flex: 0 0 math.percentage(math.div(1, 3));
     padding: 0 5px;
     margin-bottom: 10px;
 
@@ -832,7 +834,7 @@
 // an immediate's parent size. This allows to set a ratio without explicit
 // dimensions, as width/height cannot be computed from each other.
 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
-  $padding-percent: percentage($inverted-ratio);
+  $padding-percent: math.percentage($inverted-ratio);
 
   position: relative;
   height: 0;
@@ -889,7 +891,7 @@
 
 @mixin on-small-main-col () {
   :host-context(.main-col:not(.expanded)) {
-    @media screen and (max-width: $small-view + $menu-width) {
+    @media screen and (max-width: #{$small-view + $menu-width}) {
       @content;
     }
   }
@@ -903,7 +905,7 @@
 
 @mixin on-mobile-main-col () {
   :host-context(.main-col:not(.expanded)) {
-    @media screen and (max-width: $mobile-view + $menu-width) {
+    @media screen and (max-width: #{$mobile-view + $menu-width}) {
       @content;
     }
   }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 1eb3135f4..43a005774 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -17,11 +17,11 @@ $grey-foreground-hover-color: #303030;
 $grey-button-outline-color: color.scale($grey-foreground-color, $alpha: -95%);
 
 $main-color: hsl(24, 90%, 50%);
-$main-color-lighter: lighten($main-color, 10%);
-$main-color-lightest: lighten($main-color, 40%);
+$main-color-lighter: color.adjust($main-color, $lightness: 10%);
+$main-color-lightest: color.adjust($main-color, $lightness: 40%);
 $main-color-very-light: #fff5eb;
 
-$main-hover-color: lighten($main-color, 5%);
+$main-hover-color: color.adjust($main-color, $lightness: 5%);
 $main-background-hover-color: #e9ecef;
 
 $support-button: inherit;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 4c7258232..ba7905c89 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,3 +1,6 @@
+@use 'sass:math';
+@use 'sass:color';
+
 @use '_variables' as *;
 @use '_mixins' as *;
 
@@ -9,7 +12,7 @@ $ng-select-border: $input-border-color;
 $ng-select-bg: pvar(--mainBackgroundColor);
 
 // Cannot use a CSS variable as the default them use darken on this variable
-$ng-select-selected: lighten($main-color, 40%);
+$ng-select-selected: color.adjust($main-color, $lightness: 40%);
 // $ng-select-selected-text: $ng-select-primary-text !default;
 
 $ng-select-marked: pvar(--mainColorLightest);
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index d5f24dd91..47d3d2b0d 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use 'bootstrap/scss/functions' as *;
 
 $primary-foreground-color: #fff;
@@ -18,7 +20,7 @@ $control-bar-button-width: 38px;
 
 $control-bar-total-height: $control-bar-height - $control-bar-slider-top;
 
-$slider-bg-color: lighten($primary-background-color, 33%);
+$slider-bg-color: color.adjust($primary-background-color, $lightness: 33%);
 
 $progress-margin: 10px;