Use the same border color throughout the app

With this change, all CSS border declarations that specify some shade of gray are modified to use the one unified --border-color declaration in app-theme.html. Further followup with UX is required to ensure that the shade of gray chosen is the correct one -- for now, the most-used one is used. Change-Id: I2134ebf4a459ba040e01856c11389780307d8648
2018-04-11 15:32:06 -07:00 · 2018-04-11 15:32:06 -07:00 · c828098853
commit c828098853
parent 4f9fa0f9bc
40 changed files with 59 additions and 60 deletions
--- a/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.html
+++ b/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.html
@ -36,7 +36,7 @@ limitations under the License.
        margin-bottom: 1em;
      }
      fieldset {
-        border: 1px solid #d1d2d3;
+        border: 1px solid var(--border-color);
      }
      .name {
        align-items: center;
@ -46,7 +46,7 @@ limitations under the License.
      #deletedContainer {
        align-items: center;
        background: #f6f6f6;
-        border-bottom: 1px dotted #d1d2d3;
+        border-bottom: 1px dotted var(--border-color);
        display: flex;
        justify-content: space-between;
        min-height: 3em;
--- a/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
@ -40,7 +40,7 @@ limitations under the License.
      gr-autocomplete {
        border: none;
        --gr-autocomplete: {
-          border: 1px solid #d1d2d3;
+          border: 1px solid var(--border-color);
          border-radius: 2px;
          font-size: var(--font-size-normal);
          height: 2em;
--- a/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
+++ b/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
@ -64,7 +64,7 @@ limitations under the License.
        text-decoration: underline;
      }
      th {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
        font-family: var(--font-family-bold);
        text-align: left;
      }
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.html
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.html
@ -41,11 +41,11 @@ limitations under the License.
      }
      .rules {
        background: #fafafa;
-        border: 1px solid #d1d2d3;
+        border: 1px solid var(--border-color);
        border-bottom: 0;
      }
      .editing .rules {
-        border-bottom: 1px solid #d1d2d3;
+        border-bottom: 1px solid var(--border-color);
      }
      .title {
        margin-bottom: .3em;
@ -72,7 +72,7 @@ limitations under the License.
      }
      .deleted #deletedContainer {
        align-items: baseline;
-        border: 1px solid #d1d2d3;
+        border: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        padding: .7em;
--- a/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.html
+++ b/polygerrit-ui/app/elements/admin/gr-rule-editor/gr-rule-editor.html
@ -29,7 +29,7 @@ limitations under the License.
  <template>
    <style include="shared-styles">
      :host {
-        border-bottom: 1px solid #d1d2d3;
+        border-bottom: 1px solid var(--border-color);
        padding: .7em;
        display: block;
      }
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-view/gr-change-list-view.html
@ -42,7 +42,7 @@ limitations under the License.
      }
      gr-user-header,
      gr-repo-header {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
      }
      nav {
        align-items: center;
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
@ -40,7 +40,7 @@ limitations under the License.
        display: none;
      }
      gr-user-header {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
      }
      @media only screen and (max-width: 50em) {
        .loading {
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@ -64,7 +64,7 @@ limitations under the License.
      .header {
        align-items: center;
        background-color: #fafafa;
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
        display: flex;
        padding: .55em var(--default-horizontal-margin);
        z-index: 99;  /* Less than gr-overlay's backdrop */
@ -128,7 +128,7 @@ limitations under the License.
        padding-right: 1em;
      }
      .changeMetadata {
-        border-right: 1px solid #ddd;
+        border-right: 1px solid var(--border-color);
        font-size: .95rem;
        padding: 1em 0;
      }
@ -189,7 +189,7 @@ limitations under the License.
      }
      hr {
        border: 0;
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
        height: 0;
        margin-bottom: 1em;
      }
@ -242,7 +242,7 @@ limitations under the License.
      }
      paper-tabs {
        background-color: #fafafa;
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
        height: 3rem;
        --paper-tabs-selection-bar-color: var(--color-link);
      }
