Refine badges in Jenkins

core/src/main/resources/hudson/PluginManager/updates.jelly

@@ -131,7 +131,7 @@ THE SOFTWARE.
                             <j:forEach var="label" items="${p.categories}">
                               <j:if test="${!it.isMetaLabel(label)}">
                                 <a href="?filter=${app.updateCenter.getCategoryDisplayName(label)}"
-                                   class="jenkins-table__link jenkins-table__badge">
+                                   class="jenkins-badge">
                                   ${app.updateCenter.getCategoryDisplayName(label)}
                                 </a>
                               </j:if>

core/src/main/resources/hudson/model/Job/buildTimeTrend_resources.js

@@ -123,12 +123,7 @@ window.displayBuilds = function (data) {
     a1.appendChild(span1);
     td2.appendChild(a1);
     var a2 = document.createElement("a");
-    a2.classList.add(
-      "jenkins-table__link",
-      "jenkins-table__badge",
-      "model-link",
-      "inside",
-    );
+    a2.classList.add("jenkins-badge", "model-link");
     a2.href = rootUrl + "/" + e.url;
     a2.textContent = e.displayName;
     td2.appendChild(a2);

core/src/main/resources/hudson/views/DefaultViewsTabBar/viewTabs.jelly

@@ -36,11 +36,7 @@ THE SOFTWARE.
               <l:icon src="${tab.iconFileName}" />
             </j:if>
             ${tab.displayName}
-            <j:if test="${tab.badge != null}">
-              <div class="pill jenkins-!-${tab.badge.severity}-color" aria-label="${tab.badge.tooltip}">
-                ${tab.badge.text}
-              </div>
-            </j:if>
+            <l:badge badge="${tab.badge}" />
           </a>
         </j:forEach>
 

core/src/main/resources/hudson/views/LastFailureColumn/column.jelly

@@ -29,7 +29,7 @@ THE SOFTWARE.
     <j:choose>
       <j:when test="${lfBuild!=null}">
         ${lfBuild.timestampString}
-        <a href="${jobBaseUrl}${job.shortUrl}lastFailedBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lfBuild.displayName}</a>
+        <a href="${jobBaseUrl}${job.shortUrl}lastFailedBuild/" class="jenkins-badge model-link">${lfBuild.displayName}</a>
       </j:when>
       <j:otherwise>
         ${%N/A}

core/src/main/resources/hudson/views/LastStableColumn/column.jelly

@@ -29,7 +29,7 @@ THE SOFTWARE.
     <j:choose>
       <j:when test="${lstBuild!=null}">
         ${lstBuild.timestampString}
-        <a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lstBuild.displayName}</a>
+        <a href="${jobBaseUrl}${job.shortUrl}lastStableBuild/" class="jenkins-badge model-link">${lstBuild.displayName}</a>
       </j:when>
       <j:otherwise>
         ${%N/A}

core/src/main/resources/hudson/views/LastSuccessColumn/column.jelly

@@ -29,7 +29,7 @@ THE SOFTWARE.
     <j:choose>
       <j:when test="${lsBuild!=null}">
         ${lsBuild.timestampString}
-        <a href="${jobBaseUrl}${job.shortUrl}lastSuccessfulBuild/" class="jenkins-table__link jenkins-table__badge model-link inside">${lsBuild.displayName}</a>
+        <a href="${jobBaseUrl}${job.shortUrl}lastSuccessfulBuild/" class="jenkins-badge model-link">${lsBuild.displayName}</a>
       </j:when>
       <j:otherwise>
         ${%N/A}

core/src/main/resources/lib/layout/tabs.jelly

@@ -41,11 +41,7 @@ THE SOFTWARE.
             <l:icon src="${tab.iconFileName}" />
           </j:if>
           ${tab.displayName}
-          <j:if test="${tab.badge != null}">
-            <div class="pill jenkins-!-${tab.badge.severity}-color" aria-label="${tab.badge.tooltip}">
-              ${tab.badge.text}
-            </div>
-          </j:if>
+          <l:badge badge="${tab.badge}" />
         </a>
       </j:forEach>
     </div>

src/main/js/templates/plugin-manager/available.hbs

