@gitlab/ui 113.3.2 → 113.5.0

package/src/scss/functions.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use 'sass:meta';
 
 /*
 * SASS preserves units in arithmetic operations. For example:
@@ -11,7 +12,7 @@
 }
 
 @function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
+  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
     @return math.div($number, extract-unit($number));
   }
 
@@ -39,9 +40,9 @@
 }
 
 @function px-to-rem($px, $font-size-base: 16px) {
-  @if type-of($px) == 'number' {
+  @if meta.type-of($px) == 'number' {
     @return single-unit-rem($px, $font-size-base);
-  } @else if type-of($px) == 'list' {
+  } @else if meta.type-of($px) == 'list' {
     @return multiple-units-rem($px, $font-size-base);
   } @else {
     @return $px;

package/src/scss/mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
@@ -102,7 +104,7 @@
 * @param $name Breakpoint name, such as `sm` or `md`.
 */
 @mixin gl-media-breakpoint-up($name) {
-  $min: map-get($breakpoints, $name);
+  $min: map.get($breakpoints, $name);
   @if $min == null {
     @error "#{$name} is not a valid breakpoint for this @media query.";
   }
@@ -127,7 +129,7 @@
 * @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid
 */
 @mixin gl-media-breakpoint-down($name) {
-  $max: map-get($breakpoints, $name);
+  $max: map.get($breakpoints, $name);
   @if ($max == null or $max == 0) {
     @error "#{$name} is not a valid breakpoint for this @media query.";
   }
@@ -153,14 +155,14 @@
 @function get-font-size-variable($size, $fixed) {
   @if $fixed == true {
     @if map-has-key($gl-font-sizes-fixed, $size) {
-      @return map-get($gl-font-sizes-fixed, $size);
+      @return map.get($gl-font-sizes-fixed, $size);
     } @else {
       @error "#{$size} is not a valid fixed font size property";
       @return null;
     }
   } @else {
     @if map-has-key($gl-font-sizes, $size) {
-      @return map-get($gl-font-sizes, $size);
+      @return map.get($gl-font-sizes, $size);
     } @else {
       @error "#{$size} is not a valid font size property";
       @return null;

package/src/scss/variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import 'functions';
 @import '../tokens/build/scss/tokens';
 
@@ -108,14 +109,14 @@ $gl-font-sizes-fixed: (
 
 // dynamic scale (default) resizes based on viewport width
 $gl-font-sizes: (
-  100: map-get($gl-font-sizes-fixed, 100),
-  200: map-get($gl-font-sizes-fixed, 200),
-  300: map-get($gl-font-sizes-fixed, 300),
-  400: map-get($gl-font-sizes-fixed, 400),
-  500: clamp-between(map-get($gl-font-sizes-fixed, 500), px-to-rem(20px)),
-  600: clamp-between(map-get($gl-font-sizes-fixed, 600), px-to-rem(25px)),
-  700: clamp-between(map-get($gl-font-sizes-fixed, 700), px-to-rem(30px)),
-  800: clamp-between(map-get($gl-font-sizes-fixed, 800), px-to-rem(36px)),
+  100: map.get($gl-font-sizes-fixed, 100),
+  200: map.get($gl-font-sizes-fixed, 200),
+  300: map.get($gl-font-sizes-fixed, 300),
+  400: map.get($gl-font-sizes-fixed, 400),
+  500: clamp-between(map.get($gl-font-sizes-fixed, 500), px-to-rem(20px)),
+  600: clamp-between(map.get($gl-font-sizes-fixed, 600), px-to-rem(25px)),
+  700: clamp-between(map.get($gl-font-sizes-fixed, 700), px-to-rem(30px)),
+  800: clamp-between(map.get($gl-font-sizes-fixed, 800), px-to-rem(36px)),
 );
 
 // Heading variables

package/src/vendor/bootstrap/scss/_custom-forms.scss

@@ -404,6 +404,7 @@
   }
 
   &::-webkit-slider-thumb {
+    appearance: none;
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
     margin-top: ($custom-range-track-height - $custom-range-thumb-height) * .5; // Webkit specific
@@ -412,7 +413,6 @@
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
     @include transition($custom-forms-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
@@ -431,6 +431,7 @@
   }
 
   &::-moz-range-thumb {
+    appearance: none;
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
     @include gradient-bg($custom-range-thumb-bg);
@@ -438,7 +439,6 @@
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
     @include transition($custom-forms-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
@@ -457,6 +457,7 @@
   }
 
   &::-ms-thumb {
+    appearance: none;
     width: $custom-range-thumb-width;
     height: $custom-range-thumb-height;
     margin-top: 0; // Edge specific
@@ -467,7 +468,6 @@
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
     @include transition($custom-forms-transition);
-    appearance: none;
 
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);

package/src/vendor/bootstrap/scss/_dropdown.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // The dropdown wrapper (`<div>`)
 .dropup,
 .dropright,
@@ -35,7 +36,7 @@
   @include box-shadow($dropdown-box-shadow);
 }
 
-@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/_forms.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // stylelint-disable selector-no-qualifying-type
 
 //
@@ -260,7 +261,7 @@ textarea.form-control {
 // server side validation.
 
 @each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+  @include form-validation-state($state, map.get($data, color), map.get($data, icon));
 }
 
 // Inline forms

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;