Update OuiHeader background to use the same value as OuiPageBackgroundColor

[KrooshalUX]

No description provided.

[joshuarrrr]

@KrooshalUX Currently the OuiHeader takes a theme prop which can be set to dark, and there's a different background color defined in that case:

Screen.Recording.2023-07-20.at.4.20.48.PM.mov

oui/src/global_styling/variables/_header.scss

Lines 12 to 16 in f718f63

	// Themeable colors
	$ouiHeaderBackgroundColor: $ouiColorEmptyShade !default;
	$ouiHeaderDarkBackgroundColor: lightOrDarkTheme(shade($ouiColorDarkestShade, 28%), shade($ouiColorLightestShade, 50%)) !default;
	$ouiHeaderBorderColor: $ouiBorderColor !default;
	$ouiHeaderBreadcrumbColor: $ouiColorDarkestShade !default;

So what should we do for when the dark header prop is set (in both light and dark site themes?)

[joshuarrrr]

The actual values:

Next dark:

 "ouiHeaderBackgroundColor": "#0a121a",
  "ouiHeaderDarkBackgroundColor": "#0d1720",

Next:

"ouiHeaderBackgroundColor": "#fcfeff",
  "ouiHeaderDarkBackgroundColor": "#212e3a",

[KrooshalUX]

"So what should we do for when the dark header prop is set (in both light and dark site themes?)" - good question.

The idea behind using the background page color as the navigation background color is to help the page content "pop" and give a lighter, less chrome-heavy feeling to the application (there is more to do in this regard, like perhaps removing the bottom border, but thats TBD after seeing the result of this change IRL).

So, in that lens - my overall concern is regarding the defaults - less so decisions the dashboards customer/builder may have chosen (ex: dark mode navigation in a light mode interface). I imagine deprecating this at this phase will cause unexpected chaos, so for users/customers/builders who have manually set this, if they are using light mode but set the header to dark mode, it wont have the same appearance effect, but at least it would reflect the correct color (vs what appears to be a much darker color than I intended).