Dark mode: Popovers (#2325)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Dec 15, 2023 · ed2ab1a · ed2ab1a
1 parent 754ff06
commit ed2ab1a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -797,7 +797,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        700 !default;
 $headings-line-height:        $h6-line-height !default;
-$headings-color:              inherit !default;
+$headings-color:              $black !default; // Boosted mod: instead of `inherit`
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -1817,7 +1817,7 @@ $popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 $popover-header-font-size:          $font-size-lg !default; // Boosted mod: instead of `$font-size-base`
 $popover-header-line-height:        1.11 !default; // Boosted mod
 $popover-header-bg:                 $popover-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)`
-$popover-header-color:              $headings-color !default;
+$popover-header-color:              var(--#{$prefix}heading-color) !default; // Boosted mod: instead of `$headings-color`
 $popover-header-padding-top:        $popover-padding-y !default; // Boosted mod
 $popover-header-padding-bottom:     map-get($spacers, 2) !default; // Boosted mod
 $popover-header-padding-y:          initial !default; // Boosted mod: instead of `.5rem`

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -1821,6 +1821,43 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Popovers
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #282d55;">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="dark"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="dark">Click to toggle popover</button>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap align-items-center border border-tertiary p-3" style="background-color: #b5e8f7">
+  <div class="popover bs-popover-auto fade show position-relative" role="tooltip" data-popper-placement="right" data-bs-theme="light"><div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 49px);"></div><h3 class="popover-header">Popover title</h3><div class="popover-body">And here's some amazing content. It's very engaging. Right?</div></div>
+  <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-theme="light">Click to toggle popover</button>
+</div>
+
 ### Spinners
 
 <h4 class="mt-3">No theme</h4>