From 875cafa4742002004506b387968df04c1440b519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Sat, 18 Jan 2025 14:33:14 +0100
Subject: [PATCH] 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 |  5 +++++
 package.json                   |  2 +-
 pnpm-lock.yaml                 |  8 ++++----
 src/scss/_variables-dark.scss  | 12 +++++++-----
 src/scss/layout/_dark.scss     |  4 +++-
 src/scss/ui/_buttons.scss      |  4 +++-
 6 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/sour-dragons-eat.md

diff --git a/.changeset/sour-dragons-eat.md b/.changeset/sour-dragons-eat.md
new file mode 100644
index 000000000..f1fc8e487
--- /dev/null
+++ b/.changeset/sour-dragons-eat.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor SCSS variables to use `color.adjust` for improved color manipulation
diff --git a/package.json b/package.json
index 5b97f078c..208433939 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 134b14355..5dd3d1623 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,8 +164,8 @@ devDependencies:
     specifier: ^3.2.1
     version: 3.2.1(rollup@2.79.2)
   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
 
-  /sass@1.71.1:
-    resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
+  /sass@1.78.0:
+    resolution: {integrity: sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss
index 367a2444b..9ebd8fbbb 100644
--- a/src/scss/_variables-dark.scss
+++ b/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;
diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
index d3efcbc58..0fc102053 100644
--- a/src/scss/layout/_dark.scss
+++ b/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};
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index 003b11d29..10b909b63 100644
--- a/src/scss/ui/_buttons.scss
+++ b/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;