Use new surface mixin in for search suggestions and row selection controller (#27419)

* Init

* Push

* Update _row-selection-controller.scss

* Update _search-bar.scss

* Refine

* Update updates.jelly

* Update _row-selection-controller.scss

core/src/main/resources/lib/layout/rowSelectionController.jelly

@@ -48,7 +48,7 @@ THE SOFTWARE.
       </button>
 
       <div class="jenkins-table__checkbox-dropdown">
-        <span>${%Select}</span>
+        <span class="jenkins-dropdown__heading">${%Select}</span>
         <button type="button" data-select="all" class="jenkins-button jenkins-button--tertiary">
           <div class="jenkins-table__checkbox-dropdown__icon">
             <l:icon src="symbol-check" />

src/main/scss/components/_row-selection-controller.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/mixins";
+
 .jenkins-table__checkbox-container {
   position: relative;
   display: flex;
@@ -94,37 +96,22 @@
 .jenkins-table__checkbox-options {
   height: 1.375rem;
   min-height: unset !important;
-  padding: 0 0.2rem !important;
-  margin: 0 0 0 0.2rem !important;
-  border-radius: 6px;
+  padding: 0 0.25rem !important;
+  margin: 0 0 0 0.25rem !important;
+  border-radius: 0.375rem;
 
   svg {
-    max-width: 0.9rem;
-    max-height: 0.9rem;
+    max-width: 1rem;
+    max-height: 1rem;
     pointer-events: none;
     color: var(--input-border);
     transition: var(--standard-transition);
-
-    * {
-      stroke-width: 60px;
-    }
   }
 
-  &::before,
-  &::after {
-    border-radius: 0.33rem;
-  }
-
-  &:hover {
+  &:hover,
+  &:active {
     svg {
-      color: var(--input-border-hover);
-    }
-  }
-
-  &:active,
-  &:focus {
-    svg {
-      color: var(--focus-input-border);
+      color: var(--text-color);
     }
   }
 
@@ -137,19 +124,16 @@
 }
 
 .jenkins-table__checkbox-dropdown {
+  @include mixins.overlay-surface(85%);
+
   position: absolute;
   top: 1.375rem;
   left: 1.375rem;
   display: flex;
   flex-direction: column;
-  border-radius: 0.8rem;
+  border-radius: 1rem;
   z-index: 999;
-  padding: 0.4rem;
-  box-shadow:
-    inset 0 0 0 2px rgb(white, 0.05),
-    0 0 0 1px rgb(black, 0.05),
-    0 5px 10px rgb(black, 0.1),
-    0 5px 20px rgb(black, 0.3);
+  padding: 0.375rem;
   min-width: 170px;
   opacity: 0;
   visibility: collapse;
@@ -157,37 +141,13 @@
   transform-origin: top left;
   transition: var(--standard-transition);
 
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    z-index: -1;
-  }
-
-  &::before {
-    backdrop-filter: brightness(3) blur(5px);
-  }
-
-  &::after {
-    background: var(--background);
-    opacity: 0.9;
-  }
-
-  span {
-    font-size: 0.8rem;
-    color: var(--text-color-secondary);
-    padding: 0.5rem 0.75rem;
-  }
-
   .jenkins-button {
     justify-content: flex-start;
     gap: 0.75rem;
     border-radius: var(--form-input-border-radius);
     margin: 0 !important;
-    padding: 0.5rem 0.9rem !important;
-    min-height: 2.25rem !important;
+    padding: 0.375rem 0.625rem !important;
+    min-height: 2.375rem !important;
   }
 
   &--visible {
@@ -199,8 +159,8 @@
 
 .jenkins-table__checkbox-dropdown__icon {
   position: relative;
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1.25rem;
+  height: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -208,18 +168,8 @@
   &::before {
     content: "";
     position: absolute;
-    inset: -0.15rem;
-    border: 0.1rem solid var(--text-color-secondary);
-    border-radius: 6px;
-    opacity: 0.25;
-  }
-
-  svg {
-    width: 0.9rem;
-    height: 0.9rem;
-
-    * {
-      stroke-width: 50px;
-    }
+    inset: -0.0625rem;
+    border: var(--jenkins-border);
+    border-radius: 0.375rem;
   }
 }

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

@@ -1,3 +1,4 @@
+@use "../abstracts/mixins";
 @use "../base/breakpoints";
 
 .jenkins-search-container {
@@ -197,17 +198,16 @@
 }
 
 .jenkins-search__results-container {
+  @include mixins.overlay-surface(85%);
+
   position: absolute;
   width: 100%;
   border-radius: 1rem;
-  box-shadow: var(--overlay-surface-box-shadow);
   overflow: hidden;
   z-index: 10;
   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(--card-background) 85%, transparent);
-  backdrop-filter: contrast(1.1) saturate(2.5) blur(20px);
   visibility: collapse;
   scale: 95%;
   translate: 0 -0.3125rem;