refactor!: replace abbr SVG with <div> element

[vursen]

Description

Replaces the avatar's abbr SVG with a <div> element, following up on #9316, which made the same change for the icon SVG.

This also fixes the issue of abbr rendering with the wrong color in the new base styles:

Before	After

[!WARNING] This change may be breaking, as font-size on [part=abbr] now behaves differently due to removal of SVG scaling.

Type of change

• [x] Refactor

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[jouni]

I don't like that now the abbreviation isn't exactly centered, when we rely on the line-height to center it. But that depends on the font, how the characters are centered in the line box.

I’d rather make the avatar host a flex container and use align-items: center and then line-height: 0 or text-box: cap alphabetic (only supported in Chrome and Safari 18.2) to properly center the text.

Was there some issue using line-height: 0 that I already forgot?

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[vursen]

Closing as not planned.