[yui_button_inspired_style] implement suggestion

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
jenkinsci · Jan 17, 2025 · 17d4cd8 · 17d4cd8
1 parent 5ebe1c8
commit 17d4cd8
Showing 1 changed file with 28 additions and 25 deletions.
diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss
@@ -75,38 +75,40 @@
 }
 
 .jenkins-button--outline {
-  color: var(--text-color) !important;
-  border: 2px solid var(--text-color);
-  font-weight: bold;
-  font-size: var(--font-size-xs);
+  color: var(--color, var(--text-color-secondary)) !important;
+
+  --button-background--hover: color-mix(
+    in sRGB,
+    var(--color, var(--text-color-secondary)) 15%,
+    transparent
+  );
+  --button-background--active: color-mix(
+    in sRGB,
+    var(--color, var(--text-color-secondary)) 20%,
+    transparent
+  );
+  --button-box-shadow--focus: color-mix(
+    in sRGB,
+    var(--color, var(--text-color-secondary)) 10%,
+    transparent
+  );
 
   &::before {
-    background: transparent !important;
+    background: transparent;
+    border: 2px solid var(--color, var(--text-color-secondary));
+    opacity: 1 !important;
   }
 
-  &:not(:disabled) {
-    &:hover {
-      border: 2px solid var(--accent-color) !important;
-      color: var(--accent-color) !important;
-    }
-
-    &:active,
-    &:focus-visible {
-      &::before {
-        opacity: 0.8;
-      }
-
-      &::after {
-        box-shadow: 0 0 0 0.33rem var(--accent-color);
-        opacity: 0.2;
-      }
+  &:hover {
+    &::before {
+      background: var(--button-background--hover) !important;
     }
   }
-}
 
-.jenkins-button--tertiary {
-  &::before {
-    background: transparent;
+  &:active {
+    &::before {
+      background: var(--button-background--active) !important;
+    }
   }
 }
 
@@ -117,6 +119,7 @@
   color: var(--color) !important;
 
   &::before {
+    --button-background: currentColor;
     background: currentColor !important;
     opacity: 0.1;
   }