@coreui/coreui 4.1.4 → 4.2.0

package/scss/helpers/_position.scss

@@ -16,7 +16,7 @@
   z-index: $zindex-fixed;
 }
 
-// Responsive sticky top
+// Responsive sticky top and bottom
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -26,5 +26,11 @@
       top: 0;
       z-index: $zindex-sticky;
     }
+
+    .sticky#{$infix}-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: $zindex-sticky;
+    }
   }
 }

package/scss/helpers/_ratio.scss

@@ -6,7 +6,7 @@
 
   &::before {
     display: block;
-    padding-top: var(--#{$variable-prefix}aspect-ratio);
+    padding-top: var(--#{$prefix}aspect-ratio);
     content: "";
   }
 
@@ -21,6 +21,6 @@
 
 @each $key, $ratio in $aspect-ratios {
   .ratio-#{$key} {
-    --#{$variable-prefix}aspect-ratio: #{$ratio};
+    --#{$prefix}aspect-ratio: #{$ratio};
   }
 }

package/scss/helpers/_vr.scss

@@ -3,6 +3,7 @@
   align-self: stretch;
   width: 1px;
   min-height: 1em;
+  padding: 0;
   background-color: currentColor;
   opacity: $hr-opacity;
 }

package/scss/mixins/_alert.scss

@@ -1,15 +1,15 @@
 // scss-docs-start alert-variant-mixin
-@mixin alert-variant($state, $variant) {
-  $background: map-get($variant, "bg");
-  $border-color: map-get($variant, "border-color");
-  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
-  $link-color: map-get($variant, "link-color");
+@mixin alert-variant($background, $border, $color) {
+  --#{$prefix}alert-color: #{$color};
+  --#{$prefix}alert-bg: #{$background};
+  --#{$prefix}alert-border-color: #{$border};
 
-  .alert-#{$state} {
-    --#{$variable-prefix}alert-color: #{$color};
-    --#{$variable-prefix}alert-bg: #{$background};
-    --#{$variable-prefix}alert-border-color: #{$border-color};
-    --#{$variable-prefix}alert-link-color: #{$link-color};
+  @if $enable-gradients {
+    background-image: var(--#{$prefix}gradient);
+  }
+
+  .alert-link {
+    color: shade-color($color, 20%);
   }
 }
 // scss-docs-end alert-variant-mixin

package/scss/mixins/_breakpoints.scss

@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,9 +10,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
   $n: index($breakpoint-names, $name);
@@ -37,7 +37,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
@@ -51,7 +51,7 @@
 // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $max: map-get($breakpoints, $name);
@@ -61,9 +61,9 @@
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -122,7 +122,7 @@
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
   $min:  breakpoint-min($name, $breakpoints);
   $next: breakpoint-next($name, $breakpoints);
-  $max:  breakpoint-max($next);
+  $max:  breakpoint-max($next, $breakpoints);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {

package/scss/mixins/_buttons.scss

@@ -4,7 +4,7 @@
 // and disabled options for all buttons
 
 // scss-docs-start btn-variant-mixin
-@mixin button-variant($state, $variant) {
+@mixin button-variant($variant) {
   $background: map-get($variant, "bg");
   $border-color: map-get($variant, "border-color");
   $color: map-get($variant, "color");
@@ -19,26 +19,25 @@
   $disabled-color: map-get($variant, "disabled-color");
   $shadow: map-get($variant, "shadow");
 
-  .btn-#{$state} {
-    --#{$variable-prefix}btn-bg: #{$background};
-    --#{$variable-prefix}btn-border-color: #{$border-color};
-    --#{$variable-prefix}btn-color: #{$color};
-    --#{$variable-prefix}btn-hover-bg: #{$hover-background};
-    --#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
-    --#{$variable-prefix}btn-hover-color: #{$hover-color};
-    --#{$variable-prefix}btn-active-bg: #{$active-background};
-    --#{$variable-prefix}btn-active-border-color: #{$active-border-color};
-    --#{$variable-prefix}btn-active-color: #{$active-color};
-    --#{$variable-prefix}btn-disabled-bg: #{$disabled-background};
-    --#{$variable-prefix}btn-disabled-border-color: #{$disabled-border-color};
-    --#{$variable-prefix}btn-disabled-color: #{$disabled-color};
-    --#{$variable-prefix}btn-shadow: #{$shadow};
-  }
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border-color};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border-color, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border-color};
 }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
-@mixin button-outline-variant($state, $variant) {
+@mixin button-outline-variant($variant) {
   $color: map-get($variant, "color");
   $hover-background: map-get($variant, "hover-bg");
   $hover-border-color: map-get($variant, "hover-border-color");
@@ -49,24 +48,24 @@
   $disabled-color: map-get($variant, "disabled-color");
   $shadow: map-get($variant, "shadow");
 
-  .btn-outline-#{$state} {
-    --#{$variable-prefix}btn-border-color: #{$color};
-    --#{$variable-prefix}btn-color: #{$color};
-    --#{$variable-prefix}btn-hover-bg: #{$hover-background};
-    --#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
-    --#{$variable-prefix}btn-hover-color: #{$hover-color};
-    --#{$variable-prefix}btn-active-bg: #{$active-background};
-    --#{$variable-prefix}btn-active-border-color: #{$active-border-color};
-    --#{$variable-prefix}btn-active-color: #{$active-color};
-    --#{$variable-prefix}btn-disabled-color: #{$disabled-color};
-    --#{$variable-prefix}btn-shadow: #{$shadow};
-  }
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$prefix}btn-hover-border-color: #{$active-border-color};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin
 
-// Button Ghost
-
-@mixin button-ghost-variant($state, $variant) {
+// scss-docs-start btn-ghost-variant-mixin
+@mixin button-ghost-variant($variant) {
   $color: map-get($variant, "color");
   $hover-background: map-get($variant, "hover-bg");
   $hover-border-color: map-get($variant, "hover-border-color");
@@ -77,25 +76,24 @@
   $disabled-color: map-get($variant, "disabled-color");
   $shadow: map-get($variant, "shadow");
 
-  .btn-ghost-#{$state} {
-    --#{$variable-prefix}btn-color: #{$color};
-    --#{$variable-prefix}btn-hover-bg: #{$hover-background};
-    --#{$variable-prefix}btn-hover-border-color: #{$hover-border-color};
-    --#{$variable-prefix}btn-hover-color: #{$hover-color};
-    --#{$variable-prefix}btn-active-bg: #{$active-background};
-    --#{$variable-prefix}btn-active-border-color: #{$active-border-color};
-    --#{$variable-prefix}btn-active-color: #{$active-color};
-    --#{$variable-prefix}btn-disabled-color: #{$disabled-color};
-    --#{$variable-prefix}btn-shadow: #{$shadow};
-  }
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border-color};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-shadow: #{$shadow};
 }
