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

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>

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 {

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 {

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 {

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;

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;

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;
       }

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;
       }

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;
       }

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;

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;
       }

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;

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;
         }
       }

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);

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;
         }

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);
         }

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 {

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;
       }

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;

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

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;

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;

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;

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;
       }

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) {

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);
       }

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;
       }