fix(material-experimental/mdc-slide-toggle): fix extra border… (#18035)

In the latest MDC Canary version an extra border was added to the slide toggle. The border also gets set to `transparent`, but due to insertion order gets overwritten by the base shorthand `border` declaration. This was only an issue for the `primary` color, because we were assuming that it's the default so we included less specific styles. These changes make it the same specificity as the other colors.

Also bumps us to the latest MDC Canary version.

Author: crisbeto

package.json

@@ -53,7 +53,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "5.0.0-canary.50f110a6c.0",
+    "material-components-web": "5.0.0-canary.c6808c51c.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",

src/material-experimental/mdc-slide-toggle/_mdc-slide-toggle.scss

@@ -17,7 +17,6 @@
   @include mat-using-mdc-theme($theme) {
     $mdc-switch-baseline-theme-color: primary !global;
 
-    @include mdc-switch-without-ripple($query: $mat-theme-styles-query);
     @include mdc-form-field-core-styles($query: $mat-theme-styles-query);
 
     // MDC's switch doesn't support a `color` property. We add support
@@ -27,6 +26,10 @@
         background: $mdc-switch-toggled-off-ripple-color;
       }
 
+      &.mat-primary {
+        @include mdc-switch-without-ripple($query: $mat-theme-styles-query);
+      }
+
       &.mat-accent {
         $mdc-switch-baseline-theme-color: secondary !global;
         @include mdc-switch-without-ripple($query: $mat-theme-styles-query);

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -68,9 +68,9 @@ export class MatSlideToggleChange {
     '[attr.tabindex]': 'null',
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
-    '[class.mat-primary]': 'color == "primary"',
-    '[class.mat-accent]': 'color == "accent"',
-    '[class.mat-warn]': 'color == "warn"',
+    '[class.mat-primary]': 'color === "primary"',
+    '[class.mat-accent]': 'color !== "primary" && color !== "warn"',
+    '[class.mat-warn]': 'color === "warn"',
     '[class.mat-mdc-slide-toggle-focused]': '_focused',
     '[class.mat-mdc-slide-toggle-checked]': 'checked',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',