From 102b0642507cfbf7823b341650829630338ac2b9 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Fri, 7 Jun 2019 11:27:35 -0700
Subject: [PATCH 01/15] report: create naming convention for css variables

---
 lighthouse-core/report/html/report-styles.css | 262 +++++++++---------
 lighthouse-core/report/html/templates.html    |  36 +--
 2 files changed, 156 insertions(+), 142 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index e8eb75d52d0a..3c6a58b86b58 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -15,6 +15,22 @@
  * limitations under the License.
  */
 
+/*
+  Naming convention:
+
+  If a variable is used for a specific component: --{component}-{property name}-{modifier}
+
+  Both {component} and {property name} should be kebab-case. If the target is the entire page,
+  use 'report' for the component. The property name should be not be abbreviated. Use the
+  property name the variable is intended for - if it's used for multiple, a common descriptor
+  is fine (ex: 'size' for a variable applied to 'width' and 'height'). If a variable is shared
+  across multiple components, either create more variables or just drop the "{component}-"
+  part of the name. Append any modifiers at the end (ex: 'big', 'dark').
+
+  For colors: --color-{type}-{hue}
+
+  Omit "-{hue}" if there is only one color of that type.
+*/
 .lh-vars {
   --text-font-family: Roboto, Helvetica, Arial, sans-serif;
   --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
@@ -22,34 +38,33 @@
   --body-text-color: var(--color-black-900);
   --body-font-size: 16px;
   --body-line-height: 24px;
-  --subheader-color: hsl(206, 6%, 25%);
-  --header-font-size: 20px;
+  --snippet-color: hsl(206, 6%, 25%);
+  --category-header-font-size: 20px;
   --header-line-height: 24px;
-  --caption-line-height: 16px;
+  --audit-explanation-line-height: 16px;
   --default-padding: 12px;
-  --section-padding: 16px;
-  --section-indent: 16px;
-  --audit-item-gap: 5px;
-  --text-indent: 8px;
+  --footer-vertical-padding: 16px;
+  --audit-item-gap: 5px; /* TODO rename. */
+  --stackpack-horizontal-padding: 10px;
   --secondary-text-color: var(--color-black-800);
   --informative-color: var(--color-blue-900);
-  --medium-75-gray: #757575;
-  --medium-50-gray: hsl(210, 17%, 98%);
+  --medium-75-gray: #757575; /* TODO rename / switch to MD */
+  --medium-50-gray: hsl(210, 17%, 98%); /* TODO rename / switch to MD */
   --report-secondary-border-color: #ebebeb;
-  --display-value-gray: hsl(216, 5%, 39%);
+  --chevron-line-stroke: hsl(216, 5%, 39%);
   --report-width: calc(60 * var(--body-font-size));
   --report-min-width: 400px;
   --report-header-height: 161px;
   --lh-score-icon-background-size: 24px;
   --lh-export-icon-size: var(--lh-score-icon-background-size);
   --lh-export-icon-color: var(--medium-75-gray);
-  --lh-table-higlight-bg: hsla(0, 0%, 75%, 0.1);
+  --lh-table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
   --lh-sparkline-height: 5px;
-  --lh-audit-vpadding: 8px;
-  --lh-audit-group-vpadding: 8px;
-  --lh-section-vpadding: 12px;
+  --lh-audit-vertical-padding: 8px;
+  --lh-audit-group-vertical-padding: 8px;
+  --lh-section-vertical-padding: 12px;
   --chevron-size: 12px;
-  --inner-audit-left-padding: calc(var(--score-shape-size) + var(--score-shape-margin-left) + var(--score-shape-margin-right));
+  --inner-audit-left-padding: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)); /* TODO: rename */
 
   /* Palette using Material Design Colors
    * https://www.materialui.co/colors */
@@ -61,56 +76,56 @@
   --color-black-800: #424242;
   --color-black-900: #212121;
   --color-black: #000000;
-  --color-blue: #2962FF;
+  --color-blue: #2962FF; /* A700. */
   --color-green-700: #018642;
-  --color-green: #0CCE6B;
+  --color-green: #0CCE6B; /* TODO: this is not a MD color */
   --color-orange-700: #D04900;
-  --color-orange: #FFA400;
+  --color-orange: #FFA400; /* TODO: this is not a MD color */
   --color-red-700: #EB0F00;
-  --color-red: #FF4E42;
+  --color-red: #FF4E42; /* TODO: this is not a MD color */
   --color-white: #FFFFFF;
   --color-blue-200: #90CAF9;
   --color-blue-900: #0D47A1;
   --color-cyan-500: #00BCD4;
   --color-teal-600: #00897B;
 
-
-  /* TODO(cjamcl) clean up unused variables. */
-  --audits-margin-bottom: 40px;
-  --env-item-bg: var(--color-black-100);
+  --audit-group-margin-bottom: 40px;
+  --env-item-background-color: var(--color-black-100);
   --env-name-min-width: 220px;
-  --env-tem-padding: 10px 0px;
-  --expandable-padding: 0 0 2px calc(var(--score-shape-margin-left) + var(--score-shape-size) + var(--score-shape-margin-right));
+  --env-item-padding: 10px 0px;
+  --env-item-font-size: 28px;
+  --env-item-line-height: 36px;
+  --metric-description-padding: 0 0 2px calc(var(--score-icon-margin-left) + var(--score-icon-size) + var(--score-icon-margin-right));
   --gauge-circle-size-big: 112px;
   --gauge-circle-size: 80px;
-  --header-padding: 20px 0 20px 0;
-  --icon-square-size: calc(var(--score-shape-size) * 0.88);
-  --plugin-badge-bg: var(--color-white);
+  --scores-container-padding: 20px 0 20px 0;
+  --icon-square-size: calc(var(--score-icon-size) * 0.88);
+  --plugin-badge-background-color: var(--color-white);
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
   --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
   --plugin-icon-size: 65%;
   --pwa-icon-margin: 0 6px 0 -2px;
-  --pwa-icon-size: var(--topbar-icon-size);
+  --pwa-icon-size: var(--topbar-logo-size);
   --score-container-padding: 8px;
-  --score-container-width: 148px;
-  --score-number-font-size-big: 38px;
-  --score-number-font-size: 28px;
-  --score-shape-margin-left: 4px;
-  --score-shape-margin-right: 12px;
-  --score-shape-margin: 0 var(--score-shape-margin-right) 0 var(--score-shape-margin-left);
-  --score-shape-size: 12px;
-  --score-title-font-size-big: 28px;
-  --score-title-font-size: 20px;
-  --score-title-line-height-big: 36px;
-  --score-title-line-height: 26px;
+  --score-gauge-wrapper-width: 148px;
+  --score-gauge-percentage-font-size-big: 38px;
+  --score-gauge-percentage-font-size: 28px;
+  --score-icon-margin-left: 4px;
+  --score-icon-margin-right: 12px;
+  --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
+  --score-icon-size: 12px;
+  --score-gauge-label-font-size-big: 28px;
+  --score-gauge-label-font-size: 20px;
+  --score-gauge-label-line-height-big: 36px;
+  --score-gauge-label-line-height: 26px;
   --scorescale-height: 6px;
   --scorescale-width: 18px;
-  --section-padding: 40px;
-  --topbar-bg: var(--color-black-100);
+  --category-padding: 40px;
+  --topbar-background-color: var(--color-black-100);
   --topbar-height: 32px;
-  --topbar-icon-size: 24px;
+  --topbar-logo-size: 24px;
   --topbar-padding: 0 8px;
-  --metrics-toggle-color: var(--color-black-200);
+  --metrics-toggle-background-color: var(--color-black-200);
 
   --color-average-secondary: var(--color-orange-700);
   --color-average: var(--color-orange);
@@ -118,11 +133,11 @@
   --color-fail: var(--color-red);
   --color-pass-secondary: var(--color-green-700);
   --color-pass: var(--color-green);
-  --color-sticky-header-bg: var(--body-background-color);
-  --color-highlighter-bg: var(--body-text-color);
+  --sticky-header-background-color: var(--body-background-color);
+  --highlighter-background-color: var(--body-text-color);
 
   --color-hover: #FAFAFA;
-  --color-metric-toggle-lines: #7F7F7F;
+  --metric-toggle-lines-fill: #7F7F7F;
 
   --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
   --plugin-icon-url-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
@@ -154,9 +169,9 @@
   --color-black-400: var(--color-black-600);
   --color-black-600: var(--color-black-500);
 
-  --topbar-bg: var(--color-black);
-  --plugin-badge-bg: var(--color-black-800);
-  --env-item-bg: var(--color-black);
+  --topbar-background-color: var(--color-black);
+  --plugin-badge-background-color: var(--color-black-800);
+  --env-item-background-color: var(--color-black);
   --report-secondary-border-color: var(--color-black-200);
 
   --body-background-color: var(--color-black-900);
