feat(switch): refine switch theme

[didimmova]

Closes #14109

Additional information (check all that apply):

• [ ] Bug fix
• [ ] New functionality
• [ ] Documentation
• [ ] Demos
• [ ] CI/CD

Checklist:

• [ ] All relevant tags have been applied to this PR
• [ ] This PR includes unit tests covering all the new code (test guidelines)
• [ ] This PR includes API docs for newly added methods/properties (api docs guidelines)
• [ ] This PR includes feature/README.MD updates for the feature docs
• [ ] This PR includes general feature table updates in the root README.MD
• [ ] This PR includes CHANGELOG.MD updates for newly added functionality
• [ ] This PR contains breaking changes
• [ ] This PR includes ng update migrations for the breaking changes (migrations guidelines)
• [ ] This PR includes behavioral changes and the feature specification has been updated with them

[desig9stein]

@didimmova

Material There is an elevation 3 on the thumb on hover, I don't see it in the UI kit. Also, it is triggered upon hovering the thumb itself not the whole switch.

https://github.com/IgniteUI/igniteui-angular/assets/21260963/de16ed55-6726-4ee3-9167-2f6a0a227ca2

Fluent there is a problem with the keyboard focus

Bootstrap The outline with keyboard focus should be 4px

UI kit

Implementation

[didimmova]

@didimmova

Material There is an elevation 3 on the thumb on hover, I don't see it in the UI kit. Also, it is triggered upon hovering the thumb itself not the whole switch.

Screen.Recording.2024-04-26.at.7.00.21.mov Fluent there is a problem with the keyboard focus

Bootstrap The outline with keyboard focus should be 4px

UI kit

Implementation

I fixed the bootstrap and fluent ones. About the material one, the shadow is elevation-1 in all states, so it's static (meaning it doesn't change on hover, so it doesn't matter where you hover) but even if it wasn't, according to the design team, it should be on the thumb, because that's the element you're interacting with and the shadow that's changing lies under it.

[AnjiManova]

Material

All requested changes are applied correctly. ✅ The "pressed" states ripple has been changed for both themes (Light and Dark):

• The "Checked" switch will use for "pressed" the thumb-on color
• The "Unchecked" switch will use for "pressed" the track-off color

[imincheva]

Bootstrap All looks good and by design!

[AnjiManova]

Fluent

Only one comment related to the Focus Border size:

• currently, the focus border size value is -(0.125)

and it should be -(0.1875)

[AnjiManova]

Fluent

All is fixed now, and the PR is design: verified

[AnjiManova]

Fluent

Based on the WebC validations, something came out. In addition, the thumb isn't positioned correctly. It should have a 3px margin instead of 4px.