Increase contrast of switch track and thumb

[jmuzina]

Done

• Increases color contrast of the switch track and thumb by applying the high border contrast color to the thumb border and the entirety of the track.
• Simplifies the switch by removing external borders (except in the focused state) and box shadows
• Flattens the high contrast border color in order to allow it to be drawn over the thumb background without influencing the color of the thumb border.

Fixes #5470 , WD-19209

QA

• Open switch component
• Verify it looks as expected in all color themes
• Make sure to check the focused state

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

As far as I understand the source issue #5470 , there are also some changes that need to be made to the figma library, that are not in scope of this PR.

[lyubomir-popov]

@jmuzina almost there! Can we please make the thumb border the same high contrast grey, for consistency? ATM, in the on state, it is blue and overlaps the border of the track, the two should match:

[jmuzina]

@jmuzina almost there! Can we please make the thumb border the same high contrast grey, for consistency? ATM, in the on state, it is blue and overlaps the border of the track, the two should match

@lyubomir-popov

The high contrast border color has some transparency, and is drawn over areas with different background colors so it appears differently over the track vs the thumb:

Is this an expected result? Otherwise, we could flatten the high contrast border color.

[jmuzina]

Explored two possible directions for the switch to go with @lyubomir-popov

1. Flatten the high contrast border color & apply it on the border of the entire component, for a consistent outline color.

2. Get rid of the outline & box shadows entirely, use a more flat approach where the track area and thumb area both have uniform color throughout. This is similar to Carbon's approach.

[jmuzina]

Discussed with @lyubomir-popov and Diana: We will go for option 2 above. I'll update this PR accordingly

[jmuzina]

@lyubomir-popov I've updated the PR per our recent discussions.

I also flattened the high contrast border color to get rid of the very slight discoloration visible in the "off" state when the high contrast border color has transparency:

Before:

After:

This color settings change also effects other components that use the high contrast border. Have a look at the visual regression test and let me know if anything unexpected has changed.

[jmuzina]

Diana has some questions about potential improvements to the focus state. These will be discussed during visual office hours on Monday.

[lyubomir-popov]

@jmuzina I've approved the percy build, nothing looks out of place to me.