refactor: improve syntax

Author: mrholek

scss/_dropdown.scss

@@ -145,7 +145,6 @@
 .dropstart {
   .dropdown-menu[data-coreui-popper] {
     top: 0;
-
     @include ltr-rtl("right", 100%);
     @include ltr-rtl("left", auto);
     margin-top: 0;

scss/_reboot.scss

@@ -249,7 +249,6 @@ a {
     text-decoration: $link-hover-decoration;
   }
 }
-
 // And undo these styles for placeholder links/named anchors (without href).
 // It would be more straightforward to just use a[href] in previous block, but that
 // causes specificity issues in many other styles that are too complex to fix.

scss/_tooltip.scss

@@ -18,6 +18,7 @@
   z-index: var(--#{$prefix}tooltip-zindex);
   display: block;
   margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate("`$tooltip-margin`", "v4", "v4.x", true);
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();

scss/_type.scss

@@ -42,7 +42,6 @@
   }
 }
 
-
 //
 // Emphasis
 //

scss/forms/_floating-labels.scss

@@ -56,7 +56,7 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
 
       &::after {
@@ -73,7 +73,7 @@
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
     }
   }

scss/forms/_form-control.scss

@@ -10,11 +10,11 @@
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
-  color: $input-color;
+  color: var(--#{$prefix}input-color, $input-color);
   appearance: none; // Fix appearance for date inputs in Safari
-  background-color: $input-bg;
+  background-color: var(--#{$prefix}input-bg, $input-bg);
   background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
+  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -32,9 +32,9 @@
 
   // Customize the `:focus` state to imitate native WebKit styles.
   &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    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);
@@ -44,6 +44,9 @@
     }
   }
 
+  // Add some height to date inputs on iOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
   &::-webkit-date-and-time-value {
     // On Android Chrome, form-control's "width: 100%" makes the input width too small
     // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
@@ -96,8 +99,8 @@
     padding: $input-padding-y $input-padding-x;
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-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;
@@ -108,7 +111,7 @@
   }
 
   &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
+    background-color: var(--#{$prefix}form-file-button-hover-bg, $form-file-button-hover-bg);
   }
 }
 
@@ -123,7 +126,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: $input-plaintext-color;
+  color: var(--#{$prefix}input-plaintext-color, $input-plaintext-color);
   background-color: transparent;
   border: solid transparent;
   border-width: $input-border-width 0;

scss/forms/_form-select.scss

@@ -4,6 +4,8 @@
 // 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);
@@ -15,7 +17,7 @@
   color: var(--#{$prefix}form-select-color, $form-select-color);
   appearance: none;
   background-color: var(--#{$prefix}form-select-bg, $form-select-bg);
-  background-image: escape-svg($form-select-indicator);
+  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-size: $form-select-bg-size;

scss/mixins/_forms.scss

@@ -91,8 +91,8 @@
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
           @include ltr-rtl("padding-right", $form-select-feedback-icon-padding-end);
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
           @include ltr-rtl-value-only("background-position", #{$form-select-bg-position, $form-select-feedback-icon-position});
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }

scss/mixins/_list-group.scss

@@ -1,3 +1,5 @@
+@include deprecate("`list-group-item-variant()`", "v4.3.0", "v6.0.0");
+
 // List Groups
 // scss-docs-start list-group-mixin
 @mixin list-group-item-variant($state, $variant) {