Add css vars for line-height

Also remove shady usages of line-height.

Change-Id: I7e95d7cc1a44cf202e9c999215dcf5ef6b70520a

polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html

@@ -73,7 +73,6 @@ limitations under the License.
       .canEdit .revisionEdit{
         align-items: center;
         display: flex;
-        line-height: 1;
       }
       .deleteButton:not(.show) {
         display: none;

polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-syntax-theme.html

@@ -41,7 +41,6 @@ limitations under the License.
       .gr-syntax-keyword,
       .gr-syntax-name {
         color: var(--syntax-keyword-color);
-        line-height: 1;
       }
       .gr-syntax-number {
         color: var(--syntax-number-color);

polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html

@@ -46,7 +46,7 @@ limitations under the License.
           color: var(--deemphasized-text-color);
           font-weight: normal;
           height: .6em;
-          line-height: .6;
+          line-height: 10px;
           margin-left: var(--spacing-xs);
           padding: 0;
           text-decoration: none;

polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html

@@ -78,20 +78,10 @@ limitations under the License.
       }
       .bottomContent {
         color: var(--deemphasized-text-color);
-        /*
-         * Should be 16px when the base font size is 13px (browser default of
-         * 16px.
-         */
-        line-height: 1.37rem;
       }
       .bottomContent,
       .topContent {
         display: flex;
-        /*
-         * Should be 16px when the base font size is 13px (browser default of
-         * 16px.
-         */
-        line-height: 1.37rem;
         justify-content: space-between;
         flex-direction: row;
         width: 100%;

polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html

@@ -43,7 +43,7 @@ limitations under the License.
           color: var(--deemphasized-text-color);
           font-weight: normal;
           height: .6em;
-          line-height: .6;
+          line-height: 10px;
           margin-left: var(--spacing-xs);
           padding: 0;
           text-decoration: none;

polygerrit-ui/app/styles/main.css

@@ -43,5 +43,6 @@ body {
    */
   -webkit-text-size-adjust: none;
   font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  line-height: 1.4;
+  font-size: var(--font-size-normal, 1rem);
+  line-height: var(--line-height-normal, 1.4);
 }

polygerrit-ui/app/styles/shared-styles.html

@@ -55,9 +55,6 @@ limitations under the License.
       button {
         font: inherit;
       }
-      body {
-        line-height: 1;
-      }
       ol, ul {
         list-style: none;
       }
@@ -77,14 +74,17 @@ limitations under the License.
       h1 {
         font-size: var(--font-size-h1);
         font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h1);
       }
       h2 {
         font-size: var(--font-size-h2);
         font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h2);
       }
       h3 {
         font-size: var(--font-size-h3);
         font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h3);
       }
       iron-icon {
         color: var(--deemphasized-text-color);

polygerrit-ui/app/styles/themes/app-theme.html

@@ -74,11 +74,16 @@ html {
 
   /* fonts */
   --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --font-size-normal: 1rem;  /* 13px */
   --font-size-small: .92rem; /* 12px */
+  --font-size-normal: 1rem;  /* 13px */
   --font-size-h3: 1.154rem;  /* 15px */
   --font-size-h2: 1.5rem;    /* 19.5px */
   --font-size-h1: 2rem;      /* 26px */
+  --line-height-small: 1.4;  /* 16.8px */
+  --line-height-normal: 1.4; /* 18.2px */
+  --line-height-h3: 1.4;     /* 21.0px */
+  --line-height-h2: 1.4;     /* 27.3px */
+  --line-height-h1: 1.4;     /* 36.4px */
     /* Used on text for change list that needs user's attention. */
   --font-weight-bold: 500;
   --monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;