Make the background color of `Avatar` transparent with image source is set

[peterlazzarino]

Issue summary

my team recently shipped an update that allows merchants to upload logos for their stores in the admin, if the user uploads a transparent PNG, it seems the Avatar component adds a gray background that cannot be removed.

Making the background transparent prevents the image from conflicting with the background color.

This also fixes the same issue for user image avatars.

Expected behavior

Transparent images used in Avatars are on transparent background

Actual behavior

There is a dark gray background

Steps to reproduce the problem / Reduced test case

See non editions version with transparent background with source prop applied

See editions version with dark background with source prop applied

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: latest 11.12
• Browser: Chrome
• Device: MBP
• Operating System: OSX latest

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

  System:
    OS: Linux 5.10 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (32) x64 Intel(R) Xeon(R) CPU @ 2.80GHz
    Memory: 153.38 GB / 251.90 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.20.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  npmPackages:
    @shopify/polaris: 11.12.0 => 11.12.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0