Introduce deemphasized-text-color

Introduces and standardizes the various shades of medium dark gray used throughout the app to #616161, or Material Gray 600. Change-Id: I311155cfdba4381643451233dfafbfbdacd55e90
2018-04-16 17:04:22 +02:00 · 2018-04-16 17:04:22 +02:00 · b0d03d047a
commit b0d03d047a
parent 2d7663ee69
27 changed files with 39 additions and 38 deletions
--- 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
@ -68,7 +68,7 @@ limitations under the License.
        display: block;
      }
      .groupPath {
-        color: #666;
+        color: var(--deemphasized-text-color);
      }
    </style>
    <style include="gr-form-styles"></style>
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@ -112,7 +112,7 @@ limitations under the License.
      }
      .comma,
      .placeholder {
-        color: rgba(0, 0, 0, .54);
+        color: var(--deemphasized-text-color);
      }
      @media only screen and (max-width: 50em) {
        :host {
--- 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
@ -34,7 +34,7 @@ limitations under the License.
        display: block;
      }
      .loading {
-        color: #666;
+        color: var(--deemphasized-text-color);
        padding: 1em var(--default-horizontal-margin);
      }
      gr-change-list {
--- 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
@ -30,7 +30,7 @@ limitations under the License.
        display: block;
      }
      .loading {
-        color: #666;
+        color: var(--deemphasized-text-color);
        padding: 1em var(--default-horizontal-margin);
      }
      gr-change-list {
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
@ -55,7 +55,7 @@ limitations under the License.
      }
      #actionLoadingMessage {
        align-items: center;
-        color: #777;
+        color: var(--deemphasized-text-color);
      }
      #confirmSubmitDialog .changeSubject {
        margin: 1em;
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
@ -50,7 +50,7 @@ limitations under the License.
        display: block;
      }
      .title {
-        color: #666;
+        color: var(--deemphasized-text-color);
        font-family: var(--font-family-bold);
        max-width: 20em;
        word-break: break-word;
--- 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
@ -58,7 +58,7 @@ limitations under the License.
        background-color: var(--view-background-color);
      }
      .container.loading {
-        color: #666;
+        color: var(--deemphasized-text-color);
        padding: 1em var(--default-horizontal-margin);
      }
      .header {
@ -119,7 +119,7 @@ limitations under the License.
        padding: 0 var(--default-horizontal-margin);
      }
      .changeId {
-        color: #666;
+        color: var(--deemphasized-text-color);
        font-family: var(--font-family);
        margin-top: 1em;
      }
--- 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
@ -172,7 +172,7 @@ limitations under the License.
        text-align: right;
      }
      .warning {
-        color: #666;
+        color: var(--deemphasized-text-color);
      }
      input.show-hide {
        display: none;
@ -224,7 +224,7 @@ limitations under the License.
        display: none;
      }
      .reviewedLabel {
-        color: rgba(0, 0, 0, .54);
+        color: var(--deemphasized-text-color);
        margin-right: 1em;
        opacity: 0;
      }
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
@ -39,13 +39,13 @@ limitations under the License.
        width: 20%;
      }
      .labelMessage {
-        color: #666;
+        color: var(--deemphasized-text-color);
      }
      .placeholder::before {
        content: ' ';
      }
      .selectedValueText {
-        color: rgba(0, 0, 0, .54);
+        color: var(--deemphasized-text-color);
        font-style: italic;
        margin: 0 .5em 0 .5em;
      }
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@ -48,7 +48,7 @@ limitations under the License.
      }
      .collapsed .contentContainer {
        align-items: baseline;
-        color: #777;
+        color: var(--deemphasized-text-color);
        display: flex;
        white-space: nowrap;
      }
@ -127,7 +127,7 @@ limitations under the License.
        margin-bottom: .4em;
      }
      .date {
-        color: #666;
+        color: var(--deemphasized-text-color);
        position: absolute;
        right: var(--default-horizontal-margin);
        top: 10px;
--- 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
@ -65,11 +65,11 @@ limitations under the License.
        display: inline-block;
      }
      .strikethrough {
-        color: #666;
+        color: var(--deemphasized-text-color);
        text-decoration: line-through;
      }
      .status {
-        color: #666;
+        color: var(--deemphasized-text-color);
        font-family: var(--font-family-bold);
        margin-left: .25em;
      }
--- 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
@ -82,7 +82,7 @@ limitations under the License.
        padding-top: .1em;
      }
      .peopleListLabel {
-        color: #666;
+        color: var(--deemphasized-text-color);
        margin-top: .2em;
        min-width: 7em;
        padding-right: .5em;
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
@ -65,7 +65,7 @@ limitations under the License.
        margin: 0;
      }
      .headerMiddle {
-        color: #666;
+        color: var(--deemphasized-text-color);
        flex: 1;
        overflow: hidden;
      }
@ -88,7 +88,7 @@ limitations under the License.
      }
      a.date:link,
      a.date:visited {
-        color: #666;
+        color: var(--deemphasized-text-color);
      }
      .actions {
        display: flex;
@ -214,7 +214,7 @@ limitations under the License.
      #deleteBtn {
        display: none;
        --gr-button: {
-          color: #666;
+          color: var(--deemphasized-text-color);
          padding: 0;
        }
      }
