ui: Tweak TextInput and Select styles

test/data/ui-screenshots/debug_tracks.test.ts/debug-tracks/debug-track-menu.png.sha256

@@ -1 +1 @@
-92bd72fe856b6a512c6a6e68cc2b2d2a07cb4e68068eb99a8091829928dbb69d
+40fd24296ef697a1798cd6e41d2a2da1d705bada15bd19421ecd2d064ffdadfe

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/back-to-trace-1.png.sha256

@@ -1 +1 @@
-c00796f5102e3cff6b276566e08537ef0d7e2547ab81640006c1f3f913542f41
+f6dc9c52b12954652446ea70704a9fb4c756d98cbf77cb37c7b2f56a9c62415a

test/data/ui-screenshots/local_cache_key.test.ts/multiple-traces-via-url-and-local-cache-key/trace-1.png.sha256

@@ -1 +1 @@
-c00796f5102e3cff6b276566e08537ef0d7e2547ab81640006c1f3f913542f41
+f6dc9c52b12954652446ea70704a9fb4c756d98cbf77cb37c7b2f56a9c62415a

test/data/ui-screenshots/track_event_description.test.ts/Android-log-track-description/android-log-description.png.sha256

@@ -1 +1 @@
-3b4e96b3427a6bac485a65822d1937b9994e3611e5b84ed9821da02c908efe8f
+8a6b1a5ec8c841cd235f18222ab5365dad0eb39e95ce23277dc91cc22341f2d4

ui/src/assets/theme_provider.scss

@@ -25,6 +25,7 @@
   scrollbar-color: var(--pf-color-border) var(--pf-color-background); /* thumb color track color */
 
   &--light {
+    --pf-color-void: white;
     --pf-color-background: white;
     --pf-color-background-secondary: #edf0f1;
     --pf-color-background-tertiary: #e3e9eb;
@@ -75,23 +76,24 @@
   }
 
   &--dark {
-    --pf-color-background: #222226;
-    --pf-color-background-secondary: #343438;
-    --pf-color-background-tertiary: #4a4c52;
+    --pf-color-void: #181818;
+    --pf-color-background: #202020;
+    --pf-color-background-secondary: #343434;
+    --pf-color-background-tertiary: #4a4a4a;
     --pf-color-interactive-base: white;
     --pf-color-text: #dce0e2;
     --pf-color-text-muted: #a0a2a5;
     --pf-color-text-disabled: #8d8d8e;
-    --pf-color-border: #5b5e61;
-    --pf-color-border-secondary: #3b3b3d;
+    --pf-color-border: #484848;
+    --pf-color-border-secondary: #383838;
     --pf-color-text-hint: #9aa0a6;
     --pf-color-box-shadow: rgba(0, 0, 0, 0.4);
     --pf-color-neutral: gray;
     --pf-color-accent: #2667e7;
     --pf-color-text-on-accent: white;
     --pf-color-highlight: #5f4d06;
 
-    --pf-color-primary: #7197e3;
+    --pf-color-primary: #598bed;
     --pf-color-text-on-primary: #333;
     --pf-color-danger: rgb(230, 90, 90);
     --pf-color-text-on-danger: #333;

ui/src/assets/widgets/form.scss

@@ -75,17 +75,17 @@
   }
 
   .pf-select:invalid {
-    border-bottom-color: var(--pf-color-danger);
+    border-color: var(--pf-color-danger);
     &:active,
     &:focus {
-      box-shadow: 0 1px 0 0 var(--pf-color-danger);
+      border-color: var(--pf-color-danger);
     }
   }
 
   .pf-text-input:has(input:invalid) {
-    border-bottom-color: var(--pf-color-danger);
+    border-color: var(--pf-color-danger);
     &:has(input:focus) {
-      box-shadow: 0 1px 0 0 var(--pf-color-danger);
+      border-color: var(--pf-color-danger);
     }
   }
 }

ui/src/assets/widgets/multiselect_input.scss

@@ -21,15 +21,9 @@
   font-size: inherit;
   outline: none; // Disable the default outline
   border: none; // Disable the default border
-  border-bottom: solid 1px var(--pf-color-border); // Thin underline
-  background: none;
-  transition:
-    border $anim-timing,
-    box-shadow $anim-timing,
-    background $anim-timing;
-
-  // Round only the top corners to avoid rounding the edges of the underline
-  border-radius: $border-radius $border-radius 0 0;
+  background: var(--pf-color-void);
+  border: solid 1px var(--pf-color-border-secondary);
+  border-radius: $border-radius;
 
   input {
     outline: none;
@@ -70,16 +64,10 @@
 
   // The gentle hover effect indicates this component is interactive
   &:hover {
-    background: color_hover(transparent);
+    border-color: var(--pf-color-border);
   }
 
   &:focus-within {
-    background: color_hover(transparent);
-    border-bottom: solid 1px var(--pf-color-primary);
-
-    // The box-shadow thickens the bottom border, without adding to the height.
-    // This is the same technique used by materializecss:
-    // See https://materializecss.com/text-inputs.html
-    box-shadow: 0 1px 0 var(--pf-color-primary);
+    border-color: var(--pf-color-primary);
   }
 }

