fix(material-experimental/mdc-card): not handling dark themes (#18938)

Fixes some variables for the MDC-based card not being set up to handle the theme colors properly. Also makes it easier to test outlined cards in the dev app.

(cherry picked from commit 1c8a2c9)

Author: crisbeto

src/dev-app/mdc-card/BUILD.bazel

@@ -12,6 +12,7 @@ ng_module(
     deps = [
         "//src/material-experimental/mdc-button",
         "//src/material-experimental/mdc-card",
+        "//src/material-experimental/mdc-checkbox",
         "@npm//@angular/router",
     ],
 )

src/dev-app/mdc-card/mdc-card-demo-module.ts

@@ -7,15 +7,19 @@
  */
 
 import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 import {MatCardModule} from '@angular/material-experimental/mdc-card';
 import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
 import {RouterModule} from '@angular/router';
 import {MdcCardDemo} from './mdc-card-demo';
 
 @NgModule({
   imports: [
     MatCardModule,
     MatButtonModule,
+    MatCheckboxModule,
+    FormsModule,
     RouterModule.forChild([{path: '', component: MdcCardDemo}]),
   ],
   declarations: [MdcCardDemo],

src/dev-app/mdc-card/mdc-card-demo.html

@@ -1,18 +1,18 @@
 <div class="demo-card-container">
+  <mat-checkbox [(ngModel)]="outlined">Use outlined cards</mat-checkbox>
 
 <!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
-
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     Card with only text content
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-content>
       Card with only <code>&lt;mat-card-content&gt;</code> and text content.
     </mat-card-content>
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-subtitle>Subtitle</mat-card-subtitle>
     <mat-card-title>Card with title and footer</mat-card-title>
     <mat-card-content>
@@ -25,7 +25,7 @@
     </mat-card-actions>
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-subtitle>Subtitle</mat-card-subtitle>
     <mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
     <mat-card-content>
@@ -39,7 +39,7 @@
 
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
     <mat-card-title>Content Title</mat-card-title>
     <mat-card-content>
@@ -51,7 +51,7 @@
     </mat-card-actions>
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-header>
       <img mat-card-avatar>
       <mat-card-title>Header title</mat-card-title>
@@ -63,7 +63,7 @@
     </mat-card-content>
   </mat-card>
 
-  <mat-card class="demo-card-blue mat-card-flat">
+  <mat-card class="demo-card-blue mat-card-flat" [class.mdc-card--outlined]="outlined">
     <mat-card-title>Easily customizable</mat-card-title>
     <mat-card-actions>
       <button mat-button>First</button>
@@ -74,7 +74,7 @@
   <hr>
   <h2>Cards with media area</h2>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Small</mat-card-subtitle>
@@ -85,7 +85,7 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Medium</mat-card-subtitle>
@@ -96,7 +96,7 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Large</mat-card-subtitle>
@@ -107,7 +107,7 @@ <h2>Cards with media area</h2>
     </mat-card-content>
   </mat-card>
 
-  <mat-card>
+  <mat-card [class.mdc-card--outlined]="outlined">
     <mat-card-title-group>
       <mat-card-title>Card</mat-card-title>
       <mat-card-subtitle>Extra large</mat-card-subtitle>

src/dev-app/mdc-card/mdc-card-demo.ts

@@ -15,6 +15,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
   encapsulation: ViewEncapsulation.None,
 })
 export class MdcCardDemo {
+  outlined = false;
   longText = `Once upon a midnight dreary, while I pondered, weak and weary,
               Over many a quaint and curious volume of forgotten lore—
               While I nodded, nearly napping, suddenly there came a tapping,

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

@@ -1,12 +1,22 @@
 @import '@material/card/mixins.import';
+@import '@material/theme/functions.import';
+@import '@material/card/variables.import';
 @import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-mdc-card-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
+  $orig-mdc-card-action-icon-color: $mdc-card-action-icon-color;
+  $orig-mdc-card-outline-color: $mdc-card-outline-color;
+
   @include mat-using-mdc-theme($theme) {
+    $mdc-card-action-icon-color:
+        rgba(mdc-theme-prop-value(on-surface), mdc-theme-text-emphasis(medium)) !global;
+    $mdc-card-outline-color:
+        mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !global;
+
     @include mdc-card-without-ripple($query: $mat-theme-styles-query);
 
     // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their
@@ -15,6 +25,9 @@
       color: mat-color($foreground, secondary-text);
     }
   }
+
+  $mdc-card-action-icon-color: $orig-mdc-card-action-icon-color !global;
+  $mdc-card-outline-color: $orig-mdc-card-outline-color !global;
 }
 
 @mixin mat-mdc-card-typography($config) {