[component]: Avatar

[gfellerph]

Create a profile picture component.

Props

• email (optional): if provided, show the gravatar profile picture (grab post profile picture if it's a post account, check if images are available from outside of the post net, potential security issue)
• firstname (optional): if provided without email, show the first two letters,
• lastname (optional): if provided without email but with firstname, show initials, if provided as only option, show first two letters

Default slot

Accessible name of the component in a hidden span or alt text for the image when email is provided.

Notes

• Provide a fallback user image (icon 2125) if no props are passed

Tokens

• Tokens for this component are ready

DEVs proposal

The Avatar Group will be another component and is therefore not part of this definition.

Token set name: Components/Avatar

• post-avatar-size
• post-avatar-bg
• post-avatar-fg
• post-avatar-border-width
• post-avatar-border-color
• post-avatar-border-radius
• post-avatar-font-size
• post-avatar-hover-bg
• post-avatar-hover-bg-img-overlay
• post-avatar-focus-outline-width (not used, avatar has no focus state, instead use anchor (link) focus styles in Figma)
• post-avatar-focus-outline-color (not used, avatar has no focus state, instead use anchor (link) focus styles in Figma)
• post-avatar-focus-outline-offset (not used, avatar has no focus state, instead use anchor (link) focus styles in Figma)

[Vandapanda]

Tokens added

[oliverschuerch]

@Vandapanda The token post-avatar-image-hover-opacty is not working as expected, because the resolved value looks like this: rgba(#fcfcfc, 0.5)

This is not working because the rgba() css function expects a rgb value like so rgba(252, 252, 252, 0.5).
Are you able to fix this?

[Vandapanda]

@oliverschuerch I should be able to fix this when not connecting to the real value for sandgrey 100 and sandgrey 000. This means if we ever switch something in those values we will have to update the alpha values by hand but that shouldnt be a problem I think