fix(ui-components): better Header contrast in dark mode (#470)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Refactor**
- Updated the header component to refine its visual appearance for
different modes ("dark" and "light").
- **Tests**
- Adjusted tests to align with the updated styling logic for the header
component in both light and dark themes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/ui-components/src/components/Header/Header.tsx

@@ -13,14 +13,14 @@ export const Header = ({
 	noColors = false,
 }: HeaderProps) => {
 	const headerClass = clsx(HEADER_CLASSNAME, getSpacing(spacing), {
-		"border-border-accent bg-surface-medium":
+		"border-border-accent bg-surface-dark":
 			mode === "dark" && !raw && !noColors,
 		"border-border-medium bg-surface-light":
 			mode === "light" && !raw && !noColors,
-		"border-border-accent bg-surface-light dark:border-border-medium dark:bg-surface-dark":
-			mode === "system" && !raw && !noColors,
-		"border-border-medium bg-surface-dark dark:border-border-accent dark:bg-surface-light":
+		"border-border-accent bg-surface-dark dark:border-border-medium dark:bg-surface-light":
 			mode === "alt-system" && !raw && !noColors,
+		"border-border-medium bg-surface-light dark:border-border-accent dark:bg-surface-dark":
+			mode === "system" && !raw && !noColors,
 		"border-b-4": !raw,
 		"border-transparent": !raw && noColors,
 	});

packages/ui-components/src/components/Header/__tests__/Header.test.tsx

@@ -16,9 +16,9 @@ describe("Header modifiers", () => {
 		const header = await screen.findByRole("banner");
 		expectToHaveClasses(header, [
 			HEADER_CLASSNAME,
-			"border-border-accent",
-			"dark:border-border-medium",
+			"border-border-medium",
 			"bg-surface-light",
+			"dark:border-border-accent",
 			"dark:bg-surface-dark",
 		]);
 		expectToHaveClasses(header.children[0], [
@@ -37,9 +37,9 @@ describe("Header modifiers", () => {
 		const header = await screen.findByRole("banner");
 		expectToHaveClasses(header, [
 			HEADER_CLASSNAME,
-			"border-border-medium",
-			"dark:border-border-accent",
+			"border-border-accent",
 			"bg-surface-dark",
+			"dark:border-border-medium",
 			"dark:bg-surface-light",
 		]);
 		expectToHaveClasses(header.children[0], [
@@ -78,7 +78,7 @@ describe("Header modifiers", () => {
 		expectToHaveClasses(header, [
 			HEADER_CLASSNAME,
 			"border-border-accent",
-			"bg-surface-medium",
+			"bg-surface-dark",
 		]);
 		expectToHaveClasses(header.children[0], [
 			"mt-0",