Docs: fix carousel carousel colors of carousel examples in dark mode

Fix dark mode rendering of Cheatsheet examples (#38905 )
Streamline a certain amount and increase presentations in different directions (#38604 )
2025-08-13 00:05:25 -04:00 · 2023-07-16 20:49:00 -07:00 · 2023-07-16 20:48:33 -07:00 · 2023-07-16 20:41:56 -07:00 · 2023-07-16 20:41:29 -07:00 · 2023-07-16 20:41:03 -07:00
10 changed files with 44 additions and 39 deletions
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -705,6 +705,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;

+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@ -1,8 +1,7 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
-  $color-rgb: to-rgb($value);
  .text-bg-#{$color} {
    color: color-contrast($value) if($enable-important-utilities, !important, null);
-    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
  }
 }
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@ -1,7 +1,7 @@
 .vr {
  display: inline-block;
  align-self: stretch;
-  width: 1px;
+  width: $vr-border-width;
  min-height: 1em;
  background-color: currentcolor;
  opacity: $hr-opacity;
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@ -190,8 +190,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
-  <button type="button" class="btn btn-primary">Button</button>
-  <button type="button" class="btn btn-primary">Button</button>
 </div>
 {{< /example >}}

@ -208,9 +206,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
-  <button type="button" class="btn btn-primary">Button</button>
-  <button type="button" class="btn btn-primary">Button</button>
-  <div class="btn-group" role="group">
+  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
@ -219,7 +215,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
-  <div class="btn-group" role="group">
+  <div class="btn-group dropend" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
@ -228,7 +224,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
-  <div class="btn-group" role="group">
+  <div class="btn-group dropup" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
--- a/site/content/docs/5.3/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.3/examples/carousel-rtl/index.html
@ -36,7 +36,7 @@ extra_css:

 <main>

-  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
+  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
--- a/site/content/docs/5.3/examples/carousel/index.html
+++ b/site/content/docs/5.3/examples/carousel/index.html
@ -35,7 +35,7 @@ extra_css:

 <main>

-  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
+  <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
--- a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
@ -12,7 +12,7 @@ body {
  height: 1em;
  margin-right: .25rem;
  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
  background-size: 1em;
 }

@ -26,29 +26,29 @@ body {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: .3125rem;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-body-color);
 }

 .bd-aside a:hover,
 .bd-aside a:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
  background-color: rgba(121, 82, 179, .1);
 }

 .bd-aside .active {
  font-weight: 600;
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
 }

 .bd-aside .btn {
  padding: .25rem .5rem;
  font-weight: 600;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-body-color);
 }

 .bd-aside .btn:hover,
 .bd-aside .btn:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
  background-color: rgba(121, 82, 179, .1);
 }

@ -59,7 +59,7 @@ body {
 .bd-aside .btn::before {
  width: 1.25em;
  line-height: 0;
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;

  /* rtl:raw:
@ -149,7 +149,6 @@ body {
    /* rtl:end:ignore */
    z-index: -1;
    content: "";
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
  }

  .bd-cheatsheet article,
--- a/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
+++ b/site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
@ -12,7 +12,7 @@ body {
  height: 1em;
  margin-left: .25rem;
  content: "";
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
  background-size: 1em;
 }

@ -26,29 +26,29 @@ body {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-right: .3125rem;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-body-color);
 }

 .bd-aside a:hover,
 .bd-aside a:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
  background-color: rgba(121, 82, 179, .1);
 }

 .bd-aside .active {
  font-weight: 600;
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
 }

 .bd-aside .btn {
  padding: .25rem .5rem;
  font-weight: 600;
-  color: rgba(0, 0, 0, .65);
+  color: var(--bs-body-color);
 }

 .bd-aside .btn:hover,
 .bd-aside .btn:focus {
-  color: rgba(0, 0, 0, .85);
+  color: var(--bs-body-color);
  background-color: rgba(121, 82, 179, .1);
 }

@ -59,7 +59,7 @@ body {
 .bd-aside .btn::before {
  width: 1.25em;
  line-height: 0;
-  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform: rotate(180deg) translateX(-2px);
  transform-origin: .5em 50%;
@ -142,7 +142,6 @@ body {
    left: 0;
    z-index: -1;
    content: "";
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
  }

  .bd-cheatsheet article,
--- a/site/content/docs/5.3/helpers/vertical-rule.md
+++ b/site/content/docs/5.3/helpers/vertical-rule.md
@ -43,3 +43,11 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
  <div class="p-2">Third item</div>
 </div>
 {{< /example >}}
+
+## CSS
+
+### Sass variables
+
+Customize the vertical rule Sass variable to change its width.
+
+{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@ -21,7 +21,7 @@
          <li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
          <li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
          <li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.swag }}">Swag Store</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.swag }}" target="_blank" rel="noopener">Swag Store</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 mb-3">
@ -37,21 +37,21 @@
      <div class="col-6 col-lg-2 mb-3">
        <h5>Projects</h5>
        <ul class="list-unstyled">
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap">Bootstrap 5</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons">Icons</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs">RFS</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/">Examples repo</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener">Icons</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener">RFS</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/" target="_blank" rel="noopener">Examples repo</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 mb-3">
        <h5>Community</h5>
        <ul class="list-unstyled">
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues">Issues</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions">Discussions</a></li>
-          <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.opencollective }}">Open Collective</a></li>
-          <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues" target="_blank" rel="noopener">Issues</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener">Discussions</a></li>
+          <li class="mb-2"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a></li>
+          <li class="mb-2"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">Open Collective</a></li>
+          <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener">Stack Overflow</a></li>
        </ul>
      </div>
    </div>
Author	SHA1	Message	Date
Julien Déramond	101ff73b4c	Docs: fix carousel carousel colors of carousel examples in dark mode	2023-07-16 20:49:00 -07:00
Julien Déramond	b3da789113	Fix dark mode rendering of Cheatsheet examples (#38905 )	2023-07-16 20:48:33 -07:00
zcl	3ea4168cb6	Streamline a certain amount and increase presentations in different directions (#38604 )	2023-07-16 20:41:56 -07:00
cameronhollis	7dfa9c5890	`.text-bg-` helpers now use theme CSS variables (#38772 ) #38769 text-bg-primary now respects --bs-primary color * Revert "#38769 text-bg-primary now respects --bs-primary color" This reverts commit a4db90ff70b0957755ae4870281c318668307c65. * #38769 updated scss file to respect --bs-primary color with text-bg-primary class --------- Co-authored-by: Cameron Hollis <cameronjhollis@gmail.com>	2023-07-16 20:41:29 -07:00
Julien Déramond	674ea99c8c	Docs: add blank target and noopener rel to footer external links	2023-07-16 20:41:03 -07:00
Julien Déramond	6a9b9af59e	New Sass variable to change vertical rule width	2023-07-16 20:39:54 -07:00