@@ -19,7 +19,7 @@
             {{#if this.categories }}
                 <div class="app-plugin-manager__categories">
                     {{#each this.categories }}
-                        <a href="?filter={{ this }}" class="jenkins-table__link jenkins-table__badge">
+                        <a href="?filter={{ this }}" class="jenkins-badge">
                         {{ this }}
                         </a>
                     {{/each}}

src/main/scss/abstracts/_colors.scss

@@ -22,9 +22,9 @@
 
 @each $key, $value in theme.$semantics {
   .jenkins-\!-#{$key}-color {
-    --color: #{$value};
+    --color: var(--#{$key}-color);
 
-    color: #{$value} !important;
+    color: var(--#{$key}-color) !important;
   }
 }
 

src/main/scss/components/_badges.scss

@@ -1,4 +1,35 @@
+@use "../abstracts/mixins";
+
+a.jenkins-badge,
+button.jenkins-badge {
+  pointer-events: auto;
+}
+
 .jenkins-badge {
+  @include mixins.item;
+
+  --item-background: color-mix(
+    in sRGB,
+    var(--color, var(--accent-color)) 7.5%,
+    var(--background)
+  );
+  --item-background--hover: color-mix(
+    in sRGB,
+    var(--color, var(--accent-color)) 12.5%,
+    var(--background)
+  );
+  --item-background--active: color-mix(
+    in sRGB,
+    var(--color, var(--accent-color)) 17.5%,
+    var(--background)
+  );
+  --item-box-shadow--focus: color-mix(
+    in sRGB,
+    var(--color, var(--accent-color)) 10%,
+    var(--background)
+  );
+
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7,18 +38,19 @@
   font-weight: 400;
   min-height: 20px;
   min-width: 20px;
-  padding: 0 0.4rem;
-  background: color-mix(
-    in sRGB,
-    var(--text-color-secondary) 12.5%,
-    transparent
-  );
+  padding: 0 0.375rem;
+  gap: 0.35rem;
+  pointer-events: none;
+  text-box: cap alphabetic;
+
+  &::before {
+    border: var(--jenkins-border-width) solid
+      oklch(from currentColor l c h / 0.17);
+    background-clip: padding-box;
+  }
 
-  &[class*="color"] {
-    background: color-mix(in sRGB, var(--color) 85%, transparent);
-    color: var(--white) !important;
-    box-shadow: inset 0 -1px 2px var(--color, var(--text-color-secondary));
-    text-shadow: 0 1px 1px rgb(0 0 0 / 0.1);
-    backdrop-filter: blur(2.5px);
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
   }
 }

src/main/scss/components/_page-header.scss

@@ -102,12 +102,19 @@
     }
 
     .jenkins-badge {
+      --item-background: var(--color, var(--accent-color));
+
       position: absolute;
       top: calc(16%);
       right: calc(16%);
       min-width: 5px;
       min-height: 5px;
       padding: 0;
+
+      &::before {
+        border: var(--jenkins-border--subtle);
+        background-clip: unset;
+      }
     }
   }
 

src/main/scss/components/_section.scss

@@ -105,6 +105,7 @@
       position: absolute;
       top: -4px;
       right: -4px;
+      backdrop-filter: blur(10px);
     }
   }
 

src/main/scss/components/_table.scss

@@ -284,6 +284,13 @@
     }
   }
 
+  .jenkins-badge {
+    padding: 0.125rem 0.625rem;
+    font-size: 0.75rem;
+    margin-left: 0.5rem;
+  }
+
+  // Deprecated - use .jenkins-badge instead
   &__badge {
     @include mixins.item;
 

src/main/scss/components/_tabs.scss

@@ -129,11 +129,6 @@ $border-radius: 19px;
     &:not(.jenkins-button--tertiary) {
       pointer-events: none;
       font-weight: var(--font-bold-weight);
-
-      .pill::before {
-        border: var(--jenkins-border-width) solid
-          color-mix(in sRGB, var(--color, currentColor) 20%, transparent);
-      }
     }
 
     &.jenkins-button--tertiary {
@@ -156,43 +151,10 @@ $border-radius: 19px;
       &::after {
         inset: 1.5px;
       }
-
-      .pill::before {
-        border: var(--jenkins-border-width) solid
-          color-mix(in sRGB, var(--color, currentColor) 20%, transparent);
-      }
     }
 
-    .pill {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 100px;
-      font-size: 12px;
-      min-width: 20px;
-      text-align: center;
-      padding-inline: 6px;
-      text-box: cap alphabetic;
-      height: 20px;
-      z-index: 0;
+    .jenkins-badge {
       margin-right: -0.25rem;
-      transition: border var(--standard-transition);
-
-      &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background: color-mix(
-          in sRGB,
-          var(--color, var(--background)) 5%,
-          var(--background)
-        );
-        border: var(--jenkins-border-width) solid
-          color-mix(in sRGB, var(--color, currentColor) 10%, transparent);
-        z-index: -1;
-      }
     }
   }
 }

src/main/scss/pages/_plugin-manager.scss

@@ -1,10 +1,16 @@
 #plugins {
   .app-plugin-manager__categories {
-    margin: 0.5rem 0;
+    display: flex;
+    gap: 0.4375rem;
+    flex-wrap: wrap;
+    margin-block: 0.5rem;
 
-    a {
-      margin: 0 1.25rem 0 0 !important;
-      font-size: 0.75rem;
+    .jenkins-badge {
+      margin: 0;
+    }
+
+    &:empty {
+      display: none;
     }
   }