Refine badges in Jenkins (#11254)

Co-authored-by: Kris Stern <krisstern@outlook.com>

Author: janfaracik

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;
   }
 }