--- a/polygerrit-ui/app/elements/change/gr-comment-list/gr-comment-list.html
+++ b/polygerrit-ui/app/elements/change/gr-comment-list/gr-comment-list.html
@ -36,7 +36,7 @@ limitations under the License.
        word-wrap: break-word;
      }
      .file {
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
        font-family: var(--font-family-bold);
        margin: 10px 0 3px;
        padding: 10px 0 5px;
--- a/polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-confirm-abandon-dialog/gr-confirm-abandon-dialog.html
@ -46,7 +46,7 @@ limitations under the License.
        width: 73ch; /* Add a char to account for the border. */

        --iron-autogrow-textarea {
-          border: 1px solid #cdcdcd;
+          border: 1px solid var(--border-color);
          box-sizing: border-box;
          font-family: var(--monospace-font-family);
        }
--- a/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.html
@ -41,7 +41,7 @@ limitations under the License.
        width: 73ch; /* Add a char to account for the border. */

        --iron-autogrow-textarea {
-          border: 1px solid #cdcdcd;
+          border: 1px solid var(--border-color);
          box-sizing: border-box;
          font-family: var(--monospace-font-family);
        }
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@ -46,7 +46,7 @@ limitations under the License.
      .patchInfo-header {
        align-items: center;
        background-color: #fafafa;
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
        display: flex;
        padding: 6px var(--default-horizontal-margin);
      }
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@ -44,7 +44,7 @@ limitations under the License.
      }
      .row {
        align-items: center;
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
        display: flex;
        min-height: 2.25em;
        padding: .2em var(--default-horizontal-margin) .2em calc(var(--default-horizontal-margin) - .35rem);
@ -90,7 +90,7 @@ limitations under the License.
      }
      .file-row.expanded {
        background-color: #eeeeee;
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
        position: -webkit-sticky;
        position: sticky;
        top: 0;
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@ -30,7 +30,7 @@ limitations under the License.
      }
      header {
        background: #fff;
-        border-bottom: 1px solid #cdcdcd;
+        border-bottom: 1px solid var(--border-color);
        left: 0;
        padding: 1em;
        position: absolute;
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@ -31,7 +31,7 @@ limitations under the License.
    <style include="gr-voting-styles"></style>
    <style include="shared-styles">
      :host {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
        display: block;
        position: relative;
        cursor: pointer;
@ -136,7 +136,7 @@ limitations under the License.
        padding: .5em 0 0 0;
      }
      .score {
-        border: 1px solid rgba(0,0,0,.12);
+        border: 1px solid var(--border-color);
        border-radius: 3px;
        color: #000;
        display: inline-block;
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@ -33,8 +33,8 @@ limitations under the License.
      .header {
        align-items: center;
        background-color: #fafafa;
-        border-bottom: 1px solid #ddd;
-        border-top: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
+        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        min-height: 3.2em;
@ -52,7 +52,7 @@ limitations under the License.
      }
      #messageControlsContainer {
        align-items: center;
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
        display: flex;
        height: 2.25em;
        justify-content: center;
--- a/polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list.html
+++ b/polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list.html
@ -99,7 +99,7 @@ limitations under the License.
        }
        hr {
          border: 0;
-          border-top: 1px solid #ddd;
+          border-top: 1px solid var(--border-color);
          height: 0;
          margin-bottom: 1em;
        }
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
@ -53,7 +53,7 @@ limitations under the License.
        max-height: 100%;
      }
      section {
-        border-top: 1px solid #cdcdcd;
+        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
        padding: .5em 1.5em;
        width: 100%;
--- a/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list.html
+++ b/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list.html
@ -36,8 +36,8 @@ limitations under the License.
      .header {
        align-items: center;
        background-color: #fafafa;
-        border-bottom: 1px solid #ddd;
-        border-top: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
+        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: left;
        min-height: 3.2em;
--- a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.html
+++ b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.html
@ -36,7 +36,7 @@ limitations under the License.
      }
      header {
        align-items: center;
-        border-bottom: 1px solid #cdcdcd;
+        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
      }
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
@ -29,7 +29,7 @@ limitations under the License.
      }
      gr-autocomplete {
        background-color: white;
-        border: 1px solid #d1d2d3;
+        border: 1px solid var(--border-color);
        border-radius: 2px 0 0 2px;
        flex: 1;
        font: inherit;
--- a/polygerrit-ui/app/elements/diff/gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog.html
+++ b/polygerrit-ui/app/elements/diff/gr-confirm-delete-comment-dialog/gr-confirm-delete-comment-dialog.html
@ -46,7 +46,7 @@ limitations under the License.
        width: 73ch; /* Add a char to account for the border. */

        --iron-autogrow-textarea {
-          border: 1px solid #cdcdcd;
+          border: 1px solid var(--border-color);
          box-sizing: border-box;
          font-family: var(--monospace-font-family);
        }
--- a/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-preferences/gr-diff-preferences.html
@ -45,7 +45,7 @@ limitations under the License.
        padding: 1em 1.5em;
      }
      .header {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
        font-family: var(--font-family-bold);
      }
      .mainContainer {
@ -65,7 +65,7 @@ limitations under the License.
        flex: 1;
      }
      .actions {
-        border-top: 1px solid #ddd;
+        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
      }
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@ -53,12 +53,12 @@ limitations under the License.
      gr-diff {
        border: none;
        --diff-container-styles: {
-          border-bottom: 1px solid #eee;
+          border-bottom: 1px solid var(--border-color);
        }
      }
      gr-fixed-panel {
        background-color: #fff;
-        border-bottom: 1px #eee solid;
+        border-bottom: 1px solid var(--border-color);
        z-index: 1;
      }
      header,
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@ -58,7 +58,7 @@ limitations under the License.
      }
      table {
        border-collapse: collapse;
-        border-right: 1px solid #ddd;
+        border-right: 1px solid var(--border-color);
        table-layout: fixed;
      }
      .lineNum {
--- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
+++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
@ -54,7 +54,7 @@ limitations under the License.
      }
      gr-autocomplete {
        --gr-autocomplete: {
-          border: 1px solid #d1d2d3;
+          border: 1px solid var(--border-color);
          border-radius: 2px;
          font-size: var(--font-size-normal);
          height: 2em;
@ -62,7 +62,7 @@ limitations under the License.
        }
      }
      input {
-        border: 1px solid #d1d2d3;
+        border: 1px solid var(--border-color);
        border-radius: 2px;
        font-size: var(--font-size-normal);
        height: 2em;
--- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
+++ b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
@ -39,7 +39,7 @@ limitations under the License.
      }
      gr-fixed-panel {
        background-color: #ebf5fb;
-        border-bottom: 1px #ddd solid;
+        border-bottom: 1px var(--border-color) solid;
        z-index: 1;
      }
      header,
