[Bug Report][3.1.0] CSS specifity issue with text-color on v-badge

[mediafreakch]

Environment

Vuetify Version: 3.1.0
Vue Version: 3.2.45
Browsers: Chrome 108.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

1. Open the codepen provided

Expected Behavior

The text within the badge should be black

Actual Behavior

The text within the badge is white

Reproduction Link

https://codepen.io/mediafreakch-the-flexboxer/pen/rNrWKyY

Other comments

Doing the same on vuetify playground works

[mediafreakch]

Actually it seems like it's also broken on the vuetify playground and my example above was working by chance.

Here's another example (not working).

[lioneaglesolutions]

This only seems to happen when using pre-defined colours (primary, secondary etc) @johnleider

Repro below showing that this works when color is something like blue

https://play.vuetifyjs.com/#eNq1UstuwjAQ/JXI1xK7tPSCUkS/A3Mw8RZc4odsh7ZC/HvXTkApVJWiqjfPjD07u+vVkbw4Rw8tkDmpImjXiAgLboqiOpTCuXzMQAtliroRITxz4kQ546QXs7wRcgtFhI9Y1raxHi95kJwUZ7RpWsjQRDARibspwqGFQm2hpSp3VkPFeuJyAYlc5MKMqe680sJ/3gY4d6Sb1NEf8oxJEwCd5P/mSTjtrFsmgm6bFRtsGWGovXKxCBDbTu4IPJIJUdpZH9HG0bdgDf6RY3LjvRA4mReZSRx+ooQ52cXowpyx1rj9ltZWsyVqzLcmKg2ltHr5SB/o7IlJFeKQpxB0ufH2PYDHipxMBuZRveK8fi7Qy+g7pfedbU8lyxsrhv4H8KUHI8GD/zX31d1v2a+0m/yp5ombE86yUWYfrsZYhzzC1TnaqMa0MjQbpNfrVOQ0IV04LJcfkPUXCe8/xw==

[KaelWD]

This is because the generated theme stylesheet is inserted after the rest of vuetify's styles. I don't think there's a good way to guarantee stylesheet order, this will have to wait for #15596