Refactor SCSS variables to use `color.adjust` for improved color manipulation (#2068)

* Refactor dark mode SCSS variables to use color.adjust for improved color manipulation

* Refactor dark mode SCSS variables to remove unnecessary color space parameter for cleaner code

* Update sass dependency to version 1.78.0

* Create sour-dragons-eat.md

.changeset/sour-dragons-eat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor SCSS variables to use `color.adjust` for improved color manipulation

package.json

@@ -179,7 +179,7 @@
     "rollup": "2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "1.71.1",
+    "sass": "1.78.0",
     "star-rating.js": "^4.3.1",
     "tinymce": "^7.6.0",
     "tom-select": "^2.4.1",

pnpm-lock.yaml

@@ -164,8 +164,8 @@ devDependencies:
     specifier: ^3.2.1
     version: 3.2.1([email protected])
   sass:
-    specifier: 1.71.1
-    version: 1.71.1
+    specifier: 1.78.0
+    version: 1.78.0
   star-rating.js:
     specifier: ^4.3.1
     version: 4.3.1
@@ -7694,8 +7694,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
-  /[email protected]1.1:
-    resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
+  /[email protected]8.0:
+    resolution: {integrity: sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:

src/scss/_variables-dark.scss

@@ -1,12 +1,14 @@
+@use "sass:color";
+
 //
 // Dark mode
 //
-$darken-dark: darken($dark, 2%) !default;
-$lighten-dark: lighten($dark, 2%) !default;
-$border-color-dark: lighten($dark, 8%) !default;
+$darken-dark: color.adjust($dark, $lightness: -2%) !default;
+$lighten-dark: color.adjust($dark, $lightness: 2%) !default;
+$border-color-dark: color.adjust($dark, $lightness: 8%) !default;
 $border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
-$border-dark-color-dark: lighten($dark, 4%) !default;
-$border-active-color-dark: lighten($dark, 12%) !default;
+$border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
+$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 
 //new bootsrap variables
 $body-color-dark: $gray-200 !default;

src/scss/layout/_dark.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // stylelint-disable declaration-no-important
 
 body {
@@ -40,7 +42,7 @@ body {
     --#{$prefix}bg-surface-secondary: #{$lighten-dark};
     --#{$prefix}bg-surface-tertiary: #{$darken-dark};
 
-    --#{$prefix}link-color: #{lighten($primary, 8%)};
+    --#{$prefix}link-color: #{color.adjust($primary, $lightness: 8%)};
     --#{$prefix}link-hover-color: #{$primary};
 
     --#{$prefix}active-bg: #{$lighten-dark};

src/scss/ui/_buttons.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 //
 // Button
 //
@@ -51,7 +53,7 @@
 }
 
 .btn-link {
-  color: #{lighten($primary, 5%)};
+  color: #{color.adjust($primary, $lightness: 5%)};
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;