Changed workflows rendering again

app/assets/stylesheets/application.css

@@ -65,17 +65,6 @@ 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;
-}
-
 table {
     /* TODO: maybe extract into a separate file */
     details.dropdown {
@@ -104,12 +93,3 @@ a[target=_blank]::after {
         margin-left: auto;
     }
 }
-
-.mask-icon {
-    display: inline-block;
-    height: 1lh;
-    width: 1lh;
-    background-color: var(--icon-color, black);
-    mask-image: var(--icon, url("mingcute/task_line.svg"));
-    mask-size: 100%;
-}

app/assets/stylesheets/badge.css

@@ -0,0 +1,13 @@
+.badge {
+    font-size: 0.875em;
+    border-radius: 1em;
+
+    display: inline-flex;
+    gap: 0.25em;
+    min-width: 2em;
+    padding: 0.1em 0.5em;
+
+    font-weight: 500;
+    text-transform: uppercase;
+
+}

app/assets/stylesheets/mask-icon.css

@@ -0,0 +1,13 @@
+.mask-icon {
+    display: inline-block;
+    background-color: var(--icon-color, currentColor);
+    mask-image: var(--icon);
+    mask-size: 100%;
+
+    height: 1lh;
+    width: 1lh;
+    transform: translateY(0.3em); /* Looks better when inline */
+    .badge & {
+        transform: unset;
+    }
+}

app/assets/stylesheets/tasks.css

@@ -9,6 +9,12 @@
     --color: var(--backlog-color);
     --background-color: var(--backlog-bg);
 
+    &.badge {
+        border: 2px solid var(--border-color, currentColor);
+        color: var(--color, currentColor);
+        background-color: var(--background-color);
+    }
+
     &.analysis {
         --color: var(--analysis-color);
         --background-color: var(--analysis-bg);

app/assets/stylesheets/workflows.css

@@ -1,25 +1,29 @@
 .workflow {
     --color: #424751; /* Pico zinc 700 */
+    --icon: url("mingcute/task_line.svg");
 
-    border-radius: 1em;
-    outline: 2px solid var(--color);
-
-    display: inline-flex;
-    gap: 0.25em;
-    min-width: 2em;
-    padding: 0.1em 0.5em;
+    &.badge {
+        outline: 2px solid var(--color);
+        color: var(--color);
+    }
 
     > .mask-icon {
         --icon-color: var(--color);
     }
 
-    > img {
-        max-width: unset;
-        width: 1lh;
-        opacity: 0.75;
-    }
-
     &.red {
         --color: #BD3C13; /* Pico orange 550 */
     }
+
+    &.blue {
+        --color: #1D59D0; /* Pico blue 600 */
+    }
+
+    &.lime {
+        --color: #628100; /* Pico lime 500 */
+    }
+
+    &.teal {
+        --color: #047878; /* Pico cyan 550 */
+    }
 }