remove deprecated sass functions

jSherz · Nov 9, 2024 · e6abb64 · e6abb64
1 parent 8516752
commit e6abb64
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -1,6 +1,7 @@
 /**
  * Basic styling
  */
+@use "sass:color";
 @use "sass:list";
 
 * {
@@ -25,6 +26,6 @@ a {
     color: #30508E;
 
     &:hover {
-        color: lighten(#30508E, 20%);
+        color: color.adjust(#30508E, $lightness: 20%);
     }
 }
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 svg {
   width: 1em;
 }
@@ -25,18 +27,18 @@ svg {
     }
 
     &:hover {
-      color: lighten($brand-color, 60%);
+      color: color.adjust($brand-color, $lightness: 60%);
 
       svg path {
-        fill: lighten($brand-color, 60%);
+        fill: color.adjust($brand-color, $lightness: 60%);
       }
     }
 
     &:active {
-      color: lighten($brand-color, 40%);
+      color: color.adjust($brand-color, $lightness: 40%);
 
       svg path {
-        fill: lighten($brand-color, 40%);
+        fill: color.adjust($brand-color, $lightness: 40%);
       }
     }
   }
@@ -146,20 +148,20 @@ svg {
   }
 
   p {
-    color: lighten($text-color, 20%);
+    color: color.adjust($text-color, $lightness: 20%);
     word-break: break-all;
   }
 }
 
 #post-list-read-more {
   text-align: center;
-  color: lighten($text-color, 30%);
+  color: color.adjust($text-color, $lightness: 30%);
 
   a {
-    color: lighten(#30508E, 10%);
+    color: color.adjust(#30508E, $lightness: 10%);
 
     &:hover {
-      color: lighten(#30508E, 30%);
+      color: color.adjust(#30508E, $lightness: 30%);
     }
   }
 }
@@ -177,7 +179,7 @@ svg {
 
     &:hover {
       svg path {
-        fill: lighten(#30508E, 30%);
+        fill: color.adjust(#30508E, $lightness: 30%);
       }
     }
   }
@@ -186,7 +188,7 @@ svg {
     width: 0.8em;
 
     path {
-      fill: lighten(#30508E, 10%);
+      fill: color.adjust(#30508E, $lightness: 10%);
     }
   }
 
@@ -247,7 +249,7 @@ svg {
 
         &:hover {
           svg path {
-            fill: lighten(#30508E, 20%);
+            fill: color.adjust(#30508E, $lightness: 20%);
           }
         }
       }
@@ -317,7 +319,7 @@ footer {
   }
 
   p {
-    color: darken(white, 10%);
+    color: color.adjust(white, $lightness: -10%);
   }
 
   ul {
@@ -396,7 +398,7 @@ th {
   max-width: $content-width;
   margin: 1rem auto;
   background-color: #c7f2ff;
-  border: dashed 0.2rem darken(#c7f2ff, 20%);
+  border: dashed 0.2rem color.adjust(#c7f2ff, $lightness: -20%);
   padding: 0.5rem;
 
   p {

diff --git a/css/main.scss b/css/main.scss
@@ -3,6 +3,7 @@
 ---
 
 @charset "utf-8";
+@use "sass:color";
 @use "sass:math";
 
 $base-em-size: 16;
@@ -25,8 +26,8 @@ $background-color: #f1f3f6;
 $brand-color: #203152;
 
 //$grey-color:       #828282;
-//$grey-color-light: lighten($grey-color, 40%);
-//$grey-color-dark:  darken($grey-color, 25%);
+//$grey-color-light: color.adjust($grey-color, $lightness: 40%);
+//$grey-color-dark:  color.adjust($grey-color, $lightness: -25%);
 
 // Width of the content area
 $content-width: em(1024);