@coreui/coreui 4.2.5 → 5.0.0-alpha.0

package/scss/coreui-grid.scss

@@ -1,20 +1,16 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
-*/
+@import "mixins/banner";
+@include cuiBanner(Grid);
 
 $include-column-box-sizing: true !default;
 
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 
-@import "mixins/ltr-rtl";
 @import "mixins/lists";
 @import "mixins/breakpoints";
+@import "mixins/color-mode";
 @import "mixins/container";
 @import "mixins/grid";
 @import "mixins/utilities";

package/scss/coreui-reboot.scss

@@ -1,13 +1,10 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include cuiBanner(Reboot);
 
 @import "functions";
 @import "variables";
+@import "variables-dark";
+@import "maps";
 @import "mixins";
 @import "root";
 @import "reboot";

package/scss/coreui-utilities.scss

@@ -1,14 +1,10 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include cuiBanner(Utilities);
 
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";

package/scss/coreui.scss

@@ -1,15 +1,12 @@
-/*!
- * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.2.5
- * @link https://coreui.io/
- * Copyright (c) 2022 creativeLabs Łukasz Holeczek
- * License MIT  (https://coreui.io/license/)
- */
+@import "mixins/banner";
+@include cuiBanner("");
+
 
 // scss-docs-start import-stack
 // Configuration
 @import "functions";
 @import "variables";
+@import "variables-dark";
 @import "maps";
 @import "mixins";
 @import "utilities";
@@ -49,11 +46,9 @@
 
 @import "avatar";
 @import "callout";
-@import "footer";
-@import "header";
 @import "icon";
+@import "footer";
 @import "sidebar";
-@import "subheader";
 
 // Helpers
 @import "helpers";

package/scss/forms/_floating-labels.scss

@@ -1,6 +1,17 @@
 .form-floating {
   position: relative;
 
+  &::before:not(.form-control:disabled) {
+    position: absolute;
+    top: $input-border-width;
+    left: $input-border-width;
+    width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
+    height: $form-floating-label-height;
+    content: "";
+    background-color: $input-bg;
+    @include border-radius($input-border-radius);
+  }
+
   > .form-control,
   > .form-control-plaintext,
   > .form-select {
@@ -11,7 +22,7 @@
   > label {
     position: absolute;
     top: 0;
-    @include ltr-rtl("left", 0);
+    left: 0;
     width: 100%;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
@@ -72,4 +83,8 @@
       border-width: $input-border-width 0; // Required to properly position label text - as explained above
     }
   }
+
+  > .form-control:disabled ~ label {
+    color: $form-floating-label-disabled-color;
+  }
 }

package/scss/forms/_form-check.scss

@@ -5,14 +5,12 @@
 .form-check {
   display: block;
   min-height: $form-check-min-height;
-  @include ltr-rtl("padding-left", $form-check-padding-start);
+  padding-left: $form-check-padding-start;
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
-    // float: left;
-    // margin-left: $form-check-padding-start * -1;
-    @include ltr-rtl("float", left);
-    @include ltr-rtl("margin-left", $form-check-padding-start * -1);
+    float: left;
+    margin-left: $form-check-padding-start * -1;
   }
 }
 
@@ -29,11 +27,14 @@
 }
 
 .form-check-input {
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
   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
   vertical-align: top;
-  background-color: var(--#{$prefix}form-check-input-bg, $form-check-input-bg);
+  background-color: var(--#{$prefix}form-check-bg);
+  background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
@@ -62,22 +63,22 @@
   }
 
   &:checked {
-    background-color: var(--#{$prefix}form-check-input-checked-bg-color, $form-check-input-checked-bg-color);
-    border-color: var(--#{$prefix}form-check-input-checked-border-color, $form-check-input-checked-border-color);
+    background-color: $form-check-input-checked-bg-color;
+    border-color: $form-check-input-checked-border-color;
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$prefix}form-check-input-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
       }
     }
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$prefix}form-check-radio-checked-bg-image, escape-svg($form-check-radio-checked-bg-image));
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
       }
     }
   }
