Merge branch 'main-jd-dark-mode' into main-his-dark-mode-tags

Orange-OpenSource · Oct 9, 2023 · 3e90f10 · 3e90f10
2 parents c08b87f + d477f76
commit 3e90f10
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 20 deletions.
diff --git a/scss/_root.scss b/scss/_root.scss
@@ -142,6 +142,7 @@
   --#{$prefix}hover-color: #{$body-color};
   --#{$prefix}active-bg: #{$gray-400};
   --#{$prefix}disabled-color: #{$gray-500};
+  --#{$prefix}disabled-filter: #{$disabled-filter};
   --#{$prefix}placeholder-color: #{$gray-700};
   // ******* End additions for dark-mode
 }
@@ -217,6 +218,7 @@
     --#{$prefix}hover-color: #{$brand-orange};
     --#{$prefix}active-bg: #{$gray-700};
     --#{$prefix}disabled-color: #{$gray-700};
+    --#{$prefix}disabled-filter: #{$disabled-filter-dark};
     --#{$prefix}placeholder-color: #{$gray-600};
     // ******* End additions for dark-mode
     // scss-docs-end root-dark-mode-vars

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -89,6 +89,8 @@ $code-color-dark:                   tint-color($code-color, 40%) !default;
 $mark-color-dark:                   $black !default; // Boosted mod: instead of `$body-color-dark`
 $mark-bg-dark:                      $white !default; // Boosted mod: instead of `$yellow-800`
 
