Skip to content

Commit

Permalink
Merge pull request #5144 from Nicolai8/main
Browse files Browse the repository at this point in the history
Change lighten/darken to color.adjust
  • Loading branch information
martijnrusschen authored Oct 3, 2024
2 parents ce95e64 + 1668400 commit bf5472c
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 14 deletions.
25 changes: 13 additions & 12 deletions src/stylesheets/datepicker.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "sass:color";
@import "variables.scss";
@import "mixins.scss";

Expand Down Expand Up @@ -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%);
}
}
}
Expand Down Expand Up @@ -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%);
}
}
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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%);
}
}

Expand Down Expand Up @@ -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%);
}
}

Expand Down Expand Up @@ -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%);
}
}

Expand Down
6 changes: 4 additions & 2 deletions src/stylesheets/variables.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "sass:color";

$datepicker__background-color: #f0f0f0 !default;
$datepicker__border-color: #aeaeae !default;
$datepicker__highlighted-color: #3dcc4a !default;
Expand All @@ -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;
Expand Down

0 comments on commit bf5472c

Please sign in to comment.