fix(switch): theming issues with focus in dark theme

[rudzikdawid]

Closes #8518

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

after focus on switch component using keyboard we can see dark ripple ink on dark theme

light theme before:

dark theme before:

Issue Number: #8518

What is the new behavior?

after focus on switch component using keyboard we can see bright ripple ink on dark theme

light theme after:

dark theme after:

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[Splaktar]

Thank you for looking into this!

I did some manual testing and reviewing against the spec. I've left some comments on how we can better align with the spec.

[Splaktar]

Based on https://material.io/archive/guidelines/components/selection-controls.html#selection-controls-switch, it seems like the thumb needs to be displayed when focused and disabled. This can't be done with tabbing, but it is possible to focus a disabled switch when using a screen reader or other assistive device.

We should probably remove this disabled check.

[Splaktar]

I did some more testing and the following seemed to work best for me:

  &.md-focused {
    &:not(.md-checked) {
      .md-thumb:before {
        background-color: '{{foreground-4}}';
      }
    }
    &[disabled] {
      .md-thumb:before {
        background-color: '{{foreground-4}}';
      }
    }
  }

[Splaktar]

We need to add :not([disabled]) to this rule so that disabled, focused switches don't get colored.

[Splaktar]

We need to remove :not([disabled]) from this rule as well so that the circle has a proper size when disabled switches are focused.

[Splaktar]

@rudzikdawid I'd like to get this into the 1.1.11 release that is coming out soon. Can you please look at the PR review feedback and let me know if you can address it this week?

[Splaktar]

@rudzikdawid I'm sure that you are busy, so I made the changes and opened PR #11459 with both your changes and the ones I suggested above.

Can you please post in that PR that you approve the use of your commit so that the caretakers will be able to mark the CLA: yes?