Merge pull request #5144 from Nicolai8/main

Change lighten/darken to color.adjust

Author: martijnrusschen

src/stylesheets/datepicker.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @import "variables.scss";
 @import "mixins.scss";
 
@@ -158,7 +159,7 @@ h2.react-datepicker__current-month {
 
   &:hover {
     *::before {
-      border-color: darken($datepicker__muted-color, 15%);
+      border-color: color.adjust($datepicker__muted-color, $lightness: -15%);
     }
   }
 }
@@ -361,17 +362,17 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:hover {
-      background-color: darken($datepicker__selected-color, 5%);
+      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: lighten($datepicker__selected-color, 10%);
+    background-color: color.adjust($datepicker__selected-color, $lightness: 10%);
     color: #fff;
 
     &:hover {
-      background-color: darken($datepicker__selected-color, 5%);
+      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
     }
   }
 }
@@ -417,7 +418,7 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: darken($datepicker__highlighted-color, 5%);
+      background-color: color.adjust($datepicker__highlighted-color, $lightness: -5%);
     }
 
     &-custom-1 {
@@ -453,7 +454,7 @@ h2.react-datepicker__current-month {
     }
 
     &:not([aria-disabled="true"]):hover {
-      background-color: darken($datepicker__holidays-color, 10%);
+      background-color: color.adjust($datepicker__holidays-color, $lightness: -10%);
     }
 
     &:hover .overlay {
@@ -470,17 +471,17 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
-      background-color: darken($datepicker__selected-color, 5%);
+      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
     }
   }
 
   &--keyboard-selected {
     border-radius: $datepicker__border-radius;
-    background-color: lighten($datepicker__selected-color, 45%);
+    background-color: color.adjust($datepicker__selected-color, $lightness: 45%);
     color: rgb(0, 0, 0);
 
     &:not([aria-disabled="true"]):hover {
-      background-color: darken($datepicker__selected-color, 5%);
+      background-color: color.adjust($datepicker__selected-color, $lightness: -5%);
     }
   }
 
@@ -549,7 +550,7 @@ h2.react-datepicker__current-month {
 
     .react-datepicker__year-read-view--down-arrow,
     .react-datepicker__month-read-view--down-arrow {
-      border-top-color: darken($datepicker__muted-color, 10%);
+      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
     }
   }
 
@@ -612,11 +613,11 @@ h2.react-datepicker__current-month {
     background-color: $datepicker__muted-color;
 
     .react-datepicker__navigation--years-upcoming {
-      border-bottom-color: darken($datepicker__muted-color, 10%);
+      border-bottom-color: color.adjust($datepicker__muted-color, $lightness: -10%);
     }
 
     .react-datepicker__navigation--years-previous {
-      border-top-color: darken($datepicker__muted-color, 10%);
+      border-top-color: color.adjust($datepicker__muted-color, $lightness: -10%);
     }
   }
 

src/stylesheets/variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $datepicker__background-color: #f0f0f0 !default;
 $datepicker__border-color: #aeaeae !default;
 $datepicker__highlighted-color: #3dcc4a !default;
@@ -6,9 +8,9 @@ $datepicker__muted-color: #ccc !default;
 $datepicker__selected-color: #216ba5 !default;
 $datepicker__text-color: #000 !default;
 $datepicker__header-color: #000 !default;
-$datepicker__navigation-disabled-color: lighten(
+$datepicker__navigation-disabled-color: color.adjust(
   $datepicker__muted-color,
-  10%
+  $lightness: 10%
 ) !default;
 $datepicker__border-radius: 0.3rem !default;
 $datepicker__day-margin: 0.166rem !default;