update variable names

Signed-off-by: Micah Chiang <[email protected]>

src/_components/button/index.md

@@ -91,7 +91,7 @@ anchors:
 This variation substitutes the large tap target of a button where a radio button would traditionally be used. This serves a similar purpose to the [USWDS Tile variation of a Radio button](https://designsystem.digital.gov/components/radio-buttons/). 
 
 * **Limit to Yes/No.** This variation should be limited to Yes/No questions rather than used as a substitute for radio buttons which can more readily handle 3 or more responses.
-* **Reflect selections.** The response of the user must change the button from a secondary button to a ```$color-primary-dark``` background in order to reflect the state of the user's response.
+* **Reflect selections.** The response of the user must change the button from a secondary button to a ```$vads-color-primary-dark``` background in order to reflect the state of the user's response.
 
 {% include component-example.html alt="Example of the secondary button as radio button substitution." file="/images/components/button/button-as-radio.png" caption="The COVID-19 Screener uses secondary buttons instead of radio buttons for Yes/No questions." %}
 

src/assets/stylesheets/_components/_code-snippets.scss

@@ -13,7 +13,7 @@
 
   &:hover {
     background-color: white;
-    color: $color-primary-dark;
+    color: $vads-color-primary-dark;
     text-decoration: none;
   }
 }

src/assets/stylesheets/_components/_footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-  background: $color-primary-darker;
+  background: $vads-color-primary-darker;
   color: white;
 
   a {

src/assets/stylesheets/_components/_header.scss

@@ -1,6 +1,6 @@
 .site-header {
   color: #fff;
-  background-color: $color-primary-darker;
+  background-color: $vads-color-primary-darker;
 }
 
 .site-header .site-l-wrapper {
@@ -26,12 +26,12 @@
 
 .usa-button.site-button-inverse {
   background-color: #ffffff;
-  color: $color-primary-dark;
+  color: $vads-color-primary-dark;
 
   &:active,
   &:hover {
     background-color: rgba(255,255,255,.8);
-    color: $color-primary-dark;
+    color: $vads-color-primary-dark;
   }
 }
 
@@ -83,7 +83,7 @@
 
 .site-top-nav-wrapper {
   display: none;
-  background-color: $color-primary-darker;
+  background-color: $vads-color-primary-darker;
 
   @include media($nav-width) {
     display: block;

src/assets/stylesheets/_components/_link.scss

@@ -1,5 +1,5 @@
 .site-link-active {
   background: rgba(0,0,0,.05);  
-  color: $color-primary-dark;
+  color: $vads-color-primary-dark;
   outline: 0;
 }

src/assets/stylesheets/_components/_search-results.scss

@@ -75,8 +75,8 @@
 
 .site-seach-container--mobile {
   display: none;
-  border-top: 1px solid $color-primary-dark;
-  background: $color-primary-darker;
+  border-top: 1px solid $vads-color-primary-dark;
+  background: $vads-color-primary-darker;
   width: 100%;
   margin: -3px 0 -3px;
   padding: units(2);

src/assets/stylesheets/application.scss

@@ -120,9 +120,9 @@ backwards compatibility. When Formation has been fully deprecated and we are on
 these can be removed along with an update to how classes are generated in color-palette-example.html. 
 */
 .vads-u-background-color--primary-dark {
-  background-color: $color-primary-dark !important;
+  background-color: $vads-color-primary-dark !important;
 }
 
 .vads-u-background-color--primary-darker {
-  background-color: $color-primary-darker !important;
+  background-color: $vads-color-primary-darker !important;
 }