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

@@ -15,7 +15,7 @@ ng_project(
         "//:node_modules/@angular/forms",
         "//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,14 +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,
-  imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
+  standalone: true,
+  imports: [MatCardModule, MatButtonModule, MatRadioModule, FormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardDemo {
@@ -28,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,6 +98,10 @@
         tokens-mat-outlined-card.$prefix,
         tokens-mat-outlined-card.get-density-tokens($theme)
       );
+      @include token-utils.create-token-values-mixed(
+        tokens-mat-filled-card.$prefix,
+        tokens-mat-filled-card.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values-mixed(
         tokens-mat-card.$prefix,
         tokens-mat-card.get-density-tokens($theme)
@@ -126,7 +130,7 @@
     (
       namespace: tokens-mat-filled-card.$prefix,
       tokens: tokens-mat-filled-card.get-token-slots(),
-      prefix: 'outlined-',
+      prefix: 'filled-',
     )
   );
 }