From 64a5af88fbfa778a02c04e7cc9811f767bcc6e09 Mon Sep 17 00:00:00 2001
From: mechanicalgux <mechanicalgux@gmail.com>
Date: Mon, 14 Oct 2024 23:33:27 +0800
Subject: [PATCH 1/4] fix: deprecation warnings for dart sass

---
 assets/stylesheets/bootstrap/_forms.scss      |  4 +-
 assets/stylesheets/bootstrap/_jumbotron.scss  |  4 +-
 assets/stylesheets/bootstrap/_navbar.scss     | 19 +++---
 assets/stylesheets/bootstrap/_popovers.scss   |  4 +-
 assets/stylesheets/bootstrap/_theme.scss      | 52 ++++++++--------
 assets/stylesheets/bootstrap/_variables.scss  | 60 ++++++++++---------
 .../stylesheets/bootstrap/mixins/_alerts.scss |  6 +-
 .../bootstrap/mixins/_background-variant.scss |  4 +-
 .../bootstrap/mixins/_buttons.scss            | 18 +++---
 .../stylesheets/bootstrap/mixins/_forms.scss  |  8 ++-
 .../stylesheets/bootstrap/mixins/_labels.scss |  4 +-
 .../bootstrap/mixins/_list-group.scss         |  4 +-
 .../bootstrap/mixins/_nav-vertical-align.scss |  6 +-
 .../bootstrap/mixins/_table-row.scss          |  4 +-
 .../bootstrap/mixins/_text-emphasis.scss      |  4 +-
 15 files changed, 116 insertions(+), 85 deletions(-)

diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss
index 00951b3f27..f4d89fb3e4 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 07a0f98ff7..bb169d19ec 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 135aba0aed..0c0e7d0d86 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 6f83842280..9cde74a7c6 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 046eed7a98..0b6a10e406 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 02fe1f43b7..34feabd7d2 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 b1e6df9d24..a9d4387924 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 4c7769e13a..e93d4e7d09 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 5afa735e8e..4cdf5c5909 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 46578a14b0..9350aaa18f 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 eda6dfd29e..ec7d6602b3 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 c478eeb31e..5aabbabb01 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 146d9961c4..3dea466360 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 136795081e..27c9b7cca5 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 3b446c4152..6b3dcdc781 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);
   }
 }

From 17ced10e43c6f0f57ac5f5deed3dfd491b8097d3 Mon Sep 17 00:00:00 2001
From: Tomas Stan <tomas.stan@enga.systems>
Date: Tue, 18 Mar 2025 22:41:05 +0200
Subject: [PATCH 2/4] Dart sass deprecation fixes

---
 assets/stylesheets/bootstrap/_forms.scss      |  2 +-
 assets/stylesheets/bootstrap/_panels.scss     |  3 +-
 assets/stylesheets/bootstrap/_type.scss       |  4 +-
 assets/stylesheets/bootstrap/_variables.scss  | 26 ++++++------
 .../bootstrap/mixins/_grid-framework.scss     | 12 +++---
 .../stylesheets/bootstrap/mixins/_grid.scss   | 40 +++++++++----------
 6 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss
index f4d89fb3e4..dd9ba3b12d 100644
--- a/assets/stylesheets/bootstrap/_forms.scss
+++ b/assets/stylesheets/bootstrap/_forms.scss
@@ -584,7 +584,7 @@ textarea.form-control {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: floor(math.div($grid-gutter-width, 2));
+    right: math.floor(math.div($grid-gutter-width, 2));
   }
 
   // Form group sizes
diff --git a/assets/stylesheets/bootstrap/_panels.scss b/assets/stylesheets/bootstrap/_panels.scss
index 8947ed254e..fa5d759d3b 100644
--- a/assets/stylesheets/bootstrap/_panels.scss
+++ b/assets/stylesheets/bootstrap/_panels.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 //
 // Panels
 // --------------------------------------------------
@@ -33,7 +34,7 @@
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: ceil(($font-size-base * 1.125));
+  font-size: math.ceil(($font-size-base * 1.125));
   color: inherit;
 
   > a,
