@coreui/coreui 5.0.0-alpha.2 → 5.0.0-beta.0

package/scss/_buttons.scss

@@ -161,7 +161,7 @@
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
   text-decoration: $link-decoration;
   @if $enable-gradients {

package/scss/_header.scss

@@ -63,7 +63,7 @@
   &.header-sticky {
     position: sticky;
     top: 0;
-    z-index: $zindex-fixed - 1;
+    z-index: $zindex-sticky;
   }
 }
 

package/scss/_nav.scss

@@ -154,6 +154,48 @@
 }
 
 
+//
+// Underline border
+//
+
+.nav-underline-border {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-border-gap: #{$nav-underline-border-gap};
+  --#{$prefix}nav-underline-border-border-color: #{$nav-underline-border-border-color};
+  --#{$prefix}nav-underline-border-border-width: #{$nav-underline-border-border-width};
+  --#{$prefix}nav-underline-border-link-padding-x: #{$nav-underline-border-link-padding-x};
+  --#{$prefix}nav-underline-border-link-padding-y: #{$nav-underline-border-link-padding-y};
+  --#{$prefix}nav-underline-border-link-color: #{$nav-underline-border-link-color};
+  --#{$prefix}nav-underline-border-link-active-color: #{$nav-underline-border-link-active-color};
+  --#{$prefix}nav-underline-border-link-disabled-color: #{$nav-underline-border-link-disabled-color};
+  // scss-docs-end nav-underline-css-vars
+
+  --#{$prefix}nav-link-color: var(--#{$prefix}nav-underline-border-link-color);
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}nav-underline-border-link-disabled-color);
+
+  gap: var(--#{$prefix}nav-underline-border-gap);
+  border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid var(--#{$prefix}nav-underline-border-border-color);
+
+  .nav-link {
+    padding: var(--#{$prefix}nav-underline-border-link-padding-y) var(--#{$prefix}nav-underline-border-link-padding-x);
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-underline-border-border-width)); // stylelint-disable-line function-disallowed-list
+    border-bottom: var(--#{$prefix}nav-underline-border-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-border-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
 //
 // Justified variants
 //

package/scss/_reboot.scss

@@ -217,6 +217,7 @@ small {
 
 mark {
   padding: $mark-padding;
+  color: var(--#{$prefix}highlight-color);
   background-color: var(--#{$prefix}highlight-bg);
 }
 

package/scss/_root.scss

@@ -93,6 +93,14 @@
   --#{$prefix}tertiary-color-rgb-dark: #{to-rgb($body-tertiary-color-dark)};
   --#{$prefix}tertiary-bg-dark: #{$body-tertiary-bg-dark};
   --#{$prefix}tertiary-bg-rgb-dark: #{to-rgb($body-tertiary-bg-dark)};
+
+  --#{$prefix}high-emphasis: #{$high-emphasis}; // Deprecated in v5.0.0
+  --#{$prefix}medium-emphasis: #{$medium-emphasis}; // Deprecated in v5.0.0
+  --#{$prefix}disabled: #{$disabled}; // Deprecated in v5.0.0
+
+  --#{$prefix}high-emphasis-inverse: #{$high-emphasis-inverse}; // Deprecated in v5.0.0
+  --#{$prefix}medium-emphasis-inverse: #{$medium-emphasis-inverse}; // Deprecated in v5.0.0
+  --#{$prefix}disabled-inverse: #{$disabled-inverse}; // Deprecated in v5.0.0
   // scss-docs-end root-body-variables
 
   --#{$prefix}heading-color: #{$headings-color};
@@ -109,6 +117,7 @@
   }
 
   --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
 
   // scss-docs-start root-border-var
@@ -169,6 +178,10 @@
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
+    --#{$prefix}high-emphasis: #{$high-emphasis-dark}; // Deprecated in v5.0.0
+    --#{$prefix}medium-emphasis: #{$medium-emphasis-dark}; // Deprecated in v5.0.0
+    --#{$prefix}disabled: #{$disabled-dark}; // Deprecated in v5.0.0
+
     @each $color, $value in $theme-colors-dark {
       --#{$prefix}#{$color}: #{$value};
     }
@@ -201,6 +214,8 @@
     --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

package/scss/_utilities.scss

@@ -78,9 +78,9 @@ $utilities: map-merge(
       property: box-shadow,
       class: shadow,
       values: (
-        null: $box-shadow,
-        sm: $box-shadow-sm,
-        lg: $box-shadow-lg,
+        null: var(--#{$prefix}box-shadow),
+        sm: var(--#{$prefix}box-shadow-sm),
+        lg: var(--#{$prefix}box-shadow-lg),
         none: none,
       )
     ),

package/scss/_variables-dark.scss

@@ -8,15 +8,15 @@
 
 // scss-docs-start sass-dark-mode-vars
 // scss-docs-start gray-color-dark-variables
-$gray-100-dark: #f3f4f7 !default;
-$gray-200-dark: #e7eaee !default;
-$gray-300-dark: #dbdfe6 !default;
-$gray-400-dark: #cfd4de !default;
-$gray-500-dark: #aab3c5 !default;
-$gray-600-dark: #6d7d9c !default;
-$gray-700-dark: #4a566d !default;
-$gray-800-dark: #323a49 !default;
-$gray-900-dark: #212631 !default;
+$gray-100-dark: $gray-100 !default;
+$gray-200-dark: $gray-200 !default;
+$gray-300-dark: $gray-300 !default;
+$gray-400-dark: $gray-400 !default;
+$gray-500-dark: $gray-500 !default;
+$gray-600-dark: $gray-600 !default;
+$gray-700-dark: $gray-700 !default;
+$gray-800-dark: $gray-800 !default;
+$gray-900-dark: $gray-900 !default;
 // scss-docs-end gray-color-dark-variables
 
 // fusv-disable
@@ -35,6 +35,12 @@ $grays-dark: (
 // scss-docs-end gray-colors-dark-map
 // fusv-enable
 
+// fusv-disable
+$high-emphasis-dark:    rgba($white, .87) !default; // Deprecated in v5.0.0
+$medium-emphasis-dark:  rgba($white, .6) !default; // Deprecated in v5.0.0
+$disabled-dark:         rgba($white, .38) !default; // Deprecated in v5.0.0
+// fusv-enable
+
 // scss-docs-start theme-color-dark-variables
 $primary-dark:       desaturate($primary, 10%) !default;
 $secondary-dark:     desaturate($secondary, 10%) !default;
@@ -42,8 +48,8 @@ $success-dark:       desaturate($success, 10%) !default;
 $info-dark:          desaturate($info, 10%) !default;
 $warning-dark:       desaturate($warning, 10%) !default;
 $danger-dark:        desaturate($danger, 10%) !default;
-$light-dark:         desaturate($light, 10%) !default;
-$dark-dark:          desaturate($dark, 10%) !default;
+$light-dark:         $light !default;
+$dark-dark:          $dark !default;
 // scss-docs-end theme-color-dark-variables
 
 // scss-docs-start theme-colors-dark-map
@@ -60,12 +66,12 @@ $theme-colors-dark: (
 // scss-docs-end theme-colors-dark-map
 
 // scss-docs-start theme-text-dark-variables
-$primary-text-emphasis-dark:        $primary-text-emphasis !default;
-$secondary-text-emphasis-dark:      $secondary-text-emphasis !default;
-$success-text-emphasis-dark:        $success-text-emphasis !default;
-$info-text-emphasis-dark:           $info-text-emphasis !default;
-$warning-text-emphasis-dark:        $warning-text-emphasis !default;
-$danger-text-emphasis-dark:         $danger-text-emphasis !default;
+$primary-text-emphasis-dark:        desaturate($primary-text-emphasis, 10%) !default;
+$secondary-text-emphasis-dark:      desaturate($secondary-text-emphasis, 10%) !default;
+$success-text-emphasis-dark:        desaturate($success-text-emphasis, 10%) !default;
+$info-text-emphasis-dark:           desaturate($info-text-emphasis, 10%) !default;
+$warning-text-emphasis-dark:        desaturate($warning-text-emphasis, 10%) !default;
+$danger-text-emphasis-dark:         desaturate($danger-text-emphasis, 10%) !default;
 $light-text-emphasis-dark:          $gray-100-dark !default;
 $dark-text-emphasis-dark:           $gray-300-dark !default;
 // scss-docs-end theme-text-dark-variables
@@ -105,6 +111,8 @@ $headings-color-dark:               inherit !default;
 $link-color-dark:                   $primary-dark !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
+$mark-color-dark:                   $body-color-dark !default;
+$mark-bg-dark:                      $yellow-800 !default;
 
 
 //

package/scss/_variables.scss

@@ -36,6 +36,16 @@ $grays: (
 // scss-docs-end gray-colors-map
 // fusv-enable
 
+// fusv-disable
+$high-emphasis:            rgba(shift-color($gray-base, +26%), .95) !default; // Deprecated in 5.0.0
+$medium-emphasis:          rgba(shift-color($gray-base, +26%), .681) !default; // Deprecated in 5.0.0
+$disabled:                 rgba(shift-color($gray-base, +26%), .38) !default; // Deprecated in 5.0.0
+
+$high-emphasis-inverse:    rgba($white, .87) !default; // Deprecated in 5.0.0
+$medium-emphasis-inverse:  rgba($white, .6) !default; // Deprecated in 5.0.0
+$disabled-inverse:         rgba($white, .38) !default; // Deprecated in 5.0.0
+// fusv-enable
+
 // scss-docs-start color-variables
 $blue:    #0d6efd !default;
 $indigo:  #6610f2 !default;
@@ -726,6 +736,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
@@ -749,7 +760,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}body-color) !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
@@ -757,17 +768,17 @@ $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -857,6 +868,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
+$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -942,7 +954,7 @@ $input-disabled-border-color:           null !default;
 $input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
+$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
 $input-border-radius:                   var(--#{$prefix}border-radius) !default;
 $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
@@ -1071,7 +1083,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
+$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -1094,9 +1106,9 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -1183,7 +1195,8 @@ $form-validation-states: (
 $zindex-dropdown:                   1000 !default;
 $zindex-sticky:                     1020 !default;
 $zindex-fixed:                      1030 !default;
-$zindex-sidebar-backdrop:           1030 !default;
+$zindex-sidebar-backdrop:           1034 !default;
+$zindex-sidebar:                    1035 !default;
 $zindex-offcanvas-backdrop:         1040 !default;
 $zindex-offcanvas:                  1045 !default;
 $zindex-modal-backdrop:             1050 !default;
@@ -1232,6 +1245,15 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 $nav-underline-gap:                 1rem !default;
 $nav-underline-border-width:        .125rem !default;
 $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
+
+$nav-underline-border-gap:                  .5rem !default;
+$nav-underline-border-border-color:         var(--#{$prefix}border-color) !default;
+$nav-underline-border-border-width:         .125rem !default;
+$nav-underline-border-link-padding-y:       .5rem !default;
+$nav-underline-border-link-padding-x:       .5rem !default;
+$nav-underline-border-link-color:           var(--#{$prefix}secondary-color) !default;
+$nav-underline-border-link-active-color:    var(--#{$prefix}primary) !default;
+$nav-underline-border-link-disabled-color:  var(--#{$prefix}tertiary-color) !default;
 // scss-docs-end nav-variables
 
 
@@ -1299,7 +1321,7 @@ $dropdown-border-width:             var(--#{$prefix}border-width) !default;
 $dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
@@ -1488,7 +1510,7 @@ $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
 $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
-$popover-box-shadow:                $box-shadow !default;
+$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
@@ -1566,8 +1588,8 @@ $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !d
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -1637,7 +1659,7 @@ $callout-margin-x:                  0 !default;
 $callout-border-radius:             var(--#{$prefix}border-radius) !default;
 $callout-border-width:              var(--#{$prefix}border-width) !default;
 $callout-border-color:              var(--#{$prefix}border-color) !default;
-$callout-border-left-width:         calc($callout-border-width * 4) !default; // stylelint-disable-line function-disallowed-list
+$callout-border-left-width:         calc(#{$callout-border-width} * 4) !default; // stylelint-disable-line function-disallowed-list
 
 $callout-variants: (
   "primary":    $primary,
@@ -1856,8 +1878,10 @@ $sidebar-nav-link-border-color:               transparent !default;
 $sidebar-nav-link-border-radius:              var(--#{$prefix}border-radius) !default;
 $sidebar-nav-link-transition:                 background .15s ease, color .15s ease, gap .15s ease !default;
 
+$sidebar-compact-nav-link-padding-y:          .75rem !default;
+
 $sidebar-narrow-nav-link-padding-y:           .75rem !default;
-$sidebar-narrow-nav-link-padding-x:           .5rem !default;
+$sidebar-narrow-nav-link-padding-x:           .5625rem !default;
 
 $sidebar-nav-link-icon-margin:                .75rem !default;
 $sidebar-nav-link-icon-color:                 var(--#{$prefix}tertiary-color) !default;

package/scss/forms/_form-check.scss

@@ -29,6 +29,7 @@
 .form-check-input {
   --#{$prefix}form-check-bg: #{$form-check-input-bg};
 
+  flex-shrink: 0;
   width: $form-check-input-width;
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height

package/scss/mixins/_banner.scss

@@ -1,6 +1,6 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI #{$file} v5.0.0-alpha.2 (https://coreui.io)
+   * CoreUI #{$file} v5.0.0-beta.0 (https://coreui.io)
    * Copyright (c) 2023 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */

package/scss/mixins/_grid.scss

@@ -56,7 +56,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: divide(100%, $count);
+    width: percentage(divide(1, $count));
   }
 }
 

package/scss/mixins/_list-group.scss

@@ -6,7 +6,7 @@
 @mixin list-group-item-variant($state, $variant) {
   $background: map-get($variant, "bg");
   $background-hover: map-get($variant, "bg-hover");
-  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), abs($alert-color-scale), $state);
+  $color: contrast-ratio-correction(map-get($variant, "color"), map-get($variant, "bg"), $alert-color-scale, $state);
 
   --#{$prefix}list-group-color: #{$color};
   --#{$prefix}list-group-bg: #{$background};

package/scss/sidebar/_sidebar-narrow.scss

@@ -9,14 +9,12 @@
   }
 
   @include media-breakpoint-up($mobile-breakpoint) {
-    z-index: $zindex-fixed + 1;
     flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
     width: var(--#{$prefix}sidebar-narrow-width);
     padding-bottom: var(--#{$prefix}sidebar-toggler-height);
     overflow: visible;
 
     &.sidebar-fixed {
-      z-index: $zindex-fixed + 1;
       width: var(--#{$prefix}sidebar-narrow-width);
     }
 
@@ -77,7 +75,6 @@
 
 .sidebar-narrow-unfoldable {
   position: fixed;
-  z-index: $zindex-fixed + 1;
 
   &:not(.sidebar-end) ~ * {
     --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};

package/scss/sidebar/_sidebar-nav.scss

@@ -261,7 +261,7 @@
   &.compact,
   .compact {
     .nav-link {
-      --#{$prefix}sidebar-nav-link-padding-y: #{calc($sidebar-nav-link-padding-y * .75)};
+      --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-compact-nav-link-padding-y};
     }
   }
 }

package/scss/sidebar/_sidebar.scss

@@ -2,6 +2,7 @@
 
 .sidebar {
   // scss-docs-start sidebar-css-vars
+  --#{$prefix}sidebar-zindex: #{$zindex-sidebar};
   --#{$prefix}sidebar-width: #{$sidebar-width};
   --#{$prefix}sidebar-bg: #{$sidebar-bg};
   --#{$prefix}sidebar-padding-x: #{$sidebar-padding-x};
@@ -24,6 +25,12 @@
   box-shadow: none;
   @include transition($sidebar-transition);
 
+  &.sidebar-fixed,
+  &.sidebar-narrow,
+  &.sidebar-narrow-unfoldable {
+    z-index: var(--#{$prefix}sidebar-zindex);
+  }
+
   &:not(.sidebar-end){
     @include ltr-rtl("margin-left", 0);
     ~ * {
@@ -79,7 +86,6 @@
       position: fixed;
       top: 0;
       bottom: 0;
-      z-index: $zindex-fixed;
 
       &:not(.sidebar-end) {
         @include ltr-rtl("left", 0);
@@ -103,7 +109,6 @@
     position: fixed;
     top: 0;
     bottom: 0;
-    z-index: $zindex-fixed + 2;
 
     &:not(.hide) {
       box-shadow: $box-shadow;
@@ -130,7 +135,7 @@
     position: fixed;
     top: 0;
     bottom: 0;
-    z-index: $zindex-fixed + 1;
+    z-index: var(--#{$prefix}sidebar-zindex);
 
     &:not(.sidebar-end) {
       @include ltr-rtl("left", 0);