BP Nouveau needs some improvements to get along with Twenty Twenty One

[imath]

Have you tried to activate the next WordPress default theme (twenty twenty one) ? BuddyPress parts are looking pretty ugly 😱. Have a look below:

I've started working on improvements from this ​GH branch and I believe we should start enjoying CSS variables like this theme does!

I think this is important we fix this ticket before 7.0.0 final release. As it's only CSS, I think we can finish this after Release Candidate is released.

[imath]

It took me longer than I thought to improve the way BuddyPress parts are looking into Twenty Twenty-One. Unlike what I thought there were more than one or two things to improve. The reason is: Twenty Twenty-One comes with a dark mode. And as you can see in this screenshot, when users choose this mode BuddyPress parts are looking even worse.

The interesting thing about Twenty Twenty-One is the use of CSS variables. I believe we should use these into our Template packs to make it easier to customize them. As the number of SCSS lines were grewing, it became important to reintroduce into BP Nouveau the companion stylesheet feature so that people who doesn't use Twenty Twenty-One do not have to load the specific rules to this theme. Here's a screenshot showing the result of the patch:

I believe, we should commit it and package a new release candidate (RC2) to let people eventually test it and improve it if needed.

[imath]

Adds improvements made by @vapvarun

[imath]

In 12814:

BP Nouveau gets ready for Twenty Twenty-One

Improve the BP Nouveau template pack to make BuddyPress appearance looks great into the next WordPress default theme (Twenty Twenty-One).

Use the companion stylesheet feature to only load CSS rules specific to Twenty Twenty-One if it is the active theme or the parent of the active theme.

Props vapvarun

Fixes #8395