feat(card): Add --stroked variant and mdc-card-stroke mixin (#2035)

Fixes #1708

demos/card.html

@@ -99,7 +99,7 @@ <h3 class="demo-card__subtitle mdc-typography--subheading1">by Kurt Wagner</h3>
       </section>
 
       <section class="demo-card-collection">
-        <div class="mdc-card demo-card">
+        <div class="mdc-card mdc-card--stroked demo-card">
           <div class="demo-card-article-group-heading mdc-typography--subheading2">Headlines</div>
 
           <hr class="mdc-list-divider">

packages/mdc-card/README.md

@@ -171,6 +171,7 @@ elements:
 CSS Class | Description
 --- | ---
 `mdc-card` | Mandatory, for the card element
+`mdc-card--stroked` | Removes the shadow and displays a hairline stroke instead
 `mdc-card__media` | Media area that displays a custom `background-image` with `background-size: cover`
 `mdc-card__media--square` | Automatically scales the media area's height to equal its width
 `mdc-card__media--16-9` | Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio
@@ -188,5 +189,6 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-card-fill-color($color)` | Sets the fill color of a card
+`mdc-card-stroke($color, $thickness)` | Sets the color and thickness of a card's stroke (but does _not_ remove its shadow)
 `mdc-card-corner-radius($radius)` | Sets the corner radius of a card
 `mdc-card-media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width

packages/mdc-card/_mixins.scss

@@ -24,6 +24,10 @@
   @include mdc-theme-prop(background-color, $color);
 }
 
+@mixin mdc-card-stroke($color, $thickness: 1px) {
+  border: $thickness solid mdc-theme-prop-value($color);
+}
+
 @mixin mdc-card-corner-radius($radius) {
   border-radius: $radius;
 }

packages/mdc-card/mdc-card.scss

@@ -33,6 +33,14 @@
   box-sizing: border-box;
 }
 
+.mdc-card--stroked {
+  $fill-color: mdc-theme-prop-value(background);
+  $stroke-color: mdc-theme-dark-variant($fill-color, 1);
+
+  @include mdc-elevation(0);
+  @include mdc-card-stroke($stroke-color);
+}
+
 //
 // Media
 //