@@ -87,9 +88,9 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
     } @else {
-      background-image: var(--#{$prefix}form-check-input-indeterminate-bg-image, escape-svg($form-check-input-indeterminate-bg-image));
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
     }
   }
 
@@ -111,7 +112,7 @@
 }
 
 .form-check-label {
-  color: var(--#{$prefix}form-check-label-color, $form-check-label-color);
+  color: $form-check-label-color;
   cursor: $form-check-label-cursor;
 }
 
@@ -120,27 +121,29 @@
 //
 
 .form-switch {
-  @include ltr-rtl("padding-left", $form-switch-padding-start);
+  padding-left: $form-switch-padding-start;
 
   .form-check-input {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
     width: $form-switch-width;
-    @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
-    background-image: var(--#{$prefix}form-switch-bg-image, escape-svg($form-switch-bg-image));
+    margin-left: $form-switch-padding-start * -1;
+    background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
     @include transition($form-switch-transition);
 
     &:focus {
-      background-image: var(--#{$prefix}form-switch-focus-bg-image, escape-svg($form-switch-focus-bg-image));
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
     }
 
     &:checked {
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$prefix}form-switch-checked-bg-image, escape-svg($form-switch-checked-bg-image));
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
       }
     }
   }
@@ -156,30 +159,9 @@
   }
 }
 
-@each $size, $map in $form-switch-widths {
-  $width: map-get($map, "width");
-  $height: map-get($map, "height");
-
-  .form-switch-#{$size} {
-    min-height: $height;
-    @include ltr-rtl("padding-left", $width + .5em);
-
-    .form-check-input {
-      width: $width;
-      height: $height;
-      @include ltr-rtl("margin-left", ($width + .5em) * -1);
-    }
-
-    .form-check-label {
-      // stylelint-disable-next-line function-disallowed-list
-      padding-top: calc((#{$height} - #{$font-size-base}) / 2);
-    }
-  }
-}
-
 .form-check-inline {
   display: inline-block;
-  @include ltr-rtl("margin-right", $form-check-inline-margin-end);
+  margin-right: $form-check-inline-margin-end;
 }
 
 .btn-check {
@@ -197,15 +179,10 @@
   }
 }
 
-//
-// Alternate form checks
-//
-
-@each $state, $color in $theme-colors {
-  .form-check-#{$state} {
-    --#{$prefix}form-check-input-checked-bg-color: #{$color};
-    --#{$prefix}form-check-input-checked-border-color: #{$color};
-    --#{$prefix}form-check-input-indeterminate-bg-color: #{$color};
-    --#{$prefix}form-check-input-indeterminate-border-color: #{$color};
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-switch .form-check-input:not(:checked):not(:focus) {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+    }
   }
 }

package/scss/forms/_form-control.scss

