Dark mode: Form helper (#2291)

Orange-OpenSource · Oct 10, 2023 · 92a4a81 · 92a4a81
1 parent 2e73d1a
commit 92a4a81
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1079,6 +1079,8 @@ $form-label-required-color:             var(--#{$prefix}link-hover-color) !defau
 
 // scss-docs-start form-helper-variables
 $form-helper-size:                      1.25rem !default; // Boosted mod
+$form-helper-color:                     var(--#{$prefix}info) !default; // Boosted mod
+$form-helper-icon:                      escape-svg($helper-icon) !default; // Boosted mod
 $form-helper-label-margin-bottom:       $form-label-margin-bottom - divide(($form-helper-size - $font-size-base), 2) !default; // Boosted mod
 // scss-docs-end form-helper-variables
 

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -25,11 +25,19 @@
 .form-helper {
   display: inline-block;
   flex-shrink: 0;
-  width: $form-helper-size;
-  height: $form-helper-size;
-  background: no-repeat center/100% escape-svg($helper-icon);
+  padding: 0;
+  background: transparent;
   border: 0;
 
+  &::before {
+    display: block;
+    width: $form-helper-size;
+    height: $form-helper-size;
+    content: "";
+    background-color: $form-helper-color;
+    mask: no-repeat center/100% $form-helper-icon;
+  }
+
   .form-label + & {
     margin-bottom: $form-helper-label-margin-bottom;
     vertical-align: bottom;

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -1195,6 +1195,58 @@ sitemap_exclude: true
   <input type="text" class="form-control-plaintext" value="Readonly plaintext input" data-bs-theme="light" readonly>
 </div>
 
+### Helper
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input" data-bs-theme="dark"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required" data-bs-theme="dark">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input" data-bs-theme="dark"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <button type="button" class="form-helper" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Help for input" data-bs-theme="light"><span class="visually-hidden">Helper for input</span></button>
+  <div>
+    <label class="form-label is-required" data-bs-theme="light">Input label</label>
+    <button type="button" class="form-helper" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Help for input" data-bs-theme="light"><span class="visually-hidden">Helper for input</span></button>
+  </div>
+</div>
+
 ### Labels, required fields & text
 
 <h4 class="mt-3">No theme</h4>