diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss
index 00951b3f2..f4d89fb3e 100644
--- a/assets/stylesheets/bootstrap/_forms.scss
+++ b/assets/stylesheets/bootstrap/_forms.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @use "sass:math";
 //
 // Forms
@@ -445,7 +447,7 @@ textarea.form-control {
   display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 10px;
-  color: lighten($text-color, 25%); // lighten the text some for contrast
+  color: color.adjust($text-color, $lightness: 25%, $space: hsl); // lighten the text some for contrast
 }
 
 
diff --git a/assets/stylesheets/bootstrap/_jumbotron.scss b/assets/stylesheets/bootstrap/_jumbotron.scss
index 07a0f98ff..bb169d19e 100644
--- a/assets/stylesheets/bootstrap/_jumbotron.scss
+++ b/assets/stylesheets/bootstrap/_jumbotron.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @use "sass:math";
 //
 // Jumbotron
@@ -23,7 +25,7 @@
   }
 
   > hr {
-    border-top-color: darken($jumbotron-bg, 10%);
+    border-top-color: color.adjust($jumbotron-bg, $lightness: -10%, $space: hsl);
   }
 
   .container &,
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
index 135aba0ae..0c0e7d0d8 100644
--- a/assets/stylesheets/bootstrap/_navbar.scss
+++ b/assets/stylesheets/bootstrap/_navbar.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @use "sass:math";
 //
 // Navbars
@@ -90,6 +92,12 @@
 
 .navbar-fixed-top,
 .navbar-fixed-bottom {
+  // Fix the top/bottom navbars when screen real estate supports it
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: $zindex-navbar-fixed;
+
   .navbar-collapse {
     max-height: $navbar-collapse-max-height;
 
@@ -98,12 +106,6 @@
     }
   }
 
