Tracking: Color modes

Calling out some outstanding todos and questions from #35857 as we'll merge that PR and tackle these things in smaller batches.

General todos

• JS review
• A11y review
  • https://github.com/twbs/bootstrap/issues/37745
  • Docs navbar blue focus visible is almost invisible!
• Colors/Sass/CSS vars
  • Can we generate the new subtle bg, subtle border, and text emphasis colors from $theme-colors? This has been improved with CSS variables being generated from new maps. No way to generate new Sass variables from a map though.
  • Do we provide hex colors, rgba() colors, or both for the new variables? No, not in this version.
  • Document dark mode variables in css-variables.md
  • We don't always use anymore values from $theme-colors (alerts and list groups) so Customize > Sass > Add to map isn't completely true anymore?
    • https://github.com/twbs/bootstrap/pull/37737 tackle a part of it
  • Split :root, [data-bs-* rules? (see https://github.com/twbs/bootstrap/pull/35857#discussion_r1032531543) I think for now, we leave as-is. Let's let this back while we get onto v6 where we can revamp.
  • Check feedback from https://github.com/twbs/bootstrap/issues/37659
• Forms
  • Improve form validation colors (see https://github.com/twbs/bootstrap/pull/35857#issuecomment-1327588757)
  • Consolidate approach to multiple background images and CSS vars for form control, check/radio/switch, form-select
  • Document changes to form validation map, mixin, bg image setting, and general colors
• Dropdowns
  • Deprecate .dropdown-menu-dark? If so, mention in Migration
• Navbars
  • Double check form field styling
  • Update togglers to use inline SVGs now instead of embedded ones? If so, mention in Migration
  • Check rendering and discrepancies with Bootstrap v5.2 (see https://github.com/twbs/bootstrap/pull/35857#discussion_r1032091306)
• Accordion
  • move icons into HTML as SVGs as well? similar to navbars if so
• Utilities
  • Confirm if we like the inverted box shadow utilities Reverted back to default shadows.
  • Refactor new bg, border, and text utilities to use rgba() values? TBD on this, would change a lot (+ see https://github.com/twbs/bootstrap/pull/35857#discussion_r1027116099 and https://github.com/twbs/bootstrap/pull/35857#discussion_r1030194604) Skipping in v5.
  • Document new theme color CSS variables
  • Document new dark mode Sass vars
• Pagination
  • calc() function in the comparison on L78? (see https://github.com/twbs/bootstrap/pull/35857/files#r1020883939)
• Carousels
  • Third slide in dark mode, difficult to distinguish the normal color and the hovered one` This is the same colors as in default/light mode, so if we want to redo these, let's redo them all over. Saving for another time.
• Browser elements
  • https://github.com/twbs/bootstrap/issues/37710
• Examples
  • Things to do in the "Dark mode hero" in Heroes example?
• Automatic testing
  • Add something to automatically test $color-mode-type with media-query set (see https://github.com/twbs/bootstrap/issues/37673) Already tackled by #36029
• Tooltips
  • Having $tooltip-color: var(--#{$prefix}body-bg) and $tooltip-bg: var(--#{$prefix}emphasis-color) since we use a background color to define the color of tooltips, and a text color to define the background of tooltips.

Q&A

• Why move some SVGs out of embedded CSS?
  • Makes CSS bundle smaller eventually (come v6)
  • Allows for use of inherited color as opposed to fixed colors, which requires repeating the entire SVG embed in CSS (adding to file size)

Docs todos

• https://github.com/twbs/bootstrap/pull/37608
• Add color modes section to homepage
• Audit Migration guide once more
• Clarify color & bg helpers don't respond to color modes (yet?)
• Add more examples for color mode specific versions of components? Toasts, for example.
• Pass color mode to StackBlitz edit buttons?
• Access color modes in /examples?
  • https://github.com/twbs/bootstrap/pull/37562
  • Handle each example 1 by 1
• Lighten up the bootstrap-grid.scss file by not importing all of _root.scss?
  • Might be tackled by https://github.com/twbs/bootstrap/pull/37844
• Linear gradient syntax in docs navbar? (see https://github.com/twbs/bootstrap/pull/35857#discussion_r1031450909)
• New docs navbar SVGs need a11y support (done via https://github.com/twbs/bootstrap/pull/37780)
• Docs navbar dropdown width—move to CSS or keep inline? (see https://github.com/twbs/bootstrap/pull/35857#discussion_r1031788895)
• Unrelated: Streamline JS and CSS banners
• https://github.com/twbs/bootstrap/pull/37538
• Check if we don't need to import variables-dark as well in color.md, api.md and customize.html
• Add in the documentation all $*-text, $*-bg-subtle and $*-border-subtle (see https://github.com/twbs/bootstrap/pull/35857#discussion_r1031424238)
• Doc consistency between "Sass mixins|loops"/"Sass mixin|loop"/"Mixins|Loop" titles (see https://github.com/twbs/bootstrap/pull/35857#discussion_r1031483897)
• https://github.com/twbs/bootstrap/pull/37658
• Search
  • https://github.com/twbs/bootstrap/pull/37738
  • Visible focus (keyboard) must be improved in light/dark mode
• https://github.com/twbs/bootstrap/issues/37739

Issues

• https://github.com/twbs/bootstrap/issues/37674
• https://github.com/twbs/bootstrap/issues/37673

After alpha release

• Improve display of :root and color mode CSS vars. Fixed by https://github.com/twbs/bootstrap/pull/37742
• Dark mode in the blog website
• Dark mode in the icons website
• Dark mode in the themes website?

Other tasks

• Create an issue to think to replace all occurrences of .text-muted by .text-body-secondary in v6

Issues raised by contributors

• https://github.com/twbs/bootstrap/issues/37620
• https://github.com/twbs/bootstrap/issues/37753
• https://github.com/twbs/bootstrap/issues/37754
• https://github.com/twbs/bootstrap/issues/37765
  • ⚠️ Double-check the contextual color modes for all components. This might be linked to components having $component-*-color Sass vars having a null value
• https://github.com/twbs/bootstrap/issues/37770
• https://github.com/twbs/bootstrap/issues/37774
• https://github.com/twbs/bootstrap/issues/37795
• https://github.com/twbs/bootstrap/issues/37799
• https://github.com/twbs/bootstrap/pull/37802
• https://github.com/twbs/bootstrap/pull/37809
• https://github.com/twbs/bootstrap/pull/37811
• https://github.com/twbs/bootstrap/issues/37853
• https://github.com/twbs/bootstrap/issues/37973
• https://github.com/twbs/bootstrap/issues/37976
• https://github.com/twbs/bootstrap/issues/37983
• https://github.com/twbs/bootstrap/issues/38113