@gitlab/ui 113.3.2 → 113.4.0

package/src/vendor/bootstrap/scss/_functions.scss

@@ -1,3 +1,9 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -8,9 +14,9 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+    @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
       // Do nothing
-    } @else if not comparable($prev-num, $num) {
+    } @else if not math.compatible($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
     } @else if $prev-num >= $num {
       @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -23,9 +29,9 @@
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
 @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
-  @if length($map) > 0 {
-    $values: map-values($map);
-    $first-value: nth($values, 1);
+  @if list.length($map) > 0 {
+    $values: map.values($map);
+    $first-value: list.nth($values, 1);
     @if $first-value != 0 {
       @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
     }
@@ -41,10 +47,10 @@
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
 @function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -55,11 +61,11 @@
 // Requires the use of quotes around data URIs.
 
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, "data:image/svg+xml") {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -71,9 +77,9 @@
 
 // Color contrast
 @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-  $r: red($color);
-  $g: green($color);
-  $b: blue($color);
+  $r: color.red($color);
+  $g: color.green($color);
+  $b: color.blue($color);
 
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
 
@@ -86,24 +92,24 @@
 
 // Retrieve color Sass maps
 @function color($key: "blue") {
-  @return map-get($colors, $key);
+  @return map.get($colors, $key);
 }
 
 @function theme-color($key: "primary") {
-  @return map-get($theme-colors, $key);
+  @return map.get($theme-colors, $key);
 }
 
 @function gray($key: "100") {
-  @return map-get($grays, $key);
+  @return map.get($grays, $key);
 }
 
 // Request a theme color level
 @function theme-color-level($color-name: "primary", $level: 0) {
   $color: theme-color($color-name);
   $color-base: if($level > 0, $black, $white);
-  $level: abs($level);
+  $level: math.abs($level);
 
-  @return mix($color-base, $color, $level * $theme-color-interval);
+  @return color.mix($color-base, $color, $level * $theme-color-interval);
 }
 
 // Return valid calc
@@ -116,11 +122,11 @@
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -136,21 +142,21 @@
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 - $value2;
   }
 
-  @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
+  @if meta.type-of($value2) != number {
+    $value2: string.unquote("(") + $value2 + string.unquote(")");
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
   $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
   @if $dividend == 0 {
     @return 0;
   }
@@ -175,16 +181,16 @@
     }
   }
   $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
+  $dividend-unit: math.unit($dividend);
+  $divisor-unit: math.unit($divisor);
   $unit-map: (
     "px": 1px,
     "rem": 1rem,
     "em": 1em,
     "%": 1%
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
+  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
+    $result: $result * map.get($unit-map, $dividend-unit);
   }
   @return $result;
 }

package/src/vendor/bootstrap/scss/_list-group.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
@@ -89,7 +90,7 @@
 //
 // Change the layout of list group items from vertical (default) to horizontal.
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/_modal.scss

