Add $surface-active variable

Author: darrenburns

src/textual/design.py

@@ -134,7 +134,7 @@ def generate(self) -> dict[str, str]:
 
         colors: dict[str, str] = {}
 
-        def luminosity_range(spread) -> Iterable[tuple[str, float]]:
+        def luminosity_range(spread: float) -> Iterable[tuple[str, float]]:
             """Get the range of shades from darken2 to lighten2.
 
             Returns:
@@ -212,6 +212,11 @@ def luminosity_range(spread) -> Iterable[tuple[str, float]]:
         # cursor is under.
         colors["highlight-hover"] = boost.with_alpha(0.05).hex
 
+        # 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
+
         return colors
 
 

src/textual/widgets/_tree.py

@@ -607,6 +607,7 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
         }
 
         &:focus {
+            background: $surface-active;
             & > .tree--cursor {
                 background: $highlight-cursor;
             }