fix(slide-toggle): respect primary palette of theme (#12698)

* Instead of hard-coding the hue 500 for the checked color, the `default` hue for a palette should be used (falls back to 500 unless explicitly specified). This is similar to the MDC implementation and what the selection control specs show.
* Fixes a missing thing for the 2018 spec alignment: The thumb bar should have a `0.54` opacity of the checked thumb color
* Removes duplicate CSS for setting the unchecked ripple color.
* Updates spec comments to refer to the reworked Material Design guidelines webpage.

Fixes #11854

src/lib/slide-toggle/_slide-toggle-theme.scss

@@ -11,18 +11,16 @@
     }
 
     .mat-slide-toggle-bar {
-      background-color: mat-color($palette, $thumb-checked-hue, 0.5);
+      // Opacity is determined from the specs for the selection controls.
+      // See: https://material.io/design/components/selection-controls.html#specs
+      background-color: mat-color($palette, $thumb-checked-hue, 0.54);
     }
-  }
-}
 
-// Applies the specified colors to the slide-toggle ripple elements.
-@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {
-  &:not(.mat-checked) .mat-ripple-element {
-    background-color: $ripple-unchecked-color;
-  }
-  .mat-ripple-element {
-    background-color: $ripple-checked-color;
+    .mat-ripple-element {
+      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
+      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
+      background-color: mat-color($palette, $thumb-checked-hue);
+    }
   }
 }
 
@@ -34,36 +32,35 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  // Color hues based on the specs, which prescribe different hues for dark and light themes
-  // https://material.google.com/components/selection-controls.html#selection-controls-switch
-  $thumb-normal-hue: if($is-dark, 400, 50);
-  $thumb-checked-hue: if($is-dark, 200, 500);
+  // Color hues are based on the specs which briefly show the hues that are applied to a switch.
+  // The 2018 specs no longer describe how dark switches should look like. Due to the lack of
+  // information for dark themed switches, we keep the old behavior that is based on the previous
+  // specifications. See: https://material.io/design/components/selection-controls.html#specs
+  $thumb-unchecked-hue: if($is-dark, 400, 50);
+  $thumb-checked-hue: if($is-dark, 200, default);
   $thumb-disabled-hue: if($is-dark, 800, 400);
 
-  $bar-normal-color: mat-color($foreground, disabled);
+  $bar-unchecked-color: mat-color($foreground, disabled);
   $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));
 
-  // Ripple colors are based on the current palette and the state of the slide-toggle.
-  // See https://material.google.com/components/selection-controls.html#selection-controls-switch
   $ripple-unchecked-color: mat-color($foreground, base);
-  $ripple-primary-color: mat-color($primary, $thumb-checked-hue);
-  $ripple-accent-color: mat-color($accent, $thumb-checked-hue);
-  $ripple-warn-color: mat-color($warn, $thumb-checked-hue);
 
   .mat-slide-toggle {
     @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
-    @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);
 
     &.mat-primary {
       @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
-      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
     }
 
     &.mat-warn {
       @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
-      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
     }
 
+    &:not(.mat-checked) .mat-ripple-element {
+      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
+      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
+      background-color: $ripple-unchecked-color;
+    }
   }
 
   .mat-disabled {
@@ -79,11 +76,11 @@
   }
 
   .mat-slide-toggle-thumb {
-    background-color: mat-color($mat-grey, $thumb-normal-hue);
+    background-color: mat-color($mat-grey, $thumb-unchecked-hue);
   }
 
   .mat-slide-toggle-bar {
-    background-color: $bar-normal-color;
+    background-color: $bar-unchecked-color;
   }
 }