feat: switch to SASS @use and remove any @import to fix deprecations

docs/getting-started/installation-vanilla.md

@@ -70,7 +70,7 @@ export class GridBasicComponent {
 ```
 
 ### 3. CSS / SASS Styles
-Load your prefered theme, choose between Bootstrap (default), Material or Salesforce themes. You can also customize them to your taste (either by using SASS or CSS variables). 
+Load your prefered theme, choose between Bootstrap (default), Material or Salesforce themes. You can also customize them to your taste (either by using SASS or CSS variables).
 
 #### CSS
 Default compiled `css`, you can load it through HTML or import it in your JS code depending on your project.
@@ -87,11 +87,10 @@ You could also compile the SASS files with your own customization, for that simp
 
 ```scss
 /* for example, let's change the mouse hover color */
-$cell-odd-background-color: lightyellow;
-$row-mouse-hover-color: lightgreen;
-
-/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $cell-odd-background-color: lightyellow,
+  $row-mouse-hover-color: lightgreen
+);
 ```
 
 ### 4. Explore the Documentation
@@ -104,7 +103,7 @@ The last step is really to explore all the pages that are available on the docum
 ... and much more, just explorer the Documentation through the table of content (on your left)
 
 ### 5. Get Started
-The best way to get started is to clone either the [Slickgrid-Universal Vite Demo](https://github.com/ghiscoding/slickgrid-universal-vite-demo) or [Slickgrid-Universal WebPack Demo](https://github.com/ghiscoding/slickgrid-universal-webpack-demo). 
+The best way to get started is to clone either the [Slickgrid-Universal Vite Demo](https://github.com/ghiscoding/slickgrid-universal-vite-demo) or [Slickgrid-Universal WebPack Demo](https://github.com/ghiscoding/slickgrid-universal-webpack-demo).
 
 ### 6. CSP Compliance
 The project supports Content Security Policy (CSP) as long as you provide an optional `sanitizer` in your grid options (we recommend DOMPurify). Review the [CSP Compliance](../developer-guides/csp-compliance.md) documentation for more info.

docs/styling/styling.md

@@ -26,26 +26,32 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
 ##### with CSS
 ```scss
 /* style.css */
-@import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
 
 // or other Themes
-// @import '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
-// @import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
+@use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
+@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
 ```
 
 ##### with SASS
 ```scss
 /* change any SASS variables before loading the theme */
-$slick-primary-color: green;
-$slick-cell-odd-background-color: lightyellow;
-$slick-row-mouse-hover-color: lightgreen;
-
 /* style.scss */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-primary-color: green,
+  $slick-cell-odd-background-color: lightyellow,
+  $slick-row-mouse-hover-color: lightgreen
+);
 
 // or other Themes
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+
+// -- 2. or with legacy `@import
+$slick-primary-color: red;
+$slick-cell-odd-background-color: pink;
+$slick-row-mouse-hover-color: lightpink;
+@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 ```
 
 ### Using CSS Variables _(instead of SASS)_
@@ -69,14 +75,13 @@ You could use Custom SVGs and create your own Theme and/or a different set of SV
 
 ##### with SVG
 ```scss
