chore: Update sass and change colour syntax (videojs#8894)

mister-ben · web-flow · commit 55bb0fd33c18 · 2025-02-05T09:25:28.000-08:00
## Description Projects using newer versions of sass which have deprecated `lighten()` will get deprecation warnings. This updates sass, and switches to `color.adjust()`. This function is available since dart sass 1.23.0. Note this would increase the output CSS size, as it will output different colour syntax, .e.g. ``` < background-image: linear-gradient(-180deg, #fff 88%, rgb(114.9141509434, 132.7028301887, 159.3858490566) 100%); --- > background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%); ``` Closes videojs#8876 ## Requirements Checklist - [x] Feature implemented / Bug fixed - [ ] If necessary, more likely in a feature request than a bug fix - [x] Change has been verified in an actual browser (Chrome, Firefox, IE) - [x] Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab) - [x] Has no changes to JSDoc which cause `npm run docs:api` to error - [ ] Reviewed by Two Core Contributors
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -155,7 +155,7 @@
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-stub": "^1.2.0",
     "rollup-plugin-svg": "^2.0.0",
-    "sass": "^1.34.0",
+    "sass": "^1.79.3",
     "semver": "^5.7.0",
     "shelljs": "^0.8.5",
     "shx": "^0.3.2",
diff --git a/src/css/_private-variables.scss b/src/css/_private-variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Text, icons, hover states
 $primary-foreground-color: #fff !default;
 
@@ -6,7 +8,7 @@ $primary-background-color: #2B333F !default;
 $primary-background-transparency: 0.7 !default;
 
 // Hover states, slider backgrounds
-$secondary-background-color: lighten($primary-background-color, 33%) !default;
+$secondary-background-color: color.adjust($primary-background-color, $lightness: 33%, $space: hsl) !default;
 $secondary-background-transparency: 0.5 !default;
 
 // Avoiding helvetica: issue #376
