report: naming convention (#9149) followup fixes

Author: connorjclark

lighthouse-core/report/html/report-styles.css

@@ -33,8 +33,8 @@
   color of that hue.
 */
 .lh-vars {
-  --text-font-family: Roboto, Helvetica, Arial, sans-serif;
-  --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
+  --report-font-family: Roboto, Helvetica, Arial, sans-serif;
+  --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --report-background-color: #fff;
   --report-text-color: var(--color-gray-900);
   --report-font-size: 16px;
@@ -47,10 +47,10 @@
   --footer-padding-vertical: 16px;
   --audit-margin-horizontal: 5px;
   --stackpack-padding-horizontal: 10px;
-  --secondary-text-color: var(--color-gray-800);
-  --informative-color: var(--color-blue-900);
+  --report-text-color-secondary: var(--color-gray-800);
+  --color-informative: var(--color-blue-900);
   --snippet-background-color: var(--color-gray-50);
-  --report-secondary-border-color: #ebebeb;
+  --report-border-color-secondary: #ebebeb;
   --chevron-line-stroke: var(--color-gray-600);
   --report-width: calc(60 * var(--report-font-size));
   --report-min-width: 400px;
@@ -173,15 +173,15 @@
     --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-border-color-secondary: var(--color-gray-200);
 
     --report-background-color: var(--color-gray-900);
     --report-text-color: var(--color-gray-100);
-    --secondary-text-color: var(--color-gray-400);
+    --report-text-color-secondary: var(--color-gray-400);
 
     --plugin-icon-url: var(--plugin-icon-url-dark);
 
-    --informative-color: var(--color-blue-200);
+    --color-informative: var(--color-blue-200);
 
     --color-gray-50: #757575;
 
@@ -225,8 +225,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;
+  --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
   --report-font-size: 12px;
   --report-line-height: 20px;
   --category-header-font-size: 16px;
@@ -282,7 +282,7 @@
 }
 
 .lh-root {
-  font-family: var(--text-font-family);
+  font-family: var(--report-font-family);
   font-size: var(--report-font-size);
   margin: 0;
   line-height: var(--report-line-height);
@@ -332,7 +332,7 @@
 .lh-category-header__description a,
 .lh-audit__description a,
 .lh-footer a {
-  color: var(--informative-color);
+  color: var(--color-informative);
 }
 
 .lh-audit__description, .lh-audit__stackpack {
@@ -397,7 +397,7 @@
 
 /* Node */
 .lh-node__snippet {
-  font-family: var(--monospace-font-family);
+  font-family: var(--report-font-family-monospace);
   color: var(--color-teal-600);
   font-size: 12px;
   line-height: 1.5em;
@@ -463,7 +463,7 @@
 
 .lh-audit__description,
 .lh-audit__stackpack {
-  color: var(--secondary-text-color);
+  color: var(--report-text-color-secondary);
 }
 .lh-category-header__description  {
   font-size: var(--report-font-size);
@@ -566,10 +566,10 @@
 
 
 .lh-metric {
-  border-bottom: 1px solid var(--report-secondary-border-color);
+  border-bottom: 1px solid var(--report-border-color-secondary);
 }
 .lh-metric:first-of-type {
-  border-top: 1px solid var(--report-secondary-border-color);
+  border-top: 1px solid var(--report-border-color-secondary);
 }
 
 .lh-metric__innerwrap {
@@ -596,7 +596,7 @@
 
 .lh-metric__description {
   display: none;
-  color: var(--secondary-text-color);
+  color: var(--report-text-color-secondary);
   padding: var(--metric-description-padding);
 }
 
@@ -797,7 +797,7 @@
 }
 
 .lh-filmstrip__thumbnail {
-  border: 1px solid var(--report-secondary-border-color);
+  border: 1px solid var(--report-border-color-secondary);
   max-height: 100px;
   max-width: 60px;
 }
@@ -819,12 +819,12 @@
 /* Audit */
 
 .lh-audit {
-  border-bottom: 1px solid var(--report-secondary-border-color);
+  border-bottom: 1px solid var(--report-border-color-secondary);
 }
 
 /* Apply border-top to just the first audit. */
 .lh-audit {
-  border-top: 1px solid var(--report-secondary-border-color);
+  border-top: 1px solid var(--report-border-color-secondary);
 }
 .lh-audit ~ .lh-audit {
   border-top: none;
@@ -995,7 +995,7 @@
 
 .lh-warnings--toplevel {
   --item-margin: calc(var(--header-line-height) / 4);
-  color: var(--secondary-text-color);
+  color: var(--report-text-color-secondary);
   margin: var(--category-padding);
   padding: var(--category-padding);
 }
@@ -1103,7 +1103,7 @@
   width: 100%;
   height: var(--gauge-circle-size);
   position: absolute;
-  font-family: var(--monospace-font-family);
+  font-family: var(--report-font-family-monospace);
   font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px);
   line-height: 0;
   text-align: center;
@@ -1171,7 +1171,7 @@
   display: flex;
   align-items: center;
   margin: 0 12px;
-  font-family: var(--monospace-font-family);
+  font-family: var(--report-font-family-monospace);
   white-space: nowrap;
 }
 

lighthouse-core/report/html/templates.html

@@ -817,7 +817,7 @@
           border-bottom: none;
           color: var(--snippet-color);
           background-color: var(--snippet-background-color);
-          border: 1px solid var(--report-secondary-border-color);
+          border: 1px solid var(--report-border-color-secondary);
         }
         .lh-snippet__title {
           font-weight: bold;
@@ -841,7 +841,7 @@
 
         .lh-snippet__snippet {
           overflow: auto;
-          border: 1px solid var(--report-secondary-border-color);
+          border: 1px solid var(--report-border-color-secondary);
         }
         /* Container needed so that all children grow to the width of the scroll container */
         .lh-snippet__snippet-inner {
@@ -881,7 +881,7 @@
           padding: 10px;
           padding-left: 5px;
           color: var(--color-fail);
-          font-family: var(--text-font-family);
+          font-family: var(--report-font-family);
         }
         .lh-snippet__line--message code {
           white-space: normal;