From c870c65ccb199c40c692b62fb18f3bb6dcdda89f Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Sun, 6 Oct 2024 21:55:31 +0200
Subject: [PATCH]  fix: replace deprecated darken/lighten scss functions (#585)

---
 src/sass/_asciidoc.scss   |  4 ++--
 src/sass/_base.scss       |  2 +-
 src/sass/_color_mode.scss | 40 ++++++++++++++++++---------------------
 src/sass/_defaults.scss   |  6 ++++--
 src/sass/_mobile.scss     |  4 ++--
 src/sass/_shortcodes.scss | 12 ++++++------
 src/sass/main.scss        |  1 +
 src/sass/mobile.scss      |  2 ++
 src/sass/print.scss       |  2 ++
 9 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/sass/_asciidoc.scss b/src/sass/_asciidoc.scss
index e4e73a05..38475089 100644
--- a/src/sass/_asciidoc.scss
+++ b/src/sass/_asciidoc.scss
@@ -2,7 +2,7 @@
   @each $name, $color in $hint-colors {
     &.#{$name} {
       border-left-color: $color;
-      background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
+      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
       color: $body-font-color;
     }
   }
@@ -28,7 +28,7 @@
       padding: $padding-4 $padding-16 !important;
 
       &:first-child {
-        background-color: scale-color($gray-600, $alpha: -95%);
+        background-color: color.scale($gray-600, $alpha: -95%);
         font-weight: bold;
 
         &.icon {
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index c79dafcc..751a2420 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -262,7 +262,7 @@ svg.gblog-icon {
     &:hover,
     &.is-active,
     &:visited:hover {
-      background: lighten($second-color, 10%);
+      background: color.scale($second-color, $lightness: 10%);
     }
 
     &:visited {
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index 7d784114..4a730301 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -7,7 +7,7 @@
 
   --mark-color: #{$mark-color};
 
-  --button-background: #{lighten($main-color, 2)};
+  --button-background: #{color.scale($main-color, $lightness: 15%)};
   --button-border-color: #{$main-color};
 
   --link-color: #{$link-color};
@@ -20,7 +20,7 @@
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
 
-  --control-icons: #{lighten($body-font-color, 50)};
+  --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
 
   --footer-background: #{$second-color};
   --footer-font-color: #{$white};
@@ -45,11 +45,11 @@
   --header-font-color: #{$white};
 
   --body-background: #{$body-background-dark};
-  --body-font-color: #{lighten($body-background-dark, 60)};
+  --body-font-color: #{color.scale($body-background-dark, $lightness: 70%)};
 
   --mark-color: #{$mark-color};
 
-  --button-background: #{lighten($main-color, 2)};
+  --button-background: #{color.scale($main-color, $lightness: 15%)};
   --button-border-color: #{$main-color};
 
   --link-color: #{$link-color-dark};
@@ -58,15 +58,11 @@
   --hint-link-color: #{$link-color};
   --hint-link-color-visited: #{$link-color-visited};
 
-  --code-copy-font-color: #{lighten($body-font-color, 48)};
-  --code-copy-border-color: #{lighten($body-font-color, 32)};
-  --code-copy-success-color: #{map.get($hint-colors, "ok")};
+  --accent-color-dark: #{color.scale($body-background-dark, $lightness: -60%)};
+  --accent-color: #{color.scale($body-background-dark, $lightness: -30%)};
+  --accent-color-lite: #{color.scale($body-background-dark, $lightness: -15%)};
 
-  --accent-color-dark: #{darken($body-background-dark, 8)};
-  --accent-color: #{darken($body-background-dark, 4)};
-  --accent-color-lite: #{darken($body-background-dark, 2)};
-
-  --control-icons: #{lighten($body-font-color, 50)};
+  --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
 
   --footer-background: #{$second-color};
   --footer-font-color: #{$white};
@@ -106,7 +102,7 @@
 
     .gblog-hint__title,
     .admonitionblock table td:first-child {
-      background-color: scale-color($gray-600, $alpha: -85%);
+      background-color: color.scale($gray-600, $alpha: -85%);
     }
   }
 }
@@ -116,14 +112,14 @@
 
   & {
     --code-background: #{$code-background-dark};
-    --code-accent-color: #{darken($code-background-dark, 4)};
-    --code-accent-color-lite: #{darken($code-background-dark, 2)};
+    --code-accent-color: #{color.scale($code-background-dark, $lightness: -30%)};
+    --code-accent-color-lite: #{color.scale($code-background-dark, $lightness: -15%)};
     --code-font-color: #{$code-font-color-dark};
 
     --code-copy-background: #{$code-background-dark};
-    --code-copy-font-color: #{darken($code-font-color-dark, 15)};
-    --code-copy-border-color: #{darken($code-font-color-dark, 20)};
-    --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
+    --code-copy-font-color: #{color.scale($code-font-color-dark, $lightness: -15%)};
+    --code-copy-border-color: #{color.scale($code-font-color-dark, $lightness: -20%)};
+    --code-copy-success-color: #{color.scale(map.get($hint-colors, "ok"), $alpha: -55%)};
   }
 }
 
@@ -132,13 +128,13 @@
 
   & {
     --code-background: #{$code-background};
-    --code-accent-color: #{darken($code-background, 6)};
-    --code-accent-color-lite: #{darken($code-background, 2)};
+    --code-accent-color: #{color.scale($code-background, $lightness: -45%)};
+    --code-accent-color-lite: #{color.scale($code-background, $lightness: -15%)};
     --code-font-color: #{$code-font-color};
 
     --code-copy-background: #{$code-background};
-    --code-copy-font-color: #{lighten($code-font-color, 15)};
-    --code-copy-border-color: #{lighten($code-font-color, 20)};
+    --code-copy-font-color: #{color.scale($code-font-color, $lightness: 20%)};
+    --code-copy-border-color: #{color.scale($code-font-color, $lightness: 40%)};
     --code-copy-success-color: #{map.get($hint-colors, "ok")};
   }
 }
diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss
index a0f6d1d1..a7e817cc 100644
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Used in layout
 $padding-2: 0.125rem !default;
 $padding-4: 0.25rem !default;
@@ -66,8 +68,8 @@ $body-font-color-dark: $gray-100 !default;
 $link-color-dark: rgba(110, 168, 212, 1) !default;
 $link-color-visited-dark: rgba(186, 142, 240) !default;
 
-$code-background: lighten($gray-200, 4) !default;
-$code-background-dark: darken($body-background-dark, 3) !default;
+$code-background: $gray-100 !default;
+$code-background-dark: color.scale($body-background-dark, $lightness: -15%) !default;
 
 $header-font-family: "Metropolis", sans-serif !default;
 $header-height: 3.5rem !default;
diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
index a887d3ed..d0e6d8a7 100644
--- a/src/sass/_mobile.scss
+++ b/src/sass/_mobile.scss
@@ -23,7 +23,7 @@
     }
 
     &__list {
-      background: lighten($second-color, 10%);
+      background: color.scale($second-color, $lightness: 10%);
       flex-direction: column;
       justify-content: center;
       max-height: 0;
@@ -42,7 +42,7 @@
       &:hover,
       &:visited:hover,
       &.is-active {
-        background: lighten($second-color, 5%);
+        background: color.scale($second-color, $lightness: 5%);
       }
     }
 
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index 41a898cc..7987aeba 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -187,13 +187,13 @@
   @each $name, $color in $hint-colors {
     &.#{$name} {
       border-left-color: $color;
-      background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
+      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
       color: $body-font-color;
       padding: 0;
 
       code,
       pre {
-        background-color: scale-color($color, $lightness: 80%, $saturation: -75%);
+        background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
         color: $code-font-color;
       }
     }
@@ -201,9 +201,9 @@
 
   &__title {
     padding: $padding-4 $padding-16;
-    background-color: scale-color($gray-600, $alpha: -95%);
+    background-color: color.scale($gray-600, $alpha: -95%);
     font-weight: bold;
-    color: scale-color($body-font-color, $alpha: -15%);
+    color: color.scale($body-font-color, $alpha: -15%);
 
     i.fa::after {
       content: attr(title);
@@ -273,8 +273,8 @@
 
   @each $name, $color in $hint-colors {
     &__tag.#{$name} {
-      border-color: scale-color($color, $lightness: 90%, $saturation: -30%);
-      background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
+      border-color: color.scale($color, $lightness: 90%, $saturation: -30%);
+      background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
     }
   }
 
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 9259c2c1..f03c0988 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:meta";
+@use "sass:color";
 
 @import "_defaults";
 @import "_color_mode";
diff --git a/src/sass/mobile.scss b/src/sass/mobile.scss
index 0d891eef..449c4c78 100644
--- a/src/sass/mobile.scss
+++ b/src/sass/mobile.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @import "_defaults";
 
 @import "_mobile";
diff --git a/src/sass/print.scss b/src/sass/print.scss
index b00823a7..f9dca75f 100644
--- a/src/sass/print.scss
+++ b/src/sass/print.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @import "_defaults";
 
 @import "_print";