chore(deps): upgrade to Aurelia-Slickgrid 8.10.0 with SASS @use

webpack-bs5-demo-with-locales/package.json

@@ -26,28 +26,28 @@
     "@aurelia/router": "^2.0.0-beta.22",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/composite-editor-component": "^5.9.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.9.0",
-    "@slickgrid-universal/excel-export": "^5.9.0",
-    "@slickgrid-universal/graphql": "^5.9.0",
-    "@slickgrid-universal/odata": "^5.9.0",
-    "@slickgrid-universal/rxjs-observable": "^5.9.0",
-    "@slickgrid-universal/text-export": "^5.9.0",
+    "@slickgrid-universal/composite-editor-component": "^5.10.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.10.0",
+    "@slickgrid-universal/excel-export": "^5.10.0",
+    "@slickgrid-universal/graphql": "^5.10.0",
+    "@slickgrid-universal/odata": "^5.10.0",
+    "@slickgrid-universal/rxjs-observable": "^5.10.0",
+    "@slickgrid-universal/text-export": "^5.10.0",
     "aurelia": "^2.0.0-beta.22",
-    "aurelia-slickgrid": "^8.9.0",
+    "aurelia-slickgrid": "^8.10.0",
     "bootstrap": "^5.3.3",
     "dompurify": "^3.1.7",
     "fetch-jsonp": "^1.3.0",
     "rxjs": "^7.8.1",
-    "tslib": "^2.8.0"
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
     "@aurelia/webpack-loader": "^2.0.0-beta.22",
-    "@faker-js/faker": "^9.0.3",
+    "@faker-js/faker": "^9.1.0",
     "@fnando/sparkline": "^0.3.10",
     "@types/bluebird": "^3.5.42",
     "@types/fnando__sparkline": "^0.3.7",
-    "@types/node": "^22.7.7",
+    "@types/node": "^22.8.6",
     "@types/webpack": "^5.28.5",
     "aurelia-polyfills": "^1.3.4",
     "autoprefixer": "^10.4.20",
@@ -56,29 +56,29 @@
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
-    "eslint": "^9.13.0",
-    "eslint-plugin-n": "^17.11.1",
+    "eslint": "^9.14.0",
+    "eslint-plugin-n": "^17.12.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "file-loader": "^6.2.0",
     "globals": "^15.11.0",
     "html-loader": "^5.1.0",
-    "html-webpack-plugin": "^5.6.2",
-    "mini-css-extract-plugin": "^2.9.1",
+    "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.2",
     "minimatch": "^9.0.5",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
     "promise-polyfill": "^8.3.0",
-    "sass": "^1.79.4",
-    "sass-loader": "^16.0.2",
+    "sass": "^1.80.6",
+    "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
     "through2": "^4.0.2",
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
-    "webpack": "^5.95.0",
+    "typescript-eslint": "^8.12.2",
+    "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",

webpack-bs5-demo-with-locales/src/examples/slickgrid/example25.scss

