fix(card): Rename stroke to outline (#2633)

BREAKING CHANGE: Renames variant, classes and mixins containing the word stroke to use the word outline.

Author: williamernest

demos/card.html

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

demos/shape.html

@@ -88,7 +88,7 @@ <h2 class="mdc-typography--headline4">Stroked</h2>
         <h1 class="mdc-typography--headline3">Card</h1>
 
         <div class="mdc-shape-container card-container">
-          <div class="mdc-card mdc-card--stroked demo-card">
+          <div class="mdc-card mdc-card--outlined demo-card">
             <a class="mdc-card__primary-action demo-card__primary-action" href="#">
               <div class="demo-card__row">
                 <div class="mdc-card__media mdc-card__media--square demo-card__media"></div>

demos/shape.scss

@@ -61,7 +61,7 @@
 
 .card-container {
   @include mdc-shape-angled-corner($mdc-theme-background, 24px, 4px);
-  @include mdc-shape-angled-corner-stroke($mdc-card-stroke-width, $mdc-card-stroke-color);
+  @include mdc-shape-angled-corner-stroke($mdc-card-outline-width, $mdc-card-outline-color);
 }
 
 .demo-card {

packages/mdc-card/README.md

@@ -171,7 +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--outlined` | Removes the shadow and displays a hairline outline instead
 `mdc-card__primary-action` | The main tappable area of the card. Typically contains most (or all) card content _except_ `mdc-card__actions`. Only applicable to cards that have a primary action that the main surface should trigger.
 `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
@@ -190,6 +190,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-outline($color, $thickness)` | Sets the color and thickness of a card's outline (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,7 +24,7 @@
   @include mdc-theme-prop(background-color, $color);
 }
 
-@mixin mdc-card-stroke($color, $thickness: $mdc-card-stroke-width) {
+@mixin mdc-card-outline($color, $thickness: $mdc-card-outline-width) {
   border: $thickness solid mdc-theme-prop-value($color);
 }
 

packages/mdc-card/_variables.scss

@@ -16,5 +16,5 @@
 
 @import "@material/theme/mixins";
 
-$mdc-card-stroke-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
-$mdc-card-stroke-width: 1px;
+$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
+$mdc-card-outline-width: 1px;

packages/mdc-card/mdc-card.scss

@@ -30,9 +30,9 @@
   @include mdc-card-container-layout_;
 }
 
-.mdc-card--stroked {
+.mdc-card--outlined {
   @include mdc-elevation(0);
-  @include mdc-card-stroke($mdc-card-stroke-color);
+  @include mdc-card-outline($mdc-card-outline-color);
 }
 
 //