@ -62,7 +62,7 @@ limitations under the License.
        }
      }
      .textareaWrapper {
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
        border-radius: 3px;
        margin: var(--default-horizontal-margin);
      }
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@ -82,7 +82,7 @@ limitations under the License.
      gr-main-header {
        background-color: var(--header-background-color);
        padding: 0 var(--default-horizontal-margin);
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
      }
      gr-main-header.shadow {
        /* Make it obvious for shadow dom testing */
--- a/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.html
@ -38,7 +38,7 @@ limitations under the License.
        text-align: center;
      }
      .checkboxContainer:hover {
-        outline: 1px solid #ddd;
+        outline: 1px solid var(--border-color);
      }
    </style>
    <div class="gr-form-styles">
--- a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html
@ -46,7 +46,7 @@ limitations under the License.
        height: auto;
      }
      .preferredControl:hover {
-        outline: 1px solid #d1d2d3;
+        outline: 1px solid var(--border-color);
      }
    </style>
    <div class="gr-form-styles">
--- a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.html
+++ b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.html
@ -37,7 +37,7 @@ limitations under the License.
        margin-bottom: 1em;
      }
      header {
-        border-bottom: 1px solid #cdcdcd;
+        border-bottom: 1px solid var(--border-color);
        font-family: var(--font-family-bold);
        margin-bottom: 1em;
      }
