Special labels have low contrast within a .dropdown-item:hover

[mjacobus]

The current low contrast makes it very difficult to read some labels, such as in the example bellow

<details class="details-overlay details-reset position-relative d-inline-block float-right mr-3">
  <summary class="btn-link" role="button">
    Menu
  </summary>
  <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-text-primary anim-scale-in width-auto" style="width: 185px" role="menu">
    <button type="button" class="dropdown-item btn-link" role="menuitem">
      Do Stuff
    </button>
    <div role="none" class="dropdown-divider"></div>
    <button class="dropdown-item btn-link">
      Beta Feature <span class="Label Label--success Label--inline mr-1 px-1">Beta</span>
    </button>
  </details-menu>
</details>

Regular vs :hover

Same thing happens with other variations of beta labels. I.E. Label--warning.

Expected behavior

We probably want the label to inherit the color from the hovered item, in this case, white. The border color should probably be white too.

This PR solves a similar problem.

This issue was found while working in dotcom. I would be more than happy to pair with an expert in a fix. I assume the fix is simple, but my team and I currently lack the knowledge on how ship a css fix like this to dotcom.