edits to design docs to match UX1

package.json

@@ -59,8 +59,8 @@
     "@angular/platform-browser": "4.2.5",
     "@angular/platform-browser-dynamic": "4.2.5",
     "@angular/router": "4.2.5",
-    "@blackbaud/skyux": ">=2.0.0-rc.0 <2.0.0",
-    "@blackbaud/skyux-builder": "1.0.0-rc.15",
+    "@blackbaud/skyux": "2.0.0",
+    "@blackbaud/skyux-builder": "1.0.0-rc.19",
     "@blackbaud/skyux-design-tokens": "0.0.8",
     "@blackbaud/stache": "2.0.0-rc.2",
     "@types/core-js": "0.9.41",

skyux-spa-visual-tests/package.json

@@ -20,8 +20,8 @@
   "license": "ISC",
   "devDependencies": {
     "@angular/animations": "4.2.5",
-    "@blackbaud/skyux": ">=2.0.0-rc.0 <2.0.0",
-    "@blackbaud/skyux-builder": "1.0.0-rc.15",
+    "@blackbaud/skyux": "2.0.0",
+    "@blackbaud/skyux-builder": "1.0.0-rc.19",
     "enhanced-resolve": "3.3.0",
     "codelyzer": "3.0.1",
     "moment": "2.18.1",

src/app/design/borders/index.html

@@ -17,8 +17,7 @@ <h2 class="sky-section-heading" id="generic-lines">Line styles</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>The light separator is a very light gray, single-pixel line that subdivides content within a container. Do not use it at the edge of a container. Only use it when it is adjacent to white space on both sides.</div>
-        <p>SKY UX uses this style for:</p>
+        <div>The light separator is a very light gray, single-pixel line that subdivides content within a container. Do not use it at the edge of a container. Only use it when it is adjacent to white space on both sides. SKY UX uses this style for:</div>
         <ul>
           <li>Subsection dividers within containers such as <a routerLink="../../components/tiles">tiles</a></li>
           <li>Top boundaries for action bars on <a routerLink="../../components/modal">modals</a></li>
@@ -45,8 +44,7 @@ <h2 class="sky-section-heading" id="generic-lines">Line styles</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>The dark separator is a moderate gray, single-pixel line. This heavier stroke holds up between two different colors, which makes it ideal for borders and boundaries. It also frequently separates active content from passive content. For example, it can separate a toolbar from the content that the toolbar acts on.</div>
-            <p>SKY UX uses this style for:</p>
+        <div>The dark separator is a moderate gray, single-pixel line. This heavier stroke holds up between two different colors, which makes it ideal for borders and boundaries. It also frequently separates active content from passive content. For example, it can separate a toolbar from the content that the toolbar acts on. SKY UX uses this style for:</div>
             <ul>
               <li>Borders on <a routerLink="../../components/button">buttons</a></li>
               <li>Top and bottom boundaries for toolbars in areas such as <a routerLink="../../components/tiles">tiles</a> and <a routerLink="../../components/grid">grids</a></li>
@@ -88,7 +86,7 @@ <h2 class="sky-section-heading" id="generic-lines">Line styles</h2>
 
 <h2 class="sky-section-heading" id="corners">Corners</h2>
 
-<p>In general, the style of corners should be handled by the component. If you need to directly specify the corners of an element, the rule of thumb is to use rounded corners for interactive elements and square corners for containers.</p>
+<p>In general, the component should handle the style of corners. If you need to directly specify the corners of an element, the rule of thumb is to use rounded corners for interactive elements and square corners for containers.</p>
 
   <div class="definition-table definition-table-wide">
     <div class="definition-item">
@@ -97,7 +95,7 @@ <h2 class="sky-section-heading" id="corners">Corners</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Rounded corners are primarily for interactive elements such as <a routerLink="../../components/button">buttons</a> to convey a distinction from non-interactive elements.</div>
+        <div>Rounded corners are primarily for interactive elements such as <a routerLink="../../components/button">buttons</a> to distinguish them from non-interactive elements.</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -112,7 +110,7 @@ <h2 class="sky-section-heading" id="corners">Corners</h2>
 
 <h2 class="sky-section-heading" id="shadows">Shadows</h2>
 
-<p>In general, the use of shadows should be handled by the component. Specific interface designs should be flat aside from these components, using other techniques to create visual separation.</p>
+<p>In general, the component should handle the use of shadows. Interface designs should be flat aside from these components and use other techniques to create visual separation.</p>
 
   <div class="definition-table definition-table-wide">
     <div class="definition-item">

src/app/design/color/index.html

@@ -121,7 +121,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background elements that need contrast with containers they hold, such as a record page made up of tiles</div>
+        <div>Background for elements that need to contrast with the containers they hold, such as a record page made up of tiles</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -141,7 +141,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for elements used to invoke primary actions, such as a primary button</div>
+        <div>Background for elements that invoke primary actions, such as a primary button</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -201,7 +201,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for elements conveying an "information" status, such as alerts, labels and toasts</div>
+        <div>Background for elements that convey an "information" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -221,7 +221,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for less important elements conveying an "information" status, such as applied filter bubbles</div>
+        <div>Background for less important elements that convey an "information" status, such as applied filter bubbles</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -241,7 +241,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for elements conveying an "success" status, such as alerts, labels and toasts</div>
+        <div>Background for elements that convey a "success" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -261,7 +261,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for elements conveying an "warning" status, such as alerts, labels and toasts</div>
+        <div>Background for elements that convey a "warning" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -281,7 +281,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for elements conveying an "danger" status, such as alerts, labels and toasts</div>
+        <div>Background for elements that convey a "danger" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -301,7 +301,7 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Background for buttons that invoke a destructive action</div>
+        <div>Background for buttons that invoke a primary action that is destructive, such as deleting an item</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -323,7 +323,7 @@ <h2 class="sky-section-heading">Highlights</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Highlight for elements conveying an "information" status, such as alerts and toasts</div>
+        <div>Highlight for elements that convey an "information" status, such as alerts, labels and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -343,7 +343,7 @@ <h2 class="sky-section-heading">Highlights</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Highlight for elements conveying an "success" status, such as alerts and toasts</div>
+        <div>Highlight for elements that convey a "success" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -363,7 +363,7 @@ <h2 class="sky-section-heading">Highlights</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Highlight for elements conveying an "warning" status, such as alerts, labels and toasts</div>
+        <div>Highlight for elements that convey a "warning" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -383,7 +383,7 @@ <h2 class="sky-section-heading">Highlights</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Highlight for elements conveying an "danger" status, such as alerts, labels and toasts</div>
+        <div>Highlight for elements that convey a "danger" status, such as alerts, labels, and toasts</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -405,7 +405,7 @@ <h2 class="sky-section-heading">Borders</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Borders separating sections of content within a container</div>
+        <div>Borders that separate sections of content within a container</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>
@@ -425,7 +425,7 @@ <h2 class="sky-section-heading">Borders</h2>
     <div class="definition-props">
       <div class="definition-usage">
         <div class="sky-field-label">Usage</div>
-        <div>Borders separating containers from their surroundings, or separating sections of active elements such as a toolbar from the contents of the container</div>
+        <div>Borders that separate containers from their surroundings or that separate sections of active elements from the contents of a container such as separating a toolbar from a list of records</div>
       </div>
       <div class="definition-code">
         <div class="sky-field-label">Code</div>

src/app/design/typography/index.html

@@ -4,7 +4,7 @@
   pageTitle="Typography"
   windowTitle="Typography">
 
-  <stache-page-summary>SKY UX supports a set of semantically defined classes for text to ensure consistent usage and to maintain visual hierarchy of type. Components will generally incorporate text classes as necessary, although you may find cases where you need to apply these classes directly.</stache-page-summary>
+  <stache-page-summary>SKY UX supports a set of semantically defined classes for text to ensure consistent usage and to maintain visual hierarchy of type. Components generally incorporate text classes as necessary, but you may find cases where you need to apply classes directly.</stache-page-summary>
 
   <p>The SKY UX font system is based on the Blackbaud Sans typeface.</p>