docs(material/card): add each appearance example

update the example to contain `elevated`, `outlined` &  `filled` variants

Author: naaajii

src/components-examples/material/card/card-overview/card-overview-example.html

@@ -1,3 +1,11 @@
+<mat-card>
+  <mat-card-content>Elevated</mat-card-content>
+</mat-card>
+
 <mat-card appearance="outlined">
-  <mat-card-content>Simple card</mat-card-content>
+  <mat-card-content>Outlined</mat-card-content>
 </mat-card>
+
+<mat-card appearance="filled">
+  <mat-card-content>Filled</mat-card-content>
+</mat-card>

src/dev-app/card/BUILD.bazel

@@ -12,7 +12,7 @@ ng_module(
     deps = [
         "//src/material/button",
         "//src/material/card",
-        "//src/material/checkbox",
+        "//src/material/radio",
     ],
 )
 

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

@@ -1,5 +1,9 @@
 <div class="demo-card-container">
-  <mat-checkbox (change)="toggleAppearance()">Use outlined cards</mat-checkbox>
+  <mat-radio-group (change)="appearance = $event.value">
+    <mat-radio-button value="raised">Raised</mat-radio-button>
+    <mat-radio-button value="outlined">Outlined</mat-radio-button>
+    <mat-radio-button value="filled">Filled</mat-radio-button>
+  </mat-radio-group>
 
 <!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
   <mat-card [appearance]="appearance">

src/dev-app/card/card-demo.scss

@@ -16,3 +16,7 @@
     text-transform: uppercase;
   }
 }
+
+mat-radio-group {
+  margin-bottom: 10px;
+}

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

@@ -10,15 +10,15 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardAppearance, MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatRadioModule} from '@angular/material/radio';
 
 @Component({
   selector: 'card-demo',
   templateUrl: 'card-demo.html',
   styleUrl: 'card-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
+  imports: [MatCardModule, MatButtonModule, MatRadioModule, FormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardDemo {
@@ -29,7 +29,4 @@ export class CardDemo {
               As of some one gently rapping, rapping at my chamber door.
               “’Tis some visitor,” I muttered, “tapping at my chamber door—
               Only this and nothing more.”`;
-  toggleAppearance() {
-    this.appearance = this.appearance == 'raised' ? 'outlined' : 'raised';
-  }
 }

src/material/card/_card-theme.scss

@@ -98,10 +98,6 @@
         tokens-mdc-outlined-card.$prefix,
         tokens-mdc-outlined-card.get-density-tokens($theme)
       );
-      @include token-utils.create-token-values(
-        tokens-mdc-outlined-card.$prefix,
-        tokens-mdc-outlined-card.get-density-tokens($theme)
-      );
       @include token-utils.create-token-values(
         tokens-mdc-filled-card.$prefix,
         tokens-mdc-filled-card.get-density-tokens($theme)
@@ -134,7 +130,7 @@
     (
       namespace: tokens-mdc-filled-card.$prefix,
       tokens: tokens-mdc-filled-card.get-token-slots(),
-      prefix: 'outlined-',
+      prefix: 'filled-',
     )
   );
 }