@@ -42,8 +42,8 @@
 
   // When fading in the modal, animate it to slide down
   .modal.fade & {
-    @include transition($modal-transition);
     transform: $modal-fade-transform;
+    @include transition($modal-transition);
   }
   .modal.show & {
     transform: $modal-show-transform;

package/src/vendor/bootstrap/scss/_navbar.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Contents
 //
 // Navbar
@@ -147,7 +148,7 @@
 // Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
 .navbar-expand {
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/_popover.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 .popover {
   position: absolute;
   top: 0;
@@ -156,7 +157,7 @@
   @include font-size($font-size-base);
   color: $popover-header-color;
   background-color: $popover-header-bg;
-  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
+  border-bottom: $popover-border-width solid color.adjust($popover-header-bg, $lightness: -5%);
   @include border-top-radius($popover-inner-border-radius);
 
   &:empty {

package/src/vendor/bootstrap/scss/_root.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
@@ -14,6 +15,6 @@
 
   // Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
-  --font-family-monospace: #{inspect($font-family-monospace)};
+  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
+  --font-family-monospace: #{meta.inspect($font-family-monospace)};
 }

package/src/vendor/bootstrap/scss/_tables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Condensed table w/ half padding
 //
@@ -136,7 +137,7 @@
 // size of where your table will overflow.
 
 .table-responsive {
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 

package/src/vendor/bootstrap/scss/_variables.scss

@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -18,7 +22,7 @@ $gray-900: #212529 !default;
 $black:    #000 !default;
 
 $grays: () !default;
-$grays: map-merge(
+$grays: map.merge(
   (
     "100": $gray-100,
     "200": $gray-200,
@@ -45,7 +49,7 @@ $teal:    #20c997 !default;
 $cyan:    #17a2b8 !default;
 
 $colors: () !default;
-$colors: map-merge(
+$colors: map.merge(
   (
     "blue":       $blue,
     "indigo":     $indigo,
@@ -74,7 +78,7 @@ $light:         $gray-100 !default;
 $dark:          $gray-800 !default;
 
 $theme-colors: () !default;
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   (
     "primary":    $primary,
     "secondary":  $secondary,
@@ -135,7 +139,7 @@ $enable-deprecation-messages:                 true !default;
 
 $spacer: 1rem !default;
 $spacers: () !default;
-$spacers: map-merge(
+$spacers: map.merge(
   (
     0: 0,
     1: ($spacer * .25),
@@ -149,7 +153,7 @@ $spacers: map-merge(
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
-$sizes: map-merge(
+$sizes: map.merge(
   (
     25: 25%,
     50: 50%,
@@ -175,7 +179,7 @@ $body-color:                $gray-900 !default;
 
 $link-color:                              theme-color("primary") !default;
 $link-decoration:                         none !default;
-$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-color:                        color.adjust($link-color, $lightness: -15%) !default;
 $link-hover-decoration:                   underline !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
@@ -260,7 +264,7 @@ $transition-collapse:         height .35s ease !default;
 $transition-collapse-width:   width .35s ease !default;
 
 $embed-responsive-aspect-ratios: () !default;
-$embed-responsive-aspect-ratios: join(
+$embed-responsive-aspect-ratios: list.join(
   (
     (21 9),
     (16 9),
@@ -371,7 +375,7 @@ $table-dark-bg:               $gray-800 !default;
 $table-dark-accent-bg:        rgba($white, .05) !default;
 $table-dark-hover-color:      $table-dark-color !default;
 $table-dark-hover-bg:         rgba($white, .075) !default;
-$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+$table-dark-border-color:     color.adjust($table-dark-bg, $lightness: 7.5%) !default;
 
 $table-striped-order:         odd !default;
 
@@ -484,7 +488,7 @@ $input-border-radius-lg:                $border-radius-lg !default;
 $input-border-radius-sm:                $border-radius-sm !default;
 
 $input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-border-color:              color.adjust($component-active-bg, $lightness: 25%) !default;
 $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
@@ -549,7 +553,7 @@ $custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default
 $custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
 
 $custom-control-indicator-active-color:         $component-active-color !default;
-$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-bg:            color.adjust($component-active-bg, $lightness: 35%) !default;
 $custom-control-indicator-active-box-shadow:    null !default;
 $custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
 
@@ -624,7 +628,7 @@ $custom-range-thumb-border-radius:           1rem !default;
 $custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-active-bg:               color.adjust($component-active-bg, $lightness: 35%) !default;
 $custom-range-thumb-disabled-bg:             $gray-500 !default;
 
 $custom-file-height:                $input-height !default;
@@ -664,7 +668,7 @@ $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 
 $form-validation-states: () !default;
-$form-validation-states: map-merge(
+$form-validation-states: map.merge(
   (
     "valid": (
       "color": $form-feedback-valid-color,
@@ -774,7 +778,7 @@ $dropdown-divider-margin-y:         $nav-divider-margin-y !default;
 $dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
 
 $dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-color:         color.adjust($gray-900, $lightness: -5%) !default;
 $dropdown-link-hover-bg:            $gray-200 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
@@ -890,7 +894,7 @@ $popover-border-radius:             $border-radius-lg !default;
 $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
 
-$popover-header-bg:                 darken($popover-bg, 3%) !default;
+$popover-header-bg:                 color.adjust($popover-bg, $lightness: -3%) !default;
 $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
 $popover-header-padding-x:          .75rem !default;
@@ -903,7 +907,7 @@ $popover-arrow-width:               1rem !default;
 $popover-arrow-height:              .5rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+$popover-arrow-outer-color:         color.adjust($popover-border-color, $alpha: .05) !default;
 
 
 // Toasts
@@ -1068,7 +1072,7 @@ $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg:                     $gray-200 !default;
 $breadcrumb-divider-color:          $gray-600 !default;
 $breadcrumb-active-color:           $gray-600 !default;
-$breadcrumb-divider:                quote("/") !default;
+$breadcrumb-divider:                string.quote("/") !default;
 
 $breadcrumb-border-radius:          $border-radius !default;
 
@@ -1146,4 +1150,4 @@ $user-selects: all, auto, none !default;
 // Printing
 
 $print-page-size:                   a3 !default;
-$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
+$print-body-min-width:              map.get($grid-breakpoints, "lg") !default;

package/src/vendor/bootstrap/scss/mixins/_alert.scss

@@ -1,13 +1,14 @@
+@use "sass:color";
 @mixin alert-variant($background, $border, $color) {
   color: $color;
   @include gradient-bg($background);
   border-color: $border;
 
   hr {
-    border-top-color: darken($border, 5%);
+    border-top-color: color.adjust($border, $lightness: -5%);
   }
 
   .alert-link {
-    color: darken($color, 10%);
+    color: color.adjust($color, $lightness: -10%);
   }
 }

package/src/vendor/bootstrap/scss/mixins/_background-variant.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // stylelint-disable declaration-no-important
 
 // Contextual backgrounds
@@ -9,7 +10,7 @@
   a#{$parent},
   button#{$parent} {
     @include hover-focus() {
-      background-color: darken($color, 10%) !important;
+      background-color: color.adjust($color, $lightness: -10%) !important;
     }
   }
   @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
@@ -17,7 +18,7 @@
 
 @mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
   #{$parent} {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+    background: $color linear-gradient(180deg, color.mix($body-bg, $color, 15%), $color) repeat-x !important;
   }
   @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
 }

package/src/vendor/bootstrap/scss/mixins/_badge.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @mixin badge-variant($bg) {
   color: color-yiq($bg);
   background-color: $bg;
@@ -5,7 +6,7 @@
   @at-root a#{&} {
     @include hover-focus() {
       color: color-yiq($bg);
-      background-color: darken($bg, 10%);
+      background-color: color.adjust($bg, $lightness: -10%);
     }
 
     &:focus,

package/src/vendor/bootstrap/scss/mixins/_border-radius.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:meta";
 // stylelint-disable property-disallowed-list
 // Single side border-radius
 
@@ -5,10 +7,10 @@
 @function valid-radius($radius) {
   $return: ();
   @each $value in $radius {
-    @if type-of($value) == number {
-      $return: append($return, max($value, 0));
+    @if meta.type-of($value) == number {
+      $return: list.append($return, max($value, 0));
     } @else {
-      $return: append($return, $value);
+      $return: list.append($return, $value);
     }
   }
   @return $return;

package/src/vendor/bootstrap/scss/mixins/_box-shadow.scss

@@ -1,19 +1,20 @@
+@use "sass:list";
 @mixin box-shadow($shadow...) {
   @if $enable-shadows {
     $result: ();
 
-    @if (length($shadow) == 1) {
+    @if (list.length($shadow) == 1) {
       // We can pass `@include box-shadow(none);`
       $result: $shadow;
     } @else {
       // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
+      @for $i from 1 through list.length($shadow) {
+        @if list.nth($shadow, $i) != "none" {
+          $result: list.append($result, list.nth($shadow, $i), "comma");
         }
       }
     }
-    @if (length($result) > 0) {
+    @if (list.length($result) > 0) {
       box-shadow: $result;
     }
   }

package/src/vendor/bootstrap/scss/mixins/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:map";
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
@@ -14,9 +16,9 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
 //    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+  @return if($n != null and $n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
@@ -24,7 +26,7 @@
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 

package/src/vendor/bootstrap/scss/mixins/_buttons.scss

@@ -1,9 +1,10 @@
+@use "sass:color";
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+@mixin button-variant($background, $border, $hover-background: color.adjust($background, $lightness: -7.5%), $hover-border: color.adjust($border, $lightness: -10%), $active-background: color.adjust($background, $lightness: -10%), $active-border: color.adjust($border, $lightness: -12.5%)) {
   color: color-yiq($background);
   @include gradient-bg($background);
   border-color: $border;
@@ -21,10 +22,10 @@
     @include gradient-bg($hover-background);
     border-color: $hover-border;
     @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5));
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+      box-shadow: 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5);
     }
   }
 
@@ -52,10 +53,10 @@
 
     &:focus {
       @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5));
       } @else {
         // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+        box-shadow: 0 0 0 $btn-focus-width rgba(color.mix(color-yiq($background), $border, 15%), .5);
       }
     }
   }

package/src/vendor/bootstrap/scss/mixins/_forms.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
@@ -160,8 +161,8 @@
 
       &:checked {
         ~ .custom-control-label::before {
-          border-color: lighten($color, 10%);
-          @include gradient-bg(lighten($color, 10%));
+          border-color: color.adjust($color, $lightness: 10%);
+          @include gradient-bg(color.adjust($color, $lightness: 10%));
         }
       }
 

package/src/vendor/bootstrap/scss/mixins/_gradients.scss

@@ -1,8 +1,9 @@
+@use "sass:color";
 // Gradients
 
 @mixin gradient-bg($color) {
   @if $enable-gradients {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+    background: $color linear-gradient(180deg, color.mix($body-bg, $color, 15%), $color) repeat-x;
   } @else {
     background-color: $color;
   }

package/src/vendor/bootstrap/scss/mixins/_grid-framework.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // Framework grid generation
 //
 // Used only by Bootstrap to generate the correct number of grid classes given
@@ -12,7 +13,7 @@
     padding-left: $gutter * .5;
   }
 
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @if $columns > 0 {

package/src/vendor/bootstrap/scss/mixins/_grid.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 /// Grid system
 //
 // Generate semantic grid columns with these mixins.
@@ -38,11 +39,11 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage(divide($size, $columns));
+  flex: 0 0 math.percentage(divide($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage(divide($size, $columns));
+  max-width: math.percentage(divide($size, $columns));
 }
 
 @mixin make-col-auto() {
@@ -53,7 +54,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
+  margin-left: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns

package/src/vendor/bootstrap/scss/mixins/_list-group.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // List Groups
 
 @mixin list-group-item-variant($state, $background, $color) {
@@ -8,7 +9,7 @@
     &.list-group-item-action {
       @include hover-focus() {
         color: $color;
-        background-color: darken($background, 5%);
+        background-color: color.adjust($background, $lightness: -5%);
       }
 
       &.active {