Dark mode: From labels & texts (#2289)

Orange-OpenSource · Oct 9, 2023 · d477f76 · d477f76
1 parent 322164c
commit d477f76
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1063,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

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
@@ -745,6 +745,58 @@ Additional variables for dark-mode (temporary)
   <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>