fix contrast issues (#1055)

Co-authored-by: Barry Pollard <barrypollard@google.com>

Author: sarahfossheim

static/css/techreport/landing.css

@@ -33,8 +33,8 @@
 }
 
 .choices .card:has(h2 a:is(:hover, :focus-visible)) {
-  background-color: var(--color-blue-light);
-  border: 1px solid var(--color-blue-dark);
+  background-color: var(--color-card-background-hover);
+  border: 1px solid var(--color-card-border-hover);
 }
 
 .latest-info h2 {

static/css/techreport/techreport.css

@@ -15,6 +15,7 @@
   --color-gray-dark: #2f2f30;
   --color-gray-light: #f6f6f7;
   --color-teal-vibrant: #1c818d;
+  --color-teal-vibrant-lighter: #2095A2;
   --color-teal-vibrant-darker: #136e78;
   --color-yellow-light: #fefae5;
   --color-yellow-dark: #B08705;
@@ -33,6 +34,8 @@
   --color-card-background: #fff;
   --color-card-border: #cdd4d6;
   --color-card-border-light: #e8e8e8;
+  --color-card-background-hover: var(--color-blue-light);
+  --color-card-border-hover: var(--color-blue-dark);
 
   /* Page */
   --color-page-background: #f4f4f4;
@@ -75,6 +78,7 @@
   --color-nav: #667a7d;
   --color-nav-active: var(--color-teal-accent);
   --color-nav-inactive: var(--color-teal-medium);
+  --color-nav-separator: var(--color-card-border);
 
   /* Charts */
   --color-progress-basic-border: #879092;
@@ -128,13 +132,15 @@
   --color-text-lighter: #fff;
   --color-text-darker: #fff;
   --color-text-inverted: #000;
-  --color-nav-inactive: #6D8488;
+  --color-nav-inactive: #8EA1A4;
 
   /* Cards */
   --color-card-background: #111;
   --color-card-border: #000;
   --card-shadow: 0 3px 12px 0px rgb(4, 8, 8, 20%);
   --color-page-background: #292828;
+  --color-card-background-hover: #414040;
+  --color-card-border-hover: #000;
 
   /* Checkboxes */
   --color-checkbox-button-label-selected: #292828;
@@ -159,6 +165,11 @@
   --table-row-hover: var(--color-teal-darker);
   --table-row-hover-border: var(--color-blue-light);
 
+  /* Charts */
+  --color-progress-basic-border: var(--color-gray-medium);
+  --color-progress-basic-bg: var(--color-card-background);
+  --color-progress-basic-fill: var(--color-teal-vibrant-lighter);
+
   /* Graph colors */
   --graph-color-labels: #a6bbbe;
   --graph-color-line: var(--color-gray-medium);
@@ -188,6 +199,7 @@
   --color-separator: var(--color-gray-dark);
   --focus-default: var(--color-text-darker);
   --progess-color-empty: var(--color-page-background);
+  --color-nav-separator: var(--color-separator);
 }
 
 /* ------------------------- */
@@ -458,7 +470,7 @@ nav {
   display: block;
   height: 1.5rem;
   width: 2px;
-  background-color: var(--color-card-border);
+  background-color: var(--color-nav-separator);
   position: absolute;
   right: 0;
   top: 50%;