Task status badge and index

app/assets/stylesheets/application.css

@@ -35,7 +35,17 @@ site-sidebar {
 }
 
 :root {
-    --error-color: rgb(155, 35, 24); /* Pico color red 650 */
+    --error-color: #861D13; /* Pico red 700 */
+    --error-bg: #F8DCD6; /* Pico red 100 */
+    /* For jade, light on dark looks better */
+    --success-color: #70FCBA;  /* Pico jade 100 */
+    --success-bg: #015234; /* Pico jade 700 */
+    --backlog-color: #424751; /* Pico zinc 700 */
+    --backlog-bg: #E0E3E7; /* Pico zinc 100 */ 
+    --analysis-color: #5B4200; /* Pico amber 700 */
+    --analysis-bg: #FDDEA6; /* Pico amber 100 */
+    --info-color: #014C75; /* Pico azure 700 */
+    --info-bg: #D1E5FB; /* Pico azure 100 */
 }
 
 form {
@@ -54,3 +64,14 @@ form {
         }
     }
 }
+
+.badge {
+    font-size: 0.875em;
+    padding: 0.25em 0.5em;
+    border: 1px solid var(--border-color, currentColor);
+    color: var(--color, currentColor);
+    background-color: var(--background-color, transparent);
+    border-radius: 1em / 0.5em;
+    font-weight: 500;
+    text-transform: uppercase;
+}

app/assets/stylesheets/tasks.css

@@ -0,0 +1,19 @@
+.task-status {
+    --color: var(--backlog-color);
+    --background-color: var(--backlog-bg);
+
+    &.analysis {
+        --color: var(--analysis-color);
+        --background-color: var(--analysis-bg);
+    }
+
+    &.development {
+        --color: var(--info-color);
+        --background-color: var(--info-bg);
+    }
+
+    &.fulfillment {
+        --color: var(--success-color);
+        --background-color: var(--success-bg);
+    }
+}