diff --git a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
index 7058ff86af0df..a74eb072b9c4a 100644
--- a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
+++ b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 
 // Color definitions for the dark theme - don't use it with the light theme
 $btn-primary-dark:                   #007db0; // contrast ratio: 4.6 with #fff text
@@ -33,24 +34,24 @@ $atum-colors-dark: (
   media-manager-content-bg:          var(--body-bg),
   media-manager-overlay-bg:          var(--template-bg-dark-90),  // fix this
   media-manager-infobar-dt-color:    rgba(255, 255, 255, .54),
-  media-manager-content-color:       lighten($btn-primary-dark, 20%),
+  media-manager-content-color:       color.adjust($btn-primary-dark, $lightness: 20%),
   media-manager-overlay-header-bg:   var(--template-bg-dark-80),
   media-manager-disk-name-color:     var(--template-text-light),
   media-manager-border:              1px solid var(--gray-800),
   media-manager-file-icon-color:     $btn-primary-dark,
   media-manager-tree-item-hover-bg:  var(--gray-600),
-  media-manager-toolbar-icon-color:  lighten($btn-primary-dark, 20%),
+  media-manager-toolbar-icon-color:  color.adjust($btn-primary-dark, $lightness: 20%),
   media-manager-breadcrumb-item-bg:  var(--gray-700),
 
   media-tree-item-color:             $btn-primary-dark,
-  media-tree-active-icon-color:      darken($btn-primary-dark, 10%),
+  media-tree-active-icon-color:      color.adjust($btn-primary-dark, $lightness: -10%),
 
   media-browser-file-bg:             var(--media-manager-bg),
   media-drive-bg:                    var(--media-manager-bg),
 
   media-toolbar-bg:                  var(--media-manager-bg),
   media-toolbar-icon-bg:             var(--media-manager-bg),
-  media-toolbar-icon-color:          lighten($btn-primary-dark, 10%),
+  media-toolbar-icon-color:          color.adjust($btn-primary-dark, $lightness: 10%),
   media-toolbar-icon-bg-hvr:         var(--gray-800),
 
   image-bg:                          #000,
@@ -58,28 +59,28 @@ $atum-colors-dark: (
 
   success-text:                      #418d52,
   success:                           $success-dark,
-  successhvr:                        darken($success-dark, 15%),
+  successhvr:                        color.adjust($success-dark, $lightness: -15%),
 
   danger-text:                       #e0615c,
   danger:                            $danger-dark,
-  dangerhvr:                         darken($danger-dark, 15%),
+  dangerhvr:                         color.adjust($danger-dark, $lightness: -15%),
 
   darkdanger:                        #941f1c,
-  darkdangerhvr:                     darken(#941f1c, 15%),
+  darkdangerhvr:                     color.adjust(#941f1c, $lightness: -15%),
 
   error:                             #941f1c,
   errorhvr:                          #be2824,
 
   warning-text:                      #000,
   warning:                           #f0ad4e,
-  warninghvr:                        darken($warning, 15%),
+  warninghvr:                        color.adjust($warning, $lightness: -15%),
 
   dark-mode-text-light:              rgba(255,255,255,.85),
 
   template-link-color:               $link-color-dark,
   link-color-rgb:                    (36,158,200),
   link-color:                        $link-color-dark,
-  template-link-hover-color:         lighten($link-color-dark, 10%),
+  template-link-hover-color:         color.adjust($link-color-dark, $lightness: 10%),
   link-color-rgb-hvr:                var(--template-link-hover-color),
 
   template-quickicon-bg:             rgba(255, 255, 255, .1),
@@ -110,7 +111,7 @@ $atum-colors-dark: (
   form-select-option:                     var(--template-text-light),
   form-select-option-disabled-bg:         var(--template-bg-dark-90),
   file-selector-btn-bg:                   $btn-primary-dark,
-  file-selector-btn-bg-hvr:               darken($btn-primary-dark, 10%),
+  file-selector-btn-bg-hvr:               color.adjust($btn-primary-dark, $lightness: -10%),
 
   // Background styles
   bg-normal:                         var(--template-bg-dark),
@@ -158,7 +159,7 @@ $atum-colors-dark: (
   main-nav-divider-bg:                 #495057,
   main-nav-item-title:                 var(--template-bg-dark-30),
   main-nav-mm-active-bg:               $btn-primary-dark,
-  main-nav-mm-active-quicktask-bg:     darken($btn-primary-dark, 10%),
+  main-nav-mm-active-quicktask-bg:     color.adjust($btn-primary-dark, $lightness: -10%),
   main-nav-badge:                      var(--template-bg-dark-60),
   main-nav-item-title-hvr-bg:          $btn-primary-dark,
   mobile-menu-collapse-bg:             var(--template-bg-dark-50),
@@ -169,7 +170,7 @@ $atum-colors-dark: (
   // Header content
   header-bg:                           #0a0e13,
   header-item-content-bg:              $btn-primary-dark,
-  header-item-content-bg-hvr:          darken($btn-primary-dark, 10%),
+  header-item-content-bg-hvr:          color.adjust($btn-primary-dark, $lightness: -10%),
   header-item-content-border-radius:   22px,
   header-item-content-jversion-color:  var(--dark-mode-text-light),
   header-item-content-jversion-bg:     transparent,
@@ -224,7 +225,7 @@ $atum-colors-dark: (
   joomla-tab-btn-region-border:        var(--atum-btn-bg),
 
   joomla-tablist-btn-aria-exp:         var(--template-text-light),
-  joomla-tablist-btn-aria-exp-bg:      darken($btn-primary-dark, 10%),
+  joomla-tablist-btn-aria-exp-bg:      color.adjust($btn-primary-dark, $lightness: -10%),
   joomla-tablist-btn-aria-exp-aft-bg:  $btn-primary-dark,
   joomla-tablist-border-bottom:        1px solid var(--gray-800),
 
@@ -273,17 +274,17 @@ $atum-colors-dark: (
   btn-primary-color:                   var(--text-normal),
   btn-primary-bg:                      $btn-primary-dark,
   primary:                             $btn-primary-dark,
-  btn-primary-border:                  1px solid lighten($btn-primary-dark, 10%),
-  btn-primary-bg-hvr:                  darken($btn-primary-dark, 10%),
-  btn-primary-border-hvr:              1px solid lighten($btn-primary-dark, 10%),
+  btn-primary-border:                  1px solid color.adjust($btn-primary-dark, $lightness: 10%),
+  btn-primary-bg-hvr:                  color.adjust($btn-primary-dark, $lightness: -10%),
+  btn-primary-border-hvr:              1px solid color.adjust($btn-primary-dark, $lightness: 10%),
   btn-primary-toggle-bg:               var(--template-bg-dark),
   btn-primary-toggle-border:           var(--template-bg-dark),
 
   btn-secondary-color:                   var(--template-text-light),
   btn-secondary-bg:                      $info-dark,
-  btn-secondary-border:                  1px solid lighten($info-dark, 10%),
-  btn-secondary-bg-hvr:                  darken($info-dark, 10%),
-  btn-secondary-border-hvr:              1px solid lighten($info-dark, 10%),
+  btn-secondary-border:                  1px solid color.adjust($info-dark, $lightness: 10%),
+  btn-secondary-bg-hvr:                  color.adjust($info-dark, $lightness: -10%),
+  btn-secondary-border-hvr:              1px solid color.adjust($info-dark, $lightness: 10%),
 
   btn-dark-border:                     1px solid rgba(0,0,0,.85),
   btn-dark-bg:                         rgba(0,0,0,.9),
@@ -292,25 +293,25 @@ $atum-colors-dark: (
   btn-dark-color-hvr:                  #fff,
 
   btn-light-bg:                        $btn-primary-dark,
-  btn-light-border:                    1px solid lighten($btn-primary-dark, 10%),
+  btn-light-border:                    1px solid color.adjust($btn-primary-dark, $lightness: 10%),
   btn-light-bg-hvr:                    $btn-primary-bg-hvr,
 
 
   btn-outline-secondary-color:         var(--template-text-light),
   btn-outline-secondary-bg:            #64676c,
-  btn-outline-secondary-border:        1px solid lighten(#64676c, 10%),
+  btn-outline-secondary-border:        1px solid color.adjust(#64676c, $lightness: 10%),
 
   btn-info-color:                      var(--template-text-light),
   btn-info-bg:                         $info-dark,
-  btn-info-border:                     1px solid lighten($info-dark, 10%),
-  btn-info-bg-hvr:                     darken($info-dark, 10%),
-  btn-info-border-hvr:                 1px solid darken($info-dark, 10%),
+  btn-info-border:                     1px solid color.adjust($info-dark, $lightness: 10%),
+  btn-info-bg-hvr:                     color.adjust($info-dark, $lightness: -10%),
+  btn-info-border-hvr:                 1px solid color.adjust($info-dark, $lightness: -10%),
 
   // Dropdown
-  dropdown-header-bg:                  darken($btn-primary-dark, 10%),
+  dropdown-header-bg:                  color.adjust($btn-primary-dark, $lightness: -10%),
   dropdown-divider-bg:                 1px solid #fff,
   dropdown-item-bg:                    $btn-primary-dark,
-  dropdown-item-bg-hvr:                darken($btn-primary-dark, 10%),
+  dropdown-item-bg-hvr:                color.adjust($btn-primary-dark, $lightness: -10%),
   dropdown-item-border-bottom:         1px solid rgba(255, 255, 255, .1),
   atum-dropdown-link-hover-bg:         var(--gray-700),
 
@@ -335,7 +336,7 @@ $atum-colors-dark: (
   state-success-text:             var(--text-normal),
   state-success-text-hvr:         var(--text-normal),
   state-success-bg:               $success-dark,
-  state-success-bg-hvr:           darken($success-dark, 15%),
+  state-success-bg-hvr:           color.adjust($success-dark, $lightness: -15%),
   state-success-border:           var(--state-success-bg),
   state-success-btn-border:       var(--state-success-bg),
   state-success-icon:             var(--text-normal),
@@ -344,24 +345,24 @@ $atum-colors-dark: (
 
   state-info-text:                var(--text-normal),
   state-info-text-hvr:            var(--text-normal),
-  state-info-bg:                  darken($btn-primary-dark, 15%),
-  state-info-bg-hvr:              darken($btn-primary-dark, 25%),
+  state-info-bg:                  color.adjust($btn-primary-dark, $lightness: -15%),
+  state-info-bg-hvr:              color.adjust($btn-primary-dark, $lightness: -25%),
   state-info-border:              transparent,
   state-info-icon:                var(--state-info-text),
-  state-info-heading-bg:          darken($btn-primary-dark, 5%),
+  state-info-heading-bg:          color.adjust($btn-primary-dark, $lightness: -5%),
 
   state-warning-text:             #000,
   state-warning-text-hvr:         #000,
   state-warning-bg:               $warning,
-  state-warning-bg-hvr:           darken($warning, 15%),
-  state-warning-border:           darken($warning, 15%),
+  state-warning-bg-hvr:           color.adjust($warning, $lightness: -15%),
+  state-warning-border:           color.adjust($warning, $lightness: -15%),
   state-warning-icon:             #000,
-  state-warning-heading-bg:       darken($warning, 15%),
+  state-warning-heading-bg:       color.adjust($warning, $lightness: -15%),
 
   state-danger-text:              var(--text-normal),
   state-danger-text-hvr:          var(--text-normal),
   state-danger-bg:                $danger-dark,
-  state-danger-bg-hvr:            darken($danger-dark, 15%),
+  state-danger-bg-hvr:            color.adjust($danger-dark, $lightness: -15%),
   state-danger-border:            var(--dangerhvr),
   state-danger-icon:              var(--text-normal),
   state-danger-heading-bg:        var(--dangerhvr),
@@ -386,7 +387,7 @@ $atum-colors-dark: (
   atum-btn-icon:                  var(--template-text-light),
   atum-btn-icon-hvr:              $atum-text-dark,
   atum-btn-bg:                    $btn-primary-dark,
-  atum-btn-bg-hvr:                darken($btn-primary-dark, 15%),
+  atum-btn-bg-hvr:                color.adjust($btn-primary-dark, $lightness: -15%),
   atum-btn-border:                1px solid hsl(var(--hue),20%,80%),
   atum-btn-hvr:                   var(--template-text-light),
 
@@ -394,8 +395,8 @@ $atum-colors-dark: (
   atum-btn-success-icon:          var(--template-text-light),
   atum-btn-success-icon-hvr:      var(--atum-btn-success-hvr),
   atum-btn-success-bg:            $success-dark,
-  atum-btn-success-bg-hvr:        darken($success-dark, 15%),
-  atum-btn-success-border:        1px solid lighten($success-dark, 10%),
+  atum-btn-success-bg-hvr:        color.adjust($success-dark, $lightness: -15%),
+  atum-btn-success-border:        1px solid color.adjust($success-dark, $lightness: 10%),
   atum-btn-success-hvr:           var(--template-text-light),
 
   atum-btn-danger:                var(--dangerhvr),
@@ -403,34 +404,34 @@ $atum-colors-dark: (
   atum-btn-danger-icon:           var(--template-text-light),
   atum-btn-danger-icon-hvr:       var(--atum-btn-danger-hvr),
   atum-btn-danger-bg:             $danger,
-  atum-btn-danger-bg-hvr:         darken($danger, 15%),
-  atum-btn-danger-border:         1px solid lighten($danger, 10%),
+  atum-btn-danger-bg-hvr:         color.adjust($danger, $lightness: -15%),
+  atum-btn-danger-border:         1px solid color.adjust($danger, $lightness: 10%),
   atum-btn-danger-hvr:            var(--template-text-light),
 
-  atum-btn-info:                  lighten($info-dark, 50%),
+  atum-btn-info:                  color.adjust($info-dark, $lightness: 50%),
   atum-btn-info-icon:             var(--template-text-light),
   atum-btn-info-icon-hvr:         var(--template-text-dark),
   atum-btn-info-bg:               $info-dark,
-  atum-btn-info-bg-hvr:           darken($info-dark, 15%),
-  atum-btn-info-border:           1px solid lighten($info-dark, 10%),
+  atum-btn-info-bg-hvr:           color.adjust($info-dark, $lightness: -15%),
+  atum-btn-info-border:           1px solid color.adjust($info-dark, $lightness: 10%),
   atum-btn-info-hvr:              var(--template-text-dark),
 
-  atum-btn-primary:               lighten($btn-primary-dark, 25%),
+  atum-btn-primary:               color.adjust($btn-primary-dark, $lightness: 25%),
   atum-btn-primary-icon:          var(--template-text-light),
   atum-btn-primary-icon-hvr:      var(--template-text-dark),
   atum-btn-primary-bg:            $btn-primary-dark, // var(--template-bg-dark),
-  atum-btn-primary-bg-hvr:        darken($btn-primary-dark, 15%),
-  atum-btn-primary-border:        1px solid lighten($btn-primary-dark, 10%),
+  atum-btn-primary-bg-hvr:        color.adjust($btn-primary-dark, $lightness: -15%),
+  atum-btn-primary-border:        1px solid color.adjust($btn-primary-dark, $lightness: 10%),
   atum-btn-primary-hvr:           var(--template-text-light),
 
   atum-btn-secondary:             #f0f4fb,
 
-  atum-btn-action:                darken($info-dark, 10%),
+  atum-btn-action:                color.adjust($info-dark, $lightness: -10%),
   atum-btn-action-icon:           var(--template-text-light),
   atum-btn-action-icon-hvr:       var(--atum-btn-action-hvr),
   atum-btn-action-bg:             $info-dark,
-  atum-btn-action-bg-hvr:         darken($info-dark, 15%),
-  atum-btn-action-border:         1px solid lighten($info-dark, 10%),
+  atum-btn-action-bg-hvr:         color.adjust($info-dark, $lightness: -15%),
+  atum-btn-action-border:         1px solid color.adjust($info-dark, $lightness: 10%),
 
   atum-list-group-bg:             var(--template-sidebar-bg),
 
diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
index 9b333c7ccfae8..bd92501826bca 100644
--- a/build/media_source/templates/administrator/atum/scss/_variables.scss
+++ b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
 $prefix: "";
 
@@ -341,8 +343,8 @@ $atum-colors: (
   btn-info-color:                   var(--template-text-light),
   btn-info-bg:                      $info,
   btn-info-border:                  1px solid $info,
-  btn-info-bg-hvr:                  darken($info, 10%),
-  btn-info-border-hvr:              1px solid darken($info, 10%),
+  btn-info-bg-hvr:                  color.adjust($info, $lightness: -10%),
+  btn-info-border-hvr:              1px solid color.adjust($info, $lightness: -10%),
 
   btn-outline-secondary-color:      gray-700,
   btn-outline-secondary-bg:         transparent,
@@ -386,7 +388,7 @@ $atum-colors: (
   states-btn-primary-border:        var(--btn-primary-bg),
 
   state-success-text:               $success,
-  state-success-text-hvr:           lighten($success, 58%),
+  state-success-text-hvr:           color.adjust($success, $lightness: 58%),
   state-success-bg:                 #f2f8f4,
   state-success-bg-hvr:             $success,
   state-success-border:             hsl(var(--hue), 50%, 93%),
@@ -407,7 +409,7 @@ $atum-colors: (
 
 
   state-warning-text:               #996901,
-  state-warning-text-hvr:           lighten($warning, 44%),
+  state-warning-text-hvr:           color.adjust($warning, $lightness: 44%),
   state-warning-bg:                 #fffcf4,
   state-warning-bg-hvr:             #996900,
   state-warning-border:             #ffb512,
@@ -416,7 +418,7 @@ $atum-colors: (
   state-warning-link-color:         var(--warning-text-emphasis),
 
   state-danger-text:                var(--danger-text-emphasis),
-  state-danger-text-hvr:            lighten($danger, 52%),
+  state-danger-text-hvr:            color.adjust($danger, $lightness: 52%),
   state-danger-bg:                  #f3d4d4,
   state-danger-bg-hvr:              $danger,
   state-danger-border:              var(--danger-border-subtle),
@@ -426,10 +428,10 @@ $atum-colors: (
 
   state-error-text:                 $danger,
   state-error-text-hvr:             $danger,
-  state-error-bg:                   lighten($danger, 52%),
-  state-error-bg-hvr:               lighten($danger, 52%),
+  state-error-bg:                   color.adjust($danger, $lightness: 52%),
+  state-error-bg-hvr:               color.adjust($danger, $lightness: 52%),
   state-error-border:               1px solid $danger,
-  state-error-icon:                 lighten($danger, 20%),
+  state-error-icon:                 color.adjust($danger, $lightness: 20%),
   state-error-heading-bg:           $danger,
 
   alert-info-color:                 var(--template-bg-dark),
@@ -535,18 +537,18 @@ $atum-colors: (
 
   success-text:                      $success,
   success:                           $success,
-  successhvr:                        darken($success, 15%),
+  successhvr:                        color.adjust($success, $lightness: -15%),
 
   danger-text:                       $danger,
   danger:                            $danger,
-  dangerhvr:                         darken($danger, 15%),
+  dangerhvr:                         color.adjust($danger, $lightness: -15%),
 
   darkdanger:                        $danger,
-  darkdangerhvr:                     darken($danger, 15%),
+  darkdangerhvr:                     color.adjust($danger, $lightness: -15%),
 
   warning-text:                      #000,
   warning:                           $warning,
-  warninghvr:                        darken($warning, 15%),
+  warninghvr:                        color.adjust($warning, $lightness: -15%),
 
 );
 
@@ -560,7 +562,7 @@ $colors: (
   info-border:                     var(--info),
   warning-border:                  var(--warning),
   danger-border:                   var(--danger),
-  login-main-bg:                   darken($base-color, 8%), // used on login
+  login-main-bg:                   color.adjust($base-color, $lightness: -8%), // used on login
   border:                          $gray-400,
   "white":                         $white, // the key here must be in quotes to avoid scss compilation warnings.
   white-offset:                    $whiteoffset,
@@ -713,8 +715,8 @@ $dropdown-item-bg-hvr:             var(--dropdown-item-bg-hvr);
 // Alerts
 $state-success-text:               $success;
 $state-success-text-hvr:           $success;
-$state-success-bg:                 lighten($success, 58%);
-$state-success-bg-hvr:             lighten($success, 58%);
+$state-success-bg:                 color.adjust($success, $lightness: 58%);
+$state-success-bg-hvr:             color.adjust($success, $lightness: 58%);
 $state-success-border:             var(--state-success-border);
 $state-success-btn-border:         var(--state-success-btn-border);
 $state-success-icon:               var(--state-success-icon);
@@ -723,7 +725,7 @@ $state-success-heading-bg:         var(--state-success-heading-bg);
 
 $state-info-text:                  var(--state-info-text);
 $state-info-text-hvr:              var(--state-info-text);
-$state-info-bg:                    lighten($info, 90%);
+$state-info-bg:                    color.adjust($info, $lightness: 90%);
 $state-info-bg-hvr:                var(--state-info-bg);
 $state-info-border:                var(--state-info-border);
 $state-info-icon:                  var(--state-info-icon);
@@ -1005,7 +1007,7 @@ $breadcrumb-bg:                    var(--white);
 
 // Links
 $link-color:                       $light-blue;
-$link-hover-color:                 darken($light-blue, 20%);
+$link-hover-color:                 color.adjust($light-blue, $lightness: -20%);
 $link-decoration:                  none;
 
 // Z-Index list
diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss b/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss
index 8fcd8fda797ca..d95a219033a2a 100644
--- a/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss
+++ b/build/media_source/templates/administrator/atum/scss/blocks/_modals.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Modals
 
 .modal {
@@ -128,7 +130,7 @@
     max-width: 180px;
     padding: 10px 15px;
     text-align: end;
-    background: darken($gray-100, 2.5%);
+    background: color.adjust($gray-100, $lightness: -2.5%);
     border-right: 1px solid $table-border-color;
 
     .badge {
diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss
index 397681137c5de..e446f1bf112db 100644
--- a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss
+++ b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_form.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Form
 
 label {
@@ -72,11 +74,11 @@ select.form-control {
   }
 
   .button-select {
-    background-color: darken($success, 8%);
+    background-color: color.adjust($success, $lightness: -8%);
   }
 
   .button-clear {
-    background-color: darken($danger, 8%);
+    background-color: color.adjust($danger, $lightness: -8%);
   }
 
   .button-clear > .#{$fa-css-prefix}-check,
diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
index 34271e4aa36ce..f18189a50c80a 100644
--- a/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Header
 
 .container-header {
@@ -221,7 +223,7 @@
       color: $white;
 
       &:hover, &:focus {
-        color: darken($white, 10%);
+        color: color.adjust($white, $lightness: -10%);
       }
     }
 
diff --git a/build/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss b/build/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss
index 86b91d1093cdb..af02216ddd4ef 100644
--- a/build/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
 $prefix: "";
 
@@ -121,7 +123,7 @@ $cassiopeia-colors: (
   template-text-light:                 $white,
   template-special-color:              #132f53,
   template-link-color:                 #2a69b8,
-  template-link-hover-color:           darken(#2a69b8, 20%),
+  template-link-hover-color:           color.adjust(#2a69b8, $lightness: -20%),
   template-contrast:                   #2a69b8,
   template-bg-dark:                    hsl(var(--hue), 40%, 20%),
   template-bg-dark-3:                  hsl(var(--hue), 40%, 97%),