Update the background menu color when no theme is set.

[CSilivestru]

Currently displays white on white when no colour theme is provided to the the top bar. The defaults provided didn't seem correct so I'm updating them :).

WHY are these changes introduced?

Addresses issue https://github.com/Shopify/destinations/issues/760.

WHAT is this pull request doing?

Before:

After:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• ~~[ ] Tested for accessibility~~N/A
• Updated the component's README.md with documentation changes
• [ ] Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

🟢 This pull request modifies 4 files and might impact 3 other files.

Details:

All files potentially affected (total: 3)

• /src/components/TopBar/components/Menu/Menu.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

📄 src/components/TopBar/README.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/TopBar/components/Menu/Menu.scss (total: 3)

Files potentially affected (total: 3)

• /src/components/TopBar/components/Menu/Menu.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

🧩 src/utilities/custom-properties/custom-properties.ts (total: 0)

Files potentially affected (total: 0)

[CSilivestru]

I made a change to include a var within a var to have polaris attempt to use the background lighter theme override if provided.

The reason this didn't work in earlier trials is because the css variable fallback is treated as plain text and doesn't invoke any functions -- see here.

Because of this, I had to remove the hover variable and place it directly in as the fallback. I'm more than happy to discuss alternatives to this!

[alex-page]

To make it easier for the plus team, I updated the example to use their white theme.

[alex-page]

These values are used once and blocked multiple theme overrides.

[alex-page]

@alexblaise you should be able to TopHat this when the tests pass there will be a Chroma check that will have a link to an example. I have updated our Themed TopBar Keys example to look like plus global navigation. Let me know if there are any issues.

[alexblaise]

Looks great!

[ghost]

🎉 Thanks for your contribution to Polaris React!