-$slick-primary-color: blue;
-$slick-icon-group-color: $slick-primary-color;
-$slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
-$slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
-$slick-icon-group-font-size:   13px;
-
-// then on the last line, import the Theme that you wish to override
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-primary-color: blue,
+  $slick-icon-group-color: $slick-primary-color,
+  $slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
+  $slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
+  $slick-icon-group-font-size:   13px
+);
 ```
 
 > **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded)

examples/vite-demo-vanilla-bundle/package.json

@@ -28,7 +28,7 @@
     "bulma": "^1.0.2",
     "dompurify": "^3.1.6",
     "fetch-jsonp": "^1.3.0",
-    "multiple-select-vanilla": "^3.3.4",
+    "multiple-select-vanilla": "^3.4.1",
     "rxjs": "^7.8.1",
     "whatwg-fetch": "^3.6.20"
   },

examples/vite-demo-vanilla-bundle/src/bulma.scss

@@ -1,15 +1,15 @@
 @use 'bulma/bulma';
 
 [data-theme=light], .theme-light {
-  --bulma-body-color: black;
+  --bulma-body-color: black !important;
   --bulma-body-background-color: white !important;
   .button {
     // --bulma-scheme-main-l: 99%;
     border-color: #acacac;
   }
 }
 [data-theme=dark], .theme-dark {
-  --bulma-body-color: white;
+  --bulma-body-color: white !important;
   --bulma-body-background-color: #33393e !important;
   .button {
     border-color: #585858;

examples/vite-demo-vanilla-bundle/src/examples/example01.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 
 .red {
   color: #ff0000;

examples/vite-demo-vanilla-bundle/src/examples/example04.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 .orange {
   color: orange;
 }

examples/vite-demo-vanilla-bundle/src/examples/example05.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 
 .grid5 {
   --slick-cell-display: inline-flex;

examples/vite-demo-vanilla-bundle/src/examples/example06.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 
 .grid6 {
   .slick-cell {

examples/vite-demo-vanilla-bundle/src/examples/example10.scss

@@ -1 +1 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';

examples/vite-demo-vanilla-bundle/src/examples/example11.scss

@@ -1,6 +1,6 @@
-$slick-autocomplete-max-height: 250px;
-
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss' with (
+//   $slick-autocomplete-max-height: 250px
+// );
 
 .example11-body {
   .dropdown-item {

examples/vite-demo-vanilla-bundle/src/examples/example12.scss

@@ -1,3 +1,3 @@
-$slick-autocomplete-max-height: 250px !default;
-
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss' with (
+//   $slick-autocomplete-max-height: 250px
+// );

examples/vite-demo-vanilla-bundle/src/examples/example14.scss

@@ -1,6 +1,6 @@
-$slick-autocomplete-max-height: 250px;
-
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss' with (
+//   $slick-autocomplete-max-height: 250px,
+// );
 
 .salmon {
   color: lightsalmon;

examples/vite-demo-vanilla-bundle/src/examples/example15.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 
 .hidden {
   display: none;

examples/vite-demo-vanilla-bundle/src/examples/example16.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
 
 // --
 // Custom Tooltips CSS Variables (or SASS equivalent)

examples/vite-demo-vanilla-bundle/src/examples/example18.scss

@@ -1,4 +1,4 @@
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
 
 $sparkline-color: #00b78d;
 // $sparkline-color: #573585;

examples/vite-demo-vanilla-bundle/src/material-styles.scss

@@ -1,8 +1,7 @@
 @use 'sass:color';
 
-/* make sure to add the @import the SlickGrid Material Theme AFTER the variables changes */
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material-with-font.scss';
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material-with-font.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 
 :root {
   body.material-theme,
@@ -75,14 +74,17 @@
     --slick-header-resizable-hover-border-left: 2px solid #83d9a0;
     --slick-header-resizable-hover-border-top: 2px solid #83d9a0;
     --slick-header-resizable-hover-border-right: 2px solid #83d9a0;
-    --ms-ok-button-text-color: #009530;
-    --ms-select-all-text-color: #007c28;
     --slick-multiselect-icon-radio-border: none;
     --slick-multiselect-ok-button-text-color: #009530;
-    --slick-multiselect-ok-button-text-hover-color: #00a736;
+    --slick-multiselect-ok-button-text-hover-color: #{color.adjust(#009530, $lightness: -5%)};
     --slick-multiselect-select-all-text-color: #007c28;
-    --ms-checkbox-color: var(--slick-primary-color);
     --slick-multiselect-icon-color: var(--slick-primary-color);
+    --slick-multiselect-input-focus-border-color: #51d77c;
+    --ms-ok-button-text-color: #009530;
+    --ms-select-all-text-color: #007c28;
+    --ms-checkbox-color: var(--slick-primary-color);
+    --ms-choice-focus-box-shadow: 0 0 0 1.5px rgba(#66bb6a,.55);
+    --ms-choice-focus-border-color: #86d56c;
 
     .icon-checkbox-container {
       --slick-checkbox-icon-container-bg-color: transparent;
@@ -166,6 +168,10 @@
       --slick-menu-item-hover-color: #363b40;
       --slick-menu-item-hover-border: 1px solid #5a5a5a;
       --slick-submenu-box-shadow: none;
+      --slick-multiselect-checkbox-color: #66bb6a;
+      --slick-multiselect-checkbox-hover-color: #{color.adjust(#49a54e, $lightness: 13%)};
+      --slick-multiselect-ok-button-text-color: #66bb6a;
+      --slick-multiselect-ok-button-text-hover-color: #{color.adjust(#66bb6a, $lightness: 5%)};
       --ms-checkbox-color: #66bb6a;
       --ms-checkbox-hover-color: #{color.adjust(#49a54e, $lightness: 13%)};
       --ms-ok-button-text-color: #66bb6a;

examples/vite-demo-vanilla-bundle/src/styles.scss

@@ -1,13 +1,16 @@
-$slick-primary-color:#006DCC;
-$slick-link-color: #006DCC;
+$link-color: #006DCC;
 
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
 
 /** or SalesForce Theme */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss' with (
+  $slick-primary-color:           #006DCC,
+  $slick-link-color:              $link-color,
+  $slick-checkbox-opacity-hover:  0.35,
+);
 
-@import './bulma.scss';
+@use './bulma.scss';
 
 :root {
   .ms-dark-mode,
@@ -56,7 +59,7 @@ body {
 
 .fake-hyperlink {
     cursor: pointer;
-    color: $slick-link-color;
+    color: $link-color;
     &:hover {
       text-decoration: underline;
     }

packages/common/package.json

@@ -75,7 +75,7 @@
     "@types/trusted-types": "^2.0.7",
     "autocompleter": "^9.3.2",
     "dequal": "^2.0.3",
-    "multiple-select-vanilla": "^3.3.7",
+    "multiple-select-vanilla": "^3.4.1",
     "sortablejs": "^1.15.3",
     "un-flatten-tree": "^2.0.12",
     "vanilla-calendar-pro": "^2.9.10"

packages/common/src/styles/_variables-theme-material.scss

@@ -1,11 +1,13 @@
-@use 'sass:color';
-
 /**
  * This is a bare version of "slickgrid-theme-material.scss",
  * A few files were removed and aren't included in this styling theme (while they are in original theme)
  * - (colors, extra-styling, slickgrid-icons, slickgrid-icons-svg-utils, slick-without-bootstrap-min-styling)
  */
 
+@use 'sass:color';
+
+@forward './variables';
+
 $slick-primary-color:                                       #009530 !default;
 $slick-highlight-color:                                     #48c774 !default;
 $slick-font-family:                                         Roboto, "Helvetica Neue", sans-serif !default;