[ColorSystem][MessageIndicator] Improve contrast and use color system

[chloerice]

WHY are these changes introduced?

To improve the contrast of MessageIndicator shown when message is set on TopBar.UserMenu. Thanks for the design @AdamWhitcroft 🎉

cc @mirualves for UI Kit

WHAT is this pull request doing?

Added a border for the message indicator colored with the --p-surface-background CSS variable. The indicator's color now uses the --p-highlight-icon CSS variable.

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useCallback, useState} from 'react';
import {ArrowLeftMinor} from '@shopify/polaris-icons';
import {Page, Card, ActionList, TopBar, Frame, AppProvider} from '../src';

export function Playground() {
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
  const [isSearchActive, setIsSearchActive] = useState(false);
  const [searchValue, setSearchValue] = useState('');

  const toggleIsUserMenuOpen = useCallback(
    () => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
    [],
  );

  const handleSearchResultsDismiss = useCallback(() => {
    setIsSearchActive(false);
    setSearchValue('');
  }, []);

  const handleSearchChange = useCallback((value) => {
    setSearchValue(value);
    setIsSearchActive(value.length > 0);
  }, []);

  const handleNavigationToggle = useCallback(() => {
    console.log('toggle navigation visibility');
  }, []);

  const theme = {
    colors: {},
    logo: {
      width: 124,
      topBarSource:
        'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
      url: 'http://jadedpixel.com',
      accessibilityLabel: 'Jaded Pixel',
    },
  };

  const userMenuMessage = {
    title: 'New message',
    description: 'Description',
    action: {
      content: 'Message action',
      onClick: () => {
        console.log('User menu message clicked');
      },
    },
    link: {to: '/', content: 'User menu message link'},
  };

  const userMenuMarkup = (
    <TopBar.UserMenu
      actions={[
        {
          items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
        },
        {
          items: [{content: 'Community forums'}],
        },
      ]}
      name="Dharma"
      detail="Jaded Pixel"
      initials="D"
      message={userMenuMessage}
      open={isUserMenuOpen}
      onToggle={toggleIsUserMenuOpen}
    />
  );

  const searchResultsMarkup = (
    <Card>
      <ActionList
        items={[
          {content: 'Shopify help center'},
          {content: 'Community forums'},
        ]}
      />
    </Card>
  );

  const searchFieldMarkup = (
    <TopBar.SearchField
      onChange={handleSearchChange}
      value={searchValue}
      placeholder="Search"
    />
  );

  const topBarMarkup = (
    <TopBar
      showNavigationToggle
      userMenu={userMenuMarkup}
      searchResultsVisible={isSearchActive}
      searchField={searchFieldMarkup}
      searchResults={searchResultsMarkup}
      onSearchResultsDismiss={handleSearchResultsDismiss}
      onNavigationToggle={handleNavigationToggle}
    />
  );

  return (
    <div style={{height: '250px'}}>
      <AppProvider
        i18n={{
          Polaris: {
            Avatar: {
              label: 'Avatar',
              labelWithInitials: 'Avatar with initials {initials}',
            },
            Frame: {skipToContent: 'Skip to content'},
            TopBar: {
              toggleMenuLabel: 'Toggle menu',
              SearchField: {
                clearButtonLabel: 'Clear',
                search: 'Search',
              },
            },
          },
        }}
      >
        <Frame topBar={topBarMarkup} />
      </AppProvider>
    </div>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• 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

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified	2
Files potentially affected	3

Details

All files potentially affected (total: 3)

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

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/MessageIndicator/MessageIndicator.scss (total: 3)

Files potentially affected (total: 3)

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

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[tmlayton]

Couple small things, otherwise nice improvement!

(Made all requested changes)

[tmlayton]

👍

[tmlayton]