+// scss-docs-end btn-ghost-variant-mixin
 
 // Button sizes
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  padding: $padding-y $padding-x;
-  @include font-size($font-size);
-  // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
+  --#{$prefix}btn-padding-y: #{$padding-y};
+  --#{$prefix}btn-padding-x: #{$padding-x};
+  @include rfs($font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-border-radius: #{$border-radius};
 }
 // scss-docs-end btn-size-mixin

package/scss/mixins/_container.scss

@@ -1,9 +1,11 @@
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
-  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
   margin-right: auto;
   margin-left: auto;
 }

package/scss/mixins/_css-vars.scss

@@ -1,87 +1,87 @@
 @mixin css-vars() {
   .accordion {
     @if variable-exists("accordion-button-bg") {
-      --#{$variable-prefix}accordion-button-bg: #{$accordion-button-bg};
+      --#{$prefix}accordion-button-bg: #{$accordion-button-bg};
     }
     @if variable-exists("accordion-button-color") {
-      --#{$variable-prefix}accordion-button-color: #{$accordion-button-color};
+      --#{$prefix}accordion-button-color: #{$accordion-button-color};
     }
     @if variable-exists("accordion-border-color") {
-      --#{$variable-prefix}accordion-border-color: #{$accordion-border-color};
+      --#{$prefix}accordion-border-color: #{$accordion-border-color};
     }
     @if variable-exists("accordion-button-active-color") {
-      --#{$variable-prefix}accordion-button-active-color: #{$accordion-button-active-color};
+      --#{$prefix}accordion-button-active-color: #{$accordion-button-active-color};
     }
     @if variable-exists("accordion-button-active-bg") {
-      --#{$variable-prefix}accordion-button-active-bg: #{$accordion-button-active-bg};
+      --#{$prefix}accordion-button-active-bg: #{$accordion-button-active-bg};
     }
     @if variable-exists("accordion-button-focus-border-color") {
-      --#{$variable-prefix}accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
+      --#{$prefix}accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
     }
   }
 
   .badge {
     @if variable-exists("badge-color") {
-      --#{$variable-prefix}badge-color: #{$badge-color};
+      --#{$prefix}badge-color: #{$badge-color};
     }
   }
 
 
   // // Accordion
-  // --#{$variable-prefix}accordion-border-color: #{$accordion-border-color};
-  // --#{$variable-prefix}accordion-button-active-color: #{$accordion-button-active-color};
-  // --#{$variable-prefix}accordion-button-active-bg: #{$accordion-button-active-bg};
-  // --#{$variable-prefix}accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
+  // --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  // --#{$prefix}accordion-button-active-color: #{$accordion-button-active-color};
+  // --#{$prefix}accordion-button-active-bg: #{$accordion-button-active-bg};
+  // --#{$prefix}accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
 
   // // Badge
-  // --#{$variable-prefix}badge-color: #{$badge-color};
+  // --#{$prefix}badge-color: #{$badge-color};
 
   // // Breadcrumb
-  // --#{$variable-prefix}breadcrumb-bg: #{$breadcrumb-bg};
-  // --#{$variable-prefix}breadcrumb-active-color: #{$breadcrumb-active-color};
-  // --#{$variable-prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  // --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  // --#{$prefix}breadcrumb-active-color: #{$breadcrumb-active-color};
+  // --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
 
   // // Card
-  // --#{$variable-prefix}card-bg: #{$card-bg};
-  // --#{$variable-prefix}card-border-color: #{$card-border-color};
-  // --#{$variable-prefix}card-color: #{$card-color};
-  // --#{$variable-prefix}card-cap-color: #{$card-cap-color};
-  // --#{$variable-prefix}card-cap-bg: #{$card-cap-bg};
+  // --#{$prefix}card-bg: #{$card-bg};
+  // --#{$prefix}card-border-color: #{$card-border-color};
+  // --#{$prefix}card-color: #{$card-color};
+  // --#{$prefix}card-cap-color: #{$card-cap-color};
+  // --#{$prefix}card-cap-bg: #{$card-cap-bg};
 
   // // Close
-  // --#{$variable-prefix}btn-close-color: #{$btn-close-color};
-  // --#{$variable-prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
+  // --#{$prefix}btn-close-color: #{$btn-close-color};
+  // --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
 
   // // Dropdown
-  // --#{$variable-prefix}dropdown-color: #{$dropdown-color};
-  // --#{$variable-prefix}dropdown-bg: #{$dropdown-bg};
-  // --#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color};
-  // --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
-  // --#{$variable-prefix}dropdown-link-color: #{$dropdown-link-color};
-  // --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
-  // --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
-  // --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  // --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
+  // --#{$prefix}dropdown-color: #{$dropdown-color};
+  // --#{$prefix}dropdown-bg: #{$dropdown-bg};
+  // --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+  // --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+  // --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+  // --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+  // --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+  // --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+  // --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
 
   // // Images
-  // --#{$variable-prefix}thumbnail-bg: #{$thumbnail-bg};
-  // --#{$variable-prefix}thumbnail-border-color: #{$thumbnail-border-color};
+  // --#{$prefix}thumbnail-bg: #{$thumbnail-bg};
+  // --#{$prefix}thumbnail-border-color: #{$thumbnail-border-color};
 
   // // Images / Figure
-  // --#{$variable-prefix}figure-caption-color: $figure-caption-color;
+  // --#{$prefix}figure-caption-color: $figure-caption-color;
 
   // // List Group
-  // --#{$variable-prefix}list-group-action-color: #{$list-group-action-color};
-  // --#{$variable-prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
-  // --#{$variable-prefix}list-group-hover-bg: #{$list-group-hover-bg};
-  // --#{$variable-prefix}list-group-action-active-color: #{$list-group-action-active-color};
-  // --#{$variable-prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
-  // --#{$variable-prefix}list-group-color: #{$list-group-color};
-  // --#{$variable-prefix}list-group-bg: #{$list-group-bg};
-  // --#{$variable-prefix}list-group-border-color: #{$list-group-border-color};
-  // --#{$variable-prefix}list-group-disabled-color: #{$list-group-disabled-color};
-  // --#{$variable-prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
-  // --#{$variable-prefix}list-group-active-color: #{$list-group-active-color};
-  // --#{$variable-prefix}list-group-active-bg: #{$list-group-active-bg};
-  // --#{$variable-prefix}list-group-active-border-color: #{$list-group-active-border-color};
+  // --#{$prefix}list-group-action-color: #{$list-group-action-color};
+  // --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
+  // --#{$prefix}list-group-hover-bg: #{$list-group-hover-bg};
+  // --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
+  // --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
+  // --#{$prefix}list-group-color: #{$list-group-color};
+  // --#{$prefix}list-group-bg: #{$list-group-bg};
+  // --#{$prefix}list-group-border-color: #{$list-group-border-color};
+  // --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
+  // --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
+  // --#{$prefix}list-group-active-color: #{$list-group-active-color};
+  // --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
+  // --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
 }

