Update references to _theme/components in file names

Author: mahoneycm

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

@@ -86,7 +86,7 @@ <h3 class="step">Add stylesheet partial.</h3>
     Create a new stylesheet partial for our new component by entering the following in the free terminal window:
   </p>
   <div class="terminal">
-    <pre>touch assets/css/components/_my-testimonial.scss</pre>
+    <pre>touch _theme/components/_my-testimonial.scss</pre>
   </div>
   <p class="step-description">
     And then we'll import this new stylesheet into our USWDS custom styles.
@@ -95,15 +95,15 @@ <h3 class="step">Add stylesheet partial.</h3>
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
 @forward "../assets/css/styles.scss";
-@forward "/components/_my-card.scss";
-</pre><pre class="add">@forward "/components/_my-testimonial.scss";</pre>
+@forward "components/_my-card.scss";
+</pre><pre class="add">@forward "components/_my-testimonial.scss";</pre>
   </div>
   <h3 class="step">Start styling the component.</h3>
   <p class="step-description">
     Just like using the <strong>color()</strong> function to use USWDS color tokens, we can use <strong>units()</strong> and other token functions to use tokens in native CSS properties. To get our base styles for our new component, add the following styles to the new stylesheet:
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-testimonial.scss</h4>
 <pre class="add">
 @use "uswds-core" as *;
 
@@ -154,7 +154,7 @@ <h3 class="step">Style the testimonial icon.</h3>
     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>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-testimonial.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
 
 </pre>
@@ -183,7 +183,7 @@ <h3 class="step">Using USWDS theme tokens with mixins.</h3>
     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>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-testimonial.scss</h4>
 <pre class="blur">.my-testimonial {</pre>
 <pre class="add">  @include u-border($theme-card-border-width);
   @include u-margin-x(1);
@@ -201,7 +201,7 @@ <h3 class="step">Adjusting color, background, and contrast.</h3>
     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>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-testimonial.scss</h4>
 <pre class="blur">.my-testimonial {
   @include u-border($theme-card-border-width);
   @include u-margin-x(1);
@@ -223,7 +223,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
   </p>
 
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-testimonial.scss</h4>
 <pre class="blur">.my-testimonial {
   @include u-border($theme-card-border-width);
   @include u-margin-x(1);
@@ -238,7 +238,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     This time, when you save and compile you'll see a warning in the terminal. Let's update our code to use <strong>primary-lighter</strong> as our text color.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-testimonial.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-testimonial.scss</h4>
 <pre class="blur">.my-testimonial {
   @include u-border($theme-card-border-width);
   @include u-margin-x(1);

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

@@ -40,7 +40,7 @@ <h3 class="step">Create a custom stylesheet for our custom card component.</h3>
     Now let's add our new <strong>my-card</strong> stylesheet. It's standard naming convention to prefix SCSS partials with an underscore (as we've already seen in <strong>_uswds-theme</strong> and <strong>_uswds-theme-custom-styles</strong>).
   </p>
   <div class="terminal">
-    <pre>touch assets/css/components/_my-card.scss</pre>
+    <pre>touch _theme/components/_my-card.scss</pre>
   </div>
 
   <h3 class="step">Import the new stylesheet into USWDS custom styles.</h3>
@@ -51,7 +51,7 @@ <h3 class="step">Import the new stylesheet into USWDS custom styles.</h3>
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme-custom-styles.scss</h4>
 <pre class="blur">@use "uswds-core" as *;
 @forward "../assets/css/styles.scss";
-</pre><pre class="add">@forward "/components/_my-card.scss";</pre>
+</pre><pre class="add">@forward "components/_my-card.scss";</pre>
   </div>
   <p class="step-description">
     Once you've updated this file, you can save and close it. Since we've added our project Sass source directory to our gulpfile in the first part of the tutorial, it should already be compiling correctly!
@@ -65,7 +65,7 @@ <h3 class="step">Use USWDS core features in custom styles.</h3>
     We'll want to use USWDS design tokens in our stylesheets using USWDS style features like functions and mixins. To do this, lets add <strong>uswds-core</strong> to the top of our new stylesheet with the <strong>use</strong> Sass directive.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-card.scss</h4>
 <pre class="add">@use "uswds-core" as *;</pre>
   </div>
 
@@ -74,7 +74,7 @@ <h3 class="step">Add custom class and styles.</h3>
     Next lets create a custom class for our personalized component and use some USWDS utilities. We'll start by updating the background color of the card. We can use the <a href="https://designsystem.digital.gov/design-tokens/color/system-tokens/#using-color-tokens-2"><strong>color()</strong> function</a> to use color tokens in our CSS rules.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-card.scss</h4>
 <pre class="add">.my-card .usa-card__container {
   background-color: color("yellow-10");
 }</pre>
@@ -83,7 +83,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
     After recompiling we can see our changes have taken effect. Let's refine this card a bit more by reducing the boldness of the header and adding bit more space before the call to action. We'll use <a href="https://designsystem.digital.gov/design-tokens/spacing-units/">units tokens</a> and <a href="https://designsystem.digital.gov/design-tokens/typesetting/font-weight/">font weight tokens</a> for this.
   </p>
   <div class="editor">
-    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> assets/css/components/_my-card.scss</h4>
+    <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/components/_my-card.scss</h4>
 <pre class="blur">.my-card .usa-card__container {
   background-color: color("indigo-70v");
 }