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

• Refactor

[sonarqubecloud]

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]

note: These values were originally calculated with SVG scaling in mind, so they are no longer valid. However, I was able to achieve a relatively close result using font-size: round(up, var(--_avatar-size) * 0.4, 3px) @jouni let me know what you think.

[jouni]

It’s a bit complex at first glance, but who am I to criticize anyone’s CSS of that, when I’m often the one coming up with very elaborate constructs 😆

I didn't remember to test it locally, but am I right to assume that the font size adjusts with 3px increments, i.e., it’s always divisible by 3?

[vursen]

It’s a bit complex at first glance, but who am I to criticize anyone’s CSS of that, when I’m often the one coming up with very elaborate constructs

Yeah, it might not be immediately clear...

var(--_avatar-size) * 0.4 could be replaced with 0.4sqh assuming we make avatar a CSS container, but it seemed to me a good idea to avoid CSS containers when values are already available.

I didn't remember to test it locally, but am I right to assume that the font size adjusts with 3px increments, i.e., it’s always divisible by 3?

Yes, that's right.

[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?