Dp 29310 sandbox

packages/assets/scss/00-base/_color-tokens.scss

@@ -99,9 +99,9 @@ $c-platinum-gray:                   #F2F2F2 !default;
 $c-black:                           $c-revolution-gray !default;
 $c-gray-dark:                       $c-granite-gray !default;
 $c-gray:                            $c-atlantic-gray !default;
-$c-gray-light:                      $c-overcast-gray !default;
+$c-gray-light:                      $c-atlantic-gray !default;//$c-overcast-gray !default;
 $c-gray-lighter:                    #CCCCCC !default; // Followup needed: should be added as a base color or be replaced as a gradient color from granite gray
-$c-gray-lightest:                   $c-platinum-gray !default;
+$c-gray-lightest:                   #404040;// $c-platinum-gray !default;
 $c-white:                           white !default;
 
 // Error Red (#CD0D0D)
@@ -110,4 +110,4 @@ $c-error-red-lighter:               #EEACAC !default; //Commonly used in outline
 $c-error-red-lightest:              #FCF3F3 !default; //Commonly used in background
 
 // Focus Highlight (#3e94cf)
-$c-focus-hightlight:                #3e94cf !default;
+$c-focus-hightlight:                #1aeaff !default;//#3e94cf !default;

packages/assets/scss/00-base/_colors.scss

@@ -7,9 +7,11 @@ $c-primary:              $c-bay-blue !default;
 $c-primary-light:        $c-bay-blue-light !default;
 $c-primary-lighter:      $c-bay-blue-lighter !default;
 $c-primary-lightest:     $c-bay-blue-lightest !default;
+$c-primary-bright:       #1aeaff;//  ADDED FOR HIGH CONTRAST LINK COLOR
 $c-primary-alt:          $c-berkshires-green !default;
 $c-primary-alt-lighter:  $c-berkshires-green-lighter !default;
 $c-primary-alt-lightest: $c-berkshires-green-lightest !default;
+$c-primary-alt-bright:   #2CD26E !default;//  ADDED FOR HIGH CONTRAST LINK COLOR
 $c-primary-alt-dark:     $c-berkshires-green-dark !default;
 $c-highlight:            $c-duckling-yellow !default;
 $c-highlight-lighter:    $c-duckling-yellow-lighter !default;
@@ -25,14 +27,15 @@ $c-focus:                $c-focus-hightlight !default;
 // Need to add these colors to this listing new to add
 // $c-visited
 
-$c-font-base:            $c-black !default;
+$c-font-base:            $c-platinum-gray;//$c-black !default;
 $c-font-detail:          $c-gray-dark !default;
 $c-font-dark:            $c-black !default;
 $c-font-medium:          $c-gray !default;
+$c-font-dark-hc:         $c-revolution-gray !default;//  TEST STYLE:  ADDED FOR HIGHT CONTRAST
 
-$c-font-heading:         $c-black !default;
+$c-font-heading:         #f2f2f2;//$c-black !default;
 $c-font-inverse:         $c-white !default;
-$c-font-link:            $c-bay-blue !default;
+$c-font-link:            #1aeaff !default;//$c-bay-blue !default;
 $c-font-error:           $c-error !default;
 
 $c-bg-comp-title:        $c-gray-dark !default;

packages/assets/scss/00-base/_elements.scss