package/scss/mixins/_forms.scss

@@ -5,11 +5,11 @@
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
     .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state}, #{if(&, "&", "")}.ng-#{$state} {
+    #{if(&, "&", "")}.is-#{$state} {
       @content;
     }
   } @else {
-    #{if(&, "&", "")}.is-#{$state}, #{if(&, "&", "")}.ng-#{$state}  {
+    #{if(&, "&", "")}.is-#{$state} {
       @content;
     }
   }
@@ -105,6 +105,14 @@
     }
   }
 
+  .form-control-color {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        width: add($form-color-width, $input-height-inner);
+      }
+    }
+  }
+
   .form-check-input {
     @include form-validation-state-selector($state) {
       border-color: $color;

package/scss/mixins/_gradients.scss

@@ -5,7 +5,7 @@
   background-color: $color;
 
   @if $enable-gradients {
-    background-image: var(--#{$variable-prefix}gradient);
+    background-image: var(--#{$prefix}gradient);
   }
 }
 // scss-docs-end gradient-bg-mixin

package/scss/mixins/_grid.scss

@@ -3,17 +3,17 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-row($gutter: $grid-gutter-width) {
-  --#{$variable-prefix}gutter-x: #{$gutter};
-  --#{$variable-prefix}gutter-y: 0;
+  --#{$prefix}gutter-x: #{$gutter};
+  --#{$prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
-  margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
 }
 
-@mixin make-col-ready($gutter: $grid-gutter-width) {
+@mixin make-col-ready() {
   // Add box sizing if only the grid is loaded
   box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
   // Prevent columns from becoming too narrow when at smaller grid tiers by
@@ -22,9 +22,9 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-top: var(--#{$variable-prefix}gutter-y);
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  margin-top: var(--#{$prefix}gutter-y);
 }
 
 @mixin make-col($size: false, $columns: $grid-columns) {
@@ -114,12 +114,12 @@
       @each $key, $value in $gutters {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
-          --#{$variable-prefix}gutter-x: #{$value};
+          --#{$prefix}gutter-x: #{$value};
         }
 
         .g#{$infix}-#{$key},
         .gy#{$infix}-#{$key} {
-          --#{$variable-prefix}gutter-y: #{$value};
+          --#{$prefix}gutter-y: #{$value};
         }
       }
     }

package/scss/mixins/_list-group.scss

@@ -5,14 +5,12 @@
   $background-hover: map-get($variant, "bg-hover");
   $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
 
-  .list-group-item-#{$state} {
-    --#{$variable-prefix}list-group-color: #{$color};
-    --#{$variable-prefix}list-group-bg: #{$background};
-    --#{$variable-prefix}list-group-hover-bg: #{$background-hover};
-    --#{$variable-prefix}list-group-action-hover-color: #{$color};
-    --#{$variable-prefix}list-group-action-active-color: #{$white};
-    --#{$variable-prefix}list-group-action-active-bg: #{$color};
-    --#{$variable-prefix}list-group-action-active-border-color: #{$color};
-  }
+  --#{$prefix}list-group-color: #{$color};
+  --#{$prefix}list-group-bg: #{$background};
+  --#{$prefix}list-group-hover-bg: #{$background-hover};
+  --#{$prefix}list-group-action-hover-color: #{$color};
+  --#{$prefix}list-group-action-active-color: #{$white};
+  --#{$prefix}list-group-action-active-bg: #{$color};
+  --#{$prefix}list-group-action-active-border-color: #{$color};
 }
 // scss-docs-end list-group-mixin

package/scss/mixins/_pagination.scss

@@ -2,30 +2,9 @@
 
 // scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  .page-link {
-    padding: $padding-y $padding-x;
-    @include font-size($font-size);
-  }
-
-  .page-item {
-    @if $pagination-margin-start == (-$pagination-border-width) {
-      &:first-child {
-        .page-link {
-          @include border-start-radius($border-radius);
-        }
-      }
-
-      &:last-child {
-        .page-link {
-          @include border-end-radius($border-radius);
-        }
-      }
-    } @else {
-      //Add border-radius to all pageLinks in case they have left margin
-      .page-link {
-        @include border-radius($border-radius);
-      }
-    }
-  }
+  --#{$prefix}pagination-padding-x: #{$padding-x};
+  --#{$prefix}pagination-padding-y: #{$padding-y};
+  @include rfs($font-size, --#{$prefix}pagination-font-size);
+  --#{$prefix}pagination-border-radius: #{$border-radius};
 }
 // scss-docs-end pagination-mixin

package/scss/mixins/_table-variants.scss

@@ -1,16 +1,24 @@
 // scss-docs-start table-variant
-@mixin table-variant($map) {
-  --#{$variable-prefix}table-bg: #{map-get($map, "bg")};
-  --#{$variable-prefix}table-color: #{map-get($map, "color")};
-  --#{$variable-prefix}table-border-color: #{map-get($map, "border-color")};
-  --#{$variable-prefix}table-striped-bg: #{map-get($map, "striped-bg")};
-  --#{$variable-prefix}table-striped-color: #{map-get($map, "striped-color")};
-  --#{$variable-prefix}table-active-bg: #{map-get($map, "active-bg")};
-  --#{$variable-prefix}table-active-color: #{map-get($map, "active-color")};
-  --#{$variable-prefix}table-hover-bg: #{map-get($map, "hover-bg")};
-  --#{$variable-prefix}table-hover-color: #{map-get($map, "hover-color")};
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+    $border-color: mix($color, $background, percentage($table-border-factor));
 
-  color: var(--#{$variable-prefix}table-color);
-  border-color: var(--#{$variable-prefix}table-border-color);
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
 }
 // scss-docs-end table-variant

package/scss/mixins/_utilities.scss

@@ -58,12 +58,12 @@
 
       @if $is-css-var {
         .#{$property-class + $infix + $property-class-modifier} {
-          --#{$variable-prefix}#{$css-variable-name}: #{$value};
+          --#{$prefix}#{$css-variable-name}: #{$value};
         }
 
         @each $pseudo in $state {
           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            --#{$variable-prefix}#{$css-variable-name}: #{$value};
+            --#{$prefix}#{$css-variable-name}: #{$value};
           }
         }
       } @else {
@@ -71,7 +71,7 @@
           @each $property in $properties {
             @if $is-local-vars {
               @each $local-var, $variable in $is-local-vars {
-                --#{$variable-prefix}#{$local-var}: #{$variable};
+                --#{$prefix}#{$local-var}: #{$variable};
               }
             }
             @if $generate-rtl == true {
@@ -85,6 +85,11 @@
         @each $pseudo in $state {
           .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
             @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
               #{$property}: $value if($enable-important-utilities, !important, null);
             }
           }