diff --git a/src/base/_fonts.scss b/src/base/_fonts.scss
index ff8f67a84..47351647b 100644
--- a/src/base/_fonts.scss
+++ b/src/base/_fonts.scss
@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 @mixin _non-variable-font-face($name, $path, $parameter) {
   @font-face {
     font-display: swap;
@@ -5,7 +7,7 @@
     src: url('../src/assets/fonts/#{$path}/#{$parameter}.woff2') format('woff2'),
       url('../src/assets/fonts/#{$path}/#{$parameter}.woff') format('woff');
 
-    @if type-of($parameter) == 'number' {
+    @if meta.type-of($parameter) == 'number' {
       font-weight: $parameter;
     } @else {
       font-style: $parameter;
diff --git a/src/vendor/highlight/_theme.scss b/src/vendor/highlight/_theme.scss
index 947a3ee78..69209ee99 100644
--- a/src/vendor/highlight/_theme.scss
+++ b/src/vendor/highlight/_theme.scss
@@ -45,7 +45,8 @@
 .hljs-type {
   color: sasscolor.change(
     sasscolor.mix(color.$base-fuchsia-lighter, color.$base-orange-light),
-    $saturation: sasscolor.saturation(color.$base-fuchsia-lighter)
+    $saturation:
+      sasscolor.channel(color.$base-fuchsia-lighter, 'saturation', $space: hsl)
   );
 }
 
@@ -55,7 +56,8 @@
 .hljs-selector-pseudo {
   color: sasscolor.change(
     sasscolor.mix(color.$base-green-lighter, color.$base-blue-lighter),
-    $saturation: sasscolor.saturation(color.$base-green-lighter)
+    $saturation:
+      sasscolor.channel(color.$base-green-lighter, 'saturation', $space: hsl)
   );
 }