Merge branch '337622-fix-trial-form-light-borders' into 'master'

Fix select2 form light borders

See merge request gitlab-org/gitlab!67690

app/assets/stylesheets/lazy_bundles/select2_overrides.scss

@@ -14,7 +14,7 @@
   .select2-choice {
     background: var(--white, $white);
     color: var(--gl-text-color, $gl-text-color);
-    border-color: var(--border-color, $border-color);
+    border-color: var(--gray-400, $gray-400);
     height: 34px;
     padding: $gl-vert-padding $gl-input-padding;
     font-size: $gl-font-size;
@@ -41,7 +41,7 @@
     }
 
     &:hover {
-      border-color: var(--gray-200, $gray-200);
+      border-color: var(--gray-400, $gray-400);
       color: var(--gl-text-color, $gl-text-color);
     }
   }
@@ -99,7 +99,7 @@
   background: var(--white, $white);
   box-shadow: 0 2px 4px $dropdown-shadow-color;
   border-radius: $gl-border-radius-base;
-  border: 1px solid var(--border-color, $border-color);
+  border: 1px solid var(--gray-400, $gray-400);
   min-width: 175px;
   color: var(--gl-text-color, $gl-text-color);
   z-index: 999;
@@ -118,7 +118,7 @@
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid var(--border-color, $border-color);
+  border-top: 1px solid var(--gray-400, $gray-400);
   margin-top: -6px;
 }
 
@@ -132,7 +132,7 @@
 .select2-dropdown-open,
 .select2-dropdown-open.select2-drop-above {
   .select2-choice {
-    border-color: var(--border-color, $border-color);
+    border-color: var(--gray-400, $gray-400);
     outline: 0;
   }
 }
@@ -140,7 +140,7 @@
 .select2-container-multi {
   .select2-choices {
     border-radius: $border-radius-default;
-    border-color: var(--border-color, $border-color);
+    border-color: var(--gray-400, $gray-400);
     background: none;
 
     .select2-search-field input {
@@ -153,7 +153,7 @@
     .select2-search-choice {
       margin: 5px 0 0 8px;
       box-shadow: none;
-      border-color: var(--border-color, $border-color);
+      border-color: var(--gray-400, $gray-400);
       color: var(--gl-text-color, $gl-text-color);
       line-height: 15px;
       background-color: var(--gray-50, $gray-50);
@@ -167,7 +167,7 @@
       }
 
       &.select2-search-choice-focus {
-        border-color: var(--gl-text-color, $gl-text-color);
+        border-color: var(--gray-400, $gray-400);
       }
     }
   }
@@ -197,7 +197,7 @@
     background-origin: content-box;
     background-repeat: no-repeat;
     background-position: right 0 bottom 0 !important;
-    border: 1px solid var(--border-color, $border-color);
+    border: 1px solid var(--gray-400, $gray-400);
     border-radius: $border-radius-default;
     line-height: 16px;
     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;