[JENKINS-75529] use plain colors (#11085)

Signed-off-by: Thorsten Scherler <scherler@gmail.com>

src/main/js/add-item.js

@@ -224,16 +224,7 @@ document.addEventListener("DOMContentLoaded", () => {
         // Example for Maven project
         // <div class="icon"><img src="/jenkins/plugin/maven-plugin/images/48x48/mavenmoduleset.png"></div>
       } else {
-        var colors = [
-          "c-49728B",
-          "c-335061",
-          "c-D33833",
-          "c-6D6B6D",
-          "c-6699CC",
-        ];
-        var desc = elem.description || "";
         var name = elem.displayName;
-        var colorClass = colors[desc.length % 4];
         var aName = name.split(" ");
         var a = name.substring(0, 1);
         var b =
@@ -247,7 +238,7 @@ document.addEventListener("DOMContentLoaded", () => {
         spanFakeImgB.className = "b";
         spanFakeImgB.innerText = b;
         iconDiv.appendChild(spanFakeImgB);
-        iconDiv.className = colorClass + " default-icon";
+        iconDiv.className = "default-icon";
 
         // Example for MockFolder
         // <div class="default-icon c-49728B"><span class="a">M</span><span class="b">o</span></div>

src/main/js/widgets/add/addform.scss

@@ -1,5 +1,4 @@
 @use "../../../scss/abstracts/mixins";
-
 #add-item-panel {
   max-width: 850px;
   margin: auto;
@@ -65,13 +64,13 @@
   .default-icon {
     height: 40px;
     width: 40px;
+    border: 1px solid var(--text-color);
     border-radius: 50%;
     text-align: center;
     line-height: 36px;
     font-weight: bold;
     font-size: 125%;
-    color: #ffffff;
-    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 1px;
+    color: var(--text-color);
     opacity: 0.75;
 
     .b {
@@ -79,56 +78,6 @@
     }
   }
 
-  .c-D33833 {
-    border: 1px solid #900;
-    box-shadow:
-      inset #900 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #903,
-      inset -5px -10px 15px 14px #d33833;
-  }
-
-  .c-6D6B6D {
-    border: 1px solid #000;
-    box-shadow:
-      inset #333 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #222,
-      inset -5px -10px 15px 14px #555;
-  }
-
-  .c-335061 {
-    border: 1px solid #356;
-    box-shadow:
-      inset #024 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #012,
-      inset -5px -10px 15px 14px #335061;
-  }
-
-  .c-49728B {
-    border: 1px solid #036;
-    box-shadow:
-      inset #036 0 0 1px,
-      inset #fff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #036,
-      inset -5px -10px 15px 14px #49728b;
-  }
-
-  .c-6699CC {
-    border: 1px solid #6699cc;
-    box-shadow:
-      inset #003399 0 0 1px,
-      inset #ffffff 0 0 0 1px,
-      0 5px 3px -2px rgba(0, 0, 0, 0.25),
-      inset -5px -5px 10px 2px #336699,
-      inset -5px -10px 15px 14px #6699cc;
-  }
-
   input {
     width: 50%;
     min-width: 300px;