@coreui/coreui 5.4.3 → 5.6.0

package/scss/_chip.scss

@@ -0,0 +1,261 @@
+@use "sass:map";
+@use "mixins/border-radius" as *;
+@use "mixins/chip" as *;
+@use "mixins/focus-ring" as *;
+@use "mixins/transition" as *;
+@use "variables" as *;
+
+// scss-docs-start chip-variables
+$chip-font-size:             .875rem !default;
+$chip-font-weight:           $font-weight-normal !default;
+$chip-height:                1.75rem !default;
+$chip-padding-x:             .625rem !default;
+$chip-gap:                   .3125rem !default;
+$chip-border-radius:         var(--#{$prefix}border-radius-pill) !default;
+$chip-icon-size:             1rem !default;
+$chip-img-size:              1.25rem !default;
+$chip-img-border-radius:     50% !default;
+$chip-remove-size:           1rem !default;
+$chip-remove-opacity:        .65 !default;
+$chip-remove-hover-opacity:  1 !default;
+$chip-transition:            background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out !default;
+
+$chip-color:                 var(--#{$prefix}body-color) !default;
+$chip-bg:                    var(--#{$prefix}secondary-bg) !default;
+$chip-border-width:          var(--#{$prefix}border-width) !default;
+$chip-border-color:          transparent !default;
+
+$chip-active-color:          rgba($white, .87) !default;
+$chip-active-bg:             var(--#{$prefix}primary) !default;
+$chip-active-border-color:   transparent !default;
+
+$chip-hover-color:           $chip-color !default;
+$chip-hover-bg:              color-mix(in srgb, var(--#{$prefix}secondary-bg) 95%, #000) !default;
+$chip-hover-border-color:    transparent !default;
+
+$chip-font-size-sm:          .75rem !default;
+$chip-height-sm:             1.5rem !default;
+$chip-padding-x-sm:          .625rem !default;
+$chip-gap-sm:                .25rem !default;
+$chip-icon-size-sm:          .875rem !default;
+$chip-img-size-sm:           1rem !default;
+$chip-remove-size-sm:        .875rem !default;
+
+$chip-font-size-lg:          1rem !default;
+$chip-height-lg:             2rem !default;
+$chip-padding-x-lg:          .75rem !default;
+$chip-gap-lg:                .375rem !default;
+$chip-icon-size-lg:          1.25rem !default;
+$chip-img-size-lg:           1.5rem !default;
+$chip-remove-size-lg:        1.25rem !default;
+// scss-docs-end chip-variables
+
+.chip {
+  // scss-docs-start chip-css-vars
+  --#{$prefix}chip-height: #{$chip-height};
+  --#{$prefix}chip-padding-x: #{$chip-padding-x};
+  --#{$prefix}chip-gap: #{$chip-gap};
+  --#{$prefix}chip-font-size: #{$chip-font-size};
+  --#{$prefix}chip-font-weight: #{$chip-font-weight};
+  --#{$prefix}chip-border-radius: #{$chip-border-radius};
+  --#{$prefix}chip-img-size: #{$chip-img-size};
+  --#{$prefix}chip-img-border-radius: #{$chip-img-border-radius};
+  --#{$prefix}chip-icon-size: #{$chip-icon-size};
+  --#{$prefix}chip-remove-size: #{$chip-remove-size};
+  --#{$prefix}chip-remove-opacity: #{$chip-remove-opacity};
+  --#{$prefix}chip-remove-hover-opacity: #{$chip-remove-hover-opacity};
+  --#{$prefix}chip-transition: #{$chip-transition};
+
+  --#{$prefix}chip-color: var(--#{$prefix}text-emphasis, #{$chip-color});
+  --#{$prefix}chip-bg: var(--#{$prefix}bg-subtle, #{$chip-bg});
+  --#{$prefix}chip-border-width: #{$chip-border-width};
+  --#{$prefix}chip-border-color: #{$chip-border-color};
+
+  --#{$prefix}chip-active-color: var(--#{$prefix}contrast, #{$chip-active-color});
+  --#{$prefix}chip-active-bg: var(--#{$prefix}color, #{$chip-active-bg});
+  --#{$prefix}chip-active-border-color: #{$chip-active-border-color};
+
+  --#{$prefix}chip-hover-color: var(--#{$prefix}contrast, #{$chip-hover-color});
+  --#{$prefix}chip-hover-bg: var(--#{$prefix}color, #{$chip-hover-bg});
+  --#{$prefix}chip-hover-border-color: #{$chip-hover-border-color};
+  // scss-docs-end chip-css-vars
+
+  display: inline-flex;
+  gap: var(--#{$prefix}chip-gap);
+  align-items: center;
+  height: var(--#{$prefix}chip-height);
+  padding-inline: var(--#{$prefix}chip-padding-x);
+  font-size: var(--#{$prefix}chip-font-size);
+  font-weight: var(--#{$prefix}chip-font-weight);
+  color: var(--#{$prefix}chip-color);
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--#{$prefix}chip-bg);
+  border: var(--#{$prefix}chip-border-width) solid var(--#{$prefix}chip-border-color);
+  @include border-radius(var(--#{$prefix}chip-border-radius));
+  @include transition(var(--#{$prefix}chip-transition));
+
+  &.active {
+    color: var(--#{$prefix}chip-active-color);
+    background-color: var(--#{$prefix}chip-active-bg);
+    border-color: var(--#{$prefix}chip-active-border-color);
+  }
+
+  &.disabled,
+  &:disabled {
+    pointer-events: none;
+    opacity: .65;
+  }
+
+  &:focus-visible {
+    @include focus-ring();
+  }
+
+  .avatar {
+    --#{$prefix}avatar-width: var(--#{$prefix}chip-img-size);
+    --#{$prefix}avatar-height: var(--#{$prefix}chip-img-size);
+
+    font-size: inherit;
+
+    &:first-child {
+      margin-inline-start: -.375rem;
+    }
+  }
+}
+
+.chip-outline {
+  // scss-docs-start chip-outline-css-vars
+  --#{$prefix}chip-color: var(--#{$prefix}color, var(--#{$prefix}body-color));
+  --#{$prefix}chip-bg: transparent;
+  --#{$prefix}chip-border-color: var(--#{$prefix}color, var(--#{$prefix}border-color));
+  --#{$prefix}chip-hover-bg: var(--#{$prefix}bg-subtle, #{$chip-hover-bg});
+  --#{$prefix}chip-hover-color: var(--#{$prefix}text-emphasis, #{$chip-color});
+  --#{$prefix}chip-hover-border-color: var(--#{$prefix}color, var(--#{$prefix}border-color));
+  --#{$prefix}chip-active-bg: var(--#{$prefix}color, #{$chip-active-bg});
+  --#{$prefix}chip-active-color: var(--#{$prefix}contrast, #{$chip-active-color});
+  // scss-docs-end chip-outline-css-vars
+}
+
+.chip-clickable {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--#{$prefix}chip-hover-color);
+    background-color: var(--#{$prefix}chip-hover-bg);
+    border-color: var(--#{$prefix}chip-hover-border-color);
+  }
+
+  &.active:hover {
+    color: var(--#{$prefix}chip-active-color);
+    background-color: var(--#{$prefix}chip-active-bg);
+    opacity: .9;
+  }
+}
+
+.chip-img {
+  width: var(--#{$prefix}chip-img-size);
+  height: var(--#{$prefix}chip-img-size);
+  @include border-radius(var(--#{$prefix}chip-img-border-radius));
+
+  &:first-child {
+    margin-inline-start: -.375rem;
+  }
+}
+
+.chip-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: calc(var(--#{$prefix}chip-gap) * -.25); // stylelint-disable-line function-disallowed-list
+
+  > svg {
+    display: block; // Prevents baseline alignment issues
+    width: var(--#{$prefix}chip-icon-size);
+    height: var(--#{$prefix}chip-icon-size);
+  }
+
+  > img {
+    width: var(--#{$prefix}chip-icon-size);
+    height: var(--#{$prefix}chip-icon-size);
+    object-fit: cover;
+    @include border-radius(var(--#{$prefix}chip-img-border-radius));
+  }
+}
+
+.chip-remove {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}chip-min-height);
+  height: var(--#{$prefix}chip-min-height);
+  padding: 0;
+  margin-inline-end: calc(var(--#{$prefix}chip-padding-x) * -.25); // stylelint-disable-line function-disallowed-list
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  opacity: var(--#{$prefix}chip-remove-opacity);
+  @include transition(opacity .15s ease-in-out);
+
+  &:hover {
+    opacity: var(--#{$prefix}chip-remove-hover-opacity);
+  }
+
+  &:focus-visible {
+    outline: 0;
+    opacity: 1;
+    @include focus-ring();
+  }
+
+  > svg {
+    display: block; // Prevents baseline alignment issues
+    width: var(--#{$prefix}chip-remove-size);
+    height: var(--#{$prefix}chip-remove-size);
+  }
+}
+
+//
+// Chip sizes
+//
+
+.chip-lg,
+.chip-input-lg .chip {
+  @include chip-size(
+    $chip-height-lg,
+    $chip-padding-x-lg,
+    $chip-gap-lg,
+    $chip-font-size-lg,
+    $chip-icon-size-lg,
+    $chip-img-size-lg,
+    $chip-remove-size-lg
+  );
+}
+
+.chip-sm,
+.chip-input-sm .chip {
+  @include chip-size(
+    $chip-height-sm,
+    $chip-padding-x-sm,
+    $chip-gap-sm,
+    $chip-font-size-sm,
+    $chip-icon-size-sm,
+    $chip-img-size-sm,
+    $chip-remove-size-sm
+  );
+}
+
+// scss-docs-start chip-modifiers
+@each $state in map.keys($theme-colors) {
+  .chip-#{$state} {
+    --#{$prefix}bg-subtle: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}color: var(--#{$prefix}#{$state});
+    --#{$prefix}color-rgb: var(--#{$prefix}#{$state}-rgb);
+    --#{$prefix}contrast: var(--#{$prefix}#{$state}-contrast);
+    --#{$prefix}text-emphasis: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}#{$state}-rgb), var(--#{$prefix}focus-ring-opacity));
+  }
+}
+// scss-docs-end chip-modifiers

package/scss/_dropdown.scss

@@ -189,7 +189,7 @@
   font-weight: $font-weight-normal;
   color: var(--#{$prefix}dropdown-link-color);
   text-align: inherit; // For `<button>`s
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
@@ -198,7 +198,8 @@
   &:hover,
   &:focus {
     color: var(--#{$prefix}dropdown-link-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
     @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
   }
 
@@ -215,7 +216,8 @@
     pointer-events: none;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-image: if(sass($enable-gradients): none);
   }
 }
 

package/scss/_forms.scss

@@ -1,3 +1,4 @@
+@forward "forms/chip-input";
 @forward "forms/labels";
 @forward "forms/form-text";
 @forward "forms/form-control";

package/scss/_header.scss

@@ -89,13 +89,14 @@
   margin-inline-end: $header-brand-margin-end;
   @include font-size($header-brand-font-size);
   color: var(--#{$prefix}header-brand-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: nowrap;
 
   &:hover,
   &:focus {
     color: var(--#{$prefix}header-brand-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 }
 

package/scss/_list-group.scss

@@ -57,7 +57,7 @@
   display: block;
   padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
   color: var(--#{$prefix}list-group-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   background-color: var(--#{$prefix}list-group-bg);
   border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
 

package/scss/_maps.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "functions/color" as *;
+@use "functions/color-contrast" as *;
 @use "functions/maps" as *;
 @use "functions/to-rgb" as *;
 @use "variables" as *;
@@ -52,6 +53,19 @@ $theme-colors-border-subtle: (
 ) !default;
 // scss-docs-end theme-border-subtle-map
 
+// scss-docs-start theme-contrast-map
+$theme-colors-contrast: (
+  "primary": color-contrast($primary),
+  "secondary": color-contrast($secondary),
+  "success": color-contrast($success),
+  "info": color-contrast($info),
+  "warning": color-contrast($warning),
+  "danger": color-contrast($danger),
+  "light": color-contrast($light),
+  "dark": color-contrast($dark),
+) !default;
+// scss-docs-end theme-contrast-map
+
 $theme-colors-rgb-dark: null !default;
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;
@@ -181,6 +195,7 @@ $utilities-border-subtle: (
 
 $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$prefix", "$key", "link-underline") !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+// stylelint-disable-next-line scss/at-function-named-arguments
+$negative-spacers: if(sass($enable-negative-margins): negativify-map($spacers)) !default;
 
 $gutters: $spacers !default;

package/scss/_modal.scss

@@ -217,7 +217,8 @@
 // scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map.keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $postfix: if($infix != "", $infix + "-down", "");
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  $postfix: if(sass($infix != ""): $infix + "-down"; else: "");
 
   @include media-breakpoint-down($breakpoint) {
     .modal-fullscreen#{$postfix} {

package/scss/_nav.scss

@@ -33,7 +33,7 @@
   @include font-size(var(--#{$prefix}nav-link-font-size));
   font-weight: var(--#{$prefix}nav-link-font-weight);
   color: var(--#{$prefix}nav-link-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   background: none;
   border: 0;
   @include transition($nav-link-transition);
@@ -41,7 +41,8 @@
   &:hover,
   &:focus {
     color: var(--#{$prefix}nav-link-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 
   &:focus-visible {

package/scss/_navbar.scss

@@ -17,7 +17,8 @@
 
 .navbar {
   // scss-docs-start navbar-css-vars
-  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  --#{$prefix}navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
   --#{$prefix}navbar-color: #{$navbar-light-color};
   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
@@ -80,13 +81,14 @@
   margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
   @include font-size(var(--#{$prefix}navbar-brand-font-size));
   color: var(--#{$prefix}navbar-brand-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: nowrap;
 
   &:hover,
   &:focus {
     color: var(--#{$prefix}navbar-brand-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 }
 

package/scss/_pagination.scss

@@ -40,7 +40,7 @@
   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
   @include font-size(var(--#{$prefix}pagination-font-size));
   color: var(--#{$prefix}pagination-color);
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   background-color: var(--#{$prefix}pagination-bg);
   border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
   @include transition($pagination-transition);
@@ -48,7 +48,8 @@
   &:hover {
     z-index: 2;
     color: var(--#{$prefix}pagination-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
     background-color: var(--#{$prefix}pagination-hover-bg);
     border-color: var(--#{$prefix}pagination-hover-border-color);
   }

package/scss/_root.scss

@@ -43,6 +43,10 @@
     --#{$prefix}#{$color}-border-subtle: #{$value};
   }
 
+  @each $color, $value in $theme-colors-contrast {
+    --#{$prefix}#{$color}-contrast: #{$value};
+  }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
 
@@ -154,6 +158,7 @@
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
   --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
   --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  --#{$prefix}focus-ring-blur: #{$focus-ring-blur};
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables

package/scss/coreui.scss

@@ -39,6 +39,7 @@
 @forward "spinners";
 @forward "offcanvas";
 @forward "placeholders";
+@forward "chip";
 
 @forward "avatar";
 @forward "callout";

package/scss/forms/_chip-input.import.scss

@@ -0,0 +1 @@
+@forward "chip-input";

package/scss/forms/_chip-input.scss

@@ -0,0 +1,109 @@
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/focus-ring" as *;
+@use "../mixins/transition" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
+// scss-docs-start chip-input-variables
+$chip-input-min-height:        $input-height !default;
+$chip-input-padding-y:         .25rem !default;
+$chip-input-padding-x:         .75rem !default;
+$chip-input-font-size:         $input-font-size !default;
+$chip-input-bg:                var(--#{$prefix}body-bg) !default;
+$chip-input-color:             var(--#{$prefix}body-color) !default;
+$chip-input-border-width:      var(--#{$prefix}border-width) !default;
+$chip-input-border-color:      var(--#{$prefix}border-color) !default;
+$chip-input-border-radius:     var(--#{$prefix}border-radius) !default;
+$chip-input-gap:               .375rem !default;
+$chip-input-transition:        $input-transition !default;
+
+$chip-input-min-height-sm:     $input-height-sm !default;
+$chip-input-padding-y-sm:      .125rem !default;
+$chip-input-padding-x-sm:      .5rem !default;
+$chip-input-font-size-sm:      $input-font-size-sm !default;
+$chip-input-border-radius-sm:  var(--#{$prefix}border-radius-sm) !default;
+$chip-input-gap-sm:            .125rem !default;
+
+$chip-input-min-height-lg:     $input-height-lg !default;
+$chip-input-padding-y-lg:      .375rem !default;
+$chip-input-padding-x-lg:      1rem !default;
+$chip-input-font-size-lg:      $input-font-size-lg !default;
+$chip-input-border-radius-lg:  var(--#{$prefix}border-radius-lg) !default;
+$chip-input-gap-lg:            .5rem !default;
+// scss-docs-end chip-input-variables
+
+.chip-input {
+  // scss-docs-start chip-input-css-vars
+  --#{$prefix}chip-input-min-height: #{$chip-input-min-height};
+  --#{$prefix}chip-input-padding-y: #{$chip-input-padding-y};
+  --#{$prefix}chip-input-padding-x: #{$chip-input-padding-x};
+  --#{$prefix}chip-input-font-size: #{$chip-input-font-size};
+  --#{$prefix}chip-input-bg: #{$chip-input-bg};
+  --#{$prefix}chip-input-color: #{$chip-input-color};
+  --#{$prefix}chip-input-border-width: #{$chip-input-border-width};
+  --#{$prefix}chip-input-border-color: #{$chip-input-border-color};
+  --#{$prefix}chip-input-border-radius: #{$chip-input-border-radius};
+  --#{$prefix}chip-input-gap: #{$chip-input-gap};
+  --#{$prefix}chip-input-transition: #{$chip-input-transition};
+  // scss-docs-end chip-input-css-vars
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--#{$prefix}chip-input-gap);
+  align-items: center;
+  min-height: var(--#{$prefix}chip-input-min-height);
+  padding: var(--#{$prefix}chip-input-padding-y) var(--#{$prefix}chip-input-padding-x);
+  @include font-size(var(--#{$prefix}chip-input-font-size));
+  color: var(--#{$prefix}chip-input-color);
+  background-color: var(--#{$prefix}chip-input-bg);
+  border: var(--#{$prefix}chip-input-border-width) solid var(--#{$prefix}chip-input-border-color);
+  @include border-radius(var(--#{$prefix}chip-input-border-radius), 0);
+  @include transition(var(--#{$prefix}chip-input-transition));
+
+  // Focus state when ghost input is focused
+  &:focus-within {
+    border-color: $input-focus-border-color;
+    @include focus-ring();
+  }
+
+  // Disabled state
+  &.disabled {
+    background-color: $input-disabled-bg;
+    opacity: 1;
+
+    > .chip {
+      opacity: .65;
+
+      .chip-dismiss {
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.chip-input-field {
+  flex: 1 1 auto;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+// Sizing variants
+.chip-input-lg {
+  --#{$prefix}chip-input-min-height: #{$chip-input-min-height-lg};
+  --#{$prefix}chip-input-padding-y: #{$chip-input-padding-y-lg};
+  --#{$prefix}chip-input-padding-x: #{$chip-input-padding-x-lg};
+  --#{$prefix}chip-input-border-radius: #{$chip-input-border-radius-lg};
+  --#{$prefix}chip-input-font-size: #{$chip-input-font-size-lg};
+  --#{$prefix}chip-input-gap: #{$chip-input-gap-lg};
+}
+
+.chip-input-sm {
+  --#{$prefix}chip-input-min-height: #{$chip-input-min-height-sm};
+  --#{$prefix}chip-input-padding-y: #{$chip-input-padding-y-sm};
+  --#{$prefix}chip-input-padding-x: #{$chip-input-padding-x-sm};
+  --#{$prefix}chip-input-border-radius: #{$chip-input-border-radius-sm};
+  --#{$prefix}chip-input-font-size: #{$chip-input-font-size-sm};
+  --#{$prefix}chip-input-gap: #{$chip-input-gap-sm};
+}

package/scss/forms/_form-control.scss

@@ -64,7 +64,8 @@
     // https://github.com/twbs/bootstrap/issues/23307
     // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
     // Multiply line-height by 1em if it has no unit
-    height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    height: if(sass(math.unit($input-line-height) == ""): $input-line-height * 1em; else: $input-line-height);
 
     // Android Chrome type="date" is taller than the other inputs
     // because of "margin: 1px 24px 1px 4px" inside the shadow DOM

package/scss/functions/_color.scss

@@ -13,6 +13,10 @@
 
 // Shade the color if the weight is positive, else tint it
 @function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+  @if $weight > 0 {
+    @return shade-color($color, $weight);
+  } @else {
+    @return tint-color($color, -$weight);
+  }
 }
 // scss-docs-end color-functions

package/scss/functions/_contrast-ratio.scss

@@ -11,7 +11,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
+  @return if(sass($l1 > $l2): math.div($l1 + .05, $l2 + .05); else: math.div($l2 + .05, $l1 + .05));
 }
 
 // Return WCAG2.2 relative luminance
@@ -25,7 +25,8 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), list.nth($_luminance-list, math.round($value + 1)));
+    // stylelint-disable-next-line scss/at-function-named-arguments, @stylistic/function-whitespace-after
+    $value: if(sass(math.div($value, 255) < .04045): math.div(math.div($value, 255), 12.92); else: list.nth($_luminance-list, math.round($value + 1)));
     $rgb: map.merge($rgb, ($name: $value));
   }
 

package/scss/functions/_maps.scss

@@ -14,7 +14,15 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: list.append($_args, if($arg == "$prefix", $prefix, if($arg == "$key", $key, if($arg == "$value", $value, $arg))));
+      @if $arg == "$prefix" {
+        $_args: list.append($_args, $prefix);
+      } @else if $arg == "$key" {
+        $_args: list.append($_args, $key);
+      } @else if $arg == "$value" {
+        $_args: list.append($_args, $value);
+      } @else {
+        $_args: list.append($_args, $arg);
+      }
     }
 
     $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));

package/scss/functions/_math.scss

@@ -17,7 +17,7 @@
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
+  @return if(sass($return-calc == true): calc(#{$value1} + #{$value2}); else: $value1 + string.unquote(" + ") + $value2);
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -41,11 +41,12 @@
     $value2: string.unquote("(") + $value2 + string.unquote(")");
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + string.unquote(" - ") + $value2);
+  @return if(sass($return-calc == true): calc(#{$value1} - #{$value2}); else: $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);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  $sign: if(sass($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0): 1; else: -1);
   $dividend: abs($dividend);
   $divisor: abs($divisor);
   @if $dividend == 0 {