About the principle of a design, background-color and foreground-color is important.

[xiuno]

Most Compnent shoud caculate from the $background-color and $foreground-color.

$background-color: #111;
$foreground-color: #eee;

$grey-100: lighten($background-color, 90%); 
$grey-200: lighten($background-color, 80%);
$grey-200: lighten($background-color, 70%);

just like this, and component background should use use the value of calculating $background-color.
because：The atmosphere of the page is often expanded around the background color.

When I made the darkened theme, we can see that the default value of BS4 design principle is not reasonable：

[MartijnCuppens]

Our color utilities can be used to fix this.