+$disabled-filter-dark:  brightness(0) invert(1) brightness(.4) !default; // Boosted mod
+
 $focus-visible-inner-color-dark:    $black !default; // Boosted mod
 $focus-visible-outer-color-dark:    $white !default; // Boosted mod
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -418,6 +418,8 @@ $svg-as-custom-props: (
 // see https://codepen.io/sosuke/pen/Pjoqqp
 $invert-filter:         invert(1) !default;
 $orange-filter:         invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default;
+
+$disabled-filter:       brightness(0) invert(1) brightness(.8) !default;
 // End mod
 
 // Options
@@ -1061,17 +1063,18 @@ $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 $font-weight-bold !default; // Boosted mod: instead of `null`
 $form-text-line-height:                 $line-height-sm !default; // Boosted mod
-$form-text-color:                       var(--#{$prefix}secondary-color) !default;
+$form-text-color:                       var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
 // scss-docs-end form-text-variables
 
 // scss-docs-start form-label-variables
 $form-label-margin-bottom:              .5rem !default; // Boosted mod
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                $font-weight-bold !default;
-$form-label-color:                      null !default;
-$form-label-disabled-color:             $gray-500 !default; // Boosted mod
+$form-label-color:                      var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // Boosted mod
 $form-label-required-margin-left:       .1875rem !default; // Boosted mod
+$form-label-required-color:             var(--#{$prefix}link-hover-color) !default; // Boosted mod
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-helper-variables
@@ -1132,8 +1135,11 @@ $input-line-height-lg:                  $h5-line-height !default; // Boosted mod
 $input-transition:                      border-color $transition-duration $transition-timing, $transition-focus !default;
 
 $form-color-width:                      2.5rem !default; // Boosted mod: instead of `3rem`
-$form-color-disabled-border-color:      $gray-500 !default; // Boosted mod
-$form-color-disabled-background-swatch: brightness(0) invert(1) brightness(.8) !default; // Boosted mod
+$form-color-border-color:               var(--#{$prefix}emphasis-color) !default; // Boosted mod
+$form-color-hover-bg-color:             var(--#{$prefix}emphasis-color) !default; // Boosted mod
+$form-color-disabled-bg-color:          $input-bg !default; // Boosted mod
+$form-color-disabled-border-color:      var(--#{$prefix}disabled-color) !default; // Boosted mod
+$form-color-disabled-background-swatch: var(--#{$prefix}disabled-filter) !default; // Boosted mod
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
@@ -1671,7 +1677,7 @@ $card-footer-color:                 $gray-700 !default; // Boosted mod
 $accordion-padding-y:                     $spacer * .5 !default; // Boosted mod
 $accordion-padding-x:                     0 !default; // Boosted mod
 $accordion-color:                         var(--#{$prefix}body-color) !default;
-$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-bg:                            transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 // stylelint-disable-next-line function-disallowed-list
 $accordion-border-width:                  calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
 $accordion-border-color:                  var(--#{$prefix}border-color-translucent) !default; // Boosted mod

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
@@ -205,15 +205,15 @@ textarea {
   width: $form-color-width;
   height: $input-height;
   padding: $input-padding-y;
-  border-color: var(--#{$prefix}body-color); // Boosted mod
+  border-color: $form-color-border-color; // Boosted mod
 
   // Boosted mod
   &:hover {
-    background-color: var(--#{$prefix}body-color);
+    background-color: $form-color-hover-bg-color;
   }
 
   &:disabled {
-    background-color: var(--#{$prefix}body-bg);
+    background-color: $form-color-disabled-bg-color;
     border-color: $form-color-disabled-border-color;
 
     &::-moz-color-swatch {
@@ -236,6 +236,7 @@ textarea {
   }
 
   &::-webkit-color-swatch {
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -18,7 +18,7 @@
 
 .is-required::after {
   margin-left: $form-label-required-margin-left;
-  color: $accessible-orange;
+  color: $form-label-required-color;
   content: "*";
 }
 

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -863,6 +863,43 @@ Additional variables for dark-mode (temporary)
 
 ## Forms
 
+### Color
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" disabled>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="dark">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="dark" disabled>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light">
+  <input type="color" class="form-control form-control-color" value="#a885d8" title="Choose your color" data-bs-theme="light" disabled>
+</div>
+
 ### Controls
 
 <h4 class="mt-3">No theme</h4>
@@ -874,8 +911,6 @@ Additional variables for dark-mode (temporary)
   <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
   <input type="text" class="form-control" value="Readonly input value" readonly>
   <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
-  <input type="text" class="form-control" placeholder="Readonly disabled input placeholder" readonly disabled>
-  <textarea class="form-control" rows="2" readonly disabled>Readonly disabled textarea value</textarea>
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
 </div>
 
@@ -888,8 +923,6 @@ Additional variables for dark-mode (temporary)
   <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
   <input type="text" class="form-control" value="Readonly input value" readonly>
   <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
-  <input type="text" class="form-control" placeholder="Readonly disabled input placeholder" readonly disabled>
-  <textarea class="form-control" rows="2" readonly disabled>Readonly disabled textarea value</textarea>
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
 </div>
 
@@ -902,8 +935,6 @@ Additional variables for dark-mode (temporary)
   <textarea class="form-control" rows="2" disabled>Disabled textarea placeholder</textarea>
   <input type="text" class="form-control" value="Readonly input value" readonly>
   <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" readonly></textarea>
-  <input type="text" class="form-control" placeholder="Readonly disabled input placeholder" readonly disabled>
-  <textarea class="form-control" rows="2" readonly disabled>Readonly disabled textarea value</textarea>
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" readonly>
 </div>
 
@@ -916,8 +947,6 @@ Additional variables for dark-mode (temporary)
   <textarea class="form-control" rows="2" data-bs-theme="dark" disabled>Disabled textarea placeholder</textarea>
   <input type="text" class="form-control" value="Readonly input value" data-bs-theme="dark" readonly>
   <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="dark" readonly></textarea>
-  <input type="text" class="form-control" placeholder="Readonly disabled input placeholder" data-bs-theme="dark" readonly disabled>
-  <textarea class="form-control" rows="2" data-bs-theme="dark" readonly disabled>Readonly disabled textarea value</textarea>
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="dark" readonly>
 </div>
 
@@ -930,41 +959,96 @@ Additional variables for dark-mode (temporary)
   <textarea class="form-control" rows="2" data-bs-theme="light" disabled>Disabled textarea placeholder</textarea>
   <input type="text" class="form-control" value="Readonly input value" data-bs-theme="light" readonly>
   <textarea class="form-control" rows="2" placeholder="Readonly textarea placeholder" data-bs-theme="light" readonly></textarea>
-  <input type="text" class="form-control" placeholder="Readonly disabled input placeholder" data-bs-theme="light" readonly disabled>
-  <textarea class="form-control" rows="2" data-bs-theme="light" readonly disabled>Readonly disabled textarea value</textarea>
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="light" readonly>
 </div>
 
+### Labels, required fields & text
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <label class="form-label">Form label</label>
+  <label class="form-label is-required">Form label</label>
+  <label class="form-label is-disabled">Form label</label>
+  <label class="form-label is-required is-disabled">Form label</label>
+  <div class="form-text">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #282d55;">
+  <label class="form-label" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-required" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-disabled" data-bs-theme="dark">Form label</label>
+  <label class="form-label is-required is-disabled" data-bs-theme="dark">Form label</label>
+  <div class="form-text" data-bs-theme="dark">Form text helper</div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex flex-column border border-tertiary p-3" style="background-color: #b5e8f7">
+  <label class="form-label" data-bs-theme="light">Form label</label>
+  <label class="form-label is-required" data-bs-theme="light">Form label</label>
+  <label class="form-label is-disabled" data-bs-theme="light">Form label</label>
+  <label class="form-label is-required is-disabled" data-bs-theme="light">Form label</label>
+  <div class="form-text" data-bs-theme="light">Form text helper</div>
+</div>
+
 ### Range
 
 <h4 class="mt-3">No theme</h4>
 
 <div class="border border-tertiary p-3">
   <input type="range" class="form-range">
+  <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
 
 <div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
   <input type="range" class="form-range">
+  <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
 
 <div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
   <input type="range" class="form-range">
+  <input type="range" class="form-range" disabled>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="border border-tertiary p-3" style="background-color: #282d55;">
   <input type="range" class="form-range" data-bs-theme="dark">
+  <input type="range" class="form-range" data-bs-theme="dark" disabled>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="border border-tertiary p-3" style="background-color: #b5e8f7">
   <input type="range" class="form-range" data-bs-theme="light">
+  <input type="range" class="form-range" data-bs-theme="light" disabled>
 </div>
 
 ### Star rating