native dark theme initial checkin

5 files changed, 58 insertions, 13 deletions

diff --git a/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss b/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss
index 6e5c9a75f..aaed53845 100644
--- a/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss
+++ b/vendor/twbs/bootstrap/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 {
@@ -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;
+  }
 }
diff --git a/vendor/twbs/bootstrap/scss/forms/_form-check.scss b/vendor/twbs/bootstrap/scss/forms/_form-check.scss
index 42a2a9607..83aacba2e 100644
--- a/vendor/twbs/bootstrap/scss/forms/_form-check.scss
+++ b/vendor/twbs/bootstrap/scss/forms/_form-check.scss
@@ -27,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: $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;
@@ -65,17 +68,17 @@
 
     &[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: 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: escape-svg($form-check-radio-checked-bg-image);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
       }
     }
   }
@@ -85,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: escape-svg($form-check-input-indeterminate-bg-image);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
     }
   }
 
@@ -121,24 +124,26 @@
   padding-left: $form-switch-padding-start;
 
   .form-check-input {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
     width: $form-switch-width;
     margin-left: $form-switch-padding-start * -1;
-    background-image: escape-svg($form-switch-bg-image);
+    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: 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: escape-svg($form-switch-checked-bg-image);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
       }
     }
   }
@@ -173,3 +178,11 @@
     }
   }
 }
+
+@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)};
+    }
+  }
+}
diff --git a/vendor/twbs/bootstrap/scss/forms/_form-control.scss b/vendor/twbs/bootstrap/scss/forms/_form-control.scss
index e707c57ea..c81e3b4ea 100644
--- a/vendor/twbs/bootstrap/scss/forms/_form-control.scss
+++ b/vendor/twbs/bootstrap/scss/forms/_form-control.scss
@@ -52,6 +52,13 @@
     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: $input-placeholder-color;
diff --git a/vendor/twbs/bootstrap/scss/forms/_form-select.scss b/vendor/twbs/bootstrap/scss/forms/_form-select.scss
index 78c34b8fd..45b0b2686 100644
--- a/vendor/twbs/bootstrap/scss/forms/_form-select.scss
+++ b/vendor/twbs/bootstrap/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%;
   padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
@@ -14,7 +16,7 @@
   line-height: $form-select-line-height;
   color: $form-select-color;
   background-color: $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;
   background-position: $form-select-bg-position;
   background-size: $form-select-bg-size;
@@ -69,3 +71,11 @@
   @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)};
+    }
+  }
+}
diff --git a/vendor/twbs/bootstrap/scss/forms/_input-group.scss b/vendor/twbs/bootstrap/scss/forms/_input-group.scss
index 247f74a7a..d6370ed7f 100644
--- a/vendor/twbs/bootstrap/scss/forms/_input-group.scss
+++ b/vendor/twbs/bootstrap/scss/forms/_input-group.scss
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: -$input-border-width;
+    margin-left: calc($input-border-width * -1); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }