thought of a MUCH more logical way to pass in additional CSS transitions

assets/sass/abstracts/_functions.scss

@@ -1,15 +1,14 @@
-@use "sass:math";
+@use "sass:color";
 
 @use "settings";
 
-// Gradient hack to get our custom underline to wrap:
-// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
-@function underline-hack($color) {
-  // Less compatible but better for light/dark mode switching. We fall back to non-alpha hex colors with
-  // postcss-color-rgba-fallback to mitigate this.
-  // stylelint-disable-next-line color-function-notation
-  $color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%));
+// Figure out the color of the "transparent" link underlines:
+@function underline-hack($color, $background: #ffffff) {
+  // Calculate underline color by mix()'ing it with a given background to give the impression of opacity but with much
+  // better efficiency and compatibility.
+  $color-transparentized: color.mix($color, $background, settings.$link-underline-opacity);
 
-  // Return non-gradient linear-gradient():
-  @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
+  // Return a "gradient" as a hack to get the fancy underline to wrap:
+  // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
+  @return linear-gradient($color-transparentized, $color-transparentized);
 }

assets/sass/abstracts/_settings.scss

@@ -27,7 +27,6 @@ $font-stack-mono-variable: list.join($webfont-mono-variable, $system-fonts-monos
 // Fancy link underline settings:
 $link-underline-opacity: 40%;
 $link-underline-size: 2px;
-$link-opacity-color: #ffffff;
 
 // Default fading style when switching between light/dark themes:
 $theme-transition-duration: 0.15s;

assets/sass/abstracts/_themes.scss

@@ -1,45 +1,42 @@
 @use "sass:list";
 @use "sass:map";
-@use "sass:meta";
 
 @use "settings";
 
 // Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
-// ex. @include themes.themed($color: "text", $background-color: "background-inner");
-@mixin themed($colors...) {
-  $selectors: "#{&}";
-
-  // keep track of each property we're theming
-  $properties: ();
-  @each $property, $color in meta.keywords($colors) {
-    $properties: list.append($properties, $property);
+// ex. @include themes.themed((color: "text", background-color: "background-inner"));
+// Also accepts additional transitions (in shorthand) to tack on.
+@mixin themed($properties, $addTransitions: ()) {
+  // generate CSS transition shorthand for each themed property w/ default duration and function
+  $defaults: ();
+  @each $property, $color in $properties {
+    $shorthand: $property settings.$theme-transition-duration settings.$theme-transition-function;
+    $defaults: list.append($defaults, $shorthand);
   }
 
-  // list themed properties under CSS transitions for fancy fading
-  transition-property: list.join($properties, (), $separator: comma);
-  transition-duration: #{settings.$theme-transition-duration};
-  transition-timing-function: #{settings.$theme-transition-function};
+  // list all transitions separated by commas (with additional shorthand(s) passed in)
+  transition: list.join($addTransitions, $defaults, $separator: comma);
+
+  // keep track of the original selector(s) calling this mixin for below
+  $selectors: "#{&}";
 
   // add corresponding body.light and body.dark root selectors
   @each $theme, $map in $themes {
     @at-root body.#{$theme} {
-      // support root body element
+      // support theming root body element
       @if $selectors == "body" {
-        @each $property, $color in meta.keywords($colors) {
+        @each $property, $color in $properties {
           #{$property}: map.get($map, $color);
         }
       } @else {
         #{$selectors} {
-          @each $property, $color in meta.keywords($colors) {
+          @each $property, $color in $properties {
             #{$property}: map.get($map, $color);
           }
         }
       }
     }
   }
-
-  // allow anything above to be overridden manually by passing in a content block
-  @content;
 }
 
 // ----------------