VOTE-2234: add high contrast breadcrumb style (#815)

usagov · Jul 5, 2024 · 896174a · 896174a
1 parent 53f2a9e
commit 896174a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 19 deletions.
diff --git a/web/themes/custom/votegov/src/sass/mixins/mixins.scss b/web/themes/custom/votegov/src/sass/mixins/mixins.scss
@@ -158,16 +158,23 @@
 
 @mixin vote-link-dark {
   @include u-text('underline');
-  color: $base-white;
+  --vote-link--color: #{$base-white};
+  --vote-link-hover--color: #{$ac-cool-light};
+  color: var(--vote-link--color);
+
+  [data-theme="contrast"] & {
+    --vote-link--color: #{$base-white};
+    --vote-link-hover--color: #{$btn-secondary-bg-high-contrast-hover};
+  }
 
   &:visited {
-    color: $base-white;
+    color: var(--vote-link--color);
   }
 
   @include hover {
     @include u-text('underline');
     background-color: transparent;
-    color: $ac-cool-light;
+    color: var(--vote-link-hover--color);
   }
 }
 

diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-breadcrumb.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-breadcrumb.scss
@@ -6,9 +6,7 @@
 }
 
 .usa-breadcrumb__link {
-  .page-masthead & {
-    @include vote-link-dark;
-  }
+  @include vote-link-dark;
 }
 
 // targeting the div wrapping the breadcrumb block and add margin top to the following element

diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-identifier.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-identifier.scss
@@ -5,29 +5,17 @@
 .usa-identifier {
   // Default to USWDS colors
   --usa-identifier-bg: #{color('base-darkest')};
-  --usa-identifier-link: #{color('base-light')};
-  --usa-identifier-link-hover: #{color('base-lighter')};
   background-color: var(--usa-identifier-bg);
 
   [data-theme="contrast"] & {
     --usa-identifier-bg: #{$bg-high-contrast};
-    --usa-identifier-link: #{$base-white};
-    --usa-identifier-link-hover: #{$link-high-contrast-hover-blue};
   }
 }
 
 .usa-identifier__required-link,
 .usa-identifier__required-link.usa-link,
 .usa-identifier__identity-disclaimer a,
 .usa-identifier__container a {
-  color: var(--usa-identifier-link);
-
-  &:visited {
-    color: var(--usa-identifier-link);
-  }
-
-  @include hover {
-    color: var(--usa-identifier-link-hover);
-  }
+  @include vote-link-dark;
 }