From 631c37715c7d36c31eacba1602032623e420c2da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 29 Nov 2023 11:09:43 +0100 Subject: [PATCH] Dark mode: Auto color and bg-color with data-bs-theme (#2313) Co-authored-by: louismaxime.piton --- scss/_accordion.scss | 2 + scss/_alert.scss | 2 +- scss/_back-to-top.scss | 1 + scss/_card.scss | 2 +- scss/_list-group.scss | 1 + scss/_modal.scss | 1 + scss/_nav.scss | 2 + scss/_offcanvas.scss | 4 +- scss/_pagination.scss | 1 + scss/_reboot.scss | 3 +- scss/_root.scss | 11 + scss/_spinners.scss | 1 + scss/_tags.scss | 2 +- scss/_variables-dark.scss | 2 +- scss/_variables.scss | 42 +- scss/forms/_form-check.scss | 1 + scss/forms/_input-group.scss | 1 + scss/forms/_star-rating.scss | 2 + scss/helpers/_chevron-link.scss | 1 + scss/helpers/_color-bg.scss | 28 +- scss/mixins/_forms.scss | 1 + site/assets/scss/_content.scss | 1 + site/content/docs/5.3/about/brand.md | 6 +- site/content/docs/5.3/components/spinners.md | 4 +- .../content/docs/5.3/customize/color-modes.md | 2 +- site/content/docs/5.3/dark-mode.md | 705 +++++++++--------- .../docs/5.3/examples/download-app/index.html | 6 +- .../content/docs/5.3/examples/form/index.html | 2 +- site/content/docs/5.3/guidelines/_index.md | 2 +- 29 files changed, 411 insertions(+), 428 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 5787e5ea2d..f0fd49f4c7 100644 --- 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 index 16cdb7b690..d9ec8b0e65 100644 --- 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 index 051b68401f..180b3d620a 100644 --- 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 index 70edd38041..7ae09540d1 100644 --- 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 index 1ef7858d9e..ce5881fd71 100644 --- 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 index 44a369382e..f4fa813d25 100644 --- 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 index 94b203eda1..35076362a4 100644 --- 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 index 859bd0378a..71462bca82 100644 --- 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 index f09e31f8a2..17c29dbd88 100644 --- 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 index 9c7fdebad7..9910405ed1 100644 --- 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 index b53df42ff1..c1dbf777df 100644 --- 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 index d4b4641b5c..896cb594ca 100644 --- 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 index d9e8d2d90a..9b9be4c52e 100644 --- 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 index ca9632fa63..dbdb9803a1 100644 --- 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 index 6502910325..c07fff9c3c 100644 --- 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 index ee5efa087f..3d6ef7ec61 100644 --- 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 index a68dcf270e..f8e8cd54ad 100644 --- 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 index 7fe06fe3a2..2c9f334ce5 100644 --- 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 index 71794d46cb..37970042da 100644 --- 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; diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss index 6ddf2f78af..8650e5251e 100644 --- a/scss/helpers/_color-bg.scss +++ b/scss/helpers/_color-bg.scss @@ -1,25 +1,15 @@ // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 @each $color, $value in $theme-colors { .text-bg-#{$color} { - color: color-contrast($value) if($enable-important-utilities, !important, null); - background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); - } -} - -// Boosted mod -@if $enable-dark-mode { - @include color-mode(dark) { - @each $color, $value in $theme-colors-dark { - .text-bg-#{$color} { - $text-bg-color: var(--#{$prefix}highlight-color); - @if index(("primary", "warning", "light"), #{$color}) { - $text-bg-color: $black; - } @else if (#{$color} == "dark") { - $text-bg-color: $white; - } - color: $text-bg-color if($enable-important-utilities, !important, null); - } + // Boosted mod: Force colors to have a good rendering + $text-bg-color: var(--#{$prefix}highlight-color); + @if index(("primary", "warning", "light"), #{$color}) { + $text-bg-color: $black; + } @else if (#{$color} == "dark") { + $text-bg-color: $white; } + // End mod + color: $text-bg-color if($enable-important-utilities, !important, null); // Boosted mod: instead of `color-contrast($value)` + background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); } } -// End mod diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 9cc075a39c..222ec68298 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -63,6 +63,7 @@ font-weight: $font-weight-bold; // Boosted mod line-height: $form-feedback-line-height; // Boosted mod color: $form-feedback-color; // Boosted mod + background-color: transparent; // Boosted mod // Boosted mod: status should not rely on color only @if $enable-validation-icons { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index bcc1050007..62e485ea95 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -111,6 +111,7 @@ .dropdown-menu { --bs-dropdown-bg: #{mix($blue-500, $blue-600)}; --bs-dropdown-link-color: var(--bs-white); + --bs-dropdown-link-active-color: var(--bs-white); --bs-dropdown-link-active-bg: #{$blue-700}; --bs-dropdown-link-hover-color: var(--bs-white); --bs-dropdown-link-hover-bg: #{$blue-600}; diff --git a/site/content/docs/5.3/about/brand.md b/site/content/docs/5.3/about/brand.md index c1fb5ad2ec..6971cf0ba6 100644 --- a/site/content/docs/5.3/about/brand.md +++ b/site/content/docs/5.3/about/brand.md @@ -21,7 +21,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
Orange -
Master logo
+
Master logo
@@ -29,7 +29,7 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
Orange -
Small logo
+
Small logo
@@ -50,7 +50,7 @@ Orange Business Services has its own logo that contains the Orange logo and the
Orange -
Orange Business Services logo
+
Orange Business Services logo
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md index 53b57d1294..54df2c6b48 100644 --- a/site/content/docs/5.3/components/spinners.md +++ b/site/content/docs/5.3/components/spinners.md @@ -43,7 +43,7 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c -