opendev/gerrit
Code Issues Proposed changes

Improve color contrast of status chips

Browse Source 
Change-Id: I05c1b301ff9d47120046d1d5808b3aad7303c7e3
This commit is contained in:
Ben Rohlfs
2020-05-25 21:37:46 +02:00
parent d503696825
commit 666a15b952
3 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status_html.js
View File

@@ -25,43 +25,43 @@ export const htmlTemplate = html`
white-space: nowrap; white-space: nowrap;
} }
:host(.merged) .chip { :host(.merged) .chip {
background-color: #5b9d52; background-color: var(--status-merged);
color: #5b9d52; color: var(--status-merged);
} }
:host(.abandoned) .chip { :host(.abandoned) .chip {
background-color: #afafaf; background-color: var(--status-abandoned);
color: #afafaf; color: var(--status-abandoned);
} }
:host(.wip) .chip { :host(.wip) .chip {
background-color: #8f756c; background-color: var(--status-wip);
color: #8f756c; color: var(--status-wip);
} }
:host(.private) .chip { :host(.private) .chip {
background-color: #c17ccf; background-color: var(--status-private);
color: #c17ccf; color: var(--status-private);
} }
:host(.merge-conflict) .chip { :host(.merge-conflict) .chip {
background-color: #dc5c60; background-color: var(--status-conflict);
color: #dc5c60; color: var(--status-conflict);
} }
:host(.active) .chip { :host(.active) .chip {
background-color: #29b6f6; background-color: var(--status-active);
color: #29b6f6; color: var(--status-active);
} }
:host(.ready-to-submit) .chip { :host(.ready-to-submit) .chip {
background-color: #e10ca3; background-color: var(--status-ready);
color: #e10ca3; color: var(--status-ready);
} }
:host(.custom) .chip { :host(.custom) .chip {
background-color: #825cc2; background-color: var(--status-custom);
color: #825cc2; color: var(--status-custom);
} }
:host([flat]) .chip { :host([flat]) .chip {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
} }
:host(:not([flat])) .chip { :host(:not([flat])) .chip {
color: white; color: var(--status-text-color);
} }
</style> </style>
<gr-tooltip-content <gr-tooltip-content

11
polygerrit-ui/app/styles/themes/app-theme.js
View File

@@ -39,6 +39,7 @@ html {
/* Used on text color for change list that doesn't need user's attention. */ /* Used on text color for change list that doesn't need user's attention. */
--reviewed-text-color: black; --reviewed-text-color: black;
--vote-text-color: black; --vote-text-color: black;
--status-text-color: white;
--tooltip-text-color: white; --tooltip-text-color: white;
--negative-red-text-color: #d93025; --negative-red-text-color: #d93025;
--positive-green-text-color: #188038; --positive-green-text-color: #188038;
@@ -84,6 +85,16 @@ html {
--border-color: #e8e8e8; --border-color: #e8e8e8;
--comment-separator-color: #dadce0; --comment-separator-color: #dadce0;
/* status colors */
--status-merged: #188038;
--status-abandoned: #5f6368;
--status-wip: #795548;
--status-private: #a142f4;
--status-conflict: #d93025;
--status-active: #1976d2;
--status-ready: #b80672;
--status-custom: #681da8;
/* fonts */ /* fonts */
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--header-font-family: 'Open Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --header-font-family: 'Open Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

11
polygerrit-ui/app/styles/themes/dark-theme.html
View File

@@ -37,6 +37,7 @@ limitations under the License.
/* Used on text color for change list doesn't need user's attention. */ /* Used on text color for change list doesn't need user's attention. */
--reviewed-text-color: #dadce0; --reviewed-text-color: #dadce0;
--vote-text-color: black; --vote-text-color: black;
--status-text-color: black;
--tooltip-text-color: white; --tooltip-text-color: white;
--negative-red-text-color: #f28b82; --negative-red-text-color: #f28b82;
--positive-green-text-color: #81c995; --positive-green-text-color: #81c995;
@@ -72,6 +73,16 @@ limitations under the License.
--border-color: #5f6368; --border-color: #5f6368;
--comment-separator-color: var(--border-color); --comment-separator-color: var(--border-color);
/* status colors */
--status-merged: #5bb974;
--status-abandoned: #dadce0;
--status-wip: #bcaaa4;
--status-private: #d7aefb;
--status-conflict: #f28b82;
--status-active: #669df6;
--status-ready: #f439a0;
--status-custom: #af5cf7;
/* fonts */ /* fonts */
--font-weight-bold: 700; /* 700 is the same as 'bold' */ --font-weight-bold: 700; /* 700 is the same as 'bold' */