From 3c0b73a9c3f7a9c12a6650556aa6d5e9d95831fd Mon Sep 17 00:00:00 2001 From: Micah Chiang Date: Thu, 11 Jul 2024 16:49:17 -0700 Subject: [PATCH] update variable names Signed-off-by: Micah Chiang --- src/_components/button/index.md | 2 +- src/assets/stylesheets/_components/_code-snippets.scss | 2 +- src/assets/stylesheets/_components/_footer.scss | 2 +- src/assets/stylesheets/_components/_header.scss | 8 ++++---- src/assets/stylesheets/_components/_link.scss | 2 +- src/assets/stylesheets/_components/_search-results.scss | 4 ++-- src/assets/stylesheets/application.scss | 4 ++-- 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/_components/button/index.md b/src/_components/button/index.md index 2668bcdb1..29493f4f4 100644 --- a/src/_components/button/index.md +++ b/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." %} diff --git a/src/assets/stylesheets/_components/_code-snippets.scss b/src/assets/stylesheets/_components/_code-snippets.scss index e8c07bd67..a801029c8 100644 --- a/src/assets/stylesheets/_components/_code-snippets.scss +++ b/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; } } diff --git a/src/assets/stylesheets/_components/_footer.scss b/src/assets/stylesheets/_components/_footer.scss index 7a296509f..73c59866a 100644 --- a/src/assets/stylesheets/_components/_footer.scss +++ b/src/assets/stylesheets/_components/_footer.scss @@ -1,5 +1,5 @@ .site-footer { - background: $color-primary-darker; + background: $vads-color-primary-darker; color: white; a { diff --git a/src/assets/stylesheets/_components/_header.scss b/src/assets/stylesheets/_components/_header.scss index 6f40f4fc3..58da905cb 100644 --- a/src/assets/stylesheets/_components/_header.scss +++ b/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; diff --git a/src/assets/stylesheets/_components/_link.scss b/src/assets/stylesheets/_components/_link.scss index 6d598b0e0..da09cf333 100644 --- a/src/assets/stylesheets/_components/_link.scss +++ b/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; } \ No newline at end of file diff --git a/src/assets/stylesheets/_components/_search-results.scss b/src/assets/stylesheets/_components/_search-results.scss index 0ded117cd..9346886e2 100644 --- a/src/assets/stylesheets/_components/_search-results.scss +++ b/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); diff --git a/src/assets/stylesheets/application.scss b/src/assets/stylesheets/application.scss index 2be0f3fdc..53bed42ff 100644 --- a/src/assets/stylesheets/application.scss +++ b/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; }