VOTE-2082/2083: High contrast styling on basic and state pages

web/themes/custom/votegov/src/sass/_variables.scss

@@ -18,7 +18,10 @@ $bg-light-medium: #D3D3D3; // gray-cool-20 is this just for the horizontal rule?
 $bg-light-cool: #E2EDF2; // blue-warm-10
 $bg-light-warm: #E7E5DD; // hero-background
 
-//High contrast colors
+//High Contrast Colors.
 $bg-high-contrast: #0A0A2A;
-$text-high-contrast: #0A0A2A;
+$text-high-contrast: $bg-high-contrast;
 $link-high-contrast: #0000FF;
+$link-high-contrast-hover: #010156;
+$btn-bg-high-contrast: $link-high-contrast;
+$btn-bg-high-contrast-hover: $link-high-contrast-hover;

web/themes/custom/votegov/src/sass/base/containers.scss

@@ -2,9 +2,14 @@
 @use "variables" as *;
 
 body {
-  color: $base-dark;
+  --body-txt-color: #{$base-dark};
+  color: var(--body-txt-color);
   background-color: var(--main-color);
 
+  [data-theme="contrast"] & {
+    --body-txt-color: #{$text-high-contrast};
+  }
+
   &.usa-js-mobile-nav--active {
     overflow: unset;
   }

web/themes/custom/votegov/src/sass/base/link.scss

@@ -3,6 +3,6 @@
 
 a {
   main & {
-    @include vote-link;
+    @include vote-link-bg;
   }
 }

web/themes/custom/votegov/src/sass/base/typography.scss

@@ -3,15 +3,20 @@
 
 // Headings
 h1 {
+  --h1-txt-color: #{$base-dark};
   @include u-font-family('serif');
   @include u-text('bold');
   @include u-margin-top(5);
-  color: $base-dark;
+  color: var(--h1-txt-color);
 
   @include at-media-max('tablet') {
     @include u-font-size('serif', 12)
   }
 
+  [data-theme="contrast"] & {
+    --h1-txt-color: #{$text-high-contrast};
+  }
+
   &:first-child {
     @include u-margin-top(0);
   }
@@ -26,12 +31,17 @@ h3,
 h4,
 h5,
 h6 {
+  --h-txt-color: #{$base-dark};
   @include u-font-family('sans');
   @include u-text('no-uppercase');
   @include u-font-weight('medium');
   @include u-margin-top(5);
   @include u-text('ls-auto');
-  color: $base-dark;
+  color: var(--h-txt-color);
+
+  [data-theme="contrast"] & {
+    --h-txt-color: #{$text-high-contrast};
+  }
 
   &:first-child {
     @include u-margin-top(0);

web/themes/custom/votegov/src/sass/components/eacgov-partner.scss

@@ -45,7 +45,7 @@ $eacgov-partner-breakpoint: 'tablet-lg';
 }
 
 .vote-eac-partner__logo-link {
-  @include vote-link($color: $base-dark, $color-hover: $base-primary-hover, $color-bg: 'transparent');
+  @include vote-link($color: $base-dark, $color-hover: $base-primary-hover);
   @include u-display('inline-flex');
   @include u-align-items('align-center');
   @include u-text-decoration('no-underline');
@@ -62,7 +62,7 @@ $eacgov-partner-breakpoint: 'tablet-lg';
 
 .vote-eac-partner__social-link {
   @include u-white-space('no-wrap');
-  @include vote-link($color: $base-dark, $color-hover: $base-primary-hover, $color-bg: 'transparent');
+  @include vote-link($color: $base-dark, $color-hover: $base-primary-hover);
   @include u-display('inline-flex');
   @include u-align-items('align-center');
 

web/themes/custom/votegov/src/sass/components/page-content.scss

@@ -1,4 +1,5 @@
 @use "uswds-core" as *;
+@use "variables" as *;
 @use "mixins" as *;
 
 .vote-main-content-row {

web/themes/custom/votegov/src/sass/components/page-masthead.scss

@@ -1,14 +1,17 @@
 @use "uswds-core" as *;
 @use "variables" as *;
 
-$masthead-background-color: $base-dark;
-
 .page-masthead {
+  --page-masthead-bg: #{$base-dark};
   @include u-position('relative');
   @include u-padding-top(4);
-  background-color: $masthead-background-color;
+  background-color: var(--page-masthead-bg);
   padding-bottom: 6rem;
 
+  [data-theme="contrast"] & {
+    --page-masthead-bg: #{$bg-high-contrast};
+  }
+
   &:before {
     content: "";
     @include u-display('block');
@@ -19,7 +22,11 @@ $masthead-background-color: $base-dark;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
-    background-color: $masthead-background-color;
+    background-color: var(--page-masthead-bg);
+
+    [data-theme="contrast"] & {
+      --page-masthead-bg: #{$bg-high-contrast};
+    }
   }
 
   > * {

web/themes/custom/votegov/src/sass/components/registration-tool.scss

@@ -91,7 +91,7 @@
     @include u-padding(2);
 
     a {
-      @include vote-link($color: $base-dark, $color-hover: $base-primary-hover, $color-bg: 'transparent');
+      @include vote-link($color: $base-dark, $color-hover: $base-primary-hover);
       @include u-padding-y(0.5);
       @include u-padding-x(1);
       @include u-display('inline-block');

web/themes/custom/votegov/src/sass/components/usagov-partner.scss

@@ -41,7 +41,7 @@ $usagov-partner-breakpoint: 'tablet-lg';
 
     a {
       @include u-font-weight('bold');
-      @include vote-link($color: $base-dark);
+      @include vote-link-bg($color: $base-dark);
     }
   }
 }

web/themes/custom/votegov/src/sass/mixins/mixins.scss

@@ -103,7 +103,7 @@
   }
 }
 
-@mixin vote-link($color: $base-primary, $color-hover: $base-white, $color-bg: $base-primary-hover) {
+@mixin vote-link($color: $base-primary, $color-hover: $base-white) {
   --vote-link--color: #{$color};
   --vote-link-hover--color: #{$color-hover};
   @include u-text('underline');
@@ -115,13 +115,41 @@
 
   @include hover {
     @include u-text('no-underline');
-    background-color: $color-bg;
     color: var(--vote-link-hover--color);
   }
 
   [data-theme="contrast"] & {
     --vote-link--color: #{$link-high-contrast};
-    --vote-link-hover--color: #{$link-high-contrast};
+    --vote-link-hover--color: #{$link-high-contrast-hover};
+
+    @include hover {
+      @include u-text('underline');
+    }
+  }
+}
+
+@mixin vote-link-bg($color: $base-primary, $color-hover: $base-white, $color-bg: $base-primary-hover) {
+  --vote-link--color: #{$color};
+  --vote-link-hover--color: #{$color-hover};
+  --vote-link-hover--bg-color: #{$color-bg};
+  @include u-text('underline');
+  color: var(--vote-link--color);
+
+  &:visited {
+    color: var(--vote-link--color);
+  }
+
+  @include hover {
+    @include u-text('no-underline');
+    background-color: var(--vote-link-hover--bg-color);
+    color: var(--vote-link-hover--color);
+  }
+
+  [data-theme="contrast"] & {
+    --vote-link--color: #{$link-high-contrast};
+    --vote-link-hover--color: #{$base-white};
+    --vote-link-hover--bg-color: #{$link-high-contrast-hover};
+
     @include hover {
       @include u-text('underline');
     }

web/themes/custom/votegov/src/sass/uswds-overrides/usa-button.scss

@@ -7,35 +7,68 @@
   }
 }
 
+.usa-button, .usa-button:not(.usa-button--unstyled), .usa-button:not(.usa-button--unstyled):hover {
+  --usa-button-bg: inherit;
+  background-color: var(--usa-button-bg);
+
+  [data-theme="contrast"] & {
+    --usa-button-bg: #{$btn-bg-high-contrast};
+  }
+}
+
 // Custom usa-button overrides using USWDS mixins and other settings.
 .usa-button:not(.usa-button--unstyled) {
   @include u-text('medium');
+  --usa-button-bg: #{$base-primary};
+  --usa-button-text: #{$base-white};
   padding: 0.9rem 1.4rem;
-  background-color: #345D96;
+  background-color: var(--usa-button-bg);
+  color: var(--usa-button-text);
 
   &.usa-button--active {
-    background-color: $base-dark;
+    --usa-button-bg: #{$base-dark};
+
+    [data-theme="contrast"] & {
+      --usa-button-bg: #{$btn-bg-high-contrast-hover};
+    }
   }
 
   &:hover,
   &:focus,
   &.usa-focus,
-  &.usa-button--hover {
-    background-color: $base-primary-hover;
+  &.usa-button--hover
+  {
+    --usa-button-bg: #{$base-primary-hover};
+
+    [data-theme="contrast"] & {
+      --usa-button-bg: #{$btn-bg-high-contrast-hover};
+    }
   }
 
   &.usa-button--secondary {
-    background-color: $ac-warm;
+    --usa-button-bg: #{$ac-warm};
+
+    [data-theme="contrast"] & {
+      --usa-button-bg: #{$btn-bg-high-contrast};
+    }
 
     &.usa-button--active {
-      background-color: $ac-warm-hover;
+      --usa-button-bg: #{$ac-warm-hover};
+
+      [data-theme="contrast"] & {
+        --usa-button-bg: #{$btn-bg-high-contrast-hover};
+      }
     }
 
     &:hover,
     &:focus,
     &.usa-focus,
     &.usa-button--hover {
-      background-color: $ac-warm-hover;
+      --usa-button-bg: #{$ac-warm-hover};
+
+      [data-theme="contrast"] & {
+        --usa-button-bg: #{$btn-bg-high-contrast-hover};
+      }
     }
   }
 

web/themes/custom/votegov/src/sass/uswds-overrides/usa-in-page-nav.scss

@@ -18,11 +18,11 @@
 
   a:not(.usa-button) {
     &:not(.usa-current) {
-      @include vote-link;
+      @include vote-link-bg;
     }
 
     &.usa-current {
-      @include vote-link($color: $base-dark);
+      @include vote-link-bg($color: $base-dark);
 
       &:after {
         @include u-left(0);