From 404452f937100f213b8ce645552a90ae5d96a275 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 4 Jan 2023 09:58:45 -0800 Subject: [PATCH 1/5] WIP --- site/content/docs/5.3/migration.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 9541d284f166..08b918dc0cfa 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -7,7 +7,28 @@ aliases: "/migration/" toc: true --- -## v5.3.0 +## v5.3.0-alpha2 + +- 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. + +- Added SCSS testing via True to help test our utilities API and other customizations. + +- Improved included JavaScript for live Toast demo. + +- Added new `.nav-underline`. +- Examples now display with their color mode. +- Fixed selector for dark mode toggler SVG change +- Added new link utilities, icon link helper, and updated colored link helpers. +- Theme switcher HTML and JavaScript now much more accessible with aria attributes. +- Cards now get a color. +- Added focus styles to navs, plus new focus utility +- Replaced instances of our bootstrap-npm-starter project with the newer and more complete twbs/examples repo. + +
+ +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
From 9ca12ff149f6f86a4c705fc63c4ea71d957aa3b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Jan 2023 21:04:05 -0800 Subject: [PATCH 2/5] More changes mentioned --- site/content/docs/5.3/migration.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 08b918dc0cfa..fd2aafe8df97 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -23,6 +23,11 @@ toc: true - Cards now get a color. - Added focus styles to navs, plus new focus utility - Replaced instances of our bootstrap-npm-starter project with the newer and more complete twbs/examples repo. +- Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border. +- Snippet examples 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 +- Added `twbs/examples` repo contents to the top of the Examples page. +- Improved docs code syntax colors and more across light and dark mode
From 627a95bb6c9084d16a9c9e73a40b04317f2a29d3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Jan 2023 21:05:45 -0800 Subject: [PATCH 3/5] more --- site/content/docs/5.3/migration.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index fd2aafe8df97..76a55fcc34ce 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -19,6 +19,7 @@ toc: true - Examples now display with their color mode. - Fixed selector for dark mode toggler SVG change - Added new link utilities, icon link helper, and updated colored link helpers. +- Added new `.link-body-emphasis` helper. - Theme switcher HTML and JavaScript now much more accessible with aria attributes. - Cards now get a color. - Added focus styles to navs, plus new focus utility @@ -28,6 +29,7 @@ toc: true - Added `color-scheme: dark` to dark mode CSS to change OS level controls like scrollbars - Added `twbs/examples` repo contents to the top of the Examples page. - Improved docs code syntax colors and more across light and dark mode +- Shadows always stay dark once again.
From b230a102d6315ecb06ca12be2558ae07906f2c98 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 Jan 2023 21:13:33 -0800 Subject: [PATCH 4/5] mention dropdown-menu-dark deprecation --- site/content/docs/5.3/migration.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 76a55fcc34ce..464ec8f724ca 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -98,6 +98,10 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Deprecated 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 + +- Deprecated The `.dropdown-menu-dark` 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/dropdowns#dark-dropdowns" >}}) + #### Close button - Deprecated 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" >}}) From b375a4d1a492db55151aae01cf1300a2599df0b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 25 Jan 2023 16:35:05 -0800 Subject: [PATCH 5/5] More edits --- site/content/docs/5.3/migration.md | 64 +++++++++++++++++++++++------- 1 file changed, 49 insertions(+), 15 deletions(-) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 464ec8f724ca..4b763c7b0987 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -9,27 +9,61 @@ toc: true ## v5.3.0-alpha2 -- 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. +If you're migrating from our previous alpha release of v5.3.0, please reviewing the changes listed below. -- Added SCSS testing via True to help test our utilities API and other customizations. +### Color modes -- Improved included JavaScript for live Toast demo. +- 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 new `.nav-underline`. -- Examples now display with their color mode. -- Fixed selector for dark mode toggler SVG change -- Added new link utilities, icon link helper, and updated colored link helpers. -- Added new `.link-body-emphasis` helper. -- Theme switcher HTML and JavaScript now much more accessible with aria attributes. -- Cards now get a color. -- Added focus styles to navs, plus new focus utility -- Replaced instances of our bootstrap-npm-starter project with the newer and more complete twbs/examples repo. - Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border. -- Snippet examples are now ready for dark mode with updated markup and reduced custom styles. + +- [Snippet examples]() 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 + +- 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 + +- 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" >}}) + +### Docs + +- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. However, they lack an individual color mode picker for the time being. + +- Improved included JavaScript for live Toast demo. + - Added `twbs/examples` repo contents to the top of the Examples page. -- Improved docs code syntax colors and more across light and dark mode -- Shadows always stay dark once again. + +### 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).