@coreui/coreui 4.1.5 → 4.2.1

package/scss/coreui-grid.rtl.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
 */
 

package/scss/coreui-grid.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
 */
 
@@ -10,6 +10,7 @@ $include-column-box-sizing: true !default;
 
 @import "functions";
 @import "variables";
+@import "maps";
 
 @import "mixins/ltr-rtl";
 @import "mixins/lists";

package/scss/coreui-reboot.rtl.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
 */
 

package/scss/coreui-reboot.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
  */
 

package/scss/coreui-utilities.rtl.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
 */
 

package/scss/coreui-utilities.scss

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

package/scss/coreui.rtl.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
 */
 

package/scss/coreui.scss

@@ -1,8 +1,8 @@
 /*!
  * CoreUI - HTML, CSS, and JavaScript UI Components Library
- * @version v4.1.5
+ * @version v4.2.1
  * @link https://coreui.io/
- * Copyright (c) 2021 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2022 creativeLabs Łukasz Holeczek
  * License MIT  (https://coreui.io/license/)
  */
 
@@ -10,6 +10,7 @@
 // Configuration
 @import "functions";
 @import "variables";
+@import "maps";
 @import "mixins";
 @import "utilities";
 

package/scss/forms/_floating-labels.scss

@@ -2,6 +2,7 @@
   position: relative;
 
   > .form-control,
+  > .form-control-plaintext,
   > .form-select {
     height: $form-floating-height;
     line-height: $form-floating-line-height;
@@ -11,16 +12,20 @@
     position: absolute;
     top: 0;
     @include ltr-rtl("left", 0);
+    width: 100%;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     pointer-events: none;
     border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
     transform-origin: 0 0;
     @include transition($form-floating-transition);
   }
 
-  // stylelint-disable no-duplicate-selectors
-  > .form-control {
+  > .form-control,
+  > .form-control-plaintext {
     padding: $form-floating-padding-y $form-floating-padding-x;
 
     &::placeholder {
@@ -46,6 +51,7 @@
 
   > .form-control:focus,
   > .form-control:not(:placeholder-shown),
+  > .form-control-plaintext,
   > .form-select {
     ~ label {
       opacity: $form-floating-label-opacity;
@@ -59,5 +65,10 @@
       transform: $form-floating-label-transform;
     }
   }
-  // stylelint-enable no-duplicate-selectors
+
+  > .form-control-plaintext {
+    ~ label {
+      border-width: $input-border-width 0; // Required to properly position label text - as explained above
+    }
+  }
 }

package/scss/forms/_form-check.scss

@@ -16,18 +16,30 @@
   }
 }
 
