Improve appearance of tooltips and dropdowns (#10428)

Author: krisstern

src/main/js/components/dropdowns/templates.js

@@ -13,6 +13,7 @@ function dropdown() {
     appendTo: document.body,
     offset: [0, 0],
     animation: "dropdown",
+    duration: 250,
     onShow: (instance) => {
       const referenceParent = instance.reference.parentNode;
 

src/main/js/components/tooltips/index.js

@@ -5,6 +5,7 @@ const TOOLTIP_BASE = {
   arrow: false,
   theme: "tooltip",
   animation: "tooltip",
+  duration: 250,
 };
 
 /**

src/main/scss/abstracts/_mixins.scss

@@ -94,7 +94,9 @@
 
   &:not(:disabled) {
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &[aria-describedby],
+    &[aria-expanded="true"] {
       &::before {
         background-color: var(--item-background--hover);
       }

src/main/scss/abstracts/_theme.scss

@@ -137,7 +137,7 @@ $semantics: (
   --jenkins-border-width: 1.5px;
   --jenkins-border-color: color-mix(
     in sRGB,
-    var(--text-color-secondary) 12%,
+    var(--text-color-secondary) 15%,
     var(--card-background)
   );
   --jenkins-border-color--subtle: color-mix(
@@ -212,14 +212,14 @@ $semantics: (
   }
 
   // Tooltips
-  --tooltip-backdrop-filter: saturate(2) blur(20px);
+  --tooltip-backdrop-filter: contrast(1.1) saturate(2) blur(20px);
   --tooltip-color: var(--text-color);
   --tooltip-box-shadow:
     0 0 8px 2px rgb(0 0 50 / 0.05), var(--jenkins-border--subtle-shadow),
-    0 10px 50px rgb(0 0 20 / 0.1);
+    0 10px 50px rgb(0 0 20 / 0.1), inset 0 -1px 2px rgb(255 255 255 / 0.025);
 
   // Dropdowns
-  --dropdown-backdrop-filter: saturate(1.5) blur(20px);
+  --dropdown-backdrop-filter: contrast(1.1) saturate(2) blur(20px);
   --dropdown-box-shadow:
     var(--jenkins-border--subtle-shadow), 0 10px 30px rgb(0 0 20 / 0.1),
     0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
@@ -338,7 +338,7 @@ $semantics: (
   }
 
   // Animations
-  --standard-transition: 0.3s ease;
+  --standard-transition: 0.25s ease;
   --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);
 
   // Plugin manager

src/main/scss/components/_buttons.scss

@@ -63,7 +63,13 @@
 .jenkins-button--tertiary {
   --button-background: transparent !important;
 
-  &:not(:hover, &:active, &:focus) {
+  &:not(
+      :hover,
+      &:active,
+      &:focus,
+      &[aria-describedby],
+      &[aria-expanded="true"]
+    ) {
     &::before {
       border-color: transparent;
     }

src/main/scss/components/_dropdowns.scss

@@ -7,7 +7,7 @@ $dropdown-padding: 0.375rem;
   border-radius: $dropdown-border-radius;
   box-shadow: var(--dropdown-box-shadow);
   outline: none !important;
-  background: color-mix(in sRGB, var(--background) 85%, transparent);
+  background: color-mix(in sRGB, var(--card-background) 85%, transparent);
   backdrop-filter: var(--dropdown-backdrop-filter);
   max-width: unset !important;
   max-height: 75vh;
@@ -25,17 +25,30 @@ $dropdown-padding: 0.375rem;
 }
 
 .tippy-box[data-animation="dropdown"][data-state="hidden"] {
+  $translate: 5px;
+  $scale: 0.99;
+
   opacity: 0;
-  transform: scale(0.975);
+  transform: scale($scale);
 
   &[data-placement^="top"] {
     transform-origin: bottom;
-    transform: translateY(10px) scale(0.975);
+    transform: translateY($translate) scale($scale);
   }
 
   &[data-placement^="bottom"] {
     transform-origin: top;
-    transform: translateY(-10px) scale(0.975);
+    transform: translateY(-$translate) scale($scale);
+  }
+
+  &[data-placement^="left"] {
+    transform-origin: right;
+    transform: translateX($translate) scale($scale);
+  }
+
+  &[data-placement^="right"] {
+    transform-origin: left;
+    transform: translateX(-$translate) scale($scale);
   }
 }
 
@@ -203,7 +216,7 @@ $dropdown-padding: 0.375rem;
     &__chevron {
       position: absolute;
       top: 0;
-      right: 0.125rem;
+      right: 0.1875rem;
       bottom: 0;
       background: var(--text-color-secondary);
       width: 1rem;

src/main/scss/components/_tooltips.scss

@@ -8,7 +8,7 @@
   max-width: min(50vw, 1000px) !important;
   white-space: pre-line;
   z-index: 0;
-  background: color-mix(in sRGB, var(--background) 85%, transparent);
+  background: color-mix(in sRGB, var(--card-background) 85%, transparent);
   backdrop-filter: var(--tooltip-backdrop-filter);
 
   .tippy-content {
@@ -67,17 +67,20 @@
 }
 
 .tippy-box[data-animation="tooltip"][data-state="hidden"] {
+  $translate: 2px;
+  $scale: 0.99;
+
   opacity: 0;
-  transform: scale(0.995);
+  transform: scale($scale);
 
   &[data-placement^="top"] {
     transform-origin: bottom;
-    transform: translateY(2px) scale(0.995);
+    transform: translateY($translate) scale($scale);
   }
 
   &[data-placement^="bottom"] {
     transform-origin: top;
-    transform: translateY(-2px) scale(0.995);
+    transform: translateY(-$translate) scale($scale);
   }
 }
 
@@ -100,9 +103,8 @@
     content: "";
     position: absolute;
     inset: 0;
-    border-radius: 0.375rem;
-    border: var(--jenkins-border-width) solid var(--text-color-secondary);
-    opacity: 0.2;
+    border-radius: 0.3rem;
+    border: var(--jenkins-border-width) solid var(--input-border);
   }
 
   svg {

src/main/scss/form/_search-bar.scss

@@ -210,7 +210,7 @@
   height: 1px; // Setting to 0 caused the items not to render initially in Chrome
   opacity: 0;
   transition: var(--standard-transition);
-  background: color-mix(in sRGB, var(--background) 85%, transparent);
+  background: color-mix(in sRGB, var(--card-background) 85%, transparent);
   backdrop-filter: var(--dropdown-backdrop-filter);
   visibility: collapse;
   scale: 95%;