[Navigation User] Add avatar background color token

[geospatialem]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Offer a new component token for navigation-user where the avatar's background color can be manipulated, similar to its --calcite-avatar-background-color token.

cc @matgalla

Acceptance Criteria

• Pass the --calcite-avatar-background-color token to the navigation-user via a new token, navigation-user-avatar-background-color (or similar)
• Ensure the navigation-user-avatar-background-color (or similar) supersedes the --calcite-avatar-background-color token

Relevant Info

Surfaced on Esri Community on Friday, June 13

Has a workaround with the --calcite-avatar-background-color token with https://codepen.io/geospatialem/pen/ByNqVOq:

calcite-navigation-user {
  --calcite-avatar-background-color: orange;
}

Which Component

• navigation-user
• avatar (inheritance)

Example Use Case

https://codepen.io/geospatialem/pen/ByNqVOq

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

[macandcheese]

Follow up from UC / Community post: example of security console error: (Customer states also occurs on Loader)

Note: Head meta tag : <meta http-equiv="Content-Security-Policy" content="style-src" 'self'>
https://codepen.io/mac_and_cheese/pen/GgpJXdb