Hardcoded White and Gray colors that should use SCSS variables

If you set some bootstrap colors in the Advanced theme settings, like:

$body-bg: PapayaWhip;

$card-bg: PeachPuff;

$input-bg: Moccasin; 

then view the site you can see a few things hardcoded to white or pale gray that should probably react to these settings:

#page.drawers .main-inner is currently set directly to $white.

It should either use $body-bg directly, or use it's own variable $main-inner-bg that inherits from $body-bg by default.

There is a $drawer-bg variable that is correctly created in this way, but then it is overriden by a $drawer-bg-color variable, which as well as not following the standard bootstarp variable naming conventions, is hard coded to gray. The single current usage of drawer-bg-color should be replaced with $drawer-bg instead.

The $card-bg color change highlights a few places where the "card" class has been used inappropriately, like the file upload widget in admin settings. It's fine for them to inherit the card settings by default, but they're not really cards, and people targetting .card might be surprised to see them change.

The hover effect on the new menu nav is also hardcoded gray, but I'll mention that in a seperate issue.

On the new my courses page you can also see that the default placeholder image shadow should probably be semi-transparent rather than solid gray.

/theme/image.php/boost/block_myoverview/1653646102/courses

The moremenu in the navbar and in the page, uses a mixin called

            @include hover-navbar();

To set the hover and focus colors. This is hardcoded to set a background color of pale gray. You can see this with the in-page moremenu if you set the body-bg or with the navbar if you change it to use navbar-dark and bg-dark instead of navbar-light and bg-white.

It's not clear that both these areas should use the same hover effect. It'll likely only make sense if the navbar is white. Perhaps the could have the same look, but with seperate colors used depending on the navbar bg color? At least changing the background to a semi-transparent light gray would help in the short term.

The secondary navigation actually picks up the nav-tabs colors intentionally:

The secondary navigation actually picks up the nav-tabs colors intentionally:

706:$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; Which is probably best avoided.

 Which is probably best avoided.