--- a/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
@ -34,7 +34,7 @@ limitations under the License.
        text-align: center;
      }
      .notifControl:hover {
-        outline: 1px solid #ddd;
+        outline: 1px solid var(--border-color);
      }
      .projectFilter {
        color: #777;
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@ -35,7 +35,7 @@ limitations under the License.
        margin: 0 .25em;
      }
      paper-input:not(.borderless) {
-        border: 1px solid #ddd;
+        border: 1px solid var(--border-color);
      }
      paper-input {
        height: 100%;
--- a/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
+++ b/polygerrit-ui/app/elements/shared/gr-confirm-dialog/gr-confirm-dialog.html
@ -32,7 +32,7 @@ limitations under the License.
        max-height: 90vh;
      }
      header {
-        border-bottom: 1px solid #cdcdcd;
+        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        font-family: var(--font-family-bold);
      }
--- a/polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html
+++ b/polygerrit-ui/app/elements/shared/gr-download-commands/gr-download-commands.html
@ -55,8 +55,8 @@ limitations under the License.
      .commands {
        display: flex;
        flex-direction: column;
-        border-bottom: 1px solid #ddd;
-        border-top: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
+        border-top: 1px solid var(--border-color);
        padding: .5em;
      }
      gr-copy-clipboard {
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@ -74,7 +74,7 @@ limitations under the License.
        }
      }
      paper-item:not(:last-of-type) {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid var(--border-color);
      }
      .bottomContent {
        color: rgba(0,0,0,.54);
--- a/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
+++ b/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
@ -23,7 +23,7 @@ limitations under the License.
    <style include="shared-styles">
      #nav {
        background-color: #f5f5f5;
-        border: 1px solid #eee;
+        border: 1px solid var(--border-color);
        border-top: none;
        height: 100%;
        position: absolute;
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@ -26,7 +26,6 @@ limitations under the License.
  --border-color: #ddd;

  /* Following are not part of plugin API. */
-  --search-border-color: #ddd;
  --selection-background-color: #f1f5fb;
  --selection-border-color: #cadcfa;
  --default-text-color: #000;
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@ -76,7 +76,7 @@ limitations under the License.
      .gr-form-styles input:not([type="checkbox"]),
      .gr-form-styles select,
      .gr-form-styles textarea {
-        border: 1px solid #d1d2d3;
+        border: 1px solid var(--border-color);
        border-radius: 2px;
        font-size: var(--font-size-normal);
        height: 2em;
@ -94,7 +94,7 @@ limitations under the License.
        height: auto;
        min-height: 2em;
        --iron-autogrow-textarea: {
-          border: 1px solid #d1d2d3;
+          border: 1px solid var(--border-color);
          border-radius: 2px;
          box-sizing: border-box;
          font-size: var(--font-size-normal);
@ -104,7 +104,7 @@ limitations under the License.
      .gr-form-styles gr-autocomplete {
        border: none;
        --gr-autocomplete: {
-          border: 1px solid #d1d2d3;
+          border: 1px solid var(--border-color);
          border-radius: 2px;
          font-size: var(--font-size-normal);
          height: 2em;
--- a/polygerrit-ui/app/styles/gr-table-styles.html
+++ b/polygerrit-ui/app/styles/gr-table-styles.html
@ -26,15 +26,15 @@ limitations under the License.
        width: 100%;
      }
      .genericList tr.table {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
      }
      .genericList td {
        flex-shrink: 0;
        padding: .3em .5em;
      }
      .genericList th {
-        background-color: #ddd;
-        border-bottom: 1px solid #eee;
+        background-color: var(--border-color);
+        border-bottom: 1px solid var(--border-color);
        font-family: var(--font-family-bold);
        padding: .3em .5em;
        text-align: left;