Select focus styling

Author: darrenburns

src/textual/design.py

@@ -215,7 +215,7 @@ def luminosity_range(spread: float) -> Iterable[tuple[str, float]]:
         # The surface color for builtin focused widgets
         # Use half the luminosity spread in order to land half-way between
         # surface and the surface-lighten-1 shade.
-        colors["surface-active"] = surface.lighten(self.luminosity_spread / 3.5).hex
+        colors["surface-active"] = surface.lighten(self.luminosity_spread / 2.5).hex
 
         return colors
 

src/textual/widgets/_select.py

@@ -110,10 +110,8 @@ class SelectCurrent(Horizontal):
 
     DEFAULT_CSS = """
     SelectCurrent {
-        border: tall transparent;
-        background: $boost;
         color: $text;
-        width: 100%;
+        width: 1fr;
         height: auto;
         padding: 0 2;
 
@@ -211,18 +209,27 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
     DEFAULT_CSS = """
     Select {
         height: auto;
+        background: $surface;
+        border: tall $border-blurred;
 
         & > SelectOverlay {
             width: 1fr;
+            background: $panel;
             display: none;
             height: auto;
             max-height: 12;
             overlay: screen;
             constrain: none inside;
+
+            &:focus {
+                border: tall $border;
+                background: $surface-active;
+            }
         }
 
-        &:focus > SelectCurrent {
-            border: tall $accent;
+        &:focus {
+            background: $surface-active;
+            border: tall $border;
         }
 
         .up-arrow {
@@ -240,10 +247,6 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
         &.-expanded > SelectOverlay {
             display: block;
         }
-
-        &.-expanded > SelectCurrent {
-            border: tall $accent;
-        }
     }
 
     """