refactor: aura badge colors inside containers with accent color

[jouni]

By default, allow badges to inherit the accent color from the container they are in:

<vaadin-button class="aura-accent-yellow">
  Button <!-- Yellow -->
  <vaadin-badge slot="suffix">Accent</vaadin-badge> <!-- Yellow -->
</vaadin-button>
<vaadin-button class="aura-accent-green">
  Button <!-- Green -->
  <vaadin-badge slot="suffix">Accent</vaadin-badge> <!-- Green -->
</vaadin-button>

This applies to filled badges as well:

<vaadin-button class="aura-accent-yellow">
  Button <!-- Yellow -->
  <vaadin-badge slot="suffix" theme="filled">Accent</vaadin-badge> <!-- Black on yellow -->
</vaadin-button>
<vaadin-button class="aura-accent-green">
  Button <!-- Green -->
  <vaadin-badge slot="suffix" theme="filled">Accent</vaadin-badge> <!-- White on green -->
</vaadin-button>

---

Default badges within filled component variants are overridden to use the current accent contrast color of the parent container:

<vaadin-button class="aura-accent-yellow" theme="primary">
  Button <!-- Black on yellow -->
  <vaadin-badge slot="suffix">Accent</vaadin-badge> <!-- Black -->
</vaadin-button>
<vaadin-button class="aura-accent-green" theme="primary">
  Button <!-- White on green -->
  <vaadin-badge slot="suffix">Accent</vaadin-badge> <!-- White -->
</vaadin-button>

---

Default filled badges within filled component variants invert their colors, using the current accent contrast color as the background color and the current accent color as the text color:

<vaadin-button class="aura-accent-yellow" theme="primary">
  Button <!-- Black on yellow -->
  <vaadin-badge slot="suffix" theme="filled">Accent</vaadin-badge> <!-- Yellow on black -->
</vaadin-button>
<vaadin-button class="aura-accent-green" theme="primary">
  Button <!-- White on green -->
  <vaadin-badge slot="suffix" theme="filled">Accent</vaadin-badge> <!-- Green on white -->
</vaadin-button>

---

When an explicit accent color variant is applied to a badge, then that color is respected, regardless of the parent container accent color:

<vaadin-button class="aura-accent-yellow">
  Button <!-- Yellow -->
  <vaadin-badge slot="suffix" class="aura-accent-green">Green</vaadin-badge> <!-- Green -->
</vaadin-button>
<vaadin-button class="aura-accent-green">
  Button <!-- Green -->
  <vaadin-badge slot="suffix" class="aura-accent-blue">Blue</vaadin-badge> <!-- Blue -->
</vaadin-button>

---

The same applies to colored badges within filled component variants (except for the "neutral" badge variant, which continues to inherit the color from the parent container):

<vaadin-button class="aura-accent-blue" theme="primary">
  Button <!-- White on blue -->
  <vaadin-badge slot="suffix" class="aura-accent-neutral">Blue</vaadin-badge> <!-- White (not gray) -->
</vaadin-button>
<vaadin-button class="aura-accent-yellow" theme="primary">
  Button <!-- Black on yellow -->
  <vaadin-badge slot="suffix" class="aura-accent-green">Accent</vaadin-badge> <!-- Green -->
</vaadin-button>
<vaadin-button class="aura-accent-green" theme="primary">
  Button <!-- White on green -->
  <vaadin-badge slot="suffix" class="aura-accent-blue">Blue</vaadin-badge> <!-- Blue -->
</vaadin-button>

---

Lastly, explicitly colored filled badges within filled component containers always keep their original appearance:

<vaadin-button class="aura-accent-yellow" theme="primary">
  Button <!-- Black on yellow -->
  <vaadin-badge slot="suffix" class="aura-accent-green" theme="filled">Accent</vaadin-badge> <!-- White on green -->
</vaadin-button>
<vaadin-button class="aura-accent-green" theme="primary">
  Button <!-- White on green -->
  <vaadin-badge slot="suffix" class="aura-accent-blue" theme="filled">Blue</vaadin-badge> <!-- White on blue -->
</vaadin-button>

[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

[vaadin-bot]

This ticket/PR has been released with Vaadin 25.1.0-beta3.