fix(styling): SASS deprecated lighten and darken methods

- another deprecation from SASS which is again displaying a load of console warnings - more info on SASS website: https://sass-lang.com/documentation/breaking-changes/color-functions/
ghiscoding · Sep 21, 2024 · a66506f · a66506f
1 parent b7c2061
commit a66506f
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 111 deletions.
diff --git a/docs/grid-functionalities/grouping-aggregators.md b/docs/grid-functionalities/grouping-aggregators.md
@@ -219,7 +219,7 @@ To "Clear all Grouping", "Collapse all Groups" and "Expand all Groups", we can s
 ### Styling (change icons)
 The current icons are chevron (right/down), however if you wish to use +/- icons. You can simply update the SASS variables to use whichever SVG icon paths. The SASS variables you can change are
 ```css
-$slick-icon-group-color:                    $primary-color;
+$slick-icon-group-color:                    $slick-primary-color;
 $slick-icon-group-expanded-svg-path:        "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M11,7H13V11H17V13H13V17H11V13H7V11H11V7Z";
 $slick-icon-group-collapsed-svg-path:       "M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z";
 $slick-icon-group-font-size:                20px;

diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -28,15 +28,15 @@
     "bulma": "^1.0.2",
     "dompurify": "^3.1.6",
     "fetch-jsonp": "^1.3.0",
-    "multiple-select-vanilla": "^3.3.3",
+    "multiple-select-vanilla": "^3.3.4",
     "rxjs": "^7.8.1",
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
     "@types/fnando__sparkline": "^0.3.7",
     "@types/node": "^22.5.1",
     "@types/whatwg-fetch": "^0.0.33",
-    "sass": "^1.77.8",
+    "sass": "^1.79.3",
     "typescript": "^5.5.4",
     "vite": "^5.4.2"
   }

diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -1,3 +1,5 @@
+@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';
@@ -6,6 +8,7 @@
   body.material-theme,
   body.material-theme .icon-checkbox-container {
     $dark-primary-color: #66bb6a;
+    $primary-color: #009530;
     $slick-primary-color: #009530;
     --text-color-primary: #009530;
     --slick-primary-color: #009530;
@@ -18,16 +21,18 @@
     --slick-cell-box-shadow: none;
     --slick-cell-active-box-shadow: inset 0 0 0 1px #aaaaaa;
     --slick-form-control-focus-border-color: #00c840;
-    --slick-form-control-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(53, 121, 154, 0.3);
+    --slick-form-control-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3);
     --slick-editor-focus-border-color: #00b93c;
     --slick-editor-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(#00a033, .3);
     --slick-multiselect-input-focus-border-color: #00c840;
     --slick-focus-color: #00c840;
     --slick-input-focus-border-color: #00c840;
     --slick-text-editor-focus-border-color: #00c840;
     --slick-slider-editor-focus-border-color: #00c840;
-    --slick-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(53, 121, 154, 0.3);
-    --slick-multiselect-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(53, 121, 154, 0.3);
+    --slick-slider-filter-focus-border-color: #00c840;
+    --input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3);
+    --slick-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3);
+    --slick-multiselect-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3);
     --slick-header-filter-row-border-bottom: 1px solid #d0d0d0;
     --slick-container-border-right: 1px solid #ccc;
     --slick-container-border-top: 1px solid #ccc;
@@ -59,6 +64,8 @@
     --slick-icon-group-color: var(--slick-primary-color);
     --slick-draggable-group-toggle-all-icon-color: var(--slick-primary-color);
     --slick-pagination-icon-color: #009530;
+    --slick-slider-filter-filled-track-color: #9ac49c;
+    --slick-slider-filter-focus-box-shadow: var(--slick-input-focus-box-shadow);
     --slick-slider-filter-thumb-border: 2px solid rgba(0, 149, 48, .68);
     --slick-slider-filter-thumb-active-bg-color: #fff;
     --slick-slider-filter-thumb-active-color: rgba(#02bf3e, .88);
@@ -68,7 +75,6 @@
     --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;
-    --slick-slider-filter-filled-track-color: #9ac49c;
     --ms-ok-button-text-color: #009530;
     --ms-select-all-text-color: #007c28;
     --slick-multiselect-icon-radio-border: none;
@@ -100,6 +106,9 @@
         font-weight: normal;
         border: 1px solid #55B876;
         box-shadow: none;
+        &.focus, &:focus {
+          box-shadow: var(--slick-input-focus-box-shadow);
+        }
       }
       .search-filter.filled .input-group-addon select {
         border-right: 0px;
@@ -158,9 +167,9 @@
       --slick-menu-item-hover-border: 1px solid #5a5a5a;
       --slick-submenu-box-shadow: none;
       --ms-checkbox-color: #66bb6a;
-      --ms-checkbox-hover-color: #{lighten(#49a54e, 13%)};
+      --ms-checkbox-hover-color: #{color.adjust(#49a54e, $lightness: 13%)};
       --ms-ok-button-text-color: #66bb6a;
-      --ms-ok-button-text-hover-color: #{lighten(#66bb6a, 5%)};
+      --ms-ok-button-text-hover-color: #{color.adjust(#66bb6a, $lightness: 5%)};
 
       .slick-headerrow {
         .search-filter.filled .input-group-addon.slider-value,

diff --git a/packages/common/package.json b/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.3",
+    "multiple-select-vanilla": "^3.3.4",
     "sortablejs": "^1.15.3",
     "un-flatten-tree": "^2.0.12",
     "vanilla-calendar-pro": "^2.9.10"
@@ -88,7 +88,7 @@
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "sass": "^1.78.0"
+    "sass": "^1.79.3"
   },
   "engines": {
     "node": "^18.0.0 || >=20.0.0"

diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -1,3 +1,5 @@
+@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)
@@ -24,7 +26,7 @@ $slick-header-text-color:                                   rgba(0, 0, 0, 0.87)
 $slick-sorting-header-color:                                rgba(0, 0, 0, 0.87) !default;
 $slick-header-border-bottom:                                transparent !default;
 $slick-header-filter-row-border-bottom:                     1px solid #d0d0d0 !default;
-$slick-header-resizable-hover:                              2px solid lighten(#48c774, 15%) !default;
+$slick-header-resizable-hover:                              2px solid #{color.adjust(#48c774, $lightness: 15%)} !default;
 $slick-header-resizable-hover-border-bottom:                $slick-header-resizable-hover !default;
 $slick-header-resizable-hover-border-left:                  $slick-header-resizable-hover !default;
 $slick-header-resizable-hover-border-right:                 $slick-header-resizable-hover !default;
@@ -72,8 +74,8 @@ $slick-header-button-width:                                 18px !default;
 $slick-header-button-margin:                                -4px 0 100px 0 !default;
 $slick-header-menu-button-icon-color:                       $slick-icon-color !default;
 $slick-header-menu-display:                                 inline-block !default;
-$slick-compound-filter-operator-select-border:              1px solid #{lighten($slick-primary-color, 10%)} !default;
-$slick-compound-filter-text-color:                          darken($slick-primary-color, 20%) !default;
+$slick-compound-filter-operator-select-border:              1px solid #{color.adjust($slick-primary-color, $lightness: 10%)} !default;
+$slick-compound-filter-text-color:                          color.adjust($slick-primary-color, $lightness: -20%) !default;
 $slick-preheader-border-right:                              1px solid #e2e2e2 !default;
 $slick-row-move-plugin-cursor:                              grab !default;
 $slick-row-move-plugin-icon-color:                          $slick-icon-color !default;
@@ -124,7 +126,7 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-icon-sort-color:                        #66bb6a;
   --slick-multiselect-icon-radio-color:           #66bb6a;
   --ms-checkbox-color:                            #66bb6a;
-  --ms-checkbox-hover-color:                      #{lighten(#49a54e, 13%)};
+  --ms-checkbox-hover-color:                      #{color.adjust(#49a54e, $lightness: 13%)};
   --ms-ok-button-text-color:                      #66bb6a;
-  --ms-ok-button-text-hover-color:                #{lighten(#66bb6a, 5%)};
+  --ms-ok-button-text-hover-color:                #{color.adjust(#66bb6a, $lightness: 5%)};
 }
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /**
  * This is a bare version of "slickgrid-theme-salesforce.scss",
  * A few files were removed and aren't included in this styling theme (while they are in original theme)
@@ -69,7 +71,7 @@ $slick-menu-title-font-size:                                  17px !default;
 $slick-icon-group-color:                                      $slick-primary-color !default;
 $slick-filled-filter-color:                                   $slick-primary-color-dark !default;
 $slick-filled-filter-border:                                  1px solid #{$slick-primary-color} !default;
-$slick-filled-filter-box-shadow:                              inset 0 0 0 1px #{lighten($slick-primary-color, 30%)} !default;
+$slick-filled-filter-box-shadow:                              inset 0 0 0 1px #{color.adjust($slick-primary-color, $lightness: 30%)} !default;
 $slick-filled-filter-font-weight:                             bold !default;
 $slick-draggable-group-drop-border-top:                       0px !default;
 $slick-draggable-group-drop-width:                            100% !default;
@@ -115,7 +117,7 @@ $slick-editor-modal-title-text-align:                         center !default;
 $slick-large-editor-button-border-radius:                     3px !default;
 $slick-slider-filter-runnable-track-bgcolor:                  #ECEBEA !default;
 $slick-row-selected-color:                                    #ECEBEA !default;
-$slick-row-highlight-background-color:                        lighten($slick-highlight-color, 50%) !default;
+$slick-row-highlight-background-color:                        color.adjust($slick-highlight-color, $lightness: 50%) !default;
 $slick-row-mouse-hover-color:                                 #f3f2f2 !default;
 $slick-row-mouse-hover-box-shadow:                            0 0 0 2px #dddbda !default;
 $slick-pagination-icon-color:                                 $slick-primary-color !default;