Utilities API missing local vars in pseudo states

[flippidippi]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Currently, if you add state: hover to a utility like color, the utility won't quite work correctly because the hover state class does not include the local variable like the non-hover classes. So the --bs-text-opacity variable isn't set.

.text-white-hover:hover {
    color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

I currently have to following as a temporary fix:

[class*=" text-"][class*="-hover "] {
  --bs-text-opacity: 1
}

[class*=" bg-"][class*="-hover "] {
  --bs-bg-opacity: 1
}

Reduced test cases

<p class="text-white-hover">doesn't hover to white</p>

<p class="text-white text-white-hover">does hover to white</p>

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

5.1.9