Typography and color updates. (#1070)

jzohrab · web-flow · commit d66a0ac852ee · 2020-07-26T20:36:25.000-04:00
diff --git a/covidatlas/base.css b/covidatlas/base.css
@@ -14,15 +14,15 @@
   --ButtonBorderSize: var(--spectrum-alias-border-size-thin);
   --ButtonBorderRadius: var(--spectrum-global-dimension-size-50);
   --spectrum-alias-focus-ring-size: var(--spectrum-alias-border-size-thick);
-  --HeadingWeight: 700;
+  --HeadingWeight: 500;
   --BodyWeight: 300;
   --ca-PageMargin: 24px;
 
   /* Base vars */
-  --ca-FontBody: "Merriweather", Georgia, serif;
+  --ca-FontBody: "Open Sans", Helvetica, sans-serif;
   --spectrum-body-text-font-family: var(--ca-FontBody);
   --spectrum-component-text-font-family: "Open Sans", Helvetica, sans-serif;
-  --spectrum-heading-text-font-family: "Open Sans", Helvetica, sans-serif;
+  --spectrum-heading-text-font-family: "Merriweather", Georgia, serif;
   --spectrum-sociallinks-text-font-family: var(--spectrum-heading-text-font-family);
 
 
diff --git a/covidatlas/index.css b/covidatlas/index.css
@@ -178,6 +178,7 @@ sp-dropdown[emphasized] {
     font-size: var(--spectrum-heading-m-text-size, var(--spectrum-alias-heading-m-text-size));
     max-width: 26ch;
     margin-top: 0;
+    line-height: 1.2;
     margin-bottom: var(--spectrum-heading-xxl-margin-top, var(--spectrum-alias-heading-xxl-margin-top));
   }
 }
@@ -330,6 +331,8 @@ hr {
   align-items: baseline;
   justify-content: space-between;
   border-bottom: 1px solid var(--Gray300);
+  font-family: var(--spectrum-component-text-font-family);
+  font-weight: 700;
 
   &.spectrum-Heading {
     margin-top: var(--spectrum-heading-m-margin-top, var(--spectrum-alias-heading-m-margin-top));
@@ -341,6 +344,8 @@ hr {
 
 .ca-LocalCount {
   text-align: right;
+  font-family: var(--spectrum-component-text-font-family);
+  font-weight: 700;
 }
 
 /* .ca-Active {
diff --git a/covidatlas/lib/color.js b/covidatlas/lib/color.js
@@ -3,7 +3,7 @@
 import * as d3interpolate from 'd3-interpolate';
 import * as d3scale from 'd3-scale';
 
-const choroplethColor = 'yellowOrangePurple';
+const choroplethColor = 'magma';
 
 export const noCasesColor = '#ffffff';
 export const noPopulationDataColor = 'rgba(0,0,0,0)';
