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
diff --git 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
index aeddb95..febd446 100644
--- 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 @@
display: block;
}
.groupPath {
- color: #666;
+ color: var(--deemphasized-text-color);
}
</style>
<style include="gr-form-styles"></style>
diff --git 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
index 02ca46f..1ee0b6e 100644
--- 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 @@
}
.comma,
.placeholder {
- color: rgba(0, 0, 0, .54);
+ color: var(--deemphasized-text-color);
}
@media only screen and (max-width: 50em) {
:host {
diff --git 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
index 4e40694..0ce754d 100644
--- 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 @@
display: block;
}
.loading {
- color: #666;
+ color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
}
gr-change-list {
diff --git 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
index e0af939..101899b 100644
--- 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 @@
display: block;
}
.loading {
- color: #666;
+ color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
}
gr-change-list {
diff --git 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
index 4cb1ab5..62e9033 100644
--- 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 @@
}
#actionLoadingMessage {
align-items: center;
- color: #777;
+ color: var(--deemphasized-text-color);
}
#confirmSubmitDialog .changeSubject {
margin: 1em;
diff --git 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
index ef9719d..dd1f6be 100644
--- 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 @@
display: block;
}
.title {
- color: #666;
+ color: var(--deemphasized-text-color);
font-family: var(--font-family-bold);
max-width: 20em;
word-break: break-word;
diff --git 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
index 9bf2377..a68448d 100644
--- 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 @@
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 @@
padding: 0 var(--default-horizontal-margin);
}
.changeId {
- color: #666;
+ color: var(--deemphasized-text-color);
font-family: var(--font-family);
margin-top: 1em;
}
diff --git 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
index 44abe38..e9b0993 100644
--- 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 @@
text-align: right;
}
.warning {
- color: #666;
+ color: var(--deemphasized-text-color);
}
input.show-hide {
display: none;
@@ -224,7 +224,7 @@
display: none;
}
.reviewedLabel {
- color: rgba(0, 0, 0, .54);
+ color: var(--deemphasized-text-color);
margin-right: 1em;
opacity: 0;
}
diff --git 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
index 71dc662..e17195e 100644
--- 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 @@
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;
}
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index 8acf96f..abefaf5 100644
--- 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 @@
}
.collapsed .contentContainer {
align-items: baseline;
- color: #777;
+ color: var(--deemphasized-text-color);
display: flex;
white-space: nowrap;
}
@@ -127,7 +127,7 @@
margin-bottom: .4em;
}
.date {
- color: #666;
+ color: var(--deemphasized-text-color);
position: absolute;
right: var(--default-horizontal-margin);
top: 10px;
diff --git 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
index 6535eeb..e9d8ce8 100644
--- 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 @@
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;
}
diff --git 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
index 2035165..d2be489 100644
--- 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 @@
padding-top: .1em;
}
.peopleListLabel {
- color: #666;
+ color: var(--deemphasized-text-color);
margin-top: .2em;
min-width: 7em;
padding-right: .5em;
diff --git 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
index 37aaafc..1c8d9fd 100644
--- 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 @@
margin: 0;
}
.headerMiddle {
- color: #666;
+ color: var(--deemphasized-text-color);
flex: 1;
overflow: hidden;
}
@@ -88,7 +88,7 @@
}
a.date:link,
a.date:visited {
- color: #666;
+ color: var(--deemphasized-text-color);
}
.actions {
display: flex;
@@ -214,7 +214,7 @@
#deleteBtn {
display: none;
--gr-button: {
- color: #666;
+ color: var(--deemphasized-text-color);
padding: 0;
}
}
diff --git 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
index e20a765..df3a2c5 100644
--- 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 @@
text-decoration: none;
}
.loading {
- color: #777;
+ color: var(--deemphasized-text-color);
font-size: 2rem;
height: 100%;
padding: 1em var(--default-horizontal-margin);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index dfd57e4..3414266 100644
--- 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 @@
-ms-user-select: none;
user-select: none;
- color: #666;
+ color: var(--deemphasized-text-color);
padding: 0 .5em;
text-align: right;
}
@@ -164,7 +164,7 @@
.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;
}
diff --git 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
index cfc76b7..3de4284 100644
--- 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 @@
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);
}
diff --git 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
index f091a22..0a7433e 100644
--- 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 @@
<style include="shared-styles"></style>
<style include="gr-form-styles">
th {
- color: #666;
+ color: var(--deemphasized-text-color);
text-align: left;
}
#emailTable .emailColumn {
diff --git 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
index 3197fa01..52649db 100644
--- 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 @@
outline: 1px solid var(--border-color);
}
.projectFilter {
- color: #777;
+ color: var(--deemphasized-text-color);
font-style: italic;
margin-left: 1em;
}
diff --git 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
index ebbc7f5..8235535 100644
--- 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 @@
gr-button.remove {
--gr-button: {
border: 0;
- color: #666;
+ color: var(--deemphasized-text-color);
font-size: 1.7rem;
font-weight: normal;
height: .6em;
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index 1e190dd..e2fb0b3 100644
--- 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 @@
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 @@
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
diff --git 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
index 6d3c864..92f6855 100644
--- 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 @@
font: inherit;
}
label {
- color: #777;
+ color: var(--deemphasized-text-color);
display: inline-block;
font-family: var(--font-family-bold);
overflow: hidden;
diff --git 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
index 41988de..77ef495 100644
--- 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 @@
gr-button.remove {
--gr-button: {
border: 0;
- color: #666;
+ color: var(--deemphasized-text-color);
font-size: 1.7rem;
font-weight: normal;
height: .6em;
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index 0716e4c..dd1435d 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -32,6 +32,7 @@
--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;
diff --git a/polygerrit-ui/app/styles/gr-form-styles.html b/polygerrit-ui/app/styles/gr-form-styles.html
index 543334d..88c75c8 100644
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@@ -37,7 +37,7 @@
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 @@
font-size: var(--font-size-normal);
}
.gr-form-styles th {
- color: #666;
+ color: var(--deemphasized-text-color);
text-align: left;
vertical-align: bottom;
}
diff --git a/polygerrit-ui/app/styles/gr-menu-page-styles.html b/polygerrit-ui/app/styles/gr-menu-page-styles.html
index bafcbc6..6122a21 100644
--- a/polygerrit-ui/app/styles/gr-menu-page-styles.html
+++ b/polygerrit-ui/app/styles/gr-menu-page-styles.html
@@ -36,7 +36,7 @@
content: ' *';
}
.loading {
- color: #666;
+ color: var(--deemphasized-text-color);
padding: 1em var(--default-horizontal-margin);
}
@media only screen and (max-width: 67em) {
diff --git a/polygerrit-ui/app/styles/gr-table-styles.html b/polygerrit-ui/app/styles/gr-table-styles.html
index b187c3b..2bcd743 100644
--- a/polygerrit-ui/app/styles/gr-table-styles.html
+++ b/polygerrit-ui/app/styles/gr-table-styles.html
@@ -53,7 +53,7 @@
width: 70%;
}
.genericList .loadingMsg {
- color: #666;
+ color: var(--deemphasized-text-color);
display: block;
padding: 1em var(--default-horizontal-margin);
}
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index f7f343b..0cb40dc 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -80,7 +80,7 @@
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 @@
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;
}
