Merge pull request #43 from uswds/jm-runthru-edits

Extend: Additional copy edits

Author: thisisdano

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

@@ -18,7 +18,7 @@ <h3 class="step">Customize border settings.</h3>
     Let's start with the card border. We'll remove the border and make the card rounder by increasing the border radius.
   </p>
   <p class="step-description">
-    We want to give our card a border radius of 2 units. To do that we'll set the value of the border radius to <strong>lg</strong> then set the value of the large border radius to 2.
+    We want to give our card a border radius of 2 units. To do that we'll set the value of the global border radius to <strong>lg</strong> then set the value of the large border radius to 2.
   </p>
   <div class="editor">
     <h4 class="filename"><span class="material-icons" aria-hidden="true">description</span> _theme/_uswds-theme.scss</h4>

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

@@ -22,13 +22,13 @@ <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> _includes/testimonial.html</h4>
-<pre class="blur">&lt;div class="my-testimonial"&gt;</pre>
-  <pre class="add">  &lt;div class="my-testimonial__body"&gt;
-    &lt;p&gt;
+<pre class="blur">&lt;div class="my-testimonial"&gt;
+  &lt;div class="my-testimonial__body"&gt;</pre>
+  <pre class="add">    &lt;p&gt;
       “One of the best USWDS tutorials I’ve followed all the way to the end.”
-    &lt;/p&gt;
-  &lt;/div&gt;</pre>
-<pre class="blur">  &lt;div class="my-testimonial__footer"&gt;&lt;/div&gt;
+    &lt;/p&gt;</pre>
+<pre class="blur">   &lt;/div&gt;
+  &lt;div class="my-testimonial__footer"&gt;&lt;/div&gt;
 &lt;/div&gt;
 </pre>
   </div>
@@ -46,7 +46,9 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
       &lt;p class="my-testimonial__profile-title"&gt;Participant&lt;/p&gt;
     &lt;/div&gt;
 </pre>
-<pre class="blur">&lt;/div&gt;</pre>
+<pre class="blur">  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
   </div>
   <p class="step-description">
     Lastly, let's add a quotation icon for some visual flare! Visit the <a href="https://designsystem.digital.gov/components/icon/">Icon component</a> page, search for <strong>quote</strong>, and click the search result to copy the icons markup. Paste this markup directly after the opening <strong>my-testimonial</strong> div.
@@ -106,15 +108,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 "../_theme/components/_my-card.scss";
-</pre><pre class="add">@forward "../_theme/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 *;
 
@@ -147,7 +149,7 @@ <h4 class="filename"><span class="material-icons" aria-hidden="true">description
 }
 
 .my-testimonial__profile {
-  margin-left: units(3)
+  margin-left: units(3);
 }
 
 .my-testimonial__profile-title {
@@ -165,7 +167,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>
@@ -194,7 +196,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);
@@ -212,7 +214,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);
@@ -234,7 +236,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);
@@ -249,7 +251,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

@@ -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 "../_theme/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");
 }

assets/css/styles.scss

@@ -45,12 +45,12 @@
   }
 }
 
-:where(html) { 
+:where(html) {
   color: var(--text-2);
   background-color: var(--surface-1);
 }
 
-:where(h1, h2, h3, h4, h5, h6, dt) { 
+:where(h1, h2, h3, h4, h5, h6, dt) {
   color: var(--text-1);
 }
 
@@ -103,7 +103,7 @@
   }
 }
 
-:where(body) { 
+:where(body) {
   min-block-size: 100%;
   scrollbar-gutter: stable both-edges;
 }
@@ -113,13 +113,13 @@
   font-weight: var(--font-weight-9);
 }
 
-:is(h1) { 
-  font-size: var(--font-size-8); 
-  max-inline-size: var(--size-header-1); 
+:is(h1) {
+  font-size: var(--font-size-8);
+  max-inline-size: var(--size-header-1);
 }
 
-:is(h2) { 
-  font-size: var(--font-size-6); 
+:is(h2) {
+  font-size: var(--font-size-6);
   max-inline-size: var(--size-header-2);
 }
 
@@ -210,10 +210,10 @@
 :is(code, kbd, samp, pre) { font-family: var(--font-mono) }
 :where(:not(pre) > code, kbd) { white-space: nowrap }
 
-:is(pre) { 
+:is(pre) {
   white-space: pre;
   min-inline-size: 0;
-  max-inline-size: max-content; 
+  max-inline-size: max-content;
 }
 
 :where(:not(pre) > code) {
@@ -244,8 +244,8 @@
   margin-block-start: var(--size-5);
 }
 
-:where(small) { 
-  font-size: max(.5em, var(--font-size-0)); 
+:where(small) {
+  font-size: max(.5em, var(--font-size-0));
   max-inline-size: var(--size-content-1);
 }
 
@@ -442,6 +442,7 @@ main  .part.intro {
 }
 
 .part.intro > h1 {
+  color: white;
   padding-top: var(--size-7)
 }
 
@@ -581,7 +582,7 @@ main p a:active {
   padding-top: var(--size-2);
 }
 
-.terminal, 
+.terminal,
 .editor {
   font-size: var(--font-size-3);
   padding: var(--size-3);
@@ -752,4 +753,4 @@ a.contents-item:hover {
 
 .contents-item .material-icons {
   margin-left: var(--size-1);
-}
+}