@@ -42,6 +42,9 @@ body {
   color: $c-font-base;
   font-family: $fonts;
   font-weight: $fonts-light;
+
+  // TEST BACKGROUND
+  background-color: #121212;
 }
 
 a {

packages/assets/scss/00-base/mixins/_ma-accordion-icon.scss

@@ -4,7 +4,7 @@
 
     &:after {
         content: "+";
-        color: $c-primary-alt;
+        color: $c-primary-alt-bright;//$c-primary-alt;
         display: block;
         font-size: 1.6em;
         font-weight: 500;

packages/assets/scss/00-base/mixins/_ma-border-decorative.scss

@@ -5,7 +5,8 @@
 
 @use "00-base/colors" as *;
 
-@mixin ma-border-decorative($fg: transparent, $opacity: .5) {
+@mixin ma-border-decorative($fg: transparent, $opacity: .8) {
+// @mixin ma-border-decorative($fg: transparent, $opacity: .5) {
 
   @if ($fg == transparent) {
     position: relative;

packages/assets/scss/00-base/mixins/_ma-heading-colored.scss

@@ -10,9 +10,10 @@
 
 @use "00-base/breakpoints" as *;
 
-@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) {
+// @mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:white) {
+@mixin ma-heading-colored($c-bg:transparent,$direction:right,$c-page:#121212) {
   $offset: 55px;
-  
+
   @if ($c-bg == transparent) {
     font-size: $fonts-medium;
     letter-spacing: $letter-spacing-large;

packages/assets/scss/01-atoms/_comp-heading.scss

@@ -5,6 +5,8 @@
   &:not(&--sidebar) {
 
     @include ma-comp-heading;
+
+    color: #f2f2f2;// OVERRIDE INCLUDE
   }
 
   &--sidebar,
@@ -55,6 +57,9 @@
   &--sidebar {
 
     @include ma-sidebar-heading($c-bd-divider,$c-font-base);
+
+    border-color: #707070; // OVERRIDE INCLUDE
+    color: #f2f2f2;// OVERRIDE INCLUDE
   }
 
   .sidebar--colored & {

packages/assets/scss/01-atoms/_decorative-link.scss

@@ -8,16 +8,16 @@
   width: 100%;
 
   a:hover {
-    border-bottom-color: rgba($c-font-link,.5);
+    border-bottom-color: rgba($c-font-link,.6);//.5);
   }
 
   a:focus {
     // important needed to overwrite the focus border color
-    border-bottom-color: rgba($c-font-link,.5) !important;
+    border-bottom-color: rgba($c-font-link,.6);//.5) !important;
   }
 
   svg {
-    fill: rgba($c-font-link,.5);
+    fill: rgba($c-font-link,.7);//5);
   }
 
   &.button-link {

packages/assets/scss/01-atoms/_site-logo.scss

@@ -16,6 +16,9 @@
       line-height: 1;
       letter-spacing: $letter-spacing-small;
 
+      // TEST STYLE
+       -webkit-text-stroke: 0.5px #777;
+
       @media ($bp-small-max) {
         width: 102px;// 108px - margin-left(6)
         margin-left: 0.3rem;

packages/assets/scss/01-atoms/_table.scss

@@ -6,7 +6,7 @@
   width: 100%;
 
   thead {
-    background-color: $c-bg-subtle;
+    background-color: #404040;//$c-bg-subtle;
 
     th {
       color: $c-font-heading;

packages/assets/scss/01-atoms/_video.scss

@@ -12,7 +12,7 @@
     padding: 13px;
     position: relative;
     padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px
-    background-color: rgba($c-primary,.1);
+    background-color: rgba(26,234,255,.2);//$c-primary,.1);
 
     @media ($bp-large-min) {
       padding-bottom: 12px + 32px + 13px;

packages/assets/scss/02-molecules/_action-step.scss

@@ -28,6 +28,7 @@
     position: relative;
     font-weight: $fonts-bold;
     min-height: 32px;
+    color: $c-font-base; // Added for high contrast theme.
   }
 
   &--accordion &__header {
@@ -126,7 +127,7 @@
   }
 
   &--accordion &__header__toggle {
-    color: $c-primary-alt;
+    color: $c-primary-alt-bright;
   }
 
   &__icon {

packages/assets/scss/02-molecules/_brand-banner.scss

@@ -4,7 +4,8 @@
 
     width: 100%;
     background-color: $c-primary-lightest;
-    font-size: $fonts-xsmall;
+    font-size: 16px;//$fonts-xsmall;
+    font-weight: 400;
 
     @include background-colors(
         $lightTheme: (
@@ -30,8 +31,8 @@
         @include ma-container;
         display: flex;
         width: 100%;
-        padding-top: 5px;
-        padding-bottom: 5px;
+        padding-top: 8px;//5px;
+        padding-bottom: 8px;//5px;
         text-align: left;
 
         @media ($bp-x-small-min) {
@@ -40,9 +41,9 @@
     }
 
     &-logo {
-        height: 20px;
-        width: 20px;
-        margin-right: 5px;
+        height: 25px;//20px;
+        width: 25px;//20px;
+        margin-right: 10px;//5px;
 
         &--dark {
             // Filter is not supported in IE. When use the dark theme, you should use the white version of seal instead.
@@ -123,4 +124,17 @@
         }
     }
 
-}
+    // TEST STYLE
+    button {
+        font-weight: 400;
+
+        .ma__button-icon--quaternary.ma__button-icon--c-white {
+            font-size: 16px;
+            border-bottom: 2px solid rgba(255,255,255,.8);
+
+            svg {
+                fill: rgba(255,255,255,.8);
+            }
+        }
+    }
+}

packages/assets/scss/02-molecules/_callout-link.scss

@@ -9,8 +9,8 @@
   flex-flow: column wrap;
   justify-content: center;
   padding: 15px 20px;
-  background-color: mix(#fff, $c-font-link,90%);
-  border-color: mix(#fff, $c-font-link,50%);
+  background-color: mix(#121212, $c-font-link,90%);//mix(#fff, $c-font-link,90%);
+  border-color: mix(#121212, $c-font-link,50%);//mix(#fff, $c-font-link,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
   text-decoration: none;
 

packages/assets/scss/02-molecules/_contact-group.scss

@@ -91,7 +91,7 @@
   &__name {
 
     svg {
-      fill: $c-primary-alt;
+      fill: #609D79;//$c-primary-alt;
     }
 
     span {

packages/assets/scss/02-molecules/_contact-us.scss

@@ -273,7 +273,7 @@
 
   &--accordion &__header:after,
   &--accordion &__header &--accordion__status {
-    color: $c-primary-alt;
+    color: $c-primary-alt-bright;
   }
 
   &__expand {

packages/assets/scss/02-molecules/_emergency-alert.scss

@@ -3,7 +3,7 @@
 @use "sass:color" as *;
 
 .ma__emergency-alert {
-  background-color: mix(#fff, $c-warning,90%);
+  background-color: mix(#121212, $c-warning,90%);
   font-size: $fonts-small;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -89,7 +89,7 @@
           width: .5em;
           border-right: 3px solid;
           border-bottom: 3px solid;
-          border-color: $c-black;
+          border-color: $c-font-base;//$c-black;
         }
       }
     }

packages/assets/scss/02-molecules/_emergency-header.scss

@@ -33,11 +33,11 @@
     flex-basis: auto;
     letter-spacing: $letter-spacing-large;
     white-space: nowrap;
-    color: rgba($c-font-base,.8);
+    color: rgba($c-font-dark-hc,.8);//$c-font-base,.8);
     font-weight: $fonts-bold;
     border-right-width: 1px;
     border-right-style: solid;
-    border-right-color: rgba($c-font-base,.3);
+    border-right-color: rgba($c-font-dark-hc,.3);//$c-font-base,.3);
     padding-right: .5rem;
     margin-right: .5rem;
 
@@ -82,7 +82,7 @@
     @media ($bp-small-max) {
       font-size: 1.2rem;
     }
-    
+
     @include ma-button-reset;
 
     @include ma-chevron;
@@ -149,9 +149,9 @@
   &__title {
 
     .ma__content-link {
-      text-decoration: none;  
+      text-decoration: none;
     }
-    
+
 
     .ma__decorative-link {
       display: inline;

packages/assets/scss/02-molecules/_header-search.scss

@@ -20,6 +20,11 @@ $bp-header-search-reduce-button: "max-width: 700px";
     padding-right: 128px;
     padding-left: 17px;
     width: 100%;
+    // TEST STYLE
+    background: rgba(225,225,225,.1);
+    color: #d4d4d4;
+    font-weight: 400;
+    border: 2px solid #777;
 
     &::-ms-clear {
       display: none;
@@ -43,6 +48,17 @@ $bp-header-search-reduce-button: "max-width: 700px";
         right: 0;
         top: 0;
 
+      // TEST STYLE
+      background: rgba(225,225,225,.1);
+      color: #d4d4d4;
+      font-size: 15px;//16px;
+      font-weight: 500;
+      border-color: #777 !important;
+
+      & > svg {
+        fill: #D7E7DD;
+      }
+
       @media ($bp-header-search-reduce-button) {
 
         span {

packages/assets/scss/02-molecules/_illustrated-link.scss

@@ -79,14 +79,14 @@ $illustrated-link-image-width: 130px;
 //theme
 
 .ma__illustrated-link {
-  border-color: mix(#fff, $c-primary,50%);
+  border-color: mix(#121212, #1aeaff,50%);
   box-shadow: 0 0.25rem 0.5rem rgba(#000, 0.25);
 
   &__content {
-    background-color: mix(#fff, $c-primary,89%);
+    background-color: mix(#121212, #1aeaff,89%);
 
     &:after {
-      background-color: mix(#fff, $c-primary,89%);
+      background-color: mix(#121212, #1aeaff,89%);
     }
   }
 

packages/assets/scss/02-molecules/_location-icons.scss

@@ -51,7 +51,7 @@
   }
 
   &__name {
-    color: $c-font-medium;
+    color: $c-font-base;//$c-font-medium;
     font-weight: $fonts-bold;
   }
 }