diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/migration.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/migration.md | 102 |
1 files changed, 96 insertions, 6 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md index 0b71ec3bc..11ca89a4a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md @@ -9,6 +9,92 @@ toc: true ## v5.3.0 +If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section. + +### Utilities + +- Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}). + +## v5.3.0-alpha2 + +If you're migrating from our previous alpha release of v5.3.0, please review the changes listed below. + +### CSS variables + +- Removed several duplicate and unused root CSS variables. + +### Color modes + +- Dark mode colors are now derived from our theme colors (e.g., `$primary`) in Sass, rather than color specific tints or shades (e.g., `$blue-300`). This allows for a more automated dark mode when customizing the default theme colors. + +- Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border. + +- [Snippet examples]({{< docsref "/examples#snippets" >}}) are now ready for dark mode with updated markup and reduced custom styles. + +- Added `color-scheme: dark` to dark mode CSS to change OS level controls like scrollbars + +- Form validation `border-color` and text `color` states now respond to dark mode, thanks to new Sass and CSS variables. + +- Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn't update properly. + +- Our `box-shadow`s will once again always stay dark instead of inverting to white when in dark mode. + +- Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes. + +- Improved docs code syntax colors and more across light and dark modes. + +### Typography + +- We no longer set a color for `$headings-color-dark` or `--bs-heading-color` for dark mode. To avoid several problems of headings within components appearing the wrong color, we've set the Sass variable to `null` and added a `null` check like we use on the default light mode. + +### Components + +- Cards now have a `color` set on them to improve rendering across color modes. + +- Added new `.nav-underline` variant for our navigation with a simpler bottom border under the active nav link. [See the docs for an example.]({{< docsref "/components/navs-tabs#underline" >}}) + +- Navs now have new `:focus-visible` styles that better match our custom button focus styles. + +### Helpers + +- Added new `.icon-link` helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too. + +- Added new focus ring helper for removing the default `outline` and setting a custom `box-shadow` focus ring. + +### Utilities + +- Renamed Sass and CSS variables `${color}-text` to `${color}-text-emphasis` to match their associated utilities. + +- Added new `.link-body-emphasis` helper alongside our [colored links]({{< docsref "/helpers/colored-links" >}}). This creates a colored link using our color mode responsive emphasis color. + +- Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. [Explore the new links utilities.]({{< docsref "/utilities/link" >}}) + +- CSS variable based `border-width` utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables. + +- Added new `.border-black` utility to match our `.text-black` and `.bg-black` utilities. + +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Deprecated the `.text-muted` utility and `$text-muted` Sass variable. It's been replaced by `.text-body-secondary` and `$body-secondary-color`. + +### Docs + +- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. Each example has an individual color mode picker. + +- Improved included JavaScript for live Toast demo. + +- Added `twbs/examples` repo contents to the top of the Examples page. + +### Tooling + +- Added SCSS testing via True to help test our utilities API and other customizations. + +- Replaced instances of our bootstrap-npm-starter project with the newer and more complete [twbs/examples repo](https://github.com/twbs/examples). + +<hr class="mb-4"> + +For a complete list of changes, [see the v5.3.0-alpha2 project on GitHub](https://github.com/orgs/twbs/projects/13). + +## v5.3.0-alpha1 + <hr class="mb-4"> ### Color modes! @@ -17,9 +103,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference. - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated. + <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated. -- **New extended color system.** We've added new theme colors (but not in `$theme-colors)`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities. +- **New extended color system.** We've added new theme colors (but not in `$theme-colors`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities. - We've also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities. @@ -44,7 +130,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Restores CSS variables for breakpoints, though we don't use them in our media queries as they're not supported. However, these can be useful in JS-specific contexts. -- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark. +- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark. - Adds additional variables for alerts, `.btn-close`, and `.offcanvas`. @@ -70,6 +156,10 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant. +#### Dropdowns + +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]({{< docsref "/components/dropdowns#dark-dropdowns" >}}) + #### Close button - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/close-button#dark-variant" >}}) @@ -132,9 +222,9 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu ### Utilities -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be be replaced by `.text-body-secondary` in v6. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be replaced by `.text-body-secondary` in v6. - With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. + With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with 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. - Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._ @@ -576,7 +666,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`. - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`. - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`. + - Renamed `.text-*-left` and `.text-*-right` to `.text-*-start` and `.text-*-end`. - <span class="badge bg-danger">Breaking</span> Disabled negative margins by default. |