Update buttons to support colors

NotMyFault · Jun 19, 2022 · 204bafb · 204bafb
1 parent 1d4be07
commit 204bafb
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 34 deletions.
diff --git a/war/src/main/less/abstracts/colors.less b/war/src/main/less/abstracts/colors.less
@@ -4,18 +4,22 @@
 // e.g. .jenkins-!-color-blue, .jenkins-!-color-light-blue, .jenkins-!-color-dark-blue
 each(@colors, {
   .jenkins-\!-color-light-@{key} {
+    --color: ~"var(--light-@{key})";
     color: ~"var(--light-@{key})" !important;
   }
   .jenkins-\!-color-@{key} {
+    --color: ~"var(--@{key})";
     color: ~"var(--@{key})" !important;
   }
   .jenkins-\!-color-dark-@{key} {
+    --color: ~"var(--dark-@{key})";
     color: ~"var(--dark-@{key})" !important;
   }
 });
 
 each(@semantics, {
   .jenkins-\!-@{key}-color {
+    --color: @value;
     color: @value !important;
   }
 });

diff --git a/war/src/main/less/modules/buttons.less b/war/src/main/less/modules/buttons.less
@@ -1,6 +1,7 @@
 .jenkins-button {
+  .item();
+
   appearance: none;
-  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -13,73 +14,113 @@
   text-decoration: none !important;
   background: transparent;
   color: var(--text-color) !important;
-  z-index: 0;
   border-radius: 10px;
   cursor: pointer;
   min-height: 36px;
   white-space: nowrap;
   gap: 1ch;
 
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: -1;
-    opacity: 0.075;
-    border-radius: inherit;
-    transition: 0.2s ease;
+  &::before {
+    background: var(--item-background--hover);
+  }
+
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+    filter: saturate(0.6);
   }
+}
+
+.jenkins-button--primary {
+  color: var(--button-color--primary) !important;
+  font-weight: 600;
 
   &::before {
-    background: currentColor;
+    background: var(--primary) !important;
   }
 
   &::after {
+    box-shadow: 0 0 0 10px var(--primary);
     opacity: 0;
-    box-shadow: 0 0 0 10px currentColor;
   }
 
   &:hover {
     &::before {
-      opacity: 0.1125;
+      opacity: 0.9;
     }
   }
 
   &:active,
   &:focus {
     &::before {
-      opacity: 0.15;
+      opacity: 0.8;
     }
-
     &::after {
-      opacity: 0.075;
-      box-shadow: 0 0 0 5px currentColor;
+      box-shadow: 0 0 0 5px var(--primary);
+      opacity: 0.2;
     }
   }
+}
 
-  svg {
-    width: 1rem;
-    height: 1rem;
+.jenkins-button--transparent {
+  &::before {
+    background: transparent;
   }
 }
 
-.jenkins-button--primary {
-  color: var(--button-color--primary) !important;
-  font-weight: 600;
+// Support for custom colors
+// Modifier classes must include 'color' in name to work
+.jenkins-button[class*="color"]  {
+  background: transparent;
+  color: var(--color) !important;
+
+  &::before {
+    background: currentColor !important;
+    opacity: 0.1;
+  }
 
-  &::before,
   &::after {
-    color: var(--primary);
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.15;
+    }
   }
 
+  &:active,
+  &:focus {
+    &::before {
+      opacity: 0.2;
+    }
+    &::after {
+      box-shadow: 0 0 0 5px currentColor;
+      opacity: 0.1;
+    }
+  }
+}
+
+.jenkins-button--primary[class*="color"] {
+  background: transparent;
+  color: var(--background) !important;
+
   &::before {
+    background: var(--color) !important;
     opacity: 1;
   }
 
+  &::after {
+    box-shadow: 0 0 0 10px var(--color);
+    opacity: 0;
+  }
+
   &:hover {
     &::before {
       opacity: 0.9;
@@ -92,17 +133,19 @@
       opacity: 0.8;
     }
     &::after {
+      box-shadow: 0 0 0 5px var(--color);
       opacity: 0.3;
     }
   }
 }
 
-.jenkins-button--transparent {
+.jenkins-button--transparent[class*="color"]  {
   &::before {
     opacity: 0;
   }
 }
 
+// Additional button related classes
 .jenkins-buttons-row {
   display: flex;
   align-items: center;

diff --git a/war/src/main/less/modules/icon-size.less b/war/src/main/less/modules/icon-size.less
@@ -25,15 +25,15 @@
         position: absolute;
         inset: 0;
         border-radius: 12px;
-        background: currentColor;
+        background: var(--item-background--hover);
         opacity: 0;
         transition: var(--standard-transition);
       }
 
       &:hover {
         &::before {
           inset: -0.2rem;
-          opacity: 0.05;
+          opacity: 1;
         }
       }
     }
@@ -64,8 +64,7 @@
         position: absolute;
         inset: 0;
         border-radius: inherit;
-        background: currentColor;
-        opacity: 0.05;
+        background: var(--item-background--hover);
       }
     }
   }