@@ -1,8 +1,7 @@
-$slick-preheader-font-size: 18px;
-$slick-preheader-border-right: 1px solid lightgrey;
-
-/* make sure to add the @import the SlickGrid Bootstrap 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 (
+  $slick-preheader-font-size: 18px,
+  $slick-preheader-border-right: 1px solid lightgrey
+);
 
 .alert {
   padding: 8px;

webpack-bs5-demo-with-locales/src/examples/slickgrid/example33.scss

@@ -1,7 +1,9 @@
 @use 'sass:color';
+$button-border-color: #ababab;
 
-$slick-button-border-color: #ababab !default;
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $slick-button-border-color: $button-border-color
+);
 
 // --
 // Custom Tooltips CSS Variables (or SASS equivalent)
@@ -26,12 +28,12 @@ $slick-button-border-color: #ababab !default;
 .button-style {
   cursor: pointer;
   background-color: white;
-  border: 1px solid #{$slick-button-border-color};
+  border: 1px solid #{$button-border-color};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: color.adjust($slick-button-border-color, $lightness: -10%);
+    border-color: color.adjust($button-border-color, $lightness: -10%);
   }
 }
 

webpack-bs5-demo-with-locales/src/examples/slickgrid/example34.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-material.lite.scss' with (...);
 
 $sparkline-color: #00b78d;
 // $sparkline-color: #573585;

webpack-bs5-demo-with-locales/src/examples/slickgrid/example8.scss

@@ -1,11 +1,10 @@
-$slick-header-menu-button-border-width:  0px 1px;
-$slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z";
-$slick-header-menu-button-icon-size:     16px;
-$slick-header-menu-button-padding:       10px 0 0 3px;
-$slick-sort-indicator-hint-opacity:      0;
-
-/* make sure to add the @import the SlickGrid Bootstrap 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 (
+  $slick-header-menu-button-border-width:  0px 1px,
+  $slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z",
+  $slick-header-menu-button-icon-size:     16px,
+  $slick-header-menu-button-padding:       10px 0 0 3px,
+  $slick-sort-indicator-hint-opacity:      0,
+);
 
 .blue {
   color: rgb(73, 73, 255);

webpack-bs5-demo-with-locales/src/examples/slickgrid/example9.scss

@@ -1,11 +1,11 @@
-$slick-column-picker-icon-checked-svg-path:    "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9";
-$slick-column-picker-icon-unchecked-svg-path:  "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
 $slickcolumn-picker-checkbox-opacity:          0.2;
 $slickcolumn-picker-checkbox-opacity-hover:    0.35;
-$slick-column-picker-icon-font-size:           16px;
 
-/* make sure to add the @import the SlickGrid Bootstrap 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 (
+  $slick-column-picker-icon-checked-svg-path:    "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9",
+  $slick-column-picker-icon-unchecked-svg-path:  "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z",
+  $slick-column-picker-icon-font-size:           16px
+);
 
 .blue {
   color: rgb(73, 73, 255);

webpack-bs5-demo-with-locales/src/styles.scss

@@ -1,12 +1,31 @@
 @use 'sass:color';
 
-$slick-input-focus-box-shadow: 0 0 0 0.25rem #0d6efd40;
-$slick-button-border-color: #ababab !default;
 $navbar-height: 56px;
 $side-menu-width: 250px;
+$button-border-color: #ababab;
+$primary-color: #0e6cfa;
 
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use 'bootstrap' with (
+  $primary: $primary-color
+);
+
+// -- 1. load with modern `@use`
+// @use '@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: $primary-color,
+  // $slick-input-focus-box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25),
+);
+
+// -- 2. load with legacy `@import`
+// $slick-primary-color: red;
+// $slick-link-color: red;
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+
+:root {
+  --ms-choice-border: var(--bs-border-width) solid var(--bs-border-color);
+//   --slick-button-style-bg-color: #fff;
+//   --slick-button-border-color: #c7c7c7;
+}
 
 .btn-group-xs > .btn, .btn-xs {
   padding  : 1px 5px;
@@ -143,12 +162,12 @@ outline: 0 none;
 .button-style {
   cursor: pointer;
   background-color: white;
-  border: 1px solid #{$slick-button-border-color};
+  border: 1px solid #{$button-border-color};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: color.adjust($slick-button-border-color, $lightness: -10%);
+    border-color: color.adjust($button-border-color, $lightness: -10%);
   }
 }
 
@@ -163,14 +182,14 @@ outline: 0 none;
 
 .button-style {
   cursor: pointer;
-  background-color: var(--slick-button-style-bg-color, $slick-button-style-bg-color);
-  border: 1px solid #{var(--slick-button-border-color, $slick-button-border-color)};
+  background-color: var(--slick-button-style-bg-color, #fff);
+  border: 1px solid #{var(--slick-button-border-color, $button-border-color)};
   border-radius: 2px;
   justify-content: center;
   text-align: center;
 
   &:hover {
-    border-color: color.adjust($slick-button-border-color, $lightness: -10%);
+    border-color: color.adjust($button-border-color, $lightness: -10%);
   }
 }