ui/src/assets/widgets/select.scss

@@ -17,37 +17,27 @@
 // Select field styled to look similar to a text input with a thin underline.
 // Inspired by matherial design.
 .pf-select {
+  display: inline;
   font-family: var(--pf-font-compact);
   font-size: inherit;
   outline: none; // Disable the default outline
-  border: none; // Disable the default border
-  border-bottom: solid 1px var(--pf-color-border); // Thin underline
-  background: none;
+  border: solid 1px var(--pf-color-border-secondary);
+  background: var(--pf-color-void);
   color: inherit;
-  transition:
-    border $anim-timing,
-    box-shadow $anim-timing,
-    background $anim-timing;
-  // Round only the top corners to avoid rounding the edges of the underline
-  border-radius: $border-radius $border-radius 0 0;
+  border-radius: $border-radius;
+  padding: 2px;
   cursor: pointer;
 
   // Very opinionated min width for a select input
   // ... any smaller and it stops looking like a select input!
   min-width: 80px;
 
   &:hover {
-    background: color_hover(transparent);
+    border-color: var(--pf-color-border);
   }
 
   &:focus {
-    background: color_hover(transparent);
-    border-bottom: solid 1px var(--pf-color-primary);
-
-    // The box-shadow thickens the bottom border, without adding to the height.
-    // This is the same technique used by materializecss:
-    // See https://materializecss.com/text-inputs.html
-    box-shadow: 0 1px 0 var(--pf-color-primary);
+    border-color: var(--pf-color-primary);
   }
 
   &[disabled] {

ui/src/assets/widgets/tag_input.scss

@@ -21,15 +21,11 @@
   font-size: inherit;
   outline: none; // Disable the default outline
   border: none; // Disable the default border
+  background: var(--pf-color-void);
   border-bottom: solid 1px var(--pf-color-border); // Thin underline
-  background: none;
-  transition:
-    border $anim-timing,
-    box-shadow $anim-timing,
-    background $anim-timing;
-
-  // Round only the top corners to avoid rounding the edges of the underline
-  border-radius: $border-radius $border-radius 0 0;
+  border: solid 1px var(--pf-color-border-secondary);
+  border-radius: $border-radius;
+  padding: 2px 4px;
 
   input {
     outline: none;
@@ -48,16 +44,10 @@
 
   // The gentle hover effect indicates this component is interactive
   &:hover {
-    background: color_hover(transparent);
+    border: solid 1px var(--pf-color-border);
   }
 
   &:focus-within {
-    background: color_hover(transparent);
-    border-bottom: solid 1px var(--pf-color-primary);
-
-    // The box-shadow thickens the bottom border, without adding to the height.
-    // This is the same technique used by materializecss:
-    // See https://materializecss.com/text-inputs.html
-    box-shadow: 0 1px 0 var(--pf-color-primary);
+    border: solid 1px var(--pf-color-primary);
   }
 }

ui/src/assets/widgets/text_input.scss

@@ -17,19 +17,17 @@
 .pf-text-input {
   display: inline-flex;
   align-items: baseline;
-  line-height: 1;
   font-family: var(--pf-font-compact);
   font-size: inherit;
-  border-bottom: solid 1px var(--pf-color-border); // Thin underline
-  background: none;
+  outline: none; // Disable the default outline
   padding: 2px 4px;
-  transition:
-    border $anim-timing,
-    box-shadow $anim-timing,
-    background $anim-timing;
   gap: 4px;
+  background: var(--pf-color-void);
+  border: solid 1px var(--pf-color-border-secondary);
+  border-radius: $border-radius;
 
   &__input {
+    appearance: none;
     font-size: inherit;
     line-height: inherit;
     font-family: inherit;
@@ -48,25 +46,16 @@
   &__left-icon {
     align-self: center;
     line-height: inherit;
-    margin-inline: 2px;
+    color: var(--pf-color-text-muted);
   }
 
-  // Round only the top corners to avoid rounding the edges of the underline
-  border-radius: $border-radius $border-radius 0 0;
-
   // The gentle hover effect indicates this component is interactive
   &:hover {
-    background: color_hover(transparent);
+    border-color: var(--pf-color-border);
   }
 
   &:has(.pf-text-input__input:focus) {
-    background: color_hover(transparent);
-    border-bottom: solid 1px var(--pf-color-primary);
-
-    // The box-shadow thickens the bottom border, without adding to the height.
-    // This is the same technique used by materializecss:
-    // See https://materializecss.com/text-inputs.html
-    box-shadow: 0 1px 0 var(--pf-color-primary);
+    border-color: var(--pf-color-primary);
   }
 
   &:has(.pf-text-input__input[disabled]) {