Clean up deprecated Sass (#41693)

* Remove all deprecated Sass variables and deprecation notices from docs components

* Fix linter error

* fix

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 524645fb02fc05261916b54c0baaa5bc4a1f8fb8..3c4340a9480f8482dfee0b9bd91d9932f90e6e31 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -316,7 +316,7 @@ kbd {
   kbd {
     padding: 0;
     @include font-size(1em);
-    font-weight: $nested-kbd-font-weight;
+    font-weight: inherit; // mdo-do: check if this is needed
   }
 }
 

diff --git a/scss/_root.scss b/scss/_root.scss
index becddf14afdcccbeb5374c6ecc0c9a3920e76866..cc2fbb6d1e3865888dcea2931a79117b58222b28 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -105,7 +105,6 @@
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
   --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
-  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-var
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 8f1039d0446e45f684b1098e651ee8aaab9f5a7b..9fed74fb3727cbe38b699dff4dd8c13d15972b63 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -611,9 +611,6 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": var(--#{$prefix}secondary-color), // deprecated
-          "black-50": rgba($black, .5), // deprecated
-          "white-50": rgba($white, .5), // deprecated
           "body-secondary": var(--#{$prefix}secondary-color),
           "body-tertiary": var(--#{$prefix}tertiary-color),
           "body-emphasis": var(--#{$prefix}emphasis-color),

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 260f6dcc1d6e6b4223efb06cd4186350865a26cc..590630356af47aeb481449afccd4850422ce392f 100644 (file)
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -91,12 +91,14 @@ $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://
 // Carousel
 //
 
-$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
-$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
-$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
+// scss-docs-start carousel-dark-variables
+$carousel-indicator-active-bg-dark:   $black !default;
+$carousel-caption-color-dark:         $black !default;
+$carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
+// scss-docs-end carousel-dark-variables
 
 //
 // Close button
 //
 
-$btn-close-filter-dark:             $btn-close-white-filter !default;
+$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index ce7b6b8dae8d54610791d275e3a34ef04c30cc28..58e0a2c777ed6ec60f7faeee6d634584f6264272 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -550,9 +550,6 @@ $border-radius-xl:            1rem !default;
 $border-radius-xxl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
-// fusv-disable
-$border-radius-2xl:           $border-radius-xxl !default; // Deprecated in v5.3.0
-// fusv-enable
 
 // scss-docs-start box-shadow-variables
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
@@ -680,10 +677,6 @@ $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
 
-// fusv-disable
-$text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
-// fusv-enable
-
 $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
@@ -694,11 +687,6 @@ $blockquote-footer-font-size: $small-font-size !default;
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
 
-// fusv-disable
-$hr-bg-color:                 null !default; // Deprecated in v5.2.0
-$hr-height:                   null !default; // Deprecated in v5.2.0
-// fusv-enable
-
 $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
@@ -1263,9 +1251,6 @@ $dropdown-item-padding-x:           $spacer !default;
 $dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding-x:         $dropdown-item-padding-x !default;
 $dropdown-header-padding-y:         $dropdown-padding-y !default;
-// fusv-disable
-$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
-// fusv-enable
 // scss-docs-end dropdown-variables
 
 // scss-docs-start dropdown-dark-variables
@@ -1381,9 +1366,6 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
 $accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
-// fusv-disable
-$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
-// fusv-enable
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;
@@ -1411,9 +1393,6 @@ $tooltip-margin:                    null !default; // TODO: remove this in v6
 
 $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
-// fusv-disable
-$tooltip-arrow-color:               null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
-// fusv-enable
 // scss-docs-end tooltip-variables
 
 // Form tooltips must come after regular tooltips
@@ -1453,12 +1432,6 @@ $popover-arrow-width:               1rem !default;
 $popover-arrow-height:              .5rem !default;
 // scss-docs-end popover-variables
 
-// fusv-disable
-// Deprecated in Bootstrap 5.2.0 for CSS variables
-$popover-arrow-color:               $popover-bg !default;
-$popover-arrow-outer-color:         var(--#{$prefix}border-color-translucent) !default;
-// fusv-enable
-
 
 // Toasts
 
@@ -1553,11 +1526,6 @@ $alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 
-// fusv-disable
-$alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
-$alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
-$alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
-// fusv-enable
 
 // Progress bars
 
@@ -1585,10 +1553,6 @@ $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
 
 $list-group-item-padding-y:         $spacer * .5 !default;
 $list-group-item-padding-x:         $spacer !default;
-// fusv-disable
-$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
-$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
-// fusv-enable
 
 $list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
 $list-group-active-color:           $component-active-color !default;
@@ -1675,12 +1639,6 @@ $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 // scss-docs-end carousel-variables
 
-// scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in v5.3.4
-$carousel-dark-caption-color:        $black !default; // Deprecated in v5.3.4
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in v5.3.4
-// scss-docs-end carousel-dark-variables
-
 
 // Spinners
 
@@ -1712,7 +1670,6 @@ $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
 $btn-close-filter:           null !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
 // scss-docs-end close-variables
 
 
@@ -1744,7 +1701,6 @@ $kbd-padding-x:                     .375rem !default;
 $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         var(--#{$prefix}body-bg) !default;
 $kbd-bg:                            var(--#{$prefix}body-color) !default;
-$nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null !default;
 

diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index e25604462b266499af4a22cb9286843056e4145b..68de62d1acc39dafd4b3be018428794b836fdbe0 100644 (file)
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -10,10 +10,6 @@ import { getData } from '@libs/data'
 
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
-<Callout>
-**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
-</Callout>
-
 <Example code={getData('theme-colors').map((themeColor) => `<div class="alert alert-${themeColor.name}" role="alert">
     A simple ${themeColor.name} alert—check it out!
   </div>`)} />
@@ -136,12 +132,6 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
 
 <ScssDocs name="alert-variables" file="scss/_variables.scss" />
 
-### Sass mixins
-
-<DeprecatedIn version="5.3.0" />
-
-<ScssDocs name="alert-variant-mixin" file="scss/mixins/_alert.scss" removeIndentation={false} />
-
 ### Sass loops
 
 Loop that generates the modifier classes with an overriding of CSS variables.

diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
index 397f7da876c9a7a8182b7ccbd2f9d0b98ad6eb96..21c0bdd23b8709fbc4fdba7c1d5bb6ce84252c80 100644 (file)
--- a/site/src/content/docs/components/carousel.mdx
+++ b/site/src/content/docs/components/carousel.mdx
@@ -272,15 +272,11 @@ Carousels support swiping left/right on touchscreen devices to move between slid
     </button>
   </div>`} />
 
-## Dark variant
+## Dark carousel
 
-<DeprecatedIn version="5.3.0" />
+Add `data-bs-theme="dark"` to the `.carousel` for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
 
-Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
-
-<CalloutDeprecatedDarkVariants component="carousel" />
-
-<Example code={`<div id="carouselExampleDark" class="carousel carousel-dark slide">
+<Example code={`<div id="carouselExampleDark" class="carousel slide" data-bs-theme="dark">
     <div class="carousel-indicators">
       <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
       <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
@@ -331,9 +327,9 @@ Variables for all carousels:
 
 <ScssDocs name="carousel-variables" file="scss/_variables.scss" />
 
-Variables for the [dark carousel](#dark-variant):
+Variables for the [dark carousel](#dark-carousel):
 
-<ScssDocs name="carousel-dark-variables" file="scss/_variables.scss" />
+<ScssDocs name="carousel-dark-variables" file="scss/_variables-dark.scss" />
 
 ## Usage
 

diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx
index c68c1ea38becab90b625a983d85d117db5395b92..ef70fccaccc84d640d02b4913cbe962478fe8130 100644 (file)
--- a/site/src/content/docs/components/close-button.mdx
+++ b/site/src/content/docs/components/close-button.mdx
@@ -18,12 +18,6 @@ Disabled close buttons change their `opacity`. We’ve also applied `pointer-eve
 
 ## Dark variant
 
-<DeprecatedIn version="5.3.0" />
-
-<Callout type="warning">
-**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" code={`<div data-bs-theme="dark">

diff --git a/site/src/content/docs/components/dropdowns.mdx b/site/src/content/docs/components/dropdowns.mdx
index 32431c2db8fe426b293049ea1880078dd138dc2b..22c7e07db277d3b5208ae292a55c1da2dd8cd990 100644 (file)
--- a/site/src/content/docs/components/dropdowns.mdx
+++ b/site/src/content/docs/components/dropdowns.mdx
@@ -335,13 +335,9 @@ Button dropdowns work with buttons of all sizes, including default and split dro
 
 ## Dark dropdowns
 
-<DeprecatedIn version="5.3.0" />
+Opt into darker dropdowns to match a dark navbar or custom style by adding `data-bs-theme="dark"` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
 
-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.
-
-<CalloutDeprecatedDarkVariants component="dropdown-menu" />
-
-<Example code={`<div class="dropdown">
+<Example code={`<div class="dropdown" data-bs-theme="dark">
     <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Dropdown button
     </button>
@@ -364,7 +360,7 @@ And putting it to use in a navbar:
       </button>
       <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
         <ul class="navbar-nav">
-          <li class="nav-item dropdown">
+          <li class="nav-item dropdown" data-bs-theme="dark">
             <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown
             </button>

diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
index 59827ddd41bb7762912ba3bcc7a71e3e61699239..09938f6e65b772d0654ebfdb18a80c75c2df8093 100644 (file)
--- a/site/src/content/docs/components/list-group.mdx
+++ b/site/src/content/docs/components/list-group.mdx
@@ -124,10 +124,6 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
 
 ## Variants
 
-<Callout>
-**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
-</Callout>
-
 Use contextual classes to style list items with a stateful background and color.
 
 <Example code={[
@@ -267,12 +263,6 @@ As part of Bootstrap’s evolving CSS variables approach, list groups now use lo
 
 <ScssDocs name="list-group-variables" file="scss/_variables.scss" />
 
-### Sass mixins
-
-<DeprecatedIn version="5.3.0" />
-
-<ScssDocs name="list-group-mixin" file="scss/mixins/_list-group.scss" />
-
 ### Sass loops
 
 Loop that generates the modifier classes with an overriding of CSS variables.

diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
index 2387e83f3c3b36a6bc6072266866aaadf1839324..7e8007859de9c4aa638f611c66879d36ba748944 100644 (file)
--- a/site/src/content/docs/components/navbar.mdx
+++ b/site/src/content/docs/components/navbar.mdx
@@ -16,7 +16,6 @@ Here’s what you need to know before getting started with the navbar:
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
-- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
 
 <Callout name="info-prefersreducedmotion" />
 
@@ -292,14 +291,6 @@ Mix and match with other components and utilities as needed.
 
 ## Color schemes
 
-<Callout type="warning">
-**New dark navbars in v5.3.0 —** We’ve deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]([[docsref:/customize/color-modes]])
-
----
-
-**New in v5.2.0  —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the “light” appearance, and can be overridden with `.navbar-dark`.
-</Callout>
-
 Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass and CSS variables. The default is our “light navbar” for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
 
 <Example showMarkup={false} code={`

diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx
index eee354305341f92de252e811fe42311c20dd757e..fecf7ed84a733449c65d163c0f47b83b570736bb 100644 (file)
--- a/site/src/content/docs/components/offcanvas.mdx
+++ b/site/src/content/docs/components/offcanvas.mdx
@@ -125,15 +125,9 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 
 ## Dark offcanvas
 
-<DeprecatedIn version="5.3.0" /> <AddedIn version="5.2.0" />
+Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `data-bs-theme="dark"` to the `.offcanvas`, and it makes all nested elements within use dark mode.
 
-Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
-
-<Callout type="warning">
-**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
-</Callout>
-
-<Example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" code={`<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
+<Example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" code={`<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel" data-bs-theme="dark">
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
       <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>

diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx
index 89fa322249dc01eded138251b57917ac00da88b8..7529bb9cc0664da8ec42fcb2153f5a0a3ce6c9a4 100644 (file)
--- a/site/src/content/docs/components/progress.mdx
+++ b/site/src/content/docs/components/progress.mdx
@@ -4,10 +4,6 @@ description: Documentation and examples for using Bootstrap custom progress bars
 toc: true
 ---
 
-<Callout>
-**New markup in v5.3.0 —** We’ve deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. [See what’s changed in our migration guide.]([[docsref:/migration#improved-markup-for-progress-bars]])
-</Callout>
-
 ## How it works
 
 Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.

diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
index 41c08f6ae01d012a21f5dd6258da100580c5076c..b5dffd3eff84ccb296b1c156c1dd53e4d060cbb0 100644 (file)
--- a/site/src/content/docs/utilities/colors.mdx
+++ b/site/src/content/docs/utilities/colors.mdx
@@ -26,19 +26,9 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 <p class="text-body-tertiary">.text-body-tertiary</p>
 
 <p class="text-black bg-white">.text-black</p>
-<p class="text-white bg-dark">.text-white</p>
-<p class="text-black-50 bg-white">.text-black-50</p>
-<p class="text-white-50 bg-dark">.text-white-50</p>`
+<p class="text-white bg-dark">.text-white</p>`
 ]} />
 
-<Callout type="warning">
-**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They’ll be removed in v6.0.0.
-</Callout>
-
-<Callout type="warning">
-**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
-</Callout>
-
 ## Opacity
 
 <AddedIn version="5.1.0" />