@@ -179,7 +194,7 @@
 
 @media only screen and (max-width: 480px) {
   .lh-vars {
-    --audits-margin-bottom: 20px;
+    --audit-group-margin-bottom: 20px;
     --body-font-size: 14px;
     --body-line-height: 20px;
     --env-name-min-width: 120px;
@@ -188,18 +203,18 @@
     --header-padding: 16px 0 16px 0;
     --plugin-icon-size: 75%;
     --pwa-icon-margin: 0 7px 0 -3px;
-    --score-container-width: 112px;
-    --score-number-font-size-big: 34px;
-    --score-number-font-size: 26px;
-    --score-shape-margin-left: 2px;
-    --score-shape-size: 10px;
-    --score-title-font-size-big: 22px;
-    --score-title-font-size: 14px;
-    --score-title-line-height-big: 26px;
-    --score-title-line-height: 20px;
-    --section-padding: 24px;
+    --score-gauge-wrapper-width: 112px;
+    --score-gauge-percentage-font-size-big: 34px;
+    --score-gauge-percentage-font-size: 26px;
+    --score-icon-margin-left: 2px;
+    --score-icon-size: 10px;
+    --score-gauge-label-font-size-big: 22px;
+    --score-gauge-label-font-size: 14px;
+    --score-gauge-label-line-height-big: 26px;
+    --score-gauge-label-line-height: 20px;
+    --category-padding: 24px;
     --topbar-height: 28px;
-    --topbar-icon-size: 20px;
+    --topbar-logo-size: 20px;
   }
 
   /* Not enough space to adequately show the relative savings bars. */
@@ -213,34 +228,34 @@
   --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --body-font-size: 12px;
   --body-line-height: 20px;
-  --header-font-size: 16px;
+  --category-header-font-size: 16px;
   --header-line-height: 20px;
-  --caption-line-height: 14px;
+  --audit-explanation-line-height: 14px;
   --default-padding: 12px;
-  --section-padding: 12px;
-  --section-indent: 8px;
+  --category-padding: 12px;
+  --footer-vertical-padding: 8px;
 
   --gauge-circle-size-big: 72px;
   --gauge-circle-size: 64px;
 
-  --audits-margin-bottom: 20px;
+  --audit-group-margin-bottom: 20px;
   --env-name-min-width: 120px;
   --header-padding: 16px 0 16px 0;
   --plugin-icon-size: 75%;
   --pwa-icon-margin: 0 7px 0 -3px;
-  --score-container-width: 97px;
-  --score-number-font-size-big: 34px;
-  --score-number-font-size: 26px;
-  --score-shape-margin-left: 2px;
-  --score-shape-size: 10px;
-  --score-title-font-size-big: 22px;
-  --score-title-font-size: 14px;
-  --score-title-line-height-big: 26px;
-  --score-title-line-height: 20px;
+  --score-gauge-wrapper-width: 97px;
+  --score-gauge-percentage-font-size-big: 34px;
+  --score-gauge-percentage-font-size: 26px;
+  --score-icon-margin-left: 2px;
+  --score-icon-size: 10px;
+  --score-gauge-label-font-size-big: 22px;
+  --score-gauge-label-font-size: 14px;
+  --score-gauge-label-line-height-big: 26px;
+  --score-gauge-label-line-height: 20px;
 
-  --lh-audit-vpadding: 4px;
-  --lh-audit-group-vpadding: 12px;
-  --lh-section-vpadding: 8px;
+  --lh-audit-vertical-padding: 4px;
+  --lh-audit-group-vertical-padding: 12px;
+  --lh-section-vertical-padding: 8px;
 }
 
 .lh-devtools.lh-root {
@@ -320,7 +335,7 @@
 }
 
 .lh-audit__description, .lh-audit__stackpack {
-  --inner-audit-right-padding: calc(var(--text-indent) + 2px);
+  --inner-audit-right-padding: var(--stackpack-horizontal-padding);
   padding-left: var(--inner-audit-left-padding);
   padding-right: var(--inner-audit-right-padding);
   padding-top: 8px;
@@ -390,9 +405,9 @@
 /* Score */
 
 .lh-audit__score-icon {
-  width: var(--score-shape-size);
-  height: var(--score-shape-size);
-  margin: var(--score-shape-margin);
+  width: var(--score-icon-size);
+  height: var(--score-icon-size);
+  margin: var(--score-icon-margin);
 }
 
 .lh-audit--pass .lh-audit__display-text {
@@ -416,9 +431,9 @@
   color: var(--color-fail-secondary);
 }
 .lh-audit--fail .lh-audit__score-icon {
-  border-left: calc(var(--score-shape-size) / 2) solid transparent;
-  border-right: calc(var(--score-shape-size) / 2) solid transparent;
-  border-bottom: var(--score-shape-size) solid var(--color-fail);
+  border-left: calc(var(--score-icon-size) / 2) solid transparent;
+  border-right: calc(var(--score-icon-size) / 2) solid transparent;
+  border-bottom: var(--score-icon-size) solid var(--color-fail);
 }
 
 .lh-audit--manual .lh-audit__display-text,
@@ -484,7 +499,7 @@
   display: flex;
   align-items: center;
   font-weight: 500;
-  padding: var(--lh-audit-vpadding) 0;
+  padding: var(--lh-audit-vertical-padding) 0;
 }
 
 .lh-audit--load-opportunity .lh-audit__header {
@@ -575,13 +590,13 @@
 
 .lh-metrics__disclaimer {
   color: var(--medium-75-gray);
-  margin: var(--lh-section-vpadding) 0;
+  margin: var(--lh-section-vertical-padding) 0;
 }
 
 .lh-metric__description {
   display: none;
   color: var(--secondary-text-color);
-  padding: var(--expandable-padding);
+  padding: var(--metric-description-padding);
 }
 
 .lh-metric__value {
@@ -628,14 +643,14 @@
 .lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less,
 .lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more {
   background-color: var(--color-blue);
-  --color-metric-toggle-lines: var(--color-white);
+  --metric-toggle-lines-fill: var(--color-white);
 }
 .lh-metrics-toggle__lines {
-  fill: var(--color-metric-toggle-lines);
+  fill: var(--metric-toggle-lines-fill);
 }
 
 .lh-metrics-toggle__label  {
-  background-color: var(--metrics-toggle-color);
+  background-color: var(--metrics-toggle-background-color);
 }
 
 .lh-metrics-toggle__label .lh-metrics-toggle__icon--less {
@@ -655,10 +670,10 @@
 
 .lh-metric .lh-metric__innerwrap::before {
   content: '';
-  width: var(--score-shape-size);
-  height: var(--score-shape-size);
+  width: var(--score-icon-size);
+  height: var(--score-icon-size);
   display: inline-block;
-  margin: var(--score-shape-margin);
+  margin: var(--score-icon-margin);
 }
 
 .lh-metric--pass .lh-metric__value {
@@ -682,9 +697,9 @@
   color: var(--color-fail-secondary);
 }
 .lh-metric--fail .lh-metric__innerwrap::before {
-  border-left: calc(var(--score-shape-size) / 2) solid transparent;
-  border-right: calc(var(--score-shape-size) / 2) solid transparent;
-  border-bottom: var(--score-shape-size) solid var(--color-fail);
+  border-left: calc(var(--score-icon-size) / 2) solid transparent;
+  border-right: calc(var(--score-icon-size) / 2) solid transparent;
+  border-bottom: var(--score-icon-size) solid var(--color-fail);
 }
 
 .lh-metric--error .lh-metric__value,
@@ -822,7 +837,7 @@
 /* Audit Group */
 
 .lh-audit-group {
-  margin-bottom: var(--audits-margin-bottom);
+  margin-bottom: var(--audit-group-margin-bottom);
   position: relative;
 }
 
@@ -881,9 +896,8 @@
 .lh-audit-group__summary {
   display: flex;
   justify-content: space-between;
-  padding-right: var(--text-indent);
-  margin-top: calc(var(--section-padding) * 1.5);
-  margin-bottom: var(--section-padding);
+  margin-top: calc(var(--category-padding) * 1.5);
+  margin-bottom: var(--category-padding);
 }
 
 .lh-audit-group__itemcount {
@@ -896,7 +910,7 @@
 
 .lh-audit-group__header {
   font-size: var(--body-font-size);
-  margin: 0 0 var(--lh-audit-group-vpadding);
+  margin: 0 0 var(--lh-audit-group-vertical-padding);
   /* When the header takes 100% width, the chevron becomes small. */
   max-width: calc(100% - var(--chevron-size));
 }
@@ -930,12 +944,12 @@
 .lh-audit-group--pwa-fast-reliable .lh-audit-group__header,
 .lh-audit-group--pwa-installable .lh-audit-group__header,
 .lh-audit-group--pwa-optimized .lh-audit-group__header {
-  margin-top: var(--lh-audit-group-vpadding);
+  margin-top: var(--lh-audit-group-vertical-padding);
 }
 
 .lh-audit-explanation {
-  margin: var(--lh-audit-vpadding) 0 calc(var(--lh-audit-vpadding) / 2);
-  line-height: var(--caption-line-height);
+  margin: var(--lh-audit-vertical-padding) 0 calc(var(--lh-audit-vertical-padding) / 2);
+  line-height: var(--audit-explanation-line-height);
 }
 
 .lh-audit--fail .lh-audit-explanation {
@@ -971,8 +985,8 @@
 .lh-warnings {
   --item-margin: calc(var(--body-line-height) / 6);
   color: var(--color-average);
-  margin: var(--lh-audit-vpadding) 0;
-  padding: calc(var(--lh-audit-vpadding) / 2) var(--lh-audit-vpadding);
+  margin: var(--lh-audit-vertical-padding) 0;
+  padding: calc(var(--lh-audit-vertical-padding) / 2) var(--lh-audit-vertical-padding);
 }
 .lh-warnings span {
   font-weight: bold;
@@ -981,11 +995,11 @@
 .lh-warnings--toplevel {
   --item-margin: calc(var(--header-line-height) / 4);
   color: var(--secondary-text-color);
-  margin: var(--section-padding);
-  padding: var(--section-padding);
+  margin: var(--category-padding);
+  padding: var(--category-padding);
 }
 .lh-warnings ul {
-  padding-left: calc(var(--section-padding) * 2);
+  padding-left: calc(var(--category-padding) * 2);
   margin: 0;
 }
 .lh-warnings li {
@@ -1061,7 +1075,7 @@
 .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
   width: var(--plugin-badge-size);
   height: var(--plugin-badge-size);
-  background-color: var(--plugin-badge-bg);
+  background-color: var(--plugin-badge-background-color);
   background-image: var(--plugin-icon-url);
   background-repeat: no-repeat;
   background-size: var(--plugin-icon-size);
@@ -1097,7 +1111,7 @@
 
 .lh-category .lh-gauge__percentage {
   --gauge-circle-size: var(--gauge-circle-size-big);
-  --score-number-font-size: var(--score-number-font-size-big);
+  --score-gauge-percentage-font-size: var(--score-gauge-percentage-font-size-big);
 }
 
 .lh-gauge__wrapper {
@@ -1117,8 +1131,8 @@
 }
 
 .lh-gauge__label {
-  font-size: var(--score-title-font-size);
-  line-height: var(--score-title-line-height);
+  font-size: var(--score-gauge-label-font-size);
+  line-height: var(--score-gauge-label-line-height);
   margin-top: 10px;
   text-align: center;
   color: var(--body-text-color);
@@ -1126,8 +1140,8 @@
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
 .lh-category .lh-gauge__label {
-  --score-title-font-size: var(--score-title-font-size-big);
-  --score-title-line-height: var(--score-title-line-height-big);
+  --score-gauge-label-font-size: var(--score-gauge-label-font-size-big);
+  --score-gauge-label-line-height: var(--score-gauge-label-line-height-big);
   margin-top: 14px;
 }
 
@@ -1136,7 +1150,7 @@
 .lh-scores-header .lh-gauge--pwa__wrapper,
 .lh-sticky-header .lh-gauge__wrapper,
 .lh-sticky-header .lh-gauge--pwa__wrapper {
-  width: var(--score-container-width);
+  width: var(--score-gauge-wrapper-width);
 }
 
 .lh-scores-header .lh-gauge--pwa__wrapper {
@@ -1193,7 +1207,7 @@
 }
 
 .lh-category {
-  padding: var(--section-padding);
+  padding: var(--category-padding);
   max-width: var(--report-width);
   margin: 0 auto;
 }
@@ -1217,9 +1231,9 @@
 }
 
 .lh-category-header {
-  font-size: var(--header-font-size);
+  font-size: var(--category-header-font-size);
   min-height: var(--gauge-circle-size);
-  margin-bottom: var(--lh-section-vpadding);
+  margin-bottom: var(--lh-section-vertical-padding);
 }
 
 .lh-category-header .lh-score__gauge {
@@ -1229,7 +1243,7 @@
 }
 
 .lh-category-header .lh-audit__title {
-  font-size: var(--header-font-size);
+  font-size: var(--category-header-font-size);
   line-height: var(--header-line-height);
 }
 
@@ -1297,7 +1311,7 @@
 }
 
 .lh-table tbody tr:nth-child(odd) {
-  background-color: var(--lh-table-higlight-bg);
+  background-color: var(--lh-table-higlight-background-color);
 }
 
 .lh-table th,
@@ -1386,7 +1400,7 @@
   transform: translateY(var(--body-line-height));
 }
 .lh-chevron__line {
- stroke: var(--display-value-gray);
+ stroke: var(--chevron-line-stroke);
  stroke-width: var(--chevron-size);
  stroke-linecap: square;
  transform-origin: 50%;
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index ee4b388c69af..1b2eafccf907 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -159,7 +159,7 @@
     .lh-scores-container {
       display: flex;
       flex-direction: column;
-      padding: var(--header-padding);
+      padding: var(--scores-container-padding);
       position: relative;
       width: 100%;
     }
@@ -168,8 +168,8 @@
       --gauge-circle-size: 36px;
       --plugin-badge-size: 18px;
       --plugin-icon-size: 75%;
-      --score-container-width: 60px;
-      --score-number-font-size: 13px;
+      --score-gauge-wrapper-width: 60px;
+      --score-gauge-percentage-font-size: 13px;
       position: sticky;
       left: 0;
       right: 0;
@@ -177,7 +177,7 @@
       font-weight: 700;
       display: none;
       justify-content: center;
-      background-color: var(--color-sticky-header-bg);
+      background-color: var(--sticky-header-background-color);
       border-bottom: 1px solid var(--color-black-200);
       padding-top: var(--score-container-padding);
       padding-bottom: 4px;
@@ -201,9 +201,9 @@
     }
 
     .lh-highlighter {
-      width: var(--score-container-width);
+      width: var(--score-gauge-wrapper-width);
       height: 1px;
-      background: var(--color-highlighter-bg);
+      background-color: var(--highlighter-background-color);
       position: absolute;
       bottom: -5px;
     }
@@ -234,13 +234,13 @@
       display: flex;
       align-items: center;
       height: var(--topbar-height);
-      background-color: var(--topbar-bg);
+      background-color: var(--topbar-background-color);
       padding: var(--topbar-padding);
     }
 
     .lh-topbar__logo {
-      width: var(--topbar-icon-size);
-      height: var(--topbar-icon-size);
+      width: var(--topbar-logo-size);
+      height: var(--topbar-logo-size);
       user-select: none;
     }
     .lh-topbar__logo .shape {
@@ -494,7 +494,7 @@
 <template id="tmpl-lh-footer">
   <style>
     .lh-footer {
-      padding: var(--section-indent) calc(var(--default-padding) * 2);
+      padding: var(--footer-vertical-padding) calc(var(--default-padding) * 2);
       max-width: var(--report-width);
       margin: 0 auto;
     }
@@ -502,8 +502,8 @@
       text-align: center;
     }
     .lh-env__title {
-      font-size: var(--score-title-font-size-big);
-      line-height: var(--score-title-line-height-big);
+      font-size: var(--env-item-font-size-big);
+      line-height: var(--env-item-line-height-big);
       text-align: center;
       padding: var(--score-container-padding);
     }
@@ -516,11 +516,11 @@
       padding: 0;
     }
     .lh-env__items .lh-env__item:nth-child(2n) {
-      background: var(--env-item-bg);
+      background-color: var(--env-item-background-color);
     }
     .lh-env__item {
       display: flex;
-      padding: var(--env-tem-padding);
+      padding: var(--env-item-padding);
       position: relative;
     }
     span.lh-env__name {
@@ -782,7 +782,7 @@
 <template id="tmpl-lh-3p-filter">
   <style>
     .lh-3p-filter {
-      background: var(--lh-table-higlight-bg);
+      background-color: var(--lh-table-higlight-background-color);
       color: var(--medium-75-gray);
       float: right;
       padding: 6px;
@@ -815,7 +815,7 @@
           overflow: hidden;
           padding: 10px;
           border-bottom: none;
-          color: var(--subheader-color);
+          color: var(--snippet-color);
           background: var(--medium-50-gray);
           border: 1px solid var(--report-secondary-border-color);
         }
@@ -898,8 +898,8 @@
           display: inline-block;
           vertical-align: middle;
           margin-right: 4px;
-          width: var(--score-shape-size);
-          height: var(--score-shape-size);
+          width: var(--score-icon-size);
+          height: var(--score-icon-size);
           background-image: var(--fail-icon-url);
         }
         .lh-snippet__line-number {

From 05d02482271a5253f6a5e69c19252774385f81a4 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 10:30:04 -0700
Subject: [PATCH 02/15] pr changes

---
 lighthouse-core/report/html/report-styles.css | 43 ++++++++++---------
 lighthouse-core/report/html/templates.html    |  2 +-
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 7bd25881ecf6..517a6576063d 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -27,9 +27,10 @@
   across multiple components, either create more variables or just drop the "{component}-"
   part of the name. Append any modifiers at the end (ex: 'big', 'dark').
 
-  For colors: --color-{type}-{hue}
+  For colors: --color-{type}-{intensity}
 
-  Omit "-{hue}" if there is only one color of that type.
+  {intensity} is the Material Design tag - 700, A700, etc. Omit "-{intensity}" if there is only one
+  color of that type.
 */
 .lh-vars {
   --text-font-family: Roboto, Helvetica, Arial, sans-serif;
@@ -43,9 +44,9 @@
   --header-line-height: 24px;
   --audit-explanation-line-height: 16px;
   --default-padding: 12px;
-  --footer-vertical-padding: 16px;
+  --footer-padding-vertical: 16px;
   --audit-item-gap: 5px; /* TODO rename. */
-  --stackpack-horizontal-padding: 10px;
+  --stackpack-padding-horizontal: 10px;
   --secondary-text-color: var(--color-black-800);
   --informative-color: var(--color-blue-900);
   --medium-75-gray: #757575; /* TODO rename / switch to MD */
@@ -60,9 +61,9 @@
   --lh-tools-icon-color: var(--medium-75-gray);
   --lh-table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
   --lh-sparkline-height: 5px;
-  --lh-audit-vertical-padding: 8px;
-  --lh-audit-group-vertical-padding: 8px;
-  --lh-section-vertical-padding: 12px;
+  --lh-audit-padding-vertical: 8px;
+  --lh-audit-group-padding-vertical: 8px;
+  --lh-section-padding-vertical: 12px;
   --chevron-size: 12px;
   --inner-audit-left-padding: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)); /* TODO: rename */
 
@@ -233,7 +234,7 @@
   --audit-explanation-line-height: 14px;
   --default-padding: 12px;
   --category-padding: 12px;
-  --footer-vertical-padding: 8px;
+  --footer-padding-vertical: 8px;
 
   --gauge-circle-size-big: 72px;
   --gauge-circle-size: 64px;
@@ -253,9 +254,9 @@
   --score-gauge-label-line-height-big: 26px;
   --score-gauge-label-line-height: 20px;
 
-  --lh-audit-vertical-padding: 4px;
-  --lh-audit-group-vertical-padding: 12px;
-  --lh-section-vertical-padding: 8px;
+  --lh-audit-padding-vertical: 4px;
+  --lh-audit-group-padding-vertical: 12px;
+  --lh-section-padding-vertical: 8px;
 }
 
 .lh-devtools.lh-root {
@@ -335,9 +336,9 @@
 }
 
 .lh-audit__description, .lh-audit__stackpack {
-  --inner-audit-right-padding: var(--stackpack-horizontal-padding);
+  --inner-audit-padding-right: var(--stackpack-padding-horizontal);
   padding-left: var(--inner-audit-left-padding);
-  padding-right: var(--inner-audit-right-padding);
+  padding-right: var(--inner-audit-padding-right);
   padding-top: 8px;
   padding-bottom: 8px;
 }
@@ -499,7 +500,7 @@
   display: flex;
   align-items: center;
   font-weight: 500;
-  padding: var(--lh-audit-vertical-padding) 0;
+  padding: var(--lh-audit-padding-vertical) 0;
 }
 
 .lh-audit--load-opportunity .lh-audit__header {
@@ -590,7 +591,7 @@
 
 .lh-metrics__disclaimer {
   color: var(--medium-75-gray);
-  margin: var(--lh-section-vertical-padding) 0;
+  margin: var(--lh-section-padding-vertical) 0;
 }
 
 .lh-metric__description {
@@ -910,7 +911,7 @@
 
 .lh-audit-group__header {
   font-size: var(--body-font-size);
-  margin: 0 0 var(--lh-audit-group-vertical-padding);
+  margin: 0 0 var(--lh-audit-group-padding-vertical);
   /* When the header takes 100% width, the chevron becomes small. */
   max-width: calc(100% - var(--chevron-size));
 }
@@ -944,11 +945,11 @@
 .lh-audit-group--pwa-fast-reliable .lh-audit-group__header,
 .lh-audit-group--pwa-installable .lh-audit-group__header,
 .lh-audit-group--pwa-optimized .lh-audit-group__header {
-  margin-top: var(--lh-audit-group-vertical-padding);
+  margin-top: var(--lh-audit-group-padding-vertical);
 }
 
 .lh-audit-explanation {
-  margin: var(--lh-audit-vertical-padding) 0 calc(var(--lh-audit-vertical-padding) / 2);
+  margin: var(--lh-audit-padding-vertical) 0 calc(var(--lh-audit-padding-vertical) / 2);
   line-height: var(--audit-explanation-line-height);
 }
 
@@ -985,8 +986,8 @@
 .lh-warnings {
   --item-margin: calc(var(--body-line-height) / 6);
   color: var(--color-average);
-  margin: var(--lh-audit-vertical-padding) 0;
-  padding: calc(var(--lh-audit-vertical-padding) / 2) var(--lh-audit-vertical-padding);
+  margin: var(--lh-audit-padding-vertical) 0;
+  padding: calc(var(--lh-audit-padding-vertical) / 2) var(--lh-audit-padding-vertical);
 }
 .lh-warnings span {
   font-weight: bold;
@@ -1233,7 +1234,7 @@
 .lh-category-header {
   font-size: var(--category-header-font-size);
   min-height: var(--gauge-circle-size);
-  margin-bottom: var(--lh-section-vertical-padding);
+  margin-bottom: var(--lh-section-padding-vertical);
 }
 
 .lh-category-header .lh-score__gauge {
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index f0b01f565ec0..62100592823c 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -494,7 +494,7 @@
 <template id="tmpl-lh-footer">
   <style>
     .lh-footer {
-      padding: var(--footer-vertical-padding) calc(var(--default-padding) * 2);
+      padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);
       max-width: var(--report-width);
       margin: 0 auto;
     }

From 51492715026f527d8d1679906feac06edcfe2662 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 11:34:31 -0700
Subject: [PATCH 03/15] hue

---
 lighthouse-core/report/html/report-styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 517a6576063d..d74d1b370b1d 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -27,10 +27,10 @@
   across multiple components, either create more variables or just drop the "{component}-"
   part of the name. Append any modifiers at the end (ex: 'big', 'dark').
 
-  For colors: --color-{type}-{intensity}
+  For colors: --color-{hue}-{intensity}
 
   {intensity} is the Material Design tag - 700, A700, etc. Omit "-{intensity}" if there is only one
-  color of that type.
+  color of that hue.
 */
 .lh-vars {
   --text-font-family: Roboto, Helvetica, Arial, sans-serif;

From 611cc4be6bc281d126e52b01feb7377c7a966fb4 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 13:41:20 -0700
Subject: [PATCH 04/15] pr

---
 lighthouse-core/report/html/report-styles.css | 23 ++++++++++---------
 lighthouse-core/report/html/templates.html    |  6 ++---
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index d74d1b370b1d..61b5b00fb316 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -45,12 +45,13 @@
   --audit-explanation-line-height: 16px;
   --default-padding: 12px;
   --footer-padding-vertical: 16px;
-  --audit-item-gap: 5px; /* TODO rename. */
+  --audit-margin-horizontal: 5px;
   --stackpack-padding-horizontal: 10px;
   --secondary-text-color: var(--color-black-800);
   --informative-color: var(--color-blue-900);
-  --medium-75-gray: #757575; /* TODO rename / switch to MD */
-  --medium-50-gray: hsl(210, 17%, 98%); /* TODO rename / switch to MD */
+  --color-gray-600: #757575;
+  --color-gray-50: #FAFAFA;
+  --snippet-background-color: var(--color-gray-50);
   --report-secondary-border-color: #ebebeb;
   --chevron-line-stroke: hsl(216, 5%, 39%);
   --report-width: calc(60 * var(--body-font-size));
@@ -58,7 +59,7 @@
   --report-header-height: 161px;
   --lh-score-icon-background-size: 24px;
   --lh-tools-icon-size: var(--lh-score-icon-background-size);
-  --lh-tools-icon-color: var(--medium-75-gray);
+  --lh-tools-icon-color: var(--color-gray-600);
   --lh-table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
   --lh-sparkline-height: 5px;
   --lh-audit-padding-vertical: 8px;
@@ -183,8 +184,8 @@
 
   --informative-color: var(--color-blue-200);
 
-  --medium-50-gray: #757575;
-  --medium-75-gray: var(--color-white);
+  --color-gray-50: #757575;
+  --color-gray-600: var(--color-white);
 
   --color-hover: rgba(0, 0, 0, 0.2);
 
@@ -476,7 +477,7 @@
 .lh-audit__display-text,
 .lh-load-opportunity__sparkline,
 .lh-chevron-container {
-  margin: 0 var(--audit-item-gap);
+  margin: 0 var(--audit-margin-horizontal);
 }
 .lh-chevron-container {
   margin-right: 0;
@@ -489,7 +490,7 @@
 /* Prepend display text with em dash separator. But not in Opportunities. */
 .lh-audit__display-text:not(:empty):before {
   content: '—';
-  margin-right: var(--audit-item-gap);
+  margin-right: var(--audit-margin-horizontal);
 }
 .lh-audit-group.lh-audit-group--load-opportunities .lh-audit__display-text:not(:empty):before {
   display: none;
@@ -590,7 +591,7 @@
 }
 
 .lh-metrics__disclaimer {
-  color: var(--medium-75-gray);
+  color: var(--color-gray-600);
   margin: var(--lh-section-padding-vertical) 0;
 }
 
@@ -721,7 +722,7 @@
 }
 
 .lh-load-opportunity__header .lh-load-opportunity__col {
-  color: var(--medium-75-gray);
+  color: var(--color-gray-600);
   display: unset;
   line-height: calc(2.3 * var(--body-font-size));
 }
@@ -935,7 +936,7 @@
 }
 .lh-audit-group__header span.lh-audit-group__description::before {
   content: '—';
-  margin: 0px var(--audit-item-gap);
+  margin: 0px var(--audit-margin-horizontal);
 }
 
 .lh-clump > .lh-audit-group__header,
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 62100592823c..83b4ad2a201c 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -783,7 +783,7 @@
   <style>
     .lh-3p-filter {
       background-color: var(--lh-table-higlight-background-color);
-      color: var(--medium-75-gray);
+      color: var(--color-gray-600);
       float: right;
       padding: 6px;
     }
@@ -816,7 +816,7 @@
           padding: 10px;
           border-bottom: none;
           color: var(--snippet-color);
-          background: var(--medium-50-gray);
+          background-color: var(--snippet-background-color);
           border: 1px solid var(--report-secondary-border-color);
         }
         .lh-snippet__title {
@@ -909,7 +909,7 @@
           font-family: monospace;
           padding-right: 5px;
           margin-right: 5px;
-          color: var(--medium-75-gray);
+          color: var(--color-gray-600);
           user-select: none;
         }
       </style>

From e2b380ee4d2d2bbd6ecb80a85f2bd5d3b479a1b8 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 13:42:37 -0700
Subject: [PATCH 05/15] rename

---
 lighthouse-core/report/html/report-styles.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 61b5b00fb316..28264e8f9ef8 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -66,7 +66,7 @@
   --lh-audit-group-padding-vertical: 8px;
   --lh-section-padding-vertical: 12px;
   --chevron-size: 12px;
-  --inner-audit-left-padding: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)); /* TODO: rename */
+  --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
 
   /* Palette using Material Design Colors
    * https://www.materialui.co/colors */
@@ -338,7 +338,7 @@
 
 .lh-audit__description, .lh-audit__stackpack {
   --inner-audit-padding-right: var(--stackpack-padding-horizontal);
-  padding-left: var(--inner-audit-left-padding);
+  padding-left: var(--audit-description-padding-left);
   padding-right: var(--inner-audit-padding-right);
   padding-top: 8px;
   padding-bottom: 8px;
@@ -348,7 +348,7 @@
   font-size: var(--body-font-size);
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
-  margin-left: var(--inner-audit-left-padding);
+  margin-left: var(--audit-description-padding-left);
   /* whatever the .lh-details side margins are */
   width: 100%;
 }
@@ -1302,7 +1302,7 @@
   --image-preview-size: 24px;
   border-collapse: collapse;
   /* Can't assign padding to table, so shorten the width instead. */
-  width: calc(100% - var(--inner-audit-left-padding));
+  width: calc(100% - var(--audit-description-padding-left));
 }
 
 .lh-table thead th {

From 93e4d594900559f7223d3196ee405e359af49f5d Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 13:44:31 -0700
Subject: [PATCH 06/15] a700

---
 lighthouse-core/report/html/report-styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 28264e8f9ef8..051970b0c17d 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -78,7 +78,7 @@
   --color-black-800: #424242;
   --color-black-900: #212121;
   --color-black: #000000;
-  --color-blue: #2962FF; /* A700. */
+  --color-blue-A700: #2962FF;
   --color-green-700: #018642;
   --color-green: #0CCE6B; /* TODO: this is not a MD color */
   --color-orange-700: #D04900;
@@ -644,7 +644,7 @@
 }
 .lh-metrics-toggle__input:not(:checked) + label .lh-metrics-toggle__icon--less,
 .lh-metrics-toggle__input:checked + label .lh-metrics-toggle__icon--more {
-  background-color: var(--color-blue);
+  background-color: var(--color-blue-A700);
   --metric-toggle-lines-fill: var(--color-white);
 }
 .lh-metrics-toggle__lines {

From 26854cc2794eb2df48e1346ed232ad740456fc02 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 13:50:07 -0700
Subject: [PATCH 07/15] remove --lh-

---
 clients/extension/styles/lighthouse.css       | 12 ++---
 lighthouse-core/report/html/report-styles.css | 44 +++++++++----------
 lighthouse-core/report/html/templates.html    |  8 ++--
 lighthouse-viewer/app/styles/viewer.css       |  2 +-
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/clients/extension/styles/lighthouse.css b/clients/extension/styles/lighthouse.css
index cb54d65ef170..8ab03062c28e 100644
--- a/clients/extension/styles/lighthouse.css
+++ b/clients/extension/styles/lighthouse.css
@@ -19,8 +19,8 @@
 }
 
 :root {
-  --lh-blue-color: #304ffe;
-  --lh-bg-color: #f5f5f5;
+  --blue-color: #304ffe;
+  --bg-color: #f5f5f5;
 }
 
 * {
@@ -32,7 +32,7 @@ html, body {
   margin: 0;
   width: 390px;
   height: 200px;
-  background-color: var(--lh-bg-color);
+  background-color: var(--bg-color);
   color: #212121;
 }
 
@@ -91,7 +91,7 @@ html, body {
   height: 70px;
   display: flex;
   padding: 16px;
-  background-color: var(--lh-blue-color);
+  background-color: var(--blue-color);
   justify-content: space-around;
   align-items: flex-end;
 }
@@ -142,7 +142,7 @@ html, body {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--lh-bg-color);
+  background-color: var(--bg-color);
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -179,7 +179,7 @@ html, body {
 }
 
 .feedback {
-  background-color: var(--lh-blue-color);
+  background-color: var(--blue-color);
   position: absolute;
   color: #fff;
   bottom: 10px;
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 051970b0c17d..58dd1c9cfe8b 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -57,14 +57,14 @@
   --report-width: calc(60 * var(--body-font-size));
   --report-min-width: 400px;
   --report-header-height: 161px;
-  --lh-score-icon-background-size: 24px;
-  --lh-tools-icon-size: var(--lh-score-icon-background-size);
-  --lh-tools-icon-color: var(--color-gray-600);
-  --lh-table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
-  --lh-sparkline-height: 5px;
-  --lh-audit-padding-vertical: 8px;
-  --lh-audit-group-padding-vertical: 8px;
-  --lh-section-padding-vertical: 12px;
+  --score-icon-background-size: 24px;
+  --tools-icon-size: var(--score-icon-background-size);
+  --tools-icon-color: var(--color-gray-600);
+  --table-higlight-background-color: hsla(0, 0%, 75%, 0.1);
+  --sparkline-height: 5px;
+  --audit-padding-vertical: 8px;
+  --audit-group-padding-vertical: 8px;
+  --section-padding-vertical: 12px;
   --chevron-size: 12px;
   --audit-description-padding-left: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right));
 