diff --git a/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss
index ac2eccdc97..2f434a7c7c 100644
--- a/assets/stylesheets/bootstrap/_type.scss
+++ b/assets/stylesheets/bootstrap/_type.scss
@@ -62,7 +62,7 @@ p {
 
 .lead {
   margin-bottom: $line-height-computed;
-  font-size: floor(($font-size-base * 1.15));
+  font-size: math.floor(($font-size-base * 1.15));
   font-weight: 300;
   line-height: 1.4;
 
@@ -78,7 +78,7 @@ p {
 // Ex: math.div(12px small font, 14px base font) * 100% = about 85%
 small,
 .small {
-  font-size: floor(math.div(100% * $font-size-small, $font-size-base));
+  font-size: math.floor(math.div(100% * $font-size-small, $font-size-base));
 }
 
 mark,
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
index 34feabd7d2..03ef6db968 100644
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@@ -53,20 +53,20 @@ $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !def
 $font-family-base:        $font-family-sans-serif !default;
 
 $font-size-base:          14px !default;
-$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
-$font-size-small:         ceil(($font-size-base * .85)) !default; // ~12px
+$font-size-large:         math.ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         math.ceil(($font-size-base * .85)) !default; // ~12px
 
-$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
-$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
-$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
-$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h1:            math.floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2:            math.floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3:            math.ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4:            math.ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-h5:            $font-size-base !default;
-$font-size-h6:            ceil(($font-size-base * .85)) !default; // ~12px
+$font-size-h6:            math.ceil(($font-size-base * .85)) !default; // ~12px
 
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base:        1.428571429 !default; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+$line-height-computed:    math.floor(($font-size-base * $line-height-base)) !default; // ~20px
 
 //** By default, this inherits from the `<body>`.
 $headings-font-family:    inherit !default;
@@ -216,9 +216,9 @@ $input-color-placeholder:        #999 !default;
 //** Default `.form-control` height
 $input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
 //** Large `.form-control` height
-$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-large:             (math.ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
 //** Small `.form-control` height
-$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+$input-height-small:             (math.floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
 
 //** `.form-group` margin
 $form-group-margin-bottom:       15px !default;
@@ -368,7 +368,7 @@ $container-lg:                 $container-large-desktop !default;
 $navbar-height:                    50px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
-$navbar-padding-horizontal:        floor(math.div($grid-gutter-width, 2)) !default;
+$navbar-padding-horizontal:        math.floor(math.div($grid-gutter-width, 2)) !default;
 $navbar-padding-vertical:          math.div(($navbar-height - $line-height-computed), 2) !default;
 $navbar-collapse-max-height:       340px !default;
 
@@ -496,8 +496,8 @@ $jumbotron-padding:              30px !default;
 $jumbotron-color:                inherit !default;
 $jumbotron-bg:                   $gray-lighter !default;
 $jumbotron-heading-color:        inherit !default;
-$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
-$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
+$jumbotron-font-size:            math.ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size:    math.ceil(($font-size-base * 4.5)) !default;
 
 
 //== Form states and alerts
diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
index 6160a048e3..31997d7a3d 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
@@ -14,8 +14,8 @@
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-right: floor(math.div($grid-gutter-width, 2));
-    padding-left: ceil(math.div($grid-gutter-width, 2));
+    padding-right: math.floor(math.div($grid-gutter-width, 2));
+    padding-left: math.ceil(math.div($grid-gutter-width, 2));
   }
 }
 
@@ -34,12 +34,12 @@
 @mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
-      width: percentage(math.div($index, $grid-columns));
+      width: math.percentage(math.div($index, $grid-columns));
     }
   }
   @if ($type == push) and ($index > 0) {
     .col-#{$class}-push-#{$index} {
-      left: percentage(math.div($index, $grid-columns));
+      left: math.percentage(math.div($index, $grid-columns));
     }
   }
   @if ($type == push) and ($index == 0) {
@@ -49,7 +49,7 @@
   }
   @if ($type == pull) and ($index > 0) {
     .col-#{$class}-pull-#{$index} {
-      right: percentage(math.div($index, $grid-columns));
+      right: math.percentage(math.div($index, $grid-columns));
     }
   }
   @if ($type == pull) and ($index == 0) {
@@ -59,7 +59,7 @@
   }
   @if ($type == offset) {
     .col-#{$class}-offset-#{$index} {
-      margin-left: percentage(math.div($index, $grid-columns));
+      margin-left: math.percentage(math.div($index, $grid-columns));
     }
   }
 }
diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss
index 0cee189a97..2dfd132a10 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid.scss
@@ -5,8 +5,8 @@
 
 // Centered container element
 @mixin container-fixed($gutter: $grid-gutter-width) {
-  padding-right: ceil(math.div($gutter, 2));
-  padding-left: floor(math.div($gutter, 2));
+  padding-right: math.ceil(math.div($gutter, 2));
+  padding-left: math.floor(math.div($gutter, 2));
   margin-right: auto;
   margin-left: auto;
   @include clearfix;
@@ -14,8 +14,8 @@
 
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
-  margin-right: floor(math.div($gutter, -2));
-  margin-left: ceil(math.div($gutter, -2));
+  margin-right: math.floor(math.div($gutter, -2));
+  margin-left: math.ceil(math.div($gutter, -2));
   @include clearfix;
 }
 
