fix: reduce amount of generated high contrast styles (#18332)

Since we know that all of our components have encapsulation turned off, we can pass in the encapsulation parameter to the `cdk-high-contrast` mixin and avoid having to output the styles twice.

(cherry picked from commit 05f59b3)

Author: crisbeto

src/material-experimental/mdc-button/button.scss

@@ -12,7 +12,7 @@
 
   // Add an outline to make buttons more visible in high contrast mode. Stroked buttons
   // don't need a special look in high-contrast mode, because those already have an outline.
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     &:not(.mdc-button--outlined) {
       outline: solid 1px;
     }

src/material-experimental/mdc-card/card.scss

@@ -16,7 +16,7 @@ $mat-card-default-padding: 16px !default;
 // Add styles to the root card to have an outline in high-contrast mode.
 // TODO(jelbourn): file bug for MDC supporting high-contrast mode on `.mdc-card`.
 .mat-mdc-card {
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     outline: solid 1px;
   }
 }

src/material-experimental/mdc-chips/chips.scss

@@ -16,7 +16,7 @@
   // Required for the ripple to clip properly in Safari.
   transform: translateZ(0);
 
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     outline: solid 1px;
 
     &:focus {
@@ -73,7 +73,7 @@ input.mat-mdc-chip-input {
 }
 
 .mdc-chip__checkmark-path {
-  @include cdk-high-contrast(black-on-white) {
+  @include cdk-high-contrast(black-on-white, off) {
     // SVG colors won't be changed in high contrast mode and since the checkmark is white
     // by default, it'll blend in with the background in black-on-white mode. Override the color
     // to ensure that it's visible. We need !important, because the theme styles are very specific.

src/material-experimental/mdc-menu/menu.scss

@@ -23,7 +23,7 @@
   // The CDK positioning uses flexbox to anchor the element, whereas MDC uses `position: absolute`.
   position: static;
 
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     outline: solid 1px;
   }
 }
@@ -75,7 +75,7 @@
     }
   }
 
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     &.cdk-program-focused,
     &.cdk-keyboard-focused,
     &-highlighted {

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

@@ -55,7 +55,7 @@
 }
 
 
-@include cdk-high-contrast {
+@include cdk-high-contrast(active, off) {
   .mat-mdc-slide-toggle-focused {
     .mdc-switch__track {
       // Usually 1px would be enough, but MDC reduces the opacity on the

src/material-experimental/mdc-slider/slider.scss

@@ -26,7 +26,7 @@ $mat-slider-horizontal-margin: 8px !default;
   width: auto;
   min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
 
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     // The slider track isn't visible in high contrast mode so we work
     // around it by setting an outline and removing the height to make it look solid.
     .mdc-slider__track-container {

src/material-experimental/popover-edit/_popover-edit.scss

@@ -81,7 +81,7 @@
     display: block;
     padding: 16px 24px;
 
-    @include cdk-high-contrast {
+    @include cdk-high-contrast(active, off) {
       // Note that normally we use 1px for high contrast outline, however here we use 3,
       // because the popover is rendered on top of a table which already has some borders
       // and doesn't have a backdrop. The thicker outline makes it easier to differentiate.

src/material/autocomplete/autocomplete.scss

@@ -38,7 +38,7 @@ $mat-autocomplete-panel-border-radius: 4px !default;
     margin-top: -1px;
   }
 
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     outline: solid 1px;
   }
 }

src/material/badge/_badge-theme.scss

@@ -98,7 +98,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     color: mat-color($primary, default-contrast);
     background: mat-color($primary);
 
-    @include cdk-high-contrast {
+    @include cdk-high-contrast(active, off) {
       outline: solid 1px;
       border-radius: 0;
     }

src/material/bottom-sheet/bottom-sheet-container.scss

@@ -17,7 +17,7 @@ $mat-bottom-sheet-container-horizontal-padding: 16px !default;
   max-height: 80vh;
   overflow: auto;
 
-  @include cdk-high-contrast {
+  @include cdk-high-contrast(active, off) {
     outline: 1px solid;
   }
 }