Introduce a border-radius css var and use it everywhere

Sets border-radius to 4px as the app-theme default. The only
border-radii that stay different from 4px are the circle shapes for
account and voting chips.

Change-Id: I3417b141aaa19440300f0628eca1a9229eb6c131

polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html

@@ -41,7 +41,7 @@ limitations under the License.
         border: none;
         --gr-autocomplete: {
           border: 1px solid var(--border-color);
-          border-radius: 2px;
+          border-radius: var(--border-radius);
           height: 2em;
           padding: 0 var(--spacing-xs);
           width: 20em;

polygerrit-ui/app/elements/admin/gr-plugin-config-array-editor/gr-plugin-config-array-editor.html

@@ -33,7 +33,7 @@ limitations under the License.
       .existingItems {
         background: var(--table-header-background-color);
         border: 1px solid var(--border-color);
-        border-radius: 2px;
+        border-radius: var(--border-radius);
       }
       gr-button {
         float: right;

polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html

@@ -59,7 +59,7 @@ limitations under the License.
       }
       ul li {
         border: 1px solid var(--border-color);
-        border-radius: .2em;
+        border-radius: var(--border-radius);
         background: var(--chip-background-color);
         display: inline-block;
         margin: 0 var(--spacing-xs) var(--spacing-s) var(--spacing-xs);

polygerrit-ui/app/elements/change/gr-message/gr-message.html

@@ -150,7 +150,7 @@ limitations under the License.
       }
       .score {
         border: 1px solid rgba(0,0,0,.12);
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         color: var(--primary-text-color);
         display: inline-block;
         margin: -1px 0;

polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display.html

@@ -24,7 +24,7 @@ limitations under the License.
       .key {
         background-color: var(--chip-background-color);
         border: 1px solid var(--border-color);
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         display: inline-block;
         font-weight: var(--font-weight-bold);
         padding: var(--spacing-xxs) var(--spacing-m);

polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html

@@ -30,7 +30,7 @@ limitations under the License.
       gr-autocomplete {
         background-color: var(--view-background-color);
         border: 1px solid var(--border-color);
-        border-radius: 2px;
+        border-radius: var(--border-radius);
         flex: 1;
         outline: none;
         padding: var(--spacing-xs);

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -222,7 +222,7 @@ limitations under the License.
       .content .trailing-whitespace,
       .trailing-whitespace .intraline,
       .content .trailing-whitespace .intraline {
-        border-radius: .4em;
+        border-radius: var(--border-radius, 4px);
         background-color: var(--diff-trailing-whitespace-indicator);
       }
       #diffHeader {

polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html

@@ -58,14 +58,14 @@ limitations under the License.
       gr-autocomplete {
         --gr-autocomplete: {
           border: 1px solid var(--border-color);
-          border-radius: 2px;
+          border-radius: var(--border-radius);
           height: 2em;
           padding: 0 var(--spacing-xs);
         }
       }
       input {
         border: 1px solid var(--border-color);
-        border-radius: 2px;
+        border-radius: var(--border-radius);
         height: 2em;
         margin: var(--spacing-m) 0;
         padding: 0 var(--spacing-xs);

polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html

@@ -63,7 +63,7 @@ limitations under the License.
       }
       .textareaWrapper {
         border: 1px solid var(--border-color);
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         margin: var(--spacing-l);
       }
       .textareaWrapper .editButtons {

polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html

@@ -31,7 +31,7 @@ limitations under the License.
       :host([toast]) {
         background-color: var(--tooltip-background-color);
         bottom: 1.25rem;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
         color: var(--view-background-color);
         left: 1.25rem;

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

@@ -57,7 +57,7 @@ limitations under the License.
         font: inherit;
         text-transform: uppercase;
         outline-width: 0;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
         -moz-user-select: none;
         -ms-user-select: none;
         -webkit-user-select: none;

polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html

@@ -25,7 +25,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       .chip {
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         background-color: var(--chip-background-color);
         padding: var(--spacing-xxs) var(--spacing-m);
         white-space: nowrap;

polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.html

@@ -48,7 +48,7 @@ limitations under the License.
         margin: 0 4px 4px 4px;
         white-space: normal;
         box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-        border-radius: 4px;
+        border-radius: var(--border-radius);
         /** This is required for firefox to continue the inheritance */
         -webkit-user-select: inherit;
         -moz-user-select: inherit;

polygerrit-ui/app/styles/gr-form-styles.html

@@ -83,7 +83,7 @@ limitations under the License.
       .gr-form-styles select,
       .gr-form-styles textarea {
         border: 1px solid var(--border-color);
-        border-radius: 2px;
+        border-radius: var(--border-radius);
         height: 2em;
         padding: 0 var(--spacing-xs);
       }
@@ -100,7 +100,7 @@ limitations under the License.
         min-height: 2em;
         --iron-autogrow-textarea: {
           border: 1px solid var(--border-color);
-          border-radius: 2px;
+          border-radius: var(--border-radius);
           box-sizing: border-box;
           padding: var(--spacing-s) var(--spacing-xs) 0 var(--spacing-xs);
         }
@@ -109,7 +109,7 @@ limitations under the License.
         border: none;
         --gr-autocomplete: {
           border: 1px solid var(--border-color);
-          border-radius: 2px;
+          border-radius: var(--border-radius);
           height: 2em;
           padding: 0 var(--spacing-xs);
           width: 14em;

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

@@ -158,6 +158,7 @@ html {
   --syntax-variable-color: var(--primary-text-color);
 
   /* misc */
+  --border-radius: 4px;
   --reply-overlay-z-index: 1000;
   --iron-overlay-backdrop: {
     transition: none;