chore: fix some sass deprecations

Author: ludovicm67

packages/yasgui/src/TabElements.scss

@@ -1,10 +1,11 @@
+@use "sass:color";
 $minTabHeight: 35px;
 .yasgui {
   .tabsList {
     .sortable-placeholder {
       min-width: 100px;
       min-height: $minTabHeight;
-      border: 2px dotted lighten(#555, 20);
+      border: 2px dotted color.adjust(#555, $lightness: 20%);
     }
     display: flex;
     flex-wrap: wrap;
@@ -39,11 +40,11 @@ $minTabHeight: 35px;
     .tab {
       position: relative;
       $activeColor: #337ab7;
-      $hoverColor: lighten($activeColor, 30);
+      $hoverColor: color.adjust($activeColor, $lightness: 30%);
 
       .loader {
         display: none;
-        background-color: lighten(#555, 50);
+        background-color: color.adjust(#555, $lightness: 50%);
         height: 2px;
         position: absolute;
         bottom: 0;
@@ -99,7 +100,7 @@ $minTabHeight: 35px;
       }
       a {
         font-weight: 600;
-        color: lighten(#555, 20);
+        color: color.adjust(#555, $lightness: 20%);
         font-size: 15px;
         line-height: 1.5rem;
         font-weight: 500;

packages/yasr/src/main.scss

@@ -1,4 +1,4 @@
-@import "./scss/variables.scss";
+@use "scss/variables.scss";
 .yasr {
   .yasr_btn {
     border: none;

packages/yasr/src/scss/global.scss

@@ -1,7 +1,7 @@
-@import "./variables.scss";
+@use "variables.scss";
 /**need to reset this: the modal-dialog class conflicts with bootstrap**/
 .modal-dialog.google-visualization-charteditor-dialog {
-  z-index: $zIndex-global;
+  z-index: variables.$zIndex-global;
   width: auto;
   margin: inherit;
   .charts-flat-menu-button {