Merge branch 'mc-start-at-part-two' of github.com:uswds/uswds-tutorial into jm-mc-setup

Author: James Mejia

_includes/card.html

@@ -1,4 +1,4 @@
-<div class="usa-card my-card">
+<div class="usa-card">
   <div class="usa-card__container">
     <div class="usa-card__header">
       <h2 class="usa-card__heading">Card component</h2>

_includes/sxs/02-extending/part-three.html

@@ -147,7 +147,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     Can you spot all the uses of USWDS tokens?
   </p>
 
-  <h3 class="step">Styling the testimonial icon</h3>
+  <h3 class="step">Style the testimonial icon.</h3>
   <p class="step-description">
     USWDS uses variables to maintain consistent styles across different definitions. Let's create a variable for our icon stroke and fill at the top of our stylesheet.
   </p>
@@ -176,7 +176,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 <pre class="blur">}</pre>
   </div>
 
-  <h3 class="step">Using USWDS theme tokens with mixins</h3>
+  <h3 class="step">Using USWDS theme tokens with mixins.</h3>
   <p class="step-description">
     Using a combination of utility mixins and USWDS theme settings can help add uniformity across your project. In this example, we'll add the border settings and padding settings from earlier to help our new component sit nicely with the original card. The <strong>u-margin-x()</strong> mixin lets you set left and right margin at the same time.
   </p>
@@ -194,7 +194,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 }</pre>
   </div>
 
-  <h3 class="step">Color, background, and contrast</h3>
+  <h3 class="step">Adjusting color, background, and contrast.</h3>
   <p class="step-description">
     Finally, let's change the color of our testimonial component. The traditional way to set background and color is to use two separate rules. If we want to use our primary colors in this component, we can use the following two rules:
   </p>

_includes/testimonial.html

@@ -1,17 +0,0 @@
-<div class="my-testimonial">
-  <svg class="usa-icon my-testimonial__icon" aria-hidden="true" focusable="false" role="img" height="50px" width="50px">
-    <use xlink:href="/assets/uswds/img/sprite.svg#format_quote"></use>
-  </svg>
-  <div class="my-testimonial__body">
-    <p>
-      “One of the best USWDS tutorials I’ve followed all the way to the end.”
-    </p>
-  </div>
-  <div class="my-testimonial__footer">
-    <img src="https://doodleipsum.com/100x100/avatar-5?bg=a5a8eb&shape=circle&n=1" alt="Profile pic">
-    <div class="my-testimonial__profile">
-      <p class="my-testimonial__profile-name">J. Fakename</p>
-      <p class="my-testimonial__profile-title">Participant</p>
-    </div>
-  </div>
-</div>

_theme/_uswds-theme-custom-styles.scss

@@ -22,8 +22,6 @@ i.e.
 
 @use "uswds-core" as *;
 @forward "../assets/css/styles.scss";
-@forward "../assets/css/components/_my-card.scss";
-@forward "../assets/css/components/_my-testimonial.scss";
 
 :root {
    --blue-2: #{color("blue-warm-20v")};

_theme/_uswds-theme.scss

@@ -15,17 +15,4 @@ in the form $setting: value,
   $theme-banner-link-color: "indigo-30",
   $theme-banner-max-width: none,
   $theme-identifier-max-width: none,
-  
-  $theme-border-radius-lg: 2,
-  $theme-card-border-radius: "lg",
-  $theme-card-border-width: 0,
-  $theme-card-font-family: "sans",
-  $theme-card-header-typeset: ("sans", "xl", 2),
-  $theme-card-padding-perimeter: 4,
-
-  $theme-color-primary-lighter: "indigo-20v",
-  $theme-color-primary-light: "indigo-40v",
-  $theme-color-primary: "indigo-60v",
-  $theme-color-primary-dark: "indigo-70v",
-  $theme-color-primary-darker: "indigo-80v",
 );

_theme/styles.scss

@@ -5,7 +5,6 @@
 @forward "uswds-utilities";
 @forward "uswds-theme-custom-styles";
 
-
 // Needed for part 2
 @forward "usa-button";
 @forward "usa-card";