commit ceca75d58868188e6196427c3f9b7bd6a83a52f3
author Ben Rohlfs <brohlfs@google.com> Wed Mar 17 22:46:22 2021 +0100
committer Ben Rohlfs <brohlfs@google.com> Thu Mar 18 16:02:12 2021 +0100
tree e89c90347822c8ade531944006fde6e469b2a854
parent 7e68cf29e3c640e65761d5eefd7127f7f5b64d98

Add 6 colors for check result tags

Change-Id: I7ffbe02a699d51f38a2dd45869ef1f71a45ebbf4

polygerrit-ui/app/api/checks.ts

diff --git a/polygerrit-ui/app/api/checks.ts b/polygerrit-ui/app/api/checks.ts
index 9e3c8f7..874ec35 100644
--- a/polygerrit-ui/app/api/checks.ts
+++ b/polygerrit-ui/app/api/checks.ts
@@ -365,11 +365,14 @@
   color?: TagColor;
 }
 
-// TBD: Add more ...
 // TBD: Clarify standard colors for common tags.
 export enum TagColor {
-  GRAY,
-  GREEN,
+  GRAY = 'gray',
+  YELLOW = 'yellow',
+  PINK = 'pink',
+  PURPLE = 'purple',
+  CYAN = 'cyan',
+  BROWN = 'brown',
 }
 
 export interface Link {

polygerrit-ui/app/elements/checks/gr-checks-results.ts

diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index fb8a149..43c0776 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -139,6 +139,24 @@
           padding: 0 var(--spacing-m);
           margin-left: var(--spacing-s);
         }
+        .tag.gray {
+          background-color: var(--tag-gray);
+        }
+        .tag.yellow {
+          background-color: var(--tag-yellow);
+        }
+        .tag.pink {
+          background-color: var(--tag-pink);
+        }
+        .tag.purple {
+          background-color: var(--tag-purple);
+        }
+        .tag.cyan {
+          background-color: var(--tag-cyan);
+        }
+        .tag.brown {
+          background-color: var(--tag-brown);
+        }
       `,
     ];
   }
@@ -258,7 +276,7 @@
   }
 
   renderTag(tag: Tag) {
-    return html`<div class="tag">${tag.name}</div>`;
+    return html`<div class="tag ${tag.color}">${tag.name}</div>`;
   }
 }
 

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

diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts
index 56b02f6..12afddf 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.ts
+++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -120,7 +120,13 @@
     --purple-tonal: #523272;
     --pink-800: #b80672;
     --pink-500: #f538a0;
-
+    --pink-50: #fde7f3;
+    --pink-tonal: #702f55;
+    --yellow-50: #fef7e0;
+    --yellow-tonal: #6a5619;
+    --brown-50: #efebe9;
+    --brown-tonal: #6d4c41;
+    
     --error-foreground: var(--red-700);
     --error-background: var(--red-50);
     --error-background-hover: var(--red-700-04);
@@ -234,6 +240,14 @@
     --border-color: var(--gray-300);
     --comment-separator-color: var(--gray-300);
 
+    /* checks tag colors */
+    --tag-gray: var(--gray-200);
+    --tag-yellow: var(--yellow-50);
+    --tag-pink: var(--pink-50);
+    --tag-purple: var(--purple-50);
+    --tag-cyan: var(--cyan-50);
+    --tag-brown: var(--brown-50);
+
     /* status colors */
     --status-merged: var(--green-700);
     --status-abandoned: var(--gray-700);

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

diff --git a/polygerrit-ui/app/styles/themes/dark-theme.ts b/polygerrit-ui/app/styles/themes/dark-theme.ts
index e0342fa..0029cea 100644
--- a/polygerrit-ui/app/styles/themes/dark-theme.ts
+++ b/polygerrit-ui/app/styles/themes/dark-theme.ts
@@ -137,6 +137,14 @@
       --border-color: var(--gray-700);
       --comment-separator-color: var(--border-color);
 
+      /* checks tag colors */
+      --tag-gray: var(--gray-tonal);
+      --tag-yellow: var(--yellow-tonal);
+      --tag-pink: var(--pink-tonal);
+      --tag-purple: var(--purple-tonal);
+      --tag-cyan: var(--cyan-tonal);
+      --tag-brown: var(--brown-tonal);
+
       /* status colors */
       --status-merged: var(--green-400);
       --status-abandoned: var(--gray-300);