Improve color contrast of status chips

Change-Id: I05c1b301ff9d47120046d1d5808b3aad7303c7e3

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

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

polygerrit-ui/app/styles/themes/app-theme.js

@@ -39,6 +39,7 @@ html {
     /* Used on text color for change list that doesn't need user's attention. */
   --reviewed-text-color: black;
   --vote-text-color: black;
+  --status-text-color: white;
   --tooltip-text-color: white;
   --negative-red-text-color: #d93025;
   --positive-green-text-color: #188038;
@@ -84,6 +85,16 @@ html {
   --border-color: #e8e8e8;
   --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 */
   --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';

polygerrit-ui/app/styles/themes/dark-theme.html

@@ -37,6 +37,7 @@ limitations under the License.
         /* Used on text color for change list doesn't need user's attention. */
       --reviewed-text-color: #dadce0;
       --vote-text-color: black;
+      --status-text-color: black;
       --tooltip-text-color: white;
       --negative-red-text-color: #f28b82;
       --positive-green-text-color: #81c995;
@@ -72,6 +73,16 @@ limitations under the License.
       --border-color: #5f6368;
       --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 */
       --font-weight-bold: 700; /* 700 is the same as 'bold' */