@coreui/coreui 5.1.2 → 5.3.0

package/scss/mixins/_utilities.scss

@@ -1,37 +1,50 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "ltr-rtl" as *;
+
+// Generate selectors for theme variants
+@function theme-prefix($theme, $selector) {
+  @return #{"[data" + $data-infix + "theme="$theme + "] ." + $theme + "\\:" + $selector + ", [data" + $data-infix + "theme="$theme + "] ." + $theme + "\\:" + $selector + ":not([class*='#{$theme}:'])"};
+}
+
 // Utility generator
 // Used to generate utilities & print utilities
 @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
-  $values: map-get($utility, values);
+  $values: map.get($utility, values);
 
   // If the values are a list or string, convert it into a map
-  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
-    $values: zip($values, $values);
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+    $values: list.zip($values, $values);
   }
 
   @each $key, $value in $values {
-    $properties: map-get($utility, property);
+    $properties: map.get($utility, property);
 
     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
-    @if type-of($properties) == "string" {
-      $properties: append((), $properties);
+    @if meta.type-of($properties) == "string" {
+      $properties: list.append((), $properties);
     }
 
     // Use custom class if present
-    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
     $property-class: if($property-class == null, "", $property-class);
 
     // Use custom CSS variable name if present, otherwise default to `class`
-    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+    $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
 
     // State params to generate pseudo-classes
-    $state: if(map-has-key($utility, state), map-get($utility, state), ());
+    $state: if(map.has-key($utility, state), map.get($utility, state), ());
 
-    $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (e.g. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    @if map-get($utility, rfs) {
+    @if map.get($utility, rfs) {
       // Inside the media query
       @if $is-rfs-media-query {
         $val: rfs-value($value);
@@ -44,10 +57,10 @@
       }
     }
 
-    $is-css-var: map-get($utility, css-var);
-    $is-dark-mode: map-get($utility, dark-mode);
-    $is-local-vars: map-get($utility, local-vars);
-    $is-rtl: map-get($utility, rtl);
+    $is-css-var: map.get($utility, css-var);
+    $is-dark-mode: map.get($utility, dark-mode);
+    $is-local-vars: map.get($utility, local-vars);
+    $is-rtl: map.get($utility, rtl);
 
     @if $value != null {
       @if $is-rtl == false {
@@ -93,8 +106,8 @@
                 }
               }
               @if $is-rtl == true {
-                @if (type-of($value) == "map") {
-                  @include ltr-rtl($property, map-get($value, "ltr"), null, map-get($value, "rtl"), if($enable-important-utilities, !important, null));
+                @if (meta.type-of($value) == "map") {
+                  @include ltr-rtl($property, map.get($value, "ltr"), null, map.get($value, "rtl"), if($enable-important-utilities, !important, null));
                 } @else {
                   @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
                 }

package/scss/sidebar/_sidebar-narrow.scss

@@ -1,4 +1,9 @@
-%sidebar-narrow {
+@use "../mixins/breakpoints" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../variables" as *;
+@use "sidebar" as *;
+
+.sidebar-narrow {
   // scss-docs-start sidebar-narrow-css-vars
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
   // scss-docs-end sidebar-narrow-css-vars
@@ -9,10 +14,6 @@
     padding-bottom: var(--#{$prefix}sidebar-toggler-height);
     overflow: visible;
 
-    &.sidebar-fixed {
-      width: var(--#{$prefix}sidebar-narrow-width);
-    }
-
     .sidebar-brand-full {
       display: none;
     }
@@ -32,6 +33,10 @@
       --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
     }
 
+    .nav-link {
+      overflow: hidden;
+    }
+
     .nav-icon {
       flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list
     }
@@ -59,35 +64,19 @@
   }
 }
 
-.sidebar-narrow {
-  @extend %sidebar-narrow;
-  &:not(.sidebar-end) ~ * {
-    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-  &.sidebar-end ~ * {
-    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-
-  .nav-link {
-    overflow: hidden;
-  }
-}
-
 .sidebar-narrow-unfoldable {
-  position: fixed;
+  // scss-docs-start sidebar-narrow-unfoldable-css-vars
+  --#{$prefix}sidebar-narrow-unfoldable-box-shadow: #{$sidebar-narrow-unfoldable-box-shadow};
+  // scss-docs-end sidebar-narrow-unfoldable-css-vars
 
-  &:not(.sidebar-end) ~ * {
-    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
-  &.sidebar-end ~ * {
-    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
-  }
+  @extend .sidebar-fixed;
 
   &:not(:hover) {
-    @extend %sidebar-narrow;
+    @extend .sidebar-narrow;
   }
 
   &:hover {
+    box-shadow: var(--#{$prefix}sidebar-narrow-unfoldable-box-shadow);
     box-shadow: $box-shadow;
 
     .sidebar-toggler::before {
@@ -98,26 +87,16 @@
       transform: rotate(0deg);
     }
   }
-
-  .nav-link {
-    overflow: hidden;
-  }
 }
 
-// Responsive behavior
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-down($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-    .sidebar:not(.show).sidebar-self-hiding#{$infix} {
-      &.sidebar-narrow,
-      &.sidebar-narrow-unfoldable {
-        &:not(.sidebar-end) {
-          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
-        }
-        &.sidebar-end {
-          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
-        }
-      }
+.sidebar-narrow,
+.sidebar-narrow-unfoldable {
+  @include media-breakpoint-up($mobile-breakpoint) {
+    &:not(.sidebar-end):not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
+    }
+    &.sidebar-end:not(.hide) ~ * {
+      --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
     }
   }
 }

package/scss/sidebar/_sidebar-nav.scss

@@ -1,9 +1,14 @@
 // Sidebar navigation
+@use "../functions/escape-svg" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
 
 .sidebar-nav {
   // scss-docs-start sidebar-nav-css-vars
   --#{$prefix}sidebar-nav-padding-x: #{$sidebar-nav-padding-x};
   --#{$prefix}sidebar-nav-padding-y: #{$sidebar-nav-padding-y};
+  --#{$prefix}sidebar-nav-gap: #{$sidebar-nav-gap};
 
   --#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
   --#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
@@ -71,7 +76,7 @@
   .nav-item + .nav-item,
   .nav-item + .nav-group,
   .nav-group + .nav-item {
-    margin-top: 1px;
+    margin-top: var(--#{$prefix}sidebar-nav-gap);
   }
 
   .nav-title {
@@ -174,7 +179,7 @@
     align-items: center;
     justify-content: center;
     height: var(--#{$prefix}sidebar-nav-link-icon-height);
-    @include ltr-rtl("margin-right", var(--#{$prefix}sidebar-nav-link-icon-margin));
+    margin-inline-end: var(--#{$prefix}sidebar-nav-link-icon-margin);
     font-size: var(--#{$prefix}sidebar-nav-link-icon-font-size);
     color: var(--#{$prefix}sidebar-nav-link-icon-color);
     text-align: center;
@@ -225,7 +230,7 @@
       }
 
       + .show {
-        margin-top: 1px;
+        margin-top: var(--#{$prefix}sidebar-nav-gap);
       }
     }
   }
@@ -237,7 +242,7 @@
       display: block;
       flex: 0 12px;
       height: 12px;
-      @include ltr-rtl("margin-left", auto);
+      margin-inline-start: auto;
       content: "";
       background-color: var(--#{$prefix}sidebar-nav-group-indicator-color);
       mask-image: var(--#{$prefix}sidebar-nav-group-indicator-icon);
@@ -250,11 +255,11 @@
     list-style: none;
 
     .nav-link {
-      @include ltr-rtl("padding-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)));
+      padding-inline-start: calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)); // stylelint-disable-line function-disallowed-list
     }
 
     .nav-icon {
-      @include ltr-rtl("margin-left", calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1));
+      margin-inline-start: calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1); // stylelint-disable-line function-disallowed-list
     }
   }
 

package/scss/sidebar/_sidebar.scss

@@ -1,4 +1,12 @@
 // stylelint-disable function-disallowed-list
+@use "../functions/escape-svg" as *;
+@use "../mixins/backdrop" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/breakpoints" as *;
+@use "../mixins/ltr-rtl" as *;
+@use "../mixins/transition" as *;
+@use "../variables" as *;
+@use "../variables-dark" as *;
 
 .sidebar {
   // scss-docs-start sidebar-css-vars
@@ -24,152 +32,118 @@
   box-shadow: none;
   @include transition($sidebar-transition);
 
-  &.sidebar-fixed,
-  &.sidebar-narrow,
-  &.sidebar-narrow-unfoldable,
-  &.sidebar-overlaid {
-    z-index: var(--#{$prefix}sidebar-zindex);
-  }
-
   &:not(.sidebar-end){
-    @include ltr-rtl("margin-left", 0);
-    ~ * {
-      --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
-    }
+    margin-inline-start: 0;
   }
 
   &.sidebar-end {
     order: 99;
-    @include ltr-rtl("margin-right", 0);
-    ~ * {
-      --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
-    }
-  }
-
-  @each $width, $value in $sidebar-widths {
-    &.sidebar-#{$width} {
-      --#{$prefix}sidebar-width: #{$value};
-      @include media-breakpoint-up($mobile-breakpoint) {
-        &:not(.sidebar-end):not(.hide) {
-          ~ * {
-            --#{$prefix}sidebar-occupy-start: #{$value};
-          }
-        }
-        &.sidebar-end:not(.hide) {
-          ~ * {
-            --#{$prefix}sidebar-occupy-end: #{$value};
-          }
-        }
-      }
-    }
+    margin-inline-end: 0;
   }
 
   @include media-breakpoint-up($mobile-breakpoint) {
-    &.hide {
-      &:not(.sidebar-end){
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
-        ~ * {
-          --#{$prefix}sidebar-occupy-start: 0;
-        }
+    &:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid) {
+      &:not(.sidebar-end) ~ * {
+        --#{$prefix}sidebar-occupy-start: #{$sidebar-width};
       }
-      &.sidebar-end {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
-        ~ * {
-          --#{$prefix}sidebar-occupy-end: 0;
-        }
+      &.sidebar-end ~ * {
+        --#{$prefix}sidebar-occupy-end: #{$sidebar-width};
       }
     }
-  }
-
-  &.sidebar-fixed {
-    @include media-breakpoint-up($mobile-breakpoint) {
-      position: fixed;
-      top: 0;
-      bottom: 0;
 
+    &.hide {
       &:not(.sidebar-end) {
-        @include ltr-rtl("left", 0);
+        margin-inline-start: calc(-1 * var(--#{$prefix}sidebar-width));
       }
-
       &.sidebar-end {
-        @include ltr-rtl("right", 0);
-      }
-    }
-  }
+        margin-inline-end: calc(-1 * var(--#{$prefix}sidebar-width));
 
-  &.sidebar-sticky {
-    @include media-breakpoint-up($mobile-breakpoint) {
-      position: sticky;
-      top: 0;
-      height: 100vh;
+      }
     }
   }
 
-  &.sidebar-overlaid {
-    // scss-docs-start sidebar-overlaid-css-vars
-    --#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
-    // scss-docs-end sidebar-overlaid-css-vars
+  @include media-breakpoint-down($mobile-breakpoint) {
+    // Some of our components use this property to detect if the sidebar has mobile behavior.
+    --#{$prefix}is-mobile: true;
 
     position: fixed;
     top: 0;
     bottom: 0;
+    z-index: var(--#{$prefix}sidebar-zindex);
 
-    &:not(.sidebar-end){
-      @include ltr-rtl("left", 0);
-      @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
-      ~ * {
-        --#{$prefix}sidebar-occupy-start: 0 !important;  // stylelint-disable-line
+    &:not(.sidebar-end) {
+      inset-inline-start: 0;
+
+      &:not(.show) {
+        margin-inline-start: calc(-1 * var(--#{$prefix}sidebar-width));
       }
     }
 
     &.sidebar-end {
-      @include ltr-rtl("right", 0);
-      @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
-      ~ * {
-        --#{$prefix}sidebar-occupy-end: 0 !important;  // stylelint-disable-line
+      inset-inline-end: 0;
+
+      &:not(.show) {
+        margin-inline-end: calc(-1 * var(--#{$prefix}sidebar-width));
       }
     }
+  }
+}
 
-    &.show {
-      box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
+.sidebar-fixed {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: var(--#{$prefix}sidebar-zindex);
 
-      &:not(.sidebar-end) {
-        @include ltr-rtl("margin-left", 0);
-      }
+  &:not(.sidebar-end) {
+    inset-inline-start: 0;
+  }
 
-      &.sidebar-end {
-        @include ltr-rtl("margin-right", 0);
-      }
-    }
+  &.sidebar-end {
+    inset-inline-end: 0;
   }
+}
 
-  @include media-breakpoint-down($mobile-breakpoint) {
-    // Some of our components use this property to detect if the sidebar has mobile behavior.
-    --#{$prefix}is-mobile: true;
+.sidebar-overlaid {
+  // scss-docs-start sidebar-overlaid-css-vars
+  --#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
+  // scss-docs-end sidebar-overlaid-css-vars
 
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    z-index: var(--#{$prefix}sidebar-zindex);
+  @extend .sidebar-fixed;
 
-    &:not(.sidebar-end) {
-      @include ltr-rtl("left", 0);
-      ~ * {
-        --#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
-      }
+  &:not(.sidebar-end){
+    margin-inline-start: calc(-1 * var(--#{$prefix}sidebar-width));
+  }
 
-      &:not(.show) {
-        @include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
-      }
+  &.sidebar-end {
+    margin-inline-end: calc(-1 * var(--#{$prefix}sidebar-width));
+  }
+
+  &.show {
+    box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
+
+    &:not(.sidebar-end) {
+      margin-inline-start: 0;
     }
+
     &.sidebar-end {
-      @include ltr-rtl("right", 0);
-      ~ * {
-        --#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
-      }
+      margin-inline-end: 0;
+    }
+  }
+}
 
-      &:not(.show) {
-        @include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
+@each $width, $value in $sidebar-widths {
+  .sidebar-#{$width} {
+    --#{$prefix}sidebar-width: #{$value};
+
+    @include media-breakpoint-up($mobile-breakpoint) {
+      &:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid) {
+        &:not(.sidebar-end) ~ * {
+          --#{$prefix}sidebar-occupy-start: #{$value};
+        }
+        &.sidebar-end ~ * {
+          --#{$prefix}sidebar-occupy-end: #{$value};
+        }
       }
     }
   }
@@ -192,8 +166,8 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}sidebar-padding-y) * .5) calc(var(--#{$prefix}sidebar-padding-x) * .5);
+    margin-inline-end: calc(-.5 * var(--#{$prefix}sidebar-padding-x));
     margin-top: calc(-.5 * var(--#{$prefix}sidebar-padding-y));
-    @include ltr-rtl("margin-right", calc(-.5 * var(--#{$prefix}sidebar-padding-x)));
     margin-bottom: calc(-.5 * var(--#{$prefix}sidebar-padding-y));
   }
 }

package/scss/themes/bootstrap/bootstrap.rtl.scss

@@ -1,24 +1,4 @@
-@import "variables";
-
-$enable-ltr: false !default;
-$enable-rtl: true !default;
-
-@import "mixins/banner";
-@include bsBanner("");
-
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../variables";
-
-/* rtl:begin:ignore */
-@import "../../mixins/avatar";
-@import "../../mixins/icon";
-@import "../../mixins/ltr-rtl";
-
-@import "../../avatar";
-@import "../../callout";
-@import "../../footer";
-@import "../../header";
-@import "../../icon";
-@import "../../sidebar";
-
-/* rtl:end:ignore */
+@use "bootstrap" with (
+  $enable-ltr: false,
+  $enable-rtl: true
+);

package/scss/themes/bootstrap/bootstrap.scss

@@ -1,21 +1,125 @@
-@import "variables";
+@use "sass:color";
+@use "../../banner" with (
+  $file: "Bootstrap Theme"
+);
+@use "../../functions/color" as *;
 
-@import "mixins/banner";
-@include bsBanner("");
+// scss-docs-start gray-color-variables
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+// scss-docs-end gray-color-variables
 
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-@import "../../variables";
+// scss-docs-start color-variables
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+// scss-docs-end color-variables
 
-/* rtl:begin:ignore */
-@import "../../mixins/avatar";
-@import "../../mixins/icon";
-@import "../../mixins/ltr-rtl";
+// scss-docs-start theme-color-variables
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+// scss-docs-end theme-color-variables
 
-@import "../../avatar";
-@import "../../callout";
-@import "../../footer";
-@import "../../header";
-@import "../../icon";
-@import "../../sidebar";
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+// scss-docs-end theme-text-dark-variables
 
-/* rtl:end:ignore */
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+$success-border-subtle-dark:        shade-color($success, 40%) !default;
+$info-border-subtle-dark:           shade-color($info, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+@forward "../../coreui" with (
+  $prefix:                        bs- !default,
+  $data-infix:                    -bs- !default,
+  $white:                         $white !default,
+  $gray-100:                      $gray-100 !default,
+  $gray-200:                      $gray-200 !default,
+  $gray-300:                      $gray-300 !default,
+  $gray-400:                      $gray-400 !default,
+  $gray-500:                      $gray-500 !default,
+  $gray-600:                      $gray-600 !default,
+  $gray-700:                      $gray-700 !default,
+  $gray-800:                      $gray-800 !default,
+  $gray-900:                      $gray-900 !default,
+  $black:                         $black !default,
+  $primary:                       $primary !default,
+  $secondary:                     $secondary !default,
+  $success:                       $success !default,
+  $info:                          $info !default,
+  $warning:                       $warning !default,
+  $danger:                        $danger !default,
+  $light:                         $light !default,
+  $dark:                          $dark !default,
+  $body-color:                    $gray-900 !default,
+  $body-secondary-color:          rgba($gray-900, .75) !default,
+  $body-tertiary-bg:              rgba($gray-900, .75) !default,
+  $component-active-color:        $white !default,
+  $component-active-bg:           $primary !default,
+  $body-color-dark:               $gray-300 !default,
+  $body-bg-dark:                  $gray-900 !default,
+  $body-secondary-color-dark:     rgba($gray-300, .75) !default,
+  $body-secondary-bg-dark:        $gray-800 !default,
+  $body-tertiary-color-dark:      rgba($gray-300, .5) !default,
+  $body-tertiary-bg-dark:         color.mix($gray-800, $gray-900, 50%) !default,
+  $primary-text-emphasis-dark:    $primary-text-emphasis-dark !default,
+  $secondary-text-emphasis-dark:  $secondary-text-emphasis-dark !default,
+  $success-text-emphasis-dark:    $success-text-emphasis-dark !default,
+  $info-text-emphasis-dark:       $info-text-emphasis-dark !default,
+  $warning-text-emphasis-dark:    $warning-text-emphasis-dark !default,
+  $danger-text-emphasis-dark:     $danger-text-emphasis-dark !default,
+  $primary-bg-subtle-dark:        $primary-bg-subtle-dark !default,
+  $secondary-bg-subtle-dark:      $secondary-bg-subtle-dark !default,
+  $success-bg-subtle-dark:        $success-bg-subtle-dark !default,
+  $info-bg-subtle-dark:           $info-bg-subtle-dark !default,
+  $warning-bg-subtle-dark:        $warning-bg-subtle-dark !default,
+  $danger-bg-subtle-dark:         $danger-bg-subtle-dark !default,
+  $primary-border-subtle-dark:    $primary-border-subtle-dark !default,
+  $secondary-border-subtle-dark:  $secondary-border-subtle-dark !default,
+  $success-border-subtle-dark:    $success-border-subtle-dark !default,
+  $info-border-subtle-dark:       $info-border-subtle-dark !default,
+  $warning-border-subtle-dark:    $warning-border-subtle-dark !default,
+  $danger-border-subtle-dark:     $danger-border-subtle-dark !default,
+  $theme-colors-dark:             () !default,
+  $grays-dark:                    () !default,
+);