-  // Fix the top/bottom navbars when screen real estate supports it
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-
   // Undo the rounded corners
   @media (min-width: $grid-float-breakpoint) {
     border-radius: 0;
@@ -194,12 +196,13 @@
   float: right;
   padding: 9px 10px;
   margin-right: $navbar-padding-horizontal;
-  @include navbar-vertical-align(34px);
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid transparent;
   border-radius: $border-radius-base;
 
+  @include navbar-vertical-align(34px);
+
   // We remove the `outline` here, but later compensate by attaching `:hover`
   // styles to `:focus`.
   &:focus {
@@ -630,7 +633,7 @@
 
   .navbar-collapse,
   .navbar-form {
-    border-color: darken($navbar-inverse-bg, 7%);
+    border-color: color.adjust($navbar-inverse-bg, $lightness: -7%, $space: hsl);
   }
 
   .navbar-link {
diff --git a/assets/stylesheets/bootstrap/_popovers.scss b/assets/stylesheets/bootstrap/_popovers.scss
index 6f8384228..9cde74a7c 100644
--- a/assets/stylesheets/bootstrap/_popovers.scss
+++ b/assets/stylesheets/bootstrap/_popovers.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 //
 // Popovers
 // --------------------------------------------------
@@ -117,7 +119,7 @@
   margin: 0; // reset heading margin
   font-size: $font-size-base;
   background-color: $popover-title-bg;
-  border-bottom: 1px solid darken($popover-title-bg, 5%);
+  border-bottom: 1px solid color.adjust($popover-title-bg, $lightness: -5%, $space: hsl);
   border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
 }
 
diff --git a/assets/stylesheets/bootstrap/_theme.scss b/assets/stylesheets/bootstrap/_theme.scss
index 046eed7a9..0b6a10e40 100644
--- a/assets/stylesheets/bootstrap/_theme.scss
+++ b/assets/stylesheets/bootstrap/_theme.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 /*!
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 Twitter, Inc.
@@ -46,21 +48,21 @@
 
 // Mixin for generating new styles
 @mixin btn-styles($btn-color: #555) {
-  @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%));
+  @include gradient-vertical($start-color: $btn-color, $end-color: color.adjust($btn-color, $lightness: -12%, $space: hsl));
   @include reset-filter; // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
   background-repeat: repeat-x;
-  border-color: darken($btn-color, 14%);
+  border-color: color.adjust($btn-color, $lightness: -14%, $space: hsl);
 
   &:hover,
   &:focus  {
-    background-color: darken($btn-color, 12%);
+    background-color: color.adjust($btn-color, $lightness: -12%, $space: hsl);
     background-position: 0 -15px;
   }
 
   &:active,
   &.active {
-    background-color: darken($btn-color, 12%);
-    border-color: darken($btn-color, 14%);
+    background-color: color.adjust($btn-color, $lightness: -12%, $space: hsl);
+    border-color: color.adjust($btn-color, $lightness: -14%, $space: hsl);
   }
 
   &.disabled,
@@ -72,7 +74,7 @@
     &.focus,
     &:active,
     &.active {
-      background-color: darken($btn-color, 12%);
+      background-color: color.adjust($btn-color, $lightness: -12%, $space: hsl);
       background-image: none;
     }
   }
@@ -116,14 +118,14 @@
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-  @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%));
-  background-color: darken($dropdown-link-hover-bg, 5%);
+  @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: color.adjust($dropdown-link-hover-bg, $lightness: -5%, $space: hsl));
+  background-color: color.adjust($dropdown-link-hover-bg, $lightness: -5%, $space: hsl);
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
-  background-color: darken($dropdown-link-active-bg, 5%);
+  @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: color.adjust($dropdown-link-active-bg, $lightness: -5%, $space: hsl));
+  background-color: color.adjust($dropdown-link-active-bg, $lightness: -5%, $space: hsl);
 }
 
 
@@ -133,7 +135,7 @@
 
 // Default navbar
 .navbar-default {
-  @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
+  @include gradient-vertical($start-color: color.adjust($navbar-default-bg, $lightness: 10%, $space: hsl), $end-color: $navbar-default-bg);
   @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
   border-radius: $navbar-border-radius;
   $shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
@@ -141,7 +143,7 @@
 
   .navbar-nav > .open > a,
   .navbar-nav > .active > a {
-    @include gradient-vertical($start-color: darken($navbar-default-link-active-bg, 5%), $end-color: darken($navbar-default-link-active-bg, 2%));
+    @include gradient-vertical($start-color: color.adjust($navbar-default-link-active-bg, $lightness: -5%, $space: hsl), $end-color: color.adjust($navbar-default-link-active-bg, $lightness: -2%, $space: hsl));
     @include box-shadow(inset 0 3px 9px rgba(0, 0, 0, .075));
   }
 }
@@ -152,12 +154,12 @@
 
 // Inverted navbar
 .navbar-inverse {
-  @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg);
+  @include gradient-vertical($start-color: color.adjust($navbar-inverse-bg, $lightness: 10%, $space: hsl), $end-color: $navbar-inverse-bg);
   @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
   border-radius: $navbar-border-radius;
   .navbar-nav > .open > a,
   .navbar-nav > .active > a {
-    @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: lighten($navbar-inverse-link-active-bg, 2.5%));
+    @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: color.adjust($navbar-inverse-link-active-bg, $lightness: 2.5%, $space: hsl));
     @include box-shadow(inset 0 3px 9px rgba(0, 0, 0, .25));
   }
 
@@ -181,7 +183,7 @@
     &:hover,
     &:focus {
       color: #fff;
-      @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
+      @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: color.adjust($dropdown-link-active-bg, $lightness: -5%, $space: hsl));
     }
   }
 }
@@ -200,8 +202,8 @@
 
 // Mixin for generating new styles
 @mixin alert-styles($color) {
-  @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%));
-  border-color: darken($color, 15%);
+  @include gradient-vertical($start-color: $color, $end-color: color.adjust($color, $lightness: -7.5%, $space: hsl));
+  border-color: color.adjust($color, $lightness: -15%, $space: hsl);
 }
 
 // Apply the mixin to the alerts
@@ -217,12 +219,12 @@
 
 // Give the progress background some depth
 .progress {
-  @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg)
+  @include gradient-vertical($start-color: color.adjust($progress-bg, $lightness: -4%, $space: hsl), $end-color: $progress-bg)
 }
 
 // Mixin for generating new styles
 @mixin progress-bar-styles($color) {
-  @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%));
+  @include gradient-vertical($start-color: $color, $end-color: color.adjust($color, $lightness: -10%, $space: hsl));
 }
 
 // Apply the mixin to the progress bars
@@ -250,9 +252,9 @@
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
-  text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%);
-  @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%));
-  border-color: darken($list-group-active-border, 7.5%);
+  text-shadow: 0 -1px 0 color.adjust($list-group-active-bg, $lightness: -10%, $space: hsl);
+  @include gradient-vertical($start-color: $list-group-active-bg, $end-color: color.adjust($list-group-active-bg, $lightness: -7.5%, $space: hsl));
+  border-color: color.adjust($list-group-active-border, $lightness: -7.5%, $space: hsl);
 
   .badge {
     text-shadow: none;
@@ -271,7 +273,7 @@
 
 // Mixin for generating new styles
 @mixin panel-heading-styles($color) {
-  @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%));
+  @include gradient-vertical($start-color: $color, $end-color: color.adjust($color, $lightness: -5%, $space: hsl));
 }
 
 // Apply the mixin to the panel headings only
@@ -288,8 +290,8 @@
 // --------------------------------------------------
 
 .well {
-  @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg);
-  border-color: darken($well-bg, 10%);
+  @include gradient-vertical($start-color: color.adjust($well-bg, $lightness: -5%, $space: hsl), $end-color: $well-bg);
+  border-color: color.adjust($well-bg, $lightness: -10%, $space: hsl);
   $shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
   @include box-shadow($shadow);
 }
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
index 02fe1f43b..34feabd7d 100644
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $bootstrap-sass-asset-helper: false !default;
 @use "sass:math";
 //
@@ -10,13 +12,13 @@ $bootstrap-sass-asset-helper: false !default;
 //## Gray and brand colors for use across Bootstrap.
 
 $gray-base:              #000 !default;
-$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
-$gray-dark:              lighten($gray-base, 20%) !default;   // #333
-$gray:                   lighten($gray-base, 33.5%) !default; // #555
-$gray-light:             lighten($gray-base, 46.7%) !default; // #777
-$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
+$gray-darker:            color.adjust($gray-base, $lightness: 13.5%, $space: hsl) !default; // #222
+$gray-dark:              color.adjust($gray-base, $lightness: 20%, $space: hsl) !default;   // #333
+$gray:                   color.adjust($gray-base, $lightness: 33.5%, $space: hsl) !default; // #555
+$gray-light:             color.adjust($gray-base, $lightness: 46.7%, $space: hsl) !default; // #777
+$gray-lighter:           color.adjust($gray-base, $lightness: 93.5%, $space: hsl) !default; // #eee
 
-$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
+$brand-primary:         color.adjust(#428bca, $lightness: -6.5%, $space: hsl) !default; // #337ab7
 $brand-success:         #5cb85c !default;
 $brand-info:            #5bc0de !default;
 $brand-warning:         #f0ad4e !default;
@@ -35,7 +37,7 @@ $text-color:            $gray-dark !default;
 //** Global textual link color.
 $link-color:            $brand-primary !default;
 //** Link hover color set via `darken()` function.
-$link-hover-color:      darken($link-color, 15%) !default;
+$link-hover-color:      color.adjust($link-color, $lightness: -15%, $space: hsl) !default;
 //** Link hover decoration.
 $link-hover-decoration: underline !default;
 
@@ -156,23 +158,23 @@ $btn-default-border:             #ccc !default;
 
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
-$btn-primary-border:             darken($btn-primary-bg, 5%) !default;
+$btn-primary-border:             color.adjust($btn-primary-bg, $lightness: -5%, $space: hsl) !default;
 
 $btn-success-color:              #fff !default;
 $btn-success-bg:                 $brand-success !default;
-$btn-success-border:             darken($btn-success-bg, 5%) !default;
+$btn-success-border:             color.adjust($btn-success-bg, $lightness: -5%, $space: hsl) !default;
 
 $btn-info-color:                 #fff !default;
 $btn-info-bg:                    $brand-info !default;
-$btn-info-border:                darken($btn-info-bg, 5%) !default;
+$btn-info-border:                color.adjust($btn-info-bg, $lightness: -5%, $space: hsl) !default;
 
 $btn-warning-color:              #fff !default;
 $btn-warning-bg:                 $brand-warning !default;
-$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
+$btn-warning-border:             color.adjust($btn-warning-bg, $lightness: -5%, $space: hsl) !default;
 
 $btn-danger-color:               #fff !default;
 $btn-danger-bg:                  $brand-danger !default;
-$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
+$btn-danger-border:              color.adjust($btn-danger-bg, $lightness: -5%, $space: hsl) !default;
 
 $btn-link-disabled-color:        $gray-light !default;
 
@@ -249,7 +251,7 @@ $dropdown-divider-bg:            #e5e5e5 !default;
 //** Dropdown link text color.
 $dropdown-link-color:            $gray-dark !default;
 //** Hover color for dropdown links.
-$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+$dropdown-link-hover-color:      color.adjust($gray-dark, $lightness: -5%, $space: hsl) !default;
 //** Hover background for dropdown links.
 $dropdown-link-hover-bg:         #f5f5f5 !default;
 
@@ -372,20 +374,20 @@ $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;
 $navbar-default-bg:                #f8f8f8 !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-border:            color.adjust($navbar-default-bg, $lightness: -6.5%, $space: hsl) !default;
 
 // Navbar links
 $navbar-default-link-color:                #777 !default;
 $navbar-default-link-hover-color:          #333 !default;
 $navbar-default-link-hover-bg:             transparent !default;
 $navbar-default-link-active-color:         #555 !default;
-$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-active-bg:            color.adjust($navbar-default-bg, $lightness: -6.5%, $space: hsl) !default;
 $navbar-default-link-disabled-color:       #ccc !default;
 $navbar-default-link-disabled-bg:          transparent !default;
 
 // Navbar brand label
 $navbar-default-brand-color:               $navbar-default-link-color !default;
-$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-color:         color.adjust($navbar-default-brand-color, $lightness: -10%, $space: hsl) !default;
 $navbar-default-brand-hover-bg:            transparent !default;
 
 // Navbar toggle
@@ -396,16 +398,16 @@ $navbar-default-toggle-border-color:       #ddd !default;
 
 //=== Inverted navbar
 // Reset inverted navbar basics
-$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
+$navbar-inverse-color:                      color.adjust($gray-light, $lightness: 15%, $space: hsl) !default;
 $navbar-inverse-bg:                         #222 !default;
-$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-border:                     color.adjust($navbar-inverse-bg, $lightness: -10%, $space: hsl) !default;
 
 // Inverted navbar links
-$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
+$navbar-inverse-link-color:                 color.adjust($gray-light, $lightness: 15%, $space: hsl) !default;
 $navbar-inverse-link-hover-color:           #fff !default;
 $navbar-inverse-link-hover-bg:              transparent !default;
 $navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
-$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-active-bg:             color.adjust($navbar-inverse-bg, $lightness: -10%, $space: hsl) !default;
 $navbar-inverse-link-disabled-color:        #444 !default;
 $navbar-inverse-link-disabled-bg:           transparent !default;
 
@@ -504,19 +506,19 @@ $jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
 
 $state-success-text:             #3c763d !default;
 $state-success-bg:               #dff0d8 !default;
-$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+$state-success-border:           color.adjust(color.adjust($state-success-bg, $hue: -10, $space: hsl), $lightness: -5%, $space: hsl) !default;
 
 $state-info-text:                #31708f !default;
 $state-info-bg:                  #d9edf7 !default;
-$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+$state-info-border:              color.adjust(color.adjust($state-info-bg, $hue: -10, $space: hsl), $lightness: -7%, $space: hsl) !default;
 
 $state-warning-text:             #8a6d3b !default;
 $state-warning-bg:               #fcf8e3 !default;
-$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+$state-warning-border:           color.adjust(color.adjust($state-warning-bg, $hue: -10, $space: hsl), $lightness: -5%, $space: hsl) !default;
 
 $state-danger-text:              #a94442 !default;
 $state-danger-bg:                #f2dede !default;
-$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+$state-danger-border:            color.adjust(color.adjust($state-danger-bg, $hue: -10, $space: hsl), $lightness: -5%, $space: hsl) !default;
 
 
 //== Tooltips
@@ -551,7 +553,7 @@ $popover-border-color:                rgba(0, 0, 0, .2) !default;
 $popover-fallback-border-color:       #ccc !default;
 
 //** Popover title background color
-$popover-title-bg:                    darken($popover-bg, 3%) !default;
+$popover-title-bg:                    color.adjust($popover-bg, $lightness: -3%, $space: hsl) !default;
 
 //** Popover arrow width
 $popover-arrow-width:                 10px !default;
@@ -561,9 +563,9 @@ $popover-arrow-color:                 $popover-bg !default;
 //** Popover outer arrow width
 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
 //** Popover outer arrow color
-$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+$popover-arrow-outer-color:           color.adjust($popover-border-color, $alpha: 0.05) !default;
 //** Popover outer arrow fallback color
-$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+$popover-arrow-outer-fallback-color:  color.adjust($popover-fallback-border-color, $lightness: -20%, $space: hsl) !default;
 
 
 //== Labels
@@ -690,7 +692,7 @@ $list-group-active-bg:          $component-active-bg !default;
 //** Border color of active list elements
 $list-group-active-border:      $list-group-active-bg !default;
 //** Text color for content within active list items
-$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+$list-group-active-text-color:  color.adjust($list-group-active-bg, $lightness: 40%, $space: hsl) !default;
 
 //** Text color of disabled list items
 $list-group-disabled-color:      $gray-light !default;
@@ -767,7 +769,7 @@ $thumbnail-caption-padding:   9px !default;
 //##
 
 $well-bg:                     #f5f5f5 !default;
-$well-border:                 darken($well-bg, 7%) !default;
+$well-border:                 color.adjust($well-bg, $lightness: -7%, $space: hsl) !default;
 
 
 //== Badges
diff --git a/assets/stylesheets/bootstrap/mixins/_alerts.scss b/assets/stylesheets/bootstrap/mixins/_alerts.scss
index b1e6df9d2..a9d438792 100644
--- a/assets/stylesheets/bootstrap/mixins/_alerts.scss
+++ b/assets/stylesheets/bootstrap/mixins/_alerts.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Alerts
 
 @mixin alert-variant($background, $border, $text-color) {
@@ -6,10 +8,10 @@
   border-color: $border;
 
   hr {
-    border-top-color: darken($border, 5%);
+    border-top-color: color.adjust($border, $lightness: -5%, $space: hsl);
   }
 
   .alert-link {
-    color: darken($text-color, 10%);
+    color: color.adjust($text-color, $lightness: -10%, $space: hsl);
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_background-variant.scss b/assets/stylesheets/bootstrap/mixins/_background-variant.scss
index 4c7769e13..e93d4e7d0 100644
--- a/assets/stylesheets/bootstrap/mixins/_background-variant.scss
+++ b/assets/stylesheets/bootstrap/mixins/_background-variant.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Contextual backgrounds
 
 // [converter] $parent hack
@@ -7,6 +9,6 @@
   }
   a#{$parent}:hover,
   a#{$parent}:focus {
-    background-color: darken($color, 10%);
+    background-color: color.adjust($color, $lightness: -10%, $space: hsl);
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss
index 5afa735e8..4cdf5c590 100644
--- a/assets/stylesheets/bootstrap/mixins/_buttons.scss
+++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
@@ -11,28 +13,28 @@
   &:focus,
   &.focus {
     color: $color;
-    background-color: darken($background, 10%);
-    border-color: darken($border, 25%);
+    background-color: color.adjust($background, $lightness: -10%, $space: hsl);
+    border-color: color.adjust($border, $lightness: -25%, $space: hsl);
   }
   &:hover {
     color: $color;
-    background-color: darken($background, 10%);
-    border-color: darken($border, 12%);
+    background-color: color.adjust($background, $lightness: -10%, $space: hsl);
+    border-color: color.adjust($border, $lightness: -12%, $space: hsl);
   }
   &:active,
   &.active,
   .open > &.dropdown-toggle {
     color: $color;
-    background-color: darken($background, 10%);
+    background-color: color.adjust($background, $lightness: -10%, $space: hsl);
     background-image: none;
-    border-color: darken($border, 12%);
+    border-color: color.adjust($border, $lightness: -12%, $space: hsl);
 
     &:hover,
     &:focus,
     &.focus {
       color: $color;
-      background-color: darken($background, 17%);
-      border-color: darken($border, 25%);
+      background-color: color.adjust($background, $lightness: -17%, $space: hsl);
+      border-color: color.adjust($border, $lightness: -25%, $space: hsl);
     }
   }
   &.disabled,
diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss
index 46578a14b..9350aaa18 100644
--- a/assets/stylesheets/bootstrap/mixins/_forms.scss
+++ b/assets/stylesheets/bootstrap/mixins/_forms.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Form validation states
 //
 // Used in forms.less to generate the form validation CSS for warnings, errors,
@@ -22,8 +24,8 @@
     border-color: $border-color;
     @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
     &:focus {
-      border-color: darken($border-color, 10%);
-      $shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($border-color, 20%);
+      border-color: color.adjust($border-color, $lightness: -10%, $space: hsl);
+      $shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px color.adjust($border-color, $lightness: 20%, $space: hsl);
       @include box-shadow($shadow);
     }
   }
@@ -53,7 +55,7 @@
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
 @mixin form-control-focus($color: $input-border-focus) {
-  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  $color-rgba: rgba(color.channel($color, "red", $space: rgb), color.channel($color, "green", $space: rgb), color.channel($color, "blue", $space: rgb), .6);
   &:focus {
     border-color: $color;
     outline: 0;
diff --git a/assets/stylesheets/bootstrap/mixins/_labels.scss b/assets/stylesheets/bootstrap/mixins/_labels.scss
index eda6dfd29..ec7d6602b 100644
--- a/assets/stylesheets/bootstrap/mixins/_labels.scss
+++ b/assets/stylesheets/bootstrap/mixins/_labels.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Labels
 
 @mixin label-variant($color) {
@@ -6,7 +8,7 @@
   &[href] {
     &:hover,
     &:focus {
-      background-color: darken($color, 10%);
+      background-color: color.adjust($color, $lightness: -10%, $space: hsl);
     }
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss
index c478eeb31..5aabbabb0 100644
--- a/assets/stylesheets/bootstrap/mixins/_list-group.scss
+++ b/assets/stylesheets/bootstrap/mixins/_list-group.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // List Groups
 
 @mixin list-group-item-variant($state, $background, $color) {
@@ -19,7 +21,7 @@
     &:hover,
     &:focus {
       color: $color;
-      background-color: darken($background, 5%);
+      background-color: color.adjust($background, $lightness: -5%, $space: hsl);
     }
     &.active,
     &.active:hover,
diff --git a/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss b/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
index 146d9961c..3dea46636 100644
--- a/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
+++ b/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
@@ -5,6 +5,8 @@
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
 @mixin navbar-vertical-align($element-height) {
-  margin-top: math.div(($navbar-height - $element-height), 2);
-  margin-bottom: math.div(($navbar-height - $element-height), 2);
+  & {
+    margin-top: math.div(($navbar-height - $element-height), 2);
+    margin-bottom: math.div(($navbar-height - $element-height), 2);
+  }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_table-row.scss b/assets/stylesheets/bootstrap/mixins/_table-row.scss
index 136795081..27c9b7cca 100644
--- a/assets/stylesheets/bootstrap/mixins/_table-row.scss
+++ b/assets/stylesheets/bootstrap/mixins/_table-row.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Tables
 
 @mixin table-row-variant($state, $background) {
@@ -22,7 +24,7 @@
     &.#{$state}:hover > td,
     &:hover > .#{$state},
     &.#{$state}:hover > th {
-      background-color: darken($background, 5%);
+      background-color: color.adjust($background, $lightness: -5%, $space: hsl);
     }
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
index 3b446c415..6b3dcdc78 100644
--- a/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
+++ b/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Typography
 
 // [converter] $parent hack
@@ -7,6 +9,6 @@
   }
   a#{$parent}:hover,
   a#{$parent}:focus {
-    color: darken($color, 10%);
+    color: color.adjust($color, $lightness: -10%, $space: hsl);
   }
 }