list-group-item-action color is overridden by list-group-item

[rokaux]

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

Since both classes should be applied to list group link or button, the list-group-item colors overrides list-group-item-action colors because list-group-item declaration comes after list-group-item-action in list-group.scss file.

There are separate variables for defining colors independently for list-group-item and list-group-item-action but they don't really work due to the above issue.

Reduced test cases

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

Windows, macOS

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

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.3.1