Support design library symbols and colors

README.md

@@ -30,10 +30,12 @@ addBadge(icon: <icon>, text: <text>)
  *
  * icon: The icon for this badge
  * text: The text for this badge
+ * color: (optional) The Jenkins palette/semantic color name of the badge icon symbol
  * id: (optional) Badge identifier. Selectively delete badges by id.
  * link: (optional) The link to be added to this badge
  */
-addBadge(icon: <icon>, text: <text>, id: <id>, link: <link>)
+addBadge(icon: <icon>, text: <text>, color: <color>,
+         id: <id>, link: <link>)
 
 
 // addInfoBadge
@@ -277,6 +279,16 @@ removeSummaries(id: <id>)
 
 ## Icons
 
+Icons can reference [Jenkins Symbols](https://weekly.ci.jenkins.io/design-library/Symbols/), including all the symbols provided by the [ionicons-api-plugin](https://plugins.jenkins.io/ionicons-api).
+
+More symbols can be referenced by installing additional plugins, such as [font-awesome-api-plugin](https://plugins.jenkins.io/font-awesome-api) or [custom-folder-icon-plugin](https://plugins.jenkins.io/custom-folder-icon).
+
+```groovy
+addBadge(icon: 'symbol-cube', text: 'a cubed build')
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'a starred build')
+addBadge(icon: 'symbol-symbolName plugin-yourArtifactId', text: 'another icon build')
+```
+
 In addition to the default [16x16](https://github.com/jenkinsci/jenkins/tree/master/war/src/main/webapp/images/16x16) icons offered by Jenkins, badge plugin provides the following icons:
 
 - ![alt text](src/main/webapp/images/completed.gif "completed.gif") completed.gif
@@ -302,6 +314,39 @@ Other plugin icons can be used by setting the path of the icon within the jenkin
 addBadge(icon: "/static/8361d0d6/images/16x16/help.png", text: "help")
 ```
 
+## Colors
+
+Colors may reference [Jenkins palette colors or variables](https://weekly.ci.jenkins.io/design-library/Colors/).
+
+`symbol` badges **must** reference a named color from the Jenkins palette.
+```groovy
+// jenkins palette colors
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'A star', color: 'yellow')
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'A star', color: 'dark-yellow')
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'A star', color: 'jenkins-!-color-yellow')
+
+// jenkins semantic colors
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'A star', color: 'warning')
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'A star', color: 'success')
+addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'A star', color: 'jenkins-!-warning-color')
+```
+
+Short text badges may use additional css color styles.
+```groovy
+// jenkins palette colors
+addShortText(text: 'ok', color: 'green')
+addShortText(text: 'ok', color: 'jenkins-!-color-green')
+
+// jenkins semantic colors
+addShortText(text: 'ok', color: 'success')
+addShortText(text: 'ok', color: 'jenkins-!-success-color')
+
+// css colors
+addShortText(text: 'ok', color: '#42f557')
+addShortText(text: 'ok', color: 'rgb(66, 245, 87)')
+addShortText(text: 'ok', color: 'var(--green)') // jenkins css vars
+```
+
 ## Allow HTML in Badge and Summary
 
 The badge plugin uses by default the OWASP Markup Formatter to sanitize the HTML Badge and Summary. This feature can be disabled in the Jenkins configuration:

pom.xml

@@ -125,6 +125,10 @@
             <groupId>org.jenkins-ci.plugins</groupId>
             <artifactId>antisamy-markup-formatter</artifactId>
         </dependency>
+        <dependency>
+            <groupId>io.jenkins.plugins</groupId>
+            <artifactId>ionicons-api</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.jenkins-ci.plugins.workflow</groupId>
             <artifactId>workflow-cps</artifactId>

src/main/java/com/jenkinsci/plugins/badge/action/AbstractAction.java

@@ -23,6 +23,8 @@
  */
 package com.jenkinsci.plugins.badge.action;
 
+import edu.umd.cs.findbugs.annotations.CheckForNull;
+import edu.umd.cs.findbugs.annotations.Nullable;
 import hudson.model.Action;
 import org.kohsuke.stapler.export.Exported;
 
@@ -42,4 +44,64 @@
   public String getId() {
     return id;
   }
+
+  /**
+   * Is the icon reference a Jenkins symbol name.
+   * @param icon icon reference
+   * @return {@code true} if the icon reference is a Jenkins symbol name
+   */
+  static boolean isJenkinsSymbolRef(@Nullable String icon) {
+    return icon != null && icon.startsWith("symbol-");
+  }
+
+  /**
+   * Get the Jenkins color class for the given color reference. Returns {@code null} if the color is not a
+   * known Jenkins palette color or semantic color.
+   * @param color color reference
+   * @return jenkins color class name or {@code null}
+   */
+  @CheckForNull
+  static String getJenkinsColorClass(@Nullable String color) {
+    if (color == null) {
+      return null;
+    }
+
+    String primary = color;
+    if (color.startsWith("light-") && color.length() > 6) {
+      primary = color.substring(6);
+    } else if (color.startsWith("dark-") && color.length() > 5) {
+      primary = color.substring(5);
+    }
+
+    // https://github.com/jenkinsci/jenkins/blob/master/war/src/main/scss/abstracts/_theme.scss
+    switch(primary) {
+      // palette
+      case "blue":
+      case "brown":
+      case "cyan":
+      case "green":
+      case "indigo":
+      case "orange":
+      case "pink":
+      case "purple":
+      case "red":
+      case "yellow":
+      case "white":
+      case "black":
+        return "jenkins-!-color-" + color;
+      // semantics
+      case "accent":
+      case "text":
+      case "error":
+      case "warning":
+      case "destructive":
+      case "build":
+      case "success":
+      case "danger":
+      case "info":
+        return "jenkins-!-" + color + "-color";
+      default:
+        return null;
+    }
+  }
 }

src/main/java/com/jenkinsci/plugins/badge/action/BadgeAction.java

@@ -26,6 +26,7 @@
 import com.jenkinsci.plugins.badge.BadgePlugin;
 import hudson.PluginWrapper;
 import hudson.model.Hudson;
+import io.jenkins.plugins.ionicons.Ionicons;
 import jenkins.model.Jenkins;
 import org.kohsuke.stapler.Stapler;
 import org.kohsuke.stapler.StaplerRequest;
@@ -34,6 +35,8 @@
 
 import java.io.File;
 import java.io.IOException;
+import java.util.LinkedList;
+import java.util.List;
 import java.util.logging.Level;
 import java.util.logging.Logger;
 
@@ -43,10 +46,10 @@
   private static final long serialVersionUID = 1L;
   private final String iconPath;
   private final String text;
-  private String color = "#000000";
-  private String background = "#FFFF00";
-  private String border = "1px";
-  private String borderColor = "#C0C000";
+  private String color;
+  private String background;
+  private String border;
+  private String borderColor;
   private String link;
 
   private BadgeAction(String iconPath, String text) {
@@ -65,6 +68,14 @@
     return action;
   }
 
+  public static BadgeAction createBadge(String icon, String color, String text, String link) throws IllegalArgumentException {
+    BadgeAction action = new BadgeAction(getIconPath(icon), text);
+    action.link = link;
+    action.color = color;
+    action.validate();
+    return action;
+  }
+
   public static BadgeAction createShortText(String text) {
     return new BadgeAction(null, text);
   }
@@ -89,23 +100,23 @@
   }
 
   public static BadgeAction createInfoBadge(String text, String link) throws IllegalArgumentException {
-    return createBadge("info.gif", text, link);
+    return createBadge(Ionicons.getIconClassName("information-circle"), "jenkins-!-color-blue", text, link);
   }
 
   public static BadgeAction createWarningBadge(String text) throws IllegalArgumentException {
     return createWarningBadge(text, null);
   }
 
   public static BadgeAction createWarningBadge(String text, String link) throws IllegalArgumentException {
-    return createBadge("warning.gif", text, link);
+    return createBadge(Ionicons.getIconClassName("warning"), "jenkins-!-warning-color", text, link);
   }
 
   public static BadgeAction createErrorBadge(String text) throws IllegalArgumentException {
     return createErrorBadge(text, null);
   }
 
   public static BadgeAction createErrorBadge(String text, String link) throws IllegalArgumentException {
-    return createBadge("error.gif", text, link);
+    return createBadge(Ionicons.getIconClassName("remove-circle"), "jenkins-!-error-color", text, link);
   }
 
   protected void validate() throws IllegalArgumentException {
@@ -181,6 +192,42 @@
     return borderColor;
   }
 
+  /**
+   * Get the class value for the icon element.
+   * @return string of css class names to add or empty string if no class to add.
+   */
+  public String getIconClass() {
+    List<String> classes = new LinkedList<>();
+    if (isJenkinsSymbolRef(this.iconPath)) {
+      classes.add("icon-sm");
+    }
+
+    if (this.color != null) {
+      if (this.color.startsWith("jenkins-!-")) {
+        classes.add(this.color);
+      } else {
+        String colorClass = getJenkinsColorClass(this.color);
+        if (colorClass != null) {
+          classes.add(colorClass);
+        }
+      }
+    }
+
+    return String.join(" ", classes);
+  }
+
+  /**
+   * Get the color value for the {@code style} attribute of the icon element.
+   * @return {@code null} if color not set or color is a Jenkins color class.
+   */
+  public String getIconColorStyle() {
+    if (this.color != null && !this.color.startsWith("jenkins-!-") && getJenkinsColorClass(this.color) == null) {
+        return this.color;
+    }
+
+    return null;
+  }
+
   @Exported
   public String getLink() {
     if (link == null || BadgePlugin.get().isDisableFormatHTML()) {
@@ -204,11 +251,16 @@
       return icon;
     }
 
+    if (isJenkinsSymbolRef(icon)) {
+      return icon;
+    }
+
     Jenkins jenkins = Jenkins.getInstanceOrNull();
 
     // Try plugin images dir, fallback to Hudson images dir
     PluginWrapper wrapper = jenkins != null ? jenkins.getPluginManager().getPlugin("badge") : null;
     boolean pluginIconExists = (wrapper != null) && new File(wrapper.baseResourceURL.getPath() + "/images/" + icon).exists();
     return pluginIconExists ? "/plugin/" + wrapper.getShortName() + "/images/" + icon : Hudson.RESOURCE_PATH + "/images/16x16/" + icon;
   }
+
 }

src/main/java/com/jenkinsci/plugins/badge/action/BadgeSummaryAction.java

@@ -96,27 +96,28 @@
 
   @Whitelisted
   public void appendText(String text, boolean escapeHtml, boolean bold, boolean italic, String color) {
+    String closeTags = "";
     if (bold) {
       summaryText += "<b>";
+      closeTags += "</b>";
     }
     if (italic) {
       summaryText += "<i>";
+      closeTags += "</i>";
     }
     if (color != null) {
-      summaryText += "<font color=\"" + color + "\">";
+      String cls = getJenkinsColorClass(color);
+      if (cls != null) {
+        summaryText += "<span class=\"" + StringEscapeUtils.escapeHtml(cls) + "\">";
+        closeTags += "</span>";
+      } else {
+        summaryText += "<font color=\"" + StringEscapeUtils.escapeHtml(color) + "\">";
+        closeTags += "</font>";
+      }
     }
     if (escapeHtml) {
       text = StringEscapeUtils.escapeHtml(text);
     }
-    summaryText += text;
-    if (color != null) {
-      summaryText += "</font>";
-    }
-    if (italic) {
-      summaryText += "</i>";
-    }
-    if (bold) {
-      summaryText += "</b>";
-    }
+    summaryText += text + closeTags;
   }
 }