diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index a39044268219..49880e124253 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,35 +2,35 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7.5 kB" + "maxSize": "8.25 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.75 kB" + "maxSize": "7.5 kB" }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2.75 kB" + "maxSize": "3.5 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "2.5 kB" + "maxSize": "3.25 kB" }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "9.75 kB" + "maxSize": "10.5 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "9.0 kB" + "maxSize": "9.75 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "30.25 kB" + "maxSize": "31.25 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "28 kB" + "maxSize": "29.25 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index f09601bab6bb..75588a5adb40 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -147,3 +147,12 @@ } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/scss/_alert.scss b/scss/_alert.scss index c8bc91b4208b..8647851b17d8 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -12,6 +12,7 @@ --#{$prefix}alert-border-color: transparent; --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; // scss-docs-end alert-css-vars position: relative; @@ -32,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -54,18 +56,13 @@ // scss-docs-start alert-modifiers -// Generate contextual modifier classes for colorizing the alert. - -@each $state, $value in $theme-colors { - $alert-background: shift-color($value, $alert-bg-scale); - $alert-border: shift-color($value, $alert-border-scale); - $alert-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { - $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); - } +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { .alert-#{$state} { - @include alert-variant($alert-background, $alert-border, $alert-color); + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text); } } // scss-docs-end alert-modifiers diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 858b83634dc5..ec810f72ad07 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -210,7 +210,7 @@ // Dark mode carousel -.carousel-dark { +%carousel-dark { .carousel-control-prev-icon, .carousel-control-next-icon { filter: $carousel-dark-control-icon-filter; @@ -224,3 +224,15 @@ color: $carousel-dark-caption-color; } } + +.carousel-dark { + @extend %carousel-dark; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .carousel { + @extend %carousel-dark; + } + } +} diff --git a/scss/_close.scss b/scss/_close.scss index 423a944db5ea..6f814d0af37a 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -44,6 +44,18 @@ } } -.btn-close-white { +%btn-close-white { filter: var(--#{$prefix}btn-close-white-filter); } + +.btn-close-white { + @extend %btn-close-white; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @extend %btn-close-white; + } + } +} diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 8899d25a0d23..587ebb487cf4 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -184,6 +184,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For ` {{< /example >}} -## White variant +## Dark variant -Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`. +{{< callout info >}} +**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. +{{< /callout >}} + +Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. {{< example class="bg-dark" >}} - - +
+ + +
{{< /example >}} ## Sass diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index cd243a792f6e..b7dae56ab9b2 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -349,8 +349,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro ## Dark dropdowns +{{< deprecated-in "5.3.0" >}} + Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items. +{{< callout-deprecated-dark-variants "dropdown-menu" >}} + {{< example >}}
@@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. {{< example >}} -