mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 04:51:39 +02:00
Code Issues Releases Wiki Activity

Clean up deprecated Sass (#41693)

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

* Fix linter error

* fix
This commit is contained in:
Mark Otto
2025-08-27 20:05:50 -07:00
committed by Mark Otto
parent 386bc545b0
commit 01c72e6c09
14 changed files with 18 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_reboot.scss
View File

@@ -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
}
}

1
scss/_root.scss
View File

@@ -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

3
scss/_utilities.scss
View File

@@ -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),

10
scss/_variables-dark.scss
View File

@@ -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;

44
scss/_variables.scss
View File

@@ -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;

10
site/src/content/docs/components/alerts.mdx
View File

@@ -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.

14
site/src/content/docs/components/carousel.mdx
View File

@@ -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

6
site/src/content/docs/components/close-button.mdx
View File

@@ -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">

10
site/src/content/docs/components/dropdowns.mdx
View File

@@ -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>

10
site/src/content/docs/components/list-group.mdx
View File

@@ -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.

9
site/src/content/docs/components/navbar.mdx
View File

@@ -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={`

10
site/src/content/docs/components/offcanvas.mdx
View File

@@ -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>

4
site/src/content/docs/components/progress.mdx
View File

@@ -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.

12
site/src/content/docs/utilities/colors.mdx
View File

@@ -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" />