+.form-check-reverse {
+  padding-right: $form-check-padding-start;
+  padding-left: 0;
+  text-align: right;
+
+  .form-check-input {
+    float: right;
+    margin-right: $form-check-padding-start * -1;
+    margin-left: 0;
+  }
+}
+
 .form-check-input {
   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(--#{$variable-prefix}form-check-input-bg, $form-check-input-bg);
+  background-color: var(--#{$prefix}form-check-input-bg, $form-check-input-bg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border: $form-check-input-border;
   appearance: none;
-  color-adjust: exact; // Keep themed appearance for print
+  print-color-adjust: exact; // Keep themed appearance for print
   @include transition($form-check-transition);
 
   &[type="checkbox"] {
@@ -50,22 +62,22 @@
   }
 
   &:checked {
-    background-color: var(--#{$variable-prefix}form-check-input-checked-bg-color, $form-check-input-checked-bg-color);
-    border-color: var(--#{$variable-prefix}form-check-input-checked-border-color, $form-check-input-checked-border-color);
+    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);
 
     &[type="checkbox"] {
       @if $enable-gradients {
-        background-image: var(--#{$variable-prefix}form-check-input-checked-bg-image, escape-svg($form-check-input-checked-bg-image)), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$variable-prefix}form-check-input-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
+        background-image: var(--#{$prefix}form-check-input-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
       }
     }
 
     &[type="radio"] {
       @if $enable-gradients {
-        background-image: var(--#{$variable-prefix}form-check-radio-checked-bg-image, escape-svg($form-check-radio-checked-bg-image)), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$variable-prefix}form-check-radio-checked-bg-image, escape-svg($form-check-radio-checked-bg-image));
+        background-image: var(--#{$prefix}form-check-radio-checked-bg-image, escape-svg($form-check-radio-checked-bg-image));
       }
     }
   }
@@ -75,9 +87,9 @@
     border-color: $form-check-input-indeterminate-border-color;
 
     @if $enable-gradients {
-      background-image: var(--#{$variable-prefix}form-check-input-indeterminate-bg-image, escape-svg($form-check-input-indeterminate-bg-image)), var(--#{$variable-prefix}gradient);
+      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
     } @else {
-      background-image: var(--#{$variable-prefix}form-check-input-indeterminate-bg-image, escape-svg($form-check-input-indeterminate-bg-image));
+      background-image: var(--#{$prefix}form-check-input-indeterminate-bg-image, escape-svg($form-check-input-indeterminate-bg-image));
     }
   }
 
@@ -92,13 +104,14 @@
   &[disabled],
   &:disabled {
     ~ .form-check-label {
+      cursor: default;
       opacity: $form-check-label-disabled-opacity;
     }
   }
 }
 
 .form-check-label {
-  color: var(--#{$variable-prefix}form-check-label-color, $form-check-label-color);
+  color: var(--#{$prefix}form-check-label-color, $form-check-label-color);
   cursor: $form-check-label-cursor;
 }
 
@@ -112,25 +125,35 @@
   .form-check-input {
     width: $form-switch-width;
     @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
-    background-image: var(--#{$variable-prefix}form-switch-bg-image, escape-svg($form-switch-bg-image));
+    background-image: var(--#{$prefix}form-switch-bg-image, escape-svg($form-switch-bg-image));
     background-position: left center;
     @include border-radius($form-switch-border-radius);
     @include transition($form-switch-transition);
 
     &:focus {
-      background-image: var(--#{$variable-prefix}form-switch-focus-bg-image, escape-svg($form-switch-focus-bg-image));
+      background-image: var(--#{$prefix}form-switch-focus-bg-image, escape-svg($form-switch-focus-bg-image));
     }
 
     &:checked {
       background-position: $form-switch-checked-bg-position;
 
       @if $enable-gradients {
-        background-image: var(--#{$variable-prefix}form-switch-checked-bg-image, escape-svg($form-switch-checked-bg-image)), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
       } @else {
-        background-image: var(--#{$variable-prefix}form-switch-checked-bg-image, escape-svg($form-switch-checked-bg-image));
+        background-image: var(--#{$prefix}form-switch-checked-bg-image, escape-svg($form-switch-checked-bg-image));
       }
     }
   }
+
+  &.form-check-reverse {
+    padding-right: $form-switch-padding-start;
+    padding-left: 0;
+
+    .form-check-input {
+      margin-right: $form-switch-padding-start * -1;
+      margin-left: 0;
+    }
+  }
 }
 
 @each $size, $map in $form-switch-widths {
@@ -180,9 +203,9 @@
 
 @each $state, $color in $theme-colors {
   .form-check-#{$state} {
-    --#{$variable-prefix}form-check-input-checked-bg-color: #{$color};
-    --#{$variable-prefix}form-check-input-checked-border-color: #{$color};
-    --#{$variable-prefix}form-check-input-indeterminate-bg-color: #{$color};
-    --#{$variable-prefix}form-check-input-indeterminate-border-color: #{$color};
+    --#{$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};
   }
 }

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(--#{$variable-prefix}input-color, $input-color);
-  background-color: var(--#{$variable-prefix}input-bg, $input-bg);
+  color: var(--#{$prefix}input-color, $input-color);
+  background-color: var(--#{$prefix}input-bg, $input-bg);
   background-clip: padding-box;
-  border: $input-border-width solid var(--#{$variable-prefix}input-border-color, $input-border-color);
+  border: $input-border-width solid var(--#{$prefix}input-border-color, $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(--#{$variable-prefix}input-focus-color, $input-focus-color);
-    background-color: var(--#{$variable-prefix}input-focus-bg, $input-focus-bg);
-    border-color: var(--#{$variable-prefix}input-focus-border-color, $input-focus-border-color);
+    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);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($input-box-shadow, $input-focus-box-shadow);
@@ -54,20 +54,20 @@
 
   // Placeholder
   &::placeholder {
-    color: var(--#{$variable-prefix}input-placeholder-color, $input-placeholder-color);
+    color: var(--#{$prefix}input-placeholder-color, $input-placeholder-color);
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
 
-  // Disabled and read-only inputs
+  // Disabled inputs
   //
   // HTML5 says that controls under a fieldset > legend:first-child won't be
   // disabled if the fieldset is disabled. Due to implementation difficulty, we
   // don't honor that edge case; we style them as disabled anyway.
-  &:disabled,
-  &[readonly] {
-    background-color: var(--#{$variable-prefix}input-disabled-bg, $input-disabled-bg);
-    border-color: var(--#{$variable-prefix}input-disabled-border-color, $input-disabled-border-color);
+  &:disabled {
+    color: $input-disabled-color;
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
@@ -77,8 +77,8 @@
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
-    color: var(--#{$variable-prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg(var(--#{$variable-prefix}form-file-button-bg, $form-file-button-bg));
+    color: var(--#{$prefix}form-file-button-color, $form-file-button-color);
+    @include gradient-bg(var(--#{$prefix}form-file-button-bg, $form-file-button-bg));
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
@@ -89,26 +89,7 @@
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: var(--#{$variable-prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
-  }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: var(--#{$variable-prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg(var(--#{$variable-prefix}form-file-button-bg, $form-file-button-bg));
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-    background-color: var(--#{$variable-prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
+    background-color: var(--#{$prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
   }
 }
 
@@ -123,11 +104,15 @@
   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(--#{$variable-prefix}input-plaintext-color, $input-plaintext-color);
+  color: var(--#{$prefix}input-plaintext-color, $input-plaintext-color);
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;
 
+  &:focus {
+    outline: 0;
+  }
+
   &.form-control-sm,
   &.form-control-lg {
     padding-right: 0;
@@ -153,12 +138,6 @@
     margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
     margin-inline-end: $input-padding-x-sm;
   }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
-    margin-inline-end: $input-padding-x-sm;
-  }
 }
 
 .form-control-lg {
@@ -172,12 +151,6 @@
     margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
     margin-inline-end: $input-padding-x-lg;
   }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
-    margin-inline-end: $input-padding-x-lg;
-  }
 }
 
 // Make sure textareas don't shrink too much when resized
@@ -200,7 +173,7 @@ textarea {
 
 .form-control-color {
   width: $form-color-width;
-  height: auto; // Override fixed browser height
+  height: $input-height;
   padding: $input-padding-y;
 
   &:not(:disabled):not([readonly]) {
@@ -208,12 +181,14 @@ textarea {
   }
 
   &::-moz-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 
   &::-webkit-color-swatch {
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
     @include border-radius($input-border-radius);
   }
+
+  &.form-control-sm { height: $input-height-sm; }
+  &.form-control-lg { height: $input-height-lg; }
 }

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(--#{$variable-prefix}form-range-thumb-bg, $form-range-thumb-bg));
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-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(--#{$variable-prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
+      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-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(--#{$variable-prefix}form-range-track-bg, $form-range-track-bg);
+    background-color: var(--#{$prefix}form-range-track-bg, $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(--#{$variable-prefix}form-range-thumb-bg, $form-range-thumb-bg));
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-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(--#{$variable-prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
+      @include gradient-bg(var(--#{$prefix}form-range-thumb-active-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(--#{$variable-prefix}form-range-track-bg, $form-range-track-bg);
+    background-color: var(--#{$prefix}form-range-track-bg, $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(--#{$variable-prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
+      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
     }
 
     &::-moz-range-thumb {
-      background-color: var(--#{$variable-prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
+      background-color: var(--#{$prefix}form-range-thumb-disabled-bg, $form-range-thumb-disabled-bg);
     }
   }
 }

package/scss/forms/_form-select.scss

@@ -12,20 +12,20 @@
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
-  color: var(--#{$variable-prefix}form-select-color, $form-select-color);
-  background-color: var(--#{$variable-prefix}form-select-bg, $form-select-bg);
+  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);
   background-repeat: no-repeat;
   @include ltr-rtl-value-only("background-position", $form-select-bg-position);
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid var(--#{$variable-prefix}form-select-border-color, $form-select-border-color);
+  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $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(--#{$variable-prefix}form-select-focus-border-color, $form-select-focus-border-color);
+    border-color: var(--#{$prefix}form-select-focus-border-color, $form-select-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@@ -42,15 +42,15 @@
   }
 
   &:disabled {
-    color: var(--#{$variable-prefix}form-select-disabled-color, $form-select-disabled-color);
-    background-color: var(--#{$variable-prefix}form-select-disabled-bg, $form-select-disabled-bg);
-    border-color: var(--#{$variable-prefix}form-select-disabled-border-color, $form-select-disabled-border-color);
+    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);
   }
 
   // Remove outline from select box in FF
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--#{$variable-prefix}form-select-color, $form-select-color);
+    text-shadow: 0 0 0 var(--#{$prefix}form-select-color, $form-select-color);
   }
 }
 

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(--#{$variable-prefix}form-text-color, $form-text-color);
+  color: var(--#{$prefix}form-text-color, $form-text-color);
 }

package/scss/forms/_input-group.scss

@@ -49,11 +49,11 @@
   @include font-size($input-font-size); // Match inputs
   font-weight: $input-group-addon-font-weight;
   line-height: $input-line-height;
-  color: var(--#{$variable-prefix}input-group-addon-color, $input-group-addon-color);
+  color: var(--#{$prefix}input-group-addon-color, $input-group-addon-color);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--#{$variable-prefix}input-group-addon-bg, $input-group-addon-bg);
-  border: $input-border-width solid var(--#{$variable-prefix}input-group-addon-border-color, $input-group-addon-border-color);
+  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);
   @include border-radius($input-border-radius);
 }
 

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(--#{$variable-prefix}form-label-color, $form-label-color);
+  color: var(--#{$prefix}form-label-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(--#{$variable-prefix}form-label-color, $form-label-color);
+  color: var(--#{$prefix}form-label-color, $form-label-color);
 }
 
 .col-form-label-lg {

package/scss/helpers/_color-bg.scss

@@ -0,0 +1,10 @@
+// stylelint-disable function-name-case
+
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in $theme-colors {
+  $color-rgb: to-rgb($value);
+  .text-bg-#{$color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+  }
+}

package/scss/helpers/_colored-links.scss

@@ -1,11 +1,11 @@
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: $value;
+    color: $value !important; // stylelint-disable-line declaration-no-important
 
     @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));
+        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
       }
     }
   }