Dark mode: Auto color and bg-color with data-bs-theme (#2313)

Co-authored-by: louismaxime.piton <[email protected]>
Orange-OpenSource · Nov 30, 2023 · 631c377 · 631c377
1 parent 486877a
commit 631c377
Show file tree

Hide file tree

Showing 29 changed files with 411 additions and 428 deletions.
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -34,6 +34,8 @@
   --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
   --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
   // scss-docs-end accordion-css-vars
+
+  background-color: transparent; // Boosted mod
 }
 
 .accordion-button {

diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -78,7 +78,7 @@
 
 @each $state, $value in $alert-colors {
   .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}body-color); // Boosted mod: instead of `var(--#{$prefix}#{$state}-text-emphasis)`
+    // Boosted mod: no --#{$prefix}alert-color
     --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
     // Boosted mod: no `--#{$prefix}alert-link-color`
     // Boosted mod

diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
@@ -38,6 +38,7 @@
   bottom: var(--#{$prefix}back-to-top-bottom);
   z-index: var(--#{$prefix}back-to-top-zindex);
   pointer-events: none;
+  background-color: transparent;
 }
 
 .back-to-top-link {

diff --git a/scss/_card.scss b/scss/_card.scss
@@ -33,7 +33,7 @@
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   height: var(--#{$prefix}card-height);
-  color: var(--#{$prefix}body-color);
+  // Boosted mod: no color
   word-wrap: break-word;
   background-color: var(--#{$prefix}card-bg);
   background-clip: border-box;

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -32,6 +32,7 @@
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
+  background-color: transparent; // Boosted mod
   @include border-radius(var(--#{$prefix}list-group-border-radius));
 
   // Boosted mod

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -50,6 +50,7 @@
   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
+  background-color: transparent; // Boosted mod
 }
 
 // Shell div to position the modal with bottom padding

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -19,6 +19,7 @@
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
+  background-color: transparent; // Boosted mod
 }
 
 .nav-link {
@@ -240,6 +241,7 @@
   // scss-docs-end tab-content-css-vars
 
   padding: var(--#{$prefix}tab-content-padding-y) var(--#{$prefix}tab-content-padding-x);
+  background-color: transparent;
   border: var(--#{$prefix}tab-content-border-width) solid var(--#{$prefix}tab-content-border-color);
   border-top: 0;
   // End mod

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
@@ -36,7 +36,7 @@
       display: flex;
       flex-direction: column;
       max-width: 100%;
-      color: var(--#{$prefix}offcanvas-color);
+      // Boosted mod: no color
       visibility: hidden;
       background-color: var(--#{$prefix}offcanvas-bg);
       background-clip: padding-box;
@@ -137,10 +137,12 @@
 .offcanvas-title {
   margin-bottom: 0;
   line-height: var(--#{$prefix}offcanvas-title-line-height);
+  color: var(--#{$prefix}offcanvas-color); // Boosted mod
 }
 
 .offcanvas-body {
   flex-grow: 1;
   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
   overflow-y: auto;
+  color: var(--#{$prefix}offcanvas-color); // Boosted mod
 }
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -36,6 +36,7 @@
   display: flex;
   flex-wrap: if($pagination-margin-start == (-$pagination-border-width), null, wrap); // Boosted mod
   margin: var(--#{$prefix}pagination-margin-y) 0; // Boosted mod
+  background-color: transparent; // Boosted mod
   @include list-unstyled();
 }
 

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
@@ -69,7 +69,7 @@ body {
   @include font-size(var(--#{$prefix}body-font-size));
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
-  color: var(--#{$prefix}body-color);
+  // Boosted mod: no color
   text-align: var(--#{$prefix}body-text-align);
 
   /* rtl:remove */
@@ -501,7 +501,6 @@ th {
 label {
   display: inline-block; // 1
   font-weight: $form-label-font-weight; // Boosted mod
-  color: var(--#{$prefix}body-color); // Boosted mod
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -1,6 +1,17 @@
+// Boosted mod
+:root,
+[data-bs-theme] {
+  color: var(--#{$prefix}body-color);
+  background-color: var(--#{$prefix}body-bg);
+}
+
+// Note that some of the following variables in `:root, [data-bs-theme="light"]` could be extracted into `:root` only selector since they are not modified by other color modes!
+// End mod
+
 :root,
 [data-bs-theme="light"] {
   color-scheme: light; // Boosted mod
+
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
@@ -9,6 +9,7 @@
   height: var(--#{$prefix}spinner-height);
   color: #{$spinner-color}; // Boosted mod
   vertical-align: var(--#{$prefix}spinner-vertical-align);
+  background-color: transparent; // Boosted mod
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);

diff --git a/scss/_tags.scss b/scss/_tags.scss
@@ -105,7 +105,7 @@
 a.tag,
 button.tag,
 label.tag {
-  color: var(--#{$prefix}body-color);
+  color: var(--#{$prefix}tag-color);
   text-decoration: none;
   cursor: pointer;
 

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -82,7 +82,7 @@ $body-tertiary-bg-dark:             $black !default; // Boosted mod: instead of
 $body-emphasis-color-dark:          $white !default; // Boosted mod: instead of `$gray-100`
 $border-color-dark:                 $white !default; // Boosted mod: instead of `$gray-700`
 $border-color-translucent-dark:     $gray-700 !default; // Boosted mod instead of `rgba($white, .15)`
-$headings-color-dark:               $white !default; // Boosted mod: instead of `inherit`
+$headings-color-dark:               inherit !default;
 $link-color-dark:                   $white !default; // Boosted mod: instead of `tint-color($primary, 40%)`
 $link-hover-color-dark:             $brand-orange !default; // Boosted mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
 $code-color-dark:                   tint-color($code-color, 40%) !default;

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -799,7 +799,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:              $black !default; // Boosted mod: instead of `inherit`
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -1095,7 +1095,7 @@ $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:                      var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$form-label-color:                      null !default;
 $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
@@ -1130,7 +1130,7 @@ $input-disabled-color:                  var(--#{$prefix}placeholder-color) !defa
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}body-color) !default;
+$input-color:                           null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $input-border-color:                    var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of var(--#{$prefix}border-color)
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      none !default; // Boosted mod
@@ -1146,7 +1146,7 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                none !default; // Boosted mod
 
 $input-placeholder-color:               var(--#{$prefix}placeholder-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
-$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
+$input-plaintext-color:                 null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 
 // Boosted mod: no $input-height-border
 
@@ -1304,7 +1304,7 @@ $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
 $form-select-box-shadow:          none !default; // Boosted mod
 
-$form-select-focus-border-color:  $input-color !default; // Boosted mod: for border to show in Firefox
+$form-select-focus-border-color:  $input-focus-border-color !default;
 // Boosted mod: no $form-select-focus-width
 $form-select-focus-box-shadow:    none !default; // Boosted mod
 
@@ -1368,7 +1368,7 @@ $form-feedback-icon-valid:          var(--#{$prefix}success-icon) !default;
 $form-feedback-icon-invalid:        var(--#{$prefix}error-icon) !default;
 $form-feedback-icon-size:           add($spacer * .25, $spacer * .5) !default; // Boosted mod
 $form-feedback-line-height:         $line-height-sm !default; // Boosted mod
-$form-feedback-color:               var(--#{$prefix}body-color) !default; // Boosted mod
+$form-feedback-color:               null !default; // Boosted mod
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
@@ -1436,7 +1436,7 @@ $nav-link-padding-y:                $spacer * .5 !default;
 $nav-link-padding-x:                $spacer !default;
 $nav-link-font-size:                null !default;
 $nav-link-font-weight:              $font-weight-bold !default;
-$nav-link-color:                    var(--#{$prefix}link-color) !default;
+$nav-link-color:                    inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               null !default; // Boosted mod
 $nav-link-disabled-color:           var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
@@ -1595,7 +1595,7 @@ $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .25 !default; // Boosted mod: instead of `$spacer * .5`
 $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
-$dropdown-link-color:               var(--#{$prefix}body-color) !default;
+$dropdown-link-color:               null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $dropdown-link-hover-color:         $dropdown-link-color !default;
 $dropdown-link-hover-bg:            var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
 
@@ -1607,7 +1607,7 @@ $dropdown-link-disabled-color:      var(--#{$prefix}disabled-color) !default; //
 $dropdown-item-padding-y:           $spacer * .5 !default; // Boosted mod: instead of `$spacer * .25`
 $dropdown-item-padding-x:           $spacer * .5 !default; // Boosted mod: instead of `$spacer`
 
-$dropdown-header-color:             var(--#{$prefix}body-color) !default; // Boosted mod: instead of `$gray-600`
+$dropdown-header-color:             null !default; // Boosted mod: instead of `$gray-600`
 $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
 $dropdown-header-padding-y:         $spacer !default; // Boosted mod: instead of `$dropdown-padding-y`
 // fusv-disable
@@ -1640,7 +1640,7 @@ $pagination-padding-x:              null !default; // Boosted mod: instead of `.
 
 $pagination-font-size:              $font-size-base !default;
 
-$pagination-color:                  var(--#{$prefix}link-color) !default;
+$pagination-color:                  inherit !default; // Boosted mod: instead of `var(--#{$prefix}link-color)`
 $pagination-bg:                     transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
@@ -1730,7 +1730,7 @@ $card-footer-color:                 var(--#{$prefix}placeholder-color) !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     $spacer * .5 !default; // Boosted mod
 $accordion-padding-x:                     0 !default; // Boosted mod
-$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-color:                         null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $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
@@ -1749,12 +1749,12 @@ $accordion-body-padding-x:                $spacer !default; // Deprecated in Boo
 
 $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  var(--#{$prefix}body-color) !default;
+$accordion-button-color:                  null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-hover-bg:               var(--#{$prefix}secondary-bg) !default; // Boosted mod
 $accordion-button-active-bg:              null !default; // Boosted mod: instead of `var(--#{$prefix}primary-bg-subtle)`
-$accordion-button-active-color:           var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
+$accordion-button-active-color:           $accordion-button-color !default; // Boosted mod: instead of `var(--#{$prefix}primary-text-emphasis)`
 
 // Boosted mod: no $accordion-button-focus-border-color
 // Boosted mod: no $accordion-button-focus-box-shadow
@@ -1789,7 +1789,7 @@ $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-font-weight:               $font-weight-bold !default; // Boosted mod
 $tooltip-line-height:               $line-height-sm !default; // Boosted mod
 $tooltip-max-width:                 $spacer * 10 !default;
-$tooltip-color:                     var(--#{$prefix}body-color) !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
+$tooltip-color:                     null !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $tooltip-bg:                        var(--#{$prefix}body-bg) !default; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`
 // stylelint-disable-next-line function-disallowed-list
 $tooltip-border-width:              calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod
@@ -1834,7 +1834,7 @@ $popover-header-padding-bottom:     map-get($spacers, 2) !default; // Boosted mo
 $popover-header-padding-y:          initial !default; // Boosted mod: instead of `.5rem`
 $popover-header-padding-x:          $spacer * .9 !default; // Boosted mod: instead of `$spacer`
 
-$popover-body-color:                var(--#{$prefix}body-color) !default;
+$popover-body-color:                null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $popover-body-padding-top:          0 !default; // Boosted mod
 $popover-body-padding-bottom:       $popover-padding-y !default; // Boosted mod
 $popover-body-padding-y:            initial !default; // Boosted mod: instead of `$spacer`
@@ -1897,7 +1897,7 @@ $modal-title-line-height:           $line-height-base !default;
 $modal-content-padding-y:           $spacer !default; // Boosted mod
 $modal-content-padding-x:           0 !default; // Boosted mod
 $modal-content-padding:             $modal-content-padding-y $modal-content-padding-x !default; // Boosted mod
-$modal-content-color:               var(--#{$prefix}body-color) !default; // Boosted mod: instead of `null`
+$modal-content-color:               null !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
@@ -1951,7 +1951,7 @@ $modal-scale-transform:             scale(1.02) !default;
 $alert-padding-y:                   1rem !default;
 $alert-padding-x:                   $spacer !default;
 $alert-margin-bottom:               $spacer !default;
-$alert-color:                       inherit !default; // Boosted mod
+$alert-color:                       var(--#{$prefix}body-color) !default; // Boosted mod
 $alert-border-radius:               var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:            null !default; // Boosted mod
 $alert-heading-font-weight:         $font-weight-bold !default; // Boosted mod
@@ -2005,7 +2005,7 @@ $progress-height-xs:                $spacer * .25 !default;
 
 // scss-docs-start list-group-variables
 $list-group-font-weight:              $font-weight-bold !default; // Boosted mod
-$list-group-color:                    var(--#{$prefix}body-color) !default;
+$list-group-color:                    null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $list-group-bg:                       transparent !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)`
 $list-group-border-color:             var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 $list-group-border-width:             var(--#{$prefix}border-width) !default;
@@ -2139,7 +2139,7 @@ $carousel-indicators-margin-bottom:     $spacer !default;
 // End mod
 
 $carousel-caption-width:             70% !default;
-$carousel-caption-color:             var(--#{$prefix}body-color) !default;
+$carousel-caption-color:             null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)`
 $carousel-caption-bg:                var(--#{$prefix}body-bg) !default; // Boosted mod
 $carousel-caption-padding-y:         $spacer !default;
 $carousel-caption-padding-x:         $spacer !default; // Boosted mod
@@ -2169,7 +2169,7 @@ $carousel-transition:                transform $carousel-transition-duration $tr
 // Spinners
 
 // scss-docs-start spinner-variables
-$spinner-color:           var(--#{$prefix}body-color) !default; // Boosted mod
+$spinner-color:           null !default; // Boosted mod
 $spinner-width:           $spacer * 2 !default;
 $spinner-height:          $spinner-width !default;
 $spinner-vertical-align:  -.125em !default;
@@ -2455,7 +2455,7 @@ $tag-font-size-sm:                  $font-size-sm !default;
 
 // scss-docs-start local-nav-variables
 $local-nav-padding-y:           $navbar-nav-link-padding-y !default;
-$local-nav-color:               var(--#{$prefix}body-color) !default;
+$local-nav-color:               null !default;
 $local-nav-bg:                  var(--#{$prefix}body-bg) !default;
 $local-nav-hover-color:         var(--#{$prefix}hover-color) !default;
 $local-nav-hover-bg:            var(--#{$prefix}secondary-bg) !default;

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
@@ -158,6 +158,7 @@
 
   min-height: $form-switch-width * .5;
   padding-left: $form-switch-padding-start;
+  background-color: transparent;
 
   .form-check-input {
     --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
@@ -8,6 +8,7 @@
   flex-wrap: wrap; // For form validation feedback
   align-items: stretch;
   width: 100%;
+  background-color: transparent; // Boosted mod
 
   > .form-control,
   > .form-select,

diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss
@@ -8,7 +8,9 @@
   --#{$prefix}star-rating-hover-color: #{$form-star-rating-hover-color};
   --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon};
   --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon};
+
   font-size: $form-star-size;
+  background-color: transparent;
 
   &:disabled {
     pointer-events: none;

diff --git a/scss/helpers/_chevron-link.scss b/scss/helpers/_chevron-link.scss
@@ -2,6 +2,7 @@
 .link-chevron {
   font-weight: $font-weight-bold;
   text-decoration: if($link-decoration == none, null, none);
+  background-color: transparent;
 
   &::after {
     display: inline-block;