@@ -10,10 +10,10 @@
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
-  color: var(--#{$prefix}input-color, $input-color);
-  background-color: var(--#{$prefix}input-bg, $input-bg);
+  color: $input-color;
+  background-color: $input-bg;
   background-clip: padding-box;
-  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
+  border: $input-border-width solid $input-border-color;
   appearance: none; // Fix appearance for date inputs in Safari
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@@ -32,9 +32,9 @@
 
   // Customize the `:focus` state to imitate native WebKit styles.
   &:focus {
-    color: var(--#{$prefix}input-focus-color, $input-focus-color);
-    background-color: var(--#{$prefix}input-focus-bg, $input-focus-bg);
-    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -52,9 +52,16 @@
     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
   }
 
+  // Prevent excessive date input height in Webkit
+  // https://github.com/twbs/bootstrap/issues/34433
+  &::-webkit-datetime-edit {
+    display: block;
+    padding: 0;
+  }
+
   // Placeholder
   &::placeholder {
-    color: var(--#{$prefix}input-placeholder-color, $input-placeholder-color);
+    color: $input-placeholder-color;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -77,8 +84,8 @@
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
-    color: var(--#{$prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg(var(--#{$prefix}form-file-button-bg, $form-file-button-bg));
+    color: $form-file-button-color;
+    @include gradient-bg($form-file-button-bg);
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
@@ -89,7 +96,7 @@
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--#{$prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
+    background-color: $form-file-button-hover-bg;
   }
 }
 
@@ -104,7 +111,7 @@
   padding: $input-padding-y 0;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
-  color: var(--#{$prefix}input-plaintext-color, $input-plaintext-color);
+  color: $input-plaintext-color;
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;

package/scss/forms/_form-range.scss

@@ -28,7 +28,7 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
-    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
+    @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
@@ -36,7 +36,7 @@
     appearance: none;
 
     &:active {
-      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
+      @include gradient-bg($form-range-thumb-active-bg);
     }
   }
 
@@ -45,7 +45,7 @@
     height: $form-range-track-height;
     color: transparent; // Why?
     cursor: $form-range-track-cursor;
-    background-color: var(--#{$prefix}form-range-track-bg, $form-range-track-bg);
+    background-color: $form-range-track-bg;
     border-color: transparent;
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
@@ -54,7 +54,7 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
+    @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
@@ -62,7 +62,7 @@
     appearance: none;
 
     &:active {
-      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
+      @include gradient-bg($form-range-thumb-active-bg);
     }
   }
 
@@ -71,7 +71,7 @@
     height: $form-range-track-height;
     color: transparent;
     cursor: $form-range-track-cursor;
-    background-color: var(--#{$prefix}form-range-track-bg, $form-range-track-bg);
+    background-color: $form-range-track-bg;
     border-color: transparent; // Firefox specific?
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
@@ -81,11 +81,11 @@
     pointer-events: none;
 
     &::-webkit-slider-thumb {
-      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
+      background-color: $form-range-thumb-disabled-bg;
     }
 
     &::-moz-range-thumb {
-      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
+      background-color: $form-range-thumb-disabled-bg;
     }
   }
 }

package/scss/forms/_form-select.scss

@@ -4,28 +4,30 @@
 // https://primer.github.io/.
 
 .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
   display: block;
   width: 100%;
-  @include ltr-rtl-value-only("padding", $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x, $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding);
+  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
   -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
-  color: var(--#{$prefix}form-select-color, $form-select-color);
-  background-color: var(--#{$prefix}form-select-bg, $form-select-bg);
-  background-image: escape-svg($form-select-indicator);
+  color: $form-select-color;
+  background-color: $form-select-bg;
+  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
-  @include ltr-rtl-value-only("background-position", $form-select-bg-position);
+  background-position: $form-select-bg-position;
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
+  border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
   appearance: none;
 
   &:focus {
-    border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
+    border-color: $form-select-focus-border-color;
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@@ -37,27 +39,27 @@
 
   &[multiple],
   &[size]:not([size="1"]) {
-    @include ltr-rtl("padding-right", $form-select-padding-x);
+    padding-right: $form-select-padding-x;
     background-image: none;
   }
 
   &:disabled {
-    color: var(--#{$prefix}form-select-disabled-color, $form-select-disabled-color);
-    background-color: var(--#{$prefix}form-select-disabled-bg, $form-select-disabled-bg);
-    border-color: var(--#{$prefix}form-select-disabled-border-color, $form-select-disabled-border-color);
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
   }
 
   // Remove outline from select box in FF
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--#{$prefix}form-select-color, $form-select-color);
+    text-shadow: 0 0 0 $form-select-color;
   }
 }
 
 .form-select-sm {
   padding-top: $form-select-padding-y-sm;
   padding-bottom: $form-select-padding-y-sm;
-  @include ltr-rtl("padding-left", $form-select-padding-x-sm);
+  padding-left: $form-select-padding-x-sm;
   @include font-size($form-select-font-size-sm);
   @include border-radius($form-select-border-radius-sm);
 }
@@ -65,7 +67,15 @@
 .form-select-lg {
   padding-top: $form-select-padding-y-lg;
   padding-bottom: $form-select-padding-y-lg;
-  @include ltr-rtl("padding-left", $form-select-padding-x-lg);
+  padding-left: $form-select-padding-x-lg;
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-select {
+      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+    }
+  }
+}

package/scss/forms/_form-text.scss

@@ -7,5 +7,5 @@
   @include font-size($form-text-font-size);
   font-style: $form-text-font-style;
   font-weight: $form-text-font-weight;
-  color: var(--#{$prefix}form-text-color, $form-text-color);
+  color: $form-text-color;
 }

package/scss/forms/_input-group.scss

@@ -51,11 +51,11 @@
   @include font-size($input-font-size); // Match inputs
   font-weight: $input-group-addon-font-weight;
   line-height: $input-line-height;
-  color: var(--#{$prefix}input-group-addon-color, $input-group-addon-color);
+  color: $input-group-addon-color;
   text-align: center;
   white-space: nowrap;
-  background-color: var(--#{$prefix}input-group-addon-bg, $input-group-addon-bg);
-  border: $input-border-width solid var(--#{$prefix}input-group-addon-border-color, $input-group-addon-border-color);
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
 }
 
@@ -85,7 +85,7 @@
 
 .input-group-lg > .form-select,
 .input-group-sm > .form-select {
-  @include ltr-rtl("padding-right", $form-select-padding-x + $form-select-indicator-padding);
+  padding-right: $form-select-padding-x + $form-select-indicator-padding;
 }
 
 
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    @include ltr-rtl("margin-left", -$input-border-width);
+    margin-left: calc($input-border-width * -1); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

package/scss/forms/_labels.scss

@@ -7,7 +7,7 @@
   @include font-size($form-label-font-size);
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
-  color: var(--#{$prefix}form-label-color, $form-label-color);
+  color: $form-label-color;
 }
 
 // For use with horizontal and inline forms, when you need the label (or legend)
@@ -20,7 +20,7 @@
   font-style: $form-label-font-style;
   font-weight: $form-label-font-weight;
   line-height: $input-line-height;
-  color: var(--#{$prefix}form-label-color, $form-label-color);
+  color: $form-label-color;
 }
 
 .col-form-label-lg {

package/scss/helpers/_colored-links.scss

@@ -1,11 +1,11 @@
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: $value !important; // stylelint-disable-line declaration-no-important
+    color: $value if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
+        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
       }
     }
   }

package/scss/helpers/_ratio.scss

@@ -13,7 +13,7 @@
   > * {
     position: absolute;
     top: 0;
-    @include ltr-rtl("left", 0);
+    left: 0;
     width: 100%;
     height: 100%;
   }

package/scss/helpers/_vr.scss

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

package/scss/mixins/_alert.scss

@@ -1,15 +1,18 @@
+@include deprecate("`alert-variant()`", "v5.0.0", "v6.0.0");
+
 // scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {
   --#{$prefix}alert-color: #{$color};
   --#{$prefix}alert-bg: #{$background};
   --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
 
   @if $enable-gradients {
     background-image: var(--#{$prefix}gradient);
   }
 
   .alert-link {
-    color: shade-color($color, 20%);
+    color: var(--#{$prefix}alert-link-color);
   }
 }
 // scss-docs-end alert-variant-mixin

package/scss/mixins/_banner.scss

@@ -0,0 +1,7 @@
+@mixin cuiBanner($file) {
+  /*!
+   * CoreUI #{$file} v5.0.0-alpha.0 (https://getbootstrap.com/)
+   * Copyright (c) 2022 creativeLabs Łukasz Holeczek
+   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+   */
+}