feat(forms): align input colors with guidelines

[robertwilde]

Closes #1608
Closes #1609
Updated colors for checkbox, radio, switch and text input in alignment with iX.

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

This pull request updates the styling of form elements, including checkboxes, radio buttons, input fields, and switches, to align with new semantic tokens. This involves changes to background colors, border colors, and text colors for various states like hover, active, checked, and disabled. The review highlights an invalid CSS property border: 1; in the switch component, which should be corrected to border: 1px solid .... Additionally, it points out a visibility issue in the checked radio button's active state where the ::after element's background color matches the primary active background, making it invisible, and suggests using $element-action-primary-text for consistency.

[github-actions]

⬇️ Download VRTs

[robertwilde]

e2e tests are failing randomly on this one

[panch1739]

@robertwilde Thank you so much! I found some small alignment problems

Switch

The check knob seems to have shifted one pixel. The distance between the check knob and the border should be 4px:

In the disabled state, for the check version, the outline from the uncheck version remains visible:

Radio

The hover effect seems to be applying only to the border:

Text inputs

They seem to be using base-hover, but they should use base-input:

We briefly discussed this token on teams, but maybe is not clear for me..is it not accessible in the code the base-input(experimental) token?

Thank youuu

[robertwilde]

@robertwilde Thank you so much! I found some small alignment problems

Switch

The check knob seems to have shifted one pixel. The distance between the check knob and the border should be 4px:

In the disabled state, for the check version, the outline from the uncheck version remains visible: **Radio**

The hover effect seems to be applying only to the border:

**Text inputs**

They seem to be using base-hover, but they should use base-input:

We briefly discussed this token on teams, but maybe is not clear for me..is it not accessible in the code the base-input(experimental) token?

Thank youuu

@panch1739 @spike-rabbit I integrated your feedback, updated everything and - from my side - it could be merged.

[panch1739]

@robertwilde now it looks good! Thanks :)