Component: Form Components Theme: inconsistent invalid fields hover border color

[honboubao]

Describe the bug

Various form components behave differently in regards to the displayed border style, when the fields have the .ng-invalid.ng-dirty CSS classes applied and when they are hovered over at the same time.

Some will display the --p-form-field-invalid-border-color (e.g. pInputText, p-select, p-autocomplete with multiple, checkbox, radiobox} while some will display --p-form-field-hover-border-color.

Environment

Windows 10
Firefox 128.3.1esr

Reproducer

https://stackblitz.com/edit/stackblitz-starters-6nsm3jzl?file=src%2Fapp%2Fapp.component.html

Angular version

18

PrimeNG version

18

Node version (for AoT issues node --version)

No response

Browser(s)

No response

Steps to reproduce the behavior

1. Include various form components
2. make components invalid, e.g. by adding ng-invalid and ng-dirty CSS classes
3. hover over components
4. observe the rendered border color

Expected behavior

You could argue for either one, displaying the invalid color or the hover color. I personally would rather keep the invalid color on hover. Either way, all the components should behave in a single consistent way.

[honboubao]

I just want to add, that the focused and probably disabled style plays into this as well. So focused, hover and invalid and disabled border styles should be ranked by precedence and applied consistently to all components.

[cagataycivici]

v19.1.0 will use the new shared theme package that all other Prime libs will be using, this issue is from an inconsistency due to port from the Vue version. Will be fixed via v19.1.0 after the migration.

https://github.com/primefaces/primeuix/tree/main/packages/themes