--- 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
@ -102,7 +102,7 @@ limitations under the License.
        text-decoration: none;
      }
      .loading {
-        color: #777;
+        color: var(--deemphasized-text-color);
        font-size: 2rem;
        height: 100%;
        padding: 1em var(--default-horizontal-margin);
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@ -110,7 +110,7 @@ limitations under the License.
        -ms-user-select: none;
        user-select: none;

-        color: #666;
+        color: var(--deemphasized-text-color);
        padding: 0 .5em;
        text-align: right;
      }
@ -164,7 +164,7 @@ limitations under the License.
      .contextControl gr-button {
        display: inline-block;
        text-decoration: none;
-        --gr-button-color: rgba(0,0,0,.54);
+        --gr-button-color: var(--deemphasized-text-color);
        --gr-button: {
          padding: .2em;
        }
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select.html
@ -33,12 +33,12 @@ limitations under the License.
        max-width: 15em;
      }
      .arrow {
-        color: rgba(0,0,0,.7);
+        color: var(--deemphasized-text-color);
        margin: 0 .5em;
      }
      gr-dropdown-list {
        --trigger-style: {
-          color: rgba(0,0,0,.7);
+          color: var(--deemphasized-text-color);
          text-transform: none;
          font-family: var(--font-family);
        }
--- 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
@ -26,7 +26,7 @@ limitations under the License.
    <style include="shared-styles"></style>
    <style include="gr-form-styles">
      th {
-        color: #666;
+        color: var(--deemphasized-text-color);
        text-align: left;
      }
      #emailTable .emailColumn {
--- 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
@ -37,7 +37,7 @@ limitations under the License.
        outline: 1px solid var(--border-color);
      }
      .projectFilter {
-        color: #777;
+        color: var(--deemphasized-text-color);
        font-style: italic;
        margin-left: 1em;
      }
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
@ -48,7 +48,7 @@ limitations under the License.
      gr-button.remove {
        --gr-button: {
          border: 0;
-          color: #666;
+          color: var(--deemphasized-text-color);
          font-size: 1.7rem;
          font-weight: normal;
          height: .6em;
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@ -73,7 +73,7 @@ limitations under the License.
       precedence when disabled. */
      :host([disabled]) {
        --background-color: var(--table-subheader-background-color);
-        --button-color: #a8a8a8;
+        --button-color: var(--deemphasized-text-color);
        cursor: default;
      }

@ -101,7 +101,7 @@ limitations under the License.
        transition: border-top-color 200ms;
      }
      :host([down-arrow]) paper-button:hover .downArrow {
-        border-top-color: #666;
+        border-top-color: var(--deemphasized-text-color);
      }
    </style>
    <paper-button
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@ -39,7 +39,7 @@ limitations under the License.
        font: inherit;
      }
      label {
-        color: #777;
+        color: var(--deemphasized-text-color);
        display: inline-block;
        font-family: var(--font-family-bold);
        overflow: hidden;
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
@ -45,7 +45,7 @@ limitations under the License.
      gr-button.remove {
        --gr-button: {
          border: 0;
-          color: #666;
+          color: var(--deemphasized-text-color);
          font-size: 1.7rem;
          font-weight: normal;
          height: .6em;
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@ -32,6 +32,7 @@ limitations under the License.
  --expanded-background-color: #eee;
  --view-background-color: #fff;
  --default-horizontal-margin: 1rem;
+  --deemphasized-text-color: #757575;
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-bold: 'Roboto Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@ -37,7 +37,7 @@ limitations under the License.
        display: inline-block;
      }
      .gr-form-styles .title {
-        color: #666;
+        color: var(--deemphasized-text-color);
        font-family: var(--font-family-bold);
        padding-right: .5em;
        width: 15em;
@ -46,7 +46,7 @@ limitations under the License.
        font-size: var(--font-size-normal);
      }
      .gr-form-styles th {
-        color: #666;
+        color: var(--deemphasized-text-color);
        text-align: left;
        vertical-align: bottom;
      }
--- a/polygerrit-ui/app/styles/gr-menu-page-styles.html
+++ b/polygerrit-ui/app/styles/gr-menu-page-styles.html
@ -36,7 +36,7 @@ limitations under the License.
        content: ' *';
      }
      .loading {
-        color: #666;
+        color: var(--deemphasized-text-color);
        padding: 1em var(--default-horizontal-margin);
      }
      @media only screen and (max-width: 67em) {
--- a/polygerrit-ui/app/styles/gr-table-styles.html
+++ b/polygerrit-ui/app/styles/gr-table-styles.html
@ -53,7 +53,7 @@ limitations under the License.
        width: 70%;
      }
      .genericList .loadingMsg {
-        color: #666;
+        color: var(--deemphasized-text-color);
        display: block;
        padding: 1em var(--default-horizontal-margin);
      }
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@ -80,7 +80,7 @@ limitations under the License.
        font-family: var(--font-family-bold);
      }
      iron-icon {
-        color: #757575;
+        color: var(--deemphasized-text-color);
        --iron-icon-height: 20px;
        --iron-icon-width: 20px;
      }
@ -89,7 +89,7 @@ limitations under the License.
        display: none !important;
      }
      .separator {
-        border-left: 1px solid rgba(0, 0, 0, .3);
+        border-left: 1px solid var(--deemphasized-text-color);
        height: 20px;
        margin: 0 8px;
      }