Similar issue to #5804

Background: Angular Material wants to use the Switch with different colors. We'd like to call mdc-switch-without-ripple to get structure, and then individually call the color mixins to complete the switch.

Here's an example of what we'd like to achieve:

.mdc-switch {
  @include mdc-switch-without-ripple($query: (structure));

  &.rainbow {
    @include mdc-switch-toggled-on-track-color(red);
    @include mdc-switch-toggled-on-thumb-color(purple);
    @include mdc-switch-toggled-off-track-color(green);
    @include mdc-switch-toggled-off-thumb-color(blue);
  }

  &.black-and-white {
    @include mdc-switch-toggled-on-track-color(black);
    @include mdc-switch-toggled-on-thumb-color(black);
    @include mdc-switch-toggled-off-track-color(white);
    @include mdc-switch-toggled-off-thumb-color(white);
  }
}

We are close to getting this, but it appears there is one more color query we are missing. In the thumb_ mixin, a box-shadow is applied and it requires color. But this means we also bring in all the colors defined throughout the core styles:

@mixin thumb_($query: feature-targeting-functions.all()) {
  ...

  @include elevation-mixins.elevation($z-value: 2, $query: $query);

  ...
}

One solution is that we simply call the elevation mixin ourselves after we call mdc-switch-without-ripple. However, it seems that this would not be ideal for every client who tries to do the same thing.

Should we have a separate mixin we can call that allows us to apply this shadow separately from the core styles?