@@ -23,19 +23,19 @@
 @mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   float: left;
-  width: percentage(math.div($columns, $grid-columns));
+  width: math.percentage(math.div($columns, $grid-columns));
   min-height: 1px;
   padding-right: math.div($gutter, 2);
   padding-left: math.div($gutter, 2);
 }
 @mixin make-xs-column-offset($columns) {
-  margin-left: percentage(math.div($columns, $grid-columns));
+  margin-left: math.percentage(math.div($columns, $grid-columns));
 }
 @mixin make-xs-column-push($columns) {
-  left: percentage(math.div($columns, $grid-columns));
+  left: math.percentage(math.div($columns, $grid-columns));
 }
 @mixin make-xs-column-pull($columns) {
-  right: percentage(math.div($columns, $grid-columns));
+  right: math.percentage(math.div($columns, $grid-columns));
 }
 
 // Generate the small columns
@@ -47,22 +47,22 @@
 
   @media (min-width: $screen-sm-min) {
     float: left;
-    width: percentage(math.div($columns, $grid-columns));
+    width: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-sm-column-offset($columns) {
   @media (min-width: $screen-sm-min) {
-    margin-left: percentage(math.div($columns, $grid-columns));
+    margin-left: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-sm-column-push($columns) {
   @media (min-width: $screen-sm-min) {
-    left: percentage(math.div($columns, $grid-columns));
+    left: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-sm-column-pull($columns) {
   @media (min-width: $screen-sm-min) {
-    right: percentage(math.div($columns, $grid-columns));
+    right: math.percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -75,22 +75,22 @@
 
   @media (min-width: $screen-md-min) {
     float: left;
-    width: percentage(math.div($columns, $grid-columns));
+    width: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-md-column-offset($columns) {
   @media (min-width: $screen-md-min) {
-    margin-left: percentage(math.div($columns, $grid-columns));
+    margin-left: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-md-column-push($columns) {
   @media (min-width: $screen-md-min) {
-    left: percentage(math.div($columns, $grid-columns));
+    left: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-md-column-pull($columns) {
   @media (min-width: $screen-md-min) {
-    right: percentage(math.div($columns, $grid-columns));
+    right: math.percentage(math.div($columns, $grid-columns));
   }
 }
 
@@ -103,21 +103,21 @@
 
   @media (min-width: $screen-lg-min) {
     float: left;
-    width: percentage(math.div($columns, $grid-columns));
+    width: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-lg-column-offset($columns) {
   @media (min-width: $screen-lg-min) {
-    margin-left: percentage(math.div($columns, $grid-columns));
+    margin-left: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-lg-column-push($columns) {
   @media (min-width: $screen-lg-min) {
-    left: percentage(math.div($columns, $grid-columns));
+    left: math.percentage(math.div($columns, $grid-columns));
   }
 }
 @mixin make-lg-column-pull($columns) {
   @media (min-width: $screen-lg-min) {
-    right: percentage(math.div($columns, $grid-columns));
+    right: math.percentage(math.div($columns, $grid-columns));
   }
 }

From 61e632dbcd2598648f9ecbdb139b6e4f78de330a Mon Sep 17 00:00:00 2001
From: Tomas Stan <tomas.stan@enga.systems>
Date: Wed, 19 Mar 2025 12:31:31 +0200
Subject: [PATCH 3/4] More Dart Sass deprecation fixes

---
 assets/stylesheets/bootstrap/_alerts.scss     |  3 +-
 assets/stylesheets/bootstrap/_badges.scss     |  3 +-
 .../stylesheets/bootstrap/_breadcrumbs.scss   |  3 +-
 .../stylesheets/bootstrap/_button-groups.scss |  3 +
 assets/stylesheets/bootstrap/_buttons.scss    |  3 +-
 assets/stylesheets/bootstrap/_carousel.scss   |  3 +-
 assets/stylesheets/bootstrap/_close.scss      |  3 +-
 assets/stylesheets/bootstrap/_code.scss       |  2 +
 .../bootstrap/_component-animations.scss      |  1 +
 assets/stylesheets/bootstrap/_dropdowns.scss  |  3 +-
 assets/stylesheets/bootstrap/_forms.scss      |  3 +-
 assets/stylesheets/bootstrap/_glyphicons.scss |  2 +
 assets/stylesheets/bootstrap/_grid.scss       |  3 +-
 .../stylesheets/bootstrap/_input-groups.scss  |  3 +
 assets/stylesheets/bootstrap/_jumbotron.scss  |  5 +-
 assets/stylesheets/bootstrap/_labels.scss     |  2 +
 assets/stylesheets/bootstrap/_list-group.scss |  3 +-
 assets/stylesheets/bootstrap/_mixins.scss     | 60 +++++++++----------
 assets/stylesheets/bootstrap/_modals.scss     |  3 +
 assets/stylesheets/bootstrap/_navbar.scss     |  3 +
 assets/stylesheets/bootstrap/_navs.scss       |  3 +-
 assets/stylesheets/bootstrap/_pager.scss      |  3 +-
 assets/stylesheets/bootstrap/_pagination.scss |  3 +
 assets/stylesheets/bootstrap/_panels.scss     |  3 +-
 assets/stylesheets/bootstrap/_popovers.scss   |  3 +-
 .../stylesheets/bootstrap/_progress-bars.scss |  3 +-
 .../bootstrap/_responsive-utilities.scss      |  3 +-
 .../stylesheets/bootstrap/_scaffolding.scss   |  3 +-
 assets/stylesheets/bootstrap/_tables.scss     |  3 +-
 assets/stylesheets/bootstrap/_theme.scss      |  5 +-
 assets/stylesheets/bootstrap/_thumbnails.scss |  3 +-
 assets/stylesheets/bootstrap/_tooltip.scss    |  3 +-
 assets/stylesheets/bootstrap/_type.scss       |  2 +
 assets/stylesheets/bootstrap/_utilities.scss  |  3 +-
 assets/stylesheets/bootstrap/_wells.scss      |  3 +-
 .../stylesheets/bootstrap/mixins/_forms.scss  |  2 +
 .../bootstrap/mixins/_grid-framework.scss     |  2 +
 .../stylesheets/bootstrap/mixins/_grid.scss   |  3 +
 .../bootstrap/mixins/_nav-divider.scss        |  2 +
 .../bootstrap/mixins/_nav-vertical-align.scss |  2 +
 .../bootstrap/mixins/_progress-bar.scss       |  1 +
 .../bootstrap/mixins/_vendor-prefixes.scss    |  2 +
 42 files changed, 117 insertions(+), 57 deletions(-)

diff --git a/assets/stylesheets/bootstrap/_alerts.scss b/assets/stylesheets/bootstrap/_alerts.scss
index f9e69bd084..93e2f93879 100644
--- a/assets/stylesheets/bootstrap/_alerts.scss
+++ b/assets/stylesheets/bootstrap/_alerts.scss
@@ -1,7 +1,8 @@
 //
 // Alerts
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base styles
 // -------------------------
diff --git a/assets/stylesheets/bootstrap/_badges.scss b/assets/stylesheets/bootstrap/_badges.scss
index 44d5dd6f4b..a19e6f4701 100644
--- a/assets/stylesheets/bootstrap/_badges.scss
+++ b/assets/stylesheets/bootstrap/_badges.scss
@@ -1,7 +1,8 @@
 //
 // Badges
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 .badge {
diff --git a/assets/stylesheets/bootstrap/_breadcrumbs.scss b/assets/stylesheets/bootstrap/_breadcrumbs.scss
index 67e39d909a..711b006c73 100644
--- a/assets/stylesheets/bootstrap/_breadcrumbs.scss
+++ b/assets/stylesheets/bootstrap/_breadcrumbs.scss
@@ -1,7 +1,8 @@
 //
 // Breadcrumbs
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .breadcrumb {
   padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
diff --git a/assets/stylesheets/bootstrap/_button-groups.scss b/assets/stylesheets/bootstrap/_button-groups.scss
index 6a62faf5df..63598024f8 100644
--- a/assets/stylesheets/bootstrap/_button-groups.scss
+++ b/assets/stylesheets/bootstrap/_button-groups.scss
@@ -1,6 +1,9 @@
 //
 // Button groups
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
+@use "buttons" as *;
 
 // Make the div behave like a button
 .btn-group,
diff --git a/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss
index 62962d786a..9ccc545deb 100644
--- a/assets/stylesheets/bootstrap/_buttons.scss
+++ b/assets/stylesheets/bootstrap/_buttons.scss
@@ -1,7 +1,8 @@
 //
 // Buttons
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base styles
 // --------------------------------------------------
diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss
index 684360ff88..bb712d5737 100644
--- a/assets/stylesheets/bootstrap/_carousel.scss
+++ b/assets/stylesheets/bootstrap/_carousel.scss
@@ -2,7 +2,8 @@
 //
 // Carousel
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Wrapper for the slide container and indicators
 .carousel {
diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss
index a858a8f367..2590f62661 100644
--- a/assets/stylesheets/bootstrap/_close.scss
+++ b/assets/stylesheets/bootstrap/_close.scss
@@ -1,7 +1,8 @@
 //
 // Close icons
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .close {
   float: right;
diff --git a/assets/stylesheets/bootstrap/_code.scss b/assets/stylesheets/bootstrap/_code.scss
index 6299ddbf3f..54c3da7286 100644
--- a/assets/stylesheets/bootstrap/_code.scss
+++ b/assets/stylesheets/bootstrap/_code.scss
@@ -3,6 +3,8 @@
 // Code (inline and block)
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
 
 // Inline and block code styles
 code,
diff --git a/assets/stylesheets/bootstrap/_component-animations.scss b/assets/stylesheets/bootstrap/_component-animations.scss
index ca4d6b0682..085a5048ca 100644
--- a/assets/stylesheets/bootstrap/_component-animations.scss
+++ b/assets/stylesheets/bootstrap/_component-animations.scss
@@ -1,6 +1,7 @@
 //
 // Component animations
 // --------------------------------------------------
+@use "mixins" as *;
 
 // Heads up!
 //
diff --git a/assets/stylesheets/bootstrap/_dropdowns.scss b/assets/stylesheets/bootstrap/_dropdowns.scss
index 0a5898a8d0..1f19759208 100644
--- a/assets/stylesheets/bootstrap/_dropdowns.scss
+++ b/assets/stylesheets/bootstrap/_dropdowns.scss
@@ -1,7 +1,8 @@
 //
 // Dropdown menus
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Dropdown arrow/caret
 .caret {
diff --git a/assets/stylesheets/bootstrap/_forms.scss b/assets/stylesheets/bootstrap/_forms.scss
index dd9ba3b12d..0afb992d67 100644
--- a/assets/stylesheets/bootstrap/_forms.scss
+++ b/assets/stylesheets/bootstrap/_forms.scss
@@ -1,10 +1,11 @@
 @use "sass:color";
-
 @use "sass:math";
 //
 // Forms
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
 
 // Normalize non-controls
 //
diff --git a/assets/stylesheets/bootstrap/_glyphicons.scss b/assets/stylesheets/bootstrap/_glyphicons.scss
index bd5966dd26..b4684e95b8 100644
--- a/assets/stylesheets/bootstrap/_glyphicons.scss
+++ b/assets/stylesheets/bootstrap/_glyphicons.scss
@@ -6,6 +6,8 @@
 // inline element with the appropriate classes, like so:
 //
 // <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+@use "variables" as *;
+@use "mixins" as *;
 
 @at-root {
   // Import the fonts
diff --git a/assets/stylesheets/bootstrap/_grid.scss b/assets/stylesheets/bootstrap/_grid.scss
index 2ddb73debe..ff3966cf98 100644
--- a/assets/stylesheets/bootstrap/_grid.scss
+++ b/assets/stylesheets/bootstrap/_grid.scss
@@ -1,7 +1,8 @@
 //
 // Grid system
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Container widths
 //
diff --git a/assets/stylesheets/bootstrap/_input-groups.scss b/assets/stylesheets/bootstrap/_input-groups.scss
index 04015feffd..7f6c123512 100644
--- a/assets/stylesheets/bootstrap/_input-groups.scss
+++ b/assets/stylesheets/bootstrap/_input-groups.scss
@@ -2,6 +2,9 @@
 // Input groups
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
+
 // Base styles
 // -------------------------
 .input-group {
diff --git a/assets/stylesheets/bootstrap/_jumbotron.scss b/assets/stylesheets/bootstrap/_jumbotron.scss
index bb169d19ec..eee4a919ff 100644
--- a/assets/stylesheets/bootstrap/_jumbotron.scss
+++ b/assets/stylesheets/bootstrap/_jumbotron.scss
@@ -1,10 +1,11 @@
 @use "sass:color";
-
 @use "sass:math";
+
 //
 // Jumbotron
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .jumbotron {
   padding-top: $jumbotron-padding;
diff --git a/assets/stylesheets/bootstrap/_labels.scss b/assets/stylesheets/bootstrap/_labels.scss
index f7f3013923..717657bd62 100644
--- a/assets/stylesheets/bootstrap/_labels.scss
+++ b/assets/stylesheets/bootstrap/_labels.scss
@@ -1,6 +1,8 @@
 //
 // Labels
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
 
 .label {
   display: inline;
diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss
index 529f179e8c..dbd14c844a 100644
--- a/assets/stylesheets/bootstrap/_list-group.scss
+++ b/assets/stylesheets/bootstrap/_list-group.scss
@@ -1,7 +1,8 @@
 //
 // List groups
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 //
diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss
index 78cd5aa0ff..0e2c50b260 100644
--- a/assets/stylesheets/bootstrap/_mixins.scss
+++ b/assets/stylesheets/bootstrap/_mixins.scss
@@ -2,39 +2,39 @@
 // --------------------------------------------------
 
 // Utilities
-@import "mixins/hide-text";
-@import "mixins/opacity";
-@import "mixins/image";
-@import "mixins/labels";
-@import "mixins/reset-filter";
-@import "mixins/resize";
-@import "mixins/responsive-visibility";
-@import "mixins/size";
-@import "mixins/tab-focus";
-@import "mixins/reset-text";
-@import "mixins/text-emphasis";
-@import "mixins/text-overflow";
-@import "mixins/vendor-prefixes";
+@forward "mixins/hide-text";
+@forward "mixins/opacity";
+@forward "mixins/image";
+@forward "mixins/labels";
+@forward "mixins/reset-filter";
+@forward "mixins/resize";
+@forward "mixins/responsive-visibility";
+@forward "mixins/size";
+@forward "mixins/tab-focus";
+@forward "mixins/reset-text";
+@forward "mixins/text-emphasis";
+@forward "mixins/text-overflow";
+@forward "mixins/vendor-prefixes";
 
 // Components
-@import "mixins/alerts";
-@import "mixins/buttons";
-@import "mixins/panels";
-@import "mixins/pagination";
-@import "mixins/list-group";
-@import "mixins/nav-divider";
-@import "mixins/forms";
-@import "mixins/progress-bar";
-@import "mixins/table-row";
+@forward "mixins/alerts";
+@forward "mixins/buttons";
+@forward "mixins/panels";
+@forward "mixins/pagination";
+@forward "mixins/list-group";
+@forward "mixins/nav-divider";
+@forward "mixins/forms";
+@forward "mixins/progress-bar";
+@forward "mixins/table-row";
 
 // Skins
-@import "mixins/background-variant";
-@import "mixins/border-radius";
-@import "mixins/gradients";
+@forward "mixins/background-variant";
+@forward "mixins/border-radius";
+@forward "mixins/gradients";
 
 // Layout
-@import "mixins/clearfix";
-@import "mixins/center-block";
-@import "mixins/nav-vertical-align";
-@import "mixins/grid-framework";
-@import "mixins/grid";
+@forward "mixins/clearfix";
+@forward "mixins/center-block";
+@forward "mixins/nav-vertical-align";
+@forward "mixins/grid-framework";
+@forward "mixins/grid";
diff --git a/assets/stylesheets/bootstrap/_modals.scss b/assets/stylesheets/bootstrap/_modals.scss
index cf59befdda..93469bfc09 100644
--- a/assets/stylesheets/bootstrap/_modals.scss
+++ b/assets/stylesheets/bootstrap/_modals.scss
@@ -2,6 +2,9 @@
 // Modals
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
+
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss
index 0c0e7d0d86..9e918b3f32 100644
--- a/assets/stylesheets/bootstrap/_navbar.scss
+++ b/assets/stylesheets/bootstrap/_navbar.scss
@@ -4,6 +4,9 @@
 //
 // Navbars
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
+@use "forms" as *;
 
 
 // Wrapper and base class
diff --git a/assets/stylesheets/bootstrap/_navs.scss b/assets/stylesheets/bootstrap/_navs.scss
index f4f0a55bae..c2722e5d8f 100644
--- a/assets/stylesheets/bootstrap/_navs.scss
+++ b/assets/stylesheets/bootstrap/_navs.scss
@@ -1,7 +1,8 @@
 //
 // Navs
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 // --------------------------------------------------
diff --git a/assets/stylesheets/bootstrap/_pager.scss b/assets/stylesheets/bootstrap/_pager.scss
index 07622389e9..3c3da6d8bf 100644
--- a/assets/stylesheets/bootstrap/_pager.scss
+++ b/assets/stylesheets/bootstrap/_pager.scss
@@ -1,7 +1,8 @@
 //
 // Pager pagination
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .pager {
   padding-left: 0;
diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss
index c53082877e..5c202307da 100644
--- a/assets/stylesheets/bootstrap/_pagination.scss
+++ b/assets/stylesheets/bootstrap/_pagination.scss
@@ -1,6 +1,9 @@
 //
 // Pagination (multiple pages)
 // --------------------------------------------------
+@use "variables" as *;
+@use "mixins" as *;
+
 .pagination {
   display: inline-block;
   padding-left: 0;
diff --git a/assets/stylesheets/bootstrap/_panels.scss b/assets/stylesheets/bootstrap/_panels.scss
index fa5d759d3b..d7da0d9a2a 100644
--- a/assets/stylesheets/bootstrap/_panels.scss
+++ b/assets/stylesheets/bootstrap/_panels.scss
@@ -2,7 +2,8 @@
 //
 // Panels
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 .panel {
diff --git a/assets/stylesheets/bootstrap/_popovers.scss b/assets/stylesheets/bootstrap/_popovers.scss
index 9cde74a7c6..0da7578c00 100644
--- a/assets/stylesheets/bootstrap/_popovers.scss
+++ b/assets/stylesheets/bootstrap/_popovers.scss
@@ -3,7 +3,8 @@
 //
 // Popovers
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 .popover {
   position: absolute;
diff --git a/assets/stylesheets/bootstrap/_progress-bars.scss b/assets/stylesheets/bootstrap/_progress-bars.scss
index e7897dee63..b791f6bd2c 100644
--- a/assets/stylesheets/bootstrap/_progress-bars.scss
+++ b/assets/stylesheets/bootstrap/_progress-bars.scss
@@ -1,7 +1,8 @@
 //
 // Progress bars
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Bar animations
 // -------------------------
diff --git a/assets/stylesheets/bootstrap/_responsive-utilities.scss b/assets/stylesheets/bootstrap/_responsive-utilities.scss
index 73641aae7f..441316f7c4 100644
--- a/assets/stylesheets/bootstrap/_responsive-utilities.scss
+++ b/assets/stylesheets/bootstrap/_responsive-utilities.scss
@@ -1,7 +1,8 @@
 //
 // Responsive: Utility classes
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // IE10 in Windows (Phone) 8
 //
diff --git a/assets/stylesheets/bootstrap/_scaffolding.scss b/assets/stylesheets/bootstrap/_scaffolding.scss
index 7fda593848..398ceda58c 100644
--- a/assets/stylesheets/bootstrap/_scaffolding.scss
+++ b/assets/stylesheets/bootstrap/_scaffolding.scss
@@ -1,7 +1,8 @@
 //
 // Scaffolding
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Reset the box-sizing
 //
diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss
index 7bff4b0450..4a2628631e 100644
--- a/assets/stylesheets/bootstrap/_tables.scss
+++ b/assets/stylesheets/bootstrap/_tables.scss
@@ -1,7 +1,8 @@
 //
 // Tables
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 table {
   background-color: $table-bg;
diff --git a/assets/stylesheets/bootstrap/_theme.scss b/assets/stylesheets/bootstrap/_theme.scss
index 0b6a10e406..1f88cab911 100644
--- a/assets/stylesheets/bootstrap/_theme.scss
+++ b/assets/stylesheets/bootstrap/_theme.scss
@@ -9,9 +9,8 @@
 //
 // Load core variables and mixins
 // --------------------------------------------------
-
-@import "variables";
-@import "mixins";
+@use "variables" as *;
+@use "mixins" as *;
 
 
 //
diff --git a/assets/stylesheets/bootstrap/_thumbnails.scss b/assets/stylesheets/bootstrap/_thumbnails.scss
index 835452f3b6..bcb90720e9 100644
--- a/assets/stylesheets/bootstrap/_thumbnails.scss
+++ b/assets/stylesheets/bootstrap/_thumbnails.scss
@@ -1,7 +1,8 @@
 //
 // Thumbnails
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Mixin and adjust the regular image class
 .thumbnail {
diff --git a/assets/stylesheets/bootstrap/_tooltip.scss b/assets/stylesheets/bootstrap/_tooltip.scss
index fa69a81ece..d846e69397 100644
--- a/assets/stylesheets/bootstrap/_tooltip.scss
+++ b/assets/stylesheets/bootstrap/_tooltip.scss
@@ -1,7 +1,8 @@
 //
 // Tooltips
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 .tooltip {
diff --git a/assets/stylesheets/bootstrap/_type.scss b/assets/stylesheets/bootstrap/_type.scss
index 2f434a7c7c..8f118d4adb 100644
--- a/assets/stylesheets/bootstrap/_type.scss
+++ b/assets/stylesheets/bootstrap/_type.scss
@@ -3,6 +3,8 @@
 // Typography
 // --------------------------------------------------
 
+@use "variables" as *;
+@use "mixins" as *;
 
 // Headings
 // -------------------------
diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss
index 8c99c71643..bf7e20eb91 100644
--- a/assets/stylesheets/bootstrap/_utilities.scss
+++ b/assets/stylesheets/bootstrap/_utilities.scss
@@ -1,7 +1,8 @@
 //
 // Utility classes
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Floats
 // -------------------------
diff --git a/assets/stylesheets/bootstrap/_wells.scss b/assets/stylesheets/bootstrap/_wells.scss
index 9a048bdd0c..1066800969 100644
--- a/assets/stylesheets/bootstrap/_wells.scss
+++ b/assets/stylesheets/bootstrap/_wells.scss
@@ -1,7 +1,8 @@
 //
 // Wells
 // --------------------------------------------------
-
+@use "variables" as *;
+@use "mixins" as *;
 
 // Base class
 .well {
diff --git a/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss
index 9350aaa18f..aec8a82a26 100644
--- a/assets/stylesheets/bootstrap/mixins/_forms.scss
+++ b/assets/stylesheets/bootstrap/mixins/_forms.scss
@@ -1,4 +1,6 @@
 @use "sass:color";
+@use "../variables" as *;
+@use "vendor-prefixes" as *;
 
 // Form validation states
 //
diff --git a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
index 31997d7a3d..668332a818 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid-framework.scss
@@ -4,6 +4,8 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
+@use "../variables" as *;
+
 // [converter] This is defined recursively in LESS, but Sass supports real loops
 @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
   @for $i from (1 + 1) through $grid-columns {
diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss
index 2dfd132a10..f18d8f7305 100644
--- a/assets/stylesheets/bootstrap/mixins/_grid.scss
+++ b/assets/stylesheets/bootstrap/mixins/_grid.scss
@@ -3,6 +3,9 @@
 //
 // Generate semantic grid columns with these mixins.
 
+@use "../variables" as *;
+@use "clearfix" as *;
+
 // Centered container element
 @mixin container-fixed($gutter: $grid-gutter-width) {
   padding-right: math.ceil(math.div($gutter, 2));
diff --git a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
index 80a39d43ad..2f90787d7d 100644
--- a/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
+++ b/assets/stylesheets/bootstrap/mixins/_nav-divider.scss
@@ -3,6 +3,8 @@
 //
 // Dividers (basically an hr) within dropdowns and nav lists
 
+@use "../variables" as *;
+
 @mixin nav-divider($color: #e5e5e5) {
   height: 1px;
   margin: (math.div($line-height-computed, 2) - 1) 0;
diff --git a/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss b/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
index 3dea466360..3023d27a4d 100644
--- a/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
+++ b/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss
@@ -4,6 +4,8 @@
 // Vertically center elements in the navbar.
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
+@use "../variables" as *;
+
 @mixin navbar-vertical-align($element-height) {
   & {
     margin-top: math.div(($navbar-height - $element-height), 2);
diff --git a/assets/stylesheets/bootstrap/mixins/_progress-bar.scss b/assets/stylesheets/bootstrap/mixins/_progress-bar.scss
index 90a62afc2d..46b6ccada7 100644
--- a/assets/stylesheets/bootstrap/mixins/_progress-bar.scss
+++ b/assets/stylesheets/bootstrap/mixins/_progress-bar.scss
@@ -1,4 +1,5 @@
 // Progress bars
+@use "gradients" as *;
 
 @mixin progress-bar-variant($color) {
   background-color: $color;
diff --git a/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss b/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss
index 93d5775281..6016248d0b 100644
--- a/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss
+++ b/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss
@@ -3,6 +3,8 @@
 // All vendor mixins are deprecated as of v3.2.0 due to the introduction of
 // Autoprefixer in our Gruntfile. They have been removed in v4.
 
+@use "../variables" as *;
+
 // - Animations
 // - Backface visibility
 // - Box shadow

From ee413172c4576a3c427ff347e18cefcf7df6e524 Mon Sep 17 00:00:00 2001
From: Tomas Stan <tomas.stan@enga.systems>
Date: Wed, 19 Mar 2025 14:15:33 +0200
Subject: [PATCH 4/4] Fixes missing @use statement for a mixin

---
 assets/stylesheets/bootstrap/mixins/_pagination.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/stylesheets/bootstrap/mixins/_pagination.scss b/assets/stylesheets/bootstrap/mixins/_pagination.scss
index d4a5404fce..723d8ba94f 100644
--- a/assets/stylesheets/bootstrap/mixins/_pagination.scss
+++ b/assets/stylesheets/bootstrap/mixins/_pagination.scss
@@ -1,4 +1,5 @@
 // Pagination
+@use "border-radius" as *;
 
 @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
   > li {