diff --git a/docs/content/components/alerts.md b/docs/content/components/alerts.md index b8da346e2..41d7441fa 100644 --- a/docs/content/components/alerts.md +++ b/docs/content/components/alerts.md @@ -228,7 +228,7 @@ Alerts use local CSS variables on `.alert` for enhanced real-time customization. ### SASS mixin -{{< deprecated-in "4.3.0" >}} +{{< deprecated-in "5.0.0" >}} Used in combination with `$alert-variants` to create contextual modifier classes for our alerts. diff --git a/docs/content/components/list-group.md b/docs/content/components/list-group.md index 152803fd9..c4b073bd6 100644 --- a/docs/content/components/list-group.md +++ b/docs/content/components/list-group.md @@ -489,7 +489,7 @@ List groups use local CSS variables on `.list-group` for enhanced real-time cust ### SASS mixins -{{< deprecated-in "4.3.0" >}} +{{< deprecated-in "5.0.0" >}} Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s. diff --git a/docs/content/customize/color-modes.md b/docs/content/customize/color-modes.md index d9a26f3e0..88c6d9232 100644 --- a/docs/content/customize/color-modes.md +++ b/docs/content/customize/color-modes.md @@ -1,7 +1,7 @@ --- layout: docs title: Color modes -description: CoreUI now supports color modes, or themes, as of v4.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template. +description: CoreUI now supports color modes, or themes, as of v5.0.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template. group: customize toc: true added: "5.3" @@ -13,7 +13,7 @@ added: "5.3" ## Dark mode -**CoreUI for Bootstrap now supports color modes, starting with dark mode!** With v4.3.0 you can implement your own color mode toggler (see below for an example from CoreUI for Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `` element, or on specific components and elements, thanks to the `data-coreui-theme` attribute. +**CoreUI for Bootstrap now supports color modes, starting with dark mode!** With v5.0.0 you can implement your own color mode toggler (see below for an example from CoreUI for Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `` element, or on specific components and elements, thanks to the `data-coreui-theme` attribute. Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below. diff --git a/docs/content/customize/color.md b/docs/content/customize/color.md index 2e75728f0..c2d78b72a 100644 --- a/docs/content/customize/color.md +++ b/docs/content/customize/color.md @@ -11,9 +11,9 @@ toc: true ## Colors -{{< added-in "4.3.0" >}} +{{< added-in "5.0.0" >}} -Bootstrap's color palette has continued to expand and become more nuanced in v4.3.0. We've added new variables for `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 or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged. +Bootstrap's color palette has continued to expand and become more nuanced in v5.0.0. We've added new variables for `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 or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged. Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--cui-secondary-bg-rgb), .5)`. diff --git a/docs/content/customize/css-variables.md b/docs/content/customize/css-variables.md index 7255c8f28..cc702d4f3 100644 --- a/docs/content/customize/css-variables.md +++ b/docs/content/customize/css-variables.md @@ -75,7 +75,7 @@ a { ## Focus variables -{{< added-in "4.3.0" >}} +{{< added-in "5.0.0" >}} Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles. diff --git a/docs/content/migration.md b/docs/content/migration.md index fcc2f81cd..aec58fa7c 100644 --- a/docs/content/migration.md +++ b/docs/content/migration.md @@ -1,14 +1,13 @@ --- layout: docs -title: Migrating to v4 -description: Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v3 to v4. +title: Migrating to v5 +description: Track and review changes to the CoreUI for Bootstrap source files, documentation, and components to help you migrate from v4 to v5. group: migration aliases: "/migration/" -aliases: "/4.0/migration/" toc: true --- -## v4.3.0 (v4.6.0 PRO) +## v5.0.0-alpha.0 ### CSS variables @@ -113,7 +112,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz ### Progress bars -The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label. +The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.0.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label. While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before. @@ -175,7 +174,7 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu - Deprecated `.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 been reassigned to the new `--cui-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.0.0. Its default value has also been reassigned to the new `--cui-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 `` or `