chore(sass): minimal deprecation fixes (darken, lighten, math.div)

Author: ManiShah7

scss/_defs.scss

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 // sizes
-$em: (18 / 16) * 1rem;
+$em: calc(18 / 16) * 1rem;
 $spacing: 18px;
 
 // fonts

scss/_forms.scss

@@ -61,8 +61,8 @@ label {
 input[type="submit"],
 input[type="reset"],
 button {
-  background: darken($white, 5);
-  color: darken($gray, 25);
+  background: safe-adjust-lightness($white, -5);
+  color: safe-adjust-lightness($gray, -25);
   cursor: pointer;
   display: inline;
   margin-bottom: $em;
@@ -71,16 +71,15 @@ button {
   text-align: center;
 
   &:hover {
-    background: darken($white, 15);
+    background: safe-adjust-lightness($white, -15);
     color: $black;
   }
 
   &[disabled] {
-    background: darken($white, 10);
-    color: darken($gray, 10);
+    background: safe-adjust-lightness($white, -10);
+    color: safe-adjust-lightness($gray, -10);
     cursor: not-allowed;
   }
-
 }
 
 input[type="submit"],
@@ -89,8 +88,8 @@ button[type="submit"] {
   color: $white;
 
   &:hover {
-    background: darken($blue, 15);
-    color: darken($white, 25);
+    background: safe-adjust-lightness($blue, -15);
+    color: safe-adjust-lightness($white, -25);
   }
 }
 

scss/_functions.scss

@@ -0,0 +1,11 @@
+@use "sass:color";
+
+/// Adjusts lightness of a color by a percentage.
+/// Positive `$percent` lightens, negative darkens.
+/// 
+/// @param {Color} $color - Base color.
+/// @param {Number} $percent - Percent to adjust lightness (e.g. 15 or -15).
+/// @return {Color} - Modified color.
+@function safe-adjust-lightness($color, $percent) {
+  @return color.adjust($color, $lightness: $percent * 1%);
+}

scss/_grid.scss

@@ -24,7 +24,7 @@ html {
 body {
   @extend %sans-serif;
   background: $white;
-  color: lighten($black, 10);
+  color: safe-adjust-lightness($black, 10);
   padding: 2 * $spacing;
 }
 
@@ -62,7 +62,7 @@ footer {
 
 article {
   background: $white;
-  border: 1px solid lighten($black, 85);
+  border: 1px solid safe-adjust-lightness($black, 85);
 }
 
 nav {

scss/_pre.scss

@@ -14,7 +14,7 @@ output {
 }
 
 pre {
-  border-left: .1 * $em solid lighten($green, 25);
+  border-left: .1 * $em solid safe-adjust-lightness($green, 25);
   line-height: 1.4 * $em;
   overflow: auto;
   padding-left: $spacing;
@@ -29,7 +29,7 @@ pre {
 
 code,
 kbd {
-  background: lighten($green, 60);
+  background: safe-adjust-lightness($green, 60);
   border-radius: .2 * $spacing;
   color: $green;
   display: inline-block;

scss/_tables.scss

@@ -17,7 +17,7 @@ th {
 
 thead th {
   border-bottom: .12 * $em solid $gray;
-  border-left: .06 * $em solid lighten($black, 80);
+  border-left: .06 * $em solid safe-adjust-lightness($black, 80);
   padding-bottom: .35 * $em;
 
   &:first-child {
@@ -27,7 +27,7 @@ thead th {
 
 tbody tr {
   &:hover {
-    background-color: lighten($black, 98);
+    background-color: safe-adjust-lightness($black, 98);
   }
 }
 

scss/main.scss

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 @import 'defs';
+@import 'functions';
 @import 'common';
 @import 'tables';
 @import 'forms';