@@ -255,9 +255,9 @@
   --score-gauge-label-line-height-big: 26px;
   --score-gauge-label-line-height: 20px;
 
-  --lh-audit-padding-vertical: 4px;
-  --lh-audit-group-padding-vertical: 12px;
-  --lh-section-padding-vertical: 8px;
+  --audit-padding-vertical: 4px;
+  --audit-group-padding-vertical: 12px;
+  --section-padding-vertical: 8px;
 }
 
 .lh-devtools.lh-root {
@@ -501,7 +501,7 @@
   display: flex;
   align-items: center;
   font-weight: 500;
-  padding: var(--lh-audit-padding-vertical) 0;
+  padding: var(--audit-padding-vertical) 0;
 }
 
 .lh-audit--load-opportunity .lh-audit__header {
@@ -592,7 +592,7 @@
 
 .lh-metrics__disclaimer {
   color: var(--color-gray-600);
-  margin: var(--lh-section-padding-vertical) 0;
+  margin: var(--section-padding-vertical) 0;
 }
 
 .lh-metric__description {
@@ -751,11 +751,11 @@
 
 .lh-load-opportunity__sparkline {
   flex: 1;
-  margin-top: calc((var(--body-line-height) - var(--lh-sparkline-height)) / 2);
+  margin-top: calc((var(--body-line-height) - var(--sparkline-height)) / 2);
 }
 
 .lh-sparkline {
-  height: var(--lh-sparkline-height);
+  height: var(--sparkline-height);
   width: 100%;
 }
 
@@ -912,7 +912,7 @@
 
 .lh-audit-group__header {
   font-size: var(--body-font-size);
-  margin: 0 0 var(--lh-audit-group-padding-vertical);
+  margin: 0 0 var(--audit-group-padding-vertical);
   /* When the header takes 100% width, the chevron becomes small. */
   max-width: calc(100% - var(--chevron-size));
 }
@@ -946,11 +946,11 @@
 .lh-audit-group--pwa-fast-reliable .lh-audit-group__header,
 .lh-audit-group--pwa-installable .lh-audit-group__header,
 .lh-audit-group--pwa-optimized .lh-audit-group__header {
-  margin-top: var(--lh-audit-group-padding-vertical);
+  margin-top: var(--audit-group-padding-vertical);
 }
 
 .lh-audit-explanation {
-  margin: var(--lh-audit-padding-vertical) 0 calc(var(--lh-audit-padding-vertical) / 2);
+  margin: var(--audit-padding-vertical) 0 calc(var(--audit-padding-vertical) / 2);
   line-height: var(--audit-explanation-line-height);
 }
 
@@ -987,8 +987,8 @@
 .lh-warnings {
   --item-margin: calc(var(--body-line-height) / 6);
   color: var(--color-average);
-  margin: var(--lh-audit-padding-vertical) 0;
-  padding: calc(var(--lh-audit-padding-vertical) / 2) var(--lh-audit-padding-vertical);
+  margin: var(--audit-padding-vertical) 0;
+  padding: calc(var(--audit-padding-vertical) / 2) var(--audit-padding-vertical);
 }
 .lh-warnings span {
   font-weight: bold;
@@ -1235,7 +1235,7 @@
 .lh-category-header {
   font-size: var(--category-header-font-size);
   min-height: var(--gauge-circle-size);
-  margin-bottom: var(--lh-section-padding-vertical);
+  margin-bottom: var(--section-padding-vertical);
 }
 
 .lh-category-header .lh-score__gauge {
@@ -1313,7 +1313,7 @@
 }
 
 .lh-table tbody tr:nth-child(odd) {
-  background-color: var(--lh-table-higlight-background-color);
+  background-color: var(--table-higlight-background-color);
 }
 
 .lh-table th,
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 83b4ad2a201c..bfbd8e78b12e 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -258,8 +258,8 @@
       will-change: transform;
     }
     .lh-tools__button {
-      width: var(--lh-tools-icon-size);
-      height: var(--lh-tools-icon-size);
+      width: var(--tools-icon-size);
+      height: var(--tools-icon-size);
       cursor: pointer;
       margin-right: 5px;
     }
@@ -273,7 +273,7 @@
       display: none;
     }
     .lh-tools__button svg {
-      fill: var(--lh-tools-icon-color);
+      fill: var(--tools-icon-color);
     }
     .dark .lh-tools__button svg {
       filter: invert(1);
@@ -782,7 +782,7 @@
 <template id="tmpl-lh-3p-filter">
   <style>
     .lh-3p-filter {
-      background-color: var(--lh-table-higlight-background-color);
+      background-color: var(--table-higlight-background-color);
       color: var(--color-gray-600);
       float: right;
       padding: 6px;
diff --git a/lighthouse-viewer/app/styles/viewer.css b/lighthouse-viewer/app/styles/viewer.css
index a4925187f355..85ce03efccbf 100644
--- a/lighthouse-viewer/app/styles/viewer.css
+++ b/lighthouse-viewer/app/styles/viewer.css
@@ -9,7 +9,7 @@
 }
 
 :root {
-  --lh-background-color: #304ffe;
+  --background-color: #304ffe;
 }
 
 .drop_zone {

From 87dc30435e7a6bcdb81ab24e1a5859c416ebbaee Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 10 Jun 2019 14:09:00 -0700
Subject: [PATCH 08/15] revert extension changes

---
 clients/extension/styles/lighthouse.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/clients/extension/styles/lighthouse.css b/clients/extension/styles/lighthouse.css
index 8ab03062c28e..cb54d65ef170 100644
--- a/clients/extension/styles/lighthouse.css
+++ b/clients/extension/styles/lighthouse.css
@@ -19,8 +19,8 @@
 }
 
 :root {
-  --blue-color: #304ffe;
-  --bg-color: #f5f5f5;
+  --lh-blue-color: #304ffe;
+  --lh-bg-color: #f5f5f5;
 }
 
 * {
@@ -32,7 +32,7 @@ html, body {
   margin: 0;
   width: 390px;
   height: 200px;
-  background-color: var(--bg-color);
+  background-color: var(--lh-bg-color);
   color: #212121;
 }
 
@@ -91,7 +91,7 @@ html, body {
   height: 70px;
   display: flex;
   padding: 16px;
-  background-color: var(--blue-color);
+  background-color: var(--lh-blue-color);
   justify-content: space-around;
   align-items: flex-end;
 }
@@ -142,7 +142,7 @@ html, body {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--bg-color);
+  background-color: var(--lh-bg-color);
   pointer-events: none;
   display: flex;
   flex-direction: column;
@@ -179,7 +179,7 @@ html, body {
 }
 
 .feedback {
-  background-color: var(--blue-color);
+  background-color: var(--lh-blue-color);
   position: absolute;
   color: #fff;
   bottom: 10px;

From 79a43ffefe5d18a9e11205e2a30e5cfd23390a88 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 11 Jun 2019 17:25:19 -0700
Subject: [PATCH 09/15] --report

---
 lighthouse-core/report/html/report-styles.css | 58 +++++++++----------
 lighthouse-core/report/html/templates.html    |  6 +-
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 106b56b45208..0b5f1304d46a 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -35,10 +35,10 @@
 .lh-vars {
   --text-font-family: Roboto, Helvetica, Arial, sans-serif;
   --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --body-background-color: #fff;
-  --body-text-color: var(--color-black-900);
-  --body-font-size: 16px;
-  --body-line-height: 24px;
+  --report-background-color: #fff;
+  --report-text-color: var(--color-black-900);
+  --report-font-size: 16px;
+  --report-line-height: 24px;
   --snippet-color: hsl(206, 6%, 25%);
   --category-header-font-size: 20px;
   --header-line-height: 24px;
@@ -54,7 +54,7 @@
   --snippet-background-color: var(--color-gray-50);
   --report-secondary-border-color: #ebebeb;
   --chevron-line-stroke: hsl(216, 5%, 39%);
-  --report-width: calc(60 * var(--body-font-size));
+  --report-width: calc(60 * var(--report-font-size));
   --report-min-width: 400px;
   --report-header-height: 161px;
   --score-icon-background-size: 24px;
@@ -135,8 +135,8 @@
   --color-fail: var(--color-red);
   --color-pass-secondary: var(--color-green-700);
   --color-pass: var(--color-green);
-  --sticky-header-background-color: var(--body-background-color);
-  --highlighter-background-color: var(--body-text-color);
+  --sticky-header-background-color: var(--report-background-color);
+  --highlighter-background-color: var(--report-text-color);
 
   --color-hover: #FAFAFA;
   --metric-toggle-lines-fill: #7F7F7F;
@@ -177,8 +177,8 @@
     --env-item-background-color: var(--color-black);
     --report-secondary-border-color: var(--color-black-200);
 
-    --body-background-color: var(--color-black-900);
-    --body-text-color: var(--color-black-100);
+    --report-background-color: var(--color-black-900);
+    --report-text-color: var(--color-black-100);
     --secondary-text-color: var(--color-black-400);
 
     --plugin-icon-url: var(--plugin-icon-url-dark);
@@ -199,8 +199,8 @@
 @media only screen and (max-width: 480px) {
   .lh-vars {
     --audit-group-margin-bottom: 20px;
-    --body-font-size: 14px;
-    --body-line-height: 20px;
+    --report-font-size: 14px;
+    --report-line-height: 20px;
     --env-name-min-width: 120px;
     --gauge-circle-size-big: 96px;
     --gauge-circle-size: 72px;
@@ -230,8 +230,8 @@
 .lh-vars.lh-devtools {
   --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --body-font-size: 12px;
-  --body-line-height: 20px;
+  --report-font-size: 12px;
+  --report-line-height: 20px;
   --category-header-font-size: 16px;
   --header-line-height: 20px;
   --audit-explanation-line-height: 14px;
@@ -286,12 +286,12 @@
 
 .lh-root {
   font-family: var(--text-font-family);
-  font-size: var(--body-font-size);
+  font-size: var(--report-font-size);
   margin: 0;
-  line-height: var(--body-line-height);
-  background: var(--body-background-color);
+  line-height: var(--report-line-height);
+  background: var(--report-background-color);
   scroll-behavior: smooth;
-  color: var(--body-text-color);
+  color: var(--report-text-color);
 }
 
 .lh-root :focus {
@@ -347,7 +347,7 @@
 }
 
 .lh-details {
-  font-size: var(--body-font-size);
+  font-size: var(--report-font-size);
   margin-top: var(--default-padding);
   margin-bottom: var(--default-padding);
   margin-left: var(--audit-description-padding-left);
@@ -469,7 +469,7 @@
   color: var(--secondary-text-color);
 }
 .lh-category-header__description  {
-  font-size: var(--body-font-size);
+  font-size: var(--report-font-size);
   text-align: center;
   margin: 0px auto;
   max-width: 400px;
@@ -726,7 +726,7 @@
 .lh-load-opportunity__header .lh-load-opportunity__col {
   color: var(--color-gray-600);
   display: unset;
-  line-height: calc(2.3 * var(--body-font-size));
+  line-height: calc(2.3 * var(--report-font-size));
 }
 
 .lh-load-opportunity__col {
@@ -745,7 +745,7 @@
 
 .lh-audit--load-opportunity .lh-audit__display-text {
   text-align: right;
-  flex: 0 0 calc(3 * var(--body-font-size));
+  flex: 0 0 calc(3 * var(--report-font-size));
 }
 
 
@@ -753,7 +753,7 @@
 
 .lh-load-opportunity__sparkline {
   flex: 1;
-  margin-top: calc((var(--body-line-height) - var(--sparkline-height)) / 2);
+  margin-top: calc((var(--report-line-height) - var(--sparkline-height)) / 2);
 }
 
 .lh-sparkline {
@@ -909,11 +909,11 @@
   font-weight: bold;
 }
 .lh-audit-group__header .lh-chevron {
-  margin-top: calc((var(--body-line-height) - 5px) / 2);
+  margin-top: calc((var(--report-line-height) - 5px) / 2);
 }
 
 .lh-audit-group__header {
-  font-size: var(--body-font-size);
+  font-size: var(--report-font-size);
   margin: 0 0 var(--audit-group-padding-vertical);
   /* When the header takes 100% width, the chevron becomes small. */
   max-width: calc(100% - var(--chevron-size));
@@ -987,7 +987,7 @@
 }
 
 .lh-warnings {
-  --item-margin: calc(var(--body-line-height) / 6);
+  --item-margin: calc(var(--report-line-height) / 6);
   color: var(--color-average);
   margin: var(--audit-padding-vertical) 0;
   padding: calc(var(--audit-padding-vertical) / 2) var(--audit-padding-vertical);
@@ -1139,7 +1139,7 @@
   line-height: var(--score-gauge-label-line-height);
   margin-top: 10px;
   text-align: center;
-  color: var(--body-text-color);
+  color: var(--report-text-color);
 }
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
@@ -1376,7 +1376,7 @@
 }
 
 .lh-text__url-host {
-  margin-left: calc(var(--body-font-size) / 2);
+  margin-left: calc(var(--report-font-size) / 2);
   opacity: 0.6;
   font-size: 90%
 }
@@ -1396,12 +1396,12 @@
   --chevron-angle-right: -42deg;
   width: var(--chevron-size);
   height: var(--chevron-size);
-  margin-top: calc((var(--body-line-height) - 12px) / 2);
+  margin-top: calc((var(--report-line-height) - 12px) / 2);
 }
 
 .lh-chevron__lines {
   transition: transform 0.4s;
-  transform: translateY(var(--body-line-height));
+  transform: translateY(var(--report-line-height));
 }
 .lh-chevron__line {
  stroke: var(--chevron-line-stroke);
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 85f0ff54307a..ec676facbf9c 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -247,13 +247,13 @@
       user-select: none;
     }
     .lh-topbar__logo .shape {
-      fill: var(--body-text-color);
+      fill: var(--report-text-color);
     }
 
     .lh-topbar__url {
       margin: var(--topbar-padding);
       text-decoration: none;
-      color: var(--body-text-color);
+      color: var(--report-text-color);
     }
 
     .lh-tools {
@@ -296,7 +296,7 @@
     }
     .lh-tools__dropdown {
       position: absolute;
-      background-color: var(--body-background-color);
+      background-color: var(--report-background-color);
       border: 1px solid var(--report-border-color);
       border-radius: 3px;
       padding: calc(var(--default-padding) / 2) 0;

From d7a3b50f022e33868ebfc439ea7a5ed2990dfa72 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 11 Jun 2019 17:39:41 -0700
Subject: [PATCH 10/15] revert viewer changes

---
 lighthouse-viewer/app/styles/viewer.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lighthouse-viewer/app/styles/viewer.css b/lighthouse-viewer/app/styles/viewer.css
index 85ce03efccbf..a4925187f355 100644
--- a/lighthouse-viewer/app/styles/viewer.css
+++ b/lighthouse-viewer/app/styles/viewer.css
@@ -9,7 +9,7 @@
 }
 
 :root {
-  --background-color: #304ffe;
+  --lh-background-color: #304ffe;
 }
 
 .drop_zone {

From 8e6209a0f212fd91f862f61b9177e8f043ed11ba Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 11 Jun 2019 17:53:47 -0700
Subject: [PATCH 11/15] there is no MD black

---
 lighthouse-core/report/html/report-styles.css | 73 +++++++++----------
 lighthouse-core/report/html/templates.html    |  8 +-
 2 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 0b5f1304d46a..894b607ccc73 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -36,10 +36,10 @@
   --text-font-family: Roboto, Helvetica, Arial, sans-serif;
   --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --report-background-color: #fff;
-  --report-text-color: var(--color-black-900);
+  --report-text-color: var(--color-gray-900);
   --report-font-size: 16px;
   --report-line-height: 24px;
-  --snippet-color: hsl(206, 6%, 25%);
+  --snippet-color: var(--color-gray-800);
   --category-header-font-size: 20px;
   --header-line-height: 24px;
   --audit-explanation-line-height: 16px;
@@ -47,10 +47,8 @@
   --footer-padding-vertical: 16px;
   --audit-margin-horizontal: 5px;
   --stackpack-padding-horizontal: 10px;
-  --secondary-text-color: var(--color-black-800);
+  --secondary-text-color: var(--color-gray-800);
   --informative-color: var(--color-blue-900);
-  --color-gray-600: #757575;
-  --color-gray-50: #FAFAFA;
   --snippet-background-color: var(--color-gray-50);
   --report-secondary-border-color: #ebebeb;
   --chevron-line-stroke: hsl(216, 5%, 39%);
@@ -70,14 +68,15 @@
 
   /* Palette using Material Design Colors
    * https://www.materialui.co/colors */
-  --color-black-100: #F5F5F5;
-  --color-black-200: #E0E0E0;
-  --color-black-400: #BDBDBD;
-  --color-black-500: #9E9E9E;
-  --color-black-600: #757575;
-  --color-black-800: #424242;
-  --color-black-900: #212121;
-  --color-black: #000000;
+  --color-gray-50: #FAFAFA;
+  --color-gray-100: #F5F5F5;
+  --color-gray-200: #E0E0E0;
+  --color-gray-400: #BDBDBD;
+  --color-gray-500: #9E9E9E;
+  --color-gray-600: #757575;
+  --color-gray-800: #424242;
+  --color-gray-900: #212121;
+  --color-gray: #000000;
   --color-blue-A700: #2962FF;
   --color-green-700: #018642;
   --color-green: #0CCE6B; /* TODO: this is not a MD color */
@@ -92,7 +91,7 @@
   --color-teal-600: #00897B;
 
   --audit-group-margin-bottom: 40px;
-  --env-item-background-color: var(--color-black-100);
+  --env-item-background-color: var(--color-gray-100);
   --env-name-min-width: 220px;
   --env-item-padding: 10px 0px;
   --env-item-font-size: 28px;
@@ -123,11 +122,11 @@
   --scorescale-height: 6px;
   --scorescale-width: 18px;
   --category-padding: 40px;
-  --topbar-background-color: var(--color-black-100);
+  --topbar-background-color: var(--color-gray-100);
   --topbar-height: 32px;
   --topbar-logo-size: 24px;
   --topbar-padding: 0 8px;
-  --metrics-toggle-background-color: var(--color-black-200);
+  --metrics-toggle-background-color: var(--color-gray-200);
 
   --color-average-secondary: var(--color-orange-700);
   --color-average: var(--color-orange);
@@ -168,18 +167,18 @@
     --color-teal-600: var(--color-cyan-500);
     --color-orange-700: var(--color-orange);
 
-    --color-black-200: var(--color-black-800);
-    --color-black-400: var(--color-black-600);
-    --color-black-600: var(--color-black-500);
+    --color-gray-200: var(--color-gray-800);
+    --color-gray-400: var(--color-gray-600);
+    --color-gray-600: var(--color-gray-500);
 
-    --topbar-background-color: var(--color-black);
-    --plugin-badge-background-color: var(--color-black-800);
-    --env-item-background-color: var(--color-black);
-    --report-secondary-border-color: var(--color-black-200);
+    --topbar-background-color: var(--color-gray);
+    --plugin-badge-background-color: var(--color-gray-800);
+    --env-item-background-color: var(--color-gray);
+    --report-secondary-border-color: var(--color-gray-200);
 
-    --report-background-color: var(--color-black-900);
-    --report-text-color: var(--color-black-100);
-    --secondary-text-color: var(--color-black-400);
+    --report-background-color: var(--color-gray-900);
+    --report-text-color: var(--color-gray-100);
+    --secondary-text-color: var(--color-gray-400);
 
     --plugin-icon-url: var(--plugin-icon-url-dark);
 
@@ -442,12 +441,12 @@
 
 .lh-audit--manual .lh-audit__display-text,
 .lh-audit--notapplicable .lh-audit__display-text {
-  color: var(--color-black-600);
+  color: var(--color-gray-600);
 }
 .lh-audit--manual .lh-audit__score-icon,
 .lh-audit--notapplicable .lh-audit__score-icon {
   border-radius: 100%;
-  background: var(--color-black-400);
+  background: var(--color-gray-400);
 }
 
 .lh-audit--error .lh-audit__score-icon {
@@ -455,13 +454,13 @@
 }
 
 .lh-audit--informative .lh-audit__display-text {
-  color: var(--color-black-600);
+  color: var(--color-gray-600);
 }
 
 .lh-audit--informative .lh-audit__score-icon {
   border: none;
   border-radius: 100%;
-  background: var(--color-black-400);
+  background: var(--color-gray-400);
 }
 
 .lh-audit__description,
@@ -905,7 +904,7 @@
 }
 
 .lh-audit-group__itemcount {
-  color: var(--color-black-600);
+  color: var(--color-gray-600);
   font-weight: bold;
 }
 .lh-audit-group__header .lh-chevron {
@@ -929,12 +928,12 @@
 
 .lh-audit-group__header span.lh-audit-group__itemcount {
   font-weight: bold;
-  color: var(--color-black-600);
+  color: var(--color-gray-600);
 }
 
 .lh-audit-group__header span.lh-audit-group__description {
   font-weight: 500;
-  color: var(--color-black-600);
+  color: var(--color-gray-600);
 }
 .lh-audit-group__header span.lh-audit-group__description::before {
   content: '—';
@@ -1165,7 +1164,7 @@
 .lh-scorescale {
   display: inline-flex;
   margin: 12px auto 0 auto;
-  border: 1px solid var(--color-black-200);
+  border: 1px solid var(--color-gray-200);
   border-radius: 20px;
   padding: 8px 8px;
 }
@@ -1217,11 +1216,11 @@
 }
 
 .lh-category-wrapper {
-  border-bottom: 1px solid var(--color-black-200);
+  border-bottom: 1px solid var(--color-gray-200);
 }
 
 .lh-category-wrapper:first-of-type {
-  border-top: 1px solid var(--color-black-200);
+  border-top: 1px solid var(--color-gray-200);
 }
 
 /* section hash link jump should preserve fixed header
@@ -1309,7 +1308,7 @@
 
 .lh-table thead th {
   font-weight: normal;
-  color: var(--color-black-600);
+  color: var(--color-gray-600);
   /* See text-wrapping comment on .lh-container. */
   word-break: normal;
 }
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index ec676facbf9c..b54e70d4c2e9 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -178,7 +178,7 @@
       display: none;
       justify-content: center;
       background-color: var(--sticky-header-background-color);
-      border-bottom: 1px solid var(--color-black-200);
+      border-bottom: 1px solid var(--color-gray-200);
       padding-top: var(--score-container-padding);
       padding-bottom: 4px;
       z-index: 1;
@@ -320,7 +320,7 @@
     }
     .lh-tools__dropdown a:hover,
     .lh-tools__dropdown a:focus {
-      background-color: var(--color-black-200);
+      background-color: var(--color-gray-200);
       outline: none;
     }
     .lh-tools__dropdown .report-icon {
@@ -332,7 +332,7 @@
       text-indent: 18px;
     }
     .dark .report-icon {
-      color: var(--color-black-900);
+      color: var(--color-gray-900);
       filter: invert(1);
     }
     .dark .lh-tools__dropdown a:hover,
@@ -593,7 +593,7 @@
     }
 
     .lh-gauge--pwa__disc {
-      fill: var(--color-black-200);
+      fill: var(--color-gray-200);
     }
 
     .lh-gauge--pwa__logo--primary-color {

From ac71f78462fcde16fb3cd934b449d0f5532c815b Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 11 Jun 2019 17:56:03 -0700
Subject: [PATCH 12/15] chevron dark mode

---
 lighthouse-core/report/html/report-styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 894b607ccc73..71adab5c1be1 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -51,7 +51,7 @@
   --informative-color: var(--color-blue-900);
   --snippet-background-color: var(--color-gray-50);
   --report-secondary-border-color: #ebebeb;
-  --chevron-line-stroke: hsl(216, 5%, 39%);
+  --chevron-line-stroke: var(--color-gray-600);
   --report-width: calc(60 * var(--report-font-size));
   --report-min-width: 400px;
   --report-header-height: 161px;

From 72eace290ee5648e82a76095053e0e30f65d33dd Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 11 Jun 2019 17:58:07 -0700
Subject: [PATCH 13/15] fix color gray dark inversion

---
 lighthouse-core/report/html/report-styles.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 71adab5c1be1..9edfd55f5317 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -185,7 +185,6 @@
     --informative-color: var(--color-blue-200);
 
     --color-gray-50: #757575;
-    --color-gray-600: var(--color-white);
 
     --color-hover: rgba(0, 0, 0, 0.2);
 

From f4469bc8fa69d84a0ded16749c991e8ed2f75556 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Fri, 14 Jun 2019 13:07:40 -0700
Subject: [PATCH 14/15] pr

---
 lighthouse-core/report/html/report-styles.css | 54 +++++++++----------
 lighthouse-core/report/html/templates.html    |  6 +--
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index f40cb42b78e4..a7a3b558dc93 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -107,17 +107,17 @@
   --pwa-icon-margin: 0 6px 0 -2px;
   --pwa-icon-size: var(--topbar-logo-size);
   --score-container-padding: 8px;
-  --score-gauge-wrapper-width: 148px;
-  --score-gauge-percentage-font-size-big: 38px;
-  --score-gauge-percentage-font-size: 28px;
+  --gauge-wrapper-width: 148px;
+  --gauge-percentage-font-size-big: 38px;
+  --gauge-percentage-font-size: 28px;
   --score-icon-margin-left: 4px;
   --score-icon-margin-right: 12px;
   --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
   --score-icon-size: 12px;
-  --score-gauge-label-font-size-big: 28px;
-  --score-gauge-label-font-size: 20px;
-  --score-gauge-label-line-height-big: 36px;
-  --score-gauge-label-line-height: 26px;
+  --gauge-label-font-size-big: 28px;
+  --gauge-label-font-size: 20px;
+  --gauge-label-line-height-big: 36px;
+  --gauge-label-line-height: 26px;
   --scorescale-height: 6px;
   --scorescale-width: 18px;
   --category-padding: 40px;
@@ -204,15 +204,15 @@
     --header-padding: 16px 0 16px 0;
     --plugin-icon-size: 75%;
     --pwa-icon-margin: 0 7px 0 -3px;
-    --score-gauge-wrapper-width: 112px;
-    --score-gauge-percentage-font-size-big: 34px;
-    --score-gauge-percentage-font-size: 26px;
+    --gauge-wrapper-width: 112px;
+    --gauge-percentage-font-size-big: 34px;
+    --gauge-percentage-font-size: 26px;
     --score-icon-margin-left: 2px;
     --score-icon-size: 10px;
-    --score-gauge-label-font-size-big: 22px;
-    --score-gauge-label-font-size: 14px;
-    --score-gauge-label-line-height-big: 26px;
-    --score-gauge-label-line-height: 20px;
+    --gauge-label-font-size-big: 22px;
+    --gauge-label-font-size: 14px;
+    --gauge-label-line-height-big: 26px;
+    --gauge-label-line-height: 20px;
     --category-padding: 24px;
     --topbar-height: 28px;
     --topbar-logo-size: 20px;
@@ -244,15 +244,15 @@
   --header-padding: 16px 0 16px 0;
   --plugin-icon-size: 75%;
   --pwa-icon-margin: 0 7px 0 -3px;
-  --score-gauge-wrapper-width: 97px;
-  --score-gauge-percentage-font-size-big: 34px;
-  --score-gauge-percentage-font-size: 26px;
+  --gauge-wrapper-width: 97px;
+  --gauge-percentage-font-size-big: 34px;
+  --gauge-percentage-font-size: 26px;
   --score-icon-margin-left: 2px;
   --score-icon-size: 10px;
-  --score-gauge-label-font-size-big: 22px;
-  --score-gauge-label-font-size: 14px;
-  --score-gauge-label-line-height-big: 26px;
-  --score-gauge-label-line-height: 20px;
+  --gauge-label-font-size-big: 22px;
+  --gauge-label-font-size: 14px;
+  --gauge-label-line-height-big: 26px;
+  --gauge-label-line-height: 20px;
 
   --audit-padding-vertical: 4px;
   --audit-group-padding-vertical: 12px;
@@ -1112,7 +1112,7 @@
 
 .lh-category .lh-gauge__percentage {
   --gauge-circle-size: var(--gauge-circle-size-big);
-  --score-gauge-percentage-font-size: var(--score-gauge-percentage-font-size-big);
+  --gauge-percentage-font-size: var(--gauge-percentage-font-size-big);
 }
 
 .lh-gauge__wrapper {
@@ -1132,8 +1132,8 @@
 }
 
 .lh-gauge__label {
-  font-size: var(--score-gauge-label-font-size);
-  line-height: var(--score-gauge-label-line-height);
+  font-size: var(--gauge-label-font-size);
+  line-height: var(--gauge-label-line-height);
   margin-top: 10px;
   text-align: center;
   color: var(--report-text-color);
@@ -1141,8 +1141,8 @@
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
 .lh-category .lh-gauge__label {
-  --score-gauge-label-font-size: var(--score-gauge-label-font-size-big);
-  --score-gauge-label-line-height: var(--score-gauge-label-line-height-big);
+  --gauge-label-font-size: var(--gauge-label-font-size-big);
+  --gauge-label-line-height: var(--gauge-label-line-height-big);
   margin-top: 14px;
 }
 
@@ -1151,7 +1151,7 @@
 .lh-scores-header .lh-gauge--pwa__wrapper,
 .lh-sticky-header .lh-gauge__wrapper,
 .lh-sticky-header .lh-gauge--pwa__wrapper {
-  width: var(--score-gauge-wrapper-width);
+  width: var(--gauge-wrapper-width);
 }
 
 .lh-scores-header .lh-gauge--pwa__wrapper {
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index d08913b79575..83d8de757476 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -168,8 +168,8 @@
       --gauge-circle-size: 36px;
       --plugin-badge-size: 18px;
       --plugin-icon-size: 75%;
-      --score-gauge-wrapper-width: 60px;
-      --score-gauge-percentage-font-size: 13px;
+      --gauge-wrapper-width: 60px;
+      --gauge-percentage-font-size: 13px;
       position: sticky;
       left: 0;
       right: 0;
@@ -202,7 +202,7 @@
     }
 
     .lh-highlighter {
-      width: var(--score-gauge-wrapper-width);
+      width: var(--gauge-wrapper-width);
       height: 1px;
       background-color: var(--highlighter-background-color);
       /* Position at bottom of first gauge in sticky header. */

From 9669e2a21f3e42efcd69dbe976ad554942f96a3e Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 17 Jun 2019 21:00:36 -0700
Subject: [PATCH 15/15] remove comment

---
 lighthouse-core/report/html/report-styles.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index a7a3b558dc93..4377ad093573 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -78,11 +78,11 @@
   --color-gray: #000000;
   --color-blue-A700: #2962FF;
   --color-green-700: #018642;
-  --color-green: #0CCE6B; /* TODO: this is not a MD color */
+  --color-green: #0CCE6B;
   --color-orange-700: #D04900;
-  --color-orange: #FFA400; /* TODO: this is not a MD color */
+  --color-orange: #FFA400;
   --color-red-700: #EB0F00;
-  --color-red: #FF4E42; /* TODO: this is not a MD color */
+  --color-red: #FF4E42;
   --color-white: #FFFFFF;
   --color-blue-200: #90CAF9;
   --color-blue-900: #0D47A1;