Merge pull request #450 from silevis/v4/remove-deprecated-scss-functions

V4 fix: remove deprecated scss functions

Author: MichaelMatejko

README.md

@@ -17,7 +17,7 @@ If you like our work, please give this project a star ⭐
 
 # Check out the new v5-alpha version
 
-🌐 [Visit our Homepage](https://silevis.github.io/reactgrid/)
+🌐 [Visit our new Website](https://silevis.github.io/reactgrid/)
 
 📚 [Dive into the Documentation](https://silevis.github.io/reactgrid/docs/5.0/1-getting-started) to get started quickly and easily.
 

src/default-colors.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // COLORS
 $primary-color: #3579f8 !default;
 $bg-color: #ffffff !default;
@@ -19,10 +21,7 @@ $checkbox-mark: #ffffff !default;
 $rg-content-text-color: #000000 !default;
 $cell-text-color: #000000 !default;
 
-$dropdown-focused-item-bg-color: lighten(
-  $color: $primary-color,
-  $amount: 35,
-) !default;
+$dropdown-focused-item-bg-color: color.scale($primary-color, $lightness: 92.96875%) !default;
 $dropdown-menu-bg-color: #ffffff !default;
 
 // SHADOWS
@@ -41,4 +40,4 @@ $opacity-20: 0.2 !default;
 $opacity-15: 0.15 !default;
 $opacity-10: 0.1 !default;
 $opacity-06: 0.06 !default;
-$opacity-01: 0.01 !default;
+$opacity-01: 0.01 !default;

src/main.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .rg-copy-container[contenteditable] {
     -webkit-user-select: text;
     user-select: text;
@@ -195,7 +197,7 @@
             cursor: pointer;
 
             &:hover {
-                background-color: darken($main-bg-color, 5);
+                background-color: color.scale($main-bg-color, $lightness: -5%);
             }
         }
     }