[Avatar] Update colors

[lgriffee]

WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1077

WHY are these changes introduced?

Updates avatar background and text colors.

Before	After

How to 🎩

• 📕 Storybook
• 👀 Chromatic Diffs
• 🌀 Spin

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• 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

[lgriffee]

/snapit

[github-actions]

🫰✨ Thanks @lgriffee! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231130180736

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231130180736

yarn add @shopify/polaris@0.0.0-snapshot-release-20231130180736

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231130180736

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231130180736

[annaborg]

Good on the color changes overall. Colors showing up correctly in the login screen, store switcher, search, org switcher, settings headers, orgs Stores page, orgs Users page.

• Cannot test if showing up correctly in admin search. If there is above a certain number of Stores in the switcher within an Org admin in Plus, you are able to search for more stores that expand past the amount allowed in that switcher.

• Not showing up on non-Plus Users and Permissions page

• All Plus users and permissions pages use the same color

• Did we update the original avatars in account.shopify.com? It looks like they're using the new avatars in the login screen, but reverts back to old when you go to the different URL. I know account isn't react the last time I looked, so is that something we need to worry about right now?

• No longer able to hover over avatars in the Store Settings header for neither Plus or Non-Plus to launch modal to edit and upload custom avatar.

• Want to make sure that the above functionality persists, in addition to making sure that this PR doesn't cancel out an existing custom avatars that currently exist for Store navigation.

[lgriffee]

@annaborg

Good on the color changes overall. Colors showing up correctly in the login screen, store switcher, search, org switcher, settings headers, orgs Stores page, orgs Users page.

Awesome! 🎉❤️✨

Cannot test if showing up correctly in admin search. If there is above a certain number of Stores in the switcher within an Org admin in Plus, you are able to search for more stores that expand past the amount allowed in that switcher.

I've added more stores to the first business so you can test this now. From what I can tell it seems they are all displaying correctly!

Not showing up on non-Plus Users and Permissions page

You know I came across the same issue with Timeline recently (so this issue is currently one in production not something to do with this PR). And I couldn’t figure out why for the longest time but I finally tracked down what’s going on! There’s logic in the Avatar (from this PR) that only applies the color styles when there is no source prop defined. So if there is a source provided but it fails to load (say an empty string gets passed in) then it just falls back to grey/initials. I've updated the logic so that if the image fails to load then it defaults back to the colored background instead. I've cut a new snapshot and confirmed the fix works. While loading the avatars are grey but as soon as they get initials they become colored.

All Plus users and permissions pages use the same color

I investigated this and it looks like these are all the same since a blank string is being passed into the Avatar initials prop. I think the best solution for these instances is to add a name prop to that Avatar instance in the admin versus any changes in this PR. I will create a separate PR in the admin for this update.

Did we update the original avatars in account.shopify.com? It looks like they're using the new avatars in the login screen, but reverts back to old when you go to the different URL. I know account isn't react the last time I looked, so is that something we need to worry about right now?

Yeah since this is part of identity which is currently on the old rails version of Polaris we won't get updates for free here. That would need to be updated by that team.

No longer able to hover over avatars in the Store Settings header for neither Plus or Non-Plus to launch modal to edit and upload custom avatar. Want to make sure that the above functionality persists, in addition to making sure that this PR doesn't cancel out an existing custom avatars that currently exist for Store navigation.

I spun up a fresh instance (without any of the changes here and with the latest admin changes) and couldn't get this functionality to work so I think this may be a spin limitation. This PR shouldn't effect that functionality.

[lgriffee]

/snapit

[github-actions]

🫰✨ Thanks @lgriffee! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20231201215924

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20231201215924

yarn add @shopify/polaris@0.0.0-snapshot-release-20231201215924

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20231201215924

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20231201215924