@gitlab/ui 113.3.1 → 113.4.0

package/src/vendor/bootstrap/scss/mixins/_table-row.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Tables
 
 @mixin table-row-variant($state, $background, $border: null) {
@@ -23,7 +24,7 @@
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover {
-    $hover-background: darken($background, 5%);
+    $hover-background: color.adjust($background, $lightness: -5%);
 
     .table-#{$state} {
       @include hover() {

package/src/vendor/bootstrap/scss/mixins/_text-emphasis.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // stylelint-disable declaration-no-important
 
 // Typography
@@ -9,7 +10,7 @@
   @if $emphasized-link-hover-darken-percentage != 0 {
     a#{$parent} {
       @include hover-focus() {
-        color: darken($color, $emphasized-link-hover-darken-percentage) !important;
+        color: color.adjust($color, $lightness: -($emphasized-link-hover-darken-percentage)) !important;
       }
     }
   }

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

@@ -1,10 +1,11 @@
+@use "sass:list";
 // stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
-  @if length($transition) == 0 {
+  @if list.length($transition) == 0 {
     $transition: $transition-base;
   }
 
-  @if length($transition) > 1 {
+  @if list.length($transition) > 1 {
     @each $value in $transition {
       @if $value == null or $value == none {
         @warn "The keyword 'none' or 'null' must be used as a single argument.";
@@ -13,11 +14,11 @@
   }
 
   @if $enable-transitions {
-    @if nth($transition, 1) != null {
+    @if list.nth($transition, 1) != null {
       transition: $transition;
     }
 
-    @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none {
+    @if $enable-prefers-reduced-motion-media-query and list.nth($transition, 1) != null and list.nth($transition, 1) != none {
       @media (prefers-reduced-motion: reduce) {
         transition: none;
       }

package/src/vendor/bootstrap/scss/utilities/_display.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 //
 // Utilities for common `display` values
 //
 
-@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/utilities/_embed.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+@use "sass:math";
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .embed-responsive {
@@ -28,12 +30,12 @@
 }
 
 @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
-  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
-  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
+  $embed-responsive-aspect-ratio-x: list.nth($embed-responsive-aspect-ratio, 1);
+  $embed-responsive-aspect-ratio-y: list.nth($embed-responsive-aspect-ratio, 2);
 
   .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
     &::before {
-      padding-top: percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
+      padding-top: math.percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
     }
   }
 }

package/src/vendor/bootstrap/scss/utilities/_flex.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 // Flex variation
 //
 // Custom styles for additional flex alignment options.
 
-@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/utilities/_float.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
-@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/utilities/_spacing.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 // Margin and Padding
 
-@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/utilities/_text.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 // stylelint-disable declaration-no-important
 
 //
@@ -15,7 +16,7 @@
 
 // Responsive alignment
 
-@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/vendor/_rfs.scss

@@ -1,3 +1,6 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
 // stylelint-disable property-blacklist, scss/dollar-variable-default
 
 // SCSS RFS mixin
@@ -30,7 +33,7 @@ $rfs-two-dimensional: false !default;
 // Factor of decrease
 $rfs-factor: 10 !default;
 
-@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
   @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
 }
 
@@ -47,12 +50,12 @@ $rfs-safari-iframe-resize-bug-fix: false !default;
 $enable-responsive-font-sizes: true !default;
 
 // Cache $rfs-base-font-size unit
-$rfs-base-font-size-unit: unit($rfs-base-font-size);
+$rfs-base-font-size-unit: math.unit($rfs-base-font-size);
 
 @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;
   }
@@ -77,16 +80,16 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
     }
   }
   $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;
 }
@@ -100,7 +103,7 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
+$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == "px" {
@@ -155,7 +158,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Responsive font size mixin
 @mixin rfs($fs, $important: false) {
   // Cache $fs unit
-  $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+  $fs-unit: if(meta.type-of($fs) == "number", math.unit($fs), false);
 
   // Add !important suffix if needed
   $rfs-suffix: if($important, " !important", "");

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // --- BootstrapVue custom SCSS variables ---
 //
 // Users can override these variables in their custom SCSS
@@ -85,7 +87,7 @@ $b-toaster-offset-right: $b-toaster-offset-top !default;
 // Value from 0 to 1, or 0% to 100%
 // Bootstrap default is 0.85 (extracted from the `$toast-background-color` value)
 // Bootstrap does not have this as a variable, so we add it in.
-$b-toast-background-opacity: alpha($toast-background-color) !default;
+$b-toast-background-opacity: color.alpha($toast-background-color) !default;
 
 // Toast variant levels wrt theme color value
 $b-toast-bg-level: $alert-bg-level !default;

package/src/vendor/bootstrap-vue/src/components/form-input/_form-input.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Temporary fix for cssnano bug: https://github.com/cssnano/cssnano/issues/712
 // By moving center to last value in `background-position` property
 // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2599
@@ -150,13 +152,13 @@ input[type="color"].form-control:disabled {
       // Pseudo-elements must be split across multiple rulesets to have an affect
       &:focus {
         &::-webkit-slider-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
         }
         &::-moz-range-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
         }
         &::-ms-thumb {
-          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width lighten($color, 35%);
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width color.adjust($color, $lightness: 35%);
         }
       }
 
@@ -165,7 +167,7 @@ input[type="color"].form-control:disabled {
         background-image: none;
 
         &:active {
-          background-color: lighten($color, 35%);
+          background-color: color.adjust($color, $lightness: 35%);
           background-image: none;
         }
       }
@@ -179,7 +181,7 @@ input[type="color"].form-control:disabled {
         background-image: none;
 
         &:active {
-          background-color: lighten($color, 35%);
+          background-color: color.adjust($color, $lightness: 35%);
           background-image: none;
         }
       }
@@ -198,7 +200,7 @@ input[type="color"].form-control:disabled {
         background-image: none;
 
         &:active {
-          background-color: lighten($color, 35%);
+          background-color: color.adjust($color, $lightness: 35%);
           background-image: none;
         }
       }

package/src/vendor/bootstrap-vue/src/components/table/_table.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use 'sass:string';
+
 // --- General styling ---
 
 .table.b-table {
@@ -259,7 +262,7 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
 // But if we want to preserve backwards compatibility with v4.3, we leave this in
 // See https://codepen.io/kevinweber/pen/dXWoRw
 @function bv-escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, "data:image/svg+xml") {
     @each $char, $encoded in $bv-escaped-characters {
       $string: str-replace($string, $char, $encoded);
     }
@@ -380,7 +383,7 @@ $bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
 @if $bv-enable-table-stacked {
   .table.b-table {
     &.b-table-stacked {
-      @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-vue/src/components/toast/_toast.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // --- <b-toast> custom SCSS ---
 
 // Toast wrapper element class (needed for list transition in toasters)
@@ -45,7 +47,7 @@
 @mixin b-toast-variant($background, $border, $color) {
   // Based on alert-variant mixin
   .toast {
-    background-color: rgba(lighten($background, 5%), $b-toast-background-opacity);
+    background-color: rgba(color.adjust($background, $lightness: 5%), $b-toast-background-opacity);
     border-color: rgba($border, $b-toast-background-opacity);
     color: $color;
 
@@ -62,7 +64,7 @@
 
   &.b-toast-solid {
     .toast {
-      background-color: rgba(lighten($background, 5%), 1);
+      background-color: rgba(color.adjust($background, $lightness: 5%), 1);
     }
   }
 }