Resolve issue with button groups and child variant precedence

[knarkzel]

Current Behavior

Currently it's only possible to have one style for all the buttons in btn-group.

Expected Behavior

Be able to use different styles for each button in btn-group.

Steps To Reproduce

<div class="btn-group">
  <button class="variant-filled-primary">Monthly</button>
  <button class="variant-ghost-primary">Annually</button>
</div>

Link to Reproduction / Stackblitz

https://discord.com/channels/1003691521280856084/1125913854585618534

More Information

As you can see in the screenshot above, the colors are off. --on-primary doesn't work properly, borders aren't grouped etc.

[endigo9740]

Appending a bit of additional context here:

We likely won't support mixing and matching button variants within a group as shown above. If the button does not have some unity between the group then they should be split and standalone.

But we are seeing an issue with variant-filled-x not applying the text/fill "on" color when doing something like this:

<div class="btn-group variant-ghost-primary">
  <button class="variant-filled-primary">Monthly</button>
  <button>Annually</button>
</div>

Which could be useful for creating a radio group like grouping that indicates active selection state. It seems the btn-group > button styles are taking precedent for text color, which means the text will flip flop between black/white when toggling light/dark mode instead of adhering to the desired "on" color, which harms accessibility.

I'd assume there's some ! important declaration on the button group styles that is causing this. Likely here:
https://github.com/skeletonlabs/skeleton/blob/dev/packages/plugin/src/styles/components/buttons.css

Also note we likely won't be able to revisit this until the plugin changes in v2 are in place, so this PR is a prerequisite:

• feat: Skeleton Plugin refactor #1660

[endigo9740]

Just reiterating that the original post above was not an scenario we were keen to support in Skeleton. If you wish to mix and match variants, create your own button grouping.

However, per having a variant override to indicate state (like a radio field), this appears to be resolved - at least in Skeleton v2. You're now able to supply ! on the variant class to signal that it should take precedence, so like:

<div class="btn-group variant-ghost-primary">
	<button class="!variant-filled-primary">Months</button>
	<button>Days</button>
	<button>Years</button>
</div>

Not only does the text color then work as expected, but the child button with the variant also stays active even when hovering the button. It's a small change that makes this work exactly as expected.

With this, no changes are needed on Skeleton's end.